@memberjunction/ng-explorer-core 6.2.0-edge.0 → 6.2.0-edge.2

package/dist/lib/shell/shell.component.js

@@ -1,4 +1,5 @@
-import { Component, ViewChild, HostListener } from '@angular/core';
+import { Component, ViewChild, HostListener, inject } from '@angular/core';
+import { AngularAdapterService } from '@memberjunction/ng-react';
 import { NavigationEnd } from '@angular/router';
 import { combineLatest, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -15,7 +16,7 @@ import { InstanceConfigEngine, UserInfoEngine } from '@memberjunction/core-entit
 import { PACKAGE_VERSION } from '@memberjunction/graphql-dataprovider';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { ApplyShellChromePolicy, BaseShellChromePolicy } from './shell-chrome-policy';
-import { setReadinessBeacon } from './readiness-beacon';
+import { SetReadinessBeacon } from './readiness-beacon';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@memberjunction/ng-shared";
@@ -568,7 +569,7 @@ export class ShellComponent extends BaseAngularComponent {
     profileDialogService;
     viewContainerRef;
     titleService;
-    developerModeService;
+    DeveloperModeService;
     startupValidationService;
     commandPaletteService;
     themeService;
@@ -582,7 +583,15 @@ export class ShellComponent extends BaseAngularComponent {
     /** Newest workspace configuration emission — see the staleness guard in the Configuration subscription */
     latestSyncedConfig = null;
     initialNavigationComplete = false; // Track if initial navigation has completed
-    activeApp = null;
+    ActiveApp = null;
+    /** @deprecated Use {@link ActiveApp}. */
+    get activeApp() {
+        return this.ActiveApp;
+    }
+    /** @deprecated Use {@link ActiveApp}. */
+    set activeApp(value) {
+        this.ActiveApp = value;
+    }
     _loading = true;
     /**
      * Shell loading-screen flag, and the source of the Computer Use readiness
@@ -594,16 +603,40 @@ export class ShellComponent extends BaseAngularComponent {
      * places assign `loading` — routing, resource load, app switch, error paths.
      * Publishing here means every one of them stays correct for free.
      */
-    get loading() {
+    get Loading() {
         return this._loading;
     }
-    set loading(value) {
+    set Loading(value) {
         this._loading = value;
-        setReadinessBeacon(!value);
+        SetReadinessBeacon(!value);
+    }
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
+    Initialized = false;
+    /** @deprecated Use {@link Initialized}. */
+    get initialized() {
+        return this.Initialized;
+    }
+    /** @deprecated Use {@link Initialized}. */
+    set initialized(value) {
+        this.Initialized = value;
     }
-    initialized = false;
     waitingForFirstResource = false;
-    tabBarVisible = true; // Controlled by workspace manager
+    TabBarVisible = true;
+    /** @deprecated Use {@link TabBarVisible}. */
+    get tabBarVisible() {
+        return this.TabBarVisible;
+    }
+    /** @deprecated Use {@link TabBarVisible}. */
+    set tabBarVisible(value) {
+        this.TabBarVisible = value;
+    } // Controlled by workspace manager
     /**
      * True when the deployment uses the records-as-tabs record-open style
      * (`Shell.RecordOpen.Style` != 'classic'): records open as native Golden
@@ -614,15 +647,79 @@ export class ShellComponent extends BaseAngularComponent {
     get RecordTabsStyle() {
         return this.chromeFlags.recordOpenStyle === 'records';
     }
-    userMenuVisible = false; // User avatar context menu
-    mobileNavOpen = false; // Mobile navigation drawer
-    unreadNotificationCount = 0; // Notification badge count
+    UserMenuVisible = false;
+    /** @deprecated Use {@link UserMenuVisible}. */
+    get userMenuVisible() {
+        return this.UserMenuVisible;
+    }
+    /** @deprecated Use {@link UserMenuVisible}. */
+    set userMenuVisible(value) {
+        this.UserMenuVisible = value;
+    } // User avatar context menu
+    MobileNavOpen = false;
+    /** @deprecated Use {@link MobileNavOpen}. */
+    get mobileNavOpen() {
+        return this.MobileNavOpen;
+    }
+    /** @deprecated Use {@link MobileNavOpen}. */
+    set mobileNavOpen(value) {
+        this.MobileNavOpen = value;
+    } // Mobile navigation drawer
+    UnreadNotificationCount = 0;
+    /** @deprecated Use {@link UnreadNotificationCount}. */
+    get unreadNotificationCount() {
+        return this.UnreadNotificationCount;
+    }
+    /** @deprecated Use {@link UnreadNotificationCount}. */
+    set unreadNotificationCount(value) {
+        this.UnreadNotificationCount = value;
+    } // Notification badge count
     // Global Activity indicator (P3)
-    activityItems = [];
-    activityRunningCount = 0;
-    activityOpen = false;
-    isViewingSystemTab = false; // True when viewing a resource tab (not associated with a registered app)
-    loadingAppId = null; // ID of app currently being loaded (for app switcher loading indicator)
+    ActivityItems = [];
+    /** @deprecated Use {@link ActivityItems}. */
+    get activityItems() {
+        return this.ActivityItems;
+    }
+    /** @deprecated Use {@link ActivityItems}. */
+    set activityItems(value) {
+        this.ActivityItems = value;
+    }
+    ActivityRunningCount = 0;
+    /** @deprecated Use {@link ActivityRunningCount}. */
+    get activityRunningCount() {
+        return this.ActivityRunningCount;
+    }
+    /** @deprecated Use {@link ActivityRunningCount}. */
+    set activityRunningCount(value) {
+        this.ActivityRunningCount = value;
+    }
+    ActivityOpen = false;
+    /** @deprecated Use {@link ActivityOpen}. */
+    get activityOpen() {
+        return this.ActivityOpen;
+    }
+    /** @deprecated Use {@link ActivityOpen}. */
+    set activityOpen(value) {
+        this.ActivityOpen = value;
+    }
+    IsViewingSystemTab = false;
+    /** @deprecated Use {@link IsViewingSystemTab}. */
+    get isViewingSystemTab() {
+        return this.IsViewingSystemTab;
+    }
+    /** @deprecated Use {@link IsViewingSystemTab}. */
+    set isViewingSystemTab(value) {
+        this.IsViewingSystemTab = value;
+    } // True when viewing a resource tab (not associated with a registered app)
+    LoadingAppId = null;
+    /** @deprecated Use {@link LoadingAppId}. */
+    get loadingAppId() {
+        return this.LoadingAppId;
+    }
+    /** @deprecated Use {@link LoadingAppId}. */
+    set loadingAppId(value) {
+        this.LoadingAppId = value;
+    } // ID of app currently being loaded (for app switcher loading indicator)
     // Loading animation state
     loadingMessageInterval = null;
     loadingMessageIndex = 0;
@@ -644,32 +741,152 @@ export class ShellComponent extends BaseAngularComponent {
     MJVersion = PACKAGE_VERSION;
     loadingResetTimeout = null;
     loadingResetDelayMs = 20_000; // 20 seconds before showing reset option
-    currentLoadingText;
-    currentLoadingColor;
-    currentLoadingTextColor;
-    currentLoadingGradient;
-    currentLoadingAnimation = 'pulse';
+    CurrentLoadingText;
+    /** @deprecated Use {@link CurrentLoadingText}. */
+    get currentLoadingText() {
+        return this.CurrentLoadingText;
+    }
+    /** @deprecated Use {@link CurrentLoadingText}. */
+    set currentLoadingText(value) {
+        this.CurrentLoadingText = value;
+    }
+    CurrentLoadingColor;
+    /** @deprecated Use {@link CurrentLoadingColor}. */
+    get currentLoadingColor() {
+        return this.CurrentLoadingColor;
+    }
+    /** @deprecated Use {@link CurrentLoadingColor}. */
+    set currentLoadingColor(value) {
+        this.CurrentLoadingColor = value;
+    }
+    CurrentLoadingTextColor;
+    /** @deprecated Use {@link CurrentLoadingTextColor}. */
+    get currentLoadingTextColor() {
+        return this.CurrentLoadingTextColor;
+    }
+    /** @deprecated Use {@link CurrentLoadingTextColor}. */
+    set currentLoadingTextColor(value) {
+        this.CurrentLoadingTextColor = value;
+    }
+    CurrentLoadingGradient;
+    /** @deprecated Use {@link CurrentLoadingGradient}. */
+    get currentLoadingGradient() {
+        return this.CurrentLoadingGradient;
+    }
+    /** @deprecated Use {@link CurrentLoadingGradient}. */
+    set currentLoadingGradient(value) {
+        this.CurrentLoadingGradient = value;
+    }
+    CurrentLoadingAnimation = 'pulse';
+    /** @deprecated Use {@link CurrentLoadingAnimation}. */
+    get currentLoadingAnimation() {
+        return this.CurrentLoadingAnimation;
+    }
+    /** @deprecated Use {@link CurrentLoadingAnimation}. */
+    set currentLoadingAnimation(value) {
+        this.CurrentLoadingAnimation = value;
+    }
     // User avatar state
-    userImageURL = '';
-    userIconClass = null;
+    UserImageURL = '';
+    /** @deprecated Use {@link UserImageURL}. */
+    get userImageURL() {
+        return this.UserImageURL;
+    }
+    /** @deprecated Use {@link UserImageURL}. */
+    set userImageURL(value) {
+        this.UserImageURL = value;
+    }
+    UserIconClass = null;
+    /** @deprecated Use {@link UserIconClass}. */
+    get userIconClass() {
+        return this.UserIconClass;
+    }
+    /** @deprecated Use {@link UserIconClass}. */
+    set userIconClass(value) {
+        this.UserIconClass = value;
+    }
     userName = '';
-    userEmail = '';
+    UserEmail = '';
+    /** @deprecated Use {@link UserEmail}. */
+    get userEmail() {
+        return this.UserEmail;
+    }
+    /** @deprecated Use {@link UserEmail}. */
+    set userEmail(value) {
+        this.UserEmail = value;
+    }
     userEntity = null;
     // User menu plugin system
     userMenu = null;
-    userMenuElements = [];
+    UserMenuElements = [];
+    /** @deprecated Use {@link UserMenuElements}. */
+    get userMenuElements() {
+        return this.UserMenuElements;
+    }
+    /** @deprecated Use {@link UserMenuElements}. */
+    set userMenuElements(value) {
+        this.UserMenuElements = value;
+    }
     destroy$ = new Subject();
     // Pin progress overlay
     PinProgressVisible = false;
     PinProgressText = '';
     // Search state
-    isSearchOpen = false;
-    searchableEntities = [];
-    selectedEntity = null;
-    searchInput;
+    IsSearchOpen = false;
+    /** @deprecated Use {@link IsSearchOpen}. */
+    get isSearchOpen() {
+        return this.IsSearchOpen;
+    }
+    /** @deprecated Use {@link IsSearchOpen}. */
+    set isSearchOpen(value) {
+        this.IsSearchOpen = value;
+    }
+    SearchableEntities = [];
+    /** @deprecated Use {@link SearchableEntities}. */
+    get searchableEntities() {
+        return this.SearchableEntities;
+    }
+    /** @deprecated Use {@link SearchableEntities}. */
+    set searchableEntities(value) {
+        this.SearchableEntities = value;
+    }
+    SelectedEntity = null;
+    /** @deprecated Use {@link SelectedEntity}. */
+    get selectedEntity() {
+        return this.SelectedEntity;
+    }
+    /** @deprecated Use {@link SelectedEntity}. */
+    set selectedEntity(value) {
+        this.SelectedEntity = value;
+    }
+    SearchInput;
+    /** @deprecated Use {@link SearchInput}. */
+    get searchInput() {
+        return this.SearchInput;
+    }
+    /** @deprecated Use {@link SearchInput}. */
+    set searchInput(value) {
+        this.SearchInput = value;
+    }
     /** Mobile drawer + its toggle — used to return focus to the toggle when the drawer closes. */
-    mobileNavDrawer;
-    mobileNavToggle;
+    MobileNavDrawer;
+    /** @deprecated Use {@link MobileNavDrawer}. */
+    get mobileNavDrawer() {
+        return this.MobileNavDrawer;
+    }
+    /** @deprecated Use {@link MobileNavDrawer}. */
+    set mobileNavDrawer(value) {
+        this.MobileNavDrawer = value;
+    }
+    MobileNavToggle;
+    /** @deprecated Use {@link MobileNavToggle}. */
+    get mobileNavToggle() {
+        return this.MobileNavToggle;
+    }
+    /** @deprecated Use {@link MobileNavToggle}. */
+    set mobileNavToggle(value) {
+        this.MobileNavToggle = value;
+    }
     // Legacy universal search overlay (omnibar-off MOBILE path) — opened by the
     // mobile search icon or Ctrl/Cmd+K when the inline composite isn't visible.
     // Desktop omnibar-off uses the inline header composite instead.
@@ -765,7 +982,7 @@ export class ShellComponent extends BaseAngularComponent {
         // is the same guarantee read off state we already have, instead of a new
         // dirty-tracking pipeline.)
         this.workspaceManager.RecordsRegionTabFilter = this.resolvedRecordOpenStyle === 'records'
-            ? (tab) => IsRecordsRegionTab(tab.configuration) && !this.tabContainerRef?.IsRecordTabEditing(tab.id)
+            ? (tab) => IsRecordsRegionTab(tab.configuration) && !this.TabContainerRef?.IsRecordTabEditing(tab.id)
             : null;
     }
     get ShowSearchBar() {
@@ -851,25 +1068,57 @@ export class ShellComponent extends BaseAngularComponent {
     /** Palette footer gear → My Profile (where the Command Palette section lives). */
     OnPaletteSettingsRequested() {
         this.profileDialogService.open(this.viewContainerRef, {
-            avatarUrl: this.userImageURL || null,
-            avatarIconClass: this.userIconClass || null
+            avatarUrl: this.UserImageURL || null,
+            avatarIconClass: this.UserIconClass || null
         });
     }
-    omnibarPalette;
+    OmnibarPalette;
+    /** @deprecated Use {@link OmnibarPalette}. */
+    get omnibarPalette() {
+        return this.OmnibarPalette;
+    }
+    /** @deprecated Use {@link OmnibarPalette}. */
+    set omnibarPalette(value) {
+        this.OmnibarPalette = value;
+    }
     /** Legacy inline search composite (omnibar-off desktop). Structural typing keeps
         the shell decoupled from the ng-search component class. */
-    shellSearchComposite;
+    ShellSearchComposite;
+    /** @deprecated Use {@link ShellSearchComposite}. */
+    get shellSearchComposite() {
+        return this.ShellSearchComposite;
+    }
+    /** @deprecated Use {@link ShellSearchComposite}. */
+    set shellSearchComposite(value) {
+        this.ShellSearchComposite = value;
+    }
     /** Header affordance click → open the palette. */
     OpenOmnibar(initialQuery = '') {
         if (!this.ShowSearchBar) {
             return;
         }
-        this.omnibarPalette?.Open(initialQuery);
+        this.OmnibarPalette?.Open(initialQuery);
     }
     // Tab container reference for thumbnail capture
-    tabContainerRef;
+    TabContainerRef;
+    /** @deprecated Use {@link TabContainerRef}. */
+    get tabContainerRef() {
+        return this.TabContainerRef;
+    }
+    /** @deprecated Use {@link TabContainerRef}. */
+    set tabContainerRef(value) {
+        this.TabContainerRef = value;
+    }
     // App access dialog
-    appAccessDialog;
+    AppAccessDialog;
+    /** @deprecated Use {@link AppAccessDialog}. */
+    get appAccessDialog() {
+        return this.AppAccessDialog;
+    }
+    /** @deprecated Use {@link AppAccessDialog}. */
+    set appAccessDialog(value) {
+        this.AppAccessDialog = value;
+    }
     pendingAppPath = null; // Store the app path we tried to access
     /**
      * Nav Bar apps positioned to the left of the app switcher.
@@ -878,26 +1127,44 @@ export class ShellComponent extends BaseAngularComponent {
      * this is bound directly in the shell nav template's @for/@if. Filters out apps
      * that have HideNavBarIconWhenActive=true and are currently active.
      */
-    leftOfSwitcherApps = [];
+    LeftOfSwitcherApps = [];
+    /** @deprecated Use {@link LeftOfSwitcherApps}. */
+    get leftOfSwitcherApps() {
+        return this.LeftOfSwitcherApps;
+    }
+    /** @deprecated Use {@link LeftOfSwitcherApps}. */
+    set leftOfSwitcherApps(value) {
+        this.LeftOfSwitcherApps = value;
+    }
     /**
      * Nav Bar apps positioned to the left of the user menu.
      * Backing field recomputed only when the active app or nav-app list changes
      * (see {@link recomputeNavBarApps}). Filters out apps that have
      * HideNavBarIconWhenActive=true and are currently active.
      */
-    leftOfUserMenuApps = [];
+    LeftOfUserMenuApps = [];
+    /** @deprecated Use {@link LeftOfUserMenuApps}. */
+    get leftOfUserMenuApps() {
+        return this.LeftOfUserMenuApps;
+    }
+    /** @deprecated Use {@link LeftOfUserMenuApps}. */
+    set leftOfUserMenuApps(value) {
+        this.LeftOfUserMenuApps = value;
+    }
     /**
      * Recompute the precomputed nav-bar app arrays. Called only when the active app
      * changes or the underlying nav-app list (re)loads — keeping the filtered arrays
      * (and their per-app UUIDsEqual checks) out of the per-CD-cycle hot path.
      */
     recomputeNavBarApps() {
-        this.leftOfSwitcherApps = this.appManager.GetNavBarApps('Left of App Switcher')
-            .filter(app => !(app.HideNavBarIconWhenActive && UUIDsEqual(app.ID, this.activeApp?.ID)));
-        this.leftOfUserMenuApps = this.appManager.GetNavBarApps('Left of User Menu')
-            .filter(app => !(app.HideNavBarIconWhenActive && UUIDsEqual(app.ID, this.activeApp?.ID)));
+        this.LeftOfSwitcherApps = this.appManager.GetNavBarApps('Left of App Switcher')
+            .filter(app => !(app.HideNavBarIconWhenActive && UUIDsEqual(app.ID, this.ActiveApp?.ID)));
+        this.LeftOfUserMenuApps = this.appManager.GetNavBarApps('Left of User Menu')
+            .filter(app => !(app.HideNavBarIconWhenActive && UUIDsEqual(app.ID, this.ActiveApp?.ID)));
     }
-    constructor(appManager, workspaceManager, layoutManager, tabService, navigationService, route, router, authBase, cdr, userAvatarService, userSharingCenterDialogService, aboutDialogService, profileDialogService, viewContainerRef, titleService, developerModeService, startupValidationService, commandPaletteService, themeService, homePinService, fileOpenService, feedbackDialogService, feedbackService, activityService) {
+    /** Warms the React runtime (CDN scripts) after login; see InitializeShell(). Field-injected so the constructor signature is unchanged. */
+    reactAdapter = inject(AngularAdapterService);
+    constructor(appManager, workspaceManager, layoutManager, tabService, navigationService, route, router, authBase, cdr, userAvatarService, userSharingCenterDialogService, aboutDialogService, profileDialogService, viewContainerRef, titleService, DeveloperModeService, startupValidationService, commandPaletteService, themeService, homePinService, fileOpenService, feedbackDialogService, feedbackService, activityService) {
         super();
         this.appManager = appManager;
         this.workspaceManager = workspaceManager;
@@ -914,7 +1181,7 @@ export class ShellComponent extends BaseAngularComponent {
         this.profileDialogService = profileDialogService;
         this.viewContainerRef = viewContainerRef;
         this.titleService = titleService;
-        this.developerModeService = developerModeService;
+        this.DeveloperModeService = DeveloperModeService;
         this.startupValidationService = startupValidationService;
         this.commandPaletteService = commandPaletteService;
         this.themeService = themeService;
@@ -930,7 +1197,7 @@ export class ShellComponent extends BaseAngularComponent {
         const providerForServices = this.ProviderToUse;
         this.appManager.Provider = providerForServices;
         this.workspaceManager.Provider = providerForServices;
-        this.developerModeService.Provider = providerForServices;
+        this.DeveloperModeService.Provider = providerForServices;
         this.startupValidationService.Provider = providerForServices;
         if (SharedService.Instance)
             SharedService.Instance.Provider = providerForServices;
@@ -939,49 +1206,57 @@ export class ShellComponent extends BaseAngularComponent {
         // Initialize animation based on theme configuration
         this.initializeAnimationFromTheme();
         // Set first message
-        this.currentLoadingText = this.activeTheme.messages[0];
-        if (this.activeTheme.staticColors) {
+        this.CurrentLoadingText = this.activeTheme.Messages[0];
+        if (this.activeTheme.StaticColors) {
             // Standard theme: keep MJ blue, no gradient
-            this.currentLoadingColor = this.activeTheme.colors[0];
-            this.currentLoadingTextColor = '#757575'; // Default gray text
-            this.currentLoadingGradient = null;
+            this.CurrentLoadingColor = this.activeTheme.Colors[0];
+            this.CurrentLoadingTextColor = '#757575'; // Default gray text
+            this.CurrentLoadingGradient = null;
         }
         else {
             // Themed period: use theme colors and first gradient from the start
-            this.currentLoadingColor = this.activeTheme.colors[0];
-            this.currentLoadingTextColor = this.activeTheme.colors[0];
+            this.CurrentLoadingColor = this.activeTheme.Colors[0];
+            this.CurrentLoadingTextColor = this.activeTheme.Colors[0];
             // Set initial gradient if theme has gradients
-            if (this.activeTheme.gradients && this.activeTheme.gradients.length > 0) {
-                this.currentLoadingGradient = this.activeTheme.gradients[0];
+            if (this.activeTheme.Gradients && this.activeTheme.Gradients.length > 0) {
+                this.CurrentLoadingGradient = this.activeTheme.Gradients[0];
             }
             else {
-                this.currentLoadingGradient = null;
+                this.CurrentLoadingGradient = null;
             }
         }
     }
+    /** @deprecated Use {@link DeveloperModeService}. */
+    get developerModeService() {
+        return this.DeveloperModeService;
+    }
+    /** @deprecated Use {@link DeveloperModeService}. */
+    set developerModeService(value) {
+        this.DeveloperModeService = value;
+    }
     async ngOnInit() {
         try {
             MJGlobal.Instance.GetEventListener(true).subscribe(async (loginEvent) => {
                 if (loginEvent.event === MJEventType.LoggedIn) {
                     if (this.authBase.initialPath === "/") {
                         // Base route - no need to wait for NavigationEnd
-                        await this.initializeShell();
+                        await this.InitializeShell();
                     }
                     else {
                         // Deep link route - wait for NavigationEnd to ensure router URL is correct
                         this.router.events.pipe(filter((event) => event instanceof NavigationEnd), filter(() => !this.initialNavigationComplete)).subscribe(async () => {
                             this.initialNavigationComplete = true;
-                            await this.initializeShell();
+                            await this.InitializeShell();
                         });
                     }
                 }
             });
         }
         catch (error) {
-            this.loading = false;
+            this.Loading = false;
         }
     }
-    async initializeShell() {
+    async InitializeShell() {
         // Start the loading animation with cycling messages
         this.startLoadingAnimation();
         // Initialize application manager (subscribes to LoggedIn event)
@@ -1013,26 +1288,26 @@ export class ShellComponent extends BaseAngularComponent {
         await this.workspaceManager.Initialize(user.ID);
         // Subscribe to tab bar visibility changes
         this.subscriptions.push(this.workspaceManager.TabBarVisible.subscribe(visible => {
-            this.tabBarVisible = visible;
+            this.TabBarVisible = visible;
         }));
         // The host's chrome policy says its answer may have changed (org or plan switch)
         this.subscriptions.push(this.chromePolicy.Changed.subscribe(() => this.onChromePolicyChanged()));
         // Subscribe to the global Activity tracker (Run Pipeline, Sync, Cluster, …)
         this.subscriptions.push(this.activityService.Activities$.subscribe(items => {
-            this.activityItems = items;
-            this.activityRunningCount = items.filter(i => i.Status === 'running').length;
+            this.ActivityItems = items;
+            this.ActivityRunningCount = items.filter(i => i.Status === 'running').length;
             if (items.length === 0)
-                this.activityOpen = false;
+                this.ActivityOpen = false;
             this.cdr.detectChanges();
         }));
         // Subscribe to unread notification count changes
         this.subscriptions.push(MJNotificationService.UnreadCount$.subscribe(count => {
-            this.unreadNotificationCount = count;
+            this.UnreadNotificationCount = count;
             this.cdr.detectChanges();
         }));
         // Subscribe to active app changes
         this.subscriptions.push(this.appManager.ActiveApp.subscribe(async (app) => {
-            this.activeApp = app;
+            this.ActiveApp = app;
             this.recomputeNavBarApps();
             this.cdr.detectChanges();
             // Create default tab when app is activated ONLY if:
@@ -1149,7 +1424,7 @@ export class ShellComponent extends BaseAngularComponent {
         }
         // Subscribe to workspace configuration changes to sync URL and active app
         this.subscriptions.push(this.workspaceManager.Configuration.subscribe(async (config) => {
-            if (config && this.initialized) {
+            if (config && this.Initialized) {
                 this.latestSyncedConfig = config;
                 // Sync active app with active tab's application
                 await this.syncActiveAppWithTab(config);
@@ -1171,7 +1446,7 @@ export class ShellComponent extends BaseAngularComponent {
         }));
         // Subscribe to router navigation events (for browser back/forward)
         this.subscriptions.push(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(event => {
-            if (this.initialized) {
+            if (this.Initialized) {
                 this.syncWorkspaceWithUrl(event.urlAfterRedirects || event.url);
             }
         }));
@@ -1197,16 +1472,16 @@ export class ShellComponent extends BaseAngularComponent {
         this.subscriptions.push(MJGlobal.Instance.GetEventListener(false).subscribe(async (event) => {
             if (event.event === MJEventType.TenantChanged) {
                 if (event.eventCode === 'TenantChanging') {
-                    this.currentLoadingText = 'Switching organization...';
-                    this.loading = true;
+                    this.CurrentLoadingText = 'Switching organization...';
+                    this.Loading = true;
                     this.cdr.detectChanges();
                 }
-                else if (event.eventCode === 'TenantChanged' && this.tabContainerRef) {
+                else if (event.eventCode === 'TenantChanged' && this.TabContainerRef) {
                     try {
-                        await this.tabContainerRef.ReloadAllTabs();
+                        await this.TabContainerRef.ReloadAllTabs();
                     }
                     finally {
-                        this.loading = false;
+                        this.Loading = false;
                         this.cdr.detectChanges();
                     }
                 }
@@ -1214,7 +1489,7 @@ export class ShellComponent extends BaseAngularComponent {
         }));
         // Load searchable entities for search functionality
         await this.loadSearchableEntities();
-        this.initialized = true;
+        this.Initialized = true;
         this.waitingForFirstResource = true;
         // Decide whether to restore workspace state or honor the current URL.
         // If the user navigated to a specific path (deep link, bookmark, typed URL),
@@ -1238,6 +1513,14 @@ export class ShellComponent extends BaseAngularComponent {
         // state changes (apps loaded, searchableEntities populated, etc.) to prevent
         // NG0100 ExpressionChangedAfterItHasBeenCheckedError in dev mode
         this.cdr.detectChanges();
+        // Explorer is a host where users routinely open interactive component artifacts, so warm the
+        // React runtime in the background now that the user is signed in. ArtifactsModule no longer
+        // does this on construction (#4802). Non-blocking; Preload() logs and retries on demand.
+        this.reactAdapter.Preload();
+    }
+    /** @deprecated Use {@link InitializeShell}. */
+    async initializeShell() {
+        return this.InitializeShell();
     }
     /**
      * Handle deep links from URL
@@ -1274,7 +1557,7 @@ export class ShellComponent extends BaseAngularComponent {
         // 1. We're initialized (past the startup phase)
         // 2. App is different from current
         // 3. Either NOT in URL-based navigation mode, OR this IS a URL-based tab
-        const shouldSetActiveApp = this.initialized &&
+        const shouldSetActiveApp = this.Initialized &&
             app &&
             !UUIDsEqual(currentActiveApp?.ID, request.ApplicationId) &&
             (!this.urlBasedNavigation || isUrlBasedTab);
@@ -1315,7 +1598,7 @@ export class ShellComponent extends BaseAngularComponent {
         }
         // Check if this is a system tab (not associated with a registered app)
         if (tabAppId === SYSTEM_APP_ID) {
-            this.isViewingSystemTab = true;
+            this.IsViewingSystemTab = true;
             this.cdr.detectChanges();
             // Don't try to set active app - SYSTEM_APP_ID has no registered app
             // Update browser title with just the tab title (no app context)
@@ -1323,7 +1606,7 @@ export class ShellComponent extends BaseAngularComponent {
             return;
         }
         // Not a system tab - clear the flag
-        this.isViewingSystemTab = false;
+        this.IsViewingSystemTab = false;
         this.cdr.detectChanges();
         // Records style: records-REGION tabs are a GLOBAL
         // surface — viewing one must never flip the user's app context. Without
@@ -1333,7 +1616,7 @@ export class ShellComponent extends BaseAngularComponent {
         // stays wherever the user is. Records DOCKED to the workspace fall
         // through: they are ordinary main-layout tabs and DO flip app context.
         if (this.RecordTabsStyle && IsRecordsRegionTab(activeTab.configuration)) {
-            this.titleService.setContext(this.activeApp?.Name || null, activeTab.title || null);
+            this.titleService.setContext(this.ActiveApp?.Name || null, activeTab.title || null);
             return;
         }
         // Check if active app needs to be updated
@@ -2055,15 +2338,23 @@ export class ShellComponent extends BaseAngularComponent {
      * user stays within their scoped app. Data access is still enforced
      * server-side by the user's role; this is the UI-confinement layer.
      */
-    get appSwitchingLocked() {
+    get AppSwitchingLocked() {
         return !!this.authBase.GetSessionScope()?.restrictedToApplicationId;
     }
-    onFirstResourceLoadComplete() {
+    /** @deprecated Use {@link AppSwitchingLocked}. */
+    get appSwitchingLocked() {
+        return this.AppSwitchingLocked;
+    }
+    OnFirstResourceLoadComplete() {
         this.waitingForFirstResource = false;
-        this.loading = false;
+        this.Loading = false;
         this.stopLoadingAnimation();
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnFirstResourceLoadComplete}. */
+    onFirstResourceLoadComplete() {
+        return this.OnFirstResourceLoadComplete();
+    }
     /**
      * Start the loading message cycling animation.
      * Messages cycle every 2.5 seconds without repeating until all are used.
@@ -2120,7 +2411,7 @@ export class ShellComponent extends BaseAngularComponent {
     startLoadingResetTimer() {
         this.cancelLoadingResetTimer();
         this.loadingResetTimeout = setTimeout(() => {
-            if (this.loading) {
+            if (this.Loading) {
                 this.ShowResetOption = true;
                 this.cdr.detectChanges();
             }
@@ -2186,24 +2477,24 @@ export class ShellComponent extends BaseAngularComponent {
      */
     initializeLoadingDisplay() {
         // Set first message
-        this.currentLoadingText = this.activeTheme.messages[0];
-        if (this.activeTheme.staticColors) {
+        this.CurrentLoadingText = this.activeTheme.Messages[0];
+        if (this.activeTheme.StaticColors) {
             // Standard theme: keep MJ blue, no gradient
-            this.currentLoadingColor = this.activeTheme.colors[0];
-            this.currentLoadingTextColor = '#757575'; // Default gray text
-            this.currentLoadingGradient = null;
+            this.CurrentLoadingColor = this.activeTheme.Colors[0];
+            this.CurrentLoadingTextColor = '#757575'; // Default gray text
+            this.CurrentLoadingGradient = null;
         }
         else {
             // Themed period: use theme colors and first gradient from the start
-            this.currentLoadingColor = this.activeTheme.colors[0];
-            this.currentLoadingTextColor = this.activeTheme.colors[0];
+            this.CurrentLoadingColor = this.activeTheme.Colors[0];
+            this.CurrentLoadingTextColor = this.activeTheme.Colors[0];
             // Set initial gradient if theme has gradients
-            if (this.activeTheme.gradients && this.activeTheme.gradients.length > 0) {
-                this.currentLoadingGradient = this.activeTheme.gradients[0];
+            if (this.activeTheme.Gradients && this.activeTheme.Gradients.length > 0) {
+                this.CurrentLoadingGradient = this.activeTheme.Gradients[0];
                 this.usedGradientIndices = [0];
             }
             else {
-                this.currentLoadingGradient = null;
+                this.CurrentLoadingGradient = null;
             }
         }
     }
@@ -2213,7 +2504,7 @@ export class ShellComponent extends BaseAngularComponent {
      * For standard theme, colors remain static.
      */
     cycleToNextMessage() {
-        const messages = this.activeTheme.messages;
+        const messages = this.activeTheme.Messages;
         this.messageCycleCount++;
         // If we've used all messages, reset the used list (but exclude current to avoid immediate repeat)
         if (this.usedMessageIndices.length >= messages.length) {
@@ -2228,10 +2519,10 @@ export class ShellComponent extends BaseAngularComponent {
             this.usedMessageIndices.push(randomIndex);
             this.loadingMessageIndex = randomIndex;
             // Update the message
-            this.currentLoadingText = this.activeTheme.messages[randomIndex];
+            this.CurrentLoadingText = this.activeTheme.Messages[randomIndex];
             // Check if it's time to change colors (every 2nd message = every 5 seconds)
             // But only for non-static themes
-            if (!this.activeTheme.staticColors && this.messageCycleCount % this.colorChangeEveryNMessages === 0) {
+            if (!this.activeTheme.StaticColors && this.messageCycleCount % this.colorChangeEveryNMessages === 0) {
                 this.cycleToNextColor();
             }
         }
@@ -2242,8 +2533,8 @@ export class ShellComponent extends BaseAngularComponent {
      */
     cycleToNextColor() {
         // Cycle to next gradient if available
-        if (this.activeTheme.gradients && this.activeTheme.gradients.length > 0) {
-            const gradients = this.activeTheme.gradients;
+        if (this.activeTheme.Gradients && this.activeTheme.Gradients.length > 0) {
+            const gradients = this.activeTheme.Gradients;
             // If we've used all gradients, reset (but exclude current to avoid immediate repeat)
             if (this.usedGradientIndices.length >= gradients.length) {
                 const lastUsed = this.usedGradientIndices[this.usedGradientIndices.length - 1];
@@ -2253,15 +2544,15 @@ export class ShellComponent extends BaseAngularComponent {
             const currentIndex = this.usedGradientIndices[this.usedGradientIndices.length - 1] ?? -1;
             const nextIndex = (currentIndex + 1) % gradients.length;
             this.usedGradientIndices.push(nextIndex);
-            this.currentLoadingGradient = gradients[nextIndex];
+            this.CurrentLoadingGradient = gradients[nextIndex];
         }
         // Also cycle text color through theme colors
-        const colors = this.activeTheme.colors;
+        const colors = this.activeTheme.Colors;
         if (colors.length > 1) {
             // Get a random color from the theme for text
             const randomIndex = Math.floor(Math.random() * colors.length);
-            this.currentLoadingColor = colors[randomIndex];
-            this.currentLoadingTextColor = colors[randomIndex];
+            this.CurrentLoadingColor = colors[randomIndex];
+            this.CurrentLoadingTextColor = colors[randomIndex];
         }
     }
     /**
@@ -2270,22 +2561,22 @@ export class ShellComponent extends BaseAngularComponent {
      */
     initializeAnimationFromTheme() {
         this.currentAnimationIndex = 0;
-        const themeAnimations = this.activeTheme.animations;
+        const themeAnimations = this.activeTheme.Animations;
         if (!themeAnimations) {
             // No animation config - use random selection for non-standard themes
             if (this.activeTheme.id === 'standard') {
                 // Standard theme defaults to pulse only
-                this.animationSequence = [{ type: 'pulse' }];
+                this.animationSequence = [{ Type: 'pulse' }];
             }
             else {
                 // Random selection for themed holidays without explicit config
                 const randomType = this.allAnimationTypes[Math.floor(Math.random() * this.allAnimationTypes.length)];
-                this.animationSequence = [{ type: randomType }];
+                this.animationSequence = [{ Type: randomType }];
             }
         }
         else if (typeof themeAnimations === 'string') {
             // Single animation type specified
-            this.animationSequence = [{ type: themeAnimations }];
+            this.animationSequence = [{ Type: themeAnimations }];
         }
         else {
             // Array of animation steps
@@ -2293,7 +2584,7 @@ export class ShellComponent extends BaseAngularComponent {
         }
         // Set initial animation
         if (this.animationSequence.length > 0) {
-            this.currentLoadingAnimation = this.animationSequence[0].type;
+            this.CurrentLoadingAnimation = this.animationSequence[0].Type;
         }
     }
     /**
@@ -2317,7 +2608,7 @@ export class ShellComponent extends BaseAngularComponent {
             return;
         }
         const currentStep = this.animationSequence[this.currentAnimationIndex];
-        const durationMs = currentStep.durationMs;
+        const durationMs = currentStep.DurationMs;
         // If no duration specified (or 0), this step runs indefinitely
         if (!durationMs || durationMs <= 0) {
             return;
@@ -2337,7 +2628,7 @@ export class ShellComponent extends BaseAngularComponent {
             return;
         }
         const nextStep = this.animationSequence[this.currentAnimationIndex];
-        this.currentLoadingAnimation = nextStep.type;
+        this.CurrentLoadingAnimation = nextStep.Type;
         this.cdr.detectChanges();
         // Schedule the next transition if this step has a duration
         this.scheduleNextAnimationStep();
@@ -2354,11 +2645,11 @@ export class ShellComponent extends BaseAngularComponent {
     /**
      * Handle app switch from app switcher
      */
-    async onAppSwitch(appId) {
+    async OnAppSwitch(appId) {
         // Clear the system tab flag since we're switching to a real app
-        this.isViewingSystemTab = false;
+        this.IsViewingSystemTab = false;
         // Show loading indicator in app switcher
-        this.loadingAppId = appId;
+        this.LoadingAppId = appId;
         this.cdr.detectChanges();
         try {
             const app = this.appManager.GetAppById(appId);
@@ -2367,11 +2658,11 @@ export class ShellComponent extends BaseAngularComponent {
                 const systemApp = this.appManager.GetAllSystemApps().find(a => UUIDsEqual(a.ID, appId));
                 const appName = systemApp?.Name || 'this application';
                 // Clear loading indicator before showing dialog
-                this.loadingAppId = null;
+                this.LoadingAppId = null;
                 this.cdr.detectChanges();
                 // Show "Add Application?" dialog
-                if (this.appAccessDialog) {
-                    this.appAccessDialog.show({
+                if (this.AppAccessDialog) {
+                    this.AppAccessDialog.show({
                         type: 'not_installed',
                         appName: appName,
                         appId: appId
@@ -2423,10 +2714,14 @@ export class ShellComponent extends BaseAngularComponent {
         }
         finally {
             // Clear loading indicator
-            this.loadingAppId = null;
+            this.LoadingAppId = null;
             this.cdr.detectChanges();
         }
     }
+    /** @deprecated Use {@link OnAppSwitch}. */
+    async onAppSwitch(appId) {
+        return this.OnAppSwitch(appId);
+    }
     /**
      * Find an existing tab that matches the default nav item
      */
@@ -2454,22 +2749,30 @@ export class ShellComponent extends BaseAngularComponent {
     /**
      * Handle Nav Bar app icon click (single click switches to app)
      */
-    onNavBarAppClick(app, event) {
+    OnNavBarAppClick(app, event) {
         // If shift key is held, force new tab
         if (event.shiftKey) {
             this.openNavBarAppInNewTab(app);
         }
         else {
-            this.onAppSwitch(app.ID);
+            this.OnAppSwitch(app.ID);
         }
     }
+    /** @deprecated Use {@link OnNavBarAppClick}. */
+    onNavBarAppClick(app, event) {
+        return this.OnNavBarAppClick(app, event);
+    }
     /**
      * Handle Nav Bar app icon double-click (opens in new tab)
      */
-    onNavBarAppDblClick(app, event) {
+    OnNavBarAppDblClick(app, event) {
         event.preventDefault();
         this.openNavBarAppInNewTab(app);
     }
+    /** @deprecated Use {@link OnNavBarAppDblClick}. */
+    onNavBarAppDblClick(app, event) {
+        return this.OnNavBarAppDblClick(app, event);
+    }
     /**
      * Open a nav bar app's default content in a new tab
      */
@@ -2478,7 +2781,7 @@ export class ShellComponent extends BaseAngularComponent {
         const tabRequest = await app.CreateDefaultTab();
         if (tabRequest) {
             // Set the app as active first if it isn't already
-            if (!UUIDsEqual(this.activeApp?.ID, app.ID)) {
+            if (!UUIDsEqual(this.ActiveApp?.ID, app.ID)) {
                 await this.appManager.SetActiveApp(app.ID);
             }
             // Open in new tab by adding to workspace
@@ -2488,49 +2791,65 @@ export class ShellComponent extends BaseAngularComponent {
     /**
      * Handle navigation item click with shift-key detection
      */
-    onNavItemClick(event) {
-        if (!this.activeApp) {
+    OnNavItemClick(event) {
+        if (!this.ActiveApp) {
             return;
         }
         const { item, shiftKey } = event;
         // Close mobile nav if open. Routed through closeMobileNav() rather than setting the flag
         // directly so focus does not get dropped to <body> when the drawer goes inert — tapping a
         // nav item is the most common way the drawer closes on a phone.
-        this.closeMobileNav();
+        this.CloseMobileNav();
         // Use NavigationService with forceNewTab option if shift was pressed
-        this.navigationService.OpenNavItem(this.activeApp.ID, item, this.activeApp.GetColor(), { forceNewTab: shiftKey });
+        this.navigationService.OpenNavItem(this.ActiveApp.ID, item, this.ActiveApp.GetColor(), { forceNewTab: shiftKey });
+    }
+    /** @deprecated Use {@link OnNavItemClick}. */
+    onNavItemClick(event) {
+        return this.OnNavItemClick(event);
     }
     /**
      * Handle dismiss of a dynamic nav item (remove from recent stack)
      */
-    onNavItemDismiss(item) {
-        if (!this.activeApp) {
+    OnNavItemDismiss(item) {
+        if (!this.ActiveApp) {
             return;
         }
         // Delegate to HomeApplication's RemoveDynamicNavItem if available
-        const appWithRemove = this.activeApp;
+        const appWithRemove = this.ActiveApp;
         if (typeof appWithRemove.RemoveDynamicNavItem === 'function') {
             appWithRemove.RemoveDynamicNavItem(item);
         }
     }
+    /** @deprecated Use {@link OnNavItemDismiss}. */
+    onNavItemDismiss(item) {
+        return this.OnNavItemDismiss(item);
+    }
     /**
      * Toggle mobile navigation drawer
      */
-    toggleMobileNav() {
-        this.mobileNavOpen = !this.mobileNavOpen;
-        if (!this.mobileNavOpen) {
+    ToggleMobileNav() {
+        this.MobileNavOpen = !this.MobileNavOpen;
+        if (!this.MobileNavOpen) {
             this.returnFocusFromMobileNav();
         }
     }
+    /** @deprecated Use {@link ToggleMobileNav}. */
+    toggleMobileNav() {
+        return this.ToggleMobileNav();
+    }
     /**
      * Close mobile navigation drawer
      */
-    closeMobileNav() {
-        if (this.mobileNavOpen) {
-            this.mobileNavOpen = false;
+    CloseMobileNav() {
+        if (this.MobileNavOpen) {
+            this.MobileNavOpen = false;
             this.returnFocusFromMobileNav();
         }
     }
+    /** @deprecated Use {@link CloseMobileNav}. */
+    closeMobileNav() {
+        return this.CloseMobileNav();
+    }
     /**
      * When the drawer closes it becomes `inert`, which drops focus to <body> if focus was
      * inside it — the user's place in the page is gone and the next Tab restarts at the top.
@@ -2538,12 +2857,12 @@ export class ShellComponent extends BaseAngularComponent {
      * (e.g. the drawer was closed from a keyboard shortcut while the user was in the content).
      */
     returnFocusFromMobileNav() {
-        const drawer = this.mobileNavDrawer?.nativeElement;
+        const drawer = this.MobileNavDrawer?.nativeElement;
         const active = document.activeElement;
         if (!drawer || !active || !drawer.contains(active)) {
             return;
         }
-        this.mobileNavToggle?.nativeElement.focus();
+        this.MobileNavToggle?.nativeElement.focus();
     }
     /**
      * Accessible name for the avatar button. The name must never depend on the avatar image
@@ -2551,15 +2870,19 @@ export class ShellComponent extends BaseAngularComponent {
      * name of its own — so it is set on the BUTTON and falls back to a generic label before
      * the user record has loaded.
      */
-    get avatarAriaLabel() {
+    get AvatarAriaLabel() {
         return this.userName ? `Account: ${this.userName}` : 'Account';
     }
+    /** @deprecated Use {@link AvatarAriaLabel}. */
+    get avatarAriaLabel() {
+        return this.AvatarAriaLabel;
+    }
     /**
      * Skip link target handoff (WCAG 2.4.1). Focus is moved programmatically rather than left
      * to the browser's fragment navigation: the shell's main region is a Golden Layout host,
      * and letting the URL hash change here would collide with the deep-link/tab restore path.
      */
-    skipToMainContent(event) {
+    SkipToMainContent(event) {
         event.preventDefault();
         const main = document.getElementById('mj-main-content');
         if (!main) {
@@ -2568,18 +2891,22 @@ export class ShellComponent extends BaseAngularComponent {
         main.focus();
         main.scrollIntoView({ block: 'start' });
     }
+    /** @deprecated Use {@link SkipToMainContent}. */
+    skipToMainContent(event) {
+        return this.SkipToMainContent(event);
+    }
     /**
      * Toggle user menu visibility
      */
-    toggleUserMenu(event) {
+    ToggleUserMenu(event) {
         event.stopPropagation();
-        this.userMenuVisible = !this.userMenuVisible;
-        if (this.userMenuVisible) {
+        this.UserMenuVisible = !this.UserMenuVisible;
+        if (this.UserMenuVisible) {
             // Close menu when clicking outside. CAPTURE phase so clicks whose
             // bubbling something stopped (e.g. the origin crumb's GL-focus
             // stoppers) still dismiss the menu.
             const closeHandler = () => {
-                this.userMenuVisible = false;
+                this.UserMenuVisible = false;
                 document.removeEventListener('click', closeHandler, true);
             };
             setTimeout(() => {
@@ -2587,6 +2914,10 @@ export class ShellComponent extends BaseAngularComponent {
             }, 0);
         }
     }
+    /** @deprecated Use {@link ToggleUserMenu}. */
+    toggleUserMenu(event) {
+        return this.ToggleUserMenu(event);
+    }
     /**
      * Initialize the user menu plugin system
      */
@@ -2599,7 +2930,7 @@ export class ShellComponent extends BaseAngularComponent {
         }
         // Initialize developer mode service
         if (this.userEntity) {
-            await this.developerModeService.Initialize(this.userEntity);
+            await this.DeveloperModeService.Initialize(this.userEntity);
         }
         // Check org-level feedback kill switch (defaults to enabled on error)
         const feedbackEnabled = await this.feedbackService.IsEnabled();
@@ -2609,9 +2940,9 @@ export class ShellComponent extends BaseAngularComponent {
             userEntity: this.userEntity,
             shell: this,
             viewContainerRef: this.viewContainerRef,
-            isDeveloper: this.developerModeService.IsDeveloper,
-            developerModeEnabled: this.developerModeService.IsEnabled,
-            currentApplication: this.activeApp,
+            isDeveloper: this.DeveloperModeService.IsDeveloper,
+            developerModeEnabled: this.DeveloperModeService.IsEnabled,
+            currentApplication: this.ActiveApp,
             workspaceManager: this.workspaceManager,
             authService: this.authBase,
             pinService: this.homePinService,
@@ -2628,11 +2959,11 @@ export class ShellComponent extends BaseAngularComponent {
         // Get initial menu elements
         this.refreshMenuElements();
         // Subscribe to developer mode changes to refresh menu
-        this.developerModeService.IsEnabled$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.DeveloperModeService.IsEnabled$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             // Update context and refresh menu
             if (this.userMenu) {
                 this.userMenu.UpdateContext({
-                    developerModeEnabled: this.developerModeService.IsEnabled
+                    developerModeEnabled: this.DeveloperModeService.IsEnabled
                 });
             }
             this.refreshMenuElements();
@@ -2656,13 +2987,13 @@ export class ShellComponent extends BaseAngularComponent {
      */
     refreshMenuElements() {
         if (this.userMenu) {
-            this.userMenuElements = this.userMenu.GetMenuElements();
+            this.UserMenuElements = this.userMenu.GetMenuElements();
         }
     }
     /**
      * Handle user menu item click
      */
-    async onUserMenuItemClick(itemId) {
+    async OnUserMenuItemClick(itemId) {
         if (!this.userMenu)
             return;
         const result = await this.userMenu.HandleItemClick(itemId);
@@ -2683,12 +3014,12 @@ export class ShellComponent extends BaseAngularComponent {
             }
         }
         if (result.message === 'reset-layout') {
-            await this.onResetLayout();
+            await this.OnResetLayout();
             return;
         }
         if (result.message === 'pin-to-home') {
             // Close menu and show overlay immediately before any async work
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
             this.refreshMenuElements();
             this.showPinProgress('Pinning...');
             // Let the UI render the overlay before starting the work
@@ -2707,38 +3038,42 @@ export class ShellComponent extends BaseAngularComponent {
             return;
         }
         if (result.message === 'sharing-center') {
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
             this.userSharingCenterDialogService.open(this.viewContainerRef);
             return;
         }
         if (result.message === 'submit-feedback') {
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
             this.ShowFeedbackDialog();
             return;
         }
         if (result.message === 'about') {
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
             this.aboutDialogService.open(this.viewContainerRef, {
-                avatarUrl: this.userImageURL || null,
-                avatarIconClass: this.userIconClass || null
+                avatarUrl: this.UserImageURL || null,
+                avatarIconClass: this.UserIconClass || null
             });
             return;
         }
         if (result.message === 'profile') {
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
             this.profileDialogService.open(this.viewContainerRef, {
-                avatarUrl: this.userImageURL || null,
-                avatarIconClass: this.userIconClass || null
+                avatarUrl: this.UserImageURL || null,
+                avatarIconClass: this.UserIconClass || null
             });
             return;
         }
         if (result.closeMenu) {
-            this.userMenuVisible = false;
+            this.UserMenuVisible = false;
         }
         // Refresh menu elements (some items may have changed state)
         this.refreshMenuElements();
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnUserMenuItemClick}. */
+    async onUserMenuItemClick(itemId) {
+        return this.OnUserMenuItemClick(itemId);
+    }
     /**
      * Whether the currently applied theme is dark (used by the toggle switch in the template)
      */
@@ -2749,28 +3084,44 @@ export class ShellComponent extends BaseAngularComponent {
     /**
      * Get user menu options for template
      */
-    getUserMenuOptions() {
+    GetUserMenuOptions() {
         return this.userMenu?.GetOptions();
     }
+    /** @deprecated Use {@link GetUserMenuOptions}. */
+    getUserMenuOptions() {
+        return this.GetUserMenuOptions();
+    }
     /**
      * Get user display info for template
      */
-    getUserDisplayInfo() {
+    GetUserDisplayInfo() {
         return this.userMenu?.GetUserDisplayInfo();
     }
+    /** @deprecated Use {@link GetUserDisplayInfo}. */
+    getUserDisplayInfo() {
+        return this.GetUserDisplayInfo();
+    }
     /**
      * Check if an element is a divider (for template)
      */
-    isMenuDivider(element) {
+    IsMenuDivider(element) {
         return isUserMenuDivider(element);
     }
+    /** @deprecated Use {@link IsMenuDivider}. */
+    isMenuDivider(element) {
+        return this.IsMenuDivider(element);
+    }
     /**
      * Cast element to UserMenuItem (for template type safety)
      * Call this only after checking !isMenuDivider(element)
      */
-    asMenuItem(element) {
+    AsMenuItem(element) {
         return element;
     }
+    /** @deprecated Use {@link AsMenuItem}. */
+    asMenuItem(element) {
+        return this.AsMenuItem(element);
+    }
     /**
      * Pin the currently active resource to the Home dashboard
      */
@@ -2797,10 +3148,10 @@ export class ShellComponent extends BaseAngularComponent {
         }
         // Resolve nav item icon for Custom pins
         let pinIcon;
-        if (resourceType === 'Custom' && this.activeApp) {
+        if (resourceType === 'Custom' && this.ActiveApp) {
             const navItemName = activeTab.configuration?.['navItemName'];
             if (navItemName) {
-                const navItems = await this.activeApp.GetNavItems();
+                const navItems = await this.ActiveApp.GetNavItems();
                 const navItem = navItems.find(ni => ni.Label === navItemName);
                 pinIcon = navItem?.Icon || undefined;
             }
@@ -2809,9 +3160,9 @@ export class ShellComponent extends BaseAngularComponent {
             DisplayName: displayName,
             ResourceType: resourceType,
             ApplicationID: activeTab.applicationId,
-            ApplicationName: this.activeApp?.Name,
+            ApplicationName: this.ActiveApp?.Name,
             Icon: pinIcon,
-            Color: this.activeApp?.GetColor() || undefined,
+            Color: this.ActiveApp?.GetColor() || undefined,
             Configuration: activeTab.configuration
         });
         if (added) {
@@ -2831,9 +3182,9 @@ export class ShellComponent extends BaseAngularComponent {
      */
     async captureAndAttachThumbnail(tab, resourceType) {
         try {
-            if (!this.tabContainerRef)
+            if (!this.TabContainerRef)
                 return;
-            const thumbnail = await this.tabContainerRef.CaptureActiveThumbnail();
+            const thumbnail = await this.TabContainerRef.CaptureActiveThumbnail();
             if (thumbnail) {
                 const pin = this.homePinService.FindPin(resourceType, tab.configuration);
                 if (pin) {
@@ -2905,19 +3256,23 @@ export class ShellComponent extends BaseAngularComponent {
     /**
      * Log current workspace configuration to console (debug)
      */
-    onLogLayout() {
+    OnLogLayout() {
         const config = this.workspaceManager.GetConfiguration();
         console.log('📋 Workspace Configuration:', JSON.stringify(config, null, 2));
         console.log('📋 Workspace Configuration (object):', config);
-        this.userMenuVisible = false;
+        this.UserMenuVisible = false;
+    }
+    /** @deprecated Use {@link OnLogLayout}. */
+    onLogLayout() {
+        return this.OnLogLayout();
     }
     /**
      * Reset workspace layout - clears all tabs and switches to single-resource mode
      */
-    async onResetLayout() {
-        this.userMenuVisible = false;
+    async OnResetLayout() {
+        this.UserMenuVisible = false;
         // Get current active app to create a fresh default tab
-        const currentApp = this.activeApp;
+        const currentApp = this.ActiveApp;
         if (!currentApp) {
             console.warn('No active app to reset to');
             return;
@@ -2961,42 +3316,22 @@ export class ShellComponent extends BaseAngularComponent {
         // Update workspace configuration
         this.workspaceManager.UpdateConfiguration(freshConfig);
     }
+    /** @deprecated Use {@link OnResetLayout}. */
+    async onResetLayout() {
+        return this.OnResetLayout();
+    }
     /**
      * Logout user and clear authentication data
      */
-    async onLogout() {
-        this.userMenuVisible = false;
+    async OnLogout() {
+        this.UserMenuVisible = false;
         this.authBase.logout();
         localStorage.removeItem('auth');
         localStorage.removeItem('claims');
     }
-    /**
-     * Global keyboard shortcut handler
-     * Cmd+/ (Mac) or Ctrl+/ (Windows) opens the command palette
-     */
-    handleGlobalKeyboardShortcuts(event) {
-        // Skip if user is typing in an input/textarea — EXCEPT when the omnibar is on:
-        // a modal palette is summonable from anywhere (incl. the chat composer), like
-        // Slack/Linear. The legacy path keeps the guard (its binding steals focus).
-        const target = event.target;
-        const inEditable = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-        if (inEditable && !this.UseOmnibar) {
-            return;
-        }
-        // Platform detection
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-        const isCtrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
-        // Cmd+/ or Ctrl+/ opens the palette (omnibar '/' mode when enabled, legacy otherwise)
-        if (isCtrlOrCmd && event.key === '/') {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.UseOmnibar) {
-                this.OpenOmnibar('/');
-            }
-            else {
-                this.commandPaletteService.Open();
-            }
-        }
+    /** @deprecated Use {@link OnLogout}. */
+    async onLogout() {
+        return this.OnLogout();
     }
     /**
      * Load user avatar from database, auto-sync from auth provider if needed
@@ -3005,7 +3340,7 @@ export class ShellComponent extends BaseAngularComponent {
         try {
             const md = this.ProviderToUse;
             this.userName = currentUserInfo.FirstLast || currentUserInfo.Name || 'User';
-            this.userEmail = currentUserInfo.Email || '';
+            this.UserEmail = currentUserInfo.Email || '';
             // Load the full MJUserEntity to access avatar fields
             const currentUserEntity = await md.GetEntityObject('MJ: Users');
             await currentUserEntity.Load(currentUserInfo.ID);
@@ -3025,8 +3360,8 @@ export class ShellComponent extends BaseAngularComponent {
         catch (error) {
             console.warn('Could not load user avatar:', error);
             // Use fallback
-            this.userImageURL = '';
-            this.userIconClass = null;
+            this.UserImageURL = '';
+            this.UserIconClass = null;
         }
     }
     /**
@@ -3053,17 +3388,17 @@ export class ShellComponent extends BaseAngularComponent {
      */
     applyUserAvatar(user) {
         if (user.UserImageURL) {
-            this.userImageURL = user.UserImageURL;
-            this.userIconClass = null;
+            this.UserImageURL = user.UserImageURL;
+            this.UserIconClass = null;
         }
         else if (user.UserImageIconClass) {
-            this.userIconClass = user.UserImageIconClass;
-            this.userImageURL = '';
+            this.UserIconClass = user.UserImageIconClass;
+            this.UserImageURL = '';
         }
         else {
             // Default fallback - show icon
-            this.userImageURL = '';
-            this.userIconClass = null;
+            this.UserImageURL = '';
+            this.UserIconClass = null;
         }
         this.cdr.detectChanges();
     }
@@ -3075,7 +3410,7 @@ export class ShellComponent extends BaseAngularComponent {
         // Find the active tab
         const activeTab = config.tabs?.find(tab => tab.id === config.activeTabId);
         // Get app name
-        const appName = this.activeApp?.Name || null;
+        const appName = this.ActiveApp?.Name || null;
         // Get resource name from active tab
         let resourceName = null;
         if (activeTab) {
@@ -3092,15 +3427,15 @@ export class ShellComponent extends BaseAngularComponent {
      */
     async loadSearchableEntities() {
         const md = this.ProviderToUse;
-        this.searchableEntities = md.Entities.filter((e) => e.AllowUserSearchAPI).sort((a, b) => a.Name.localeCompare(b.Name));
-        if (this.searchableEntities.length > 0) {
-            this.selectedEntity = this.searchableEntities[0];
+        this.SearchableEntities = md.Entities.filter((e) => e.AllowUserSearchAPI).sort((a, b) => a.Name.localeCompare(b.Name));
+        if (this.SearchableEntities.length > 0) {
+            this.SelectedEntity = this.SearchableEntities[0];
         }
     }
     /**
      * Toggle search popup visibility
      */
-    toggleSearch() {
+    ToggleSearch() {
         if (!this.ShowSearchBar) {
             return;
         }
@@ -3108,36 +3443,44 @@ export class ShellComponent extends BaseAngularComponent {
             this.OpenOmnibar();
             return;
         }
-        this.isSearchOpen = !this.isSearchOpen;
+        this.IsSearchOpen = !this.IsSearchOpen;
         // Focus on search input when opened
-        if (this.isSearchOpen) {
+        if (this.IsSearchOpen) {
             setTimeout(() => {
-                if (this.searchInput && this.searchInput.nativeElement) {
-                    this.searchInput.nativeElement.focus();
+                if (this.SearchInput && this.SearchInput.nativeElement) {
+                    this.SearchInput.nativeElement.focus();
                 }
             }, 100);
         }
     }
+    /** @deprecated Use {@link ToggleSearch}. */
+    toggleSearch() {
+        return this.ToggleSearch();
+    }
     /**
      * Close search popup
      */
+    CloseSearch() {
+        this.IsSearchOpen = false;
+    }
+    /** @deprecated Use {@link CloseSearch}. */
     closeSearch() {
-        this.isSearchOpen = false;
+        return this.CloseSearch();
     }
     /**
      * Handle search submission
      */
-    onSearch(event) {
-        if (!this.searchInput) {
+    OnSearch(event) {
+        if (!this.SearchInput) {
             return;
         }
-        const inputValue = this.searchInput.nativeElement.value;
+        const inputValue = this.SearchInput.nativeElement.value;
         if (inputValue && inputValue.length > 0 && inputValue.trim().length > 2) {
-            this.searchInput.nativeElement.value = ''; // Clear input
-            this.isSearchOpen = false; // Close search popup
+            this.SearchInput.nativeElement.value = ''; // Clear input
+            this.IsSearchOpen = false; // Close search popup
             // Navigate to search results
-            if (this.selectedEntity) {
-                this.router.navigate(['resource', 'search', inputValue], { queryParams: { Entity: this.selectedEntity.Name } });
+            if (this.SelectedEntity) {
+                this.router.navigate(['resource', 'search', inputValue], { queryParams: { Entity: this.SelectedEntity.Name } });
             }
         }
         else {
@@ -3154,23 +3497,60 @@ export class ShellComponent extends BaseAngularComponent {
             });
         }
     }
+    /** @deprecated Use {@link OnSearch}. */
+    onSearch(event) {
+        return this.OnSearch(event);
+    }
     // ========================================
     // UNIVERSAL SEARCH EVENT HANDLERS
     // ========================================
+    /**
+     * The shell's ONLY `document:keydown` listener — handles every global chord.
+     *
+     * ⚠️ Do NOT add a second `@HostListener('document:keydown')` to this component.
+     * Angular's compiler collects host listeners into an object keyed by event name,
+     * so a second declaration for the same event SILENTLY REPLACES the first — no
+     * build error, no warning, the earlier handler simply never registers. That is
+     * exactly what happened here: a separate `handleGlobalKeyboardShortcuts` owned
+     * Ctrl+/ and was overwritten by this method, so the command palette shortcut was
+     * dead for its entire life. Every new global chord belongs in this one method.
+     *
+     * - **Ctrl/Cmd+K** summons search. Omnibar on: the modal palette opens from
+     *   anywhere, even while typing (explicit chord, Slack/Linear semantics). Omnibar
+     *   off: the chord FOCUSES the inline header composite on desktop (results attach
+     *   beneath it), so keep the don't-steal-focus-mid-typing guard; on mobile (no
+     *   composite rendered) it opens the Spotlight overlay instead.
+     * - **Ctrl/Cmd+/** opens the command palette, even from an input — the chord can
+     *   never be mistaken for ordinary typing. It yields only when an element under
+     *   focus already handled it (`defaultPrevented`): CodeMirror binds Mod-/ to toggle
+     *   comment and calls `preventDefault()` without stopping propagation.
+     */
     OnGlobalKeydown(event) {
-        // Ctrl/Cmd+K summons search. Omnibar: the modal palette opens from anywhere,
-        // even while typing (explicit chord, Slack/Linear semantics). Legacy: the
-        // chord FOCUSES the inline header composite on desktop (results attach
-        // beneath it), so keep the don't-steal-focus-mid-typing guard; on mobile
-        // (no composite rendered) it opens the Spotlight overlay instead.
-        const target = event.target;
-        const inEditable = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-        if (inEditable && !this.UseOmnibar) {
-            return;
-        }
         const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
         const isCtrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
-        if (isCtrlOrCmd && event.key === 'k') {
+        if (!isCtrlOrCmd) {
+            return;
+        }
+        if (event.key === '/') {
+            if (event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.UseOmnibar) {
+                this.OpenOmnibar('/');
+            }
+            else {
+                this.commandPaletteService.Open();
+            }
+            return;
+        }
+        if (event.key === 'k') {
+            const target = event.target;
+            const inEditable = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+            if (inEditable && !this.UseOmnibar) {
+                return;
+            }
             event.preventDefault();
             event.stopPropagation();
             this.OnHeaderSearchClick();
@@ -3190,10 +3570,10 @@ export class ShellComponent extends BaseAngularComponent {
         if (this.UseOmnibar) {
             this.OpenOmnibar();
         }
-        else if (!isMobile && this.shellSearchComposite?.Focus) {
+        else if (!isMobile && this.ShellSearchComposite?.Focus) {
             // Omnibar-off desktop: the inline composite is on screen — focus it and
             // let its attached suggest dropdown do the work.
-            this.shellSearchComposite.Focus();
+            this.ShellSearchComposite.Focus();
         }
         else {
             // Omnibar-off mobile: no visible inline composite — open the Spotlight overlay.
@@ -3235,12 +3615,20 @@ export class ShellComponent extends BaseAngularComponent {
         this.LegacySearchOpen = false;
         this.navigationService.OpenSearch(query);
     }
+    /** Command palette "Search everything" row → full Search Results workspace. Does
+        nothing while the chrome hides search, like the other search entry points. */
+    OnCommandPaletteSearch(query) {
+        if (!this.ShowSearchBar || !query.trim()) {
+            return;
+        }
+        this.navigationService.OpenSearch(query);
+    }
     /** Inline composite submit (Enter) → full Search Results workspace, carrying the
         composite's relevance/scope selections. */
     OnSearchSubmitted(query) {
         if (query && query.trim().length >= 2) {
-            const minRelevance = this.shellSearchComposite?.MinRelevancePercent;
-            const scopeIDs = this.shellSearchComposite?.SelectedScopeIDs;
+            const minRelevance = this.ShellSearchComposite?.MinRelevancePercent;
+            const scopeIDs = this.ShellSearchComposite?.SelectedScopeIDs;
             const opts = {};
             if (minRelevance)
                 opts.minRelevance = minRelevance;
@@ -3260,19 +3648,27 @@ export class ShellComponent extends BaseAngularComponent {
      * Show notifications page as a tab
      */
     /** Toggle the global Activity drawer. */
-    toggleActivity(event) {
+    ToggleActivity(event) {
         event.stopPropagation();
-        this.activityOpen = !this.activityOpen;
+        this.ActivityOpen = !this.ActivityOpen;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link ToggleActivity}. */
+    toggleActivity(event) {
+        return this.ToggleActivity(event);
+    }
     /** Clear finished activities from the tracker. */
-    clearFinishedActivity() {
+    ClearFinishedActivity() {
         this.activityService.ClearFinished();
     }
+    /** @deprecated Use {@link ClearFinishedActivity}. */
+    clearFinishedActivity() {
+        return this.ClearFinishedActivity();
+    }
     /** Close the Activity drawer when clicking anywhere outside it. */
     onDocumentClickCloseActivity() {
-        if (this.activityOpen) {
-            this.activityOpen = false;
+        if (this.ActivityOpen) {
+            this.ActivityOpen = false;
             this.cdr.detectChanges();
         }
     }
@@ -3322,8 +3718,8 @@ export class ShellComponent extends BaseAngularComponent {
     async captureAndAttachFeedbackScreenshot() {
         try {
             let screenshot;
-            if (this.tabContainerRef) {
-                screenshot = await this.tabContainerRef.CaptureActiveThumbnail();
+            if (this.TabContainerRef) {
+                screenshot = await this.TabContainerRef.CaptureActiveThumbnail();
             }
             if (!screenshot) {
                 const contentEl = document.querySelector('.shell-content')
@@ -3369,8 +3765,8 @@ export class ShellComponent extends BaseAngularComponent {
         // Show the dialog on top of the loading screen
         // Use setTimeout to ensure the dialog component is ready after view init
         setTimeout(() => {
-            if (this.appAccessDialog) {
-                this.appAccessDialog.show(dialogConfig);
+            if (this.AppAccessDialog) {
+                this.AppAccessDialog.show(dialogConfig);
             }
             else {
                 // Fallback if dialog not available - redirect to a working app
@@ -3428,24 +3824,24 @@ export class ShellComponent extends BaseAngularComponent {
         LogStatus('User has no applications available');
         // Stop loading animation and show the dialog
         this.stopLoadingAnimation();
-        this.loading = false;
+        this.Loading = false;
         this.cdr.detectChanges();
         setTimeout(() => {
-            if (this.appAccessDialog) {
-                this.appAccessDialog.show({ type: 'no_apps' });
+            if (this.AppAccessDialog) {
+                this.AppAccessDialog.show({ type: 'no_apps' });
             }
         }, 0);
     }
     /**
      * Handle Golden Layout initialization failure
      */
-    handleLayoutError() {
+    HandleLayoutError() {
         LogStatus('Golden Layout initialization failed');
         const availableApps = this.appManager.GetAllApps();
         if (availableApps.length > 0) {
             setTimeout(() => {
-                if (this.appAccessDialog) {
-                    this.appAccessDialog.show({ type: 'layout_error' });
+                if (this.AppAccessDialog) {
+                    this.AppAccessDialog.show({ type: 'layout_error' });
                 }
                 else {
                     // Direct redirect if dialog not available
@@ -3454,10 +3850,14 @@ export class ShellComponent extends BaseAngularComponent {
             }, 0);
         }
     }
+    /** @deprecated Use {@link HandleLayoutError}. */
+    handleLayoutError() {
+        return this.HandleLayoutError();
+    }
     /**
      * Handle dialog result (install, enable, or redirect)
      */
-    async onAppAccessDialogResult(result) {
+    async OnAppAccessDialogResult(result) {
         const availableApps = this.appManager.GetAllApps();
         switch (result.action) {
             case 'install':
@@ -3477,6 +3877,10 @@ export class ShellComponent extends BaseAngularComponent {
                 break;
         }
     }
+    /** @deprecated Use {@link OnAppAccessDialogResult}. */
+    async onAppAccessDialogResult(result) {
+        return this.OnAppAccessDialogResult(result);
+    }
     /**
      * Install an app for the user and navigate to it
      */
@@ -3493,13 +3897,13 @@ export class ShellComponent extends BaseAngularComponent {
             }
             else {
                 console.error('[ShellComponent] Failed to add application');
-                this.appAccessDialog?.completeProcessing();
+                this.AppAccessDialog?.completeProcessing();
                 this.redirectToFallbackApp(this.appManager.GetAllApps());
             }
         }
         catch (error) {
             console.error('Error adding app:', error);
-            this.appAccessDialog?.completeProcessing();
+            this.AppAccessDialog?.completeProcessing();
             this.redirectToFallbackApp(this.appManager.GetAllApps());
         }
     }
@@ -3514,13 +3918,13 @@ export class ShellComponent extends BaseAngularComponent {
                 await this.waitForAppAndNavigate(appId);
             }
             else {
-                this.appAccessDialog?.completeProcessing();
+                this.AppAccessDialog?.completeProcessing();
                 this.redirectToFallbackApp(this.appManager.GetAllApps());
             }
         }
         catch (error) {
             console.error('Error enabling app:', error);
-            this.appAccessDialog?.completeProcessing();
+            this.AppAccessDialog?.completeProcessing();
             this.redirectToFallbackApp(this.appManager.GetAllApps());
         }
     }
@@ -3536,7 +3940,7 @@ export class ShellComponent extends BaseAngularComponent {
             const app = this.appManager.GetAppById(appId);
             if (app) {
                 await this.navigateToApp(app);
-                this.appAccessDialog?.completeProcessing();
+                this.AppAccessDialog?.completeProcessing();
                 return;
             }
             // Wait a bit before checking again
@@ -3546,11 +3950,11 @@ export class ShellComponent extends BaseAngularComponent {
         const systemApp = this.appManager.GetAllSystemApps().find(a => UUIDsEqual(a.ID, appId));
         if (systemApp) {
             await this.navigateToApp(systemApp);
-            this.appAccessDialog?.completeProcessing();
+            this.AppAccessDialog?.completeProcessing();
         }
         else {
             console.warn(`[ShellComponent] App ${appId} not found after waiting, redirecting to fallback app`);
-            this.appAccessDialog?.completeProcessing();
+            this.AppAccessDialog?.completeProcessing();
             this.redirectToFallbackApp(this.appManager.GetAllApps());
         }
     }
@@ -3571,7 +3975,7 @@ export class ShellComponent extends BaseAngularComponent {
     }
     /** Case-insensitive UUID check whether an app is the currently active app. */
     IsActiveApp(app) {
-        return UUIDsEqual(app.ID, this.activeApp?.ID);
+        return UUIDsEqual(app.ID, this.ActiveApp?.ID);
     }
     /**
      * Candidate order for landing and fallback navigation: the declared-default app
@@ -3632,7 +4036,7 @@ export class ShellComponent extends BaseAngularComponent {
             }
         }
         // No apps available - this shouldn't happen, but handle gracefully
-        this.loading = false;
+        this.Loading = false;
         this.cdr.detectChanges();
     }
     static ɵfac = function ShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShellComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i1.GoldenLayoutManager), i0.ɵɵdirectiveInject(i1.TabService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i3.ActivatedRoute), i0.ɵɵdirectiveInject(i3.Router), i0.ɵɵdirectiveInject(i4.MJAuthBase), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i5.UserAvatarService), i0.ɵɵdirectiveInject(i6.UserSharingCenterDialogService), i0.ɵɵdirectiveInject(i7.AboutDialogService), i0.ɵɵdirectiveInject(i8.ProfileDialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.TitleService), i0.ɵɵdirectiveInject(i2.DeveloperModeService), i0.ɵɵdirectiveInject(i9.StartupValidationService), i0.ɵɵdirectiveInject(i10.CommandPaletteService), i0.ɵɵdirectiveInject(i2.ThemeService), i0.ɵɵdirectiveInject(i2.HomeAppPinService), i0.ɵɵdirectiveInject(i11.FileOpenService), i0.ɵɵdirectiveInject(i12.FeedbackDialogService), i0.ɵɵdirectiveInject(i12.FeedbackService), i0.ɵɵdirectiveInject(i2.ActivityService)); };
@@ -3640,16 +4044,16 @@ export class ShellComponent extends BaseAngularComponent {
             i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5)(_c4, 5)(TabContainerComponent, 5)(_c5, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mobileNavDrawer = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mobileNavToggle = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.omnibarPalette = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shellSearchComposite = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabContainerRef = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appAccessDialog = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.SearchInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.MobileNavDrawer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.MobileNavToggle = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.OmnibarPalette = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ShellSearchComposite = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TabContainerRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.AppAccessDialog = _t.first);
         } }, hostBindings: function ShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function ShellComponent_keydown_HostBindingHandler($event) { return ctx.OnGlobalKeydown($event); }, i0.ɵɵresolveDocument)("click", function ShellComponent_click_HostBindingHandler() { return ctx.onDocumentClickCloseActivity(); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 55, vars: 35, consts: [["mobileNavToggle", ""], ["searchInput", ""], ["mobileNavDrawer", ""], ["appAccessDialog", ""], ["shellSearchComposite", ""], ["omnibarPalette", ""], [1, "shell-container"], ["href", "#mj-main-content", 1, "mj-skip-link", 3, "click"], [1, "shell-header"], ["title", "MemberJunction", 1, "mj-logo"], ["title", "Menu", "aria-label", "Menu", "aria-controls", "mj-mobile-nav-drawer", 1, "hamburger-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars"], [1, "nav-bar-apps", "left-of-switcher"], [3, "activeApp", "isViewingSystemTab", "loadingAppId", "SwitcherStyle", "Provider"], [1, "desktop-nav", 3, "app", "OverflowEnabled"], [1, "desktop-nav"], [1, "spacer"], [1, "header-actions"], [1, "activity-wrap"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn"], [1, "nav-bar-apps", "left-of-user-menu"], [1, "user-menu"], [1, "avatar-btn", 3, "click"], ["alt", "", "aria-hidden", "true", 1, "avatar-img", 3, "src"], ["aria-hidden", "true", 1, "icon-fallback"], [1, "user-context-menu", 3, "menu-fade", "menu-slide"], [1, "search-popup-overlay"], [1, "search-popup"], [1, "search-popup-content", 3, "click"], ["TextField", "Name", "ValueField", "ID", "AriaLabel", "Search in", 1, "search-entity-dropdown", 3, "ngModelChange", "Data", "ngModel"], ["type", "text", "placeholder", "Search...", "aria-label", "Search", 1, "mj-input", "search-input", 3, "keydown.enter"], ["title", "Search", 1, "search-submit-btn", 3, "click"], [1, "fa-solid", "fa-search"], [1, "mobile-nav-overlay"], ["id", "mj-mobile-nav-drawer", 1, "mobile-nav-drawer"], [1, "mobile-nav-header"], ["aria-label", "Close navigation", 1, "close-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [1, "mobile-nav-content"], [1, "mobile-nav-records"], [1, "mobile-nav-footer"], ["title", "Search", 1, "mobile-nav-action", 3, "click"], ["title", "Notifications", 1, "mobile-nav-action"], ["id", "mj-main-content", "role", "main", "tabindex", "-1", 3, "firstResourceLoadComplete", "layoutInitError"], [1, "shell-loading"], [3, "result"], [3, "AppSelected"], ["Placeholder", "Search everything...", 3, "IsOpen", "EnableGlobalShortcut", "ShowPromo", "PromoText"], [1, "pin-progress-backdrop"], [1, "nav-bar-app-btn", 3, "active", "title", "--app-color"], [1, "nav-bar-app-btn", 3, "click", "dblclick", "title"], [3, "appSelected", "activeApp", "isViewingSystemTab", "loadingAppId", "SwitcherStyle", "Provider"], [1, "desktop-nav", 3, "navItemClick", "navItemDismiss", "app", "OverflowEnabled"], ["title", "Search everything", 1, "search-btn"], ["title", "Search everything", 1, "search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass"], [1, "search-btn-text", "desktop-only"], ["aria-hidden", "true", 1, "search-btn-kbd", "desktop-only"], [1, "shell-search-bar", "desktop-only"], ["Placeholder", "Search everything...", 3, "ResultSelected", "SearchSubmitted", "SeeAllRequested", "RecentRecordSelected", "PromoAccepted", "PromoDismissed", "ShowShortcutHint", "EnablePreview", "EnableRecent", "MaxPreviewResults", "ShowPromo", "PromoText"], ["title", "Search everything", 1, "search-btn", "search-btn-mobile", 3, "click"], ["title", "Activity", 1, "icon-btn", "desktop-only", "activity-btn", 3, "click"], [1, "fa-solid", "fa-wave-square"], [1, "activity-badge"], [1, "activity-drawer"], [1, "activity-drawer", 3, "click"], [1, "activity-drawer-head"], ["title", "Clear finished", 1, "activity-clear", 3, "click"], [1, "fa-solid", "fa-broom"], [1, "activity-list"], [1, "activity-row", 3, "is-error"], [1, "activity-row"], [1, "activity-row-icon"], [1, "activity-row-body"], [1, "activity-row-label"], [1, "activity-row-detail"], [1, "activity-bar"], [1, "activity-bar-fill"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn", 3, "click"], [1, "fa-solid", "fa-bell"], [1, "notification-badge"], [1, "user-context-menu"], [1, "user-menu-header"], [1, "user-info"], [1, "user-name"], [1, "user-email"], [1, "user-subtitle"], [1, "user-menu-divider"], [1, "user-menu-item", "theme-toggle-item", 3, "title"], [1, "user-menu-item", 3, "disabled", "danger", "color", "title"], [1, "user-menu-item", "theme-toggle-item", 3, "click", "title"], [1, "menu-label"], [1, "theme-toggle-track"], [1, "theme-toggle-thumb"], [1, "theme-toggle-icon"], [1, "user-menu-item", 3, "click", "title"], [1, "menu-shortcut"], [1, "search-popup-overlay", 3, "click"], [1, "mobile-nav-overlay", 3, "click"], [1, "mobile-nav-section-title"], [3, "navItemClick", "navItemDismiss", "app", "OverflowEnabled"], [3, "Activated"], ["title", "Notifications", 1, "mobile-nav-action", 3, "click"], [1, "notification-badge-mobile"], ["size", "large", 3, "text", "textColor", "logoColor", "logoGradient", "animation"], [1, "loading-reset-panel"], [1, "loading-version"], [1, "loading-reset-message"], [1, "fa-regular", "fa-clock"], [1, "loading-reset-hint"], [1, "loading-reset-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [3, "SettingsRequested"], ["Placeholder", "Search everything...", 3, "IsOpenChange", "ResultSelected", "SeeAllRequested", "PromoAccepted", "PromoDismissed", "IsOpen", "EnableGlobalShortcut", "ShowPromo", "PromoText"], [1, "pin-progress-modal"], ["size", "small", 3, "showText"], [1, "pin-progress-text"]], template: function ShellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 55, vars: 36, consts: [["mobileNavToggle", ""], ["searchInput", ""], ["mobileNavDrawer", ""], ["appAccessDialog", ""], ["shellSearchComposite", ""], ["omnibarPalette", ""], [1, "shell-container"], ["href", "#mj-main-content", 1, "mj-skip-link", 3, "click"], [1, "shell-header"], ["title", "MemberJunction", 1, "mj-logo"], ["title", "Menu", "aria-label", "Menu", "aria-controls", "mj-mobile-nav-drawer", 1, "hamburger-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars"], [1, "nav-bar-apps", "left-of-switcher"], [3, "activeApp", "isViewingSystemTab", "loadingAppId", "SwitcherStyle", "Provider"], [1, "desktop-nav", 3, "app", "OverflowEnabled"], [1, "desktop-nav"], [1, "spacer"], [1, "header-actions"], [1, "activity-wrap"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn"], [1, "nav-bar-apps", "left-of-user-menu"], [1, "user-menu"], [1, "avatar-btn", 3, "click"], ["alt", "", "aria-hidden", "true", 1, "avatar-img", 3, "src"], ["aria-hidden", "true", 1, "icon-fallback"], [1, "user-context-menu", 3, "menu-fade", "menu-slide"], [1, "search-popup-overlay"], [1, "search-popup"], [1, "search-popup-content", 3, "click"], ["TextField", "Name", "ValueField", "ID", "AriaLabel", "Search in", 1, "search-entity-dropdown", 3, "ngModelChange", "Data", "ngModel"], ["type", "text", "placeholder", "Search...", "aria-label", "Search", 1, "mj-input", "search-input", 3, "keydown.enter"], ["title", "Search", 1, "search-submit-btn", 3, "click"], [1, "fa-solid", "fa-search"], [1, "mobile-nav-overlay"], ["id", "mj-mobile-nav-drawer", 1, "mobile-nav-drawer"], [1, "mobile-nav-header"], ["aria-label", "Close navigation", 1, "close-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [1, "mobile-nav-content"], [1, "mobile-nav-records"], [1, "mobile-nav-footer"], ["title", "Search", 1, "mobile-nav-action", 3, "click"], ["title", "Notifications", 1, "mobile-nav-action"], ["id", "mj-main-content", "role", "main", "tabindex", "-1", 3, "firstResourceLoadComplete", "layoutInitError"], [1, "shell-loading"], [3, "result"], [3, "AppSelected", "KnowledgeSearchRequested", "ShowSearch"], ["Placeholder", "Search everything...", 3, "IsOpen", "EnableGlobalShortcut", "ShowPromo", "PromoText"], [1, "pin-progress-backdrop"], [1, "nav-bar-app-btn", 3, "active", "title", "--app-color"], [1, "nav-bar-app-btn", 3, "click", "dblclick", "title"], [3, "appSelected", "activeApp", "isViewingSystemTab", "loadingAppId", "SwitcherStyle", "Provider"], [1, "desktop-nav", 3, "navItemClick", "navItemDismiss", "app", "OverflowEnabled"], ["title", "Search everything", 1, "search-btn"], ["title", "Search everything", 1, "search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass"], [1, "search-btn-text", "desktop-only"], ["aria-hidden", "true", 1, "search-btn-kbd", "desktop-only"], [1, "shell-search-bar", "desktop-only"], ["Placeholder", "Search everything...", 3, "ResultSelected", "SearchSubmitted", "SeeAllRequested", "RecentRecordSelected", "PromoAccepted", "PromoDismissed", "ShowShortcutHint", "EnablePreview", "EnableRecent", "MaxPreviewResults", "ShowPromo", "PromoText"], ["title", "Search everything", 1, "search-btn", "search-btn-mobile", 3, "click"], ["title", "Activity", 1, "icon-btn", "desktop-only", "activity-btn", 3, "click"], [1, "fa-solid", "fa-wave-square"], [1, "activity-badge"], [1, "activity-drawer"], [1, "activity-drawer", 3, "click"], [1, "activity-drawer-head"], ["title", "Clear finished", 1, "activity-clear", 3, "click"], [1, "fa-solid", "fa-broom"], [1, "activity-list"], [1, "activity-row", 3, "is-error"], [1, "activity-row"], [1, "activity-row-icon"], [1, "activity-row-body"], [1, "activity-row-label"], [1, "activity-row-detail"], [1, "activity-bar"], [1, "activity-bar-fill"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn", 3, "click"], [1, "fa-solid", "fa-bell"], [1, "notification-badge"], [1, "user-context-menu"], [1, "user-menu-header"], [1, "user-info"], [1, "user-name"], [1, "user-email"], [1, "user-subtitle"], [1, "user-menu-divider"], [1, "user-menu-item", "theme-toggle-item", 3, "title"], [1, "user-menu-item", 3, "disabled", "danger", "color", "title"], [1, "user-menu-item", "theme-toggle-item", 3, "click", "title"], [1, "menu-label"], [1, "theme-toggle-track"], [1, "theme-toggle-thumb"], [1, "theme-toggle-icon"], [1, "user-menu-item", 3, "click", "title"], [1, "menu-shortcut"], [1, "search-popup-overlay", 3, "click"], [1, "mobile-nav-overlay", 3, "click"], [1, "mobile-nav-section-title"], [3, "navItemClick", "navItemDismiss", "app", "OverflowEnabled"], [3, "Activated"], ["title", "Notifications", 1, "mobile-nav-action", 3, "click"], [1, "notification-badge-mobile"], ["size", "large", 3, "text", "textColor", "logoColor", "logoGradient", "animation"], [1, "loading-reset-panel"], [1, "loading-version"], [1, "loading-reset-message"], [1, "fa-regular", "fa-clock"], [1, "loading-reset-hint"], [1, "loading-reset-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [3, "SettingsRequested"], ["Placeholder", "Search everything...", 3, "IsOpenChange", "ResultSelected", "SeeAllRequested", "PromoAccepted", "PromoDismissed", "IsOpen", "EnableGlobalShortcut", "ShowPromo", "PromoText"], [1, "pin-progress-modal"], ["size", "small", 3, "showText"], [1, "pin-progress-text"]], template: function ShellComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 6)(1, "a", 7);
             i0.ɵɵlistener("click", function ShellComponent_Template_a_click_1_listener($event) { return ctx.skipToMainContent($event); });
@@ -3715,7 +4119,7 @@ export class ShellComponent extends BaseAngularComponent {
             i0.ɵɵlistener("result", function ShellComponent_Template_mj_app_access_dialog_result_49_listener($event) { return ctx.onAppAccessDialogResult($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(51, "mj-command-palette", 46);
-            i0.ɵɵlistener("AppSelected", function ShellComponent_Template_mj_command_palette_AppSelected_51_listener($event) { return ctx.onAppSwitch($event); });
+            i0.ɵɵlistener("AppSelected", function ShellComponent_Template_mj_command_palette_AppSelected_51_listener($event) { return ctx.onAppSwitch($event); })("KnowledgeSearchRequested", function ShellComponent_Template_mj_command_palette_KnowledgeSearchRequested_51_listener($event) { return ctx.OnCommandPaletteSearch($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(52, ShellComponent_Conditional_52_Template, 2, 0, "mj-omnibar-palette");
             i0.ɵɵconditionalCreate(53, ShellComponent_Conditional_53_Template, 1, 4, "mj-search-overlay", 47);
@@ -3767,7 +4171,9 @@ export class ShellComponent extends BaseAngularComponent {
             i0.ɵɵclassProp("hide-tab-bar", !ctx.tabBarVisible);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading ? 48 : -1);
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ShowSearch", ctx.ShowSearchBar);
+            i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowSearchBar ? 52 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowSearchBar && !ctx.UseOmnibar ? 53 : -1);
@@ -3777,31 +4183,28 @@ export class ShellComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShellComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-shell', template: "<div class=\"shell-container\" [class.hidden]=\"loading\" [class.tabs-visible]=\"tabBarVisible\">\n  <!-- Skip link (WCAG 2.4.1) \u2014 MUST stay the first focusable element in the shell.\n       Consuming apps that added their own skip link should remove it on upgrade. -->\n  <a class=\"mj-skip-link\" href=\"#mj-main-content\" (click)=\"skipToMainContent($event)\">Skip to main content</a>\n\n  <!-- Header -->\n  <header class=\"shell-header\">\n    <!-- MJ Logo -->\n    <div class=\"mj-logo\" title=\"MemberJunction\"></div>\n\n    <!-- Mobile Hamburger Button -->\n    <button class=\"hamburger-btn\" #mobileNavToggle (click)=\"toggleMobileNav()\" title=\"Menu\"\n      aria-label=\"Menu\" [attr.aria-expanded]=\"mobileNavOpen\" aria-controls=\"mj-mobile-nav-drawer\">\n      <i class=\"fa-solid fa-bars\" aria-hidden=\"true\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0 && !appSwitchingLocked) {\n      <div class=\"nav-bar-apps left-of-switcher\">\n        @for (app of leftOfSwitcherApps; track app) {\n          <button\n            class=\"nav-bar-app-btn\"\n            [class.active]=\"IsActiveApp(app)\"\n            [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n            [title]=\"app.Name\"\n            [style.--app-color]=\"app.GetColor()\"\n            (click)=\"onNavBarAppClick(app, $event)\"\n            (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n            <i [class]=\"app.Icon\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- App Switcher (hidden for app-locked sessions, e.g. magic-link, and\n         removable per deployment via 'Shell.AppSwitcher.Enabled') -->\n    @if (!appSwitchingLocked && ShowAppSwitcher) {\n      <mj-app-switcher\n        [activeApp]=\"activeApp\"\n        [isViewingSystemTab]=\"isViewingSystemTab\"\n        [loadingAppId]=\"loadingAppId\"\n        [SwitcherStyle]=\"AppSwitcherStyle\"\n        [Provider]=\"Provider\"\n        (appSelected)=\"onAppSwitch($event)\">\n      </mj-app-switcher>\n    }\n\n    <!-- App Navigation (desktop only; removable per deployment via 'Shell.AppNav.Enabled') -->\n    @if (activeApp && ShowAppNav) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        [OverflowEnabled]=\"true\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n        <!-- Records style: persistent Records pill \u2014 projected into the nav\n             row's trailing slot so it sits pipe-separated right after the\n             app's own items, styled as a nav pill. Appears only while any\n             record is open; resumes the last-viewed record on click. -->\n        @if (RecordTabsStyle) {\n          <mj-records-hub-pill></mj-records-hub-pill>\n        }\n      </mj-app-nav>\n    } @else if (RecordTabsStyle) {\n      <!-- Reachability: when the app nav doesn't render (AppNav disabled per\n           deployment, or no active app), open records must STILL have a way\n           back \u2014 render the pill standalone in the header. -->\n      <mj-records-hub-pill class=\"desktop-nav\"></mj-records-hub-pill>\n    }\n\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n    <!-- Actions (activity, notifications, user menu) -->\n    <div class=\"header-actions\">\n      <!-- Universal Search \u2014 right-anchored with the action cluster, static width\n           (2026-07 review consensus: visible when space permits, never resizes).\n           Omnibar ON: a button styled as an input \u2014 clicking (or Ctrl/Cmd+K) opens\n           the modal palette; typing happens there. Collapses to the icon circle at\n           the mobile breakpoint.\n           Omnibar OFF: a REAL inline input (mj-search-composite) \u2014 results attach\n           beneath it as a suggest dropdown with a \"See all results\" footer. On\n           mobile the composite hides and an icon button opens the Spotlight\n           overlay instead (same slot, same collapse point). -->\n      @if (ShowSearchBar) {\n        @if (UseOmnibar) {\n          <button class=\"search-btn\" title=\"Search everything\"\n            [attr.aria-label]=\"'Search everything (' + OmnibarShortcutLabel + ')'\"\n            (click)=\"OnHeaderSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n            <span class=\"search-btn-text desktop-only\">Search everything</span>\n            <kbd class=\"search-btn-kbd desktop-only\" aria-hidden=\"true\">{{ OmnibarShortcutLabel }}</kbd>\n          </button>\n        } @else {\n          <div class=\"shell-search-bar desktop-only\">\n            <mj-search-composite\n              #shellSearchComposite\n              Placeholder=\"Search everything...\"\n              [ShowShortcutHint]=\"true\"\n              [EnablePreview]=\"ShowSearchPreview\"\n              [EnableRecent]=\"true\"\n              [MaxPreviewResults]=\"8\"\n              [ShowPromo]=\"ShowOmnibarPromo\"\n              [PromoText]=\"OmnibarPromoText\"\n              (ResultSelected)=\"OnSearchResultSelected($event)\"\n              (SearchSubmitted)=\"OnSearchSubmitted($event)\"\n              (SeeAllRequested)=\"OnSeeAllSearch($event)\"\n              (RecentRecordSelected)=\"OnSearchResultSelected($event)\"\n              (PromoAccepted)=\"OnOmnibarPromoAccepted($event)\"\n              (PromoDismissed)=\"OnOmnibarPromoDismissed()\">\n            </mj-search-composite>\n          </div>\n          <button class=\"search-btn search-btn-mobile\" title=\"Search everything\"\n            [attr.aria-label]=\"'Search everything (' + OmnibarShortcutLabel + ')'\"\n            (click)=\"OnHeaderSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n          </button>\n        }\n      }\n      <!-- Global Activity indicator -->\n      @if (activityItems.length > 0) {\n        <div class=\"activity-wrap\">\n          <button class=\"icon-btn desktop-only activity-btn\" title=\"Activity\" (click)=\"toggleActivity($event)\">\n            <i class=\"fa-solid fa-wave-square\" [class.activity-pulse]=\"activityRunningCount > 0\"></i>\n            @if (activityRunningCount > 0) {\n              <span class=\"activity-badge\">{{ activityRunningCount }}</span>\n            }\n          </button>\n          @if (activityOpen) {\n            <div class=\"activity-drawer\" (click)=\"$event.stopPropagation()\">\n              <div class=\"activity-drawer-head\">\n                <span>Activity</span>\n                <button class=\"activity-clear\" (click)=\"clearFinishedActivity()\" title=\"Clear finished\">\n                  <i class=\"fa-solid fa-broom\"></i>\n                </button>\n              </div>\n              <div class=\"activity-list\">\n                @for (a of activityItems; track a.ID) {\n                  <div class=\"activity-row\" [class.is-error]=\"a.Status === 'error'\">\n                    <i class=\"activity-row-icon\"\n                       [class]=\"a.Status === 'running' ? 'fa-solid fa-spinner fa-spin'\n                              : a.Status === 'error' ? 'fa-solid fa-circle-exclamation'\n                              : 'fa-solid fa-circle-check'\"></i>\n                    <div class=\"activity-row-body\">\n                      <div class=\"activity-row-label\">{{ a.Label }}</div>\n                      @if (a.Detail) { <div class=\"activity-row-detail\">{{ a.Detail }}</div> }\n                      @if (a.Status === 'running' && a.Progress != null) {\n                        <div class=\"activity-bar\"><div class=\"activity-bar-fill\" [style.width.%]=\"a.Progress\"></div></div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (ShowNotifications) {\n        <button class=\"icon-btn desktop-only notification-btn\" title=\"Notifications\" (click)=\"showNotifications()\">\n          <i class=\"fa-solid fa-bell\"></i>\n          @if (unreadNotificationCount > 0) {\n            <span class=\"notification-badge\">\n              {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n            </span>\n          }\n        </button>\n      }\n      <!-- Nav Bar Apps: Left of User Menu -->\n      @if (leftOfUserMenuApps.length > 0) {\n        <div class=\"nav-bar-apps left-of-user-menu\">\n          @for (app of leftOfUserMenuApps; track app) {\n            <button\n              class=\"nav-bar-app-btn\"\n              [class.active]=\"IsActiveApp(app)\"\n              [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n              [title]=\"app.Name\"\n              [style.--app-color]=\"app.GetColor()\"\n              (click)=\"onNavBarAppClick(app, $event)\"\n              (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n              <i [class]=\"app.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"user-menu\">\n        <button class=\"avatar-btn\" (click)=\"toggleUserMenu($event)\"\n          [attr.aria-label]=\"avatarAriaLabel\"\n          [attr.aria-expanded]=\"userMenuVisible\">\n          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"\" aria-hidden=\"true\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\" aria-hidden=\"true\">\n              <i [class]=\"userIconClass || 'fa-solid fa-user'\"></i>\n            </div>\n          }\n        </button>\n        <!-- User Context Menu (Dynamic) -->\n        @if (userMenuVisible) {\n          <div class=\"user-context-menu\"\n            [class.menu-fade]=\"getUserMenuOptions()?.animationStyle === 'fade'\"\n            [class.menu-slide]=\"getUserMenuOptions()?.animationStyle === 'slide'\">\n            <!-- User Header -->\n            @if (getUserMenuOptions()?.showUserName) {\n              <div class=\"user-menu-header\">\n                <div class=\"user-info\">\n                  <span class=\"user-name\">{{ getUserDisplayInfo()?.name || userName }}</span>\n                  @if (getUserMenuOptions()?.showUserEmail && getUserDisplayInfo()?.email) {\n                    <span class=\"user-email\">\n                      {{ getUserDisplayInfo()?.email }}\n                    </span>\n                  }\n                  @if (getUserDisplayInfo()?.subtitle) {\n                    <span class=\"user-subtitle\">{{ getUserDisplayInfo()?.subtitle }}</span>\n                  }\n                </div>\n              </div>\n              <div class=\"user-menu-divider\"></div>\n            }\n            <!-- Dynamic Menu Items -->\n            @for (element of userMenuElements; track element) {\n              <!-- Divider -->\n              @if (isMenuDivider(element)) {\n                <div class=\"user-menu-divider\"></div>\n              }\n              <!-- Menu Item -->\n              @if (!isMenuDivider(element)) {\n                @if (asMenuItem(element); as item) {\n                  @if (item.id === 'toggle-theme') {\n                    <div class=\"user-menu-item theme-toggle-item\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      <div class=\"theme-toggle-track\" [class.dark]=\"IsDarkMode\">\n                        <div class=\"theme-toggle-thumb\">\n                          <i [class]=\"IsDarkMode ? 'fa-solid fa-moon' : 'fa-solid fa-sun'\" class=\"theme-toggle-icon\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <div class=\"user-menu-item\"\n                      [class.disabled]=\"!item.enabled\"\n                      [class.danger]=\"item.cssClass === 'danger'\"\n                      [style.color]=\"item.color || null\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"item.enabled && onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      @if (item.shortcut) {\n                        <span class=\"menu-shortcut\">{{ item.shortcut }}</span>\n                      }\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </header>\n\n  <!-- Search Popup -->\n  @if (isSearchOpen) {\n    <div class=\"search-popup-overlay\" (click)=\"closeSearch()\"></div>\n  }\n  <div class=\"search-popup\" [class.open]=\"isSearchOpen\" [attr.inert]=\"isSearchOpen ? null : ''\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <mj-dropdown\n        [Data]=\"searchableEntities\"\n        TextField=\"Name\"\n        ValueField=\"ID\"\n        AriaLabel=\"Search in\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </mj-dropdown>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"Search...\"\n        aria-label=\"Search\"\n        class=\"mj-input search-input\"\n        (keydown.enter)=\"onSearch($event)\"\n        />\n      <button class=\"search-submit-btn\" (click)=\"onSearch($event)\" title=\"Search\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Mobile Navigation Drawer -->\n  @if (mobileNavOpen) {\n    <div class=\"mobile-nav-overlay\" (click)=\"closeMobileNav()\"></div>\n  }\n  <div class=\"mobile-nav-drawer\" id=\"mj-mobile-nav-drawer\" #mobileNavDrawer\n    [class.open]=\"mobileNavOpen\" [attr.inert]=\"mobileNavOpen ? null : ''\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\" aria-label=\"Close navigation\">\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    @if (activeApp && ShowAppNav) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          [OverflowEnabled]=\"false\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\n      </div>\n    }\n    <!-- Records style: the desktop pill lives in the (mobile-hidden) app nav,\n         so the drawer carries its own entry \u2014 without it, open records are\n         unreachable on mobile except by re-opening them. Resumes the\n         last-viewed record and closes the drawer. -->\n    @if (RecordTabsStyle) {\n      <div class=\"mobile-nav-records\">\n        <mj-records-hub-pill (Activated)=\"closeMobileNav()\"></mj-records-hub-pill>\n      </div>\n    }\n    <div class=\"mobile-nav-footer\">\n      <button class=\"mobile-nav-action\" title=\"Search\" (click)=\"toggleSearch(); closeMobileNav()\">\n        <i class=\"fa-solid fa-search\"></i>\n        <span>Search</span>\n      </button>\n      @if (ShowNotifications) {\n        <button class=\"mobile-nav-action\" title=\"Notifications\" (click)=\"showNotifications(); closeMobileNav()\">\n          <i class=\"fa-solid fa-bell\"></i>\n          <span>Notifications</span>\n          @if (unreadNotificationCount > 0) {\n            <span class=\"notification-badge-mobile\">\n              {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\n    id=\"mj-main-content\"\n    role=\"main\"\n    tabindex=\"-1\"\n    [class.hide-tab-bar]=\"!tabBarVisible\"\n    (firstResourceLoadComplete)=\"onFirstResourceLoadComplete()\"\n    (layoutInitError)=\"handleLayoutError()\">\n  </mj-tab-container>\n</div>\n\n<!-- Loading State -->\n@if (loading) {\n  <div class=\"shell-loading\">\n    <mj-loading\n      [text]=\"currentLoadingText\"\n      [textColor]=\"currentLoadingTextColor\"\n      [logoColor]=\"currentLoadingColor\"\n      [logoGradient]=\"currentLoadingGradient\"\n      [animation]=\"currentLoadingAnimation\"\n      size=\"large\">\n    </mj-loading>\n    @if (ShowResetOption) {\n      <div class=\"loading-reset-panel\">\n        <p class=\"loading-reset-message\">\n          <i class=\"fa-regular fa-clock\"></i>\n          Taking longer than expected\n        </p>\n        <p class=\"loading-reset-hint\">\n          This can happen after updates or due to cached data issues.\n        </p>\n        <button class=\"loading-reset-btn\" (click)=\"ResetApplication()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Reset\n        </button>\n      </div>\n    } @else {\n      <div class=\"loading-version\">MemberJunction \u00B7 v{{ MJVersion }}</div>\n    }\n  </div>\n}\n\n<!-- App Access Error Dialog -->\n<mj-app-access-dialog\n  #appAccessDialog\n  (result)=\"onAppAccessDialogResult($event)\">\n</mj-app-access-dialog>\n\n<!-- Command Palette -->\n<mj-command-palette (AppSelected)=\"onAppSwitch($event)\"></mj-command-palette>\n\n<!-- Unified command palette (Shell.Omnibar.Enabled). Rendered only while the search bar is:\n     when Instance Config or the host's chrome policy hides search, the palette must not\n     remain reachable through Ctrl/Cmd+K. -->\n@if (ShowSearchBar) {\n  <mj-omnibar-palette #omnibarPalette (SettingsRequested)=\"OnPaletteSettingsRequested()\"></mj-omnibar-palette>\n}\n\n<!-- Legacy universal search as a Spotlight-style overlay \u2014 omnibar-off MOBILE only\n     (on desktop the inline header composite owns the experience; this opens from\n     the mobile icon or Ctrl/Cmd+K when the composite isn't visible).\n     The shell owns the Ctrl/Cmd+K chord, so the overlay's own global shortcut is off. -->\n@if (ShowSearchBar && !UseOmnibar) {\n  <mj-search-overlay\n    [(IsOpen)]=\"LegacySearchOpen\"\n    Placeholder=\"Search everything...\"\n    [EnableGlobalShortcut]=\"false\"\n    [ShowPromo]=\"ShowOmnibarPromo\"\n    [PromoText]=\"OmnibarPromoText\"\n    (ResultSelected)=\"OnOverlayResultSelected($event)\"\n    (SeeAllRequested)=\"OnOverlaySeeAll($event)\"\n    (PromoAccepted)=\"OnOmnibarPromoAccepted($event)\"\n    (PromoDismissed)=\"OnOmnibarPromoDismissed()\">\n  </mj-search-overlay>\n}\n\n<!-- Pin Progress Overlay -->\n@if (PinProgressVisible) {\n  <div class=\"pin-progress-backdrop\">\n    <div class=\"pin-progress-modal\">\n      <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n      <span class=\"pin-progress-text\">{{ PinProgressText }}</span>\n    </div>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design tokens for theme switching & white-labeling.\n   Geometry follows --mj-logo-width/-height so a differently-shaped org mark fits;\n   --mj-logo-plate-bg is set by the theme engine only when a single-variant logo needs\n   a legibility plate in the mode it wasn't designed for (org-theming Phase 4). */\n.mj-logo {\n  width: var(--mj-logo-width, 32px);\n  height: var(--mj-logo-height, 18px);\n  background-image: var(--mj-logo-mark);\n  background-color: var(--mj-logo-plate-bg, transparent);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: var(--mj-radius-sm, 4px);\n  flex-shrink: 0;\n}\n\n/* Skip link (WCAG 2.4.1) \u2014 off-screen until focused, then pinned over the header.\n   It is the first focusable element in the shell; consuming apps should drop their\n   own skip link on upgrade rather than stacking a second one in front of this. */\n.mj-skip-link {\n  position: absolute;\n  top: var(--mj-space-2);\n  left: var(--mj-space-2);\n  z-index: 100000;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  text-decoration: none;\n  transform: translateY(-200%);\n  transition: transform var(--mj-transition-fast);\n}\n.mj-skip-link:focus,\n.mj-skip-link:focus-visible {\n  transform: translateY(0);\n  outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n  outline-offset: var(--mj-ring-offset);\n}\n\n/* The main landmark is also the skip-link target; focusing it programmatically must\n   not paint a ring on a region the user did not tab to. */\nmj-tab-container:focus {\n  outline: none;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Hide shell container while loading - allows tab container to render and load\n   first resource in background while shell loading indicator is visible */\n.shell-container.hidden {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n/* Hide Golden Layout tab headers when only one tab \u2014 scoped to the MAIN\n   region: the RECORDS region is a separate Golden Layout whose tab strip is\n   its whole point (switching between open records) and must never be hidden\n   by the main bar's visibility policy. */\nmj-tab-container.hide-tab-bar ::ng-deep .main-region .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .main-region .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n/* Adjust content area height when tabs hidden */\nmj-tab-container.hide-tab-bar ::ng-deep .main-region .lm_content {\n  height: 100% !important;\n}\n\n/* Ensure smooth transitions */\nmj-tab-container ::ng-deep .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--mj-space-4);\n  gap: var(--mj-space-4);\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  /* Creates a stacking context so children (search bar z-index: 99999, dropdown)\n     are contained within this level. Modal overlays (z-index: 1000+) sit above. */\n  position: relative;\n  z-index: 500;\n}\n\n/* Nav Bar Apps - permanent app icons in the header */\n.nav-bar-apps {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n}\n\n.nav-bar-apps.left-of-switcher {\n  /* No extra margin - header gap handles spacing */\n  /* This prevents the app switcher from shifting when icons are hidden */\n}\n\n.nav-bar-apps.left-of-user-menu {\n  margin-right: var(--mj-space-2);\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-lg);\n  transition: all var(--mj-transition-fast);\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* Active = brand-primary (matches nav pills + switcher items); the app's\n   metadata color is reserved for identity accents, never state.\n   Shared active-tint recipe. */\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.nav-bar-app-btn i {\n  transition: transform var(--mj-transition-fast);\n  margin-top: var(--mj-space-0-5); /* Align with app switcher icon */\n}\n\n.nav-bar-app-btn:hover i {\n  transform: scale(1.1);\n}\n\n.spacer {\n  flex: 1;\n}\n\n/* Priority+ overflow support: on desktop the app nav owns the header's free\n   middle space (so it knows exactly how much room its items have) and the\n   spacer stands down. On mobile the nav is display:none'd, so the spacer's\n   flex: 1 keeps the action cluster right-aligned. When the nav isn't rendered\n   at all (app-locked sessions, Shell.AppNav.Enabled off), the sibling selector\n   doesn't match and the spacer behaves as before. */\n@media (min-width: 769px) {\n  mj-app-nav.desktop-nav {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n  mj-app-nav.desktop-nav + .spacer {\n    flex: 0 0 0px;\n  }\n}\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.icon-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-lg);\n  transition: background var(--mj-transition-fast);\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Keyboard focus parity for all header controls (the search bar already has\n   its own ring at .search-btn:focus-visible). */\n.nav-bar-app-btn:focus-visible,\n.icon-btn:focus-visible,\n.hamburger-btn:focus-visible,\n.user-menu .avatar-btn:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n/* Universal search: a static-width bar styled as an input, anchored on the\n   right with the action cluster. Deliberately NOT resizable on hover/focus \u2014\n   chrome that shifts on interaction was rejected in the 2026-07 review. It's a\n   button (typing happens in the overlay it opens), so no focus/caret styling. */\n.search-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  width: 260px;\n  height: 36px;\n  padding: 0 var(--mj-space-2-5) 0 var(--mj-space-3-5);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-family: inherit;\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.search-btn:hover {\n  border-color: var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.search-btn:focus-visible {\n  outline: none;\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* Omnibar-off mobile trigger: hidden on desktop (the inline composite renders\n   instead); the 768px block flips it on as the icon circle. */\n.search-btn-mobile {\n  display: none;\n}\n\n/* Omnibar-off desktop: the inline search composite, same slot + width as the\n   omnibar bar so the opt-in toggle doesn't move the header. */\n.shell-search-bar {\n  position: relative;\n  width: 260px;\n  z-index: 99999;\n}\n\n/* The suggest dropdown needs more width than its 260px anchor. Pin it to the\n   anchor's right edge and let it grow leftward \u2014 the bar is right-anchored, so\n   leftward growth stays on screen. */\n.shell-search-bar ::ng-deep .suggest-dropdown {\n  left: auto;\n  right: 0;\n  width: min(560px, calc(100vw - var(--mj-space-6)));\n}\n\n.search-btn i {\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.search-btn .search-btn-text {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* kbd chip: deliberately mirrors the omnibar palette's .ob-kbd chrome\n   (10.5px / 5px radius / bottom-heavy border) so the affordance and the\n   surface it summons read as one system. */\n.search-btn .search-btn-kbd {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 1.5px var(--mj-space-1-5);\n}\n\n/* Notification button with badge */\n.notification-btn {\n  position: relative;\n}\n\n.notification-badge {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 var(--mj-space-1);\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: var(--mj-leading-none);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.user-menu {\n  position: relative;\n}\n\n.user-menu .avatar-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow var(--mj-transition-fast), transform var(--mj-transition-fast);\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu .avatar-btn:hover {\n  transform: scale(1.05);\n}\n\n/* Icon fallback styling - shows gray circle with icon */\n.user-menu .avatar-btn .icon-fallback {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color var(--mj-transition-fast);\n}\n\n.user-menu .avatar-btn:hover .icon-fallback {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu .avatar-btn .icon-fallback i {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n}\n\n/* Avatar image - replaces the gray circle entirely */\n.user-menu .avatar-btn .avatar-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-0-5);\n}\n\n.user-menu-header .user-name {\n  font-weight: var(--mj-font-semibold);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header .user-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: var(--mj-space-2);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  /* Never wider than the viewport, never taller than what is left below the 60px header:\n     a short window (or a phone) used to leave the bottom items unreachable, because the\n     menu had no height limit and clipped instead of scrolling. */\n  max-width: min(360px, calc(100vw - 2 * var(--mj-space-4)));\n  max-height: calc(100vh - 60px - 3 * var(--mj-space-2));\n  max-height: calc(100dvh - 60px - 3 * var(--mj-space-2));\n  z-index: 10000;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background var(--mj-transition-fast);\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n}\n\n.user-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: var(--mj-space-1) 0;\n}\n\n/* Menu item disabled state */\n.user-menu-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled:hover {\n  background: transparent;\n}\n\n/* Theme Toggle Switch */\n.theme-toggle-item {\n  cursor: pointer;\n}\n\n.theme-toggle-track {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background var(--mj-transition-base);\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform var(--mj-transition-base);\n}\n\n.theme-toggle-track.dark .theme-toggle-thumb {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark .theme-toggle-icon {\n  color: var(--mj-text-inverse);\n}\n\n/* Menu shortcut hint */\n.user-menu-item .menu-shortcut {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n/* Menu animations */\n.user-context-menu.menu-fade {\n  animation: menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide {\n  animation: menuSlideIn 0.2s ease-out;\n}\n\n@keyframes menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n.loading-version {\n  margin-top: var(--mj-space-8, 24px);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.4px;\n  opacity: 0.6;\n  user-select: none;\n}\n\n/* Loading Recovery Reset Panel */\n.loading-reset-panel {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message i {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn i {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Hamburger button - hidden on desktop */\n.hamburger-btn {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xl);\n  transition: background var(--mj-transition-fast);\n}\n.hamburger-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Mobile Navigation Overlay */\n.mobile-nav-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\n/* `visibility` is transitioned alongside `transform` so the closed drawer is genuinely\n   hidden \u2014 off-screen alone leaves its controls hit-testable and visible to\n   checkVisibility(), which is what let 6 of its 8 controls keep taking focus. The\n   delay holds visibility through the slide-out, then drops it; opening is instant\n   (0s) so the drawer is present for the whole slide-in. `inert` (set in the template)\n   is the actual focus guard; this keeps the CSS from disagreeing with it. */\n.mobile-nav-drawer {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--mj-transition-slow), visibility 0s linear 300ms;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n  visibility: visible;\n  transition: transform var(--mj-transition-slow), visibility 0s linear 0s;\n}\n\n/* Reduced motion: no slide, so nothing to hold visibility open for. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-nav-drawer,\n  .mobile-nav-drawer.open {\n    transition: none;\n  }\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--mj-space-4) var(--mj-space-5);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header span {\n  font-weight: var(--mj-font-semibold);\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header .close-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-lg);\n  transition: background var(--mj-transition-fast);\n}\n.mobile-nav-header .close-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--mj-space-4) 0;\n}\n\n.mobile-nav-section-title {\n  padding: var(--mj-space-2) var(--mj-space-5);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Records entry in the mobile drawer (records-style record opens) \u2014\n   the desktop pill lives in the mobile-hidden app nav, so the drawer\n   carries its own touch-friendly instance. */\n.mobile-nav-records {\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-default);\n}\n.mobile-nav-records .records-pill {\n  width: 100%;\n  min-height: 48px; /* Touch-target parity with drawer nav items */\n  justify-content: flex-start;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n}\n\n.mobile-nav-action {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  transition: background var(--mj-transition-fast);\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action i {\n  font-size: var(--mj-text-base);\n  width: 20px;\n  text-align: center;\n}\n\n/* Mobile Responsive Styles */\n@media (max-width: 768px) {\n  .hamburger-btn {\n    display: flex;\n  }\n\n  .desktop-nav {\n    display: none !important;\n  }\n\n  .desktop-only {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay {\n    display: block;\n  }\n\n  .mobile-nav-drawer {\n    display: flex;\n  }\n\n  .shell-header {\n    padding: 0 var(--mj-space-3);\n    gap: var(--mj-space-2);\n  }\n\n  /* Keep the right-edge cluster (chat/nav-bar app icons + avatar) on one row.\n     Without pinning this, the icons can wrap and the avatar drops onto a second\n     line, stacking under the chat icon. */\n  .header-actions {\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n  .header-actions .user-menu,\n  .header-actions .nav-bar-apps,\n  .header-actions .search-btn {\n    flex-shrink: 0;\n  }\n\n  /* Search bar collapses to the icon-only circle on small viewports \u2014\n     the placeholder text + kbd chip are already hidden via .desktop-only.\n     The omnibar-off mobile trigger (.search-btn-mobile) becomes visible here;\n     its .desktop-only composite sibling is hidden by the rule above. */\n  .search-btn {\n    display: flex;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    justify-content: center;\n    border: none;\n    border-radius: 50%;\n    background: none;\n  }\n  .search-btn i {\n    font-size: var(--mj-text-lg);\n  }\n  .search-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border: none;\n  }\n}\n\n/* Settings Full-Screen Window Styles */\n::ng-deep .settings-fullscreen-window {\n  /* Remove window chrome for full-screen feel */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: var(--mj-text-lg);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: var(--mj-space-1);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--mj-radius-md);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n/* Hide minimize/maximize buttons - only show close */\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n/* Universal search is a right-anchored bar affordance in header-actions\n   (2026-07 design review round 2): both experiences still open as overlays \u2014\n   the bar is a trigger, not an inline input. Icon-only under 768px. */\n\n/* ========================================\n   SEARCH POPUP\n   ======================================== */\n\n.search-popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n  animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup {\n  position: absolute;\n  top: 60px; /* Below header */\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  visibility: hidden;\n  transition: opacity var(--mj-transition-base), transform var(--mj-transition-base), visibility 0s linear 200ms;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n  visibility: visible;\n  transition: opacity var(--mj-transition-base), transform var(--mj-transition-base), visibility 0s linear 0s;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .search-popup,\n  .search-popup.open {\n    transition: none;\n  }\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3);\n}\n\n.search-entity-dropdown {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mj-text-base);\n  transition: background var(--mj-transition-fast);\n  flex-shrink: 0;\n}\n\n.search-submit-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Mobile notification badge */\n.notification-badge-mobile {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: var(--mj-leading-none);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* Mobile-specific search popup adjustments */\n@media (max-width: 768px) {\n  .search-popup {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown {\n    width: 100%;\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n   PIN PROGRESS OVERLAY\n   ======================================== */\n.pin-progress-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: pinBackdropIn 0.2s ease;\n}\n\n@keyframes pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: var(--mj-space-7) var(--mj-space-10);\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-4);\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: pinModalIn 0.25s ease;\n}\n\n@keyframes pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}\n/* ============================================================\n   Global Activity indicator (P3)\n   ============================================================ */\n.activity-wrap { position: relative; display: inline-flex; }\n.activity-btn { position: relative; }\n.activity-btn .activity-pulse { color: var(--mj-brand-primary); }\n.activity-badge {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 var(--mj-space-1);\n    border-radius: var(--mj-radius-md);\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: var(--mj-font-bold);\n    line-height: 16px;\n    text-align: center;\n}\n.activity-drawer {\n    position: absolute;\n    top: calc(100% + 8px);\n    right: 0;\n    width: 320px;\n    max-height: 420px;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface-elevated);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    box-shadow: 0 8px 28px color-mix(in srgb, var(--mj-text-primary) 18%, transparent);\n    z-index: 1000;\n    overflow: hidden;\n}\n.activity-drawer-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--mj-space-2-5) var(--mj-space-3);\n    font-weight: var(--mj-font-bold);\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n.activity-clear {\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.8rem;\n    padding: var(--mj-space-1) var(--mj-space-1-5);\n    border-radius: var(--mj-radius-md);\n}\n.activity-clear:hover { color: var(--mj-text-primary); background: var(--mj-bg-surface-hover); }\n.activity-list { overflow-y: auto; padding: var(--mj-space-1-5); }\n.activity-row {\n    display: flex;\n    gap: var(--mj-space-2-5);\n    padding: var(--mj-space-2);\n    border-radius: var(--mj-radius-md);\n}\n.activity-row:hover { background: var(--mj-bg-surface-hover); }\n.activity-row-icon { margin-top: var(--mj-space-0-5); color: var(--mj-brand-primary); font-size: 0.85rem; }\n.activity-row.is-error .activity-row-icon { color: var(--mj-status-error); }\n.activity-row-body { flex: 1; min-width: 0; }\n.activity-row-label { font-size: 0.82rem; font-weight: var(--mj-font-semibold); color: var(--mj-text-primary); }\n.activity-row-detail { font-size: 0.72rem; color: var(--mj-text-muted); margin-top: var(--mj-space-px); }\n.activity-bar {\n    margin-top: var(--mj-space-1-5);\n    height: 4px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 2px;\n    overflow: hidden;\n}\n.activity-bar-fill { height: 100%; background: var(--mj-brand-primary); transition: width var(--mj-transition-slow); }\n\n"] }]
-    }], () => [{ type: i1.ApplicationManager }, { type: i1.WorkspaceStateManager }, { type: i1.GoldenLayoutManager }, { type: i1.TabService }, { type: i2.NavigationService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.MJAuthBase }, { type: i0.ChangeDetectorRef }, { type: i5.UserAvatarService }, { type: i6.UserSharingCenterDialogService }, { type: i7.AboutDialogService }, { type: i8.ProfileDialogService }, { type: i0.ViewContainerRef }, { type: i2.TitleService }, { type: i2.DeveloperModeService }, { type: i9.StartupValidationService }, { type: i10.CommandPaletteService }, { type: i2.ThemeService }, { type: i2.HomeAppPinService }, { type: i11.FileOpenService }, { type: i12.FeedbackDialogService }, { type: i12.FeedbackService }, { type: i2.ActivityService }], { searchInput: [{
+        args: [{ standalone: false, selector: 'mj-shell', template: "<div class=\"shell-container\" [class.hidden]=\"loading\" [class.tabs-visible]=\"tabBarVisible\">\n  <!-- Skip link (WCAG 2.4.1) \u2014 MUST stay the first focusable element in the shell.\n       Consuming apps that added their own skip link should remove it on upgrade. -->\n  <a class=\"mj-skip-link\" href=\"#mj-main-content\" (click)=\"skipToMainContent($event)\">Skip to main content</a>\n\n  <!-- Header -->\n  <header class=\"shell-header\">\n    <!-- MJ Logo -->\n    <div class=\"mj-logo\" title=\"MemberJunction\"></div>\n\n    <!-- Mobile Hamburger Button -->\n    <button class=\"hamburger-btn\" #mobileNavToggle (click)=\"toggleMobileNav()\" title=\"Menu\"\n      aria-label=\"Menu\" [attr.aria-expanded]=\"mobileNavOpen\" aria-controls=\"mj-mobile-nav-drawer\">\n      <i class=\"fa-solid fa-bars\" aria-hidden=\"true\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0 && !appSwitchingLocked) {\n      <div class=\"nav-bar-apps left-of-switcher\">\n        @for (app of leftOfSwitcherApps; track app) {\n          <button\n            class=\"nav-bar-app-btn\"\n            [class.active]=\"IsActiveApp(app)\"\n            [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n            [title]=\"app.Name\"\n            [style.--app-color]=\"app.GetColor()\"\n            (click)=\"onNavBarAppClick(app, $event)\"\n            (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n            <i [class]=\"app.Icon\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- App Switcher (hidden for app-locked sessions, e.g. magic-link, and\n         removable per deployment via 'Shell.AppSwitcher.Enabled') -->\n    @if (!appSwitchingLocked && ShowAppSwitcher) {\n      <mj-app-switcher\n        [activeApp]=\"activeApp\"\n        [isViewingSystemTab]=\"isViewingSystemTab\"\n        [loadingAppId]=\"loadingAppId\"\n        [SwitcherStyle]=\"AppSwitcherStyle\"\n        [Provider]=\"Provider\"\n        (appSelected)=\"onAppSwitch($event)\">\n      </mj-app-switcher>\n    }\n\n    <!-- App Navigation (desktop only; removable per deployment via 'Shell.AppNav.Enabled') -->\n    @if (activeApp && ShowAppNav) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        [OverflowEnabled]=\"true\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n        <!-- Records style: persistent Records pill \u2014 projected into the nav\n             row's trailing slot so it sits pipe-separated right after the\n             app's own items, styled as a nav pill. Appears only while any\n             record is open; resumes the last-viewed record on click. -->\n        @if (RecordTabsStyle) {\n          <mj-records-hub-pill></mj-records-hub-pill>\n        }\n      </mj-app-nav>\n    } @else if (RecordTabsStyle) {\n      <!-- Reachability: when the app nav doesn't render (AppNav disabled per\n           deployment, or no active app), open records must STILL have a way\n           back \u2014 render the pill standalone in the header. -->\n      <mj-records-hub-pill class=\"desktop-nav\"></mj-records-hub-pill>\n    }\n\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n    <!-- Actions (activity, notifications, user menu) -->\n    <div class=\"header-actions\">\n      <!-- Universal Search \u2014 right-anchored with the action cluster, static width\n           (2026-07 review consensus: visible when space permits, never resizes).\n           Omnibar ON: a button styled as an input \u2014 clicking (or Ctrl/Cmd+K) opens\n           the modal palette; typing happens there. Collapses to the icon circle at\n           the mobile breakpoint.\n           Omnibar OFF: a REAL inline input (mj-search-composite) \u2014 results attach\n           beneath it as a suggest dropdown with a \"See all results\" footer. On\n           mobile the composite hides and an icon button opens the Spotlight\n           overlay instead (same slot, same collapse point). -->\n      @if (ShowSearchBar) {\n        @if (UseOmnibar) {\n          <button class=\"search-btn\" title=\"Search everything\"\n            [attr.aria-label]=\"'Search everything (' + OmnibarShortcutLabel + ')'\"\n            (click)=\"OnHeaderSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n            <span class=\"search-btn-text desktop-only\">Search everything</span>\n            <kbd class=\"search-btn-kbd desktop-only\" aria-hidden=\"true\">{{ OmnibarShortcutLabel }}</kbd>\n          </button>\n        } @else {\n          <div class=\"shell-search-bar desktop-only\">\n            <mj-search-composite\n              #shellSearchComposite\n              Placeholder=\"Search everything...\"\n              [ShowShortcutHint]=\"true\"\n              [EnablePreview]=\"ShowSearchPreview\"\n              [EnableRecent]=\"true\"\n              [MaxPreviewResults]=\"8\"\n              [ShowPromo]=\"ShowOmnibarPromo\"\n              [PromoText]=\"OmnibarPromoText\"\n              (ResultSelected)=\"OnSearchResultSelected($event)\"\n              (SearchSubmitted)=\"OnSearchSubmitted($event)\"\n              (SeeAllRequested)=\"OnSeeAllSearch($event)\"\n              (RecentRecordSelected)=\"OnSearchResultSelected($event)\"\n              (PromoAccepted)=\"OnOmnibarPromoAccepted($event)\"\n              (PromoDismissed)=\"OnOmnibarPromoDismissed()\">\n            </mj-search-composite>\n          </div>\n          <button class=\"search-btn search-btn-mobile\" title=\"Search everything\"\n            [attr.aria-label]=\"'Search everything (' + OmnibarShortcutLabel + ')'\"\n            (click)=\"OnHeaderSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n          </button>\n        }\n      }\n      <!-- Global Activity indicator -->\n      @if (activityItems.length > 0) {\n        <div class=\"activity-wrap\">\n          <button class=\"icon-btn desktop-only activity-btn\" title=\"Activity\" (click)=\"toggleActivity($event)\">\n            <i class=\"fa-solid fa-wave-square\" [class.activity-pulse]=\"activityRunningCount > 0\"></i>\n            @if (activityRunningCount > 0) {\n              <span class=\"activity-badge\">{{ activityRunningCount }}</span>\n            }\n          </button>\n          @if (activityOpen) {\n            <div class=\"activity-drawer\" (click)=\"$event.stopPropagation()\">\n              <div class=\"activity-drawer-head\">\n                <span>Activity</span>\n                <button class=\"activity-clear\" (click)=\"clearFinishedActivity()\" title=\"Clear finished\">\n                  <i class=\"fa-solid fa-broom\"></i>\n                </button>\n              </div>\n              <div class=\"activity-list\">\n                @for (a of activityItems; track a.ID) {\n                  <div class=\"activity-row\" [class.is-error]=\"a.Status === 'error'\">\n                    <i class=\"activity-row-icon\"\n                       [class]=\"a.Status === 'running' ? 'fa-solid fa-spinner fa-spin'\n                              : a.Status === 'error' ? 'fa-solid fa-circle-exclamation'\n                              : 'fa-solid fa-circle-check'\"></i>\n                    <div class=\"activity-row-body\">\n                      <div class=\"activity-row-label\">{{ a.Label }}</div>\n                      @if (a.Detail) { <div class=\"activity-row-detail\">{{ a.Detail }}</div> }\n                      @if (a.Status === 'running' && a.Progress != null) {\n                        <div class=\"activity-bar\"><div class=\"activity-bar-fill\" [style.width.%]=\"a.Progress\"></div></div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (ShowNotifications) {\n        <button class=\"icon-btn desktop-only notification-btn\" title=\"Notifications\" (click)=\"showNotifications()\">\n          <i class=\"fa-solid fa-bell\"></i>\n          @if (unreadNotificationCount > 0) {\n            <span class=\"notification-badge\">\n              {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n            </span>\n          }\n        </button>\n      }\n      <!-- Nav Bar Apps: Left of User Menu -->\n      @if (leftOfUserMenuApps.length > 0) {\n        <div class=\"nav-bar-apps left-of-user-menu\">\n          @for (app of leftOfUserMenuApps; track app) {\n            <button\n              class=\"nav-bar-app-btn\"\n              [class.active]=\"IsActiveApp(app)\"\n              [attr.aria-current]=\"IsActiveApp(app) ? 'true' : null\"\n              [title]=\"app.Name\"\n              [style.--app-color]=\"app.GetColor()\"\n              (click)=\"onNavBarAppClick(app, $event)\"\n              (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n              <i [class]=\"app.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"user-menu\">\n        <button class=\"avatar-btn\" (click)=\"toggleUserMenu($event)\"\n          [attr.aria-label]=\"avatarAriaLabel\"\n          [attr.aria-expanded]=\"userMenuVisible\">\n          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"\" aria-hidden=\"true\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\" aria-hidden=\"true\">\n              <i [class]=\"userIconClass || 'fa-solid fa-user'\"></i>\n            </div>\n          }\n        </button>\n        <!-- User Context Menu (Dynamic) -->\n        @if (userMenuVisible) {\n          <div class=\"user-context-menu\"\n            [class.menu-fade]=\"getUserMenuOptions()?.animationStyle === 'fade'\"\n            [class.menu-slide]=\"getUserMenuOptions()?.animationStyle === 'slide'\">\n            <!-- User Header -->\n            @if (getUserMenuOptions()?.showUserName) {\n              <div class=\"user-menu-header\">\n                <div class=\"user-info\">\n                  <span class=\"user-name\">{{ getUserDisplayInfo()?.name || userName }}</span>\n                  @if (getUserMenuOptions()?.showUserEmail && getUserDisplayInfo()?.email) {\n                    <span class=\"user-email\">\n                      {{ getUserDisplayInfo()?.email }}\n                    </span>\n                  }\n                  @if (getUserDisplayInfo()?.subtitle) {\n                    <span class=\"user-subtitle\">{{ getUserDisplayInfo()?.subtitle }}</span>\n                  }\n                </div>\n              </div>\n              <div class=\"user-menu-divider\"></div>\n            }\n            <!-- Dynamic Menu Items -->\n            @for (element of userMenuElements; track element) {\n              <!-- Divider -->\n              @if (isMenuDivider(element)) {\n                <div class=\"user-menu-divider\"></div>\n              }\n              <!-- Menu Item -->\n              @if (!isMenuDivider(element)) {\n                @if (asMenuItem(element); as item) {\n                  @if (item.id === 'toggle-theme') {\n                    <div class=\"user-menu-item theme-toggle-item\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      <div class=\"theme-toggle-track\" [class.dark]=\"IsDarkMode\">\n                        <div class=\"theme-toggle-thumb\">\n                          <i [class]=\"IsDarkMode ? 'fa-solid fa-moon' : 'fa-solid fa-sun'\" class=\"theme-toggle-icon\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <div class=\"user-menu-item\"\n                      [class.disabled]=\"!item.enabled\"\n                      [class.danger]=\"item.cssClass === 'danger'\"\n                      [style.color]=\"item.color || null\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"item.enabled && onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      @if (item.shortcut) {\n                        <span class=\"menu-shortcut\">{{ item.shortcut }}</span>\n                      }\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </header>\n\n  <!-- Search Popup -->\n  @if (isSearchOpen) {\n    <div class=\"search-popup-overlay\" (click)=\"closeSearch()\"></div>\n  }\n  <div class=\"search-popup\" [class.open]=\"isSearchOpen\" [attr.inert]=\"isSearchOpen ? null : ''\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <mj-dropdown\n        [Data]=\"searchableEntities\"\n        TextField=\"Name\"\n        ValueField=\"ID\"\n        AriaLabel=\"Search in\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </mj-dropdown>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"Search...\"\n        aria-label=\"Search\"\n        class=\"mj-input search-input\"\n        (keydown.enter)=\"onSearch($event)\"\n        />\n      <button class=\"search-submit-btn\" (click)=\"onSearch($event)\" title=\"Search\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Mobile Navigation Drawer -->\n  @if (mobileNavOpen) {\n    <div class=\"mobile-nav-overlay\" (click)=\"closeMobileNav()\"></div>\n  }\n  <div class=\"mobile-nav-drawer\" id=\"mj-mobile-nav-drawer\" #mobileNavDrawer\n    [class.open]=\"mobileNavOpen\" [attr.inert]=\"mobileNavOpen ? null : ''\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\" aria-label=\"Close navigation\">\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    @if (activeApp && ShowAppNav) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          [OverflowEnabled]=\"false\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\n      </div>\n    }\n    <!-- Records style: the desktop pill lives in the (mobile-hidden) app nav,\n         so the drawer carries its own entry \u2014 without it, open records are\n         unreachable on mobile except by re-opening them. Resumes the\n         last-viewed record and closes the drawer. -->\n    @if (RecordTabsStyle) {\n      <div class=\"mobile-nav-records\">\n        <mj-records-hub-pill (Activated)=\"closeMobileNav()\"></mj-records-hub-pill>\n      </div>\n    }\n    <div class=\"mobile-nav-footer\">\n      <button class=\"mobile-nav-action\" title=\"Search\" (click)=\"toggleSearch(); closeMobileNav()\">\n        <i class=\"fa-solid fa-search\"></i>\n        <span>Search</span>\n      </button>\n      @if (ShowNotifications) {\n        <button class=\"mobile-nav-action\" title=\"Notifications\" (click)=\"showNotifications(); closeMobileNav()\">\n          <i class=\"fa-solid fa-bell\"></i>\n          <span>Notifications</span>\n          @if (unreadNotificationCount > 0) {\n            <span class=\"notification-badge-mobile\">\n              {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\n    id=\"mj-main-content\"\n    role=\"main\"\n    tabindex=\"-1\"\n    [class.hide-tab-bar]=\"!tabBarVisible\"\n    (firstResourceLoadComplete)=\"onFirstResourceLoadComplete()\"\n    (layoutInitError)=\"handleLayoutError()\">\n  </mj-tab-container>\n</div>\n\n<!-- Loading State -->\n@if (loading) {\n  <div class=\"shell-loading\">\n    <mj-loading\n      [text]=\"currentLoadingText\"\n      [textColor]=\"currentLoadingTextColor\"\n      [logoColor]=\"currentLoadingColor\"\n      [logoGradient]=\"currentLoadingGradient\"\n      [animation]=\"currentLoadingAnimation\"\n      size=\"large\">\n    </mj-loading>\n    @if (ShowResetOption) {\n      <div class=\"loading-reset-panel\">\n        <p class=\"loading-reset-message\">\n          <i class=\"fa-regular fa-clock\"></i>\n          Taking longer than expected\n        </p>\n        <p class=\"loading-reset-hint\">\n          This can happen after updates or due to cached data issues.\n        </p>\n        <button class=\"loading-reset-btn\" (click)=\"ResetApplication()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Reset\n        </button>\n      </div>\n    } @else {\n      <div class=\"loading-version\">MemberJunction \u00B7 v{{ MJVersion }}</div>\n    }\n  </div>\n}\n\n<!-- App Access Error Dialog -->\n<mj-app-access-dialog\n  #appAccessDialog\n  (result)=\"onAppAccessDialogResult($event)\">\n</mj-app-access-dialog>\n\n<!-- Command Palette -->\n<mj-command-palette\n  [ShowSearch]=\"ShowSearchBar\"\n  (AppSelected)=\"onAppSwitch($event)\"\n  (KnowledgeSearchRequested)=\"OnCommandPaletteSearch($event)\"></mj-command-palette>\n\n<!-- Unified command palette (Shell.Omnibar.Enabled). Rendered only while the search bar is:\n     when Instance Config or the host's chrome policy hides search, the palette must not\n     remain reachable through Ctrl/Cmd+K. -->\n@if (ShowSearchBar) {\n  <mj-omnibar-palette #omnibarPalette (SettingsRequested)=\"OnPaletteSettingsRequested()\"></mj-omnibar-palette>\n}\n\n<!-- Legacy universal search as a Spotlight-style overlay \u2014 omnibar-off MOBILE only\n     (on desktop the inline header composite owns the experience; this opens from\n     the mobile icon or Ctrl/Cmd+K when the composite isn't visible).\n     The shell owns the Ctrl/Cmd+K chord, so the overlay's own global shortcut is off. -->\n@if (ShowSearchBar && !UseOmnibar) {\n  <mj-search-overlay\n    [(IsOpen)]=\"LegacySearchOpen\"\n    Placeholder=\"Search everything...\"\n    [EnableGlobalShortcut]=\"false\"\n    [ShowPromo]=\"ShowOmnibarPromo\"\n    [PromoText]=\"OmnibarPromoText\"\n    (ResultSelected)=\"OnOverlayResultSelected($event)\"\n    (SeeAllRequested)=\"OnOverlaySeeAll($event)\"\n    (PromoAccepted)=\"OnOmnibarPromoAccepted($event)\"\n    (PromoDismissed)=\"OnOmnibarPromoDismissed()\">\n  </mj-search-overlay>\n}\n\n<!-- Pin Progress Overlay -->\n@if (PinProgressVisible) {\n  <div class=\"pin-progress-backdrop\">\n    <div class=\"pin-progress-modal\">\n      <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n      <span class=\"pin-progress-text\">{{ PinProgressText }}</span>\n    </div>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design tokens for theme switching & white-labeling.\n   Geometry follows --mj-logo-width/-height so a differently-shaped org mark fits;\n   --mj-logo-plate-bg is set by the theme engine only when a single-variant logo needs\n   a legibility plate in the mode it wasn't designed for (org-theming Phase 4). */\n.mj-logo {\n  width: var(--mj-logo-width, 32px);\n  height: var(--mj-logo-height, 18px);\n  background-image: var(--mj-logo-mark);\n  background-color: var(--mj-logo-plate-bg, transparent);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: var(--mj-radius-sm, 4px);\n  flex-shrink: 0;\n}\n\n/* Skip link (WCAG 2.4.1) \u2014 off-screen until focused, then pinned over the header.\n   It is the first focusable element in the shell; consuming apps should drop their\n   own skip link on upgrade rather than stacking a second one in front of this. */\n.mj-skip-link {\n  position: absolute;\n  top: var(--mj-space-2);\n  left: var(--mj-space-2);\n  z-index: 100000;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  text-decoration: none;\n  transform: translateY(-200%);\n  transition: transform var(--mj-transition-fast);\n}\n.mj-skip-link:focus,\n.mj-skip-link:focus-visible {\n  transform: translateY(0);\n  outline: var(--mj-ring-width) solid var(--mj-focus-ring-color);\n  outline-offset: var(--mj-ring-offset);\n}\n\n/* The main landmark is also the skip-link target; focusing it programmatically must\n   not paint a ring on a region the user did not tab to. */\nmj-tab-container:focus {\n  outline: none;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Hide shell container while loading - allows tab container to render and load\n   first resource in background while shell loading indicator is visible */\n.shell-container.hidden {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n/* Hide Golden Layout tab headers when only one tab \u2014 scoped to the MAIN\n   region: the RECORDS region is a separate Golden Layout whose tab strip is\n   its whole point (switching between open records) and must never be hidden\n   by the main bar's visibility policy. */\nmj-tab-container.hide-tab-bar ::ng-deep .main-region .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .main-region .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n/* Adjust content area height when tabs hidden */\nmj-tab-container.hide-tab-bar ::ng-deep .main-region .lm_content {\n  height: 100% !important;\n}\n\n/* Ensure smooth transitions */\nmj-tab-container ::ng-deep .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--mj-space-4);\n  gap: var(--mj-space-4);\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  /* Creates a stacking context so children (search bar z-index: 99999, dropdown)\n     are contained within this level. Modal overlays (z-index: 1000+) sit above. */\n  position: relative;\n  z-index: 500;\n}\n\n/* Nav Bar Apps - permanent app icons in the header */\n.nav-bar-apps {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n}\n\n.nav-bar-apps.left-of-switcher {\n  /* No extra margin - header gap handles spacing */\n  /* This prevents the app switcher from shifting when icons are hidden */\n}\n\n.nav-bar-apps.left-of-user-menu {\n  margin-right: var(--mj-space-2);\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-lg);\n  transition: all var(--mj-transition-fast);\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* Active = brand-primary (matches nav pills + switcher items); the app's\n   metadata color is reserved for identity accents, never state.\n   Shared active-tint recipe. */\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.nav-bar-app-btn i {\n  transition: transform var(--mj-transition-fast);\n  margin-top: var(--mj-space-0-5); /* Align with app switcher icon */\n}\n\n.nav-bar-app-btn:hover i {\n  transform: scale(1.1);\n}\n\n.spacer {\n  flex: 1;\n}\n\n/* Priority+ overflow support: on desktop the app nav owns the header's free\n   middle space (so it knows exactly how much room its items have) and the\n   spacer stands down. On mobile the nav is display:none'd, so the spacer's\n   flex: 1 keeps the action cluster right-aligned. When the nav isn't rendered\n   at all (app-locked sessions, Shell.AppNav.Enabled off), the sibling selector\n   doesn't match and the spacer behaves as before. */\n@media (min-width: 769px) {\n  mj-app-nav.desktop-nav {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n  mj-app-nav.desktop-nav + .spacer {\n    flex: 0 0 0px;\n  }\n}\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.icon-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-lg);\n  transition: background var(--mj-transition-fast);\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Keyboard focus parity for all header controls (the search bar already has\n   its own ring at .search-btn:focus-visible). */\n.nav-bar-app-btn:focus-visible,\n.icon-btn:focus-visible,\n.hamburger-btn:focus-visible,\n.user-menu .avatar-btn:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: 2px;\n}\n\n/* Universal search: a static-width bar styled as an input, anchored on the\n   right with the action cluster. Deliberately NOT resizable on hover/focus \u2014\n   chrome that shifts on interaction was rejected in the 2026-07 review. It's a\n   button (typing happens in the overlay it opens), so no focus/caret styling. */\n.search-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  width: 260px;\n  height: 36px;\n  padding: 0 var(--mj-space-2-5) 0 var(--mj-space-3-5);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-family: inherit;\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.search-btn:hover {\n  border-color: var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.search-btn:focus-visible {\n  outline: none;\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* Omnibar-off mobile trigger: hidden on desktop (the inline composite renders\n   instead); the 768px block flips it on as the icon circle. */\n.search-btn-mobile {\n  display: none;\n}\n\n/* Omnibar-off desktop: the inline search composite, same slot + width as the\n   omnibar bar so the opt-in toggle doesn't move the header. */\n.shell-search-bar {\n  position: relative;\n  width: 260px;\n  z-index: 99999;\n}\n\n/* The suggest dropdown needs more width than its 260px anchor. Pin it to the\n   anchor's right edge and let it grow leftward \u2014 the bar is right-anchored, so\n   leftward growth stays on screen. */\n.shell-search-bar ::ng-deep .suggest-dropdown {\n  left: auto;\n  right: 0;\n  width: min(560px, calc(100vw - var(--mj-space-6)));\n}\n\n.search-btn i {\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.search-btn .search-btn-text {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* kbd chip: deliberately mirrors the omnibar palette's .ob-kbd chrome\n   (10.5px / 5px radius / bottom-heavy border) so the affordance and the\n   surface it summons read as one system. */\n.search-btn .search-btn-kbd {\n  flex-shrink: 0;\n  white-space: nowrap;\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 1.5px var(--mj-space-1-5);\n}\n\n/* Notification button with badge */\n.notification-btn {\n  position: relative;\n}\n\n.notification-badge {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 var(--mj-space-1);\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: var(--mj-leading-none);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.user-menu {\n  position: relative;\n}\n\n.user-menu .avatar-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow var(--mj-transition-fast), transform var(--mj-transition-fast);\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu .avatar-btn:hover {\n  transform: scale(1.05);\n}\n\n/* Icon fallback styling - shows gray circle with icon */\n.user-menu .avatar-btn .icon-fallback {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color var(--mj-transition-fast);\n}\n\n.user-menu .avatar-btn:hover .icon-fallback {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu .avatar-btn .icon-fallback i {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-base);\n}\n\n/* Avatar image - replaces the gray circle entirely */\n.user-menu .avatar-btn .avatar-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-0-5);\n}\n\n.user-menu-header .user-name {\n  font-weight: var(--mj-font-semibold);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header .user-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: var(--mj-space-2);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  /* Never wider than the viewport, never taller than what is left below the 60px header:\n     a short window (or a phone) used to leave the bottom items unreachable, because the\n     menu had no height limit and clipped instead of scrolling. */\n  max-width: min(360px, calc(100vw - 2 * var(--mj-space-4)));\n  max-height: calc(100vh - 60px - 3 * var(--mj-space-2));\n  max-height: calc(100dvh - 60px - 3 * var(--mj-space-2));\n  z-index: 10000;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background var(--mj-transition-fast);\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n}\n\n.user-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: var(--mj-space-1) 0;\n}\n\n/* Menu item disabled state */\n.user-menu-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled:hover {\n  background: transparent;\n}\n\n/* Theme Toggle Switch */\n.theme-toggle-item {\n  cursor: pointer;\n}\n\n.theme-toggle-track {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background var(--mj-transition-base);\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform var(--mj-transition-base);\n}\n\n.theme-toggle-track.dark .theme-toggle-thumb {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark .theme-toggle-icon {\n  color: var(--mj-text-inverse);\n}\n\n/* Menu shortcut hint */\n.user-menu-item .menu-shortcut {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n/* Menu animations */\n.user-context-menu.menu-fade {\n  animation: menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide {\n  animation: menuSlideIn 0.2s ease-out;\n}\n\n@keyframes menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n.loading-version {\n  margin-top: var(--mj-space-8, 24px);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.4px;\n  opacity: 0.6;\n  user-select: none;\n}\n\n/* Loading Recovery Reset Panel */\n.loading-reset-panel {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message i {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn i {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Hamburger button - hidden on desktop */\n.hamburger-btn {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xl);\n  transition: background var(--mj-transition-fast);\n}\n.hamburger-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Mobile Navigation Overlay */\n.mobile-nav-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\n/* `visibility` is transitioned alongside `transform` so the closed drawer is genuinely\n   hidden \u2014 off-screen alone leaves its controls hit-testable and visible to\n   checkVisibility(), which is what let 6 of its 8 controls keep taking focus. The\n   delay holds visibility through the slide-out, then drops it; opening is instant\n   (0s) so the drawer is present for the whole slide-in. `inert` (set in the template)\n   is the actual focus guard; this keeps the CSS from disagreeing with it. */\n.mobile-nav-drawer {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--mj-transition-slow), visibility 0s linear 300ms;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n  visibility: visible;\n  transition: transform var(--mj-transition-slow), visibility 0s linear 0s;\n}\n\n/* Reduced motion: no slide, so nothing to hold visibility open for. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-nav-drawer,\n  .mobile-nav-drawer.open {\n    transition: none;\n  }\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--mj-space-4) var(--mj-space-5);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header span {\n  font-weight: var(--mj-font-semibold);\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header .close-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-lg);\n  transition: background var(--mj-transition-fast);\n}\n.mobile-nav-header .close-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--mj-space-4) 0;\n}\n\n.mobile-nav-section-title {\n  padding: var(--mj-space-2) var(--mj-space-5);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Records entry in the mobile drawer (records-style record opens) \u2014\n   the desktop pill lives in the mobile-hidden app nav, so the drawer\n   carries its own touch-friendly instance. */\n.mobile-nav-records {\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-default);\n}\n.mobile-nav-records .records-pill {\n  width: 100%;\n  min-height: 48px; /* Touch-target parity with drawer nav items */\n  justify-content: flex-start;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n}\n\n.mobile-nav-action {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  transition: background var(--mj-transition-fast);\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action i {\n  font-size: var(--mj-text-base);\n  width: 20px;\n  text-align: center;\n}\n\n/* Mobile Responsive Styles */\n@media (max-width: 768px) {\n  .hamburger-btn {\n    display: flex;\n  }\n\n  .desktop-nav {\n    display: none !important;\n  }\n\n  .desktop-only {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay {\n    display: block;\n  }\n\n  .mobile-nav-drawer {\n    display: flex;\n  }\n\n  .shell-header {\n    padding: 0 var(--mj-space-3);\n    gap: var(--mj-space-2);\n  }\n\n  /* Keep the right-edge cluster (chat/nav-bar app icons + avatar) on one row.\n     Without pinning this, the icons can wrap and the avatar drops onto a second\n     line, stacking under the chat icon. */\n  .header-actions {\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n  .header-actions .user-menu,\n  .header-actions .nav-bar-apps,\n  .header-actions .search-btn {\n    flex-shrink: 0;\n  }\n\n  /* Search bar collapses to the icon-only circle on small viewports \u2014\n     the placeholder text + kbd chip are already hidden via .desktop-only.\n     The omnibar-off mobile trigger (.search-btn-mobile) becomes visible here;\n     its .desktop-only composite sibling is hidden by the rule above. */\n  .search-btn {\n    display: flex;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    justify-content: center;\n    border: none;\n    border-radius: 50%;\n    background: none;\n  }\n  .search-btn i {\n    font-size: var(--mj-text-lg);\n  }\n  .search-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border: none;\n  }\n}\n\n/* Settings Full-Screen Window Styles */\n::ng-deep .settings-fullscreen-window {\n  /* Remove window chrome for full-screen feel */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: var(--mj-space-3) var(--mj-space-4);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: var(--mj-text-lg);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: var(--mj-space-1);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--mj-radius-md);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n/* Hide minimize/maximize buttons - only show close */\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n/* Universal search is a right-anchored bar affordance in header-actions\n   (2026-07 design review round 2): both experiences still open as overlays \u2014\n   the bar is a trigger, not an inline input. Icon-only under 768px. */\n\n/* ========================================\n   SEARCH POPUP\n   ======================================== */\n\n.search-popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n  animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup {\n  position: absolute;\n  top: 60px; /* Below header */\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  visibility: hidden;\n  transition: opacity var(--mj-transition-base), transform var(--mj-transition-base), visibility 0s linear 200ms;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n  visibility: visible;\n  transition: opacity var(--mj-transition-base), transform var(--mj-transition-base), visibility 0s linear 0s;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .search-popup,\n  .search-popup.open {\n    transition: none;\n  }\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3);\n}\n\n.search-entity-dropdown {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mj-text-base);\n  transition: background var(--mj-transition-fast);\n  flex-shrink: 0;\n}\n\n.search-submit-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Mobile notification badge */\n.notification-badge-mobile {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: var(--mj-leading-none);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* Mobile-specific search popup adjustments */\n@media (max-width: 768px) {\n  .search-popup {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown {\n    width: 100%;\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n   PIN PROGRESS OVERLAY\n   ======================================== */\n.pin-progress-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: pinBackdropIn 0.2s ease;\n}\n\n@keyframes pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: var(--mj-space-7) var(--mj-space-10);\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-4);\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: pinModalIn 0.25s ease;\n}\n\n@keyframes pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}\n/* ============================================================\n   Global Activity indicator (P3)\n   ============================================================ */\n.activity-wrap { position: relative; display: inline-flex; }\n.activity-btn { position: relative; }\n.activity-btn .activity-pulse { color: var(--mj-brand-primary); }\n.activity-badge {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 var(--mj-space-1);\n    border-radius: var(--mj-radius-md);\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: var(--mj-font-bold);\n    line-height: 16px;\n    text-align: center;\n}\n.activity-drawer {\n    position: absolute;\n    top: calc(100% + 8px);\n    right: 0;\n    width: 320px;\n    max-height: 420px;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface-elevated);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    box-shadow: 0 8px 28px color-mix(in srgb, var(--mj-text-primary) 18%, transparent);\n    z-index: 1000;\n    overflow: hidden;\n}\n.activity-drawer-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--mj-space-2-5) var(--mj-space-3);\n    font-weight: var(--mj-font-bold);\n    font-size: 0.85rem;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n.activity-clear {\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.8rem;\n    padding: var(--mj-space-1) var(--mj-space-1-5);\n    border-radius: var(--mj-radius-md);\n}\n.activity-clear:hover { color: var(--mj-text-primary); background: var(--mj-bg-surface-hover); }\n.activity-list { overflow-y: auto; padding: var(--mj-space-1-5); }\n.activity-row {\n    display: flex;\n    gap: var(--mj-space-2-5);\n    padding: var(--mj-space-2);\n    border-radius: var(--mj-radius-md);\n}\n.activity-row:hover { background: var(--mj-bg-surface-hover); }\n.activity-row-icon { margin-top: var(--mj-space-0-5); color: var(--mj-brand-primary); font-size: 0.85rem; }\n.activity-row.is-error .activity-row-icon { color: var(--mj-status-error); }\n.activity-row-body { flex: 1; min-width: 0; }\n.activity-row-label { font-size: 0.82rem; font-weight: var(--mj-font-semibold); color: var(--mj-text-primary); }\n.activity-row-detail { font-size: 0.72rem; color: var(--mj-text-muted); margin-top: var(--mj-space-px); }\n.activity-bar {\n    margin-top: var(--mj-space-1-5);\n    height: 4px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 2px;\n    overflow: hidden;\n}\n.activity-bar-fill { height: 100%; background: var(--mj-brand-primary); transition: width var(--mj-transition-slow); }\n\n"] }]
+    }], () => [{ type: i1.ApplicationManager }, { type: i1.WorkspaceStateManager }, { type: i1.GoldenLayoutManager }, { type: i1.TabService }, { type: i2.NavigationService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.MJAuthBase }, { type: i0.ChangeDetectorRef }, { type: i5.UserAvatarService }, { type: i6.UserSharingCenterDialogService }, { type: i7.AboutDialogService }, { type: i8.ProfileDialogService }, { type: i0.ViewContainerRef }, { type: i2.TitleService }, { type: i2.DeveloperModeService }, { type: i9.StartupValidationService }, { type: i10.CommandPaletteService }, { type: i2.ThemeService }, { type: i2.HomeAppPinService }, { type: i11.FileOpenService }, { type: i12.FeedbackDialogService }, { type: i12.FeedbackService }, { type: i2.ActivityService }], { SearchInput: [{
             type: ViewChild,
             args: ['searchInput']
-        }], mobileNavDrawer: [{
+        }], MobileNavDrawer: [{
             type: ViewChild,
             args: ['mobileNavDrawer']
-        }], mobileNavToggle: [{
+        }], MobileNavToggle: [{
             type: ViewChild,
             args: ['mobileNavToggle']
-        }], omnibarPalette: [{
+        }], OmnibarPalette: [{
             type: ViewChild,
             args: ['omnibarPalette']
-        }], shellSearchComposite: [{
+        }], ShellSearchComposite: [{
             type: ViewChild,
             args: ['shellSearchComposite']
-        }], tabContainerRef: [{
+        }], TabContainerRef: [{
             type: ViewChild,
             args: [TabContainerComponent]
-        }], appAccessDialog: [{
+        }], AppAccessDialog: [{
             type: ViewChild,
             args: ['appAccessDialog']
-        }], handleGlobalKeyboardShortcuts: [{
-            type: HostListener,
-            args: ['document:keydown', ['$event']]
         }], OnGlobalKeydown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
@@ -3809,5 +4212,5 @@ export class ShellComponent extends BaseAngularComponent {
             type: HostListener,
             args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShellComponent, { className: "ShellComponent", filePath: "src/lib/shell/shell.component.ts", lineNumber: 59 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShellComponent, { className: "ShellComponent", filePath: "src/lib/shell/shell.component.ts", lineNumber: 60 }); })();
 //# sourceMappingURL=shell.component.js.map