@propbinder/mobile-design 0.2.91 → 0.2.97

package/fesm2022/propbinder-mobile-design.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, effect, Injectable, inject, Input, Component, input, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, ElementRef, output, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, ContentChild, forwardRef, ViewChild, afterNextRender, ViewEncapsulation, model, createComponent, ChangeDetectionStrategy, NgZone, HostBinding } from '@angular/core';
+import { signal, computed, effect, Injectable, inject, Input, Component, input, output, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, ElementRef, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, ContentChild, forwardRef, ViewChild, afterNextRender, ViewEncapsulation, model, createComponent, ChangeDetectionStrategy, NgZone, Pipe, HostBinding, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@angular/router';
@@ -689,39 +689,91 @@ class DsMobileGlassSpinnerComponent {
      */
     borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileGlassSpinnerComponent, isStandalone: true, selector: "ds-mobile-glass-spinner", inputs: { spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div 
-      class="glass-spinner-overlay" 
-      [style.border-radius.px]="borderRadius()"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading">
-      <div 
-        class="spinner" 
-        [style.width.px]="spinnerSize()"
-        [style.height.px]="spinnerSize()">
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileGlassSpinnerComponent, isStandalone: true, selector: "ds-mobile-glass-spinner", inputs: { spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div 
+      class="glass-spinner-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div 
+        class="spinner" 
+        [style.width.px]="spinnerSize()"
+        [style.height.px]="spinnerSize()">
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
-    <div 
-      class="glass-spinner-overlay" 
-      [style.border-radius.px]="borderRadius()"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading">
-      <div 
-        class="spinner" 
-        [style.width.px]="spinnerSize()"
-        [style.height.px]="spinnerSize()">
-      </div>
-    </div>
+            args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="glass-spinner-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div 
+        class="spinner" 
+        [style.width.px]="spinnerSize()"
+        [style.height.px]="spinnerSize()">
+      </div>
+    </div>
   `, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"] }]
         }], propDecorators: { spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
 
+class DsMobileCountBadgeComponent {
+    count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
+    variant = input('accent', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    display = computed(() => {
+        const n = this.count();
+        return n > 99 ? '99+' : `${n}`;
+    }, ...(ngDevMode ? [{ debugName: "display" }] : []));
+    label = computed(() => `${this.count()} notifikationer`, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCountBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileCountBadgeComponent, isStandalone: true, selector: "ds-mobile-count-badge", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'count-badge count-badge--' + variant()", "attr.aria-label": "label()" } }, ngImport: i0, template: `{{ display() }}`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:16px;padding:0 6px;border-radius:10px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:var(--font-size-xs);line-height:1;color:var(--color-on-accent, #ffffff);white-space:nowrap;box-sizing:border-box}:host(.count-badge--accent){background:var(--color-accent, #6B5FF5)}:host(.count-badge--notification){width:16px;height:16px;min-width:16px;padding:0;border-radius:4px;background:var(--content-feedback-bold-red, #b91c1c)}:host(.count-badge--muted){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCountBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-count-badge', standalone: true, host: {
+                        '[class]': "'count-badge count-badge--' + variant()",
+                        '[attr.aria-label]': "label()",
+                    }, template: `{{ display() }}`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:16px;padding:0 6px;border-radius:10px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:var(--font-size-xs);line-height:1;color:var(--color-on-accent, #ffffff);white-space:nowrap;box-sizing:border-box}:host(.count-badge--accent){background:var(--color-accent, #6B5FF5)}:host(.count-badge--notification){width:16px;height:16px;min-width:16px;padding:0;border-radius:4px;background:var(--content-feedback-bold-red, #b91c1c)}:host(.count-badge--muted){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white)}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class DsMobileNotificationButtonComponent {
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileNotificationButtonComponent, isStandalone: true, selector: "ds-mobile-notification-button", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <ds-icon-button
+      icon="remixNotificationLine"
+      variant="secondary"
+      size="md"
+      (clicked)="clicked.emit()"
+      [ariaLabel]="'Notifikationer'"
+    />
+    @if (count() > 0) {
+      <ds-mobile-count-badge [count]="count()" variant="notification" />
+    }
+  `, isInline: true, styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center}ds-icon-button{--text-color-default-secondary: var(--color-header-content, white);--text-color-default-primary: var(--color-header-content, white);--color-background-neutral-secondary-hover: rgba(var(--color-header-content-rgb, 255, 255, 255), .1);--color-background-neutral-secondary: transparent}ds-icon-button::ng-deep button{border-radius:50%!important}ds-mobile-count-badge{position:absolute;top:0;right:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileCountBadgeComponent, selector: "ds-mobile-count-badge", inputs: ["count", "variant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-notification-button', standalone: true, imports: [DsIconButtonComponent, DsMobileCountBadgeComponent], template: `
+    <ds-icon-button
+      icon="remixNotificationLine"
+      variant="secondary"
+      size="md"
+      (clicked)="clicked.emit()"
+      [ariaLabel]="'Notifikationer'"
+    />
+    @if (count() > 0) {
+      <ds-mobile-count-badge [count]="count()" variant="notification" />
+    }
+  `, styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center}ds-icon-button{--text-color-default-secondary: var(--color-header-content, white);--text-color-default-primary: var(--color-header-content, white);--color-background-neutral-secondary-hover: rgba(var(--color-header-content-rgb, 255, 255, 255), .1);--color-background-neutral-secondary: transparent}ds-icon-button::ng-deep button{border-radius:50%!important}ds-mobile-count-badge{position:absolute;top:0;right:0;pointer-events:none}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
 /**
  * MobilePageBase
  *
@@ -1415,10 +1467,15 @@ class DsMobileListItemComponent {
       }
 
       <div class="content-main">
-        @if (title()) {
-        <h3 class="structured-title">{{ title() }}</h3>
-        } @if (subtitle()) {
-        <p class="structured-subtitle">{{ subtitle() }}</p>
+        @if (title() || subtitle()) {
+        <div class="structured-text">
+          @if (title()) {
+          <h3 class="structured-title">{{ title() }}</h3>
+          }
+          @if (subtitle()) {
+          <p class="structured-subtitle">{{ subtitle() }}</p>
+          }
+        </div>
         }
 
         <ng-content select="[content-main]" />
@@ -1440,7 +1497,7 @@ class DsMobileListItemComponent {
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host(.flush-top){padding-top:0}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}:host(.no-leading-content):after{left:0}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:transparent;border-radius:16px;z-index:0;pointer-events:none}:host(.interactive){cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important;box-sizing:border-box!important;width:32px!important;height:32px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host(.flush-top){padding-top:0}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}:host(.no-leading-content):after{left:0}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:transparent;border-radius:16px;z-index:0;pointer-events:none}:host(.interactive){cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-text{display:flex;flex-direction:column;gap:2px}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important;box-sizing:border-box!important;width:32px!important;height:32px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileListItemComponent, decorators: [{
             type: Component,
@@ -1479,10 +1536,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
 
       <div class="content-main">
-        @if (title()) {
-        <h3 class="structured-title">{{ title() }}</h3>
-        } @if (subtitle()) {
-        <p class="structured-subtitle">{{ subtitle() }}</p>
+        @if (title() || subtitle()) {
+        <div class="structured-text">
+          @if (title()) {
+          <h3 class="structured-title">{{ title() }}</h3>
+          }
+          @if (subtitle()) {
+          <p class="structured-subtitle">{{ subtitle() }}</p>
+          }
+        </div>
         }
 
         <ng-content select="[content-main]" />
@@ -1504,7 +1566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host(.flush-top){padding-top:0}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}:host(.no-leading-content):after{left:0}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:transparent;border-radius:16px;z-index:0;pointer-events:none}:host(.interactive){cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important;box-sizing:border-box!important;width:32px!important;height:32px!important}\n"] }]
+  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host(.flush-top){padding-top:0}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}:host(.no-leading-content):after{left:0}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:transparent;border-radius:16px;z-index:0;pointer-events:none}:host(.interactive){cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-text{display:flex;flex-direction:column;gap:2px}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important;box-sizing:border-box!important;width:32px!important;height:32px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { leadingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], flushTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "flushTop", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], enableLongPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLongPress", required: false }] }], showDesktopMoreButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDesktopMoreButton", required: false }] }], moreActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreActions", required: false }] }], moreButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreButtonAriaLabel", required: false }] }], interactiveOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], dividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerSpacing", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], moreButtonClick: [{ type: i0.Output, args: ["moreButtonClick"] }] } });
 
 /**
@@ -5835,6 +5897,9 @@ class DsMobilePageMainComponent extends MobilePageBase {
     avatarInitials = input('U', ...(ngDevMode ? [{ debugName: "avatarInitials" }] : []));
     avatarSrc = input('', ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
     avatarIconName = input('remixUser3Line', ...(ngDevMode ? [{ debugName: "avatarIconName" }] : []));
+    // Inputs - Notifications
+    showNotification = input(true, ...(ngDevMode ? [{ debugName: "showNotification" }] : []));
+    notificationCount = input(0, ...(ngDevMode ? [{ debugName: "notificationCount" }] : []));
     // Inputs - Features
     showRefresh = input(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
     showCondensedHeader = input(true, ...(ngDevMode ? [{ debugName: "showCondensedHeader" }] : []));
@@ -5872,7 +5937,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
      *   {
      *     actions: [
      *       { action: 'profile', title: 'Min profil', icon: 'remixUser3Line' },
-     *       { action: 'settings', title: 'Indstillinger', icon: 'remixSettings3Line' }
+     *       { action: 'settings', title: 'Notifikationer', icon: 'remixNotificationLine' }
      *     ]
      *   },
      *   {
@@ -5885,6 +5950,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
      */
     profileMenuItems = input(undefined, ...(ngDevMode ? [{ debugName: "profileMenuItems" }] : []));
     // Outputs
+    notificationClick = output();
     avatarClick = output();
     /**
      * Emitted when a profile menu action is selected.
@@ -5920,8 +5986,8 @@ class DsMobilePageMainComponent extends MobilePageBase {
                     },
                     {
                         action: 'settings',
-                        title: 'Indstillinger',
-                        icon: 'remixSettings3Line',
+                        title: 'Notifikationer',
+                        icon: 'remixNotificationLine',
                         destructive: false,
                     },
                     {
@@ -6074,7 +6140,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
         this.refresh.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobilePageMainComponent, isStandalone: true, selector: "ds-mobile-page-main", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, firstEntry: { classPropertyName: "firstEntry", publicName: "firstEntry", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showCondensedHeader: { classPropertyName: "showCondensedHeader", publicName: "showCondensedHeader", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, headerFadeDistance: { classPropertyName: "headerFadeDistance", publicName: "headerFadeDistance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, profileMenuItems: { classPropertyName: "profileMenuItems", publicName: "profileMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", refresh: "refresh", scroll: "scroll" }, host: { properties: { "style.--content-wrapper-padding": "contentPadding()" } }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobilePageMainComponent, isStandalone: true, selector: "ds-mobile-page-main", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, firstEntry: { classPropertyName: "firstEntry", publicName: "firstEntry", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, showNotification: { classPropertyName: "showNotification", publicName: "showNotification", isSignal: true, isRequired: false, transformFunction: null }, notificationCount: { classPropertyName: "notificationCount", publicName: "notificationCount", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showCondensedHeader: { classPropertyName: "showCondensedHeader", publicName: "showCondensedHeader", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, headerFadeDistance: { classPropertyName: "headerFadeDistance", publicName: "headerFadeDistance", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, profileMenuItems: { classPropertyName: "profileMenuItems", publicName: "profileMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", refresh: "refresh", scroll: "scroll" }, host: { properties: { "style.--content-wrapper-padding": "contentPadding()" } }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <!-- Fixed header at top -->
     <ion-header>
       <ion-toolbar>
@@ -6085,8 +6151,14 @@ class DsMobilePageMainComponent extends MobilePageBase {
           <!-- Title - fades in on scroll -->
           <ion-title class="header-main__title">{{ title() }}</ion-title>
 
-          <!-- Avatar -->
+          <!-- Notification + Avatar -->
           <div class="header-main__actions">
+            @if (showNotification()) {
+              <ds-mobile-notification-button
+                [count]="notificationCount()"
+                (clicked)="notificationClick.emit()"
+              />
+            }
             <ds-avatar
               [size]="'md'"
               [type]="avatarType()"
@@ -6151,11 +6223,11 @@ class DsMobilePageMainComponent extends MobilePageBase {
         </div>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileGlassSpinnerComponent], host: {
+            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileGlassSpinnerComponent, DsMobileNotificationButtonComponent], host: {
                         '[style.--content-wrapper-padding]': 'contentPadding()'
                     }, template: `
     <!-- Fixed header at top -->
@@ -6168,8 +6240,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <!-- Title - fades in on scroll -->
           <ion-title class="header-main__title">{{ title() }}</ion-title>
 
-          <!-- Avatar -->
+          <!-- Notification + Avatar -->
           <div class="header-main__actions">
+            @if (showNotification()) {
+              <ds-mobile-notification-button
+                [count]="notificationCount()"
+                (clicked)="notificationClick.emit()"
+              />
+            }
             <ds-avatar
               [size]="'md'"
               [type]="avatarType()"
@@ -6238,7 +6316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ionContent: [{
                 type: ViewChild,
                 args: [IonContent]
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], firstEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstEntry", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showCondensedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCondensedHeader", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], headerFadeDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerFadeDistance", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], profileMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileMenuItems", required: false }] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }], profileActionSelected: [{ type: i0.Output, args: ["profileActionSelected"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], scroll: [{ type: i0.Output, args: ["scroll"] }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], firstEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstEntry", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], showNotification: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotification", required: false }] }], notificationCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationCount", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showCondensedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCondensedHeader", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], headerFadeDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerFadeDistance", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], profileMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileMenuItems", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], avatarClick: [{ type: i0.Output, args: ["avatarClick"] }], profileActionSelected: [{ type: i0.Output, args: ["profileActionSelected"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], scroll: [{ type: i0.Output, args: ["scroll"] }] } });
 
 /**
  * DsMobileInlineTabsComponent
@@ -6297,16 +6375,16 @@ class DsMobileInlineTabsComponent {
               }
             </div>
           } @else if (tab.badge && tab.badge > 0) {
-            <span class="tab-badge">{{ tab.badge }}</span>
+            <ds-mobile-count-badge [count]="tab.badge" variant="muted" />
           }
         </button>
       }
     </div>
-  `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
+  `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.filter-tab.active ds-mobile-count-badge{--header-content-color-rgb: var(--color-on-header-accent-rgb, 255, 255, 255);--header-content-color: var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileCountBadgeComponent, selector: "ds-mobile-count-badge", inputs: ["count", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInlineTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule, DsIconComponent], template: `
+            args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule, DsIconComponent, DsMobileCountBadgeComponent], template: `
     <div class="filter-tabs">
       @for (tab of tabs(); track tab.id) {
         <button 
@@ -6327,12 +6405,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               }
             </div>
           } @else if (tab.badge && tab.badge > 0) {
-            <span class="tab-badge">{{ tab.badge }}</span>
+            <ds-mobile-count-badge [count]="tab.badge" variant="muted" />
           }
         </button>
       }
     </div>
-  `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"] }]
+  `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.filter-tab.active ds-mobile-count-badge{--header-content-color-rgb: var(--color-on-header-accent-rgb, 255, 255, 255);--header-content-color: var(--color-on-header-accent, white)}.filter-tab.has-envelope{gap:0}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 
 /**
@@ -11756,7 +11834,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
             this.headerMeta() ||
             this.hasContentInSlot(this.headerLeading) ||
             this.hasContentInSlot(this.headerMain) ||
-            this.hasContentInSlot(this.headerTrailing));
+            !!this.headerTrailing);
     }
     /**
      * Check whether header-leading slot has actual projected content.
@@ -11764,6 +11842,9 @@ class DsMobileModalBaseComponent extends MobileModalBase {
     hasHeaderLeadingContent() {
         return this.hasContentInSlot(this.headerLeading);
     }
+    hasHeaderTrailingContent() {
+        return !!this.headerTrailing;
+    }
     /**
      * Check if a content child slot has actual content
      */
@@ -19246,11 +19327,14 @@ class DsMobileTabBarComponent {
      * ```
      */
     profileMenuItems;
+    // Notification inputs
+    notificationCount = 0;
     moreMenuItems = [];
     moreMenuLabel = 'Mere';
     moreMenuIcon = 'remixGridLine';
     moreMenuIconActive = 'remixGridFill';
     // Outputs
+    notificationClick = new EventEmitter();
     avatarClick = new EventEmitter();
     /**
      * Emitted when a profile menu action is selected.
@@ -19836,7 +19920,7 @@ class DsMobileTabBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTabBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName", profileMenuItems: "profileMenuItems", moreMenuItems: "moreMenuItems", moreMenuLabel: "moreMenuLabel", moreMenuIcon: "moreMenuIcon", moreMenuIconActive: "moreMenuIconActive" }, outputs: { avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", moreMenuItemSelected: "moreMenuItemSelected" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName", profileMenuItems: "profileMenuItems", notificationCount: "notificationCount", moreMenuItems: "moreMenuItems", moreMenuLabel: "moreMenuLabel", moreMenuIcon: "moreMenuIcon", moreMenuIconActive: "moreMenuIconActive" }, outputs: { notificationClick: "notificationClick", avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", moreMenuItemSelected: "moreMenuItemSelected" }, ngImport: i0, template: `
     <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
       <!-- Logo (desktop only, full logo in header) -->
       <div class="ds-tab-bar__logo">
@@ -19879,16 +19963,20 @@ class DsMobileTabBarComponent {
         }
       </div>
 
-      <!-- Avatar (desktop only, positioned via CSS) -->
+      <!-- Notification + Avatar (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__actions">
+        <ds-mobile-notification-button
+          [count]="notificationCount"
+          (clicked)="notificationClick.emit()"
+        />
         <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
       </div>
     </ion-tab-bar>
-  `, isInline: true, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--app-safe-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(.plt-android) ion-tab-bar[slot=bottom]{padding-bottom:max(8px,var(--app-safe-bottom, 0px))!important}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:var(--app-safe-bottom, 0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:var(--app-safe-bottom, 0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);--padding-start: 0;--padding-end: 0;--ripple-color: transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:11px;font-weight:500;letter-spacing:-.5px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }] });
+  `, isInline: true, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--app-safe-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(.plt-android) ion-tab-bar[slot=bottom]{padding-bottom:max(8px,var(--app-safe-bottom, 0px))!important}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:var(--app-safe-bottom, 0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:var(--app-safe-bottom, 0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);--padding-start: 0;--padding-end: 0;--ripple-color: transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:11px;font-weight:500;letter-spacing:-.5px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent], template: `
+            args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent, DsMobileNotificationButtonComponent], template: `
     <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
       <!-- Logo (desktop only, full logo in header) -->
       <div class="ds-tab-bar__logo">
@@ -19931,8 +20019,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }
       </div>
 
-      <!-- Avatar (desktop only, positioned via CSS) -->
+      <!-- Notification + Avatar (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__actions">
+        <ds-mobile-notification-button
+          [count]="notificationCount"
+          (clicked)="notificationClick.emit()"
+        />
         <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
       </div>
     </ion-tab-bar>
@@ -19949,6 +20041,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], profileMenuItems: [{
                 type: Input
+            }], notificationCount: [{
+                type: Input
             }], moreMenuItems: [{
                 type: Input
             }], moreMenuLabel: [{
@@ -19957,6 +20051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], moreMenuIconActive: [{
                 type: Input
+            }], notificationClick: [{
+                type: Output
             }], avatarClick: [{
                 type: Output
             }], profileActionSelected: [{
@@ -20025,7 +20121,7 @@ class DsMobileTabsComponent {
         (avatarClick)="handleAvatarClick()"
       />
     </ion-tabs>
-  `, isInline: true, styles: [":host{display:block;height:100vh;height:100dvh}ion-tabs{height:100%;background:var(--color-header-surface)}@media (max-width: 767px){ion-tabs:has(ds-mobile-page-details) ds-mobile-tab-bar{--tab-bar-transform: translateY(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTab, selector: "ion-tab", inputs: ["component", "tab"] }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems", "moreMenuItems", "moreMenuLabel", "moreMenuIcon", "moreMenuIconActive"], outputs: ["avatarClick", "profileActionSelected", "moreMenuItemSelected"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100vh;height:100dvh}ion-tabs{height:100%;background:var(--color-header-surface)}@media (max-width: 767px){ion-tabs:has(ds-mobile-page-details) ds-mobile-tab-bar{--tab-bar-transform: translateY(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTab, selector: "ion-tab", inputs: ["component", "tab"] }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems", "notificationCount", "moreMenuItems", "moreMenuLabel", "moreMenuIcon", "moreMenuIconActive"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "moreMenuItemSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTabsComponent, decorators: [{
             type: Component,
@@ -21806,7 +21902,7 @@ class DsMobileEmptyStateComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:24px}.empty-state-image{width:96px;height:96px;margin:0 auto}.empty-state-text{display:flex;flex-direction:column;gap:8px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:block}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:24px}.empty-state-image{width:120px;height:120px;margin:0 auto}.empty-state-text{display:flex;flex-direction:column;gap:8px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileEmptyStateComponent, decorators: [{
             type: Component,
@@ -21825,7 +21921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }
       </div>
     </div>
-  `, styles: [":host{display:block}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:24px}.empty-state-image{width:96px;height:96px;margin:0 auto}.empty-state-text{display:flex;flex-direction:column;gap:8px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}\n"] }]
+  `, styles: [":host{display:block}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:24px}.empty-state-image{width:120px;height:120px;margin:0 auto}.empty-state-text{display:flex;flex-direction:column;gap:8px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}\n"] }]
         }], propDecorators: { imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
 /**
@@ -22702,16 +22798,16 @@ class DsMobileCardInlineBannerComponent {
       
       <div content-trailing class="item-trailing">
         @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
+          <ds-mobile-count-badge [count]="unreadCount()!" variant="accent" />
         }
         <ds-icon name="remixArrowRightSLine" size="20px" />
       </div>
     </ds-mobile-card-inline>
-  `, isInline: true, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-accent, #6B5FF5);color:var(--color-on-accent, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+  `, isInline: true, styles: ["ds-mobile-count-badge{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }, { kind: "component", type: DsMobileCountBadgeComponent, selector: "ds-mobile-count-badge", inputs: ["count", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCardInlineBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
+            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent, DsMobileCountBadgeComponent], template: `
     <ds-mobile-card-inline
       [variant]="layout()"
       (cardClick)="handleBannerClick()">
@@ -22736,12 +22832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       
       <div content-trailing class="item-trailing">
         @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
+          <ds-mobile-count-badge [count]="unreadCount()!" variant="accent" />
         }
         <ds-icon name="remixArrowRightSLine" size="20px" />
       </div>
     </ds-mobile-card-inline>
-  `, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-accent, #6B5FF5);color:var(--color-on-accent, #ffffff);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"] }]
+  `, styles: ["ds-mobile-count-badge{margin-right:8px}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] } });
 
 /**
@@ -26092,7 +26188,7 @@ class DsMobilePriceSheetComponent {
                   inputmode="numeric"
                   pattern="[0-9]*"
                   maxlength="5"
-                  [attr.size]="Math.min(customPrice()?.length || 2, 5)"
+                  [attr.size]="Math.min(customPrice().length || 2, 5)"
                   [(ngModel)]="customPrice"
                   placeholder="75"
                   class="price-input-native"
@@ -26147,7 +26243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                   inputmode="numeric"
                   pattern="[0-9]*"
                   maxlength="5"
-                  [attr.size]="Math.min(customPrice()?.length || 2, 5)"
+                  [attr.size]="Math.min(customPrice().length || 2, 5)"
                   [(ngModel)]="customPrice"
                   placeholder="75"
                   class="price-input-native"
@@ -28624,7 +28720,755 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;width:100%}.property-banner{display:flex;align-items:center;gap:8px;height:44px;padding:4px 10px 4px 6px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1);border:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;cursor:pointer;transition:background .2s ease;-webkit-tap-highlight-color:transparent}.property-banner:hover{background:rgba(var(--header-content-color-rgb, 255, 255, 255),.12)}.property-banner:active{background:rgba(var(--header-content-color-rgb, 255, 255, 255),.15)}.property-photo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.property-text{display:flex;flex-direction:column;flex:1;min-width:0}.property-address{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--header-content-color, white);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.property-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.property-chevron{flex-shrink:0;width:16px;height:16px;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.5)}\n"] }]
         }], propDecorators: { address: [{ type: i0.Input, args: [{ isSignal: true, alias: "address", required: true }] }], photoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoUrl", required: true }] }], tenantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenantCount", required: false }] }] } });
 
-// Mobile Page Components
+class DsMobileNotificationPromptComponent {
+    whitelabel = inject(WhitelabelService);
+    dismissing = signal(false, ...(ngDevMode ? [{ debugName: "dismissing" }] : []));
+    heading = input('Vær den første til at vide det', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    subtitle = input('Hold dig opdateret med henvendelser, bookinger, nyheder og alt derimellem.', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    allowLabel = input('Slå notifikationer til', ...(ngDevMode ? [{ debugName: "allowLabel" }] : []));
+    dismissLabel = input('Ikke lige nu', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : []));
+    allow = output();
+    dismiss = output();
+    static EXIT_DURATION = 800;
+    handleAllow() {
+        if (this.dismissing())
+            return;
+        this.dismissing.set(true);
+        setTimeout(() => this.allow.emit(), DsMobileNotificationPromptComponent.EXIT_DURATION);
+    }
+    handleDismiss() {
+        if (this.dismissing())
+            return;
+        this.dismissing.set(true);
+        setTimeout(() => this.dismiss.emit(), DsMobileNotificationPromptComponent.EXIT_DURATION);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationPromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileNotificationPromptComponent, isStandalone: true, selector: "ds-mobile-notification-prompt", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, allowLabel: { classPropertyName: "allowLabel", publicName: "allowLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { allow: "allow", dismiss: "dismiss" }, ngImport: i0, template: `
+    <div class="notification-prompt" [class.is-dismissing]="dismissing()">
+      <div
+        class="notification-prompt__backdrop"
+        [style.background]="whitelabel.headerSurface()">
+      </div>
+
+      <!-- Illustration: floating icon tiles -->
+      <div class="notification-prompt__illustration">
+        <div class="icon-tiles">
+
+          <!-- Tile 1: service/heart-handshake (top-center, small 72px) -->
+          <div class="tile-entry tile-entry--1">
+            <div class="icon-tile icon-tile--1">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 45 45" fill="none">
+                  <path d="M5.928 8.379c4.545-4.545 11.787-4.75 16.575-.615 4.785-4.135 12.026-3.93 16.571.615 4.537 4.537 4.749 11.76.637 16.549L25.153 39.536a3.75 3.75 0 0 1-5.098.19l-.206-.19L5.291 24.928c-4.112-4.789-3.9-12.012.637-16.549zm2.652 2.651c-3.2 3.201-3.292 8.334-.274 11.645l.274.288L22.5 36.884l9.943-9.945-6.628-6.628-1.988 1.989a4.688 4.688 0 0 1-6.628-6.628l3.94-3.943c-3.212-2.57-7.866-2.453-10.945.245l-.287.275zm15.91 5.303a1.875 1.875 0 0 1 2.651 0l7.954 7.954 1.327-1.325c3.295-3.295 3.295-8.637 0-11.932-3.2-3.201-8.333-3.292-11.645-.274l-.287.274-5.967 5.967a1.875 1.875 0 0 0-.146 2.497l.146.164a1.875 1.875 0 0 0 2.497.145l.164-.145 3.314-3.315z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 2: calendar (right-bottom, medium 88px) -->
+          <div class="tile-entry tile-entry--2">
+            <div class="icon-tile icon-tile--medium icon-tile--2">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M9 1v2h6V1h2v2h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2zm11 9H4v9h16v-9zm-4.964 1.136l1.414 1.414-4.95 4.95-3.536-3.536L9.38 12.55l2.121 2.122 3.536-3.536zM7 5H4v3h16V5h-3v1h-2V5H9v1H7V5z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 3: documents (bottom-left, small 72px) -->
+          <div class="tile-entry tile-entry--3">
+            <div class="icon-tile icon-tile--3">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zM19 4H5v16h14V4zM7 6h4v4H7V6zm0 6h10v2H7v-2zm0 4h10v2H7v-2zm6-9h4v2h-4V7z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 4: messages (right-upper, medium 88px) -->
+          <div class="tile-entry tile-entry--4">
+            <div class="icon-tile icon-tile--medium icon-tile--4">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176zM7.581 18.71l.29.158A7.956 7.956 0 0 0 12 20c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8c0 1.458.39 2.823 1.131 4.13l.159.288-.69 3.1 3.1-.69z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 5: home (left-middle, medium 88px) -->
+          <div class="tile-entry tile-entry--5">
+            <div class="icon-tile icon-tile--medium icon-tile--5">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12v-9.157l-6-5.454-6 5.454V19zm2-4h8v2H8v-2z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hero: bell icon (center, 120px) -->
+          <div class="tile-entry tile-entry--hero">
+            <div class="icon-tile icon-tile--hero">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z" fill="currentColor"/>
+                </svg>
+              </div>
+              <span class="icon-tile__badge">18</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Heading + subtitle -->
+      <div class="notification-prompt__texts">
+        <h1 class="notification-prompt__heading">{{ heading() }}</h1>
+        <p class="notification-prompt__subtitle">{{ subtitle() }}</p>
+      </div>
+
+      <!-- CTA buttons -->
+      <div class="notification-prompt__actions">
+        <ds-button
+          variant="primary"
+          size="md"
+          (clicked)="handleAllow()">
+          {{ allowLabel() }}
+        </ds-button>
+        <ds-button
+          class="dismiss-btn"
+          variant="ghost"
+          size="md"
+          (clicked)="handleDismiss()">
+          {{ dismissLabel() }}
+        </ds-button>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes tileEntry{0%{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes float1{0%{transform:var(--tile-transform) translate(0) rotate(0)}11%{transform:var(--tile-transform) translate(1.4px,-3px) rotate(.9deg)}23%{transform:var(--tile-transform) translate(2.2px,-6.5px) rotate(1.8deg)}37%{transform:var(--tile-transform) translate(.6px,-8.5px) rotate(.4deg)}50%{transform:var(--tile-transform) translate(-1.2px,-7px) rotate(-.8deg)}63%{transform:var(--tile-transform) translate(-1.8px,-4px) rotate(-1.6deg)}76%{transform:var(--tile-transform) translate(-.4px,-1.5px) rotate(-.5deg)}88%{transform:var(--tile-transform) translate(.8px,-.5px) rotate(.3deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float2{0%{transform:var(--tile-transform) translate(0) rotate(0)}12%{transform:var(--tile-transform) translate(-1px,-2.5px) rotate(-.7deg)}25%{transform:var(--tile-transform) translate(-2px,-5.5px) rotate(-1.5deg)}38%{transform:var(--tile-transform) translate(-.8px,-7px) rotate(-.3deg)}50%{transform:var(--tile-transform) translate(1px,-6px) rotate(1deg)}62%{transform:var(--tile-transform) translate(1.6px,-3.5px) rotate(1.6deg)}75%{transform:var(--tile-transform) translate(.5px,-1.5px) rotate(.6deg)}87%{transform:var(--tile-transform) translate(-.5px,-.3px) rotate(-.2deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float3{0%{transform:var(--tile-transform) translate(0) rotate(0)}10%{transform:var(--tile-transform) translate(.8px,-3px) rotate(1.2deg)}22%{transform:var(--tile-transform) translate(1.5px,-7px) rotate(2deg)}35%{transform:var(--tile-transform) translate(.3px,-10px) rotate(.8deg)}48%{transform:var(--tile-transform) translate(-1.5px,-9.5px) rotate(-.6deg)}60%{transform:var(--tile-transform) translate(-2px,-6px) rotate(-1.5deg)}72%{transform:var(--tile-transform) translate(-1px,-3px) rotate(-.8deg)}85%{transform:var(--tile-transform) translate(.3px,-1px) rotate(.3deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float4{0%{transform:var(--tile-transform) translate(0) rotate(0)}13%{transform:var(--tile-transform) translate(-.8px,-2px) rotate(-.8deg)}26%{transform:var(--tile-transform) translate(-1.5px,-5px) rotate(-1.6deg)}40%{transform:var(--tile-transform) translate(.2px,-7.5px) rotate(-.2deg)}52%{transform:var(--tile-transform) translate(1.8px,-6.5px) rotate(1.2deg)}65%{transform:var(--tile-transform) translate(1.2px,-4px) rotate(.8deg)}78%{transform:var(--tile-transform) translate(-.3px,-1.8px) rotate(-.4deg)}90%{transform:var(--tile-transform) translate(-.6px,-.4px) rotate(-.1deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float5{0%{transform:var(--tile-transform) translate(0) rotate(0)}9%{transform:var(--tile-transform) translate(1.2px,-2px) rotate(.6deg)}20%{transform:var(--tile-transform) translate(2px,-5px) rotate(1.5deg)}33%{transform:var(--tile-transform) translate(.8px,-8.5px) rotate(.5deg)}45%{transform:var(--tile-transform) translate(-1px,-9.5px) rotate(-1deg)}58%{transform:var(--tile-transform) translate(-1.8px,-7px) rotate(-1.8deg)}70%{transform:var(--tile-transform) translate(-.8px,-4px) rotate(-.8deg)}82%{transform:var(--tile-transform) translate(.4px,-1.5px) rotate(.2deg)}92%{transform:var(--tile-transform) translate(.6px,-.3px) rotate(.1deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes floatHero{0%{transform:translate(-50%) translate(0) rotate(0) scale(1)}10%{transform:translate(-50%) translate(.8px,-4px) rotate(.7deg) scale(1.006)}22%{transform:translate(-50%) translate(1.5px,-9px) rotate(1.4deg) scale(1.014)}35%{transform:translate(-50%) translate(.2px,-13px) rotate(.3deg) scale(1.02)}48%{transform:translate(-50%) translate(-1.5px,-12px) rotate(-1deg) scale(1.016)}60%{transform:translate(-50%) translate(-2px,-8px) rotate(-1.6deg) scale(1.01)}72%{transform:translate(-50%) translate(-.6px,-4px) rotate(-.5deg) scale(1.005)}85%{transform:translate(-50%) translate(.5px,-1.5px) rotate(.3deg) scale(1.002)}94%{transform:translate(-50%) translate(.3px,-.3px) rotate(.1deg) scale(1.001)}to{transform:translate(-50%) translate(0) rotate(0) scale(1)}}:host{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:9999}.notification-prompt{width:100%;max-width:390px;height:100%;display:flex;flex-direction:column;gap:48px;overflow:clip;position:relative}.notification-prompt__backdrop{position:fixed;inset:0;z-index:-1}.notification-prompt__illustration{position:relative;flex:1 0 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 24px}.icon-tiles{position:relative;width:100%;max-width:342px;height:100%}.tile-entry{position:absolute;opacity:0;animation:tileEntry .7s cubic-bezier(.22,1,.36,1) forwards;will-change:transform,opacity}.tile-entry--hero{inset:0;animation-delay:.2s;animation-duration:.8s}.tile-entry--1{inset:0;animation-delay:.35s}.tile-entry--4{inset:0;animation-delay:.3s}.tile-entry--5{inset:0;animation-delay:.4s}.tile-entry--3{inset:0;animation-delay:.45s}.tile-entry--2{inset:0;animation-delay:.5s}.icon-tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:20%;background:linear-gradient(180deg,#0000 95%,#00000026),linear-gradient(180deg,#fff6,#fff0 4.5%),linear-gradient(180deg,#ffffff26,#fff0),linear-gradient(180deg,#0000,#0000001a),var(--color-accent, #6B5FF5);will-change:transform}.icon-tile__icon{width:62.5%;height:62.5%;display:flex;align-items:center;justify-content:center}.icon-tile__icon svg{width:100%;height:100%;color:#fff;display:block}.icon-tile--1{--tile-transform: translate(-50%, 0) rotate(7.74deg);width:72px;height:72px;top:22%;left:50%;filter:blur(2px);animation:float1 6.8s linear infinite}.icon-tile--2{--tile-transform: rotate(9.27deg);width:88px;height:88px;bottom:6%;right:0;filter:blur(1px);animation:float2 7.4s linear infinite}.icon-tile--3{--tile-transform: rotate(-6.18deg);width:72px;height:72px;bottom:0;left:0;filter:blur(2px);animation:float3 8.6s linear infinite}.icon-tile--4{--tile-transform: rotate(20.57deg);width:88px;height:88px;top:36%;right:0;filter:blur(1px);animation:float4 7.1s linear infinite}.icon-tile--5{--tile-transform: rotate(-8.24deg);width:88px;height:88px;top:44%;left:0;filter:blur(1px);animation:float5 9.2s linear infinite}.icon-tile--hero{width:120px;height:120px;left:50%;bottom:14%;filter:none;border-radius:30px;z-index:2;animation:floatHero 6.2s linear infinite}.icon-tile__badge{position:absolute;top:12.5%;right:12%;min-width:26px;height:26px;padding:0 7px;border-radius:8px;background:var(--content-feedback-bold-red, #b91c1c);display:flex;align-items:center;justify-content:center;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:18px;line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap;box-sizing:border-box}.notification-prompt__texts{position:relative;z-index:1;text-align:center;padding:0 16px;flex-shrink:0;opacity:0;animation:fadeSlideUp .6s .6s cubic-bezier(.22,1,.36,1) forwards}.notification-prompt__heading{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:32px;line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 4px}.notification-prompt__subtitle{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:400;font-size:18px;line-height:1.4;letter-spacing:-.02em;color:#eef0ff;margin:0}.notification-prompt__actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:0 24px 24px;padding-bottom:max(24px,env(safe-area-inset-bottom,24px));flex-shrink:0;opacity:0;animation:fadeSlideUp .6s .75s cubic-bezier(.22,1,.36,1) forwards}.notification-prompt__actions ds-button{display:block;width:100%}.notification-prompt__actions ds-button::ng-deep button{width:100%;border-radius:8px}.notification-prompt__actions ds-button.dismiss-btn::ng-deep button{color:#fff;background:transparent}@keyframes exitUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-48px)}}@keyframes exitFade{0%{opacity:1}to{opacity:0}}.is-dismissing .notification-prompt__illustration{animation:exitUp .5s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__texts{animation:exitUp .45s .15s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__actions{animation:exitUp .45s .3s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__backdrop{animation:exitFade .35s .45s cubic-bezier(.55,0,1,.45) forwards}@media (prefers-reduced-motion: reduce){.tile-entry,.icon-tile,.icon-tile--hero,.notification-prompt__texts,.notification-prompt__actions{animation:none!important;opacity:1!important}}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationPromptComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-notification-prompt', standalone: true, imports: [DsButtonComponent], template: `
+    <div class="notification-prompt" [class.is-dismissing]="dismissing()">
+      <div
+        class="notification-prompt__backdrop"
+        [style.background]="whitelabel.headerSurface()">
+      </div>
+
+      <!-- Illustration: floating icon tiles -->
+      <div class="notification-prompt__illustration">
+        <div class="icon-tiles">
+
+          <!-- Tile 1: service/heart-handshake (top-center, small 72px) -->
+          <div class="tile-entry tile-entry--1">
+            <div class="icon-tile icon-tile--1">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 45 45" fill="none">
+                  <path d="M5.928 8.379c4.545-4.545 11.787-4.75 16.575-.615 4.785-4.135 12.026-3.93 16.571.615 4.537 4.537 4.749 11.76.637 16.549L25.153 39.536a3.75 3.75 0 0 1-5.098.19l-.206-.19L5.291 24.928c-4.112-4.789-3.9-12.012.637-16.549zm2.652 2.651c-3.2 3.201-3.292 8.334-.274 11.645l.274.288L22.5 36.884l9.943-9.945-6.628-6.628-1.988 1.989a4.688 4.688 0 0 1-6.628-6.628l3.94-3.943c-3.212-2.57-7.866-2.453-10.945.245l-.287.275zm15.91 5.303a1.875 1.875 0 0 1 2.651 0l7.954 7.954 1.327-1.325c3.295-3.295 3.295-8.637 0-11.932-3.2-3.201-8.333-3.292-11.645-.274l-.287.274-5.967 5.967a1.875 1.875 0 0 0-.146 2.497l.146.164a1.875 1.875 0 0 0 2.497.145l.164-.145 3.314-3.315z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 2: calendar (right-bottom, medium 88px) -->
+          <div class="tile-entry tile-entry--2">
+            <div class="icon-tile icon-tile--medium icon-tile--2">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M9 1v2h6V1h2v2h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2zm11 9H4v9h16v-9zm-4.964 1.136l1.414 1.414-4.95 4.95-3.536-3.536L9.38 12.55l2.121 2.122 3.536-3.536zM7 5H4v3h16V5h-3v1h-2V5H9v1H7V5z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 3: documents (bottom-left, small 72px) -->
+          <div class="tile-entry tile-entry--3">
+            <div class="icon-tile icon-tile--3">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zM19 4H5v16h14V4zM7 6h4v4H7V6zm0 6h10v2H7v-2zm0 4h10v2H7v-2zm6-9h4v2h-4V7z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 4: messages (right-upper, medium 88px) -->
+          <div class="tile-entry tile-entry--4">
+            <div class="icon-tile icon-tile--medium icon-tile--4">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176zM7.581 18.71l.29.158A7.956 7.956 0 0 0 12 20c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8c0 1.458.39 2.823 1.131 4.13l.159.288-.69 3.1 3.1-.69z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tile 5: home (left-middle, medium 88px) -->
+          <div class="tile-entry tile-entry--5">
+            <div class="icon-tile icon-tile--medium icon-tile--5">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12v-9.157l-6-5.454-6 5.454V19zm2-4h8v2H8v-2z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hero: bell icon (center, 120px) -->
+          <div class="tile-entry tile-entry--hero">
+            <div class="icon-tile icon-tile--hero">
+              <div class="icon-tile__icon">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z" fill="currentColor"/>
+                </svg>
+              </div>
+              <span class="icon-tile__badge">18</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Heading + subtitle -->
+      <div class="notification-prompt__texts">
+        <h1 class="notification-prompt__heading">{{ heading() }}</h1>
+        <p class="notification-prompt__subtitle">{{ subtitle() }}</p>
+      </div>
+
+      <!-- CTA buttons -->
+      <div class="notification-prompt__actions">
+        <ds-button
+          variant="primary"
+          size="md"
+          (clicked)="handleAllow()">
+          {{ allowLabel() }}
+        </ds-button>
+        <ds-button
+          class="dismiss-btn"
+          variant="ghost"
+          size="md"
+          (clicked)="handleDismiss()">
+          {{ dismissLabel() }}
+        </ds-button>
+      </div>
+    </div>
+  `, styles: ["@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes tileEntry{0%{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes float1{0%{transform:var(--tile-transform) translate(0) rotate(0)}11%{transform:var(--tile-transform) translate(1.4px,-3px) rotate(.9deg)}23%{transform:var(--tile-transform) translate(2.2px,-6.5px) rotate(1.8deg)}37%{transform:var(--tile-transform) translate(.6px,-8.5px) rotate(.4deg)}50%{transform:var(--tile-transform) translate(-1.2px,-7px) rotate(-.8deg)}63%{transform:var(--tile-transform) translate(-1.8px,-4px) rotate(-1.6deg)}76%{transform:var(--tile-transform) translate(-.4px,-1.5px) rotate(-.5deg)}88%{transform:var(--tile-transform) translate(.8px,-.5px) rotate(.3deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float2{0%{transform:var(--tile-transform) translate(0) rotate(0)}12%{transform:var(--tile-transform) translate(-1px,-2.5px) rotate(-.7deg)}25%{transform:var(--tile-transform) translate(-2px,-5.5px) rotate(-1.5deg)}38%{transform:var(--tile-transform) translate(-.8px,-7px) rotate(-.3deg)}50%{transform:var(--tile-transform) translate(1px,-6px) rotate(1deg)}62%{transform:var(--tile-transform) translate(1.6px,-3.5px) rotate(1.6deg)}75%{transform:var(--tile-transform) translate(.5px,-1.5px) rotate(.6deg)}87%{transform:var(--tile-transform) translate(-.5px,-.3px) rotate(-.2deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float3{0%{transform:var(--tile-transform) translate(0) rotate(0)}10%{transform:var(--tile-transform) translate(.8px,-3px) rotate(1.2deg)}22%{transform:var(--tile-transform) translate(1.5px,-7px) rotate(2deg)}35%{transform:var(--tile-transform) translate(.3px,-10px) rotate(.8deg)}48%{transform:var(--tile-transform) translate(-1.5px,-9.5px) rotate(-.6deg)}60%{transform:var(--tile-transform) translate(-2px,-6px) rotate(-1.5deg)}72%{transform:var(--tile-transform) translate(-1px,-3px) rotate(-.8deg)}85%{transform:var(--tile-transform) translate(.3px,-1px) rotate(.3deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float4{0%{transform:var(--tile-transform) translate(0) rotate(0)}13%{transform:var(--tile-transform) translate(-.8px,-2px) rotate(-.8deg)}26%{transform:var(--tile-transform) translate(-1.5px,-5px) rotate(-1.6deg)}40%{transform:var(--tile-transform) translate(.2px,-7.5px) rotate(-.2deg)}52%{transform:var(--tile-transform) translate(1.8px,-6.5px) rotate(1.2deg)}65%{transform:var(--tile-transform) translate(1.2px,-4px) rotate(.8deg)}78%{transform:var(--tile-transform) translate(-.3px,-1.8px) rotate(-.4deg)}90%{transform:var(--tile-transform) translate(-.6px,-.4px) rotate(-.1deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes float5{0%{transform:var(--tile-transform) translate(0) rotate(0)}9%{transform:var(--tile-transform) translate(1.2px,-2px) rotate(.6deg)}20%{transform:var(--tile-transform) translate(2px,-5px) rotate(1.5deg)}33%{transform:var(--tile-transform) translate(.8px,-8.5px) rotate(.5deg)}45%{transform:var(--tile-transform) translate(-1px,-9.5px) rotate(-1deg)}58%{transform:var(--tile-transform) translate(-1.8px,-7px) rotate(-1.8deg)}70%{transform:var(--tile-transform) translate(-.8px,-4px) rotate(-.8deg)}82%{transform:var(--tile-transform) translate(.4px,-1.5px) rotate(.2deg)}92%{transform:var(--tile-transform) translate(.6px,-.3px) rotate(.1deg)}to{transform:var(--tile-transform) translate(0) rotate(0)}}@keyframes floatHero{0%{transform:translate(-50%) translate(0) rotate(0) scale(1)}10%{transform:translate(-50%) translate(.8px,-4px) rotate(.7deg) scale(1.006)}22%{transform:translate(-50%) translate(1.5px,-9px) rotate(1.4deg) scale(1.014)}35%{transform:translate(-50%) translate(.2px,-13px) rotate(.3deg) scale(1.02)}48%{transform:translate(-50%) translate(-1.5px,-12px) rotate(-1deg) scale(1.016)}60%{transform:translate(-50%) translate(-2px,-8px) rotate(-1.6deg) scale(1.01)}72%{transform:translate(-50%) translate(-.6px,-4px) rotate(-.5deg) scale(1.005)}85%{transform:translate(-50%) translate(.5px,-1.5px) rotate(.3deg) scale(1.002)}94%{transform:translate(-50%) translate(.3px,-.3px) rotate(.1deg) scale(1.001)}to{transform:translate(-50%) translate(0) rotate(0) scale(1)}}:host{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:9999}.notification-prompt{width:100%;max-width:390px;height:100%;display:flex;flex-direction:column;gap:48px;overflow:clip;position:relative}.notification-prompt__backdrop{position:fixed;inset:0;z-index:-1}.notification-prompt__illustration{position:relative;flex:1 0 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 24px}.icon-tiles{position:relative;width:100%;max-width:342px;height:100%}.tile-entry{position:absolute;opacity:0;animation:tileEntry .7s cubic-bezier(.22,1,.36,1) forwards;will-change:transform,opacity}.tile-entry--hero{inset:0;animation-delay:.2s;animation-duration:.8s}.tile-entry--1{inset:0;animation-delay:.35s}.tile-entry--4{inset:0;animation-delay:.3s}.tile-entry--5{inset:0;animation-delay:.4s}.tile-entry--3{inset:0;animation-delay:.45s}.tile-entry--2{inset:0;animation-delay:.5s}.icon-tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:20%;background:linear-gradient(180deg,#0000 95%,#00000026),linear-gradient(180deg,#fff6,#fff0 4.5%),linear-gradient(180deg,#ffffff26,#fff0),linear-gradient(180deg,#0000,#0000001a),var(--color-accent, #6B5FF5);will-change:transform}.icon-tile__icon{width:62.5%;height:62.5%;display:flex;align-items:center;justify-content:center}.icon-tile__icon svg{width:100%;height:100%;color:#fff;display:block}.icon-tile--1{--tile-transform: translate(-50%, 0) rotate(7.74deg);width:72px;height:72px;top:22%;left:50%;filter:blur(2px);animation:float1 6.8s linear infinite}.icon-tile--2{--tile-transform: rotate(9.27deg);width:88px;height:88px;bottom:6%;right:0;filter:blur(1px);animation:float2 7.4s linear infinite}.icon-tile--3{--tile-transform: rotate(-6.18deg);width:72px;height:72px;bottom:0;left:0;filter:blur(2px);animation:float3 8.6s linear infinite}.icon-tile--4{--tile-transform: rotate(20.57deg);width:88px;height:88px;top:36%;right:0;filter:blur(1px);animation:float4 7.1s linear infinite}.icon-tile--5{--tile-transform: rotate(-8.24deg);width:88px;height:88px;top:44%;left:0;filter:blur(1px);animation:float5 9.2s linear infinite}.icon-tile--hero{width:120px;height:120px;left:50%;bottom:14%;filter:none;border-radius:30px;z-index:2;animation:floatHero 6.2s linear infinite}.icon-tile__badge{position:absolute;top:12.5%;right:12%;min-width:26px;height:26px;padding:0 7px;border-radius:8px;background:var(--content-feedback-bold-red, #b91c1c);display:flex;align-items:center;justify-content:center;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:18px;line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap;box-sizing:border-box}.notification-prompt__texts{position:relative;z-index:1;text-align:center;padding:0 16px;flex-shrink:0;opacity:0;animation:fadeSlideUp .6s .6s cubic-bezier(.22,1,.36,1) forwards}.notification-prompt__heading{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:32px;line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 4px}.notification-prompt__subtitle{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:400;font-size:18px;line-height:1.4;letter-spacing:-.02em;color:#eef0ff;margin:0}.notification-prompt__actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:0 24px 24px;padding-bottom:max(24px,env(safe-area-inset-bottom,24px));flex-shrink:0;opacity:0;animation:fadeSlideUp .6s .75s cubic-bezier(.22,1,.36,1) forwards}.notification-prompt__actions ds-button{display:block;width:100%}.notification-prompt__actions ds-button::ng-deep button{width:100%;border-radius:8px}.notification-prompt__actions ds-button.dismiss-btn::ng-deep button{color:#fff;background:transparent}@keyframes exitUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-48px)}}@keyframes exitFade{0%{opacity:1}to{opacity:0}}.is-dismissing .notification-prompt__illustration{animation:exitUp .5s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__texts{animation:exitUp .45s .15s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__actions{animation:exitUp .45s .3s cubic-bezier(.55,0,1,.45) forwards}.is-dismissing .notification-prompt__backdrop{animation:exitFade .35s .45s cubic-bezier(.55,0,1,.45) forwards}@media (prefers-reduced-motion: reduce){.tile-entry,.icon-tile,.icon-tile--hero,.notification-prompt__texts,.notification-prompt__actions{animation:none!important;opacity:1!important}}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], allowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowLabel", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], allow: [{ type: i0.Output, args: ["allow"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+const NOTIFICATION_ICON_MAP = {
+    inquiry_update: 'remixFileList3Line',
+    inquiry_assigned: 'remixFileList3Line',
+    inquiry_resolved: 'remixFileList3Line',
+    community_post: 'remixCommunityLine',
+    community_comment: 'remixCommunityLine',
+    community_like: 'remixCommunityLine',
+    community_mention: 'remixCommunityLine',
+    booking_confirmed: 'remixCalendarCheckLine',
+    booking_cancelled: 'remixCalendarCheckLine',
+    booking_reminder: 'remixCalendarCheckLine',
+    facility_available: 'remixCalendarCheckLine',
+    message_new: 'remixMessage3Line',
+    message_group: 'remixMessage3Line',
+    service_update: 'remixServiceLine',
+    handbook_update: 'remixBook2Line',
+    system_announcement: 'remixHomeSmile2Line',
+    system_welcome: 'remixHomeSmile2Line',
+    invite_received: 'remixHomeSmile2Line',
+    family_access: 'remixGroupLine',
+};
+
+function minutesAgo(m) { return new Date(Date.now() - m * 60_000); }
+function hoursAgo(h) { return new Date(Date.now() - h * 3_600_000); }
+function daysAgo(d, hour = 12, minute = 0) {
+    const date = new Date();
+    date.setDate(date.getDate() - d);
+    date.setHours(hour, minute, 0, 0);
+    return date;
+}
+const SAMPLE_NOTIFICATIONS = [
+    // Today — inquiry #2 "Problem med vandtryk"
+    { id: '1', type: 'inquiry_update', leading: 'icon', targetId: '2', title: 'Problem med vandtryk', message: 'Din henvendelse er blevet opdateret af ejendomskontoret.', createdAt: minutesAgo(5), read: false },
+    // Today — Mette Larsen commented on post-1
+    { id: '2', type: 'community_comment', leading: 'avatar', targetId: 'post-1', avatarInitials: 'ML', title: 'Mette Larsen', message: 'Kommenterede: "Velkommen til fællesskabet!"', createdAt: minutesAgo(23), read: false },
+    // Today — Marcus Lindqvist sent message in conv-2
+    { id: '3', type: 'message_new', leading: 'avatar', targetId: 'conv-2', avatarInitials: 'ML', title: 'Marcus Lindqvist', message: 'Kan du tjekke støjproblemet igen?', createdAt: minutesAgo(10), read: false },
+    // Today — booking-1 "Festlokale på taget" confirmed
+    { id: '4', type: 'booking_confirmed', leading: 'image', targetId: 'booking-1', imageSrc: '/Assets/Dummy-photos/rooftop-party.jpg', title: 'Festlokale på taget', message: 'Din booking d. 14. feb kl. 9:00–17:00 er bekræftet.', createdAt: hoursAgo(2), read: true },
+    // Today — Anders Jensen commented on post-2
+    { id: '5', type: 'community_comment', leading: 'avatar', targetId: 'post-2', avatarInitials: 'AJ', title: 'Anders Jensen', message: 'Kommenterede: "Wow, den udsigt er fantastisk!"', createdAt: hoursAgo(3), read: true },
+    // Yesterday — Blik Partner A/S assigned to inquiry #2
+    { id: '6', type: 'inquiry_assigned', leading: 'avatar', targetId: '2', avatarInitials: 'BP', title: 'Blik Partner A/S', message: 'Er blevet tildelt din henvendelse om VVS.', createdAt: daysAgo(1, 16, 45), read: true },
+    // Yesterday — Sophie Andersen posted in community (post-2)
+    { id: '7', type: 'community_post', leading: 'avatar', targetId: 'post-2', avatarInitials: 'SA', title: 'Sophie Andersen', message: 'Nyt opslag med billeder fra ejendommen.', createdAt: daysAgo(1, 14, 20), read: true },
+    // Yesterday — booking-3 "Boremaskinen" reminder
+    { id: '8', type: 'booking_reminder', leading: 'image', targetId: 'booking-3', imageSrc: '/Assets/Dummy-photos/handyman.jpg', title: 'Boremaskinen', message: 'Du har en booking d. 25. mar kl. 10:00–14:00.', createdAt: daysAgo(1, 9, 0), read: true },
+    // Yesterday — facility-1 "Boremaskinen" available
+    { id: '9', type: 'facility_available', leading: 'image', targetId: 'facility-1', imageSrc: '/Assets/Dummy-photos/handyman.jpg', title: 'Boremaskinen', message: 'Boremaskinen er nu ledig til booking.', createdAt: daysAgo(1, 8, 15), read: true },
+    // Yesterday — group "Vaskeri & møde" message
+    { id: '10', type: 'message_group', leading: 'avatar', targetId: 'conv-group-demo', avatarInitials: 'VM', title: 'Vaskeri & møde', message: 'Anna Berg: "Vi mødes kl. 19 i fællesrummet."', createdAt: daysAgo(1, 19, 30), read: true },
+    // Earlier — inquiry #3 resolved
+    { id: '11', type: 'inquiry_resolved', leading: 'icon', targetId: '3', title: 'Varme virker ikke ordentligt', message: 'Din henvendelse er nu markeret som løst.', createdAt: daysAgo(3), read: true },
+    // Earlier — handbook updated
+    { id: '12', type: 'handbook_update', leading: 'logo', title: 'Håndbog opdateret', message: 'Afsnittet "Forsyninger" er blevet opdateret med ny information.', createdAt: daysAgo(4), read: true },
+    // Earlier — ElektroTek ApS service update
+    { id: '13', type: 'service_update', leading: 'image', targetId: 'v-4', imageSrc: '/Assets/dummy-logos/electrician-logo.svg', title: 'ElektroTek ApS', message: 'El-service er nu tilgængelig via Services.', createdAt: daysAgo(5), read: true },
+    // Earlier — Thomas Hansen commented on post-2
+    { id: '14', type: 'community_comment', leading: 'avatar', targetId: 'post-2', avatarInitials: 'TH', title: 'Thomas Hansen', message: 'Kommenterede: "Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆"', createdAt: daysAgo(6), read: true },
+    // Earlier — booking-2 "Gæsteparkering" cancelled
+    { id: '15', type: 'booking_cancelled', leading: 'image', targetId: 'booking-2', imageSrc: '/Assets/Dummy-photos/parking.jpg', title: 'Gæsteparkering', message: 'Din booking d. 20. mar kl. 8:00–20:00 er blevet annulleret.', createdAt: daysAgo(7), read: true },
+    // Earlier — system announcement
+    { id: '16', type: 'system_announcement', leading: 'logo', title: 'Systemmeddelelse', message: 'Planlagt vedligeholdelse d. 1. maj kl. 02:00–04:00.', createdAt: daysAgo(8), read: true },
+    // Earlier — Karl Johansson message in conv-4
+    { id: '17', type: 'message_new', leading: 'avatar', targetId: 'conv-4', avatarInitials: 'KJ', title: 'Karl Johansson', message: 'Hej! Er vaskerummet ledigt i morgen kl. 10?', createdAt: daysAgo(9), read: true },
+    // Earlier — Sara Lindqvist family access
+    { id: '18', type: 'family_access', leading: 'avatar', title: 'Sara Lindqvist', avatarInitials: 'SL', message: 'Sara Lindqvist har fået adgang til din konto.', createdAt: daysAgo(10), read: true },
+    // Earlier — system welcome
+    { id: '19', type: 'system_welcome', leading: 'logo', title: 'Velkommen!', message: 'Velkommen til Propbinder – vi glæder os til at hjælpe dig.', createdAt: daysAgo(11), read: true },
+];
+
+const TYPE_TO_CATEGORY = {
+    inquiry_update: 'inquiries',
+    inquiry_assigned: 'inquiries',
+    inquiry_resolved: 'inquiries',
+    community_post: 'community',
+    community_comment: 'community',
+    community_like: 'community',
+    community_mention: 'community',
+    booking_confirmed: 'bookings',
+    booking_cancelled: 'bookings',
+    booking_reminder: 'bookings',
+    facility_available: 'bookings',
+    message_new: 'messages',
+    message_group: 'messages',
+    service_update: 'services',
+    handbook_update: 'handbook',
+    system_announcement: 'system',
+    system_welcome: 'system',
+    invite_received: 'system',
+    family_access: 'system',
+};
+class NotificationService {
+    notifications = signal(SAMPLE_NOTIFICATIONS, ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    unreadCount = computed(() => this.notifications().filter(n => !n.read).length, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
+    /**
+     * Push notification delivery preferences per category.
+     * Controls which types of push notifications the device receives —
+     * does NOT filter the in-app notification list.
+     */
+    disabledPushCategories = signal(new Set(), ...(ngDevMode ? [{ debugName: "disabledPushCategories" }] : []));
+    isPushEnabled(category) {
+        return !this.disabledPushCategories().has(category);
+    }
+    setPushEnabled(category, enabled) {
+        this.disabledPushCategories.update(set => {
+            const next = new Set(set);
+            if (enabled) {
+                next.delete(category);
+            }
+            else {
+                next.add(category);
+            }
+            return next;
+        });
+    }
+    /**
+     * Add a new notification to the top of the list.
+     * Intended for downstream push integration — call this when a
+     * real push payload arrives via Capacitor's `pushNotificationReceived` listener.
+     */
+    addNotification(item) {
+        this.notifications.update(list => [item, ...list]);
+    }
+    markAsRead(id) {
+        this.notifications.update(list => list.map(n => n.id === id ? { ...n, read: true } : n));
+    }
+    markAllAsRead() {
+        this.notifications.update(list => list.map(n => ({ ...n, read: true })));
+    }
+    /**
+     * Remove a single notification from the list permanently.
+     */
+    removeNotification(id) {
+        this.notifications.update(list => list.filter(n => n.id !== id));
+    }
+    /**
+     * Remove all notifications from the list permanently.
+     */
+    clearAll() {
+        this.notifications.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class RelativeTimePipe {
+    transform(date) {
+        if (!date)
+            return '';
+        const now = Date.now();
+        const diffMs = now - date.getTime();
+        const diffSec = Math.floor(diffMs / 1000);
+        const diffMin = Math.floor(diffSec / 60);
+        const diffHr = Math.floor(diffMin / 60);
+        const diffDays = Math.floor(diffHr / 24);
+        if (diffSec < 60)
+            return 'Nu';
+        if (diffMin < 60)
+            return `${diffMin} min siden`;
+        if (diffHr < 24)
+            return `${diffHr} ${diffHr === 1 ? 'time' : 'timer'} siden`;
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const yesterday = new Date(today.getTime() - 86_400_000);
+        if (date.getTime() >= yesterday.getTime() && date.getTime() < today.getTime()) {
+            return `I går, ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+        }
+        if (diffDays < 7)
+            return `${diffDays} dage siden`;
+        const day = date.getDate();
+        const monthNames = ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
+        return `${day}. ${monthNames[date.getMonth()]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RelativeTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: RelativeTimePipe, isStandalone: true, name: "relativeTime" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RelativeTimePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'relativeTime', standalone: true, pure: true }]
+        }] });
+function pad(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/**
+ * Bucket a date into 'today' | 'yesterday' | 'earlier' for grouping notifications.
+ */
+function dateBucket(date) {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today.getTime() - 86_400_000);
+    if (date.getTime() >= today.getTime())
+        return 'today';
+    if (date.getTime() >= yesterday.getTime())
+        return 'yesterday';
+    return 'earlier';
+}
+
+class DsMobileNotificationModalComponent {
+    modalController = inject(ModalController);
+    notificationService = inject(NotificationService);
+    bottomSheet = inject(DsMobileBottomSheetService);
+    groups = computed(() => {
+        const items = this.notificationService.notifications();
+        if (!items || items.length === 0)
+            return [];
+        const todayItems = [];
+        const yesterdayItems = [];
+        const earlierItems = [];
+        for (const item of items) {
+            const bucket = dateBucket(item.createdAt);
+            if (bucket === 'today')
+                todayItems.push(item);
+            else if (bucket === 'yesterday')
+                yesterdayItems.push(item);
+            else
+                earlierItems.push(item);
+        }
+        const groups = [];
+        if (todayItems.length > 0)
+            groups.push({ label: 'I dag', items: todayItems });
+        if (yesterdayItems.length > 0)
+            groups.push({ label: 'I går', items: yesterdayItems });
+        if (earlierItems.length > 0)
+            groups.push({ label: 'Tidligere', items: earlierItems });
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    iconFor(type) {
+        return NOTIFICATION_ICON_MAP[type] ?? 'remixNotificationLine';
+    }
+    TYPE_LABELS = {
+        inquiry_update: 'Henvendelse',
+        inquiry_assigned: 'Henvendelse',
+        inquiry_resolved: 'Henvendelse',
+        community_post: 'Fællesskab',
+        community_comment: 'Kommentar',
+        community_like: 'Fællesskab',
+        community_mention: 'Omtale',
+        booking_confirmed: 'Booking',
+        booking_cancelled: 'Booking',
+        booking_reminder: 'Booking',
+        facility_available: 'Facilitet',
+        message_new: 'Besked',
+        message_group: 'Gruppebesked',
+        service_update: 'Service',
+        handbook_update: 'Håndbog',
+        system_announcement: 'System',
+        system_welcome: 'System',
+        invite_received: 'Invitation',
+        family_access: 'Familie',
+    };
+    labelFor(type) {
+        return this.TYPE_LABELS[type] ?? '';
+    }
+    handleNotificationClick(item) {
+        this.modalController.dismiss(item);
+    }
+    async handleLongPress(item) {
+        const actions = [
+            { action: 'mark_read', title: item.read ? 'Marker som ulæst' : 'Marker som læst', icon: item.read ? 'remixMailUnreadLine' : 'remixMailOpenLine', destructive: false },
+            { action: 'remove', title: 'Fjern notifikation', icon: 'remixDeleteBinLine', destructive: true },
+        ];
+        const sheet = await this.bottomSheet.create({
+            component: DsMobileActionsBottomSheetComponent,
+            componentProps: { customActionGroups: [{ actions }] },
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: true,
+            backdropDismiss: true,
+            cssClass: 'auto-height',
+        });
+        const result = await sheet.onWillDismiss();
+        if (result.role === 'select' && result.data) {
+            const action = result.data.action;
+            if (action === 'mark_read') {
+                if (item.read) {
+                    this.notificationService.notifications.update(list => list.map(n => n.id === item.id ? { ...n, read: false } : n));
+                }
+                else {
+                    this.notificationService.markAsRead(item.id);
+                }
+            }
+            else if (action === 'remove') {
+                this.notificationService.removeNotification(item.id);
+            }
+        }
+    }
+    async openBulkActions() {
+        const actions = [
+            { action: 'mark_all_read', title: 'Marker alle som læst', icon: 'remixMailOpenLine', destructive: false },
+            { action: 'clear_all', title: 'Ryd alle notifikationer', icon: 'remixDeleteBinLine', destructive: true },
+        ];
+        const sheet = await this.bottomSheet.create({
+            component: DsMobileActionsBottomSheetComponent,
+            componentProps: { customActionGroups: [{ actions }] },
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: true,
+            backdropDismiss: true,
+            cssClass: 'auto-height',
+        });
+        const result = await sheet.onWillDismiss();
+        if (result.role === 'select' && result.data) {
+            const action = result.data.action;
+            if (action === 'mark_all_read') {
+                this.notificationService.markAllAsRead();
+            }
+            else if (action === 'clear_all') {
+                this.notificationService.clearAll();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileNotificationModalComponent, isStandalone: true, selector: "ds-mobile-notification-modal", ngImport: i0, template: `
+    <ds-mobile-modal-base
+      headerTitle="Notifikationer"
+      [showHeader]="true"
+      closeButtonLabel="Luk">
+
+      <ds-icon-button
+        header-trailing
+        class="more-button"
+        icon="remixMoreFill"
+        variant="secondary"
+        size="lg"
+        (clicked)="openBulkActions()"
+        aria-label="Flere handlinger"
+      />
+
+      @if (groups().length > 0) {
+        @for (group of groups(); track group.label) {
+          <div class="notification-group">
+            <div class="notification-group__label">{{ group.label }}</div>
+
+            @for (item of group.items; track item.id) {
+              <ds-mobile-list-item
+                [interactive]="true"
+                [showDivider]="!$last"
+                [enableLongPress]="true"
+                [showDesktopMoreButton]="false"
+                align="top"
+                (itemClick)="handleNotificationClick(item)"
+                (longPress)="handleLongPress(item)">
+
+                @if (item.leading === 'icon') {
+                  <ds-avatar
+                    content-leading
+                    type="icon"
+                    [iconName]="item.iconName || iconFor(item.type)"
+                    size="md"
+                  />
+                }
+
+                @if (item.leading === 'avatar') {
+                  <ds-avatar
+                    content-leading
+                    [type]="item.avatarSrc ? 'photo' : 'initials'"
+                    [initials]="item.avatarInitials || ''"
+                    [src]="item.avatarSrc || ''"
+                    size="md"
+                  />
+                }
+
+                @if (item.leading === 'image') {
+                  <div content-leading class="notification-image">
+                    <img [src]="item.imageSrc" [alt]="item.title" />
+                  </div>
+                }
+
+                @if (item.leading === 'logo') {
+                  <div content-leading class="notification-logo">
+                    <ds-app-icon size="lg" />
+                  </div>
+                }
+
+                <div content-main class="notification-content">
+                  <div class="notification-header">
+                    <div class="notification-header__details">
+                      <span class="notification-header__name" [class.notification-header__name--unread]="!item.read">
+                        {{ item.title }}
+                      </span>
+                      <span class="notification-header__meta">
+                        {{ labelFor(item.type) }}
+                        <span class="notification-header__separator">&middot;</span>
+                        {{ item.createdAt | relativeTime }}
+                      </span>
+                    </div>
+                  </div>
+                  <p class="notification-message">{{ item.message }}</p>
+                </div>
+
+                @if (!item.read) {
+                  <div content-trailing class="notification-unread-dot"></div>
+                }
+              </ds-mobile-list-item>
+            }
+          </div>
+        }
+      } @else {
+        <ds-mobile-empty-state
+          imageSrc="/Assets/empty-state-notification.svg"
+          imageAlt="Ingen notifikationer"
+          title="Alt er stille herinde"
+          description="Når der sker noget nyt, finder du det her."
+        />
+      }
+    </ds-mobile-modal-base>
+  `, isInline: true, styles: [":host ::ng-deep .header-content{gap:8px!important}.more-button{flex-shrink:0;border-radius:50%}.more-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.notification-group{padding:0 20px}.notification-group+.notification-group{margin-top:8px;border-top:1px solid var(--color-border-default-secondary, #E5E7EB)}.notification-group__label{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:-.02em;color:var(--text-color-default-tertiary, #999);text-transform:none;padding:16px 0 4px}.notification-content{display:flex;flex-direction:column;gap:2px;min-width:0}.notification-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.notification-header__details{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}.notification-header__name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-header__name--unread{font-weight:600}.notification-header__meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}.notification-header__separator{color:var(--text-color-default-tertiary, #737373);opacity:.5}.notification-message{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.notification-image{width:32px;height:32px;border-radius:8px;overflow:hidden;flex-shrink:0}.notification-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.notification-logo{flex-shrink:0}.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent, #6B5FF5);flex-shrink:0;margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsAppIconComponent, selector: "ds-app-icon", inputs: ["size"] }, { kind: "component", type: DsMobileEmptyStateComponent, selector: "ds-mobile-empty-state", inputs: ["imageSrc", "imageAlt", "title", "description"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "pipe", type: RelativeTimePipe, name: "relativeTime" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-notification-modal', standalone: true, imports: [CommonModule, DsMobileModalBaseComponent, DsMobileListItemComponent, DsAvatarComponent, DsAppIconComponent, DsMobileEmptyStateComponent, DsIconButtonComponent, RelativeTimePipe], template: `
+    <ds-mobile-modal-base
+      headerTitle="Notifikationer"
+      [showHeader]="true"
+      closeButtonLabel="Luk">
+
+      <ds-icon-button
+        header-trailing
+        class="more-button"
+        icon="remixMoreFill"
+        variant="secondary"
+        size="lg"
+        (clicked)="openBulkActions()"
+        aria-label="Flere handlinger"
+      />
+
+      @if (groups().length > 0) {
+        @for (group of groups(); track group.label) {
+          <div class="notification-group">
+            <div class="notification-group__label">{{ group.label }}</div>
+
+            @for (item of group.items; track item.id) {
+              <ds-mobile-list-item
+                [interactive]="true"
+                [showDivider]="!$last"
+                [enableLongPress]="true"
+                [showDesktopMoreButton]="false"
+                align="top"
+                (itemClick)="handleNotificationClick(item)"
+                (longPress)="handleLongPress(item)">
+
+                @if (item.leading === 'icon') {
+                  <ds-avatar
+                    content-leading
+                    type="icon"
+                    [iconName]="item.iconName || iconFor(item.type)"
+                    size="md"
+                  />
+                }
+
+                @if (item.leading === 'avatar') {
+                  <ds-avatar
+                    content-leading
+                    [type]="item.avatarSrc ? 'photo' : 'initials'"
+                    [initials]="item.avatarInitials || ''"
+                    [src]="item.avatarSrc || ''"
+                    size="md"
+                  />
+                }
+
+                @if (item.leading === 'image') {
+                  <div content-leading class="notification-image">
+                    <img [src]="item.imageSrc" [alt]="item.title" />
+                  </div>
+                }
+
+                @if (item.leading === 'logo') {
+                  <div content-leading class="notification-logo">
+                    <ds-app-icon size="lg" />
+                  </div>
+                }
+
+                <div content-main class="notification-content">
+                  <div class="notification-header">
+                    <div class="notification-header__details">
+                      <span class="notification-header__name" [class.notification-header__name--unread]="!item.read">
+                        {{ item.title }}
+                      </span>
+                      <span class="notification-header__meta">
+                        {{ labelFor(item.type) }}
+                        <span class="notification-header__separator">&middot;</span>
+                        {{ item.createdAt | relativeTime }}
+                      </span>
+                    </div>
+                  </div>
+                  <p class="notification-message">{{ item.message }}</p>
+                </div>
+
+                @if (!item.read) {
+                  <div content-trailing class="notification-unread-dot"></div>
+                }
+              </ds-mobile-list-item>
+            }
+          </div>
+        }
+      } @else {
+        <ds-mobile-empty-state
+          imageSrc="/Assets/empty-state-notification.svg"
+          imageAlt="Ingen notifikationer"
+          title="Alt er stille herinde"
+          description="Når der sker noget nyt, finder du det her."
+        />
+      }
+    </ds-mobile-modal-base>
+  `, styles: [":host ::ng-deep .header-content{gap:8px!important}.more-button{flex-shrink:0;border-radius:50%}.more-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.notification-group{padding:0 20px}.notification-group+.notification-group{margin-top:8px;border-top:1px solid var(--color-border-default-secondary, #E5E7EB)}.notification-group__label{font-family:Brockmann,system-ui,-apple-system,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:-.02em;color:var(--text-color-default-tertiary, #999);text-transform:none;padding:16px 0 4px}.notification-content{display:flex;flex-direction:column;gap:2px;min-width:0}.notification-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.notification-header__details{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0}.notification-header__name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-header__name--unread{font-weight:600}.notification-header__meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}.notification-header__separator{color:var(--text-color-default-tertiary, #737373);opacity:.5}.notification-message{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.notification-image{width:32px;height:32px;border-radius:8px;overflow:hidden;flex-shrink:0}.notification-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.notification-logo{flex-shrink:0}.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent, #6B5FF5);flex-shrink:0;margin-top:6px}\n"] }]
+        }] });
 
 /**
  * PostsService
@@ -29151,6 +29995,654 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class DsMobileBookingDetailSheetComponent {
+    modalController;
+    /** `sheet` = bottom sheet. `modal` = `ds-modal-base` shell (active + history bookings). */
+    presentation = 'sheet';
+    data;
+    /** When true the modal sizes to its content instead of filling the screen. */
+    autoHeight = false;
+    get isModalPresentation() {
+        return this.presentation === 'modal';
+    }
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    close() {
+        this.modalController.dismiss(null, 'backdrop');
+    }
+    cancelBooking() {
+        this.modalController.dismiss(null, 'cancel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingDetailSheetComponent, isStandalone: true, selector: "ds-mobile-booking-detail-sheet", inputs: { presentation: "presentation", data: "data", autoHeight: "autoHeight" }, host: { properties: { "class.presentation-modal": "this.isModalPresentation" } }, ngImport: i0, template: `
+    @if (presentation === 'modal') {
+      <ds-mobile-modal-base
+        [headerTitle]="data.facilityTitle"
+        [closeButtonLabel]="'Luk'"
+        [isAutoHeight]="autoHeight"
+        [keyboardContentBehavior]="'follow'">
+
+        <ds-mobile-section
+          [showBorder]="false"
+          padding="20px 20px 0 20px">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+        </ds-mobile-section>
+
+        <ds-mobile-section padding="20px 20px 20px 20px">
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </ds-mobile-section>
+
+        @if (data.canCancel) {
+          <div class="booking-action">
+            <div class="booking-actions-row">
+              <ds-button
+                class="cancel-primary"
+                size="md"
+                variant="secondary"
+                (clicked)="cancelBooking()">
+                Annuller booking
+              </ds-button>
+            </div>
+          </div>
+        }
+      </ds-mobile-modal-base>
+    } @else {
+      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
+        <div class="detail-header">
+          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
+          <ds-icon-button
+            icon="remixCloseLine"
+            variant="ghost"
+            size="sm"
+            (clicked)="close()"
+            aria-label="Luk"
+          />
+        </div>
+
+        <div class="detail-content">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          @if (data.canCancel) {
+            <div class="footer-button-container">
+              <div class="booking-actions-column">
+                <ds-button
+                  size="md"
+                  variant="secondary"
+                  (clicked)="cancelBooking()">
+                  Annuller booking
+                </ds-button>
+              </div>
+            </div>
+          }
+        </div>
+      </ds-mobile-bottom-sheet-wrapper>
+    }
+  `, isInline: true, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper", inputs: ["showDragHandle"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-booking-detail-sheet', standalone: true, imports: [
+                        CommonModule,
+                        DsMobileBottomSheetWrapperComponent,
+                        DsMobileModalBaseComponent,
+                        DsMobileSectionComponent,
+                        DsButtonComponent,
+                        DsIconComponent,
+                        DsIconButtonComponent,
+                    ], template: `
+    @if (presentation === 'modal') {
+      <ds-mobile-modal-base
+        [headerTitle]="data.facilityTitle"
+        [closeButtonLabel]="'Luk'"
+        [isAutoHeight]="autoHeight"
+        [keyboardContentBehavior]="'follow'">
+
+        <ds-mobile-section
+          [showBorder]="false"
+          padding="20px 20px 0 20px">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+        </ds-mobile-section>
+
+        <ds-mobile-section padding="20px 20px 20px 20px">
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </ds-mobile-section>
+
+        @if (data.canCancel) {
+          <div class="booking-action">
+            <div class="booking-actions-row">
+              <ds-button
+                class="cancel-primary"
+                size="md"
+                variant="secondary"
+                (clicked)="cancelBooking()">
+                Annuller booking
+              </ds-button>
+            </div>
+          </div>
+        }
+      </ds-mobile-modal-base>
+    } @else {
+      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
+        <div class="detail-header">
+          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
+          <ds-icon-button
+            icon="remixCloseLine"
+            variant="ghost"
+            size="sm"
+            (clicked)="close()"
+            aria-label="Luk"
+          />
+        </div>
+
+        <div class="detail-content">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          @if (data.canCancel) {
+            <div class="footer-button-container">
+              <div class="booking-actions-column">
+                <ds-button
+                  size="md"
+                  variant="secondary"
+                  (clicked)="cancelBooking()">
+                  Annuller booking
+                </ds-button>
+              </div>
+            </div>
+          }
+        </div>
+      </ds-mobile-bottom-sheet-wrapper>
+    }
+  `, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { presentation: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], autoHeight: [{
+                type: Input
+            }], isModalPresentation: [{
+                type: HostBinding,
+                args: ['class.presentation-modal']
+            }] } });
+
+class DsMobileBookingDetailSheetService extends BaseModalService {
+    bottomSheet;
+    constructor(modalController, bottomSheet) {
+        super(modalController);
+        this.bottomSheet = bottomSheet;
+    }
+    /**
+     * Bottom-sheet presentation (draggable breakpoints). Prefer `openAsModal` for booking lists.
+     */
+    async open(data) {
+        const modal = await this.bottomSheet.create({
+            component: DsMobileBookingDetailSheetComponent,
+            componentProps: { data },
+            autoHeight: true,
+            backdropDismiss: true,
+            backdropBlur: true,
+        });
+        const result = await modal.onWillDismiss();
+        return { role: result.role, data: result.data ?? undefined };
+    }
+    /** `ds-modal-base` shell — used for active and past bookings. Auto-heights to content. */
+    async openAsModal(data) {
+        const modal = await this.createModal(DsMobileBookingDetailSheetComponent, { data, presentation: 'modal', autoHeight: true }, { keyboardClose: true, autoHeight: true });
+        await modal.present();
+        const result = await modal.onWillDismiss();
+        return { role: result.role, data: result.data ?? undefined };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, deps: [{ token: i1.ModalController }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileBottomSheetService }] });
+
+const VENDOR_MODAL_SERVICE = new InjectionToken('VendorModalService');
+const BOOKING_DETAIL_MAP = {
+    'booking-1': {
+        id: 'booking-1',
+        facilityTitle: 'Festlokale på taget',
+        heroImage: '/Assets/Dummy-photos/rooftop-party.jpg',
+        bookingDate: '14. februar',
+        bookingTime: '9:00 - 17:00',
+        price: '200 kr. per booking',
+        canCancel: true,
+    },
+    'booking-2': {
+        id: 'booking-2',
+        facilityTitle: 'Gæsteparkering',
+        heroImage: '/Assets/Dummy-photos/parking.jpg',
+        bookingDate: '20. marts',
+        bookingTime: '8:00 - 20:00',
+        price: '50 kr. per booking',
+        canCancel: true,
+    },
+    'booking-3': {
+        id: 'booking-3',
+        facilityTitle: 'Boremaskinen',
+        heroImage: '/Assets/Dummy-photos/handyman.jpg',
+        bookingDate: '25. marts',
+        bookingTime: '10:00 - 14:00',
+        price: 'Gratis',
+        canCancel: true,
+    },
+};
+const VENDOR_DETAIL_MAP = {
+    'v-1': {
+        vendorName: 'CleanTeam ApS',
+        vendorDescription: '<h3>Rengøring</h3><p>CleanTeam ApS tilbyder professionel trappevask og vinduespolering for ejendommen. Servicen udføres ugentligt og kan tilpasses jeres behov.</p><h3>Pris</h3><p>350 kr. per besøg</p>',
+        vendorImage: '/Assets/Dummy-photos/clean-team.jpg',
+        vendorLogo: '/Assets/dummy-logos/cleanteam-logo.svg',
+    },
+    'v-2': {
+        vendorName: 'Nordisk Rengøring',
+        vendorDescription: '<h3>Rengøring</h3><p>Nordisk Rengøring leverer fleksibel erhvervs- og boligrengøring. Vi tilpasser rengøringen til jeres specifikke behov.</p><h3>Pris</h3><p>275 kr. per time</p>',
+        vendorImage: '/Assets/Dummy-photos/nordic-cleaning.jpg',
+        vendorLogo: '/Assets/dummy-logos/nordiccleaning-logo.svg',
+    },
+    'v-3': {
+        vendorName: 'Blik Partner A/S',
+        vendorDescription: '<h3>VVS</h3><p>BlikPartner A/S er jeres VVS-partner til alt fra løbende vedligeholdelse til akutte udkald. Vi dækker reparation af vandrør, afløb, radiatorer og blandingsbatterier.</p><h3>Pris</h3><p>450 kr. per udkald + tid</p>',
+        vendorImage: '/Assets/Dummy-photos/plumbing.jpg',
+    },
+    'v-4': {
+        vendorName: 'ElektroTek ApS',
+        vendorDescription: '<h3>Elektriker</h3><p>ElektroTek ApS varetager el-installationer, fejlsøgning og lovpligtige eftersyn for ejendommen. Vi udfører også småopgaver som udskiftning af kontakter og lampeudtag.</p><h3>Pris</h3><p>395 kr. per time</p>',
+        vendorImage: '/Assets/Dummy-photos/electrician.jpg',
+        vendorLogo: '/Assets/dummy-logos/electrician-logo.svg',
+    },
+    'v-5': {
+        vendorName: 'HaveService Danmark',
+        vendorDescription: '<h3>Have & Grønne arealer</h3><p>HaveService Danmark står for den løbende pleje af fællesarealer og haver — herunder græsslåning, hækklipning, ukrudtsbekæmpelse og sæsonbeplantning.</p><h3>Pris</h3><p>500 kr. per besøg</p>',
+        vendorImage: '/Assets/Dummy-photos/gardener.jpg',
+        vendorLogo: '/Assets/dummy-logos/gardener-logo.svg',
+    },
+};
+class DsMobileNotificationModalService extends BaseModalService {
+    router = inject(Router);
+    notificationService = inject(NotificationService);
+    postsService = inject(PostsService);
+    userService = inject(UserService);
+    postModal = inject(DsMobilePostDetailModalService);
+    peerMessaging = inject(PeerMessagingService);
+    peerChat = inject(PeerChatLauncherService);
+    bookingDetailSheet = inject(DsMobileBookingDetailSheetService);
+    vendorModal = inject(VENDOR_MODAL_SERVICE, { optional: true });
+    constructor(modalController) {
+        super(modalController);
+    }
+    /**
+     * Open the notification modal. The modal reads notifications reactively
+     * from NotificationService, so it updates live when items are marked
+     * read or removed via long-press actions.
+     *
+     * Returns the tapped notification (if the user navigated to one), or null.
+     */
+    async open() {
+        const modal = await this.createModal(DsMobileNotificationModalComponent, {});
+        await modal.present();
+        const result = await modal.onWillDismiss();
+        const tapped = result.data ?? null;
+        if (tapped) {
+            this.notificationService.markAsRead(tapped.id);
+            await this.routeTo(tapped);
+        }
+        return tapped;
+    }
+    /**
+     * Navigate to the screen associated with a notification item.
+     * Public so downstream devs can call it from a Capacitor
+     * `pushNotificationActionPerformed` listener for deep-link handling.
+     */
+    async routeTo(item) {
+        const id = item.targetId;
+        switch (item.type) {
+            case 'inquiry_update':
+            case 'inquiry_assigned':
+            case 'inquiry_resolved':
+                await this.router.navigate(['/inquiry-detail', id ?? '1']);
+                break;
+            case 'community_post':
+            case 'community_comment':
+            case 'community_like':
+            case 'community_mention':
+                if (id) {
+                    await this.openPostModal(id);
+                }
+                else {
+                    await this.router.navigate(['/announcements']);
+                }
+                break;
+            case 'booking_confirmed':
+            case 'booking_cancelled':
+            case 'booking_reminder':
+            case 'facility_available':
+                if (id) {
+                    await this.openBookingDetail(item);
+                }
+                else {
+                    await this.router.navigate(['/booking']);
+                }
+                break;
+            case 'message_new':
+            case 'message_group':
+                if (id) {
+                    await this.openChat(id);
+                }
+                else {
+                    await this.router.navigate(['/messages']);
+                }
+                break;
+            case 'service_update':
+                if (id) {
+                    await this.openVendorModal(id);
+                }
+                else {
+                    await this.router.navigate(['/services']);
+                }
+                break;
+            case 'handbook_update':
+                await this.router.navigate(['/handbook']);
+                break;
+            case 'family_access':
+                await this.router.navigate(['/family-access']);
+                break;
+            default:
+                await this.router.navigate(['/home']);
+                break;
+        }
+    }
+    async openChat(conversationId) {
+        const conv = this.peerMessaging.conversations().find(c => c.id === conversationId);
+        if (conv) {
+            await this.peerChat.openConversation(conv);
+        }
+        else {
+            await this.router.navigate(['/messages']);
+        }
+    }
+    async openVendorModal(vendorId) {
+        const vendor = VENDOR_DETAIL_MAP[vendorId];
+        if (vendor && this.vendorModal) {
+            await this.vendorModal.open(vendor);
+        }
+        else {
+            await this.router.navigate(['/services']);
+        }
+    }
+    async openBookingDetail(item) {
+        const booking = BOOKING_DETAIL_MAP[item.targetId];
+        if (booking) {
+            await this.bookingDetailSheet.openAsModal(booking);
+        }
+        else {
+            await this.router.navigate(['/booking']);
+        }
+    }
+    async openPostModal(postId) {
+        const post = this.postsService.getPostById(postId);
+        if (!post) {
+            await this.router.navigate(['/announcements']);
+            return;
+        }
+        const data = {
+            postId: post.id,
+            authorName: post.authorName,
+            authorRole: post.authorRole,
+            timestamp: post.timestamp,
+            content: post.content,
+            avatarInitials: post.avatarInitials,
+            avatarType: post.avatarType === 'icon' ? undefined : post.avatarType,
+            avatarSrc: post.avatarSrc,
+            imageSrc: post.imageSrc,
+            imageAlt: post.imageAlt,
+            isLiked: post.isLiked,
+            likeCount: post.likeCount,
+            commentCount: post.commentCount,
+            comments: post.comments,
+        };
+        await this.postModal.open(data, {
+            currentUserName: this.userService.displayName(),
+            currentUserInitials: this.userService.avatarInitials(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNotificationModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
+class DsMobileToggleComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    changed = output();
+    handleClick(event) {
+        event.stopPropagation();
+        this.toggle();
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        const next = !this.checked();
+        this.checked.set(next);
+        this.changed.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileToggleComponent, isStandalone: true, selector: "ds-mobile-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { listeners: { "click": "handleClick($event)", "keydown.enter": "toggle()", "keydown.space": "$event.preventDefault(); toggle()" }, properties: { "class.disabled": "disabled()", "attr.role": "\"switch\"", "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? -1 : 0" } }, ngImport: i0, template: `
+    <div class="track" [class.active]="checked()">
+      <div class="knob"></div>
+    </div>
+  `, isInline: true, styles: [":host{display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;outline:none}:host(.disabled){opacity:.4;pointer-events:none}:host:focus-visible .track{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.track{width:40px;height:24px;background:var(--color-background-neutral-tertiary, #e3e6eb);border-radius:var(--border-radius-round, 1000px);padding:4px;box-sizing:border-box;transition:background .2s ease}.track.active{background:var(--color-accent, #6b5ff5)}.knob{width:16px;height:16px;background:var(--color-background-neutral-primary, white);border-radius:var(--border-radius-round, 1000px);transition:transform .2s ease}.track.active .knob{transform:translate(16px)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-toggle', standalone: true, host: {
+                        '(click)': 'handleClick($event)',
+                        '[class.disabled]': 'disabled()',
+                        '[attr.role]': '"switch"',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        '(keydown.enter)': 'toggle()',
+                        '(keydown.space)': '$event.preventDefault(); toggle()',
+                    }, template: `
+    <div class="track" [class.active]="checked()">
+      <div class="knob"></div>
+    </div>
+  `, styles: [":host{display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;outline:none}:host(.disabled){opacity:.4;pointer-events:none}:host:focus-visible .track{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}.track{width:40px;height:24px;background:var(--color-background-neutral-tertiary, #e3e6eb);border-radius:var(--border-radius-round, 1000px);padding:4px;box-sizing:border-box;transition:background .2s ease}.track.active{background:var(--color-accent, #6b5ff5)}.knob{width:16px;height:16px;background:var(--color-background-neutral-primary, white);border-radius:var(--border-radius-round, 1000px);transition:transform .2s ease}.track.active .knob{transform:translate(16px)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+// Mobile Page Components
+
 class MobileCommunityPageComponent {
     router;
     route;
@@ -29161,6 +30653,8 @@ class MobileCommunityPageComponent {
     postsService;
     pageComponent;
     pinnedSwiper;
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     // Get posts from service (using computed for safe initialization)
     allPosts = computed(() => this.postsService.posts(), ...(ngDevMode ? [{ debugName: "allPosts" }] : []));
     // Get pinned posts - filter by isPinned flag
@@ -29203,6 +30697,11 @@ class MobileCommunityPageComponent {
         // Complete the infinite scroll
         event.target.complete();
     }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         // Check if offline and complete immediately
@@ -29444,8 +30943,10 @@ class MobileCommunityPageComponent {
     <ds-mobile-page-main
       #pageComponent
       title="Fællesskab"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       <!-- Offline indicator -->
@@ -29698,7 +31199,7 @@ class MobileCommunityPageComponent {
           }
         </ds-mobile-section>
       </ds-mobile-page-main>
-  `, isInline: true, styles: [".pinned-posts-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .pinned-posts-swiper .swiper-slide{width:100%;max-width:600px;height:auto}@media (min-width: 768px){::ng-deep .pinned-posts-swiper .swiper-slide{max-width:100%}}.swiper-post-item{width:100%;height:auto}::ng-deep .pinned-posts-swiper .swiper-slide ds-mobile-interactive-list-item-post{height:auto}::ng-deep .pinned-posts-swiper .swiper-wrapper{height:auto;align-items:flex-start}.post-list-wrapper{display:flex;flex-direction:column}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "loadingStates", "author", "maxVisible", "useGrid"], outputs: ["photoClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }] });
+  `, isInline: true, styles: [".pinned-posts-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .pinned-posts-swiper .swiper-slide{width:100%;max-width:600px;height:auto}@media (min-width: 768px){::ng-deep .pinned-posts-swiper .swiper-slide{max-width:100%}}.swiper-post-item{width:100%;height:auto}::ng-deep .pinned-posts-swiper .swiper-slide ds-mobile-interactive-list-item-post{height:auto}::ng-deep .pinned-posts-swiper .swiper-wrapper{height:auto;align-items:flex-start}.post-list-wrapper{display:flex;flex-direction:column}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "loadingStates", "author", "maxVisible", "useGrid"], outputs: ["photoClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileCommunityPageComponent, decorators: [{
             type: Component,
@@ -29725,8 +31226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ds-mobile-page-main
       #pageComponent
       title="Fællesskab"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       <!-- Offline indicator -->
@@ -29991,6 +31494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class MobileHandbookPageComponent {
     userService;
     pageComponent;
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     // Utilities folder data
     utilitiesItems = [
         {
@@ -30233,6 +31738,11 @@ class MobileHandbookPageComponent {
     constructor(userService) {
         this.userService = userService;
     }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         // Check if offline and complete immediately
@@ -30248,7 +31758,7 @@ class MobileHandbookPageComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, deps: [{ token: UserService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHandbookPageComponent, isStandalone: true, selector: "app-mobile-handbook-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
-    <ds-mobile-page-main #pageComponent title="Håndbog" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (refresh)="handleRefresh($event)">
+    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
         <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
@@ -30269,12 +31779,12 @@ class MobileHandbookPageComponent {
         </div>
       </ds-mobile-section>
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "customColor", "iconName", "itemCount", "label", "items", "loading", "error"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
+  `, isInline: true, styles: [".folders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-items:center}@media (min-width: 768px){.folders-grid{grid-template-columns:repeat(3,1fr)}}ds-mobile-handbook-folder{width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileHandbookFolderComponent, selector: "ds-mobile-handbook-folder", inputs: ["variant", "customColor", "iconName", "itemCount", "label", "items", "loading", "error"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-mobile-handbook-page', standalone: true, imports: [DsMobilePageMainComponent, DsMobileSectionComponent, DsMobileHandbookFolderComponent, DsMobileOfflineBannerComponent], template: `
-    <ds-mobile-page-main #pageComponent title="Håndbog" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (refresh)="handleRefresh($event)">
+    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
         <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
@@ -30851,21 +32361,51 @@ class MobileHomePageComponent {
     // (hides tab bar + renders loading screen at the correct DOM level)
     pageLoading = inject(PageLoadingService);
     // Get recent posts from PostsService - exclude pinned post (post-4) and limit to 3
-    recentPosts = computed(() => this.postsService.posts()
-        .filter(post => post.id !== 'post-4') // Exclude pinned post
+    recentPosts = computed(() => this.postsService
+        .posts()
+        .filter((post) => post.id !== 'post-4') // Exclude pinned post
         .slice(0, 3), ...(ngDevMode ? [{ debugName: "recentPosts" }] : []));
     inquiriesService = inject(InquiriesService);
     openInquiries = computed(() => this.inquiriesService.openInquiries().slice(0, 3), ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
     recentPeerMessages = computed(() => this.peerMessaging.conversations().slice(0, 3), ...(ngDevMode ? [{ debugName: "recentPeerMessages" }] : []));
     allVendors = signal([
-        { id: 'v-1', name: 'CleanTeam ApS', category: 'Rengøring', description: 'Trappevask og vinduespolering', phone: '+45 70 20 30 40', logo: '/Assets/dummy-logos/cleanteam-logo.svg', thumbnail: '/Assets/Dummy-photos/clean-team.jpg', fullDescription: '<h3>Rengøring</h3><p>CleanTeam ApS tilbyder professionel trappevask og vinduespolering for ejendommen. Servicen udføres ugentligt og kan tilpasses jeres behov.</p><h3>Pris</h3><p>350 kr. per besøg</p>' },
-        { id: 'v-3', name: 'Blik Partner A/S', category: 'VVS', description: 'VVS-service og akut udkald', phone: '+45 33 44 55 66', thumbnail: '/Assets/Dummy-photos/plumbing.jpg', fullDescription: '<h3>VVS</h3><p>BlikPartner A/S er jeres VVS-partner til alt fra løbende vedligeholdelse til akutte udkald. Vi dækker reparation af vandrør, afløb, radiatorer og blandingsbatterier.</p><h3>Pris</h3><p>450 kr. per udkald + tid</p>' },
-        { id: 'v-4', name: 'ElektroTek ApS', category: 'Elektriker', description: 'El-installationer og fejlsøgning', phone: '+45 23 45 67 89', logo: '/Assets/dummy-logos/electrician-logo.svg', thumbnail: '/Assets/Dummy-photos/electrician.jpg', heroImage: '/Assets/Dummy-photos/electrician.jpg', fullDescription: '<h3>Elektriker</h3><p>ElektroTek ApS varetager el-installationer, fejlsøgning og lovpligtige eftersyn for ejendommen. Vi udfører også småopgaver som udskiftning af kontakter og lampeudtag.</p><h3>Pris</h3><p>395 kr. per time</p>' },
+        {
+            id: 'v-1',
+            name: 'CleanTeam ApS',
+            category: 'Rengøring',
+            description: 'Trappevask og vinduespolering',
+            phone: '+45 70 20 30 40',
+            logo: '/Assets/dummy-logos/cleanteam-logo.svg',
+            thumbnail: '/Assets/Dummy-photos/clean-team.jpg',
+            fullDescription: '<h3>Rengøring</h3><p>CleanTeam ApS tilbyder professionel trappevask og vinduespolering for ejendommen. Servicen udføres ugentligt og kan tilpasses jeres behov.</p><h3>Pris</h3><p>350 kr. per besøg</p>',
+        },
+        {
+            id: 'v-3',
+            name: 'Blik Partner A/S',
+            category: 'VVS',
+            description: 'VVS-service og akut udkald',
+            phone: '+45 33 44 55 66',
+            thumbnail: '/Assets/Dummy-photos/plumbing.jpg',
+            fullDescription: '<h3>VVS</h3><p>BlikPartner A/S er jeres VVS-partner til alt fra løbende vedligeholdelse til akutte udkald. Vi dækker reparation af vandrør, afløb, radiatorer og blandingsbatterier.</p><h3>Pris</h3><p>450 kr. per udkald + tid</p>',
+        },
+        {
+            id: 'v-4',
+            name: 'ElektroTek ApS',
+            category: 'Elektriker',
+            description: 'El-installationer og fejlsøgning',
+            phone: '+45 23 45 67 89',
+            logo: '/Assets/dummy-logos/electrician-logo.svg',
+            thumbnail: '/Assets/Dummy-photos/electrician.jpg',
+            heroImage: '/Assets/Dummy-photos/electrician.jpg',
+            fullDescription: '<h3>Elektriker</h3><p>ElektroTek ApS varetager el-installationer, fejlsøgning og lovpligtige eftersyn for ejendommen. Vi udfører også småopgaver som udskiftning af kontakter og lampeudtag.</p><h3>Pris</h3><p>395 kr. per time</p>',
+        },
     ], ...(ngDevMode ? [{ debugName: "allVendors" }] : []));
     previewVendors = computed(() => this.allVendors().slice(0, 3), ...(ngDevMode ? [{ debugName: "previewVendors" }] : []));
     modalCtrl = inject(ModalController);
     vendorModal = inject(DsMobileServiceVendorModalService);
     newInquiryModal = inject(DsMobileNewInquiryModalService);
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat, lightboxService) {
         this.router = router;
         this.navCtrl = navCtrl;
@@ -30893,6 +32433,11 @@ class MobileHomePageComponent {
             }, delayMs);
         });
     }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         setTimeout(() => {
@@ -30909,11 +32454,11 @@ class MobileHomePageComponent {
                 ...post,
                 postId: post.id,
                 avatarType: post.avatarType === 'icon' ? undefined : post.avatarType,
-                focusComment
+                focusComment,
             };
             await this.postModal.open(postData, {
                 currentUserName: 'Lars Mikkelsen',
-                currentUserInitials: this.userService.avatarInitials()
+                currentUserInitials: this.userService.avatarInitials(),
             });
         }
     }
@@ -31001,7 +32546,7 @@ class MobileHomePageComponent {
             initialBreakpoint: 1,
             handle: true,
             backdropDismiss: true,
-            cssClass: 'auto-height'
+            cssClass: 'auto-height',
         });
         const result = await sheet.onWillDismiss();
         if (result.role === 'select' && result.data) {
@@ -31012,7 +32557,7 @@ class MobileHomePageComponent {
                     if (post) {
                         this.postsService.updatePost(postId, {
                             isLiked: !post.isLiked,
-                            likeCount: post.isLiked ? post.likeCount - 1 : post.likeCount + 1
+                            likeCount: post.isLiked ? post.likeCount - 1 : post.likeCount + 1,
                         });
                     }
                     break;
@@ -31032,216 +32577,189 @@ class MobileHomePageComponent {
     @if (!pageLoading.isCoveringScreen()) {
       <ds-mobile-page-main
         class="home-content"
+        [showNotification]="true"
         [class.home-content--animating]="pageLoading.isRevealAnimation()"
         [firstEntry]="pageLoading.isRevealAnimation()"
         #pageComponent
         title="Hjem"
         headerTitle="Velkommen, Lars"
+        [notificationCount]="notificationService.unreadCount()"
         [avatarInitials]="userService.avatarInitials()"
         [avatarType]="userService.avatarType()"
+        (notificationClick)="handleNotificationClick()"
         (refresh)="handleRefresh($event)"
+      >
+        <!-- Offline indicator -->
+        @if (pageComponent.isOffline()) {
+          <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
+        }
+
+        <!-- Property banner → beboere (prototype IA) -->
+        <div
+          header-content
+          class="property-banner-nav"
+          role="button"
+          tabindex="0"
+          (click)="navigateToTenants()"
+          (keydown.enter)="navigateToTenants()"
+          (keydown.space)="$event.preventDefault(); navigateToTenants()"
+          aria-label="Se beboere på ejendommen"
         >
-      
-      <!-- Offline indicator -->
-      @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
-      }
-      
-      <!-- Property banner → beboere (prototype IA) -->
-      <div
-        header-content
-        class="property-banner-nav"
-        role="button"
-        tabindex="0"
-        (click)="navigateToTenants()"
-        (keydown.enter)="navigateToTenants()"
-        (keydown.space)="$event.preventDefault(); navigateToTenants()"
-        aria-label="Se beboere på ejendommen">
-        <ds-mobile-property-banner
-          address="Toftegårds Allé 5A, 2. tv."
-          photoUrl="/Assets/Dummy-photos/building.jpg"
-          [tenantCount]="24">
-        </ds-mobile-property-banner>
-      </div>
+          <ds-mobile-property-banner address="Toftegårds Allé 5A, 2. tv." photoUrl="/Assets/Dummy-photos/building.jpg" [tenantCount]="24"> </ds-mobile-property-banner>
+        </div>
 
-      @if (familyAccessService.acceptedInviteContext(); as invite) {
-        <ds-mobile-section [showBorder]="false" padding="20px 20px 0">
-          <div class="welcome-toast">
-            <div class="toast-icon">
-              <ds-icon name="remixUserSmileLine" size="12px" />
-            </div>
-            <div class="welcome-toast-content">
-              <p class="welcome-toast-heading">Du er nu familiemedlem!</p>
-              <p class="welcome-toast-text">
-                Tilknyttet <strong>{{ invite.propertyAddress }}</strong> via <strong>{{ invite.inviterName }}</strong>
-              </p>
+        @if (familyAccessService.acceptedInviteContext(); as invite) {
+          <ds-mobile-section [showBorder]="false" padding="20px 20px 0">
+            <div class="welcome-toast">
+              <div class="toast-icon">
+                <ds-icon name="remixUserSmileLine" size="12px" />
+              </div>
+              <div class="welcome-toast-content">
+                <p class="welcome-toast-heading">Du er nu familiemedlem!</p>
+                <p class="welcome-toast-text">
+                  Tilknyttet <strong>{{ invite.propertyAddress }}</strong> via <strong>{{ invite.inviterName }}</strong>
+                </p>
+              </div>
+              <button class="toast-dismiss" (click)="familyAccessService.clearAcceptedInviteContext()" aria-label="Luk">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                </svg>
+              </button>
             </div>
-            <button class="toast-dismiss" (click)="familyAccessService.clearAcceptedInviteContext()" aria-label="Luk">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              </svg>
-            </button>
+          </ds-mobile-section>
+        }
+
+        <!-- Recent Community Posts Section (with content) -->
+        <ds-mobile-section headline="Seneste opslag" linkText="Se alle" (linkClick)="navigateToCommunity()">
+          <div class="posts-list">
+            @for (post of recentPosts(); track post.id) {
+              <ds-mobile-interactive-list-item-post
+                [authorName]="post.authorName"
+                [authorRole]="post.authorRole"
+                [timestamp]="post.timestamp"
+                [avatarType]="post.avatarType"
+                [avatarSrc]="post.avatarSrc || ''"
+                [avatarInitials]="post.avatarInitials || ''"
+                [showBadge]="post.showBadge || false"
+                [clickable]="true"
+                [moreActions]="true"
+                (postClick)="openPost(post.id)"
+                (commentClick)="openPost(post.id, true)"
+                (longPress)="handlePostLongPress(post.id)"
+              >
+                <post-content>
+                  @if (post.content) {
+                    <post-text>{{ post.content }}</post-text>
+                  }
+                </post-content>
+
+                <post-actions>
+                  <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                  <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+            }
           </div>
         </ds-mobile-section>
-      }
-      
-      <!-- Recent Community Posts Section (with content) -->
-      <ds-mobile-section 
-        headline="Seneste opslag"
-        linkText="Se alle"
-        (linkClick)="navigateToCommunity()">
-        
-        <div class="posts-list">
-          @for (post of recentPosts(); track post.id) {
-            <ds-mobile-interactive-list-item-post
-              [authorName]="post.authorName"
-              [authorRole]="post.authorRole"
-              [timestamp]="post.timestamp"
-              [avatarType]="post.avatarType"
-              [avatarSrc]="post.avatarSrc || ''"
-              [avatarInitials]="post.avatarInitials || ''"
-              [showBadge]="post.showBadge || false"
-              [clickable]="true"
-              [moreActions]="true"
-              (postClick)="openPost(post.id)"
-              (commentClick)="openPost(post.id, true)"
-              (longPress)="handlePostLongPress(post.id)">
-              
-              <post-content>
-                @if (post.content) {
-                  <post-text>{{ post.content }}</post-text>
-                }
-              </post-content>
-              
-              <post-actions>
-                <action-like [count]="post.likeCount" [active]="post.isLiked" />
-                <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-              </post-actions>
-            </ds-mobile-interactive-list-item-post>
-          }
-        </div>
-      </ds-mobile-section>
 
-      <ds-mobile-section
-        headline="Seneste beskeder"
-        linkText="Se alle"
-        (linkClick)="navigateToMessages()">
-        <div class="messages-preview-list">
-          @for (conv of recentPeerMessages(); track conv.id) {
-            @if (isPeerGroupConversation(conv)) {
-              <ds-mobile-interactive-list-item-message
-                [senderName]="conv.title"
-                [senderRole]="conv.memberIds.length + ' medlemmer'"
-                [timestamp]="conv.timestamp"
-                [message]="conv.lastMessage"
-                [avatarInitials]="''"
-                [avatarType]="'initials'"
-                [groupStackMembers]="peerChat.resolveGroupMembers(conv)"
-                [groupCustomAvatarUrl]="conv.customAvatarUrl ?? ''"
-                groupStackExcludeParticipantId="me"
-                [showAvatarBadge]="false"
-                [unread]="conv.unread"
-                [clickable]="true"
-                (messageClick)="openPeerMessagePreview(conv)">
-              </ds-mobile-interactive-list-item-message>
-            } @else {
-              <ds-mobile-interactive-list-item-message
-                [senderName]="conv.participant.name"
-                [senderRole]="conv.participant.role ?? ''"
-                [timestamp]="conv.timestamp"
-                [message]="conv.lastMessage"
-                [avatarInitials]="conv.participant.avatarInitials ?? ''"
-                [avatarType]="conv.participant.avatarType ?? 'initials'"
-                [showAvatarBadge]="false"
-                [unread]="conv.unread"
+        <ds-mobile-section headline="Seneste beskeder" linkText="Se alle" (linkClick)="navigateToMessages()">
+          <div class="messages-preview-list">
+            @for (conv of recentPeerMessages(); track conv.id) {
+              @if (isPeerGroupConversation(conv)) {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="conv.title"
+                  [senderRole]="conv.memberIds.length + ' medlemmer'"
+                  [timestamp]="conv.timestamp"
+                  [message]="conv.lastMessage"
+                  [avatarInitials]="''"
+                  [avatarType]="'initials'"
+                  [groupStackMembers]="peerChat.resolveGroupMembers(conv)"
+                  [groupCustomAvatarUrl]="conv.customAvatarUrl ?? ''"
+                  groupStackExcludeParticipantId="me"
+                  [showAvatarBadge]="false"
+                  [unread]="conv.unread"
+                  [clickable]="true"
+                  (messageClick)="openPeerMessagePreview(conv)"
+                >
+                </ds-mobile-interactive-list-item-message>
+              } @else {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="conv.participant.name"
+                  [senderRole]="conv.participant.role ?? ''"
+                  [timestamp]="conv.timestamp"
+                  [message]="conv.lastMessage"
+                  [avatarInitials]="conv.participant.avatarInitials ?? ''"
+                  [avatarType]="conv.participant.avatarType ?? 'initials'"
+                  [showAvatarBadge]="false"
+                  [unread]="conv.unread"
+                  [clickable]="true"
+                  (messageClick)="openPeerMessagePreview(conv)"
+                >
+                </ds-mobile-interactive-list-item-message>
+              }
+            }
+          </div>
+        </ds-mobile-section>
+
+        <!-- Services preview -->
+        @if (previewVendors().length > 0) {
+          <ds-mobile-section headline="Services" linkText="Se alle" contentGap="0px" (linkClick)="navigateToServices()">
+            @for (vendor of previewVendors(); track vendor.id) {
+              <ds-mobile-interactive-list-item-service
+                [title]="vendor.name"
+                [description]="vendor.description || ''"
+                [logo]="vendor.logo || ''"
+                (serviceClick)="openVendorSheet(vendor)"
+              />
+            }
+          </ds-mobile-section>
+        }
+
+        <!-- Recent Community Posts Section (empty state) -->
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="post" alt="No posts" />
+            <h3 class="empty-state-title">Ingen opslag endnu</h3>
+            <p class="empty-state-description">Der er ingen opslag i fællesområdet i øjeblikket</p>
+
+            <ds-button variant="secondary" trailingIcon="remixArrowRightSLine" (click)="navigateToCommunity()"> Gå til fællesområdet </ds-button>
+          </div>
+        </ds-mobile-section>
+
+        <!-- Open Inquiries Section (with content) -->
+        <ds-mobile-section headline="Åbne henvendelser" linkText="Se alle" (linkClick)="navigateToInquiries()">
+          <div class="inquiries-list">
+            @for (inquiry of openInquiries(); track inquiry.id) {
+              <ds-mobile-interactive-list-item-inquiry
+                [title]="inquiry.title"
+                [description]="inquiry.description"
+                [status]="inquiry.status"
+                [timestamp]="inquiry.timestamp"
+                [iconName]="'remixTodoLine'"
                 [clickable]="true"
-                (messageClick)="openPeerMessagePreview(conv)">
-              </ds-mobile-interactive-list-item-message>
+                [showChevron]="false"
+                [enableLongPress]="false"
+                (inquiryClick)="openInquiryDetail(inquiry.id)"
+              >
+              </ds-mobile-interactive-list-item-inquiry>
             }
-          }
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Services preview -->
-      @if (previewVendors().length > 0) {
-        <ds-mobile-section
-          headline="Services"
-          linkText="Se alle"
-          contentGap="0px"
-          (linkClick)="navigateToServices()">
-          @for (vendor of previewVendors(); track vendor.id) {
-            <ds-mobile-interactive-list-item-service
-              [title]="vendor.name"
-              [description]="vendor.description || ''"
-              [logo]="vendor.logo || ''"
-              (serviceClick)="openVendorSheet(vendor)"
-            />
-          }
+          </div>
         </ds-mobile-section>
-      }
 
-      <!-- Recent Community Posts Section (empty state) -->
-      <ds-mobile-section>
-        <div class="empty-state">
-          <ds-mobile-illustration variant="post" alt="No posts" />
-          <h3 class="empty-state-title">Ingen opslag endnu</h3>
-          <p class="empty-state-description">Der er ingen opslag i fællesområdet i øjeblikket</p>
-          
-          <ds-button 
-            variant="secondary" 
-            trailingIcon="remixArrowRightSLine"
-            (click)="navigateToCommunity()">
-            Gå til fællesområdet
-          </ds-button>
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Open Inquiries Section (with content) -->
-      <ds-mobile-section 
-        headline="Åbne henvendelser"
-        linkText="Se alle"
-        (linkClick)="navigateToInquiries()">
-        
-        <div class="inquiries-list">
-          @for (inquiry of openInquiries(); track inquiry.id) {
-            <ds-mobile-interactive-list-item-inquiry
-              [title]="inquiry.title"
-              [description]="inquiry.description"
-              [status]="inquiry.status"
-              [timestamp]="inquiry.timestamp"
-              [iconName]="'remixTodoLine'"
-              [clickable]="true"
-              [showChevron]="false"
-              [enableLongPress]="false"
-              (inquiryClick)="openInquiryDetail(inquiry.id)">
-            </ds-mobile-interactive-list-item-inquiry>
-          }
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Open Inquiries Section (empty state) -->
-      <ds-mobile-section>
-        <div class="empty-state">
-          <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
-          <h3 class="empty-state-title">Ingen åbne henvendelser</h3>
-          <p class="empty-state-description">Du har ingen åbne henvendelser i øjeblikket</p>
-          
-          <ds-button 
-            variant="secondary" 
-            trailingIcon="remixArrowRightSLine"
-            (click)="navigateToInquiries()">
-            Gå til henvendelser
-          </ds-button>
-        </div>
-      </ds-mobile-section>
-    </ds-mobile-page-main>
-    } <!-- end @if (!isCoveringScreen()) -->
+        <!-- Open Inquiries Section (empty state) -->
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
+            <h3 class="empty-state-title">Ingen åbne henvendelser</h3>
+            <p class="empty-state-description">Du har ingen åbne henvendelser i øjeblikket</p>
 
-  `, isInline: true, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobilePropertyBannerComponent, selector: "ds-mobile-property-banner", inputs: ["address", "photoUrl", "tenantCount"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "unreadStyle", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }] });
+            <ds-button variant="secondary" trailingIcon="remixArrowRightSLine" (click)="navigateToInquiries()"> Gå til henvendelser </ds-button>
+          </div>
+        </ds-mobile-section>
+      </ds-mobile-page-main>
+    }
+    <!-- end @if (!isCoveringScreen()) -->
+  `, isInline: true, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6b5ff5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #eef0ff);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6b5ff5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6b5ff5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3b3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3b3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6b5ff5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobilePropertyBannerComponent, selector: "ds-mobile-property-banner", inputs: ["address", "photoUrl", "tenantCount"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "unreadStyle", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, decorators: [{
             type: Component,
@@ -31255,14 +32773,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileInteractiveListItemPostComponent,
                         DsMobileInteractiveListItemInquiryComponent,
                         DsMobileInteractiveListItemMessageComponent,
-                        DsMobileInteractiveListItemBookingComponent,
                         DsMobileInteractiveListItemServiceComponent,
                         DsMobileOfflineBannerComponent,
                         PostContentComponent,
                         PostTextComponent,
                         PostActionsComponent,
                         ActionLikeComponent,
-                        ActionCommentComponent
+                        ActionCommentComponent,
                     ], template: `
     <!-- Full-screen loading state (first entry) — rendered by layout, not here -->
 
@@ -31272,216 +32789,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     @if (!pageLoading.isCoveringScreen()) {
       <ds-mobile-page-main
         class="home-content"
+        [showNotification]="true"
         [class.home-content--animating]="pageLoading.isRevealAnimation()"
         [firstEntry]="pageLoading.isRevealAnimation()"
         #pageComponent
         title="Hjem"
         headerTitle="Velkommen, Lars"
+        [notificationCount]="notificationService.unreadCount()"
         [avatarInitials]="userService.avatarInitials()"
         [avatarType]="userService.avatarType()"
+        (notificationClick)="handleNotificationClick()"
         (refresh)="handleRefresh($event)"
+      >
+        <!-- Offline indicator -->
+        @if (pageComponent.isOffline()) {
+          <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
+        }
+
+        <!-- Property banner → beboere (prototype IA) -->
+        <div
+          header-content
+          class="property-banner-nav"
+          role="button"
+          tabindex="0"
+          (click)="navigateToTenants()"
+          (keydown.enter)="navigateToTenants()"
+          (keydown.space)="$event.preventDefault(); navigateToTenants()"
+          aria-label="Se beboere på ejendommen"
         >
-      
-      <!-- Offline indicator -->
-      @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
-      }
-      
-      <!-- Property banner → beboere (prototype IA) -->
-      <div
-        header-content
-        class="property-banner-nav"
-        role="button"
-        tabindex="0"
-        (click)="navigateToTenants()"
-        (keydown.enter)="navigateToTenants()"
-        (keydown.space)="$event.preventDefault(); navigateToTenants()"
-        aria-label="Se beboere på ejendommen">
-        <ds-mobile-property-banner
-          address="Toftegårds Allé 5A, 2. tv."
-          photoUrl="/Assets/Dummy-photos/building.jpg"
-          [tenantCount]="24">
-        </ds-mobile-property-banner>
-      </div>
+          <ds-mobile-property-banner address="Toftegårds Allé 5A, 2. tv." photoUrl="/Assets/Dummy-photos/building.jpg" [tenantCount]="24"> </ds-mobile-property-banner>
+        </div>
 
-      @if (familyAccessService.acceptedInviteContext(); as invite) {
-        <ds-mobile-section [showBorder]="false" padding="20px 20px 0">
-          <div class="welcome-toast">
-            <div class="toast-icon">
-              <ds-icon name="remixUserSmileLine" size="12px" />
-            </div>
-            <div class="welcome-toast-content">
-              <p class="welcome-toast-heading">Du er nu familiemedlem!</p>
-              <p class="welcome-toast-text">
-                Tilknyttet <strong>{{ invite.propertyAddress }}</strong> via <strong>{{ invite.inviterName }}</strong>
-              </p>
+        @if (familyAccessService.acceptedInviteContext(); as invite) {
+          <ds-mobile-section [showBorder]="false" padding="20px 20px 0">
+            <div class="welcome-toast">
+              <div class="toast-icon">
+                <ds-icon name="remixUserSmileLine" size="12px" />
+              </div>
+              <div class="welcome-toast-content">
+                <p class="welcome-toast-heading">Du er nu familiemedlem!</p>
+                <p class="welcome-toast-text">
+                  Tilknyttet <strong>{{ invite.propertyAddress }}</strong> via <strong>{{ invite.inviterName }}</strong>
+                </p>
+              </div>
+              <button class="toast-dismiss" (click)="familyAccessService.clearAcceptedInviteContext()" aria-label="Luk">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                </svg>
+              </button>
             </div>
-            <button class="toast-dismiss" (click)="familyAccessService.clearAcceptedInviteContext()" aria-label="Luk">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              </svg>
-            </button>
+          </ds-mobile-section>
+        }
+
+        <!-- Recent Community Posts Section (with content) -->
+        <ds-mobile-section headline="Seneste opslag" linkText="Se alle" (linkClick)="navigateToCommunity()">
+          <div class="posts-list">
+            @for (post of recentPosts(); track post.id) {
+              <ds-mobile-interactive-list-item-post
+                [authorName]="post.authorName"
+                [authorRole]="post.authorRole"
+                [timestamp]="post.timestamp"
+                [avatarType]="post.avatarType"
+                [avatarSrc]="post.avatarSrc || ''"
+                [avatarInitials]="post.avatarInitials || ''"
+                [showBadge]="post.showBadge || false"
+                [clickable]="true"
+                [moreActions]="true"
+                (postClick)="openPost(post.id)"
+                (commentClick)="openPost(post.id, true)"
+                (longPress)="handlePostLongPress(post.id)"
+              >
+                <post-content>
+                  @if (post.content) {
+                    <post-text>{{ post.content }}</post-text>
+                  }
+                </post-content>
+
+                <post-actions>
+                  <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                  <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+            }
           </div>
         </ds-mobile-section>
-      }
-      
-      <!-- Recent Community Posts Section (with content) -->
-      <ds-mobile-section 
-        headline="Seneste opslag"
-        linkText="Se alle"
-        (linkClick)="navigateToCommunity()">
-        
-        <div class="posts-list">
-          @for (post of recentPosts(); track post.id) {
-            <ds-mobile-interactive-list-item-post
-              [authorName]="post.authorName"
-              [authorRole]="post.authorRole"
-              [timestamp]="post.timestamp"
-              [avatarType]="post.avatarType"
-              [avatarSrc]="post.avatarSrc || ''"
-              [avatarInitials]="post.avatarInitials || ''"
-              [showBadge]="post.showBadge || false"
-              [clickable]="true"
-              [moreActions]="true"
-              (postClick)="openPost(post.id)"
-              (commentClick)="openPost(post.id, true)"
-              (longPress)="handlePostLongPress(post.id)">
-              
-              <post-content>
-                @if (post.content) {
-                  <post-text>{{ post.content }}</post-text>
-                }
-              </post-content>
-              
-              <post-actions>
-                <action-like [count]="post.likeCount" [active]="post.isLiked" />
-                <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-              </post-actions>
-            </ds-mobile-interactive-list-item-post>
-          }
-        </div>
-      </ds-mobile-section>
 
-      <ds-mobile-section
-        headline="Seneste beskeder"
-        linkText="Se alle"
-        (linkClick)="navigateToMessages()">
-        <div class="messages-preview-list">
-          @for (conv of recentPeerMessages(); track conv.id) {
-            @if (isPeerGroupConversation(conv)) {
-              <ds-mobile-interactive-list-item-message
-                [senderName]="conv.title"
-                [senderRole]="conv.memberIds.length + ' medlemmer'"
-                [timestamp]="conv.timestamp"
-                [message]="conv.lastMessage"
-                [avatarInitials]="''"
-                [avatarType]="'initials'"
-                [groupStackMembers]="peerChat.resolveGroupMembers(conv)"
-                [groupCustomAvatarUrl]="conv.customAvatarUrl ?? ''"
-                groupStackExcludeParticipantId="me"
-                [showAvatarBadge]="false"
-                [unread]="conv.unread"
-                [clickable]="true"
-                (messageClick)="openPeerMessagePreview(conv)">
-              </ds-mobile-interactive-list-item-message>
-            } @else {
-              <ds-mobile-interactive-list-item-message
-                [senderName]="conv.participant.name"
-                [senderRole]="conv.participant.role ?? ''"
-                [timestamp]="conv.timestamp"
-                [message]="conv.lastMessage"
-                [avatarInitials]="conv.participant.avatarInitials ?? ''"
-                [avatarType]="conv.participant.avatarType ?? 'initials'"
-                [showAvatarBadge]="false"
-                [unread]="conv.unread"
+        <ds-mobile-section headline="Seneste beskeder" linkText="Se alle" (linkClick)="navigateToMessages()">
+          <div class="messages-preview-list">
+            @for (conv of recentPeerMessages(); track conv.id) {
+              @if (isPeerGroupConversation(conv)) {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="conv.title"
+                  [senderRole]="conv.memberIds.length + ' medlemmer'"
+                  [timestamp]="conv.timestamp"
+                  [message]="conv.lastMessage"
+                  [avatarInitials]="''"
+                  [avatarType]="'initials'"
+                  [groupStackMembers]="peerChat.resolveGroupMembers(conv)"
+                  [groupCustomAvatarUrl]="conv.customAvatarUrl ?? ''"
+                  groupStackExcludeParticipantId="me"
+                  [showAvatarBadge]="false"
+                  [unread]="conv.unread"
+                  [clickable]="true"
+                  (messageClick)="openPeerMessagePreview(conv)"
+                >
+                </ds-mobile-interactive-list-item-message>
+              } @else {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="conv.participant.name"
+                  [senderRole]="conv.participant.role ?? ''"
+                  [timestamp]="conv.timestamp"
+                  [message]="conv.lastMessage"
+                  [avatarInitials]="conv.participant.avatarInitials ?? ''"
+                  [avatarType]="conv.participant.avatarType ?? 'initials'"
+                  [showAvatarBadge]="false"
+                  [unread]="conv.unread"
+                  [clickable]="true"
+                  (messageClick)="openPeerMessagePreview(conv)"
+                >
+                </ds-mobile-interactive-list-item-message>
+              }
+            }
+          </div>
+        </ds-mobile-section>
+
+        <!-- Services preview -->
+        @if (previewVendors().length > 0) {
+          <ds-mobile-section headline="Services" linkText="Se alle" contentGap="0px" (linkClick)="navigateToServices()">
+            @for (vendor of previewVendors(); track vendor.id) {
+              <ds-mobile-interactive-list-item-service
+                [title]="vendor.name"
+                [description]="vendor.description || ''"
+                [logo]="vendor.logo || ''"
+                (serviceClick)="openVendorSheet(vendor)"
+              />
+            }
+          </ds-mobile-section>
+        }
+
+        <!-- Recent Community Posts Section (empty state) -->
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="post" alt="No posts" />
+            <h3 class="empty-state-title">Ingen opslag endnu</h3>
+            <p class="empty-state-description">Der er ingen opslag i fællesområdet i øjeblikket</p>
+
+            <ds-button variant="secondary" trailingIcon="remixArrowRightSLine" (click)="navigateToCommunity()"> Gå til fællesområdet </ds-button>
+          </div>
+        </ds-mobile-section>
+
+        <!-- Open Inquiries Section (with content) -->
+        <ds-mobile-section headline="Åbne henvendelser" linkText="Se alle" (linkClick)="navigateToInquiries()">
+          <div class="inquiries-list">
+            @for (inquiry of openInquiries(); track inquiry.id) {
+              <ds-mobile-interactive-list-item-inquiry
+                [title]="inquiry.title"
+                [description]="inquiry.description"
+                [status]="inquiry.status"
+                [timestamp]="inquiry.timestamp"
+                [iconName]="'remixTodoLine'"
                 [clickable]="true"
-                (messageClick)="openPeerMessagePreview(conv)">
-              </ds-mobile-interactive-list-item-message>
+                [showChevron]="false"
+                [enableLongPress]="false"
+                (inquiryClick)="openInquiryDetail(inquiry.id)"
+              >
+              </ds-mobile-interactive-list-item-inquiry>
             }
-          }
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Services preview -->
-      @if (previewVendors().length > 0) {
-        <ds-mobile-section
-          headline="Services"
-          linkText="Se alle"
-          contentGap="0px"
-          (linkClick)="navigateToServices()">
-          @for (vendor of previewVendors(); track vendor.id) {
-            <ds-mobile-interactive-list-item-service
-              [title]="vendor.name"
-              [description]="vendor.description || ''"
-              [logo]="vendor.logo || ''"
-              (serviceClick)="openVendorSheet(vendor)"
-            />
-          }
+          </div>
         </ds-mobile-section>
-      }
 
-      <!-- Recent Community Posts Section (empty state) -->
-      <ds-mobile-section>
-        <div class="empty-state">
-          <ds-mobile-illustration variant="post" alt="No posts" />
-          <h3 class="empty-state-title">Ingen opslag endnu</h3>
-          <p class="empty-state-description">Der er ingen opslag i fællesområdet i øjeblikket</p>
-          
-          <ds-button 
-            variant="secondary" 
-            trailingIcon="remixArrowRightSLine"
-            (click)="navigateToCommunity()">
-            Gå til fællesområdet
-          </ds-button>
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Open Inquiries Section (with content) -->
-      <ds-mobile-section 
-        headline="Åbne henvendelser"
-        linkText="Se alle"
-        (linkClick)="navigateToInquiries()">
-        
-        <div class="inquiries-list">
-          @for (inquiry of openInquiries(); track inquiry.id) {
-            <ds-mobile-interactive-list-item-inquiry
-              [title]="inquiry.title"
-              [description]="inquiry.description"
-              [status]="inquiry.status"
-              [timestamp]="inquiry.timestamp"
-              [iconName]="'remixTodoLine'"
-              [clickable]="true"
-              [showChevron]="false"
-              [enableLongPress]="false"
-              (inquiryClick)="openInquiryDetail(inquiry.id)">
-            </ds-mobile-interactive-list-item-inquiry>
-          }
-        </div>
-      </ds-mobile-section>
-      
-      <!-- Open Inquiries Section (empty state) -->
-      <ds-mobile-section>
-        <div class="empty-state">
-          <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
-          <h3 class="empty-state-title">Ingen åbne henvendelser</h3>
-          <p class="empty-state-description">Du har ingen åbne henvendelser i øjeblikket</p>
-          
-          <ds-button 
-            variant="secondary" 
-            trailingIcon="remixArrowRightSLine"
-            (click)="navigateToInquiries()">
-            Gå til henvendelser
-          </ds-button>
-        </div>
-      </ds-mobile-section>
-    </ds-mobile-page-main>
-    } <!-- end @if (!isCoveringScreen()) -->
+        <!-- Open Inquiries Section (empty state) -->
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
+            <h3 class="empty-state-title">Ingen åbne henvendelser</h3>
+            <p class="empty-state-description">Du har ingen åbne henvendelser i øjeblikket</p>
 
-  `, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            <ds-button variant="secondary" trailingIcon="remixArrowRightSLine" (click)="navigateToInquiries()"> Gå til henvendelser </ds-button>
+          </div>
+        </ds-mobile-section>
+      </ds-mobile-page-main>
+    }
+    <!-- end @if (!isCoveringScreen()) -->
+  `, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6b5ff5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #eef0ff);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6b5ff5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6b5ff5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3b3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3b3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6b5ff5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }, { type: DsMobileLightboxService }], propDecorators: { pageComponent: [{
                 type: ViewChild,
                 args: ['pageComponent']
@@ -31493,6 +32983,8 @@ class MobileInquiriesPageComponent {
     newInquiryModal;
     pageComponent;
     inquiriesService = inject(InquiriesService);
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     constructor(userService, navCtrl, newInquiryModal) {
         this.userService = userService;
         this.navCtrl = navCtrl;
@@ -31528,6 +33020,11 @@ class MobileInquiriesPageComponent {
         console.log('Showing actions for inquiry:', inquiryId);
         // Show bottom sheet with actions (edit, delete, etc.)
     }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered on inquiries page');
         // Check if offline and complete immediately
@@ -31567,8 +33064,10 @@ class MobileInquiriesPageComponent {
     <ds-mobile-page-main
       #pageComponent
       title="Henvendelser"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       <!-- Offline indicator -->
@@ -31632,7 +33131,7 @@ class MobileInquiriesPageComponent {
       ariaLabel="Create new inquiry"
       (clicked)="createNewInquiry()">
     </ds-mobile-fab>
-  `, isInline: true, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileInquiriesPageComponent, decorators: [{
             type: Component,
@@ -31650,8 +33149,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ds-mobile-page-main
       #pageComponent
       title="Henvendelser"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       <!-- Offline indicator -->
@@ -32323,6 +33824,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [".activity-list{display:flex;flex-direction:column;gap:12px;position:relative}.activity-list ds-mobile-list-item:not(:last-child) [content-leading]:after{content:\"\";position:absolute;top:40px;left:50%;transform:translate(-50%);width:1px;height:calc(100% - 2px);background:var(--border-color-default, #e5e5e5);z-index:0}.activity-icon-wrapper{width:100%;height:100%;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:100%;height:100%;z-index:1}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.photo-add{width:100%;aspect-ratio:1;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer}.photo-item{width:100%;aspect-ratio:1;border-radius:12px;-o-object-fit:cover;object-fit:cover}.empty-messages{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px}.empty-messages-image{width:96px;height:96px;-o-object-fit:contain;object-fit:contain}.empty-messages-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #71727a);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: DsMobileLightboxService }, { type: DsMobileChatModalService }] });
 
+const STORAGE_KEY = 'ds-notification-prompt-dismissed';
+const COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours
+/**
+ * Manages the notification permission prompt lifecycle.
+ *
+ * - Stores the user's "Not now" dismissal timestamp in localStorage
+ * - Re-shows the prompt after a 24-hour cooldown
+ * - Skips the prompt entirely if native permissions are already granted
+ *
+ * Downstream integration: call `checkPermissions()` before checking
+ * `shouldShowPrompt()` to incorporate native permission status.
+ */
+class NotificationPromptService {
+    permissionGranted = false;
+    /**
+     * Record that the user dismissed the prompt. Stores the current
+     * timestamp so the prompt can be suppressed for 24 hours.
+     */
+    dismiss() {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify({ dismissedAt: Date.now() }));
+        }
+        catch {
+            // localStorage unavailable (SSR, private browsing quota)
+        }
+    }
+    /**
+     * Whether the prompt should be displayed right now.
+     * Returns false if:
+     * - Native permission is already granted
+     * - The user dismissed less than 24 hours ago
+     */
+    shouldShowPrompt() {
+        if (this.permissionGranted)
+            return false;
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            if (!raw)
+                return true;
+            const { dismissedAt } = JSON.parse(raw);
+            return Date.now() - dismissedAt >= COOLDOWN_MS;
+        }
+        catch {
+            return true;
+        }
+    }
+    /**
+     * Call this on app launch to check native notification permission status.
+     * If already granted, the prompt will never be shown.
+     */
+    async checkPermissions() {
+        try {
+            const { PushNotifications } = await import('@capacitor/push-notifications');
+            const result = await PushNotifications.checkPermissions();
+            this.permissionGranted = result.receive === 'granted';
+        }
+        catch {
+            // Not on native — leave as false so the prompt can still show
+        }
+    }
+    /**
+     * Mark that the user has granted permission (called after a successful
+     * allow flow so the prompt is permanently hidden for this session).
+     */
+    markGranted() {
+        this.permissionGranted = true;
+        try {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+        catch {
+            // noop
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPromptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPromptService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Whitelabel Demo Modal Component
  *
@@ -33462,7 +35044,11 @@ class MobileTabsExampleComponent {
     navCtrl;
     whitelabelDemoModal = inject(WhitelabelDemoModalService);
     trackingPermissionService = inject(TrackingPermissionService);
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
+    notificationPrompt = inject(NotificationPromptService);
     pageLoading = inject(PageLoadingService);
+    showNotificationPrompt = signal(false, ...(ngDevMode ? [{ debugName: "showNotificationPrompt" }] : []));
     trackedProfileMenuItems = computed(() => {
         const accountActions = [
             {
@@ -33473,8 +35059,8 @@ class MobileTabsExampleComponent {
             },
             {
                 action: 'settings',
-                title: 'Indstillinger',
-                icon: 'remixSettings3Line',
+                title: 'Notifikationer',
+                icon: 'remixNotificationLine',
                 destructive: false,
             },
             {
@@ -33542,15 +35128,15 @@ class MobileTabsExampleComponent {
             this.userService.setProfileMenuItems(this.trackedProfileMenuItems());
         });
     }
-    ngOnInit() {
+    async ngOnInit() {
         console.log('MobileTabsExampleComponent ngOnInit');
-        // Configure user avatar globally - this is now the single source of truth
         this.userService.setDisplayName('Lucas Møller');
         this.userService.setAddress('Toftegårds Allé 5A, 3. tv.');
         this.userService.setAvatarInitials('LM');
         this.userService.setAvatarType('initials');
-        // Initial status refresh ensures menu reflects past ATT choice.
         void this.trackingPermissionService.refreshTrackingStatus();
+        await this.notificationPrompt.checkPermissions();
+        this.showNotificationPrompt.set(this.notificationPrompt.shouldShowPrompt());
     }
     tabs = [
         {
@@ -33657,6 +35243,34 @@ class MobileTabsExampleComponent {
             });
         }
     }
+    async handleNotificationAllow() {
+        console.log('Notification permission: requesting native dialog...');
+        this.showNotificationPrompt.set(false);
+        try {
+            const { PushNotifications } = await import('@capacitor/push-notifications');
+            const permission = await PushNotifications.requestPermissions();
+            console.log('Push permission result:', permission.receive);
+            if (permission.receive === 'granted') {
+                await PushNotifications.register();
+                this.notificationPrompt.markGranted();
+                console.log('Push notifications registered');
+            }
+        }
+        catch (err) {
+            console.warn('Push notifications not available (web/simulator):', err);
+        }
+    }
+    handleNotificationDismiss() {
+        console.log('Notification permission: dismissed (24hr cooldown)');
+        this.notificationPrompt.dismiss();
+        this.showNotificationPrompt.set(false);
+    }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped) {
+            console.log('Notification tapped:', tapped.type, tapped.id);
+        }
+    }
     /** Called by the error overlay retry button — clears error and re-navigates to home */
     handleRetry() {
         this.pageLoading.hasError.set(false);
@@ -33678,26 +35292,35 @@ class MobileTabsExampleComponent {
       </div>
     }
 
+    <!-- Notification permission prompt (session-only, reappears on next launch) -->
+    @if (showNotificationPrompt() && !pageLoading.isCoveringScreen()) {
+      <ds-mobile-notification-prompt
+        (allow)="handleNotificationAllow()"
+        (dismiss)="handleNotificationDismiss()" />
+    }
+
     <ion-tabs class="ds-tabs-wrapper">
       <!-- Tab bar is hidden during the loading state -->
       @if (!pageLoading.isCoveringScreen()) {
         <ds-mobile-tab-bar
           [tabs]="tabs"
           [moreMenuItems]="moreMenuItems"
+          [notificationCount]="notificationService.unreadCount()"
           [avatarInitials]="userService.avatarInitials()"
           [avatarType]="userService.avatarType()"
           [profileMenuItems]="profileMenuItems"
+          (notificationClick)="handleNotificationClick()"
           (profileActionSelected)="handleProfileAction($event)"
           (moreMenuItemSelected)="handleMoreMenuAction($event)"
         >
         </ds-mobile-tab-bar>
       }
     </ion-tabs>
-  `, isInline: true, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}.app-error{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 32px;background:var(--color-header-surface, #2D2356)}.app-error__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--color-header-content, #fff);text-align:center;margin:0}.app-error__description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#ffffffa6;text-align:center;margin:0 0 8px}.app-error ds-button::ng-deep .btn{border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems", "moreMenuItems", "moreMenuLabel", "moreMenuIcon", "moreMenuIconActive"], outputs: ["avatarClick", "profileActionSelected", "moreMenuItemSelected"] }, { kind: "component", type: DsMobileAppLoadingComponent, selector: "ds-mobile-app-loading", inputs: ["isExiting"], outputs: ["exitComplete"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}.app-error{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 32px;background:var(--color-header-surface, #2D2356)}.app-error__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--color-header-content, #fff);text-align:center;margin:0}.app-error__description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#ffffffa6;text-align:center;margin:0 0 8px}.app-error ds-button::ng-deep .btn{border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems", "notificationCount", "moreMenuItems", "moreMenuLabel", "moreMenuIcon", "moreMenuIconActive"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "moreMenuItemSelected"] }, { kind: "component", type: DsMobileAppLoadingComponent, selector: "ds-mobile-app-loading", inputs: ["isExiting"], outputs: ["exitComplete"] }, { kind: "component", type: DsMobileNotificationPromptComponent, selector: "ds-mobile-notification-prompt", inputs: ["heading", "subtitle", "allowLabel", "dismissLabel"], outputs: ["allow", "dismiss"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileTabsExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-mobile-tabs-example', standalone: true, imports: [CommonModule, IonTabs, DsMobileTabBarComponent, DsMobileAppLoadingComponent, DsButtonComponent], template: `
+            args: [{ selector: 'app-mobile-tabs-example', standalone: true, imports: [CommonModule, IonTabs, DsMobileTabBarComponent, DsMobileAppLoadingComponent, DsMobileNotificationPromptComponent, DsButtonComponent], template: `
     <!-- Full-screen loading screen rendered at layout level so it covers the tab bar.
          Kept in DOM during exiting so the exit animation can play. -->
     @if (pageLoading.isLoading() || pageLoading.isExiting()) {
@@ -33712,15 +35335,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </div>
     }
 
+    <!-- Notification permission prompt (session-only, reappears on next launch) -->
+    @if (showNotificationPrompt() && !pageLoading.isCoveringScreen()) {
+      <ds-mobile-notification-prompt
+        (allow)="handleNotificationAllow()"
+        (dismiss)="handleNotificationDismiss()" />
+    }
+
     <ion-tabs class="ds-tabs-wrapper">
       <!-- Tab bar is hidden during the loading state -->
       @if (!pageLoading.isCoveringScreen()) {
         <ds-mobile-tab-bar
           [tabs]="tabs"
           [moreMenuItems]="moreMenuItems"
+          [notificationCount]="notificationService.unreadCount()"
           [avatarInitials]="userService.avatarInitials()"
           [avatarType]="userService.avatarType()"
           [profileMenuItems]="profileMenuItems"
+          (notificationClick)="handleNotificationClick()"
           (profileActionSelected)="handleProfileAction($event)"
           (moreMenuItemSelected)="handleMoreMenuAction($event)"
         >
@@ -33730,393 +35362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}.app-error{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 32px;background:var(--color-header-surface, #2D2356)}.app-error__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--color-header-content, #fff);text-align:center;margin:0}.app-error__description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#ffffffa6;text-align:center;margin:0 0 8px}.app-error ds-button::ng-deep .btn{border-radius:9999px}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1$3.Router }, { type: i1.NavController }] });
 
-class DsMobileBookingDetailSheetComponent {
-    modalController;
-    /** `sheet` = bottom sheet. `modal` = `ds-modal-base` shell (active + history bookings). */
-    presentation = 'sheet';
-    data;
-    /** When true the modal sizes to its content instead of filling the screen. */
-    autoHeight = false;
-    get isModalPresentation() {
-        return this.presentation === 'modal';
-    }
-    constructor(modalController) {
-        this.modalController = modalController;
-    }
-    close() {
-        this.modalController.dismiss(null, 'backdrop');
-    }
-    cancelBooking() {
-        this.modalController.dismiss(null, 'cancel');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingDetailSheetComponent, isStandalone: true, selector: "ds-mobile-booking-detail-sheet", inputs: { presentation: "presentation", data: "data", autoHeight: "autoHeight" }, host: { properties: { "class.presentation-modal": "this.isModalPresentation" } }, ngImport: i0, template: `
-    @if (presentation === 'modal') {
-      <ds-mobile-modal-base
-        [headerTitle]="data.facilityTitle"
-        [closeButtonLabel]="'Luk'"
-        [isAutoHeight]="autoHeight"
-        [keyboardContentBehavior]="'follow'">
-
-        <ds-mobile-section
-          [showBorder]="false"
-          padding="20px 20px 0 20px">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-        </ds-mobile-section>
-
-        <ds-mobile-section padding="20px 20px 20px 20px">
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </ds-mobile-section>
-
-        @if (data.canCancel) {
-          <div class="booking-action">
-            <div class="booking-actions-row">
-              <ds-button
-                class="cancel-primary"
-                size="md"
-                variant="secondary"
-                (clicked)="cancelBooking()">
-                Annuller booking
-              </ds-button>
-            </div>
-          </div>
-        }
-      </ds-mobile-modal-base>
-    } @else {
-      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
-        <div class="detail-header">
-          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
-          <ds-icon-button
-            icon="remixCloseLine"
-            variant="ghost"
-            size="sm"
-            (clicked)="close()"
-            aria-label="Luk"
-          />
-        </div>
-
-        <div class="detail-content">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          @if (data.canCancel) {
-            <div class="footer-button-container">
-              <div class="booking-actions-column">
-                <ds-button
-                  size="md"
-                  variant="secondary"
-                  (clicked)="cancelBooking()">
-                  Annuller booking
-                </ds-button>
-              </div>
-            </div>
-          }
-        </div>
-      </ds-mobile-bottom-sheet-wrapper>
-    }
-  `, isInline: true, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper", inputs: ["showDragHandle"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-booking-detail-sheet', standalone: true, imports: [
-                        CommonModule,
-                        DsMobileBottomSheetWrapperComponent,
-                        DsMobileModalBaseComponent,
-                        DsMobileSectionComponent,
-                        DsButtonComponent,
-                        DsIconComponent,
-                        DsIconButtonComponent,
-                    ], template: `
-    @if (presentation === 'modal') {
-      <ds-mobile-modal-base
-        [headerTitle]="data.facilityTitle"
-        [closeButtonLabel]="'Luk'"
-        [isAutoHeight]="autoHeight"
-        [keyboardContentBehavior]="'follow'">
-
-        <ds-mobile-section
-          [showBorder]="false"
-          padding="20px 20px 0 20px">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-        </ds-mobile-section>
-
-        <ds-mobile-section padding="20px 20px 20px 20px">
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </ds-mobile-section>
-
-        @if (data.canCancel) {
-          <div class="booking-action">
-            <div class="booking-actions-row">
-              <ds-button
-                class="cancel-primary"
-                size="md"
-                variant="secondary"
-                (clicked)="cancelBooking()">
-                Annuller booking
-              </ds-button>
-            </div>
-          </div>
-        }
-      </ds-mobile-modal-base>
-    } @else {
-      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
-        <div class="detail-header">
-          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
-          <ds-icon-button
-            icon="remixCloseLine"
-            variant="ghost"
-            size="sm"
-            (clicked)="close()"
-            aria-label="Luk"
-          />
-        </div>
-
-        <div class="detail-content">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          @if (data.canCancel) {
-            <div class="footer-button-container">
-              <div class="booking-actions-column">
-                <ds-button
-                  size="md"
-                  variant="secondary"
-                  (clicked)="cancelBooking()">
-                  Annuller booking
-                </ds-button>
-              </div>
-            </div>
-          }
-        </div>
-      </ds-mobile-bottom-sheet-wrapper>
-    }
-  `, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { presentation: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], autoHeight: [{
-                type: Input
-            }], isModalPresentation: [{
-                type: HostBinding,
-                args: ['class.presentation-modal']
-            }] } });
-
-class DsMobileBookingDetailSheetService extends BaseModalService {
-    bottomSheet;
-    constructor(modalController, bottomSheet) {
-        super(modalController);
-        this.bottomSheet = bottomSheet;
-    }
-    /**
-     * Bottom-sheet presentation (draggable breakpoints). Prefer `openAsModal` for booking lists.
-     */
-    async open(data) {
-        const modal = await this.bottomSheet.create({
-            component: DsMobileBookingDetailSheetComponent,
-            componentProps: { data },
-            autoHeight: true,
-            backdropDismiss: true,
-            backdropBlur: true,
-        });
-        const result = await modal.onWillDismiss();
-        return { role: result.role, data: result.data ?? undefined };
-    }
-    /** `ds-modal-base` shell — used for active and past bookings. Auto-heights to content. */
-    async openAsModal(data) {
-        const modal = await this.createModal(DsMobileBookingDetailSheetComponent, { data, presentation: 'modal', autoHeight: true }, { keyboardClose: true, autoHeight: true });
-        await modal.present();
-        const result = await modal.onWillDismiss();
-        return { role: result.role, data: result.data ?? undefined };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, deps: [{ token: i1.ModalController }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileBottomSheetService }] });
-
 class DsMobileBookingCancelConfirmationComponent {
     facilityTitle;
     facilityThumbnail;
@@ -34217,6 +35462,8 @@ class MobileBookingPageComponent {
     userService;
     pageComponent;
     bookingsSwiper;
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     cancellingBookingId = signal(null, ...(ngDevMode ? [{ debugName: "cancellingBookingId" }] : []));
     lang = signal(resolveLanguage(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
     historyLinkText = computed(() => HISTORY_LINK[this.lang()] ?? HISTORY_LINK['da'], ...(ngDevMode ? [{ debugName: "historyLinkText" }] : []));
@@ -34422,6 +35669,11 @@ class MobileBookingPageComponent {
         }
     ], ...(ngDevMode ? [{ debugName: "availableFacilities" }] : []));
     visibleFacilities = computed(() => this.availableFacilities().filter((f) => !f.archived), ...(ngDevMode ? [{ debugName: "visibleFacilities" }] : []));
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         // Check if offline and complete immediately
@@ -34712,8 +35964,10 @@ class MobileBookingPageComponent {
     <ds-mobile-page-main
       #pageComponent
       [title]="'Bookinger'"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       @if (pageComponent.isOffline()) {
@@ -34818,7 +36072,7 @@ class MobileBookingPageComponent {
       ariaLabel="Opret facilitet"
       (clicked)="openFacilityCreationModal()">
     </ds-mobile-fab>
-  `, isInline: true, styles: [".bookings-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .bookings-swiper .swiper-slide{width:100%;max-width:600px;height:auto;pointer-events:auto}@media (min-width: 768px){::ng-deep .bookings-swiper .swiper-slide{max-width:100%}}::ng-deep .bookings-swiper .swiper-slide ds-mobile-interactive-list-item-booking{width:100%;pointer-events:auto}.booking-slide-content{position:relative;width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemBookingComponent, selector: "ds-mobile-interactive-list-item-booking", inputs: ["thumbnail", "facilityTitle", "description", "bookingDate", "bookingTime", "availabilityStatus", "statusLabel", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["bookingClick", "longPress"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }, { kind: "component", type: DsMobileLoaderOverlayComponent, selector: "ds-mobile-loader-overlay", inputs: ["spinnerSize", "borderRadius"] }] });
+  `, isInline: true, styles: [".bookings-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .bookings-swiper .swiper-slide{width:100%;max-width:600px;height:auto;pointer-events:auto}@media (min-width: 768px){::ng-deep .bookings-swiper .swiper-slide{max-width:100%}}::ng-deep .bookings-swiper .swiper-slide ds-mobile-interactive-list-item-booking{width:100%;pointer-events:auto}.booking-slide-content{position:relative;width:100%}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemBookingComponent, selector: "ds-mobile-interactive-list-item-booking", inputs: ["thumbnail", "facilityTitle", "description", "bookingDate", "bookingTime", "availabilityStatus", "statusLabel", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["bookingClick", "longPress"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }, { kind: "component", type: DsMobileLoaderOverlayComponent, selector: "ds-mobile-loader-overlay", inputs: ["spinnerSize", "borderRadius"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileBookingPageComponent, decorators: [{
             type: Component,
@@ -34835,8 +36089,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ds-mobile-page-main
       #pageComponent
       [title]="'Bookinger'"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
       
       @if (pageComponent.isOffline()) {
@@ -36726,9 +37982,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class TenantChatPageComponent {
     modalCtrl = inject(ModalController);
     userService = inject(UserService);
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     peerMessaging = inject(PeerMessagingService);
     peerChat = inject(PeerChatLauncherService);
     isPeerGroupConversation = isPeerGroupConversation;
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         setTimeout(() => event.target.complete(), 1000);
     }
@@ -36755,8 +38018,10 @@ class TenantChatPageComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TenantChatPageComponent, isStandalone: true, selector: "app-tenant-chat-page", host: { classAttribute: "ion-page" }, ngImport: i0, template: `
     <ds-mobile-page-main
       title="Beskeder"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
 
       <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
@@ -36815,7 +38080,7 @@ class TenantChatPageComponent {
       ariaLabel="Vælg beboer at skrive med"
       (clicked)="goToTenants()">
     </ds-mobile-fab>
-  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px;opacity:.4}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "unreadStyle", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px;opacity:.4}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "unreadStyle", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TenantChatPageComponent, decorators: [{
             type: Component,
@@ -36829,8 +38094,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     }, template: `
     <ds-mobile-page-main
       title="Beskeder"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)">
 
       <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
@@ -36972,6 +38239,8 @@ const MOCK_VENDORS = [
 class ServicesPageComponent {
     pageComponent;
     vendorModal = inject(DsMobileServiceVendorModalService);
+    notificationModal = inject(DsMobileNotificationModalService);
+    notificationService = inject(NotificationService);
     newInquiryModal = inject(DsMobileNewInquiryModalService);
     inquiriesService = inject(InquiriesService);
     navCtrl = inject(NavController);
@@ -37018,6 +38287,11 @@ class ServicesPageComponent {
             },
         });
     }
+    async handleNotificationClick() {
+        const tapped = await this.notificationModal.open();
+        if (tapped)
+            console.log('Notification tapped:', tapped.type, tapped.id);
+    }
     handleRefresh(event) {
         setTimeout(() => {
             event.target?.complete?.();
@@ -37028,8 +38302,10 @@ class ServicesPageComponent {
     <ds-mobile-page-main
       #pageComponent
       [title]="lbl.pageTitle"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)"
     >
       @if (pageComponent.isOffline()) {
@@ -37061,7 +38337,7 @@ class ServicesPageComponent {
         </ds-mobile-section>
       }
     </ds-mobile-page-main>
-  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ServicesPageComponent, decorators: [{
             type: Component,
@@ -37075,8 +38351,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ds-mobile-page-main
       #pageComponent
       [title]="lbl.pageTitle"
+      [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      (notificationClick)="handleNotificationClick()"
       (refresh)="handleRefresh($event)"
     >
       @if (pageComponent.isOffline()) {
@@ -37114,6 +38392,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['pageComponent']
             }] } });
 
+const PREFS = [
+    { key: 'messages', label: 'Beskeder', description: 'Nye beskeder fra beboere og administration' },
+    { key: 'bookings', label: 'Bookinger', description: 'Bekræftelser, aflysninger og påmindelser' },
+    { key: 'community', label: 'Fællesskab', description: 'Opslag, kommentarer og omtaler' },
+    { key: 'inquiries', label: 'Henvendelser', description: 'Opdateringer på dine henvendelser' },
+    { key: 'services', label: 'Service', description: 'Opdateringer fra serviceleverandører' },
+    { key: 'handbook', label: 'Håndbog', description: 'Ændringer i beboerhåndbogen' },
+    { key: 'system', label: 'System', description: 'Meddelelser, invitationer og familieadgang' },
+];
+class SettingsModalComponent {
+    notificationService = inject(NotificationService);
+    prefs = PREFS;
+    enabledSignals = new Map(PREFS.map(p => [p.key, computed(() => this.notificationService.isPushEnabled(p.key))]));
+    isEnabled(key) {
+        return this.enabledSignals.get(key);
+    }
+    toggle(key) {
+        const current = this.notificationService.isPushEnabled(key);
+        this.notificationService.setPushEnabled(key, !current);
+        Haptics.impact({ style: ImpactStyle.Light }).catch(() => {
+            if ('vibrate' in navigator)
+                navigator.vibrate(10);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SettingsModalComponent, isStandalone: true, selector: "app-settings-modal", ngImport: i0, template: `
+    <ds-mobile-modal-base headerTitle="Notifikationer" [showHeader]="true">
+
+      <div class="settings-content">
+        @for (pref of prefs; track pref.key; let isFirst = $first; let isLast = $last) {
+          <ds-mobile-list-item
+            [showDivider]="!isLast"
+            [flushTop]="isFirst"
+            [interactive]="true"
+            [enableLongPress]="false"
+            [moreActions]="false"
+            [title]="pref.label"
+            [subtitle]="pref.description"
+            (itemClick)="toggle(pref.key)"
+          >
+            <ds-mobile-toggle
+              content-trailing
+              [checked]="isEnabled(pref.key)()"
+              (changed)="toggle(pref.key)"
+            />
+          </ds-mobile-list-item>
+        }
+      </div>
+
+    </ds-mobile-modal-base>
+  `, isInline: true, styles: [".settings-content{padding:20px}\n"], dependencies: [{ kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsMobileToggleComponent, selector: "ds-mobile-toggle", inputs: ["checked", "disabled"], outputs: ["checkedChange", "changed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-settings-modal', standalone: true, imports: [
+                        DsMobileModalBaseComponent,
+                        DsMobileListItemComponent,
+                        DsMobileToggleComponent,
+                    ], template: `
+    <ds-mobile-modal-base headerTitle="Notifikationer" [showHeader]="true">
+
+      <div class="settings-content">
+        @for (pref of prefs; track pref.key; let isFirst = $first; let isLast = $last) {
+          <ds-mobile-list-item
+            [showDivider]="!isLast"
+            [flushTop]="isFirst"
+            [interactive]="true"
+            [enableLongPress]="false"
+            [moreActions]="false"
+            [title]="pref.label"
+            [subtitle]="pref.description"
+            (itemClick)="toggle(pref.key)"
+          >
+            <ds-mobile-toggle
+              content-trailing
+              [checked]="isEnabled(pref.key)()"
+              (changed)="toggle(pref.key)"
+            />
+          </ds-mobile-list-item>
+        }
+      </div>
+
+    </ds-mobile-modal-base>
+  `, styles: [".settings-content{padding:20px}\n"] }]
+        }] });
+
+class SettingsModalService {
+    modalController;
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    async open() {
+        const modal = await this.modalController.create({
+            component: SettingsModalComponent,
+            cssClass: 'ds-modal-base',
+            mode: 'ios',
+            presentingElement: document.querySelector('ion-router-outlet') || undefined,
+            backdropDismiss: true,
+            showBackdrop: true,
+            animated: true,
+        });
+        await modal.present();
+    }
+    async close(data) {
+        return this.modalController.dismiss(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
 /**
  * Services Barrel File
  *
@@ -37137,5 +38531,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCountBadgeComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileNotificationButtonComponent, DsMobileNotificationModalComponent, DsMobileNotificationModalService, DsMobileNotificationPromptComponent, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileToggleComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, NOTIFICATION_ICON_MAP, NotificationPromptService, NotificationService, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, RelativeTimePipe, SAMPLE_NOTIFICATIONS, SectionHeaderComponent, ServicesPageComponent, SettingsModalService, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, VENDOR_MODAL_SERVICE, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition, dateBucket };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map