@memberjunction/ng-dashboards 2.127.0 → 2.129.0

package/dist/Home/home-dashboard.component.js

@@ -9,315 +9,324 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseDashboard } from '@memberjunction/ng-shared';
 import { RegisterClass } from '@memberjunction/global';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@memberjunction/ng-shared";
 import * as i3 from "@angular/router";
 import * as i4 from "@angular/common";
-import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@memberjunction/ng-explorer-settings";
+import * as i7 from "@memberjunction/ng-shared-generic";
 const _c0 = ["appConfigDialog"];
 function HomeDashboardComponent_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "mj-loading", 10);
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "mj-loading", 12);
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_div_9_div_5_p_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 26);
+    i0.ɵɵelementStart(0, "p", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r2 = i0.ɵɵnextContext().$implicit;
+    const app_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(app_r2.Description);
+    i0.ɵɵtextInterpolate(app_r3.Description);
 } }
 function HomeDashboardComponent_div_9_div_5_div_8_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
+    const item_r5 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r4.Icon);
+    i0.ɵɵclassMap(item_r5.Icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.Label);
+    i0.ɵɵtextInterpolate(item_r5.Label);
 } }
 function HomeDashboardComponent_div_9_div_5_div_8_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const app_r3 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r2.getNavItemsCount(app_r2) - 3, " more ");
+    i0.ɵɵtextInterpolate1(" +", ctx_r3.getNavItemsCount(app_r3) - 3, " more ");
 } }
 function HomeDashboardComponent_div_9_div_5_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵtemplate(1, HomeDashboardComponent_div_9_div_5_div_8_div_1_Template, 4, 3, "div", 28)(2, HomeDashboardComponent_div_9_div_5_div_8_span_2_Template, 2, 1, "span", 29);
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵtemplate(1, HomeDashboardComponent_div_9_div_5_div_8_div_1_Template, 4, 3, "div", 30)(2, HomeDashboardComponent_div_9_div_5_div_8_span_2_Template, 2, 1, "span", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const app_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.getNavItemsPreview(app_r2));
+    i0.ɵɵproperty("ngForOf", ctx_r3.getNavItemsPreview(app_r3));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.getNavItemsCount(app_r2) > 3);
+    i0.ɵɵproperty("ngIf", ctx_r3.getNavItemsCount(app_r3) > 3);
 } }
 function HomeDashboardComponent_div_9_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_div_9_div_5_Template_div_click_0_listener() { const app_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAppClick(app_r2)); });
-    i0.ɵɵelementStart(1, "div", 18)(2, "div", 19);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_9_div_5_Template_div_click_0_listener() { const app_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAppClick(app_r3)); });
+    i0.ɵɵelementStart(1, "div", 20)(2, "div", 21);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 20)(5, "h3", 21);
+    i0.ɵɵelementStart(4, "div", 22)(5, "h3", 23);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, HomeDashboardComponent_div_9_div_5_p_7_Template, 2, 1, "p", 22)(8, HomeDashboardComponent_div_9_div_5_div_8_Template, 3, 2, "div", 23);
+    i0.ɵɵtemplate(7, HomeDashboardComponent_div_9_div_5_p_7_Template, 2, 1, "p", 24)(8, HomeDashboardComponent_div_9_div_5_div_8_Template, 3, 2, "div", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 24);
-    i0.ɵɵelement(10, "i", 25);
+    i0.ɵɵelementStart(9, "div", 26);
+    i0.ɵɵelement(10, "i", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const app_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--app-color", app_r2.GetColor());
+    const app_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("--app-color", app_r3.GetColor());
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(app_r2.Icon || "fa-solid fa-cube");
+    i0.ɵɵclassMap(app_r3.Icon || "fa-solid fa-cube");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(app_r2.Name);
+    i0.ɵɵtextInterpolate(app_r3.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", app_r2.Description);
+    i0.ɵɵproperty("ngIf", app_r3.Description);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.getNavItemsCount(app_r2) > 0);
+    i0.ɵɵproperty("ngIf", ctx_r3.getNavItemsCount(app_r3) > 0);
 } }
 function HomeDashboardComponent_div_9_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33);
-    i0.ɵɵelement(2, "i", 34);
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵelement(2, "i", 36);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Applications Available");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p");
-    i0.ɵɵtext(6, "You don't have any applications configured yet. Use the app switcher to configure your applications.");
+    i0.ɵɵtext(6, "You don't have any applications configured yet.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 37);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_9_div_6_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.openConfigDialog()); });
+    i0.ɵɵelement(8, "i", 38);
+    i0.ɵɵtext(9, " Configure Applications ");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "h2", 12);
-    i0.ɵɵelement(2, "i", 13);
+    i0.ɵɵelementStart(0, "div", 13)(1, "h2", 14);
+    i0.ɵɵelement(2, "i", 15);
     i0.ɵɵtext(3, " Your Applications ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 14);
-    i0.ɵɵtemplate(5, HomeDashboardComponent_div_9_div_5_Template, 11, 7, "div", 15);
+    i0.ɵɵelementStart(4, "div", 16);
+    i0.ɵɵtemplate(5, HomeDashboardComponent_div_9_div_5_Template, 11, 7, "div", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, HomeDashboardComponent_div_9_div_6_Template, 7, 0, "div", 16);
+    i0.ɵɵtemplate(6, HomeDashboardComponent_div_9_div_6_Template, 10, 0, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r2.apps);
+    i0.ɵɵproperty("ngForOf", ctx_r3.apps);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.apps.length === 0);
+    i0.ɵɵproperty("ngIf", ctx_r3.apps.length === 0);
 } }
 function HomeDashboardComponent_div_10_div_8_div_7_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_8_div_7_Template_div_click_0_listener() { const notification_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r7)); });
-    i0.ɵɵelementStart(1, "div", 52);
-    i0.ɵɵelement(2, "i", 47);
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_8_div_7_Template_div_click_0_listener() { const notification_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.onNotificationClick(notification_r9)); });
+    i0.ɵɵelementStart(1, "div", 56);
+    i0.ɵɵelement(2, "i", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 53)(4, "span", 54);
+    i0.ɵɵelementStart(3, "div", 57)(4, "span", 58);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵelementStart(6, "span", 59);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "slice");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const notification_r7 = ctx.$implicit;
+    const notification_r9 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(notification_r7.Title);
+    i0.ɵɵtextInterpolate(notification_r9.Title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(8, 3, notification_r7.Message, 0, 40), "", ((notification_r7.Message == null ? null : notification_r7.Message.length) || 0) > 40 ? "..." : "", "");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(8, 3, notification_r9.Message, 0, 40), "", ((notification_r9.Message == null ? null : notification_r9.Message.length) || 0) > 40 ? "..." : "", "");
 } }
 function HomeDashboardComponent_div_10_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45)(1, "h4", 46);
-    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵelementStart(0, "div", 49)(1, "h4", 50);
+    i0.ɵɵelement(2, "i", 51);
     i0.ɵɵtext(3, " Notifications ");
-    i0.ɵɵelementStart(4, "span", 48);
+    i0.ɵɵelementStart(4, "span", 52);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 49);
-    i0.ɵɵtemplate(7, HomeDashboardComponent_div_10_div_8_div_7_Template, 9, 7, "div", 50);
+    i0.ɵɵelementStart(6, "div", 53);
+    i0.ɵɵtemplate(7, HomeDashboardComponent_div_10_div_8_div_7_Template, 9, 7, "div", 54);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.unreadNotifications.length);
+    i0.ɵɵtextInterpolate(ctx_r3.unreadNotifications.length);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.unreadNotifications);
+    i0.ɵɵproperty("ngForOf", ctx_r3.unreadNotifications);
 } }
 function HomeDashboardComponent_div_10_div_9_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_9_div_4_div_1_Template_div_click_0_listener() { const favorite_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r9)); });
-    i0.ɵɵelementStart(1, "div", 52);
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_9_div_4_div_1_Template_div_click_0_listener() { const favorite_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.onFavoriteClick(favorite_r11)); });
+    i0.ɵɵelementStart(1, "div", 56);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 53)(4, "span", 54);
+    i0.ɵɵelementStart(3, "div", 57)(4, "span", 58);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵelementStart(6, "span", 59);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const favorite_r9 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const favorite_r11 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getFavoriteIcon(favorite_r9));
+    i0.ɵɵclassMap(ctx_r3.getFavoriteIcon(favorite_r11));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(favorite_r9.RecordID);
+    i0.ɵɵtextInterpolate(favorite_r11.RecordID);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(favorite_r9.Entity);
+    i0.ɵɵtextInterpolate(favorite_r11.Entity);
 } }
 function HomeDashboardComponent_div_10_div_9_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtemplate(1, HomeDashboardComponent_div_10_div_9_div_4_div_1_Template, 8, 4, "div", 60);
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵtemplate(1, HomeDashboardComponent_div_10_div_9_div_4_div_1_Template, 8, 4, "div", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.favorites);
+    i0.ɵɵproperty("ngForOf", ctx_r3.favorites);
 } }
 function HomeDashboardComponent_div_10_div_9_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading...");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_div_10_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56)(1, "h4", 46);
-    i0.ɵɵelement(2, "i", 57);
+    i0.ɵɵelementStart(0, "div", 60)(1, "h4", 50);
+    i0.ɵɵelement(2, "i", 61);
     i0.ɵɵtext(3, " Favorites ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, HomeDashboardComponent_div_10_div_9_div_4_Template, 2, 1, "div", 58)(5, HomeDashboardComponent_div_10_div_9_div_5_Template, 4, 0, "div", 59);
+    i0.ɵɵtemplate(4, HomeDashboardComponent_div_10_div_9_div_4_Template, 2, 1, "div", 62)(5, HomeDashboardComponent_div_10_div_9_div_5_Template, 4, 0, "div", 63);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", !ctx_r2.favoritesLoading);
+    i0.ɵɵproperty("ngIf", !ctx_r3.favoritesLoading);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.favoritesLoading);
+    i0.ɵɵproperty("ngIf", ctx_r3.favoritesLoading);
 } }
 function HomeDashboardComponent_div_10_div_10_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_10_div_4_div_1_Template_div_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r11)); });
-    i0.ɵɵelementStart(1, "div", 52);
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_div_10_div_4_div_1_Template_div_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.onRecentClick(item_r13)); });
+    i0.ɵɵelementStart(1, "div", 56);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 53)(4, "span", 54);
+    i0.ɵɵelementStart(3, "div", 57)(4, "span", 58);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵelementStart(6, "span", 59);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r11 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const item_r13 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getResourceIcon(item_r11.resourceType));
+    i0.ɵɵclassMap(ctx_r3.getResourceIcon(item_r13.resourceType));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r11.recordName || item_r11.recordId);
+    i0.ɵɵtextInterpolate(item_r13.recordName || item_r13.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", item_r11.entityName, " \u00B7 ", ctx_r2.formatDate(item_r11.latestAt), "");
+    i0.ɵɵtextInterpolate2("", item_r13.entityName, " \u00B7 ", ctx_r3.formatDate(item_r13.latestAt), "");
 } }
 function HomeDashboardComponent_div_10_div_10_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtemplate(1, HomeDashboardComponent_div_10_div_10_div_4_div_1_Template, 8, 5, "div", 66);
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵtemplate(1, HomeDashboardComponent_div_10_div_10_div_4_div_1_Template, 8, 5, "div", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.recentItems);
+    i0.ɵɵproperty("ngForOf", ctx_r3.recentItems);
 } }
 function HomeDashboardComponent_div_10_div_10_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading...");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_div_10_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "h4", 46);
-    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵelementStart(0, "div", 68)(1, "h4", 50);
+    i0.ɵɵelement(2, "i", 69);
     i0.ɵɵtext(3, " Recent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, HomeDashboardComponent_div_10_div_10_div_4_Template, 2, 1, "div", 58)(5, HomeDashboardComponent_div_10_div_10_div_5_Template, 4, 0, "div", 59);
+    i0.ɵɵtemplate(4, HomeDashboardComponent_div_10_div_10_div_4_Template, 2, 1, "div", 62)(5, HomeDashboardComponent_div_10_div_10_div_5_Template, 4, 0, "div", 63);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", !ctx_r2.recentsLoading);
+    i0.ɵɵproperty("ngIf", !ctx_r3.recentsLoading);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.recentsLoading);
+    i0.ɵɵproperty("ngIf", ctx_r3.recentsLoading);
 } }
 function HomeDashboardComponent_div_10_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 73);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No quick access items");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 36)(2, "h3");
-    i0.ɵɵelement(3, "i", 37);
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 40)(2, "h3");
+    i0.ɵɵelement(3, "i", 41);
     i0.ɵɵtext(4, " Quick Access ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 38);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(6, "i", 39);
+    i0.ɵɵelementStart(5, "button", 42);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_div_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.toggleSidebar()); });
+    i0.ɵɵelement(6, "i", 43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 40);
-    i0.ɵɵtemplate(8, HomeDashboardComponent_div_10_div_8_Template, 8, 2, "div", 41)(9, HomeDashboardComponent_div_10_div_9_Template, 6, 2, "div", 42)(10, HomeDashboardComponent_div_10_div_10_Template, 6, 2, "div", 43)(11, HomeDashboardComponent_div_10_div_11_Template, 4, 0, "div", 44);
+    i0.ɵɵelementStart(7, "div", 44);
+    i0.ɵɵtemplate(8, HomeDashboardComponent_div_10_div_8_Template, 8, 2, "div", 45)(9, HomeDashboardComponent_div_10_div_9_Template, 6, 2, "div", 46)(10, HomeDashboardComponent_div_10_div_10_Template, 6, 2, "div", 47)(11, HomeDashboardComponent_div_10_div_11_Template, 4, 0, "div", 48);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngIf", ctx_r2.unreadNotifications.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r3.unreadNotifications.length > 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.favorites.length > 0 || ctx_r2.favoritesLoading);
+    i0.ɵɵproperty("ngIf", ctx_r3.favorites.length > 0 || ctx_r3.favoritesLoading);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.recentItems.length > 0 || ctx_r2.recentsLoading);
+    i0.ɵɵproperty("ngIf", ctx_r3.recentItems.length > 0 || ctx_r3.recentsLoading);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.favoritesLoading && !ctx_r2.recentsLoading && ctx_r2.unreadNotifications.length === 0 && ctx_r2.favorites.length === 0 && ctx_r2.recentItems.length === 0);
+    i0.ɵɵproperty("ngIf", !ctx_r3.favoritesLoading && !ctx_r3.recentsLoading && ctx_r3.unreadNotifications.length === 0 && ctx_r3.favorites.length === 0 && ctx_r3.recentItems.length === 0);
 } }
 function HomeDashboardComponent_button_11_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelementStart(0, "span", 76);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.unreadNotifications.length);
+    i0.ɵɵtextInterpolate(ctx_r3.unreadNotifications.length);
 } }
 function HomeDashboardComponent_button_11_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 70);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(1, "i", 37);
-    i0.ɵɵtemplate(2, HomeDashboardComponent_button_11_span_2_Template, 2, 1, "span", 71);
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 74);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.toggleSidebar()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtemplate(2, HomeDashboardComponent_button_11_span_2_Template, 2, 1, "span", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.unreadNotifications.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r3.unreadNotifications.length > 0);
 } }
 /**
  * Home Dashboard - Personalized home screen showing all available applications
@@ -378,7 +387,10 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
         this.router = router;
         this.cdr = cdr;
     }
-    async ngOnInit() {
+    async GetResourceDisplayName(data) {
+        return "Home";
+    }
+    async ngAfterViewInit() {
         // Get current user info
         this.currentUser = {
             Name: this.metadata.CurrentUser?.Name || 'User',
@@ -401,10 +413,8 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
             .subscribe(apps => {
             // Exclude the Home app from the list (users are already on Home)
             this.apps = apps.filter(app => app.Name !== 'Home');
-            // Only stop loading when we actually have apps (non-empty array means loaded)
-            if (apps.length > 0) {
-                this.isLoading = false;
-            }
+            this.isLoading = false;
+            this.NotifyLoadComplete();
             this.cdr.detectChanges();
         });
         // Subscribe to unread notifications
@@ -423,11 +433,11 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
             this.recentsLoading = false;
             this.cdr.detectChanges();
         });
-        // Load favorites and recents
-        await Promise.all([
-            this.loadFavorites(),
-            this.loadRecents()
-        ]);
+        // Favorites and recents load asynchronously in the sidebar
+        this.NotifyLoadComplete();
+        // Load favorites and recents asynchronously (don't block rendering)
+        this.loadFavorites();
+        this.loadRecents();
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -501,22 +511,13 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
         }));
     }
     /**
-     * Load user favorites from the database
+     * Load user favorites from UserInfoEngine (cached)
      */
     async loadFavorites() {
         try {
             this.favoritesLoading = true;
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'User Favorites',
-                ExtraFilter: `UserID='${this.metadata.CurrentUser.ID}'`,
-                OrderBy: '__mj_CreatedAt DESC',
-                MaxRows: 10,
-                ResultType: 'entity_object'
-            });
-            if (result.Success && result.Results) {
-                this.favorites = result.Results;
-            }
+            // Get first 10 favorites (already ordered by __mj_CreatedAt DESC in engine)
+            this.favorites = UserInfoEngine.Instance.UserFavorites.slice(0, 10);
         }
         catch (error) {
             console.error('Error loading favorites:', error);
@@ -532,6 +533,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
     async loadRecents() {
         try {
             this.recentsLoading = true;
+            this.cdr.detectChanges();
             await this.recentAccessService.loadRecentItems(10);
         }
         catch (error) {
@@ -650,17 +652,21 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appConfigDialog = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 9, consts: [[1, "home-dashboard"], [1, "main-content"], [1, "home-header"], [1, "greeting-section"], [1, "date"], ["class", "loading-container", 4, "ngIf"], ["class", "apps-section", 4, "ngIf"], ["class", "quick-access-sidebar", 4, "ngIf"], ["class", "sidebar-fab-toggle", "title", "Quick Access", 3, "click", 4, "ngIf"], [1, "loading-container"], ["text", "Loading your applications...", "size", "large"], [1, "apps-section"], [1, "section-title"], [1, "fa-solid", "fa-grid-2"], [1, "apps-grid"], ["class", "app-card", 3, "--app-color", "click", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "app-card", 3, "click"], [1, "app-icon-wrapper"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], ["class", "app-description", 4, "ngIf"], ["class", "nav-preview", 4, "ngIf"], [1, "app-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "app-description"], [1, "nav-preview"], ["class", "nav-item-chip", 4, "ngFor", "ngForOf"], ["class", "more-items", 4, "ngIf"], [1, "nav-item-chip"], [1, "more-items"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "quick-access-sidebar"], [1, "sidebar-header"], [1, "fa-solid", "fa-bolt"], ["title", "Close panel", 1, "sidebar-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sidebar-content"], ["class", "sidebar-section notifications-section", 4, "ngIf"], ["class", "sidebar-section favorites-section", 4, "ngIf"], ["class", "sidebar-section recents-section", 4, "ngIf"], ["class", "sidebar-empty", 4, "ngIf"], [1, "sidebar-section", "notifications-section"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], ["class", "sidebar-item notification-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "notification-item", 3, "click"], [1, "sidebar-item-icon"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "sidebar-section", "favorites-section"], [1, "fa-solid", "fa-star"], ["class", "sidebar-items", 4, "ngIf"], ["class", "sidebar-loading", 4, "ngIf"], ["class", "sidebar-item favorite-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "favorite-item", 3, "click"], [1, "sidebar-loading"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "sidebar-section", "recents-section"], [1, "fa-solid", "fa-clock-rotate-left"], ["class", "sidebar-item recent-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "recent-item", 3, "click"], [1, "sidebar-empty"], [1, "fa-solid", "fa-inbox"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], ["class", "fab-badge", 4, "ngIf"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "h1");
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 10, consts: [["appConfigDialog", ""], [1, "home-dashboard"], [1, "main-content"], [1, "home-header"], [1, "greeting-section"], [1, "date"], ["class", "loading-container", 4, "ngIf"], ["class", "apps-section", 4, "ngIf"], ["class", "quick-access-sidebar", 4, "ngIf"], ["class", "sidebar-fab-toggle", "title", "Quick Access", 3, "click", 4, "ngIf"], [3, "showDialogChange", "configSaved", "showDialog"], [1, "loading-container"], ["text", "Loading your applications...", "size", "large"], [1, "apps-section"], [1, "section-title"], [1, "fa-solid", "fa-grid-2"], [1, "apps-grid"], ["class", "app-card", 3, "--app-color", "click", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "app-card", 3, "click"], [1, "app-icon-wrapper"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], ["class", "app-description", 4, "ngIf"], ["class", "nav-preview", 4, "ngIf"], [1, "app-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "app-description"], [1, "nav-preview"], ["class", "nav-item-chip", 4, "ngFor", "ngForOf"], ["class", "more-items", 4, "ngIf"], [1, "nav-item-chip"], [1, "more-items"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "quick-access-sidebar"], [1, "sidebar-header"], [1, "fa-solid", "fa-bolt"], ["title", "Close panel", 1, "sidebar-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sidebar-content"], ["class", "sidebar-section notifications-section", 4, "ngIf"], ["class", "sidebar-section favorites-section", 4, "ngIf"], ["class", "sidebar-section recents-section", 4, "ngIf"], ["class", "sidebar-empty", 4, "ngIf"], [1, "sidebar-section", "notifications-section"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], ["class", "sidebar-item notification-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "notification-item", 3, "click"], [1, "sidebar-item-icon"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "sidebar-section", "favorites-section"], [1, "fa-solid", "fa-star"], ["class", "sidebar-items", 4, "ngIf"], ["class", "sidebar-loading", 4, "ngIf"], ["class", "sidebar-item favorite-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "favorite-item", 3, "click"], [1, "sidebar-loading"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "sidebar-section", "recents-section"], [1, "fa-solid", "fa-clock-rotate-left"], ["class", "sidebar-item recent-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "sidebar-item", "recent-item", 3, "click"], [1, "sidebar-empty"], [1, "fa-solid", "fa-inbox"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], ["class", "fab-badge", 4, "ngIf"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "h1");
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "p", 4);
+            i0.ɵɵelementStart(6, "p", 5);
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(8, HomeDashboardComponent_div_8_Template, 2, 0, "div", 5)(9, HomeDashboardComponent_div_9_Template, 7, 2, "div", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(10, HomeDashboardComponent_div_10_Template, 12, 4, "div", 7)(11, HomeDashboardComponent_button_11_Template, 3, 1, "button", 8);
+            i0.ɵɵtemplate(8, HomeDashboardComponent_div_8_Template, 2, 0, "div", 6)(9, HomeDashboardComponent_div_9_Template, 7, 2, "div", 7);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(10, HomeDashboardComponent_div_10_Template, 12, 4, "div", 8)(11, HomeDashboardComponent_button_11_Template, 3, 1, "button", 9);
+            i0.ɵɵelementStart(12, "mj-user-app-config", 10, 0);
+            i0.ɵɵtwoWayListener("showDialogChange", function HomeDashboardComponent_Template_mj_user_app_config_showDialogChange_12_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("configSaved", function HomeDashboardComponent_Template_mj_user_app_config_configSaved_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onConfigSaved()); });
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("sidebar-open", ctx.sidebarOpen && ctx.hasSidebarContent);
             i0.ɵɵadvance(5);
@@ -675,7 +681,9 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseDashboard
             i0.ɵɵproperty("ngIf", ctx.hasSidebarContent);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.hasSidebarContent && !ctx.sidebarOpen);
-        } }, dependencies: [i4.NgForOf, i4.NgIf, i5.LoadingComponent, i4.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  overflow-y: auto;\n  transition: margin-right 0.3s ease;\n}\n\n\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n  margin-right: 320px;\n}\n\n\n\n.home-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 32px;\n}\n\n.greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 32px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  color: #6c757d;\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 80px; \n\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: 50%;\n  background: #1976d2;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);\n  transition: all 0.2s ease;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle[_ngcontent-%COMP%]:hover {\n  background: #1565c0;\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.5);\n}\n\n.fab-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e53935;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: 16px;\n  color: #6c757d;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n\n\n.apps-section[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 24px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n\n\n.apps-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n}\n\n\n\n.app-card[_ngcontent-%COMP%] {\n  --app-color: #757575;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 14px;\n  border: 1px solid #e9ecef;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.app-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background: var(--app-color);\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--app-color);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n  transform: translateY(-3px);\n}\n\n.app-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.25s ease;\n}\n\n.app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--app-color);\n  transition: transform 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-icon[_ngcontent-%COMP%] {\n  background: var(--app-color);\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  transform: scale(1.1);\n}\n\n\n\n.app-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 17px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.app-description[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 13px;\n  color: #6c757d;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.nav-preview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.nav-item-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  background: #f8f9fa;\n  border-radius: 5px;\n  font-size: 11px;\n  color: #495057;\n}\n\n.nav-item-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: #6c757d;\n}\n\n.more-items[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #6c757d;\n  font-style: italic;\n}\n\n\n\n.app-arrow[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%) translateX(10px);\n  opacity: 0;\n  transition: all 0.25s ease;\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-arrow[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(-50%) translateX(0);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  background: white;\n  border-radius: 16px;\n  border: 2px dashed #dee2e6;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #adb5bd;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: #6c757d;\n  max-width: 400px;\n}\n\n\n\n\n\n.quick-access-sidebar[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: white;\n  border-left: 1px solid #e9ecef;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);\n}\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .quick-access-sidebar[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #fafbfc;\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212529;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #6c757d;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n  background: #f1f3f4;\n  color: #212529;\n}\n\n.sidebar-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.notifications-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f57c00;\n}\n\n.favorites-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.recents-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.section-badge[_ngcontent-%COMP%] {\n  background: #e53935;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: auto;\n}\n\n\n\n.sidebar-items[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sidebar-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  background: #f8f9fa;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #fff3e0;\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f57c00;\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #fff8e1;\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f9a825;\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.sidebar-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.sidebar-item-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #212529;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #6c757d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6c757d;\n  font-size: 13px;\n  padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.sidebar-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: #adb5bd;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n}\n\n\n\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    width: 280px;\n  }\n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n    margin-right: 280px;\n  }\n\n  .apps-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  }\n}\n\n\n\n@media (max-width: 992px) {\n  .main-content[_ngcontent-%COMP%] {\n    padding: 24px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 28px;\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px; \n\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n  }\n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n    margin-right: 0;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n  }\n}\n\n\n\n@media (max-width: 768px) {\n  .home-dashboard[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 100%;\n    overflow: visible;\n  }\n\n  .main-content[_ngcontent-%COMP%] {\n    padding: 20px;\n    padding-bottom: 100px; \n\n    overflow: visible;\n  }\n\n  .home-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 24px;\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px; \n\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 100; \n\n    border-left: none;\n    border-top: 1px solid #e9ecef;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 99;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    display: none;\n  }\n\n  .apps-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .app-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .app-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .app-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .nav-preview[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: 18px;\n  }\n}\n\n@media (max-width: 480px) {\n  .main-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    padding-bottom: 80px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    margin-bottom: 16px;\n  }\n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    bottom: 16px;\n    right: 16px;\n    width: 44px;\n    height: 44px;\n    font-size: 16px;\n  }\n}"] });
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("showDialog", ctx.showConfigDialog);
+        } }, dependencies: [i4.NgForOf, i4.NgIf, i5.ButtonComponent, i6.UserAppConfigComponent, i7.LoadingComponent, i4.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  overflow-y: auto;\n  transition: margin-right 0.3s ease;\n}\n\n\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n  margin-right: 320px;\n}\n\n\n\n.home-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 32px;\n}\n\n.greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 32px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  color: #6c757d;\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 80px; \n\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: 50%;\n  background: #1976d2;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);\n  transition: all 0.2s ease;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle[_ngcontent-%COMP%]:hover {\n  background: #1565c0;\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.5);\n}\n\n.fab-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e53935;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: 16px;\n  color: #6c757d;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n\n\n.apps-section[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 24px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n\n\n.apps-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n}\n\n\n\n.app-card[_ngcontent-%COMP%] {\n  --app-color: #757575;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 14px;\n  border: 1px solid #e9ecef;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.app-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background: var(--app-color);\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--app-color);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n  transform: translateY(-3px);\n}\n\n.app-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.25s ease;\n}\n\n.app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--app-color);\n  transition: transform 0.25s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-icon[_ngcontent-%COMP%] {\n  background: var(--app-color);\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  transform: scale(1.1);\n}\n\n\n\n.app-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 17px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.app-description[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 13px;\n  color: #6c757d;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.nav-preview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.nav-item-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  background: #f8f9fa;\n  border-radius: 5px;\n  font-size: 11px;\n  color: #495057;\n}\n\n.nav-item-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: #6c757d;\n}\n\n.more-items[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #6c757d;\n  font-style: italic;\n}\n\n\n\n.app-arrow[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%) translateX(10px);\n  opacity: 0;\n  transition: all 0.25s ease;\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-card[_ngcontent-%COMP%]:hover   .app-arrow[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(-50%) translateX(0);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  background: white;\n  border-radius: 16px;\n  border: 2px dashed #dee2e6;\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #adb5bd;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: #6c757d;\n  max-width: 400px;\n}\n\n.empty-state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n\n\n\n\n.quick-access-sidebar[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: white;\n  border-left: 1px solid #e9ecef;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);\n}\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .quick-access-sidebar[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #fafbfc;\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212529;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #6c757d;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n  background: #f1f3f4;\n  color: #212529;\n}\n\n.sidebar-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n\n\n.sidebar-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.sidebar-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.notifications-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f57c00;\n}\n\n.favorites-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.recents-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.section-badge[_ngcontent-%COMP%] {\n  background: #e53935;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: auto;\n}\n\n\n\n.sidebar-items[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sidebar-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  background: #f8f9fa;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #fff3e0;\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f57c00;\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #fff8e1;\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f9a825;\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.sidebar-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.sidebar-item-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #212529;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #6c757d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6c757d;\n  font-size: 13px;\n  padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.sidebar-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: #adb5bd;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n}\n\n\n\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    width: 280px;\n  }\n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n    margin-right: 280px;\n  }\n\n  .apps-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  }\n}\n\n\n\n@media (max-width: 992px) {\n  .main-content[_ngcontent-%COMP%] {\n    padding: 24px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 28px;\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px; \n\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n  }\n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n    margin-right: 0;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n  }\n}\n\n\n\n@media (max-width: 768px) {\n  .home-dashboard[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 100%;\n    overflow: visible;\n  }\n\n  .main-content[_ngcontent-%COMP%] {\n    padding: 20px;\n    padding-bottom: 100px; \n\n    overflow: visible;\n  }\n\n  .home-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 24px;\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px; \n\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 100; \n\n    border-left: none;\n    border-top: 1px solid #e9ecef;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 99;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    display: none;\n  }\n\n  .apps-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .app-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .app-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .app-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n  }\n\n  .nav-preview[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: 18px;\n  }\n}\n\n@media (max-width: 480px) {\n  .main-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    padding-bottom: 80px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    margin-bottom: 16px;\n  }\n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    bottom: 16px;\n    right: 16px;\n    width: 44px;\n    height: 44px;\n    font-size: 16px;\n  }\n}"] });
 };
 HomeDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'HomeDashboard')
@@ -683,7 +691,7 @@ HomeDashboardComponent = __decorate([
 export { HomeDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'mj-home-dashboard', template: "<div class=\"home-dashboard\" [class.sidebar-open]=\"sidebarOpen && hasSidebarContent\">\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Header Section -->\n    <div class=\"home-header\">\n      <div class=\"greeting-section\">\n        <h1>{{ greeting }}, {{ currentUser?.Name }}</h1>\n        <p class=\"date\">{{ formattedDate }}</p>\n      </div>\n    </div>\n\n    <!-- Loading State -->\n    <div class=\"loading-container\" *ngIf=\"isLoading\">\n      <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n    </div>\n\n    <!-- Apps Grid -->\n    <div class=\"apps-section\" *ngIf=\"!isLoading\">\n      <h2 class=\"section-title\">\n        <i class=\"fa-solid fa-grid-2\"></i>\n        Your Applications\n      </h2>\n\n      <div class=\"apps-grid\">\n        <div *ngFor=\"let app of apps\"\n             class=\"app-card\"\n             [style.--app-color]=\"app.GetColor()\"\n             (click)=\"onAppClick(app)\">\n          <!-- App Icon -->\n          <div class=\"app-icon-wrapper\">\n            <div class=\"app-icon\">\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            </div>\n          </div>\n\n          <!-- App Info -->\n          <div class=\"app-info\">\n            <h3 class=\"app-name\">{{ app.Name }}</h3>\n            <p class=\"app-description\" *ngIf=\"app.Description\">{{ app.Description }}</p>\n\n            <!-- Nav Items Preview -->\n            <div class=\"nav-preview\" *ngIf=\"getNavItemsCount(app) > 0\">\n              <div class=\"nav-item-chip\" *ngFor=\"let item of getNavItemsPreview(app)\">\n                <i [class]=\"item.Icon\"></i>\n                <span>{{ item.Label }}</span>\n              </div>\n              <span class=\"more-items\" *ngIf=\"getNavItemsCount(app) > 3\">\n                +{{ getNavItemsCount(app) - 3 }} more\n              </span>\n            </div>\n          </div>\n\n          <!-- Hover Arrow -->\n          <div class=\"app-arrow\">\n            <i class=\"fa-solid fa-arrow-right\"></i>\n          </div>\n        </div>\n      </div>\n\n      <!-- Empty State -->\n      <div class=\"empty-state\" *ngIf=\"apps.length === 0\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </div>\n        <h3>No Applications Available</h3>\n        <p>You don't have any applications configured yet. Use the app switcher to configure your applications.</p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsible Right Sidebar -->\n  <div class=\"quick-access-sidebar\" *ngIf=\"hasSidebarContent\">\n    <div class=\"sidebar-header\">\n      <h3>\n        <i class=\"fa-solid fa-bolt\"></i>\n        Quick Access\n      </h3>\n      <button class=\"sidebar-close-btn\" (click)=\"toggleSidebar()\" title=\"Close panel\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n\n    <div class=\"sidebar-content\">\n      <!-- Unread Notifications Section -->\n      <div class=\"sidebar-section notifications-section\" *ngIf=\"unreadNotifications.length > 0\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-bell\"></i>\n          Notifications\n          <span class=\"section-badge\">{{ unreadNotifications.length }}</span>\n        </h4>\n        <div class=\"sidebar-items\">\n          <div *ngFor=\"let notification of unreadNotifications\"\n               class=\"sidebar-item notification-item\"\n               (click)=\"onNotificationClick(notification)\">\n            <div class=\"sidebar-item-icon\">\n              <i class=\"fa-solid fa-bell\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ notification.Title }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ notification.Message | slice:0:40 }}{{ (notification.Message?.length || 0) > 40 ? '...' : '' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Favorites Section -->\n      <div class=\"sidebar-section favorites-section\" *ngIf=\"favorites.length > 0 || favoritesLoading\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-star\"></i>\n          Favorites\n        </h4>\n        <div class=\"sidebar-items\" *ngIf=\"!favoritesLoading\">\n          <div *ngFor=\"let favorite of favorites\"\n               class=\"sidebar-item favorite-item\"\n               (click)=\"onFavoriteClick(favorite)\">\n            <div class=\"sidebar-item-icon\">\n              <i [class]=\"getFavoriteIcon(favorite)\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ favorite.RecordID }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ favorite.Entity }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"sidebar-loading\" *ngIf=\"favoritesLoading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading...</span>\n        </div>\n      </div>\n\n      <!-- Recents Section -->\n      <div class=\"sidebar-section recents-section\" *ngIf=\"recentItems.length > 0 || recentsLoading\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          Recent\n        </h4>\n        <div class=\"sidebar-items\" *ngIf=\"!recentsLoading\">\n          <div *ngFor=\"let item of recentItems\"\n               class=\"sidebar-item recent-item\"\n               (click)=\"onRecentClick(item)\">\n            <div class=\"sidebar-item-icon\">\n              <i [class]=\"getResourceIcon(item.resourceType)\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ item.recordName || item.recordId }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ item.entityName }} \u00B7 {{ formatDate(item.latestAt) }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"sidebar-loading\" *ngIf=\"recentsLoading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading...</span>\n        </div>\n      </div>\n\n      <!-- Empty sidebar state -->\n      <div class=\"sidebar-empty\" *ngIf=\"!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>No quick access items</p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Quick Access FAB Toggle (Fixed Button) -->\n  <button class=\"sidebar-fab-toggle\"\n          *ngIf=\"hasSidebarContent && !sidebarOpen\"\n          (click)=\"toggleSidebar()\"\n          title=\"Quick Access\">\n    <i class=\"fa-solid fa-bolt\"></i>\n    <span class=\"fab-badge\" *ngIf=\"unreadNotifications.length > 0\">{{ unreadNotifications.length }}</span>\n  </button>\n</div>\n", styles: [".home-dashboard {\n  display: flex;\n  height: 100%;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Main Content Area */\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  overflow-y: auto;\n  transition: margin-right 0.3s ease;\n}\n\n/* Sidebar open state adjusts main content on desktop */\n.home-dashboard.sidebar-open .main-content {\n  margin-right: 320px;\n}\n\n/* Header */\n.home-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 32px;\n}\n\n.greeting-section h1 {\n  margin: 0 0 8px 0;\n  font-size: 32px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.greeting-section .date {\n  margin: 0;\n  font-size: 16px;\n  color: #6c757d;\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n  position: fixed;\n  top: 80px; /* Below shell header with some spacing */\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: 50%;\n  background: #1976d2;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);\n  transition: all 0.2s ease;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n  background: #1565c0;\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.5);\n}\n\n.fab-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e53935;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: 16px;\n  color: #6c757d;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n/* Apps Section */\n.apps-section {\n  flex: 0 0 auto;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 24px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.section-title i {\n  color: #6c757d;\n}\n\n/* Apps Grid */\n.apps-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n}\n\n/* App Card */\n.app-card {\n  --app-color: #757575;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 14px;\n  border: 1px solid #e9ecef;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.app-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background: var(--app-color);\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.app-card:hover {\n  border-color: var(--app-color);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n  transform: translateY(-3px);\n}\n\n.app-card:hover::before {\n  opacity: 1;\n}\n\n/* App Icon */\n.app-icon-wrapper {\n  flex-shrink: 0;\n}\n\n.app-icon {\n  width: 52px;\n  height: 52px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.25s ease;\n}\n\n.app-icon i {\n  font-size: 22px;\n  color: var(--app-color);\n  transition: transform 0.25s ease;\n}\n\n.app-card:hover .app-icon {\n  background: var(--app-color);\n}\n\n.app-card:hover .app-icon i {\n  color: white;\n  transform: scale(1.1);\n}\n\n/* App Info */\n.app-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name {\n  margin: 0 0 4px 0;\n  font-size: 17px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.app-description {\n  margin: 0 0 10px 0;\n  font-size: 13px;\n  color: #6c757d;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Nav Items Preview */\n.nav-preview {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.nav-item-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  background: #f8f9fa;\n  border-radius: 5px;\n  font-size: 11px;\n  color: #495057;\n}\n\n.nav-item-chip i {\n  font-size: 9px;\n  color: #6c757d;\n}\n\n.more-items {\n  font-size: 11px;\n  color: #6c757d;\n  font-style: italic;\n}\n\n/* App Arrow */\n.app-arrow {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%) translateX(10px);\n  opacity: 0;\n  transition: all 0.25s ease;\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-card:hover .app-arrow {\n  opacity: 1;\n  transform: translateY(-50%) translateX(0);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  background: white;\n  border-radius: 16px;\n  border: 2px dashed #dee2e6;\n  text-align: center;\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: 32px;\n  color: #adb5bd;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  color: #6c757d;\n  max-width: 400px;\n}\n\n/* ========================================\n   RIGHT SIDEBAR\n   ======================================== */\n.quick-access-sidebar {\n  position: fixed;\n  top: 60px; /* Below shell header */\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: white;\n  border-left: 1px solid #e9ecef;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);\n}\n\n.home-dashboard.sidebar-open .quick-access-sidebar {\n  transform: translateX(0);\n}\n\n.sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #fafbfc;\n}\n\n.sidebar-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212529;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header h3 i {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.sidebar-close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #6c757d;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.sidebar-close-btn:hover {\n  background: #f1f3f4;\n  color: #212529;\n}\n\n.sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n  margin-bottom: 20px;\n}\n\n.sidebar-section:last-child {\n  margin-bottom: 0;\n}\n\n.sidebar-section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n  font-size: 12px;\n}\n\n.notifications-section .sidebar-section-title i {\n  color: #f57c00;\n}\n\n.favorites-section .sidebar-section-title i {\n  color: #ffc107;\n}\n\n.recents-section .sidebar-section-title i {\n  color: #1976d2;\n}\n\n.section-badge {\n  background: #e53935;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: auto;\n}\n\n/* Sidebar Items */\n.sidebar-items {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  background: #f8f9fa;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sidebar-item:hover {\n  background: #e9ecef;\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sidebar-item-icon i {\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.notification-item .sidebar-item-icon {\n  background: #fff3e0;\n}\n\n.notification-item .sidebar-item-icon i {\n  color: #f57c00;\n}\n\n.favorite-item .sidebar-item-icon {\n  background: #fff8e1;\n}\n\n.favorite-item .sidebar-item-icon i {\n  color: #f9a825;\n}\n\n.recent-item .sidebar-item-icon {\n  background: #e3f2fd;\n}\n\n.recent-item .sidebar-item-icon i {\n  color: #1976d2;\n}\n\n.sidebar-item-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.sidebar-item-title {\n  font-size: 13px;\n  font-weight: 500;\n  color: #212529;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n  font-size: 11px;\n  color: #6c757d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6c757d;\n  font-size: 13px;\n  padding: 8px 0;\n}\n\n.sidebar-loading i {\n  color: #1976d2;\n}\n\n.sidebar-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: #adb5bd;\n}\n\n.sidebar-empty i {\n  font-size: 32px;\n  margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n  margin: 0;\n  font-size: 13px;\n}\n\n\n/* ========================================\n   RESPONSIVE DESIGN\n   ======================================== */\n\n/* Tablet and smaller desktop */\n@media (max-width: 1200px) {\n  .quick-access-sidebar {\n    width: 280px;\n  }\n\n  .home-dashboard.sidebar-open .main-content {\n    margin-right: 280px;\n  }\n\n  .apps-grid {\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  }\n}\n\n/* Tablet */\n@media (max-width: 992px) {\n  .main-content {\n    padding: 24px;\n  }\n\n  .greeting-section h1 {\n    font-size: 28px;\n  }\n\n  /* Make sidebar an overlay on tablet */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 60px; /* Below shell header */\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n  }\n\n  .home-dashboard.sidebar-open .main-content {\n    margin-right: 0;\n  }\n\n  /* Show backdrop when sidebar is open on tablet */\n  .home-dashboard.sidebar-open::after {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n  }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n  .home-dashboard {\n    height: auto;\n    min-height: 100%;\n    overflow: visible;\n  }\n\n  .main-content {\n    padding: 20px;\n    padding-bottom: 100px; /* Space for FAB button */\n    overflow: visible;\n  }\n\n  .home-header {\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .greeting-section h1 {\n    font-size: 24px;\n  }\n\n  /* Full-width sidebar on mobile - positioned below top nav */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 60px; /* Below the shell header */\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 100; /* Below shell header */\n    border-left: none;\n    border-top: 1px solid #e9ecef;\n  }\n\n  /* Add backdrop on mobile when sidebar is open */\n  .home-dashboard.sidebar-open::before {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 99;\n  }\n\n  /* No ::after backdrop needed on mobile */\n  .home-dashboard.sidebar-open::after {\n    display: none;\n  }\n\n  .apps-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .app-card {\n    padding: 16px;\n  }\n\n  .app-icon {\n    width: 44px;\n    height: 44px;\n  }\n\n  .app-icon i {\n    font-size: 18px;\n  }\n\n  .app-name {\n    font-size: 15px;\n  }\n\n  .nav-preview {\n    display: none;\n  }\n\n  /* Move FAB to bottom-right on mobile */\n  .sidebar-fab-toggle {\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: 18px;\n  }\n}\n\n@media (max-width: 480px) {\n  .main-content {\n    padding: 16px;\n    padding-bottom: 80px;\n  }\n\n  .greeting-section h1 {\n    font-size: 20px;\n  }\n\n  .greeting-section .date {\n    font-size: 14px;\n  }\n\n  .section-title {\n    font-size: 16px;\n    margin-bottom: 16px;\n  }\n\n  .sidebar-fab-toggle {\n    bottom: 16px;\n    right: 16px;\n    width: 44px;\n    height: 44px;\n    font-size: 16px;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-home-dashboard', template: "<div class=\"home-dashboard\" [class.sidebar-open]=\"sidebarOpen && hasSidebarContent\">\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Header Section -->\n    <div class=\"home-header\">\n      <div class=\"greeting-section\">\n        <h1>{{ greeting }}, {{ currentUser?.Name }}</h1>\n        <p class=\"date\">{{ formattedDate }}</p>\n      </div>\n    </div>\n\n    <!-- Loading State -->\n    <div class=\"loading-container\" *ngIf=\"isLoading\">\n      <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n    </div>\n\n    <!-- Apps Grid -->\n    <div class=\"apps-section\" *ngIf=\"!isLoading\">\n      <h2 class=\"section-title\">\n        <i class=\"fa-solid fa-grid-2\"></i>\n        Your Applications\n      </h2>\n\n      <div class=\"apps-grid\">\n        <div *ngFor=\"let app of apps\"\n             class=\"app-card\"\n             [style.--app-color]=\"app.GetColor()\"\n             (click)=\"onAppClick(app)\">\n          <!-- App Icon -->\n          <div class=\"app-icon-wrapper\">\n            <div class=\"app-icon\">\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            </div>\n          </div>\n\n          <!-- App Info -->\n          <div class=\"app-info\">\n            <h3 class=\"app-name\">{{ app.Name }}</h3>\n            <p class=\"app-description\" *ngIf=\"app.Description\">{{ app.Description }}</p>\n\n            <!-- Nav Items Preview -->\n            <div class=\"nav-preview\" *ngIf=\"getNavItemsCount(app) > 0\">\n              <div class=\"nav-item-chip\" *ngFor=\"let item of getNavItemsPreview(app)\">\n                <i [class]=\"item.Icon\"></i>\n                <span>{{ item.Label }}</span>\n              </div>\n              <span class=\"more-items\" *ngIf=\"getNavItemsCount(app) > 3\">\n                +{{ getNavItemsCount(app) - 3 }} more\n              </span>\n            </div>\n          </div>\n\n          <!-- Hover Arrow -->\n          <div class=\"app-arrow\">\n            <i class=\"fa-solid fa-arrow-right\"></i>\n          </div>\n        </div>\n      </div>\n\n      <!-- Empty State -->\n      <div class=\"empty-state\" *ngIf=\"apps.length === 0\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </div>\n        <h3>No Applications Available</h3>\n        <p>You don't have any applications configured yet.</p>\n        <button kendoButton\n                themeColor=\"primary\"\n                (click)=\"openConfigDialog()\">\n          <i class=\"fa-solid fa-gear\"></i>\n          Configure Applications\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapsible Right Sidebar -->\n  <div class=\"quick-access-sidebar\" *ngIf=\"hasSidebarContent\">\n    <div class=\"sidebar-header\">\n      <h3>\n        <i class=\"fa-solid fa-bolt\"></i>\n        Quick Access\n      </h3>\n      <button class=\"sidebar-close-btn\" (click)=\"toggleSidebar()\" title=\"Close panel\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n\n    <div class=\"sidebar-content\">\n      <!-- Unread Notifications Section -->\n      <div class=\"sidebar-section notifications-section\" *ngIf=\"unreadNotifications.length > 0\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-bell\"></i>\n          Notifications\n          <span class=\"section-badge\">{{ unreadNotifications.length }}</span>\n        </h4>\n        <div class=\"sidebar-items\">\n          <div *ngFor=\"let notification of unreadNotifications\"\n               class=\"sidebar-item notification-item\"\n               (click)=\"onNotificationClick(notification)\">\n            <div class=\"sidebar-item-icon\">\n              <i class=\"fa-solid fa-bell\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ notification.Title }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ notification.Message | slice:0:40 }}{{ (notification.Message?.length || 0) > 40 ? '...' : '' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Favorites Section -->\n      <div class=\"sidebar-section favorites-section\" *ngIf=\"favorites.length > 0 || favoritesLoading\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-star\"></i>\n          Favorites\n        </h4>\n        <div class=\"sidebar-items\" *ngIf=\"!favoritesLoading\">\n          <div *ngFor=\"let favorite of favorites\"\n               class=\"sidebar-item favorite-item\"\n               (click)=\"onFavoriteClick(favorite)\">\n            <div class=\"sidebar-item-icon\">\n              <i [class]=\"getFavoriteIcon(favorite)\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ favorite.RecordID }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ favorite.Entity }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"sidebar-loading\" *ngIf=\"favoritesLoading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading...</span>\n        </div>\n      </div>\n\n      <!-- Recents Section -->\n      <div class=\"sidebar-section recents-section\" *ngIf=\"recentItems.length > 0 || recentsLoading\">\n        <h4 class=\"sidebar-section-title\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          Recent\n        </h4>\n        <div class=\"sidebar-items\" *ngIf=\"!recentsLoading\">\n          <div *ngFor=\"let item of recentItems\"\n               class=\"sidebar-item recent-item\"\n               (click)=\"onRecentClick(item)\">\n            <div class=\"sidebar-item-icon\">\n              <i [class]=\"getResourceIcon(item.resourceType)\"></i>\n            </div>\n            <div class=\"sidebar-item-info\">\n              <span class=\"sidebar-item-title\">{{ item.recordName || item.recordId }}</span>\n              <span class=\"sidebar-item-subtitle\">{{ item.entityName }} \u00B7 {{ formatDate(item.latestAt) }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"sidebar-loading\" *ngIf=\"recentsLoading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading...</span>\n        </div>\n      </div>\n\n      <!-- Empty sidebar state -->\n      <div class=\"sidebar-empty\" *ngIf=\"!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>No quick access items</p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Quick Access FAB Toggle (Fixed Button) -->\n  <button class=\"sidebar-fab-toggle\"\n          *ngIf=\"hasSidebarContent && !sidebarOpen\"\n          (click)=\"toggleSidebar()\"\n          title=\"Quick Access\">\n    <i class=\"fa-solid fa-bolt\"></i>\n    <span class=\"fab-badge\" *ngIf=\"unreadNotifications.length > 0\">{{ unreadNotifications.length }}</span>\n  </button>\n\n  <!-- App Configuration Dialog -->\n  <mj-user-app-config\n    #appConfigDialog\n    [(showDialog)]=\"showConfigDialog\"\n    (configSaved)=\"onConfigSaved()\">\n  </mj-user-app-config>\n</div>\n", styles: [".home-dashboard {\n  display: flex;\n  height: 100%;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Main Content Area */\n.main-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  overflow-y: auto;\n  transition: margin-right 0.3s ease;\n}\n\n/* Sidebar open state adjusts main content on desktop */\n.home-dashboard.sidebar-open .main-content {\n  margin-right: 320px;\n}\n\n/* Header */\n.home-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 32px;\n}\n\n.greeting-section h1 {\n  margin: 0 0 8px 0;\n  font-size: 32px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.greeting-section .date {\n  margin: 0;\n  font-size: 16px;\n  color: #6c757d;\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n  position: fixed;\n  top: 80px; /* Below shell header with some spacing */\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: 50%;\n  background: #1976d2;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);\n  transition: all 0.2s ease;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n  background: #1565c0;\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.5);\n}\n\n.fab-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e53935;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: 16px;\n  color: #6c757d;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n/* Apps Section */\n.apps-section {\n  flex: 0 0 auto;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 24px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.section-title i {\n  color: #6c757d;\n}\n\n/* Apps Grid */\n.apps-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n}\n\n/* App Card */\n.app-card {\n  --app-color: #757575;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 14px;\n  border: 1px solid #e9ecef;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.app-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background: var(--app-color);\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.app-card:hover {\n  border-color: var(--app-color);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n  transform: translateY(-3px);\n}\n\n.app-card:hover::before {\n  opacity: 1;\n}\n\n/* App Icon */\n.app-icon-wrapper {\n  flex-shrink: 0;\n}\n\n.app-icon {\n  width: 52px;\n  height: 52px;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.25s ease;\n}\n\n.app-icon i {\n  font-size: 22px;\n  color: var(--app-color);\n  transition: transform 0.25s ease;\n}\n\n.app-card:hover .app-icon {\n  background: var(--app-color);\n}\n\n.app-card:hover .app-icon i {\n  color: white;\n  transform: scale(1.1);\n}\n\n/* App Info */\n.app-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name {\n  margin: 0 0 4px 0;\n  font-size: 17px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.app-description {\n  margin: 0 0 10px 0;\n  font-size: 13px;\n  color: #6c757d;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Nav Items Preview */\n.nav-preview {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.nav-item-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  background: #f8f9fa;\n  border-radius: 5px;\n  font-size: 11px;\n  color: #495057;\n}\n\n.nav-item-chip i {\n  font-size: 9px;\n  color: #6c757d;\n}\n\n.more-items {\n  font-size: 11px;\n  color: #6c757d;\n  font-style: italic;\n}\n\n/* App Arrow */\n.app-arrow {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%) translateX(10px);\n  opacity: 0;\n  transition: all 0.25s ease;\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-card:hover .app-arrow {\n  opacity: 1;\n  transform: translateY(-50%) translateX(0);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 24px;\n  background: white;\n  border-radius: 16px;\n  border: 2px dashed #dee2e6;\n  text-align: center;\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: 32px;\n  color: #adb5bd;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: #6c757d;\n  max-width: 400px;\n}\n\n.empty-state button i {\n  margin-right: 8px;\n}\n\n/* ========================================\n   RIGHT SIDEBAR\n   ======================================== */\n.quick-access-sidebar {\n  position: fixed;\n  top: 60px; /* Below shell header */\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: white;\n  border-left: 1px solid #e9ecef;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);\n}\n\n.home-dashboard.sidebar-open .quick-access-sidebar {\n  transform: translateX(0);\n}\n\n.sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n  background: #fafbfc;\n}\n\n.sidebar-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212529;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header h3 i {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.sidebar-close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #6c757d;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.sidebar-close-btn:hover {\n  background: #f1f3f4;\n  color: #212529;\n}\n\n.sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n/* Sidebar Sections */\n.sidebar-section {\n  margin-bottom: 20px;\n}\n\n.sidebar-section:last-child {\n  margin-bottom: 0;\n}\n\n.sidebar-section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n  font-size: 12px;\n}\n\n.notifications-section .sidebar-section-title i {\n  color: #f57c00;\n}\n\n.favorites-section .sidebar-section-title i {\n  color: #ffc107;\n}\n\n.recents-section .sidebar-section-title i {\n  color: #1976d2;\n}\n\n.section-badge {\n  background: #e53935;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: auto;\n}\n\n/* Sidebar Items */\n.sidebar-items {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sidebar-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  background: #f8f9fa;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sidebar-item:hover {\n  background: #e9ecef;\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sidebar-item-icon i {\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.notification-item .sidebar-item-icon {\n  background: #fff3e0;\n}\n\n.notification-item .sidebar-item-icon i {\n  color: #f57c00;\n}\n\n.favorite-item .sidebar-item-icon {\n  background: #fff8e1;\n}\n\n.favorite-item .sidebar-item-icon i {\n  color: #f9a825;\n}\n\n.recent-item .sidebar-item-icon {\n  background: #e3f2fd;\n}\n\n.recent-item .sidebar-item-icon i {\n  color: #1976d2;\n}\n\n.sidebar-item-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.sidebar-item-title {\n  font-size: 13px;\n  font-weight: 500;\n  color: #212529;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n  font-size: 11px;\n  color: #6c757d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #6c757d;\n  font-size: 13px;\n  padding: 8px 0;\n}\n\n.sidebar-loading i {\n  color: #1976d2;\n}\n\n.sidebar-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: #adb5bd;\n}\n\n.sidebar-empty i {\n  font-size: 32px;\n  margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n  margin: 0;\n  font-size: 13px;\n}\n\n\n/* ========================================\n   RESPONSIVE DESIGN\n   ======================================== */\n\n/* Tablet and smaller desktop */\n@media (max-width: 1200px) {\n  .quick-access-sidebar {\n    width: 280px;\n  }\n\n  .home-dashboard.sidebar-open .main-content {\n    margin-right: 280px;\n  }\n\n  .apps-grid {\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  }\n}\n\n/* Tablet */\n@media (max-width: 992px) {\n  .main-content {\n    padding: 24px;\n  }\n\n  .greeting-section h1 {\n    font-size: 28px;\n  }\n\n  /* Make sidebar an overlay on tablet */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 60px; /* Below shell header */\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n  }\n\n  .home-dashboard.sidebar-open .main-content {\n    margin-right: 0;\n  }\n\n  /* Show backdrop when sidebar is open on tablet */\n  .home-dashboard.sidebar-open::after {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n  }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n  .home-dashboard {\n    height: auto;\n    min-height: 100%;\n    overflow: visible;\n  }\n\n  .main-content {\n    padding: 20px;\n    padding-bottom: 100px; /* Space for FAB button */\n    overflow: visible;\n  }\n\n  .home-header {\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .greeting-section h1 {\n    font-size: 24px;\n  }\n\n  /* Full-width sidebar on mobile - positioned below top nav */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 60px; /* Below the shell header */\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 100; /* Below shell header */\n    border-left: none;\n    border-top: 1px solid #e9ecef;\n  }\n\n  /* Add backdrop on mobile when sidebar is open */\n  .home-dashboard.sidebar-open::before {\n    content: '';\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 99;\n  }\n\n  /* No ::after backdrop needed on mobile */\n  .home-dashboard.sidebar-open::after {\n    display: none;\n  }\n\n  .apps-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .app-card {\n    padding: 16px;\n  }\n\n  .app-icon {\n    width: 44px;\n    height: 44px;\n  }\n\n  .app-icon i {\n    font-size: 18px;\n  }\n\n  .app-name {\n    font-size: 15px;\n  }\n\n  .nav-preview {\n    display: none;\n  }\n\n  /* Move FAB to bottom-right on mobile */\n  .sidebar-fab-toggle {\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: 18px;\n  }\n}\n\n@media (max-width: 480px) {\n  .main-content {\n    padding: 16px;\n    padding-bottom: 80px;\n  }\n\n  .greeting-section h1 {\n    font-size: 20px;\n  }\n\n  .greeting-section .date {\n    font-size: 14px;\n  }\n\n  .section-title {\n    font-size: 16px;\n    margin-bottom: 16px;\n  }\n\n  .sidebar-fab-toggle {\n    bottom: 16px;\n    right: 16px;\n    width: 44px;\n    height: 44px;\n    font-size: 16px;\n  }\n}\n"] }]
     }], () => [{ type: i1.ApplicationManager }, { type: i2.NavigationService }, { type: i2.RecentAccessService }, { type: i3.Router }, { type: i0.ChangeDetectorRef }], { appConfigDialog: [{
             type: ViewChild,
             args: ['appConfigDialog']