npm - @memberjunction/ng-dashboards - Versions diffs - 4.0.0 → 4.2.0 - Mend

@memberjunction/ng-dashboards 4.0.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (242) hide show

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
@@ -30,9 +30,9 @@ function HomeDashboardComponent_Conditional_9_For_6_Conditional_7_Template(rf, c
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r3 = i0.ɵɵnextContext().$implicit;
+    const appData_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(app_r3.Description);
+    i0.ɵɵtextInterpolate(appData_r3.app.Description);
 } }
 function HomeDashboardComponent_Conditional_9_For_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
@@ -52,28 +52,26 @@ function HomeDashboardComponent_Conditional_9_For_6_Conditional_8_Conditional_3_
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r3 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(2);
+    const appData_r3 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r3.getNavItemsCount(app_r3) - 3, " more ");
+    i0.ɵɵtextInterpolate1(" +", appData_r3.moreItemsCount, " more ");
 } }
 function HomeDashboardComponent_Conditional_9_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_9_For_6_Conditional_8_For_2_Template, 4, 3, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_9_For_6_Conditional_8_For_2_Template, 4, 3, "div", 26, i0.ɵɵcomponentInstance().trackByNavItem, true);
     i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_9_For_6_Conditional_8_Conditional_3_Template, 2, 1, "span", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const app_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(2);
+    const appData_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r3.getNavItemsPreview(app_r3));
+    i0.ɵɵrepeater(appData_r3.navItemsPreview);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r3.getNavItemsCount(app_r3) > 3 ? 3 : -1);
+    i0.ɵɵconditional(appData_r3.showMoreItems ? 3 : -1);
 } }
 function HomeDashboardComponent_Conditional_9_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_6_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.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_6_Template_div_click_0_listener() { const appData_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAppClick(appData_r3.app)); });
     i0.ɵɵelementStart(1, "div", 18)(2, "div", 19);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd()();
@@ -87,17 +85,16 @@ function HomeDashboardComponent_Conditional_9_For_6_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(10, "i", 25);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const app_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("--app-color", app_r3.GetColor());
+    const appData_r3 = ctx.$implicit;
+    i0.ɵɵstyleProp("--app-color", appData_r3.color);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(app_r3.Icon || "fa-solid fa-cube");
+    i0.ɵɵclassMap(appData_r3.icon);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(app_r3.Name);
+    i0.ɵɵtextInterpolate(appData_r3.app.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(app_r3.Description ? 7 : -1);
+    i0.ɵɵconditional(appData_r3.app.Description ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.getNavItemsCount(app_r3) > 0 ? 8 : -1);
+    i0.ɵɵconditional(appData_r3.navItemsCount > 0 ? 8 : -1);
 } }
 function HomeDashboardComponent_Conditional_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -122,14 +119,14 @@ function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3, " Your Applications ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 14);
-    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_9_For_6_Template, 11, 7, "div", 15, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_9_For_6_Template, 11, 7, "div", 15, i0.ɵɵcomponentInstance().trackByApp, true);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_9_Conditional_7_Template, 10, 0, "div", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(ctx_r3.apps);
+    i0.ɵɵrepeater(ctx_r3.appsDisplayData);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r3.apps.length === 0 ? 7 : -1);
 } }
@@ -162,7 +159,7 @@ function HomeDashboardComponent_Conditional_10_Conditional_8_Template(rf, ctx) {
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div", 44);
-    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_10_Conditional_8_For_8_Template, 9, 7, "div", 45, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_10_Conditional_8_For_8_Template, 9, 7, "div", 45, i0.ɵɵcomponentInstance().trackByNotification, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
@@ -196,7 +193,7 @@ function HomeDashboardComponent_Conditional_10_Conditional_9_Conditional_4_For_2
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_10_Conditional_9_Conditional_4_For_2_Template, 8, 4, "div", 53, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_10_Conditional_9_Conditional_4_For_2_Template, 8, 4, "div", 53, i0.ɵɵcomponentInstance().trackByFavorite, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
@@ -250,7 +247,7 @@ function HomeDashboardComponent_Conditional_10_Conditional_10_Conditional_4_For_
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_10_Conditional_10_Conditional_4_For_2_Template, 8, 5, "div", 57, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_10_Conditional_10_Conditional_4_For_2_Template, 8, 5, "div", 57, i0.ɵɵcomponentInstance().trackByRecent, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
@@ -338,6 +335,7 @@ function HomeDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
  * Home Dashboard - Personalized home screen showing all available applications
  * with quick access navigation and configuration options.
  *
+ * Uses OnPush change detection and cached computed values for optimal performance.
  * Registered as a BaseResourceComponent so it can be used as a Custom resource type
  * in nav items, allowing users to return to the Home dashboard after viewing orphan resources.
  */
@@ -352,6 +350,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     // State
     isLoading = true;
     apps = [];
+    appsDisplayData = []; // Pre-computed display data
     currentUser = null;
     showConfigDialog = false;
     // Favorites
@@ -365,6 +364,9 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     notificationsLoading = true;
     // Sidebar state - default closed on all screen sizes
     sidebarOpen = false;
+    // Cached icon lookups to avoid repeated method calls
+    favoriteIconCache = new Map();
+    resourceIconCache = new Map();
     /**
      * Check if sidebar has any content to show
      */
@@ -414,18 +416,20 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             // (we start with isLoading=true and only set to false when we have apps)
             if (loading) {
                 this.isLoading = true;
-                this.cdr.detectChanges();
+                this.cdr.markForCheck();
             }
         });
         // Subscribe to applications list, filtering out the Home app
         this.appManager.Applications
             .pipe(takeUntil(this.destroy$))
-            .subscribe(apps => {
+            .subscribe(async (apps) => {
             // Exclude the Home app from the list (users are already on Home)
             this.apps = apps.filter(app => app.Name !== 'Home');
+            // Pre-compute display data for all apps
+            await this.computeAppsDisplayData();
             this.isLoading = false;
             this.NotifyLoadComplete();
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
         // Subscribe to unread notifications
         MJNotificationService.Notifications$
@@ -433,15 +437,15 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             .subscribe(notifications => {
             this.unreadNotifications = notifications.filter(n => n.Unread).slice(0, 5);
             this.notificationsLoading = false;
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
         // Subscribe to recent items
         this.recentAccessService.RecentItems
             .pipe(takeUntil(this.destroy$))
             .subscribe(items => {
-            this.recentItems = items.slice(0, 5);
+            this.recentItems = this.deduplicateRecents(items).slice(0, 5);
             this.recentsLoading = false;
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
         // Favorites and recents load asynchronously in the sidebar
         this.NotifyLoadComplete();
@@ -499,19 +503,38 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.showConfigDialog = false;
     }
     /**
-     * Get nav items count for an app
+     * Pre-compute display data for all apps to avoid repeated calculations during change detection
      */
-    getNavItemsCount(app) {
-        return app.GetNavItems().length;
+    async computeAppsDisplayData() {
+        this.appsDisplayData = await Promise.all(this.apps.map(async (app) => {
+            const navItems = await app.GetNavItems();
+            const navItemsCount = navItems.length;
+            const navItemsPreview = navItems.slice(0, 3).map(item => ({
+                Label: item.Label,
+                Icon: item.Icon || 'fa-solid fa-circle'
+            }));
+            return {
+                app,
+                color: app.GetColor() || '#1976d2',
+                icon: app.Icon || 'fa-solid fa-cube',
+                navItemsCount,
+                navItemsPreview,
+                showMoreItems: navItemsCount > 3,
+                moreItemsCount: navItemsCount - 3
+            };
+        }));
     }
     /**
-     * Get first few nav items for preview
+     * Track function for apps loop
      */
-    getNavItemsPreview(app) {
-        return app.GetNavItems().slice(0, 3).map(item => ({
-            Label: item.Label,
-            Icon: item.Icon || 'fa-solid fa-circle'
-        }));
+    trackByApp(_index, item) {
+        return item.app.ID;
+    }
+    /**
+     * Track function for nav items preview
+     */
+    trackByNavItem(_index, item) {
+        return item.Label;
     }
     /**
      * Load user favorites from UserInfoEngine (cached)
@@ -527,7 +550,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         }
         finally {
             this.favoritesLoading = false;
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         }
     }
     /**
@@ -536,7 +559,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     async loadRecents() {
         try {
             this.recentsLoading = true;
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
             await this.recentAccessService.loadRecentItems(10);
         }
         catch (error) {
@@ -544,7 +567,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         }
         finally {
             this.recentsLoading = false;
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         }
     }
     /**
@@ -607,39 +630,62 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.navigationService.OpenDynamicView('User Notifications');
     }
     /**
-     * Get icon for a resource type
+     * Get icon for a resource type (cached)
      */
     getResourceIcon(resourceType) {
+        if (this.resourceIconCache.has(resourceType)) {
+            return this.resourceIconCache.get(resourceType);
+        }
+        let icon;
         switch (resourceType) {
             case 'view':
-                return 'fa-solid fa-table';
+                icon = 'fa-solid fa-table';
+                break;
             case 'dashboard':
-                return 'fa-solid fa-gauge-high';
+                icon = 'fa-solid fa-gauge-high';
+                break;
             case 'artifact':
-                return 'fa-solid fa-cube';
+                icon = 'fa-solid fa-cube';
+                break;
             case 'report':
-                return 'fa-solid fa-chart-bar';
+                icon = 'fa-solid fa-chart-bar';
+                break;
             default:
-                return 'fa-solid fa-file';
+                icon = 'fa-solid fa-file';
         }
+        this.resourceIconCache.set(resourceType, icon);
+        return icon;
     }
     /**
-     * Get icon for a favorite based on its entity type
+     * Get icon for a favorite based on its entity type (cached)
      */
     getFavoriteIcon(favorite) {
+        const cacheKey = favorite.ID;
+        if (this.favoriteIconCache.has(cacheKey)) {
+            return this.favoriteIconCache.get(cacheKey);
+        }
+        let icon;
         const entityName = favorite.Entity?.toLowerCase();
-        if (entityName === 'dashboards')
-            return 'fa-solid fa-gauge-high';
-        if (entityName === 'user views')
-            return 'fa-solid fa-table';
-        if (entityName === 'reports')
-            return 'fa-solid fa-chart-bar';
-        if (entityName?.includes('artifact'))
-            return 'fa-solid fa-cube';
-        return 'fa-solid fa-star';
+        if (entityName === 'dashboards') {
+            icon = 'fa-solid fa-gauge-high';
+        }
+        else if (entityName === 'user views') {
+            icon = 'fa-solid fa-table';
+        }
+        else if (entityName === 'reports') {
+            icon = 'fa-solid fa-chart-bar';
+        }
+        else if (entityName?.includes('artifact')) {
+            icon = 'fa-solid fa-cube';
+        }
+        else {
+            icon = 'fa-solid fa-star';
+        }
+        this.favoriteIconCache.set(cacheKey, icon);
+        return icon;
     }
     /**
-     * Format a date for display
+     * Format a date for display (pure function, safe to call in template)
      */
     formatDate(date) {
         if (!date)
@@ -655,6 +701,38 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             return `${days} days ago`;
         return new Date(date).toLocaleDateString();
     }
+    /**
+     * Track function for favorites
+     */
+    trackByFavorite(_index, item) {
+        return item.ID;
+    }
+    /**
+     * Remove duplicate recent items (same entity + recordId). Keeps the first occurrence.
+     */
+    deduplicateRecents(items) {
+        const seen = new Set();
+        return items.filter(item => {
+            const key = `${item.entityName}-${item.recordId}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
+    /**
+     * Track function for recent items
+     */
+    trackByRecent(_index, item) {
+        return `${item.entityName}-${item.recordId}`;
+    }
+    /**
+     * Track function for notifications
+     */
+    trackByNotification(_index, item) {
+        return item.ID;
+    }
     static ɵfac = function HomeDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HomeDashboardComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i2.RecentAccessService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeDashboardComponent, selectors: [["mj-home-dashboard"]], viewQuery: function HomeDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
@@ -694,7 +772,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             i0.ɵɵconditional(ctx.hasSidebarContent && !ctx.sidebarOpen ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("showDialog", ctx.showConfigDialog);
-        } }, dependencies: [i3.ButtonComponent, i4.UserAppConfigComponent, i5.LoadingComponent, i6.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}"] });
+        } }, dependencies: [i3.ButtonComponent, i4.UserAppConfigComponent, i5.LoadingComponent, i6.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}"], changeDetection: 0 });
 };
 HomeDashboardComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'HomeDashboard')
@@ -702,10 +780,10 @@ HomeDashboardComponent = __decorate([
 export { HomeDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeDashboardComponent, [{
         type: Component,
-        args: [{ standalone: false, 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    @if (isLoading) {\n      <div class=\"loading-container\">\n        <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n      </div>\n    }\n\n    <!-- Apps Grid -->\n    @if (!isLoading) {\n      <div class=\"apps-section\">\n        <h2 class=\"section-title\">\n          <i class=\"fa-solid fa-grid-2\"></i>\n          Your Applications\n        </h2>\n        <div class=\"apps-grid\">\n          @for (app of apps; track app) {\n            <div\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              <!-- App Info -->\n              <div class=\"app-info\">\n                <h3 class=\"app-name\">{{ app.Name }}</h3>\n                @if (app.Description) {\n                  <p class=\"app-description\">{{ app.Description }}</p>\n                }\n                <!-- Nav Items Preview -->\n                @if (getNavItemsCount(app) > 0) {\n                  <div class=\"nav-preview\">\n                    @for (item of getNavItemsPreview(app); track item) {\n                      <div class=\"nav-item-chip\">\n                        <i [class]=\"item.Icon\"></i>\n                        <span>{{ item.Label }}</span>\n                      </div>\n                    }\n                    @if (getNavItemsCount(app) > 3) {\n                      <span class=\"more-items\">\n                        +{{ getNavItemsCount(app) - 3 }} more\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <!-- Hover Arrow -->\n              <div class=\"app-arrow\">\n                <i class=\"fa-solid fa-arrow-right\"></i>\n              </div>\n            </div>\n          }\n        </div>\n        <!-- Empty State -->\n        @if (apps.length === 0) {\n          <div class=\"empty-state\">\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        }\n      </div>\n    }\n  </div>\n\n  <!-- Collapsible Right Sidebar -->\n  @if (hasSidebarContent) {\n    <div class=\"quick-access-sidebar\">\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      <div class=\"sidebar-content\">\n        <!-- Unread Notifications Section -->\n        @if (unreadNotifications.length > 0) {\n          <div class=\"sidebar-section notifications-section\">\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              @for (notification of unreadNotifications; track notification) {\n                <div\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              }\n            </div>\n          </div>\n        }\n        <!-- Favorites Section -->\n        @if (favorites.length > 0 || favoritesLoading) {\n          <div class=\"sidebar-section favorites-section\">\n            <h4 class=\"sidebar-section-title\">\n              <i class=\"fa-solid fa-star\"></i>\n              Favorites\n            </h4>\n            @if (!favoritesLoading) {\n              <div class=\"sidebar-items\">\n                @for (favorite of favorites; track favorite) {\n                  <div\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                }\n              </div>\n            }\n            @if (favoritesLoading) {\n              <div class=\"sidebar-loading\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Loading...</span>\n              </div>\n            }\n          </div>\n        }\n        <!-- Recents Section -->\n        @if (recentItems.length > 0 || recentsLoading) {\n          <div class=\"sidebar-section recents-section\">\n            <h4 class=\"sidebar-section-title\">\n              <i class=\"fa-solid fa-clock-rotate-left\"></i>\n              Recent\n            </h4>\n            @if (!recentsLoading) {\n              <div class=\"sidebar-items\">\n                @for (item of recentItems; track item) {\n                  <div\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                }\n              </div>\n            }\n            @if (recentsLoading) {\n              <div class=\"sidebar-loading\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Loading...</span>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty sidebar state -->\n        @if (!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0) {\n          <div class=\"sidebar-empty\">\n            <i class=\"fa-solid fa-inbox\"></i>\n            <p>No quick access items</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Quick Access FAB Toggle (Fixed Button) -->\n  @if (hasSidebarContent && !sidebarOpen) {\n    <button class=\"sidebar-fab-toggle\"\n      (click)=\"toggleSidebar()\"\n      title=\"Quick Access\">\n      <i class=\"fa-solid fa-bolt\"></i>\n      @if (unreadNotifications.length > 0) {\n        <span class=\"fab-badge\">{{ unreadNotifications.length }}</span>\n      }\n    </button>\n  }\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"] }]
+        args: [{ standalone: false, selector: 'mj-home-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, 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    @if (isLoading) {\n      <div class=\"loading-container\">\n        <mj-loading text=\"Loading your applications...\" size=\"large\"></mj-loading>\n      </div>\n    }\n\n    <!-- Apps Grid -->\n    @if (!isLoading) {\n      <div class=\"apps-section\">\n        <h2 class=\"section-title\">\n          <i class=\"fa-solid fa-grid-2\"></i>\n          Your Applications\n        </h2>\n        <div class=\"apps-grid\">\n          @for (appData of appsDisplayData; track trackByApp($index, appData)) {\n            <div\n              class=\"app-card\"\n              [style.--app-color]=\"appData.color\"\n              (click)=\"onAppClick(appData.app)\">\n              <!-- App Icon -->\n              <div class=\"app-icon-wrapper\">\n                <div class=\"app-icon\">\n                  <i [class]=\"appData.icon\"></i>\n                </div>\n              </div>\n              <!-- App Info -->\n              <div class=\"app-info\">\n                <h3 class=\"app-name\">{{ appData.app.Name }}</h3>\n                @if (appData.app.Description) {\n                  <p class=\"app-description\">{{ appData.app.Description }}</p>\n                }\n                <!-- Nav Items Preview -->\n                @if (appData.navItemsCount > 0) {\n                  <div class=\"nav-preview\">\n                    @for (item of appData.navItemsPreview; track trackByNavItem($index, item)) {\n                      <div class=\"nav-item-chip\">\n                        <i [class]=\"item.Icon\"></i>\n                        <span>{{ item.Label }}</span>\n                      </div>\n                    }\n                    @if (appData.showMoreItems) {\n                      <span class=\"more-items\">\n                        +{{ appData.moreItemsCount }} more\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <!-- Hover Arrow -->\n              <div class=\"app-arrow\">\n                <i class=\"fa-solid fa-arrow-right\"></i>\n              </div>\n            </div>\n          }\n        </div>\n        <!-- Empty State -->\n        @if (apps.length === 0) {\n          <div class=\"empty-state\">\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        }\n      </div>\n    }\n  </div>\n\n  <!-- Collapsible Right Sidebar -->\n  @if (hasSidebarContent) {\n    <div class=\"quick-access-sidebar\">\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      <div class=\"sidebar-content\">\n        <!-- Unread Notifications Section -->\n        @if (unreadNotifications.length > 0) {\n          <div class=\"sidebar-section notifications-section\">\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              @for (notification of unreadNotifications; track trackByNotification($index, notification)) {\n                <div\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              }\n            </div>\n          </div>\n        }\n        <!-- Favorites Section -->\n        @if (favorites.length > 0 || favoritesLoading) {\n          <div class=\"sidebar-section favorites-section\">\n            <h4 class=\"sidebar-section-title\">\n              <i class=\"fa-solid fa-star\"></i>\n              Favorites\n            </h4>\n            @if (!favoritesLoading) {\n              <div class=\"sidebar-items\">\n                @for (favorite of favorites; track trackByFavorite($index, favorite)) {\n                  <div\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                }\n              </div>\n            }\n            @if (favoritesLoading) {\n              <div class=\"sidebar-loading\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Loading...</span>\n              </div>\n            }\n          </div>\n        }\n        <!-- Recents Section -->\n        @if (recentItems.length > 0 || recentsLoading) {\n          <div class=\"sidebar-section recents-section\">\n            <h4 class=\"sidebar-section-title\">\n              <i class=\"fa-solid fa-clock-rotate-left\"></i>\n              Recent\n            </h4>\n            @if (!recentsLoading) {\n              <div class=\"sidebar-items\">\n                @for (item of recentItems; track trackByRecent($index, item)) {\n                  <div\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                }\n              </div>\n            }\n            @if (recentsLoading) {\n              <div class=\"sidebar-loading\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Loading...</span>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty sidebar state -->\n        @if (!favoritesLoading && !recentsLoading && unreadNotifications.length === 0 && favorites.length === 0 && recentItems.length === 0) {\n          <div class=\"sidebar-empty\">\n            <i class=\"fa-solid fa-inbox\"></i>\n            <p>No quick access items</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Quick Access FAB Toggle (Fixed Button) -->\n  @if (hasSidebarContent && !sidebarOpen) {\n    <button class=\"sidebar-fab-toggle\"\n      (click)=\"toggleSidebar()\"\n      title=\"Quick Access\">\n      <i class=\"fa-solid fa-bolt\"></i>\n      @if (unreadNotifications.length > 0) {\n        <span class=\"fab-badge\">{{ unreadNotifications.length }}</span>\n      }\n    </button>\n  }\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: i0.ChangeDetectorRef }], { appConfigDialog: [{
             type: ViewChild,
             args: ['appConfigDialog']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/home/home-dashboard.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/Home/home-dashboard.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=home-dashboard.component.js.map