@memberjunction/ng-explorer-core 5.21.0 → 5.23.0

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

@@ -7,6 +7,7 @@ import { MJEventType, MJGlobal, uuidv4, UUIDsEqual } from '@memberjunction/globa
 import { EventCodes, SYSTEM_APP_ID } from '@memberjunction/ng-shared';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { getActiveTheme } from './loading-themes';
+import { TabContainerComponent } from './components/tabs/tab-container.component';
 import { BaseUserMenu, isUserMenuDivider } from '../user-menu';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
@@ -17,19 +18,18 @@ import * as i5 from "@memberjunction/ng-user-avatar";
 import * as i6 from "./services/settings-dialog.service";
 import * as i7 from "../command-palette/command-palette.service";
 import * as i8 from "@angular/forms";
-import * as i9 from "@progress/kendo-angular-dropdowns";
-import * as i10 from "@progress/kendo-angular-inputs";
-import * as i11 from "@memberjunction/ng-shared-generic";
-import * as i12 from "./components/header/app-switcher.component";
-import * as i13 from "./components/header/app-nav.component";
-import * as i14 from "./components/tabs/tab-container.component";
-import * as i15 from "./components/dialogs/app-access-dialog.component";
-import * as i16 from "../command-palette/command-palette.component";
+import * as i9 from "@memberjunction/ng-ui-components";
+import * as i10 from "@memberjunction/ng-shared-generic";
+import * as i11 from "./components/header/app-switcher.component";
+import * as i12 from "./components/header/app-nav.component";
+import * as i13 from "./components/tabs/tab-container.component";
+import * as i14 from "./components/dialogs/app-access-dialog.component";
+import * as i15 from "../command-palette/command-palette.component";
 const _c0 = ["searchInput"];
 const _c1 = ["appAccessDialog"];
 function ShellComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 45);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_5_For_2_Template_button_click_0_listener($event) { const app_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onNavBarAppClick(app_r3, $event)); })("dblclick", function ShellComponent_Conditional_5_For_2_Template_button_dblclick_0_listener($event) { const app_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onNavBarAppDblClick(app_r3, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -44,7 +44,7 @@ function ShellComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, ShellComponent_Conditional_5_For_2_Template, 2, 7, "button", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, ShellComponent_Conditional_5_For_2_Template, 2, 7, "button", 44, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -53,7 +53,7 @@ function ShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-app-nav", 45);
+    i0.ɵɵelementStart(0, "mj-app-nav", 46);
     i0.ɵɵlistener("navItemClick", function ShellComponent_Conditional_7_Template_mj_app_nav_navItemClick_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onNavItemClick($event)); })("navItemDismiss", function ShellComponent_Conditional_7_Template_mj_app_nav_navItemDismiss_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onNavItemDismiss($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -71,7 +71,7 @@ function ShellComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 45);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_15_For_2_Template_button_click_0_listener($event) { const app_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onNavBarAppClick(app_r7, $event)); })("dblclick", function ShellComponent_Conditional_15_For_2_Template_button_dblclick_0_listener($event) { const app_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onNavBarAppDblClick(app_r7, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -86,7 +86,7 @@ function ShellComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, ShellComponent_Conditional_15_For_2_Template, 2, 7, "button", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, ShellComponent_Conditional_15_For_2_Template, 2, 7, "button", 44, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -109,7 +109,7 @@ function ShellComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap(ctx_r3.userIconClass || "fa-solid fa-user");
 } }
 function ShellComponent_Conditional_20_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelementStart(0, "span", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -119,12 +119,12 @@ function ShellComponent_Conditional_20_Conditional_1_Conditional_4_Template(rf,
     i0.ɵɵtextInterpolate1(" ", (tmp_5_0 = ctx_r3.getUserDisplayInfo()) == null ? null : tmp_5_0.email, " ");
 } }
 function ShellComponent_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47)(1, "div", 48)(2, "span", 49);
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49)(2, "span", 50);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ShellComponent_Conditional_20_Conditional_1_Conditional_4_Template, 2, 1, "span", 50);
+    i0.ɵɵconditionalCreate(4, ShellComponent_Conditional_20_Conditional_1_Conditional_4_Template, 2, 1, "span", 51);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "div", 51);
+    i0.ɵɵelement(5, "div", 52);
 } if (rf & 2) {
     let tmp_4_0;
     let tmp_5_0;
@@ -135,18 +135,18 @@ function ShellComponent_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(((tmp_5_0 = ctx_r3.getUserMenuOptions()) == null ? null : tmp_5_0.showUserEmail) && ((tmp_5_0 = ctx_r3.getUserDisplayInfo()) == null ? null : tmp_5_0.email) ? 4 : -1);
 } }
 function ShellComponent_Conditional_20_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 51);
+    i0.ɵɵelement(0, "div", 52);
 } }
 function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelementStart(0, "div", 55);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const item_r9 = i0.ɵɵnextContext(); const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.onUserMenuItemClick(item_r9.id)); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 55);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
-    i0.ɵɵelement(6, "i", 58);
+    i0.ɵɵelementStart(4, "div", 57)(5, "div", 58);
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r9 = i0.ɵɵnextContext();
@@ -162,7 +162,7 @@ function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditi
     i0.ɵɵclassMap(ctx_r3.IsDarkMode ? "fa-solid fa-moon" : "fa-solid fa-sun");
 } }
 function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵelementStart(0, "span", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -172,13 +172,13 @@ function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditi
 } }
 function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵelementStart(0, "div", 60);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r9 = i0.ɵɵnextContext(); const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(item_r9.enabled && ctx_r3.onUserMenuItemClick(item_r9.id)); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 55);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Conditional_4_Template, 2, 1, "span", 60);
+    i0.ɵɵconditionalCreate(4, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Conditional_4_Template, 2, 1, "span", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r9 = i0.ɵɵnextContext();
@@ -193,7 +193,7 @@ function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditi
     i0.ɵɵconditional(item_r9.shortcut ? 4 : -1);
 } }
 function ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_0_Template, 7, 8, "div", 52)(1, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Template, 5, 11, "div", 53);
+    i0.ɵɵconditionalCreate(0, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_0_Template, 7, 8, "div", 53)(1, ShellComponent_Conditional_20_For_3_Conditional_1_Conditional_0_Conditional_1_Template, 5, 11, "div", 54);
 } if (rf & 2) {
     i0.ɵɵconditional(ctx.id === "toggle-theme" ? 0 : 1);
 } }
@@ -206,7 +206,7 @@ function ShellComponent_Conditional_20_For_3_Conditional_1_Template(rf, ctx) { i
     i0.ɵɵconditional((tmp_14_0 = ctx_r3.asMenuItem(element_r11)) ? 0 : -1, tmp_14_0);
 } }
 function ShellComponent_Conditional_20_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ShellComponent_Conditional_20_For_3_Conditional_0_Template, 1, 0, "div", 51);
+    i0.ɵɵconditionalCreate(0, ShellComponent_Conditional_20_For_3_Conditional_0_Template, 1, 0, "div", 52);
     i0.ɵɵconditionalCreate(1, ShellComponent_Conditional_20_For_3_Conditional_1_Template, 1, 1);
 } if (rf & 2) {
     const element_r11 = ctx.$implicit;
@@ -216,7 +216,7 @@ function ShellComponent_Conditional_20_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(!ctx_r3.isMenuDivider(element_r11) ? 1 : -1);
 } }
 function ShellComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelementStart(0, "div", 47);
     i0.ɵɵconditionalCreate(1, ShellComponent_Conditional_20_Conditional_1_Template, 6, 2);
     i0.ɵɵrepeaterCreate(2, ShellComponent_Conditional_20_For_3_Template, 2, 2, null, null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
@@ -233,22 +233,22 @@ function ShellComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵelementStart(0, "div", 62);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeSearch()); });
     i0.ɵɵelementEnd();
 } }
 function ShellComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelementStart(0, "div", 63);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_29_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeMobileNav()); });
     i0.ɵɵelementEnd();
 } }
 function ShellComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 63);
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 64);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "mj-app-nav", 64);
+    i0.ɵɵelementStart(3, "mj-app-nav", 65);
     i0.ɵɵlistener("navItemClick", function ShellComponent_Conditional_36_Template_mj_app_nav_navItemClick_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onNavItemClick($event)); })("navItemDismiss", function ShellComponent_Conditional_36_Template_mj_app_nav_navItemDismiss_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onNavItemDismiss($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -269,23 +269,23 @@ function ShellComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
 } }
 function ShellComponent_Conditional_48_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 66)(1, "p", 67);
-    i0.ɵɵelement(2, "i", 68);
+    i0.ɵɵelementStart(0, "div", 67)(1, "p", 68);
+    i0.ɵɵelement(2, "i", 69);
     i0.ɵɵtext(3, " Taking longer than expected ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 69);
+    i0.ɵɵelementStart(4, "p", 70);
     i0.ɵɵtext(5, " This can happen after updates or due to cached data issues. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 70);
+    i0.ɵɵelementStart(6, "button", 71);
     i0.ɵɵlistener("click", function ShellComponent_Conditional_48_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.ResetApplication()); });
-    i0.ɵɵelement(7, "i", 71);
+    i0.ɵɵelement(7, "i", 72);
     i0.ɵɵtext(8, " Reset ");
     i0.ɵɵelementEnd()();
 } }
 function ShellComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "mj-loading", 65);
-    i0.ɵɵconditionalCreate(2, ShellComponent_Conditional_48_Conditional_2_Template, 9, 0, "div", 66);
+    i0.ɵɵelement(1, "mj-loading", 66);
+    i0.ɵɵconditionalCreate(2, ShellComponent_Conditional_48_Conditional_2_Template, 9, 0, "div", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -294,6 +294,19 @@ function ShellComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r3.ShowResetOption ? 2 : -1);
 } }
+function ShellComponent_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 73);
+    i0.ɵɵelement(2, "mj-loading", 74);
+    i0.ɵɵelementStart(3, "span", 75);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("showText", false);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r3.PinProgressText);
+} }
 /**
  * Main shell component for the new Explorer UX.
  *
@@ -319,6 +332,7 @@ export class ShellComponent {
     developerModeService;
     commandPaletteService;
     themeService;
+    homePinService;
     subscriptions = [];
     urlBasedNavigation = false; // Track if we're loading from a URL
     initialNavigationComplete = false; // Track if initial navigation has completed
@@ -367,11 +381,16 @@ export class ShellComponent {
     userMenu = null;
     userMenuElements = [];
     destroy$ = new Subject();
+    // Pin progress overlay
+    PinProgressVisible = false;
+    PinProgressText = '';
     // Search state
     isSearchOpen = false;
     searchableEntities = [];
     selectedEntity = null;
     searchInput;
+    // Tab container reference for thumbnail capture
+    tabContainerRef;
     // App access dialog
     appAccessDialog;
     pendingAppPath = null; // Store the app path we tried to access
@@ -391,7 +410,7 @@ export class ShellComponent {
         return 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, settingsDialogService, viewContainerRef, titleService, developerModeService, commandPaletteService, themeService) {
+    constructor(appManager, workspaceManager, layoutManager, tabService, navigationService, route, router, authBase, cdr, userAvatarService, settingsDialogService, viewContainerRef, titleService, developerModeService, commandPaletteService, themeService, homePinService) {
         this.appManager = appManager;
         this.workspaceManager = workspaceManager;
         this.layoutManager = layoutManager;
@@ -408,6 +427,7 @@ export class ShellComponent {
         this.developerModeService = developerModeService;
         this.commandPaletteService = commandPaletteService;
         this.themeService = themeService;
+        this.homePinService = homePinService;
         // Initialize theme immediately so loading UI shows correct colors from the start
         this.activeTheme = getActiveTheme();
         // Initialize animation based on theme configuration
@@ -705,10 +725,12 @@ export class ShellComponent {
             // Update the active app to match the tab's application
             await this.appManager.SetActiveApp(tabAppId);
         }
-        // Update browser title with app and tab context
+        // Update browser title with app and tab context.
+        // Prefer navItemName from configuration (always correct) over activeTab.title
+        // (which can be stale when switching between apps in single-resource mode).
         const app = this.appManager.GetAppById(tabAppId);
         const appName = app?.Name || null;
-        const tabTitle = activeTab.title || null;
+        const tabTitle = activeTab.configuration?.['navItemName'] || activeTab.title || null;
         this.titleService.setContext(appName, tabTitle);
     }
     /**
@@ -1784,7 +1806,7 @@ export class ShellComponent {
      */
     async initializeUserMenu() {
         // Get the highest priority user menu implementation via ClassFactory
-        this.userMenu = MJGlobal.Instance.ClassFactory.CreateInstance(BaseUserMenu);
+        this.userMenu = await MJGlobal.Instance.ClassFactory.CreateInstanceAsync(BaseUserMenu);
         if (!this.userMenu) {
             console.error('No user menu implementation found');
             return;
@@ -1804,6 +1826,7 @@ export class ShellComponent {
             currentApplication: this.activeApp,
             workspaceManager: this.workspaceManager,
             authService: this.authBase,
+            pinService: this.homePinService,
             openSettings: () => this.openSettingsDialog(),
             themePreference: this.themeService.Preference,
             availableThemes: this.themeService.AvailableThemes,
@@ -1877,6 +1900,17 @@ export class ShellComponent {
             await this.onResetLayout();
             return;
         }
+        if (result.message === 'pin-to-home') {
+            // Close menu and show overlay immediately before any async work
+            this.userMenuVisible = false;
+            this.refreshMenuElements();
+            this.showPinProgress('Pinning...');
+            // Let the UI render the overlay before starting the work
+            await new Promise(resolve => setTimeout(resolve, 0));
+            await this.handlePinToHome();
+            this.hidePinProgress();
+            return;
+        }
         if (result.closeMenu) {
             this.userMenuVisible = false;
         }
@@ -1929,6 +1963,136 @@ export class ShellComponent {
         this.userMenuVisible = false;
         this.openSettingsDialog();
     }
+    /**
+     * Pin the currently active resource to the Home dashboard
+     */
+    async handlePinToHome() {
+        const activeTabId = this.workspaceManager.GetActiveTabId();
+        if (!activeTabId) {
+            console.warn('Pin to Home: No active tab found');
+            return;
+        }
+        const activeTab = this.workspaceManager.GetTab(activeTabId);
+        if (!activeTab) {
+            console.warn('Pin to Home: Active tab not found');
+            return;
+        }
+        // Ensure pins are loaded before adding
+        await this.homePinService.LoadPins();
+        const resourceType = this.resolveTabResourceType(activeTab);
+        // Resolve a better display name for record pins
+        let displayName = activeTab.title;
+        if (resourceType === 'Records') {
+            const resolved = await this.resolveRecordDisplayName(activeTab);
+            if (resolved)
+                displayName = resolved;
+        }
+        // Resolve nav item icon for Custom pins
+        let pinIcon;
+        if (resourceType === 'Custom' && this.activeApp) {
+            const navItemName = activeTab.configuration?.['navItemName'];
+            if (navItemName) {
+                const navItems = await this.activeApp.GetNavItems();
+                const navItem = navItems.find(ni => ni.Label === navItemName);
+                pinIcon = navItem?.Icon || undefined;
+            }
+        }
+        const added = this.homePinService.AddPin({
+            DisplayName: displayName,
+            ResourceType: resourceType,
+            ApplicationID: activeTab.applicationId,
+            ApplicationName: this.activeApp?.Name,
+            Icon: pinIcon,
+            Color: this.activeApp?.GetColor() || undefined,
+            Configuration: activeTab.configuration
+        });
+        if (added) {
+            this.showPinProgress(`Capturing preview for "${displayName}"...`);
+            await this.captureAndAttachThumbnail(activeTab, resourceType);
+        }
+        else {
+            MJNotificationService.Instance.CreateSimpleNotification(`"${activeTab.title}" is already pinned to Home`, 'info', 3000);
+        }
+    }
+    /**
+     * Capture a thumbnail of the currently visible content and attach it to the pin.
+     */
+    async captureAndAttachThumbnail(tab, resourceType) {
+        try {
+            if (!this.tabContainerRef)
+                return;
+            const thumbnail = await this.tabContainerRef.CaptureActiveThumbnail();
+            if (thumbnail) {
+                const pin = this.homePinService.FindPin(resourceType, tab.configuration);
+                if (pin) {
+                    this.homePinService.UpdatePin(pin.Id, { Thumbnail: thumbnail });
+                }
+            }
+        }
+        catch {
+            // Thumbnail capture is best-effort
+        }
+    }
+    /**
+     * Resolve a friendly display name for a record tab using GetEntityRecordNames.
+     */
+    async resolveRecordDisplayName(tab) {
+        try {
+            const config = tab.configuration;
+            const entityName = (config['Entity'] || config['entity']);
+            const recordId = config['recordId'];
+            if (!entityName || !recordId)
+                return null;
+            const md = new Metadata();
+            const entityInfo = md.Entities.find(e => e.Name === entityName);
+            if (!entityInfo)
+                return null;
+            const pkField = entityInfo.FirstPrimaryKey;
+            if (!pkField)
+                return null;
+            const compositeKey = new CompositeKey();
+            compositeKey.KeyValuePairs = [{ FieldName: pkField.Name, Value: recordId }];
+            const results = await md.GetEntityRecordNames([{ EntityName: entityName, CompositeKey: compositeKey }]);
+            if (results.length > 0 && results[0].Success && results[0].RecordName) {
+                return results[0].RecordName;
+            }
+        }
+        catch {
+            // Fall through to null
+        }
+        return null;
+    }
+    showPinProgress(text) {
+        this.PinProgressText = text;
+        this.PinProgressVisible = true;
+        this.cdr.detectChanges();
+    }
+    hidePinProgress() {
+        this.PinProgressVisible = false;
+        this.PinProgressText = '';
+        this.cdr.detectChanges();
+    }
+    /**
+     * Resolve a WorkspaceTab's resource type to a human-readable string
+     * used by the pin service for matching and by the Home dashboard for navigation.
+     */
+    resolveTabResourceType(tab) {
+        const config = tab.configuration;
+        const rt = config.resourceType || '';
+        if (rt === 'Dashboards' || config['dashboardId'])
+            return 'Dashboards';
+        if (rt === 'User Views' || rt === 'MJ: User Views' || config['viewId'])
+            return 'User Views';
+        if (rt === 'Queries' || config['queryId'])
+            return 'Queries';
+        if (rt === 'Reports' || config['reportId'])
+            return 'Reports';
+        if (rt === 'Records' || (config['Entity'] && config['recordId']))
+            return 'Records';
+        if (rt === 'Custom' || config['navItemName'])
+            return 'Custom';
+        return rt || 'Custom';
+    }
     /**
      * Log current workspace configuration to console (debug)
      */
@@ -2431,16 +2595,17 @@ export class ShellComponent {
             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.SettingsDialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.TitleService), i0.ɵɵdirectiveInject(i2.DeveloperModeService), i0.ɵɵdirectiveInject(i7.CommandPaletteService), i0.ɵɵdirectiveInject(i2.ThemeService)); };
+    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.SettingsDialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.TitleService), i0.ɵɵdirectiveInject(i2.DeveloperModeService), i0.ɵɵdirectiveInject(i7.CommandPaletteService), i0.ɵɵdirectiveInject(i2.ThemeService), i0.ɵɵdirectiveInject(i2.HomeAppPinService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShellComponent, selectors: [["mj-shell"]], viewQuery: function ShellComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+            i0.ɵɵviewQuery(_c0, 5)(TabContainerComponent, 5)(_c1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _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.handleGlobalKeyboardShortcuts($event); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, decls: 52, vars: 26, consts: [["searchInput", ""], ["appAccessDialog", ""], ["kendoDialogContainer", "", 1, "shell-container"], [1, "shell-header"], ["title", "MemberJunction", 1, "mj-logo"], ["title", "Menu", 1, "hamburger-btn", 3, "click"], [1, "fa-solid", "fa-bars"], [1, "nav-bar-apps", "left-of-switcher"], [3, "appSelected", "activeApp", "isViewingSystemTab", "loadingAppId"], [1, "desktop-nav", 3, "app"], [1, "spacer"], [1, "header-actions"], ["title", "Search", 1, "icon-btn", "desktop-only", "search-toggle-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn", 3, "click"], [1, "fa-solid", "fa-bell"], [1, "notification-badge"], [1, "nav-bar-apps", "left-of-user-menu"], [1, "user-menu"], [1, "avatar-btn", 3, "click"], ["alt", "User avatar", 1, "avatar-img", 3, "src"], [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", 1, "search-entity-dropdown", 3, "ngModelChange", "data", "ngModel"], ["type", "text", "placeholder", "Search...", "kendoTextBox", "", 1, "search-input", 3, "keydown.enter"], ["title", "Search", 1, "search-submit-btn", 3, "click"], [1, "mobile-nav-overlay"], [1, "mobile-nav-drawer"], [1, "mobile-nav-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mobile-nav-content"], [1, "mobile-nav-footer"], ["title", "Search", 1, "mobile-nav-action", 3, "click"], ["title", "Notifications", 1, "mobile-nav-action", 3, "click"], [1, "notification-badge-mobile"], [3, "firstResourceLoadComplete", "layoutInitError"], [1, "shell-loading"], [3, "result"], [3, "AppSelected"], [1, "nav-bar-app-btn", 3, "active", "title", "--app-color"], [1, "nav-bar-app-btn", 3, "click", "dblclick", "title"], [1, "desktop-nav", 3, "navItemClick", "navItemDismiss", "app"], [1, "user-context-menu"], [1, "user-menu-header"], [1, "user-info"], [1, "user-name"], [1, "user-email"], [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"], ["size", "large", 3, "text", "textColor", "logoColor", "logoGradient", "animation"], [1, "loading-reset-panel"], [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"]], template: function ShellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, decls: 53, vars: 27, consts: [["searchInput", ""], ["appAccessDialog", ""], [1, "shell-container"], [1, "shell-header"], ["title", "MemberJunction", 1, "mj-logo"], ["title", "Menu", 1, "hamburger-btn", 3, "click"], [1, "fa-solid", "fa-bars"], [1, "nav-bar-apps", "left-of-switcher"], [3, "appSelected", "activeApp", "isViewingSystemTab", "loadingAppId"], [1, "desktop-nav", 3, "app"], [1, "spacer"], [1, "header-actions"], ["title", "Search", 1, "icon-btn", "desktop-only", "search-toggle-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["title", "Notifications", 1, "icon-btn", "desktop-only", "notification-btn", 3, "click"], [1, "fa-solid", "fa-bell"], [1, "notification-badge"], [1, "nav-bar-apps", "left-of-user-menu"], [1, "user-menu"], [1, "avatar-btn", 3, "click"], ["alt", "User avatar", 1, "avatar-img", 3, "src"], [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", 1, "search-entity-dropdown", 3, "ngModelChange", "Data", "ngModel"], ["type", "text", "placeholder", "Search...", 1, "mj-input", "search-input", 3, "keydown.enter"], ["title", "Search", 1, "search-submit-btn", 3, "click"], [1, "mobile-nav-overlay"], [1, "mobile-nav-drawer"], [1, "mobile-nav-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mobile-nav-content"], [1, "mobile-nav-footer"], ["title", "Search", 1, "mobile-nav-action", 3, "click"], ["title", "Notifications", 1, "mobile-nav-action", 3, "click"], [1, "notification-badge-mobile"], [3, "firstResourceLoadComplete", "layoutInitError"], [1, "shell-loading"], [3, "result"], [3, "AppSelected"], [1, "pin-progress-backdrop"], [1, "nav-bar-app-btn", 3, "active", "title", "--app-color"], [1, "nav-bar-app-btn", 3, "click", "dblclick", "title"], [1, "desktop-nav", 3, "navItemClick", "navItemDismiss", "app"], [1, "user-context-menu"], [1, "user-menu-header"], [1, "user-info"], [1, "user-name"], [1, "user-email"], [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"], ["size", "large", 3, "text", "textColor", "logoColor", "logoGradient", "animation"], [1, "loading-reset-panel"], [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"], [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", 2)(1, "header", 3);
             i0.ɵɵelement(2, "div", 4);
@@ -2473,8 +2638,8 @@ export class ShellComponent {
             i0.ɵɵconditionalCreate(21, ShellComponent_Conditional_21_Template, 1, 0, "div", 23);
             i0.ɵɵelementStart(22, "div", 24)(23, "div", 25);
             i0.ɵɵlistener("click", function ShellComponent_Template_div_click_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-            i0.ɵɵelementStart(24, "kendo-dropdownlist", 26);
-            i0.ɵɵtwoWayListener("ngModelChange", function ShellComponent_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementStart(24, "mj-dropdown", 26);
+            i0.ɵɵtwoWayListener("ngModelChange", function ShellComponent_Template_mj_dropdown_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(25, "input", 27, 0);
             i0.ɵɵlistener("keydown.enter", function ShellComponent_Template_input_keydown_enter_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearch($event)); });
@@ -2516,6 +2681,7 @@ export class ShellComponent {
             i0.ɵɵelementStart(51, "mj-command-palette", 42);
             i0.ɵɵlistener("AppSelected", function ShellComponent_Template_mj_command_palette_AppSelected_51_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAppSwitch($event)); });
             i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(52, ShellComponent_Conditional_52_Template, 5, 2, "div", 43);
         } if (rf & 2) {
             i0.ɵɵclassProp("hidden", ctx.loading)("tabs-visible", ctx.tabBarVisible);
             i0.ɵɵadvance(5);
@@ -2537,7 +2703,7 @@ export class ShellComponent {
             i0.ɵɵadvance();
             i0.ɵɵclassProp("open", ctx.isSearchOpen);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("data", ctx.searchableEntities);
+            i0.ɵɵproperty("Data", ctx.searchableEntities);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntity);
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.mobileNavOpen ? 29 : -1);
@@ -2551,14 +2717,19 @@ export class ShellComponent {
             i0.ɵɵclassProp("hide-tab-bar", !ctx.tabBarVisible);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading ? 48 : -1);
-        } }, dependencies: [i8.NgControlStatus, i8.NgModel, i9.DropDownListComponent, i10.TextBoxDirective, i11.LoadingComponent, i12.AppSwitcherComponent, i13.AppNavComponent, i14.TabContainerComponent, i15.AppAccessDialogComponent, i16.CommandPaletteComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n.mj-logo[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n\n.shell-container.hidden[_ngcontent-%COMP%] {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container[_ngcontent-%COMP%] {\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\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_header {\n  display: none;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]:not(.hide-tab-bar)     .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\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_content {\n  height: 100% !important;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]     .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header[_ngcontent-%COMP%] {\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 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n}\n\n\n\n.nav-bar-apps[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher[_ngcontent-%COMP%] {\n  \n\n  \n\n}\n\n.nav-bar-apps.left-of-user-menu[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%] {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\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: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.15s ease;\n  margin-top: 2px; \n\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n.spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\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: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.notification-btn[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.notification-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%] {\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 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%] {\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 0.15s;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .icon-fallback[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .avatar-img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .avatar-img[_ngcontent-%COMP%] {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.user-menu-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.user-context-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n.user-menu-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n\n\n.theme-toggle-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.theme-toggle-track[_ngcontent-%COMP%] {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb[_ngcontent-%COMP%] {\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: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-thumb[_ngcontent-%COMP%] {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n\n\n\n.user-menu-item[_ngcontent-%COMP%]   .menu-shortcut[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n\n\n.user-context-menu.menu-fade[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuSlideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_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 _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n\n\n.loading-reset-panel[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes _ngcontent-%COMP%_resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.hamburger-btn[_ngcontent-%COMP%] {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.mobile-nav-overlay[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n\n\n.mobile-nav-drawer[_ngcontent-%COMP%] {\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  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.mobile-nav-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\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: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n\n\n@media (max-width: 768px) {\n  .hamburger-btn[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .desktop-nav[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .desktop-only[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay[_ngcontent-%COMP%] {\n    display: block;\n  }\n\n  .mobile-nav-drawer[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .shell-header[_ngcontent-%COMP%] {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n\n\n  .settings-fullscreen-window {\n  \n\n  box-shadow: none !important;\n  border: none !important;\n}\n\n  .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n  .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n  .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n  .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n\n\n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"], \n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"], \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n\n\n\n\n\n.search-popup-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown[_ngcontent-%COMP%] {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n.notification-badge-mobile[_ngcontent-%COMP%] {\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: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n@media (max-width: 768px) {\n  .search-popup[_ngcontent-%COMP%] {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n  }\n}"] });
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.PinProgressVisible ? 52 : -1);
+        } }, dependencies: [i8.NgControlStatus, i8.NgModel, i9.MJDropdownComponent, i10.LoadingComponent, i11.AppSwitcherComponent, i12.AppNavComponent, i13.TabContainerComponent, i14.AppAccessDialogComponent, i15.CommandPaletteComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n.mj-logo[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n\n.shell-container.hidden[_ngcontent-%COMP%] {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container[_ngcontent-%COMP%] {\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\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_header {\n  display: none;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]:not(.hide-tab-bar)     .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\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_content {\n  height: 100% !important;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]     .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header[_ngcontent-%COMP%] {\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 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n}\n\n\n\n.nav-bar-apps[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher[_ngcontent-%COMP%] {\n  \n\n  \n\n}\n\n.nav-bar-apps.left-of-user-menu[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%] {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\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: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.15s ease;\n  margin-top: 2px; \n\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n.spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\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: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.notification-btn[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.notification-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%] {\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 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%] {\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 0.15s;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .icon-fallback[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .avatar-img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .avatar-img[_ngcontent-%COMP%] {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.user-menu-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.user-context-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n.user-menu-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n\n\n.theme-toggle-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.theme-toggle-track[_ngcontent-%COMP%] {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb[_ngcontent-%COMP%] {\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: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-thumb[_ngcontent-%COMP%] {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n\n\n\n.user-menu-item[_ngcontent-%COMP%]   .menu-shortcut[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n\n\n.user-context-menu.menu-fade[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuSlideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_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 _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n\n\n.loading-reset-panel[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes _ngcontent-%COMP%_resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.hamburger-btn[_ngcontent-%COMP%] {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.mobile-nav-overlay[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n\n\n.mobile-nav-drawer[_ngcontent-%COMP%] {\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  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.mobile-nav-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\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: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n\n\n@media (max-width: 768px) {\n  .hamburger-btn[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .desktop-nav[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .desktop-only[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay[_ngcontent-%COMP%] {\n    display: block;\n  }\n\n  .mobile-nav-drawer[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .shell-header[_ngcontent-%COMP%] {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n\n\n  .settings-fullscreen-window {\n  \n\n  box-shadow: none !important;\n  border: none !important;\n}\n\n  .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n  .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n  .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n  .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n\n\n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"], \n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"], \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n\n\n\n\n\n.search-popup-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown[_ngcontent-%COMP%] {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\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: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n.notification-badge-mobile[_ngcontent-%COMP%] {\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: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n@media (max-width: 768px) {\n  .search-popup[_ngcontent-%COMP%] {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n\n\n\n\n.pin-progress-backdrop[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_pinBackdropIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: _ngcontent-%COMP%_pinModalIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\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}"] });
 }
 (() => { (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\" kendoDialogContainer>\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\" (click)=\"toggleMobileNav()\" title=\"Menu\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0) {\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            [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 -->\n    <mj-app-switcher\n      [activeApp]=\"activeApp\"\n      [isViewingSystemTab]=\"isViewingSystemTab\"\n      [loadingAppId]=\"loadingAppId\"\n      (appSelected)=\"onAppSwitch($event)\">\n    </mj-app-switcher>\n\n    <!-- App Navigation (desktop only) -->\n    @if (activeApp) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n      </mj-app-nav>\n    }\n\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n\n    <!-- Actions (search, notifications, user menu) -->\n    <div class=\"header-actions\">\n      <button class=\"icon-btn desktop-only search-toggle-btn\" title=\"Search\" (click)=\"toggleSearch()\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\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              [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          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"User avatar\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\">\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                </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\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <kendo-dropdownlist\n        [data]=\"searchableEntities\"\n        textField=\"Name\"\n        valueField=\"ID\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </kendo-dropdownlist>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"Search...\"\n        kendoTextBox\n        class=\"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\" [class.open]=\"mobileNavOpen\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n    @if (activeApp) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\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      <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    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\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    }\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", styles: [":host {\n  display: block;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design token for theme switching & white-labeling */\n.mj-logo {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\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 */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .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 .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 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\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: 4px;\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: 8px;\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\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: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn i {\n  transition: transform 0.15s ease;\n  margin-top: 2px; /* 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.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\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: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\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 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\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 0.15s, transform 0.15s;\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 0.15s;\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: 16px;\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: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header .user-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\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: 4px 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: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\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: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\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  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\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: 8px;\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: 20px;\n  transition: background 0.15s;\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: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\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  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\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: 600;\n  font-size: 16px;\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: 18px;\n  transition: background 0.15s;\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: 16px 0;\n}\n\n.mobile-nav-section-title {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\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: 16px;\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 12px;\n    gap: 8px;\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: 12px 16px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\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/* ========================================\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: rgba(0, 0, 0, 0.3);\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: fixed;\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: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\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: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\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: 8px;\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: 16px;\n  transition: background 0.15s;\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: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\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}"] }]
-    }], () => [{ 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.SettingsDialogService }, { type: i0.ViewContainerRef }, { type: i2.TitleService }, { type: i2.DeveloperModeService }, { type: i7.CommandPaletteService }, { type: i2.ThemeService }], { searchInput: [{
+        args: [{ standalone: false, selector: 'mj-shell', template: "<div class=\"shell-container\" [class.hidden]=\"loading\" [class.tabs-visible]=\"tabBarVisible\">\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\" (click)=\"toggleMobileNav()\" title=\"Menu\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0) {\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            [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 -->\n    <mj-app-switcher\n      [activeApp]=\"activeApp\"\n      [isViewingSystemTab]=\"isViewingSystemTab\"\n      [loadingAppId]=\"loadingAppId\"\n      (appSelected)=\"onAppSwitch($event)\">\n    </mj-app-switcher>\n\n    <!-- App Navigation (desktop only) -->\n    @if (activeApp) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n      </mj-app-nav>\n    }\n\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n\n    <!-- Actions (search, notifications, user menu) -->\n    <div class=\"header-actions\">\n      <button class=\"icon-btn desktop-only search-toggle-btn\" title=\"Search\" (click)=\"toggleSearch()\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\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              [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          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"User avatar\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\">\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                </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\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <mj-dropdown\n        [Data]=\"searchableEntities\"\n        TextField=\"Name\"\n        ValueField=\"ID\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </mj-dropdown>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"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\" [class.open]=\"mobileNavOpen\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n    @if (activeApp) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\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      <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    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\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    }\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<!-- 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: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design token for theme switching & white-labeling */\n.mj-logo {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\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 */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .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 .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 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\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: 4px;\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: 8px;\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\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: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn i {\n  transition: transform 0.15s ease;\n  margin-top: 2px; /* 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.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\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: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\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 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\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 0.15s, transform 0.15s;\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 0.15s;\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: 16px;\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: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header .user-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\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: 4px 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: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\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: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\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  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\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: 8px;\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: 20px;\n  transition: background 0.15s;\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: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\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  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\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: 600;\n  font-size: 16px;\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: 18px;\n  transition: background 0.15s;\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: 16px 0;\n}\n\n.mobile-nav-section-title {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\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: 16px;\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 12px;\n    gap: 8px;\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: 12px 16px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\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/* ========================================\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: rgba(0, 0, 0, 0.3);\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: fixed;\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: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\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: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\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: 8px;\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: 16px;\n  transition: background 0.15s;\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: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\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: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\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}"] }]
+    }], () => [{ 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.SettingsDialogService }, { type: i0.ViewContainerRef }, { type: i2.TitleService }, { type: i2.DeveloperModeService }, { type: i7.CommandPaletteService }, { type: i2.ThemeService }, { type: i2.HomeAppPinService }], { searchInput: [{
             type: ViewChild,
             args: ['searchInput']
+        }], tabContainerRef: [{
+            type: ViewChild,
+            args: [TabContainerComponent]
         }], appAccessDialog: [{
             type: ViewChild,
             args: ['appAccessDialog']
@@ -2566,5 +2737,5 @@ export class ShellComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShellComponent, { className: "ShellComponent", filePath: "src/lib/shell/shell.component.ts", lineNumber: 45 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShellComponent, { className: "ShellComponent", filePath: "src/lib/shell/shell.component.ts", lineNumber: 46 }); })();
 //# sourceMappingURL=shell.component.js.map