@memberjunction/ng-dashboards 5.34.0 → 5.35.0

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

@@ -9,8 +9,8 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseResourceComponent, HomeAppPinService } from '@memberjunction/ng-shared';
 import { RegisterClass } from '@memberjunction/global';
-import { CompositeKey, RunView } from '@memberjunction/core';
-import { UserInfoEngine } from '@memberjunction/core-entities';
+import { CompositeKey } from '@memberjunction/core';
+import { UserInfoEngine, DashboardEngine, UserViewEngine, QueryEngine } from '@memberjunction/core-entities';
 import { ActionEngineBase } from '@memberjunction/actions-base';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
@@ -65,362 +65,385 @@ function HomeDashboardComponent_Conditional_8_Conditional_8_Template(rf, ctx) {
     i0.ɵɵtext(5, " \u2014 Drag cards to reorder. Click names to rename.");
     i0.ɵɵelementEnd()();
 } }
+function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.DismissPinEmptyState()); });
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementEnd();
+} }
+function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.DismissPinEmptyState()); });
+    i0.ɵɵtext(1, " Don't show this again ");
+    i0.ɵɵelementEnd();
+} }
 function HomeDashboardComponent_Conditional_8_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 17);
-    i0.ɵɵelementStart(2, "h3");
-    i0.ɵɵtext(3, "No pinned items yet");
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_1_Template, 2, 0, "button", 31);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "No pinned items yet");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Pin your favorite dashboards, views, queries, and reports for quick access.");
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "Pin your favorite dashboards, views, queries, and reports for quick access.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 25);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
-    i0.ɵɵelement(7, "i", 26);
-    i0.ɵɵtext(8, " Add your first pin ");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "button", 25);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
+    i0.ɵɵelement(8, "i", 26);
+    i0.ɵɵtext(9, " Add your first pin ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_10_Template, 2, 0, "button", 32);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.EditMode ? 1 : -1);
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(!ctx_r2.EditMode && !ctx_r2.HidePinEmptyState ? 10 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 43);
-    i0.ɵɵelement(2, "i", 44);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 48);
+    i0.ɵɵelement(2, "i", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 45)(4, "button", 46);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r9); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.RemovePin(pin_r8.Id); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(5, "i", 47);
+    i0.ɵɵelementStart(3, "div", 50)(4, "button", 51);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r11); const pin_r10 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.RemovePin(pin_r10.Id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(5, "i", 34);
     i0.ɵɵelementEnd()()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r10); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r12); const pin_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r10); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Open");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "img", 48);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "img", 52);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", pin_r8.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r8.DisplayName);
+    i0.ɵɵproperty("src", pin_r10.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r10.DisplayName);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r11); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r13); const pin_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r10); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Run");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelementStart(0, "div", 55);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r8) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r8) + "cc 100%)");
+    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r10) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r10) + "cc 100%)");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r12); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r14); const pin_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.OnPinClick(pin_r10); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Open");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵelementStart(0, "div", 56);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("--pin-icon-color", pin_r8.Color || "var(--mj-text-muted)");
+    i0.ɵɵstyleProp("--pin-icon-color", pin_r10.Color || "var(--mj-text-muted)");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 53);
-    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r13); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r8.Id, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r13); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r8.Id, ctx_r2.GetInputValue($event))); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 57);
+    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r15); const pin_r10 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r10.Id, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r15); const pin_r10 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r10.Id, ctx_r2.GetInputValue($event))); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", pin_r8.DisplayName);
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", pin_r10.DisplayName);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const pin_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ShowPinMenu($event, pin_r8)); });
-    i0.ɵɵelement(1, "i", 57);
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 60);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const pin_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ShowPinMenu($event, pin_r10)); });
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const pin_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r8.Id, $event) : null); });
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const pin_r10 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r10.Id, $event) : null); });
     i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template, 2, 0, "button", 55);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Conditional_2_Template, 2, 0, "button", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", pin_r8.DisplayName, " ");
+    i0.ɵɵtextInterpolate1(" ", pin_r10.DisplayName, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelementStart(0, "span", 47);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r8 = i0.ɵɵnextContext().$implicit;
+    const pin_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pin_r8.ApplicationName);
+    i0.ɵɵtextInterpolate(pin_r10.ApplicationName);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragstart_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r8)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragover_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r8)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_drop_0_listener($event) { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r8)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_click_0_listener() { const pin_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r8)); });
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template, 6, 0, "div", 34);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template, 3, 3, "div", 35)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template, 3, 5, "div", 36)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template, 3, 5, "div", 37);
-    i0.ɵɵelementStart(5, "div", 38);
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template, 1, 1, "input", 39)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template, 3, 2, "div", 40);
-    i0.ɵɵelementStart(8, "div", 41);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragstart_0_listener($event) { const pin_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r10)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragover_0_listener($event) { const pin_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r10)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_drop_0_listener($event) { const pin_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r10)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template_div_click_0_listener() { const pin_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r10)); });
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template, 6, 0, "div", 39);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template, 3, 3, "div", 40)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template, 3, 5, "div", 41)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template, 3, 5, "div", 42);
+    i0.ɵɵelementStart(5, "div", 43);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template, 1, 1, "input", 44)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template, 3, 2, "div", 45);
+    i0.ɵɵelementStart(8, "div", 46);
     i0.ɵɵelement(9, "i");
     i0.ɵɵtext(10);
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template, 2, 1, "span", 42);
+    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template, 2, 1, "span", 47);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const pin_r8 = ctx.$implicit;
+    const pin_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r8.Id)("drag-over", ctx_r2.DragOverPinId === pin_r8.Id);
+    i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r10.Id)("drag-over", ctx_r2.DragOverPinId === pin_r10.Id);
     i0.ɵɵproperty("draggable", ctx_r2.EditMode);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r8.Thumbnail ? 2 : pin_r8.ResourceType === "Actions" ? 3 : 4);
+    i0.ɵɵconditional(pin_r10.Thumbnail ? 2 : pin_r10.ResourceType === "Actions" ? 3 : 4);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r8.Id ? 6 : 7);
+    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r10.Id ? 6 : 7);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r8));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r8), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r10), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r8.ApplicationName && pin_r8.ResourceType !== "Custom" ? 11 : -1);
+    i0.ɵɵconditional(pin_r10.ApplicationName && pin_r10.ResourceType !== "Custom" ? 11 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 64);
-    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r16); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r17, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r16); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r17, ctx_r2.GetInputValue($event))); });
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 68);
+    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r18); const group_r19 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r19, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r18); const group_r19 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SaveGroupName(group_r19, ctx_r2.GetInputValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r17 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", group_r17);
+    const group_r19 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", group_r19);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 65);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r18); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingGroup(group_r17) : null); });
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 69);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r20); const group_r19 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingGroup(group_r19) : null); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r17 = i0.ɵɵnextContext().$implicit;
+    const group_r19 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(group_r17);
+    i0.ɵɵtextInterpolate(group_r19);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 63)(1, "button", 66);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const group_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.RemoveGroup(group_r17)); });
-    i0.ɵɵelement(2, "i", 67);
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 67)(1, "button", 70);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r21); const group_r19 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.RemoveGroup(group_r19)); });
+    i0.ɵɵelement(2, "i", 71);
     i0.ɵɵtext(3, " Remove Group ");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 43);
-    i0.ɵɵelement(2, "i", 44);
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 48);
+    i0.ɵɵelement(2, "i", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 45)(4, "button", 46);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r22); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.RemovePin(pin_r21.Id); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(5, "i", 47);
+    i0.ɵɵelementStart(3, "div", 50)(4, "button", 51);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r24); const pin_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.RemovePin(pin_r23.Id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(5, "i", 34);
     i0.ɵɵelementEnd()()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r23); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const pin_r23 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r23); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Open");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "img", 48);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "img", 52);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", pin_r21.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r21.DisplayName);
+    i0.ɵɵproperty("src", pin_r23.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r23.DisplayName);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r24); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r26); const pin_r23 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r23); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Run");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelementStart(0, "div", 55);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r21) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r21) + "cc 100%)");
+    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r23) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r23) + "cc 100%)");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const pin_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 54);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r27); const pin_r23 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnPinClick(pin_r23); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Open");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵelementStart(0, "div", 56);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template, 3, 0, "div", 49);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("--pin-icon-color", pin_r21.Color || "var(--mj-text-muted)");
+    i0.ɵɵstyleProp("--pin-icon-color", pin_r23.Color || "var(--mj-text-muted)");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 53);
-    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r26); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r21.Id, $event.target.value)); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r26); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r21.Id, $event.target.value)); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); });
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 57);
+    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r28); const pin_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r23.Id, $event.target.value)); })("keydown.enter", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r28); const pin_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r23.Id, $event.target.value)); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", pin_r21.DisplayName);
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", pin_r23.DisplayName);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 57);
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 60);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r30); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const pin_r21 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r21.Id, $event) : null); });
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r29); const pin_r23 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r23.Id, $event) : null); });
     i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template, 2, 0, "button", 55);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template, 2, 0, "button", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", pin_r21.DisplayName, " ");
+    i0.ɵɵtextInterpolate1(" ", pin_r23.DisplayName, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelementStart(0, "span", 47);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r21 = i0.ɵɵnextContext().$implicit;
+    const pin_r23 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pin_r21.ApplicationName);
+    i0.ɵɵtextInterpolate(pin_r23.ApplicationName);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragstart_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r21)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragover_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r21)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_drop_0_listener($event) { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r21)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_click_0_listener() { const pin_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r21)); });
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template, 6, 0, "div", 34);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template, 3, 3, "div", 35)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template, 3, 5, "div", 36)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template, 3, 5, "div", 37);
-    i0.ɵɵelementStart(5, "div", 38);
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template, 1, 1, "input", 39)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template, 3, 2, "div", 40);
-    i0.ɵɵelementStart(8, "div", 41);
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragstart_0_listener($event) { const pin_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r23)); })("dragover", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragover_0_listener($event) { const pin_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r23)); })("dragleave", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_drop_0_listener($event) { const pin_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r23)); })("dragend", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template_div_click_0_listener() { const pin_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r23)); });
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_1_Template, 6, 0, "div", 39);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template, 3, 3, "div", 40)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template, 3, 5, "div", 41)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template, 3, 5, "div", 42);
+    i0.ɵɵelementStart(5, "div", 43);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template, 1, 1, "input", 44)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template, 3, 2, "div", 45);
+    i0.ɵɵelementStart(8, "div", 46);
     i0.ɵɵelement(9, "i");
     i0.ɵɵtext(10);
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template, 2, 1, "span", 42);
+    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template, 2, 1, "span", 47);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const pin_r21 = ctx.$implicit;
+    const pin_r23 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r21.Id)("drag-over", ctx_r2.DragOverPinId === pin_r21.Id);
+    i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r23.Id)("drag-over", ctx_r2.DragOverPinId === pin_r23.Id);
     i0.ɵɵproperty("draggable", ctx_r2.EditMode);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r21.Thumbnail ? 2 : pin_r21.ResourceType === "Actions" ? 3 : 4);
+    i0.ɵɵconditional(pin_r23.Thumbnail ? 2 : pin_r23.ResourceType === "Actions" ? 3 : 4);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r21.Id ? 6 : 7);
+    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r23.Id ? 6 : 7);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r21));
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r21), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r23), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r21.ApplicationName ? 11 : -1);
+    i0.ɵɵconditional(pin_r23.ApplicationName ? 11 : -1);
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template, 1, 1, "input", 59)(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template, 2, 1, "span", 60);
-    i0.ɵɵelement(3, "div", 61);
-    i0.ɵɵelementStart(4, "span", 62);
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template, 1, 1, "input", 63)(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template, 2, 1, "span", 64);
+    i0.ɵɵelement(3, "div", 65);
+    i0.ɵɵelementStart(4, "span", 66);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template, 4, 0, "div", 63);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template, 4, 0, "div", 67);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template, 12, 14, "div", 31, i0.ɵɵcomponentInstance().trackByPin, true);
+    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template, 12, 14, "div", 36, i0.ɵɵcomponentInstance().trackByPin, true);
 } if (rf & 2) {
-    const group_r17 = ctx.$implicit;
+    const group_r19 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName === group_r17 ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName === group_r19 ? 1 : 2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", ctx_r2.GetPinsInGroup(group_r17).length, " pins");
+    i0.ɵɵtextInterpolate1("", ctx_r2.GetPinsInGroup(group_r19).length, " pins");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.GetPinsInGroup(group_r17));
+    i0.ɵɵrepeater(ctx_r2.GetPinsInGroup(group_r19));
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
     i0.ɵɵelement(1, "i", 26);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Add Pin");
@@ -428,9 +451,9 @@ function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Templ
 } }
 function HomeDashboardComponent_Conditional_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template, 12, 14, "div", 31, i0.ɵɵcomponentInstance().trackByPin, true);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template, 12, 14, "div", 36, i0.ɵɵcomponentInstance().trackByPin, true);
     i0.ɵɵrepeaterCreate(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Template, 9, 3, null, null, i0.ɵɵcomponentInstance().trackByGroup, true);
-    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template, 4, 0, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -450,7 +473,7 @@ function HomeDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_6_Template, 3, 0, "button", 19)(7, HomeDashboardComponent_Conditional_8_Conditional_7_Template, 4, 1);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_8_Conditional_8_Template, 6, 0, "div", 20);
-    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_8_Conditional_9_Template, 9, 0, "div", 21);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_8_Conditional_9_Template, 11, 2, "div", 21);
     i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_8_Conditional_10_Template, 6, 1, "div", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -460,58 +483,58 @@ function HomeDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.EditMode ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.PinnedItems.length === 0 && !ctx_r2.EditMode ? 9 : -1);
+    i0.ɵɵconditional(ctx_r2.PinnedItems.length === 0 && (ctx_r2.EditMode || !ctx_r2.HidePinEmptyState) ? 9 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 10 : -1);
 } }
 function HomeDashboardComponent_Conditional_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(undefined)); });
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(undefined)); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2, "(No group)");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const group_r33 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(group_r33)); });
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const group_r35 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(group_r35)); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const group_r33 = i0.ɵɵnextContext().$implicit;
+    const group_r35 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r33);
+    i0.ɵɵtextInterpolate(group_r35);
 } }
 function HomeDashboardComponent_Conditional_9_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template, 3, 1, "div", 75);
+    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template, 3, 1, "div", 79);
 } if (rf & 2) {
-    const group_r33 = ctx.$implicit;
+    const group_r35 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(group_r33 !== ctx_r2.PinMenuPin.Group ? 0 : -1);
+    i0.ɵɵconditional(group_r35 !== ctx_r2.PinMenuPin.Group ? 0 : -1);
 } }
 function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69)(1, "div", 70);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuEdit()); });
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 73)(1, "div", 74);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuEdit()); });
     i0.ɵɵelement(2, "i", 29);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Edit");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "div", 71);
-    i0.ɵɵelementStart(6, "div", 72)(7, "div", 73);
-    i0.ɵɵelement(8, "i", 74);
+    i0.ɵɵelement(5, "div", 75);
+    i0.ɵɵelementStart(6, "div", 76)(7, "div", 77);
+    i0.ɵɵelement(8, "i", 78);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Move to Group");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_9_Conditional_11_Template, 3, 0, "div", 75);
+    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_9_Conditional_11_Template, 3, 0, "div", 79);
     i0.ɵɵrepeaterCreate(12, HomeDashboardComponent_Conditional_9_For_13_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(14, "div", 71);
-    i0.ɵɵelementStart(15, "div", 76);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuUnpin()); });
-    i0.ɵɵelement(16, "i", 77);
+    i0.ɵɵelement(14, "div", 75);
+    i0.ɵɵelementStart(15, "div", 80);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuUnpin()); });
+    i0.ɵɵelement(16, "i", 81);
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18, "Unpin");
     i0.ɵɵelementEnd()()();
@@ -524,19 +547,19 @@ function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(ctx_r2.PinGroups);
 } }
 function HomeDashboardComponent_Conditional_10_For_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 90);
+    i0.ɵɵelementStart(0, "option", 94);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r35 = ctx.$implicit;
-    i0.ɵɵproperty("value", group_r35);
+    const group_r37 = ctx.$implicit;
+    i0.ɵɵproperty("value", group_r37);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(group_r35);
+    i0.ɵɵtextInterpolate(group_r37);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 92)(1, "input", 95);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelNewGroupName, $event) || (ctx_r2.AddPanelNewGroupName = $event); return i0.ɵɵresetView($event); });
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 96)(1, "input", 99);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelNewGroupName, $event) || (ctx_r2.AddPanelNewGroupName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -544,64 +567,64 @@ function HomeDashboardComponent_Conditional_10_Conditional_23_Template(rf, ctx)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.AddPanelNewGroupName);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94);
-    i0.ɵɵelement(1, "mj-loading", 96);
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵelement(1, "mj-loading", 100);
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵelementStart(0, "button", 114);
     i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 112);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r38); const ni_r39 = i0.ɵɵnextContext().$implicit; const app_r40 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinAppNavItem(app_r40.appName, app_r40.icon, app_r40.color, ni_r39.label, ni_r39.icon)); });
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 116);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r40); const ni_r41 = i0.ɵɵnextContext().$implicit; const app_r42 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinAppNavItem(app_r42.appName, app_r42.icon, app_r42.color, ni_r41.label, ni_r41.icon)); });
     i0.ɵɵelement(1, "i", 26);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105)(1, "div", 106);
+    i0.ɵɵelementStart(0, "div", 109)(1, "div", 110);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 109);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template, 3, 0, "button", 111);
+    i0.ɵɵelementStart(6, "div", 113);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_7_Template, 3, 0, "button", 114)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Conditional_8_Template, 3, 0, "button", 115);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ni_r39 = ctx.$implicit;
-    const app_r40 = i0.ɵɵnextContext().$implicit;
+    const ni_r41 = ctx.$implicit;
+    const app_r42 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background", "color-mix(in srgb, " + app_r40.color + " 10%, var(--mj-bg-surface-card))");
+    i0.ɵɵstyleProp("background", "color-mix(in srgb, " + app_r42.color + " 10%, var(--mj-bg-surface-card))");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ni_r39.icon);
-    i0.ɵɵstyleProp("color", app_r40.color);
+    i0.ɵɵclassMap(ni_r41.icon);
+    i0.ɵɵstyleProp("color", app_r42.color);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ni_r39.label);
+    i0.ɵɵtextInterpolate(ni_r41.label);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ni_r39.pinned ? 7 : 8);
+    i0.ɵɵconditional(ni_r41.pinned ? 7 : 8);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102)(1, "div", 103);
+    i0.ɵɵelementStart(0, "div", 106)(1, "div", 107);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 104);
+    i0.ɵɵelementStart(3, "span", 108);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template, 9, 8, "div", 105, _forTrack1);
+    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_For_6_Template, 9, 8, "div", 109, _forTrack1);
 } if (rf & 2) {
-    const app_r40 = ctx.$implicit;
-    i0.ɵɵstyleProp("--panel-app-color", app_r40.color);
+    const app_r42 = ctx.$implicit;
+    i0.ɵɵstyleProp("--panel-app-color", app_r42.color);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(app_r40.icon);
+    i0.ɵɵclassMap(app_r42.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(app_r40.appName);
+    i0.ɵɵtextInterpolate(app_r42.appName);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(app_r40.navItems);
+    i0.ɵɵrepeater(app_r42.navItems);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_For_1_Template, 7, 5, null, null, _forTrack0);
@@ -610,15 +633,15 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Cond
     i0.ɵɵrepeater(ctx_r2.FilterApps());
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("apps")); });
-    i0.ɵɵelement(2, "i", 99);
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("apps")); });
+    i0.ɵɵelement(2, "i", 103);
     i0.ɵɵtext(3, " Applications ");
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 104);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelement(6, "i", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Conditional_7_Template, 2, 0);
     i0.ɵɵelementEnd();
@@ -632,52 +655,52 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Temp
     i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["apps"] ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵelementStart(0, "button", 114);
     i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 112);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r42); const item_r43 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Dashboards", item_r43.id, item_r43.name)); });
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 116);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r44); const item_r45 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Dashboards", item_r45.id, item_r45.name)); });
     i0.ɵɵelement(1, "i", 26);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
-    i0.ɵɵelement(2, "i", 116);
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119);
+    i0.ɵɵelement(2, "i", 120);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 109);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 111);
+    i0.ɵɵelementStart(6, "div", 113);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 114)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 115);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r43 = ctx.$implicit;
+    const item_r45 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(item_r43.name);
+    i0.ɵɵtextInterpolate(item_r45.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(item_r43.pinned ? 7 : 8);
+    i0.ɵɵconditional(item_r45.pinned ? 7 : 8);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template, 9, 2, "div", 114, _forTrack2);
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_For_1_Template, 9, 2, "div", 118, _forTrack2);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableDashboards));
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r41 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("dashboards")); });
-    i0.ɵɵelement(2, "i", 113);
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("dashboards")); });
+    i0.ɵɵelement(2, "i", 117);
     i0.ɵɵtext(3, " Dashboards ");
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 104);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelement(6, "i", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Conditional_7_Template, 2, 0);
     i0.ɵɵelementEnd();
@@ -691,57 +714,57 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Temp
     i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["dashboards"] ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵelementStart(0, "button", 114);
     i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 112);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r45); const item_r46 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("User Views", item_r46.id, item_r46.name)); });
+    const _r47 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 116);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r47); const item_r48 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("User Views", item_r48.id, item_r48.name)); });
     i0.ɵɵelement(1, "i", 26);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
-    i0.ɵɵelement(2, "i", 118);
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119);
+    i0.ɵɵelement(2, "i", 122);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 119);
+    i0.ɵɵelementStart(6, "div", 123);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 109);
-    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template, 3, 0, "button", 110)(10, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template, 3, 0, "button", 111);
+    i0.ɵɵelementStart(8, "div", 113);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_9_Template, 3, 0, "button", 114)(10, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Conditional_10_Template, 3, 0, "button", 115);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r46 = ctx.$implicit;
+    const item_r48 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(item_r46.name);
+    i0.ɵɵtextInterpolate(item_r48.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r46.entityName);
+    i0.ɵɵtextInterpolate(item_r48.entityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(item_r46.pinned ? 9 : 10);
+    i0.ɵɵconditional(item_r48.pinned ? 9 : 10);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template, 11, 3, "div", 114, _forTrack2);
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_For_1_Template, 11, 3, "div", 118, _forTrack2);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableViews));
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("views")); });
-    i0.ɵɵelement(2, "i", 117);
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r46); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("views")); });
+    i0.ɵɵelement(2, "i", 121);
     i0.ɵɵtext(3, " Views ");
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 104);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelement(6, "i", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Conditional_7_Template, 2, 0);
     i0.ɵɵelementEnd();
@@ -755,52 +778,52 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Temp
     i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["views"] ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵelementStart(0, "button", 114);
     i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r48 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 112);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r48); const item_r49 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Queries", item_r49.id, item_r49.name)); });
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 116);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r50); const item_r51 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Queries", item_r51.id, item_r51.name)); });
     i0.ɵɵelement(1, "i", 26);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
-    i0.ɵɵelement(2, "i", 121);
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119);
+    i0.ɵɵelement(2, "i", 125);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 109);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 110)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 111);
+    i0.ɵɵelementStart(6, "div", 113);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_7_Template, 3, 0, "button", 114)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Conditional_8_Template, 3, 0, "button", 115);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r49 = ctx.$implicit;
+    const item_r51 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(item_r49.name);
+    i0.ɵɵtextInterpolate(item_r51.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(item_r49.pinned ? 7 : 8);
+    i0.ɵɵconditional(item_r51.pinned ? 7 : 8);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template, 9, 2, "div", 114, _forTrack2);
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_For_1_Template, 9, 2, "div", 118, _forTrack2);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableQueries));
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r47 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r47); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("queries")); });
-    i0.ɵɵelement(2, "i", 120);
+    const _r49 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r49); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("queries")); });
+    i0.ɵɵelement(2, "i", 124);
     i0.ɵɵtext(3, " Queries ");
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 104);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelement(6, "i", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Conditional_7_Template, 2, 0);
     i0.ɵɵelementEnd();
@@ -814,52 +837,52 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Temp
     i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["queries"] ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 119);
+    i0.ɵɵelementStart(0, "div", 123);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r52 = i0.ɵɵnextContext().$implicit;
+    const item_r54 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r52.description);
+    i0.ɵɵtextInterpolate(item_r54.description);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r51 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 115);
-    i0.ɵɵelement(2, "i", 123);
+    const _r53 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119);
+    i0.ɵɵelement(2, "i", 127);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 107)(4, "div", 108);
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Conditional_6_Template, 2, 1, "div", 119);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Conditional_6_Template, 2, 1, "div", 123);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 109)(8, "button", 112);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template_button_click_8_listener() { const item_r52 = i0.ɵɵrestoreView(_r51).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OpenActionPinConfig(item_r52.id, item_r52.name, item_r52.description)); });
-    i0.ɵɵelement(9, "i", 124);
+    i0.ɵɵelementStart(7, "div", 113)(8, "button", 116);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template_button_click_8_listener() { const item_r54 = i0.ɵɵrestoreView(_r53).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OpenActionPinConfig(item_r54.id, item_r54.name, item_r54.description)); });
+    i0.ɵɵelement(9, "i", 128);
     i0.ɵɵtext(10, " Configure ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r52 = ctx.$implicit;
+    const item_r54 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(item_r52.name);
+    i0.ɵɵtextInterpolate(item_r54.name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r52.description ? 6 : -1);
+    i0.ɵɵconditional(item_r54.description ? 6 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template, 11, 2, "div", 114, _forTrack2);
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_For_1_Template, 11, 2, "div", 118, _forTrack2);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵrepeater(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions));
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r50 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r50); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("actions")); });
-    i0.ɵɵelement(2, "i", 122);
+    const _r52 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r52); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.TogglePanelSection("actions")); });
+    i0.ɵɵelement(2, "i", 126);
     i0.ɵɵtext(3, " Quick Actions ");
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 104);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelement(6, "i", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Conditional_7_Template, 2, 0);
     i0.ɵɵelementEnd();
@@ -873,11 +896,11 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Temp
     i0.ɵɵconditional(!ctx_r2.PanelSectionCollapsed["actions"] ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template, 8, 6, "div", 97);
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template, 8, 6, "div", 97);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template, 8, 6, "div", 97);
-    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template, 8, 6, "div", 97);
-    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template, 8, 6, "div", 97);
+    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template, 8, 6, "div", 101);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template, 8, 6, "div", 101);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template, 8, 6, "div", 101);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template, 8, 6, "div", 101);
+    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template, 8, 6, "div", 101);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.FilterApps().length > 0 ? 0 : -1);
@@ -891,39 +914,39 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx)
     i0.ɵɵconditional(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions).length > 0 ? 4 : -1);
 } }
 function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 80)(2, "div", 81)(3, "h3");
+    i0.ɵɵelementStart(1, "div", 84)(2, "div", 85)(3, "h3");
     i0.ɵɵelement(4, "i", 17);
     i0.ɵɵtext(5, " Add Pin");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 82);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
-    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelementStart(6, "button", 86);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
+    i0.ɵɵelement(7, "i", 34);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 83)(9, "div", 84);
-    i0.ɵɵelement(10, "i", 85);
-    i0.ɵɵelementStart(11, "input", 86);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSearchQuery, $event) || (ctx_r2.AddPanelSearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "div", 87)(9, "div", 88);
+    i0.ɵɵelement(10, "i", 89);
+    i0.ɵɵelementStart(11, "input", 90);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSearchQuery, $event) || (ctx_r2.AddPanelSearchQuery = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 87)(13, "label");
-    i0.ɵɵelement(14, "i", 74);
+    i0.ɵɵelementStart(12, "div", 91)(13, "label");
+    i0.ɵɵelement(14, "i", 78);
     i0.ɵɵtext(15, " Add to group:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "select", 88);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSelectedGroup, $event) || (ctx_r2.AddPanelSelectedGroup = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(17, "option", 89);
+    i0.ɵɵelementStart(16, "select", 92);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSelectedGroup, $event) || (ctx_r2.AddPanelSelectedGroup = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(17, "option", 93);
     i0.ɵɵtext(18, "(No group)");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_10_For_20_Template, 2, 2, "option", 90, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementStart(21, "option", 91);
+    i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_10_For_20_Template, 2, 2, "option", 94, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(21, "option", 95);
     i0.ɵɵtext(22, "+ New group...");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_10_Conditional_23_Template, 2, 1, "div", 92);
-    i0.ɵɵelementStart(24, "div", 93);
-    i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_10_Conditional_25_Template, 2, 0, "div", 94)(26, HomeDashboardComponent_Conditional_10_Conditional_26_Template, 5, 5);
+    i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_10_Conditional_23_Template, 2, 1, "div", 96);
+    i0.ɵɵelementStart(24, "div", 97);
+    i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_10_Conditional_25_Template, 2, 0, "div", 98)(26, HomeDashboardComponent_Conditional_10_Conditional_26_Template, 5, 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -940,84 +963,84 @@ function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
 } }
 function HomeDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "mj-loading", 125);
+    i0.ɵɵelement(1, "mj-loading", 129);
     i0.ɵɵelementEnd();
 } }
 function HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 134);
+    i0.ɵɵelementStart(0, "p", 138);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const appData_r54 = i0.ɵɵnextContext().$implicit;
+    const appData_r56 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(appData_r54.app.Description);
+    i0.ɵɵtextInterpolate(appData_r56.app.Description);
 } }
 function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 138);
+    i0.ɵɵelementStart(0, "div", 142);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r55 = ctx.$implicit;
+    const item_r57 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r55.Icon);
+    i0.ɵɵclassMap(item_r57.Icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r55.Label);
+    i0.ɵɵtextInterpolate(item_r57.Label);
 } }
 function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 139);
+    i0.ɵɵelementStart(0, "span", 143);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const appData_r54 = i0.ɵɵnextContext(2).$implicit;
+    const appData_r56 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", appData_r54.moreItemsCount, " more ");
+    i0.ɵɵtextInterpolate1(" +", appData_r56.moreItemsCount, " more ");
 } }
 function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 135);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template, 4, 3, "div", 138, i0.ɵɵcomponentInstance().trackByNavItem, true);
-    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template, 2, 1, "span", 139);
+    i0.ɵɵelementStart(0, "div", 139);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template, 4, 3, "div", 142, i0.ɵɵcomponentInstance().trackByNavItem, true);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template, 2, 1, "span", 143);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const appData_r54 = i0.ɵɵnextContext().$implicit;
+    const appData_r56 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(appData_r54.navItemsPreview);
+    i0.ɵɵrepeater(appData_r56.navItemsPreview);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(appData_r54.showMoreItems ? 3 : -1);
+    i0.ɵɵconditional(appData_r56.showMoreItems ? 3 : -1);
 } }
 function HomeDashboardComponent_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r53 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 129);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_For_6_Template_div_click_0_listener() { const appData_r54 = i0.ɵɵrestoreView(_r53).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAppClick(appData_r54.app)); });
-    i0.ɵɵelementStart(1, "div", 130)(2, "div", 131);
+    const _r55 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 133);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_For_6_Template_div_click_0_listener() { const appData_r56 = i0.ɵɵrestoreView(_r55).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAppClick(appData_r56.app)); });
+    i0.ɵɵelementStart(1, "div", 134)(2, "div", 135);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 132)(5, "h3", 133);
+    i0.ɵɵelementStart(4, "div", 136)(5, "h3", 137);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template, 2, 1, "p", 134);
-    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template, 4, 1, "div", 135);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template, 2, 1, "p", 138);
+    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template, 4, 1, "div", 139);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 136);
-    i0.ɵɵelement(10, "i", 137);
+    i0.ɵɵelementStart(9, "div", 140);
+    i0.ɵɵelement(10, "i", 141);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const appData_r54 = ctx.$implicit;
-    i0.ɵɵstyleProp("--app-color", appData_r54.color);
+    const appData_r56 = ctx.$implicit;
+    i0.ɵɵstyleProp("--app-color", appData_r56.color);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(appData_r54.icon);
+    i0.ɵɵclassMap(appData_r56.icon);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(appData_r54.app.Name);
+    i0.ɵɵtextInterpolate(appData_r56.app.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(appData_r54.app.Description ? 7 : -1);
+    i0.ɵɵconditional(appData_r56.app.Description ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(appData_r54.navItemsCount > 0 ? 8 : -1);
+    i0.ɵɵconditional(appData_r56.navItemsCount > 0 ? 8 : -1);
 } }
 function HomeDashboardComponent_Conditional_14_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r56 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 128)(1, "div", 140);
-    i0.ɵɵelement(2, "i", 141);
+    const _r58 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 132)(1, "div", 144);
+    i0.ɵɵelement(2, "i", 145);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Applications Available");
@@ -1025,21 +1048,21 @@ function HomeDashboardComponent_Conditional_14_Conditional_7_Template(rf, ctx) {
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "You don't have any applications configured yet.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 142);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r56); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openConfigDialog()); });
-    i0.ɵɵelement(8, "i", 143);
+    i0.ɵɵelementStart(7, "button", 146);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r58); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openConfigDialog()); });
+    i0.ɵɵelement(8, "i", 147);
     i0.ɵɵtext(9, " Configure Applications ");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11)(1, "h2", 16);
-    i0.ɵɵelement(2, "i", 99);
+    i0.ɵɵelement(2, "i", 103);
     i0.ɵɵtext(3, " My Applications ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 126);
-    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_14_For_6_Template, 11, 7, "div", 127, i0.ɵɵcomponentInstance().trackByApp, true);
+    i0.ɵɵelementStart(4, "div", 130);
+    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_14_For_6_Template, 11, 7, "div", 131, i0.ɵɵcomponentInstance().trackByApp, true);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_Conditional_7_Template, 10, 0, "div", 128);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_Conditional_7_Template, 10, 0, "div", 132);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1049,32 +1072,32 @@ function HomeDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r2.apps.length === 0 ? 7 : -1);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r58 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 156);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template_div_click_0_listener() { const notification_r59 = i0.ɵɵrestoreView(_r58).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r59)); });
-    i0.ɵɵelementStart(1, "div", 157)(2, "span", 158);
+    const _r60 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 160);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template_div_click_0_listener() { const notification_r61 = i0.ɵɵrestoreView(_r60).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r61)); });
+    i0.ɵɵelementStart(1, "div", 161)(2, "span", 162);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 159);
+    i0.ɵɵelementStart(4, "span", 163);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "slice");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const notification_r59 = ctx.$implicit;
+    const notification_r61 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(notification_r59.Title);
+    i0.ɵɵtextInterpolate(notification_r61.Title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3, notification_r59.Message, 0, 40), "", ((notification_r59.Message == null ? null : notification_r59.Message.length) || 0) > 40 ? "..." : "");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3, notification_r61.Message, 0, 40), "", ((notification_r61.Message == null ? null : notification_r61.Message.length) || 0) > 40 ? "..." : "");
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147)(1, "h4", 151);
-    i0.ɵɵelement(2, "i", 152);
+    i0.ɵɵelementStart(0, "div", 151)(1, "h4", 155);
+    i0.ɵɵelement(2, "i", 156);
     i0.ɵɵtext(3, " Notifications ");
-    i0.ɵɵelementStart(4, "span", 153);
+    i0.ɵɵelementStart(4, "span", 157);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 154);
-    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template, 7, 7, "div", 155, i0.ɵɵcomponentInstance().trackByNotification, true);
+    i0.ɵɵelementStart(6, "div", 158);
+    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template, 7, 7, "div", 159, i0.ɵɵcomponentInstance().trackByNotification, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1084,31 +1107,31 @@ function HomeDashboardComponent_Conditional_15_Conditional_8_Template(rf, ctx) {
     i0.ɵɵrepeater(ctx_r2.unreadNotifications);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r60 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 163);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template_div_click_0_listener() { const favorite_r61 = i0.ɵɵrestoreView(_r60).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r61)); });
-    i0.ɵɵelementStart(1, "div", 164);
+    const _r62 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 167);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template_div_click_0_listener() { const favorite_r63 = i0.ɵɵrestoreView(_r62).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r63)); });
+    i0.ɵɵelementStart(1, "div", 168);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 157)(4, "span", 158);
+    i0.ɵɵelementStart(3, "div", 161)(4, "span", 162);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 159);
+    i0.ɵɵelementStart(6, "span", 163);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const favorite_r61 = ctx.$implicit;
+    const favorite_r63 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(favorite_r61.Entity));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(favorite_r63.Entity));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(favorite_r61));
+    i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(favorite_r63));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(favorite_r61.Entity);
+    i0.ɵɵtextInterpolate(favorite_r63.Entity);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 154);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template, 8, 4, "div", 162, i0.ɵɵcomponentInstance().trackByFavorite, true);
+    i0.ɵɵelementStart(0, "div", 158);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template, 8, 4, "div", 166, i0.ɵɵcomponentInstance().trackByFavorite, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -1116,19 +1139,19 @@ function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Templ
     i0.ɵɵrepeater(ctx_r2.favorites);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 161);
-    i0.ɵɵelement(1, "i", 165);
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵelement(1, "i", 169);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading...");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 148)(1, "h4", 151);
-    i0.ɵɵelement(2, "i", 160);
+    i0.ɵɵelementStart(0, "div", 152)(1, "h4", 155);
+    i0.ɵɵelement(2, "i", 164);
     i0.ɵɵtext(3, " Favorites ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template, 3, 0, "div", 154);
-    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template, 4, 0, "div", 161);
+    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template, 3, 0, "div", 158);
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template, 4, 0, "div", 165);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1138,31 +1161,31 @@ function HomeDashboardComponent_Conditional_15_Conditional_9_Template(rf, ctx) {
     i0.ɵɵconditional(ctx_r2.favoritesLoading ? 5 : -1);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r62 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template_div_click_0_listener() { const item_r63 = i0.ɵɵrestoreView(_r62).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r63)); });
-    i0.ɵɵelementStart(1, "div", 164);
+    const _r64 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 172);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template_div_click_0_listener() { const item_r65 = i0.ɵɵrestoreView(_r64).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r65)); });
+    i0.ɵɵelementStart(1, "div", 168);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 157)(4, "span", 158);
+    i0.ɵɵelementStart(3, "div", 161)(4, "span", 162);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 159);
+    i0.ɵɵelementStart(6, "span", 163);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r63 = ctx.$implicit;
+    const item_r65 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(item_r63.entityName));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(item_r65.entityName));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r63.recordName || item_r63.recordId);
+    i0.ɵɵtextInterpolate(item_r65.recordName || item_r65.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", item_r63.entityName, " \u00B7 ", ctx_r2.formatDate(item_r63.latestAt));
+    i0.ɵɵtextInterpolate2("", item_r65.entityName, " \u00B7 ", ctx_r2.formatDate(item_r65.latestAt));
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 154);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template, 8, 5, "div", 167, i0.ɵɵcomponentInstance().trackByRecent, true);
+    i0.ɵɵelementStart(0, "div", 158);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template, 8, 5, "div", 171, i0.ɵɵcomponentInstance().trackByRecent, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -1170,19 +1193,19 @@ function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Temp
     i0.ɵɵrepeater(ctx_r2.recentItems);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 161);
-    i0.ɵɵelement(1, "i", 165);
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵelement(1, "i", 169);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading...");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149)(1, "h4", 151);
-    i0.ɵɵelement(2, "i", 166);
+    i0.ɵɵelementStart(0, "div", 153)(1, "h4", 155);
+    i0.ɵɵelement(2, "i", 170);
     i0.ɵɵtext(3, " Recent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template, 3, 0, "div", 154);
-    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template, 4, 0, "div", 161);
+    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template, 3, 0, "div", 158);
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template, 4, 0, "div", 165);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1192,27 +1215,27 @@ function HomeDashboardComponent_Conditional_15_Conditional_10_Template(rf, ctx)
     i0.ɵɵconditional(ctx_r2.recentsLoading ? 5 : -1);
 } }
 function HomeDashboardComponent_Conditional_15_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 150);
-    i0.ɵɵelement(1, "i", 169);
+    i0.ɵɵelementStart(0, "div", 154);
+    i0.ɵɵelement(1, "i", 173);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No quick access items");
     i0.ɵɵelementEnd()();
 } }
 function HomeDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r57 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 144)(2, "h3");
-    i0.ɵɵelement(3, "i", 122);
+    const _r59 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 148)(2, "h3");
+    i0.ɵɵelement(3, "i", 126);
     i0.ɵɵtext(4, " Quick Access ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 145);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r57); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(6, "i", 47);
+    i0.ɵɵelementStart(5, "button", 149);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r59); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
+    i0.ɵɵelement(6, "i", 34);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 146);
-    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_15_Conditional_8_Template, 9, 1, "div", 147);
-    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_15_Conditional_9_Template, 6, 2, "div", 148);
-    i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_15_Conditional_10_Template, 6, 2, "div", 149);
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_15_Conditional_11_Template, 4, 0, "div", 150);
+    i0.ɵɵelementStart(7, "div", 150);
+    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_15_Conditional_8_Template, 9, 1, "div", 151);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_15_Conditional_9_Template, 6, 2, "div", 152);
+    i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_15_Conditional_10_Template, 6, 2, "div", 153);
+    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_15_Conditional_11_Template, 4, 0, "div", 154);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1226,7 +1249,7 @@ function HomeDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(!ctx_r2.favoritesLoading && !ctx_r2.recentsLoading && ctx_r2.unreadNotifications.length === 0 && ctx_r2.favorites.length === 0 && ctx_r2.recentItems.length === 0 ? 11 : -1);
 } }
 function HomeDashboardComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 171);
+    i0.ɵɵelementStart(0, "span", 175);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1235,11 +1258,11 @@ function HomeDashboardComponent_Conditional_16_Conditional_2_Template(rf, ctx) {
     i0.ɵɵtextInterpolate(ctx_r2.unreadNotifications.length);
 } }
 function HomeDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r64 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 170);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r64); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(1, "i", 122);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 171);
+    const _r66 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 174);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r66); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
+    i0.ɵɵelement(1, "i", 126);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 175);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1279,6 +1302,8 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     notificationsLoading = true;
     // Sidebar state - default closed on all screen sizes
     sidebarOpen = false;
+    // Pin empty-state dismissal preference (persisted in UserSettings via UserInfoEngine)
+    HidePinEmptyState = false;
     // Pin state
     PinnedItems = [];
     UngroupedPins = [];
@@ -1405,6 +1430,9 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         // Load favorites and recents asynchronously (don't block rendering)
         this.loadFavorites();
         this.loadRecents();
+        // Load pin empty-state dismissal preference
+        const hideSetting = UserInfoEngine.Instance.GetSetting('HomeApp.HidePinEmptyState');
+        this.HidePinEmptyState = hideSetting === 'true';
         // Load pinned items
         await this.pinService.LoadPins();
         this.pinService.Pins$
@@ -1419,6 +1447,14 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.resolveRecordPinNames();
         // Resolve missing icons for Custom pins
         this.resolveCustomPinIcons();
+        // Pre-warm engines used by the Add Pin panel so the first click feels instant.
+        // DashboardEngine and QueryEngine already auto-start; UserViewEngine and ActionEngineBase
+        // don't, so kick them off in the background (fire-and-forget — Config(false) is idempotent
+        // and they cache their results, so a subsequent OpenAddPinPanel() call will be a no-op).
+        UserViewEngine.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse)
+            .catch(err => console.warn('[Home] UserViewEngine pre-warm failed', err));
+        ActionEngineBase.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse)
+            .catch(err => console.warn('[Home] ActionEngineBase pre-warm failed', err));
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -1903,12 +1939,11 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
                 if (appName) {
                     const app = this.appManager.GetAllApps().find(a => a.Name === appName);
                     if (app) {
-                        this.navigationService.SwitchToApp(app.ID, navItemName).then(() => {
-                            // Apply query params after the tab is created/activated
-                            if (queryParams && Object.keys(queryParams).length > 0) {
-                                this.navigationService.UpdateActiveTabQueryParams(queryParams);
-                            }
-                        });
+                        // Pass query params INTO SwitchToApp so they're applied synchronously when the
+                        // target tab activates — before a cached resource component reattaches. The old
+                        // post-hoc UpdateActiveTabQueryParams() in a .then() raced the cache reattach and
+                        // lost: e.g. two conversation pins both landed on whatever chat was already open.
+                        void this.navigationService.SwitchToApp(app.ID, navItemName, queryParams);
                     }
                     else {
                         console.warn(`[Pin Click] Custom pin: app "${appName}" not found`, config);
@@ -1979,6 +2014,15 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         }
         this.cdr.markForCheck();
     }
+    /**
+     * Permanently hide the "No pinned items yet" empty state for this user.
+     * Persisted in UserSettings via UserInfoEngine.
+     */
+    DismissPinEmptyState() {
+        this.HidePinEmptyState = true;
+        UserInfoEngine.Instance.SetSettingDebounced('HomeApp.HidePinEmptyState', 'true');
+        this.cdr.markForCheck();
+    }
     /**
      * Remove a pin
      */
@@ -2255,45 +2299,37 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.cdr.markForCheck();
     }
     async loadAvailableResources() {
-        const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-        // Actions come from ActionEngineBase's cache — no RunView needed. Config() is idempotent,
-        // so calling it in parallel with the remaining RunViews is cheap on repeat loads and avoids
-        // a redundant DB round trip when the engine is already primed.
-        const [dashboards, views, queries] = await Promise.all([
-            rv.RunView({
-                EntityName: 'MJ: Dashboards',
-                Fields: ['ID', 'Name'],
-                ExtraFilter: `Type='Config'`,
-                OrderBy: 'Name',
-                ResultType: 'simple'
-            }),
-            rv.RunView({
-                EntityName: 'MJ: User Views',
-                Fields: ['ID', 'Name', 'Entity'],
-                ExtraFilter: `UserID='${this.metadata.CurrentUser.ID}'`,
-                OrderBy: 'Name',
-                ResultType: 'simple'
-            }),
-            rv.RunView({
-                EntityName: 'MJ: Queries',
-                Fields: ['ID', 'Name'],
-                OrderBy: 'Name',
-                ResultType: 'simple'
-            }),
-            ActionEngineBase.Instance.Config()
+        // All four engines are singletons that cache their data in memory. Config(false) is a no-op
+        // after first init — DashboardEngine and QueryEngine auto-start at app startup, UserViewEngine
+        // and ActionEngineBase initialize on first call. Running them in parallel means whichever
+        // ones still need to load do so concurrently, and the already-initialized ones return immediately.
+        await Promise.all([
+            DashboardEngine.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse),
+            UserViewEngine.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse),
+            QueryEngine.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse),
+            ActionEngineBase.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse)
         ]);
+        const cachedDashboards = DashboardEngine.Instance.Dashboards
+            .filter(d => d.Type === 'Config')
+            .sort((a, b) => a.Name.localeCompare(b.Name));
+        const cachedViews = UserViewEngine.Instance.GetViewsForCurrentUser()
+            .slice()
+            .sort((a, b) => a.Name.localeCompare(b.Name));
+        const cachedQueries = QueryEngine.Instance.Queries
+            .slice()
+            .sort((a, b) => a.Name.localeCompare(b.Name));
         const cachedActions = ActionEngineBase.Instance.Actions
             .filter(a => a.Status === 'Active')
             .sort((a, b) => a.Name.localeCompare(b.Name));
-        this.AvailableDashboards = (dashboards.Results || []).map(d => ({
+        this.AvailableDashboards = cachedDashboards.map(d => ({
             id: d.ID, name: d.Name,
             pinned: this.pinService.IsPinned('Dashboards', { dashboardId: d.ID })
         }));
-        this.AvailableViews = (views.Results || []).map(v => ({
+        this.AvailableViews = cachedViews.map(v => ({
             id: v.ID, name: v.Name, entityName: v.Entity || '',
             pinned: this.pinService.IsPinned('User Views', { viewId: v.ID })
         }));
-        this.AvailableQueries = (queries.Results || []).map(q => ({
+        this.AvailableQueries = cachedQueries.map(q => ({
             id: q.ID, name: q.Name,
             pinned: this.pinService.IsPinned('Queries', { queryId: q.ID })
         }));
@@ -2502,7 +2538,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.appConfigDialog = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 19, consts: [["appConfigDialog", ""], [1, "home-dashboard"], [1, "main-content"], [1, "home-header"], [1, "greeting-section"], [1, "date"], [1, "pinned-section"], [1, "pin-context-menu", 3, "left", "top"], [3, "Result", "Visible", "ActionID", "ActionName", "ActionDescription"], [3, "Result", "Visible", "Pin"], [1, "loading-container"], [1, "apps-section"], [1, "quick-access-sidebar"], ["title", "Quick Access", 1, "sidebar-fab-toggle"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "pinned-header"], [1, "section-title"], [1, "fa-solid", "fa-thumbtack"], [1, "pinned-actions"], [1, "pin-action-btn", "done"], [1, "edit-mode-banner"], [1, "pin-empty-state"], [1, "pin-grid"], [1, "pin-action-btn", "done", 3, "click"], [1, "fa-solid", "fa-check"], [1, "pin-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "pin-action-btn"], [1, "pin-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "pin-card", 3, "edit-mode", "dragging", "drag-over", "draggable"], [1, "add-pin-card"], [1, "pin-card", 3, "dragstart", "dragover", "dragleave", "drop", "dragend", "click", "draggable"], [1, "edit-controls"], [1, "pin-thumbnail"], [1, "pin-thumbnail", "action-mode", 3, "background"], [1, "pin-thumbnail", "icon-mode", 3, "--pin-icon-color"], [1, "pin-info"], [1, "pin-name-input", 3, "value"], [1, "pin-name"], [1, "pin-meta"], [1, "pin-app-badge"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "edit-card-actions"], [1, "edit-card-btn", "delete", 3, "click"], [1, "fa-solid", "fa-xmark"], [3, "src", "alt"], [1, "pin-overlay"], [1, "open-btn", 3, "click"], [1, "pin-thumbnail", "action-mode"], [1, "pin-thumbnail", "icon-mode"], [1, "pin-name-input", 3, "blur", "keydown.enter", "click", "value"], [1, "pin-name", 3, "click"], [1, "more-btn"], [1, "more-btn", 3, "click"], [1, "fa-solid", "fa-ellipsis"], [1, "group-header"], [1, "group-name-input", 3, "value"], [1, "group-name"], [1, "group-line"], [1, "group-count"], [1, "group-edit-controls"], [1, "group-name-input", 3, "blur", "keydown.enter", "value"], [1, "group-name", 3, "click"], [1, "group-edit-btn", "danger", 3, "click"], [1, "fa-solid", "fa-folder-minus"], [1, "add-pin-card", 3, "click"], [1, "pin-context-menu"], [1, "pin-context-item", 3, "click"], [1, "pin-context-divider"], [1, "pin-context-submenu"], [1, "pin-context-item", "submenu-header"], [1, "fa-solid", "fa-folder"], [1, "pin-context-item", "submenu-item"], [1, "pin-context-item", "danger", 3, "click"], [1, "fa-solid", "fa-thumbtack-slash"], [1, "pin-context-item", "submenu-item", 3, "click"], [1, "slide-panel-backdrop", 3, "click"], [1, "slide-panel"], [1, "slide-panel-header"], [1, "slide-panel-close", 3, "click"], [1, "search-box"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search apps, dashboards, views, queries...", 3, "ngModelChange", "ngModel"], [1, "group-selector"], [3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["value", "__new__"], [1, "new-group-row"], [1, "panel-results"], [1, "panel-loading"], ["type", "text", "placeholder", "Enter new group name...", 1, "new-group-input", 3, "ngModelChange", "ngModel"], ["text", "Loading resources...", "size", "small"], [1, "panel-section"], [1, "panel-section-title", "collapsible", 3, "click"], [1, "fa-solid", "fa-grid-2"], [1, "panel-count"], [1, "section-chevron", "fa-solid"], [1, "panel-app-header"], [1, "panel-app-icon"], [1, "panel-app-name"], [1, "panel-item", "panel-nav-item"], [1, "panel-item-icon"], [1, "panel-item-info"], [1, "panel-item-name"], [1, "panel-item-action"], [1, "pinned-badge"], [1, "pin-btn"], [1, "pin-btn", 3, "click"], [1, "fa-solid", "fa-gauge-high"], [1, "panel-item"], [1, "panel-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))"], [1, "fa-solid", "fa-gauge-high", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-table-list"], [1, "fa-solid", "fa-table-list", 2, "color", "var(--mj-brand-primary)"], [1, "panel-item-sub"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-database", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-bolt", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-sliders"], ["text", "Loading your applications...", "size", "large"], [1, "apps-grid"], [1, "app-card", 3, "--app-color"], [1, "empty-state"], [1, "app-card", 3, "click"], [1, "app-icon-wrapper"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "app-description"], [1, "nav-preview"], [1, "app-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "nav-item-chip"], [1, "more-items"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "sidebar-header"], ["title", "Close panel", 1, "sidebar-close-btn", 3, "click"], [1, "sidebar-content"], [1, "sidebar-section", "notifications-section"], [1, "sidebar-section", "favorites-section"], [1, "sidebar-section", "recents-section"], [1, "sidebar-empty"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], [1, "sidebar-item", "notification-item"], [1, "sidebar-item", "notification-item", 3, "click"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "fa-solid", "fa-star"], [1, "sidebar-loading"], [1, "sidebar-item", "favorite-item"], [1, "sidebar-item", "favorite-item", 3, "click"], [1, "sidebar-item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "sidebar-item", "recent-item"], [1, "sidebar-item", "recent-item", 3, "click"], [1, "fa-solid", "fa-inbox"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 19, consts: [["appConfigDialog", ""], [1, "home-dashboard"], [1, "main-content"], [1, "home-header"], [1, "greeting-section"], [1, "date"], [1, "pinned-section"], [1, "pin-context-menu", 3, "left", "top"], [3, "Result", "Visible", "ActionID", "ActionName", "ActionDescription"], [3, "Result", "Visible", "Pin"], [1, "loading-container"], [1, "apps-section"], [1, "quick-access-sidebar"], ["title", "Quick Access", 1, "sidebar-fab-toggle"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "pinned-header"], [1, "section-title"], [1, "fa-solid", "fa-thumbtack"], [1, "pinned-actions"], [1, "pin-action-btn", "done"], [1, "edit-mode-banner"], [1, "pin-empty-state"], [1, "pin-grid"], [1, "pin-action-btn", "done", 3, "click"], [1, "fa-solid", "fa-check"], [1, "pin-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "pin-action-btn"], [1, "pin-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-arrows-up-down-left-right"], ["type", "button", "title", "Hide this", 1, "pin-empty-close"], ["type", "button", 1, "pin-empty-dismiss"], ["type", "button", "title", "Hide this", 1, "pin-empty-close", 3, "click"], [1, "fa-solid", "fa-xmark"], ["type", "button", 1, "pin-empty-dismiss", 3, "click"], [1, "pin-card", 3, "edit-mode", "dragging", "drag-over", "draggable"], [1, "add-pin-card"], [1, "pin-card", 3, "dragstart", "dragover", "dragleave", "drop", "dragend", "click", "draggable"], [1, "edit-controls"], [1, "pin-thumbnail"], [1, "pin-thumbnail", "action-mode", 3, "background"], [1, "pin-thumbnail", "icon-mode", 3, "--pin-icon-color"], [1, "pin-info"], [1, "pin-name-input", 3, "value"], [1, "pin-name"], [1, "pin-meta"], [1, "pin-app-badge"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "edit-card-actions"], [1, "edit-card-btn", "delete", 3, "click"], [3, "src", "alt"], [1, "pin-overlay"], [1, "open-btn", 3, "click"], [1, "pin-thumbnail", "action-mode"], [1, "pin-thumbnail", "icon-mode"], [1, "pin-name-input", 3, "blur", "keydown.enter", "click", "value"], [1, "pin-name", 3, "click"], [1, "more-btn"], [1, "more-btn", 3, "click"], [1, "fa-solid", "fa-ellipsis"], [1, "group-header"], [1, "group-name-input", 3, "value"], [1, "group-name"], [1, "group-line"], [1, "group-count"], [1, "group-edit-controls"], [1, "group-name-input", 3, "blur", "keydown.enter", "value"], [1, "group-name", 3, "click"], [1, "group-edit-btn", "danger", 3, "click"], [1, "fa-solid", "fa-folder-minus"], [1, "add-pin-card", 3, "click"], [1, "pin-context-menu"], [1, "pin-context-item", 3, "click"], [1, "pin-context-divider"], [1, "pin-context-submenu"], [1, "pin-context-item", "submenu-header"], [1, "fa-solid", "fa-folder"], [1, "pin-context-item", "submenu-item"], [1, "pin-context-item", "danger", 3, "click"], [1, "fa-solid", "fa-thumbtack-slash"], [1, "pin-context-item", "submenu-item", 3, "click"], [1, "slide-panel-backdrop", 3, "click"], [1, "slide-panel"], [1, "slide-panel-header"], [1, "slide-panel-close", 3, "click"], [1, "search-box"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search apps, dashboards, views, queries...", 3, "ngModelChange", "ngModel"], [1, "group-selector"], [3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["value", "__new__"], [1, "new-group-row"], [1, "panel-results"], [1, "panel-loading"], ["type", "text", "placeholder", "Enter new group name...", 1, "new-group-input", 3, "ngModelChange", "ngModel"], ["text", "Loading resources...", "size", "small"], [1, "panel-section"], [1, "panel-section-title", "collapsible", 3, "click"], [1, "fa-solid", "fa-grid-2"], [1, "panel-count"], [1, "section-chevron", "fa-solid"], [1, "panel-app-header"], [1, "panel-app-icon"], [1, "panel-app-name"], [1, "panel-item", "panel-nav-item"], [1, "panel-item-icon"], [1, "panel-item-info"], [1, "panel-item-name"], [1, "panel-item-action"], [1, "pinned-badge"], [1, "pin-btn"], [1, "pin-btn", 3, "click"], [1, "fa-solid", "fa-gauge-high"], [1, "panel-item"], [1, "panel-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))"], [1, "fa-solid", "fa-gauge-high", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-table-list"], [1, "fa-solid", "fa-table-list", 2, "color", "var(--mj-brand-primary)"], [1, "panel-item-sub"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-database", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-bolt", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-sliders"], ["text", "Loading your applications...", "size", "large"], [1, "apps-grid"], [1, "app-card", 3, "--app-color"], [1, "empty-state"], [1, "app-card", 3, "click"], [1, "app-icon-wrapper"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "app-description"], [1, "nav-preview"], [1, "app-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "nav-item-chip"], [1, "more-items"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-gear"], [1, "sidebar-header"], ["title", "Close panel", 1, "sidebar-close-btn", 3, "click"], [1, "sidebar-content"], [1, "sidebar-section", "notifications-section"], [1, "sidebar-section", "favorites-section"], [1, "sidebar-section", "recents-section"], [1, "sidebar-empty"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], [1, "sidebar-item", "notification-item"], [1, "sidebar-item", "notification-item", 3, "click"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "fa-solid", "fa-star"], [1, "sidebar-loading"], [1, "sidebar-item", "favorite-item"], [1, "sidebar-item", "favorite-item", 3, "click"], [1, "sidebar-item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "sidebar-item", "recent-item"], [1, "sidebar-item", "recent-item", 3, "click"], [1, "fa-solid", "fa-inbox"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "h1");
             i0.ɵɵtext(5);
@@ -2554,7 +2590,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             i0.ɵɵconditional(ctx.hasSidebarContent && !ctx.sidebarOpen ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i5.LoadingComponent, i6.UserAppConfigComponent, i7.ActionPinConfigDialogComponent, i8.ActionPinRunnerDialogComponent, i9.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  background: var(--mj-bg-page);\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 var(--mj-transition-slow);\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: var(--mj-text-4xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-muted);\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-brand-md);\n  transition: all var(--mj-transition-base);\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: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\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: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-brand-primary);\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: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-shadow-lg);\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: var(--mj-radius-lg);\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: var(--mj-text-xl);\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: var(--mj-text-inverse);\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: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.nav-item-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n}\n\n.more-items[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-base);\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: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-4xl);\n  color: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\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: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform var(--mj-transition-slow);\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\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: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n.notifications-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-600);\n}\n\n.favorites-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.recents-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.section-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\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: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-600);\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-500);\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-50);\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-4xl);\n  margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.pinned-section[_ngcontent-%COMP%] {\n  margin-bottom: 32px;\n}\n\n.pinned-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n.pinned-header[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.pinned-actions[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-success);\n}\n\n\n\n.edit-mode-banner[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n  border-radius: var(--mj-radius-lg);\n  padding: 12px 20px;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.pin-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px 20px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.pin-empty-state[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.pin-empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  margin: 0 0 6px 0;\n}\n\n.pin-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  max-width: 360px;\n  margin: 0 0 16px 0;\n}\n\n\n\n.pin-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 12px;\n}\n\n\n\n.group-header[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0 4px 0;\n  margin-top: 8px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.group-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n.group-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.group-name-input[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  width: 160px;\n}\n\n.group-edit-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.group-edit-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%] {\n  cursor: grab;\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.pin-card.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-lg);\n  transform: rotate(2deg);\n}\n\n.pin-card.drag-over[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  border-style: dashed;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.edit-controls[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  right: 8px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.edit-controls[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  pointer-events: auto;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: grab;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.edit-card-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n\n\n.pin-thumbnail[_ngcontent-%COMP%] {\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  position: relative;\n}\n\n.pin-thumbnail[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--pin-icon-color, var(--mj-text-muted));\n  opacity: 0.7;\n}\n\n\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse, white);\n  background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--mj-text-inverse, white);\n}\n\n\n\n.pin-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  background: rgba(0,0,0,0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-overlay[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: none;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.pin-info[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n}\n\n.pin-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 6px;\n  width: 100%;\n  outline: none;\n  background: var(--mj-bg-surface);\n}\n\n.pin-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pin-meta[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.pin-app-badge[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.add-pin-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 2px dashed var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 180px;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  gap: 8px;\n  color: var(--mj-text-muted);\n}\n\n.add-pin-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 28px;\n}\n\n.add-pin-card[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n}\n\n\n\n\n\n.pin-context-menu[_ngcontent-%COMP%] {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10001;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_pinMenuIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinMenuIn {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 14px;\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.pin-context-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  cursor: default;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n.pin-context-item.submenu-item[_ngcontent-%COMP%] {\n  padding-left: 30px;\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n\n\n.slide-panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 400px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 2001;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.slide-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n}\n\n.slide-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.slide-panel-close[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n\n\n.group-selector[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.group-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.group-selector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n\n\n.panel-results[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.panel-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.panel-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 12px;\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n  transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.section-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.panel-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.panel-app-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 6px 12px;\n  margin-top: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header[_ngcontent-%COMP%]:first-child {\n  margin-top: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--panel-app-color);\n}\n\n.panel-app-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%] {\n  padding: 10px 12px 10px 32px;\n  margin-left: 12px;\n  border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:last-of-type {\n  border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:hover {\n  border-left-color: var(--mj-brand-primary);\n}\n\n\n\n.new-group-row[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n.panel-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  cursor: pointer;\n}\n\n.panel-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-item-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-item-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-item-sub[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.panel-item-action[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.panel-item-action[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-sm);\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-status-success);\n  border: 1px solid var(--mj-status-success);\n  cursor: default !important;\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: var(--mj-text-3xl);\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\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: absolute;\n    top: 0;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\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: var(--mj-text-2xl);\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 10000;\n    border-left: none;\n    border-top: none;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    display: none;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    display: none;\n  }\n\n  .pin-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 12px;\n  }\n\n  .slide-panel[_ngcontent-%COMP%] {\n    width: 100%;\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: var(--mj-text-lg);\n  }\n\n  .app-name[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n  }\n\n  .nav-preview[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    position: fixed;\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: var(--mj-text-lg);\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: var(--mj-text-xl);\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\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: var(--mj-text-base);\n  }\n}"], changeDetection: 0 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i5.LoadingComponent, i6.UserAppConfigComponent, i7.ActionPinConfigDialogComponent, i8.ActionPinRunnerDialogComponent, i9.SlicePipe], styles: [".home-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  background: var(--mj-bg-page);\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 var(--mj-transition-slow);\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: var(--mj-text-4xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-muted);\n}\n\n\n\n.sidebar-fab-toggle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-brand-md);\n  transition: all var(--mj-transition-base);\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: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\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: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-brand-primary);\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: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-shadow-lg);\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: var(--mj-radius-lg);\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: var(--mj-text-xl);\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: var(--mj-text-inverse);\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: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.nav-item-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n}\n\n.more-items[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-base);\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: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-4xl);\n  color: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\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: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform var(--mj-transition-slow);\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\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: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n.notifications-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-600);\n}\n\n.favorites-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.recents-section[_ngcontent-%COMP%]   .sidebar-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.section-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\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: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n}\n\n.notification-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-600);\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n}\n\n.favorite-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-500);\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-50);\n}\n\n.recent-item[_ngcontent-%COMP%]   .sidebar-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  padding: 8px 0;\n}\n\n.sidebar-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-4xl);\n  margin-bottom: 12px;\n}\n\n.sidebar-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.pinned-section[_ngcontent-%COMP%] {\n  margin-bottom: 32px;\n}\n\n.pinned-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n.pinned-header[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.pinned-actions[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.pin-action-btn[_ngcontent-%COMP%] {\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-success);\n}\n\n\n\n.edit-mode-banner[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n  border-radius: var(--mj-radius-lg);\n  padding: 12px 20px;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.pin-empty-state[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px 20px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.pin-empty-close[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pin-empty-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-empty-state[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.pin-empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  margin: 0 0 6px 0;\n}\n\n.pin-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  max-width: 360px;\n  margin: 0 0 16px 0;\n}\n\n.pin-empty-dismiss[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  background: transparent;\n  border: none;\n  padding: 4px 8px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.pin-empty-dismiss[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n\n\n.pin-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 12px;\n}\n\n\n\n.group-header[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0 4px 0;\n  margin-top: 8px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.group-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n.group-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.group-name-input[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  width: 160px;\n}\n\n.group-edit-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.group-edit-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n\n\n.pin-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%] {\n  cursor: grab;\n}\n\n.pin-card.edit-mode[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.pin-card.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-lg);\n  transform: rotate(2deg);\n}\n\n.pin-card.drag-over[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  border-style: dashed;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.edit-controls[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  right: 8px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.edit-controls[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  pointer-events: auto;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: grab;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.edit-card-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n\n\n.pin-thumbnail[_ngcontent-%COMP%] {\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  position: relative;\n}\n\n.pin-thumbnail[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--pin-icon-color, var(--mj-text-muted));\n  opacity: 0.7;\n}\n\n\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse, white);\n  background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--mj-text-inverse, white);\n}\n\n\n\n.pin-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  background: rgba(0,0,0,0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-overlay[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: none;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.pin-info[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n}\n\n.pin-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 6px;\n  width: 100%;\n  outline: none;\n  background: var(--mj-bg-surface);\n}\n\n.pin-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pin-meta[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.pin-app-badge[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.add-pin-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 2px dashed var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 180px;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  gap: 8px;\n  color: var(--mj-text-muted);\n}\n\n.add-pin-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 28px;\n}\n\n.add-pin-card[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n}\n\n\n\n\n\n.pin-context-menu[_ngcontent-%COMP%] {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10001;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_pinMenuIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinMenuIn {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 14px;\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.pin-context-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  cursor: default;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n.pin-context-item.submenu-item[_ngcontent-%COMP%] {\n  padding-left: 30px;\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n\n\n.slide-panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 400px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 2001;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.slide-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n}\n\n.slide-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.slide-panel-close[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n\n\n.group-selector[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.group-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.group-selector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n\n\n.panel-results[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.panel-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.panel-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 12px;\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n  transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.section-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.panel-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.panel-app-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 6px 12px;\n  margin-top: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header[_ngcontent-%COMP%]:first-child {\n  margin-top: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--panel-app-color);\n}\n\n.panel-app-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%] {\n  padding: 10px 12px 10px 32px;\n  margin-left: 12px;\n  border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:last-of-type {\n  border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item[_ngcontent-%COMP%]:hover {\n  border-left-color: var(--mj-brand-primary);\n}\n\n\n\n.new-group-row[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.new-group-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n.panel-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  cursor: pointer;\n}\n\n.panel-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-item-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-item-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-item-sub[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.panel-item-action[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.panel-item-action[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-sm);\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-status-success);\n  border: 1px solid var(--mj-status-success);\n  cursor: default !important;\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: var(--mj-text-3xl);\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\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: absolute;\n    top: 0;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\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: var(--mj-text-2xl);\n  }\n\n  \n\n  .quick-access-sidebar[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 10000;\n    border-left: none;\n    border-top: none;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    display: none;\n  }\n\n  \n\n  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::after {\n    display: none;\n  }\n\n  .pin-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 12px;\n  }\n\n  .slide-panel[_ngcontent-%COMP%] {\n    width: 100%;\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: var(--mj-text-lg);\n  }\n\n  .app-name[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n  }\n\n  .nav-preview[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  \n\n  .sidebar-fab-toggle[_ngcontent-%COMP%] {\n    position: fixed;\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: var(--mj-text-lg);\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: var(--mj-text-xl);\n  }\n\n  .greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\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: var(--mj-text-base);\n  }\n}"], changeDetection: 0 });
 };
 HomeDashboardComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'HomeDashboard')
@@ -2562,7 +2598,7 @@ HomeDashboardComponent = __decorate([
 export { HomeDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeDashboardComponent, [{
         type: Component,
-        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    <!-- Pinned Section -->\n    @if (!isLoading) {\n      <div class=\"pinned-section\">\n        <div class=\"pinned-header\">\n          <h2 class=\"section-title\">\n            <i class=\"fa-solid fa-thumbtack\"></i>\n            Pinned\n          </h2>\n          <div class=\"pinned-actions\">\n            @if (EditMode) {\n              <button class=\"pin-action-btn done\" (click)=\"ToggleEditMode()\">\n                <i class=\"fa-solid fa-check\"></i> Done\n              </button>\n            } @else {\n              <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Pin\n              </button>\n              @if (PinnedItems.length > 0) {\n                <button class=\"pin-action-btn\" (click)=\"ToggleEditMode()\">\n                  <i class=\"fa-solid fa-pen\"></i> Edit\n                </button>\n              }\n            }\n          </div>\n        </div>\n\n        @if (EditMode) {\n          <div class=\"edit-mode-banner\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            <span><strong>Edit mode</strong> \u2014 Drag cards to reorder. Click names to rename.</span>\n          </div>\n        }\n\n        <!-- Empty State -->\n        @if (PinnedItems.length === 0 && !EditMode) {\n          <div class=\"pin-empty-state\">\n            <i class=\"fa-solid fa-thumbtack\"></i>\n            <h3>No pinned items yet</h3>\n            <p>Pin your favorite dashboards, views, queries, and reports for quick access.</p>\n            <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n              <i class=\"fa-solid fa-plus\"></i> Add your first pin\n            </button>\n          </div>\n        }\n\n        <!-- Pin Grid -->\n        @if (PinnedItems.length > 0) {\n          <div class=\"pin-grid\">\n            <!-- Ungrouped Pins -->\n            @for (pin of UngroupedPins; track trackByPin($index, pin)) {\n              <div class=\"pin-card\"\n                [class.edit-mode]=\"EditMode\"\n                [class.dragging]=\"DraggingPinId === pin.Id\"\n                [class.drag-over]=\"DragOverPinId === pin.Id\"\n                [draggable]=\"EditMode\"\n                (dragstart)=\"OnDragStart($event, pin)\"\n                (dragover)=\"OnDragOver($event, pin)\"\n                (dragleave)=\"OnDragLeave()\"\n                (drop)=\"OnDrop($event, pin)\"\n                (dragend)=\"OnDragEnd()\"\n                (click)=\"OnPinClick(pin)\">\n\n                <!-- Edit mode controls -->\n                @if (EditMode) {\n                  <div class=\"edit-controls\">\n                    <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n                    <div class=\"edit-card-actions\">\n                      <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n                        <i class=\"fa-solid fa-xmark\"></i>\n                      </button>\n                    </div>\n                  </div>\n                }\n\n                <!-- Thumbnail / Icon -->\n                @if (pin.Thumbnail) {\n                  <div class=\"pin-thumbnail\">\n                    <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                      </div>\n                    }\n                  </div>\n                } @else if (pin.ResourceType === 'Actions') {\n                  <div class=\"pin-thumbnail action-mode\"\n                       [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- Pin Info -->\n                <div class=\"pin-info\">\n                  @if (EditMode && EditingPinId === pin.Id) {\n                    <input class=\"pin-name-input\"\n                      [value]=\"pin.DisplayName\"\n                      (blur)=\"SavePinName(pin.Id, GetInputValue($event))\"\n                      (keydown.enter)=\"SavePinName(pin.Id, GetInputValue($event))\"\n                      (click)=\"$event.stopPropagation()\" />\n                  } @else {\n                    <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n                      {{ pin.DisplayName }}\n                      @if (!EditMode) {\n                        <button class=\"more-btn\" (click)=\"ShowPinMenu($event, pin)\">\n                          <i class=\"fa-solid fa-ellipsis\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                  <div class=\"pin-meta\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    {{ GetResourceTypeLabel(pin) }}\n                    @if (pin.ApplicationName && pin.ResourceType !== 'Custom') {\n                      <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Grouped Pins -->\n            @for (group of PinGroups; track trackByGroup($index, group)) {\n              <!-- Group Header -->\n              <div class=\"group-header\">\n                @if (EditMode && EditingGroupName === group) {\n                  <input class=\"group-name-input\"\n                    [value]=\"group\"\n                    (blur)=\"SaveGroupName(group, GetInputValue($event))\"\n                    (keydown.enter)=\"SaveGroupName(group, GetInputValue($event))\" />\n                } @else {\n                  <span class=\"group-name\" (click)=\"EditMode ? StartEditingGroup(group) : null\">{{ group }}</span>\n                }\n                <div class=\"group-line\"></div>\n                <span class=\"group-count\">{{ GetPinsInGroup(group).length }} pins</span>\n                @if (EditMode) {\n                  <div class=\"group-edit-controls\">\n                    <button class=\"group-edit-btn danger\" (click)=\"RemoveGroup(group)\">\n                      <i class=\"fa-solid fa-folder-minus\"></i> Remove Group\n                    </button>\n                  </div>\n                }\n              </div>\n\n              <!-- Pins in Group -->\n              @for (pin of GetPinsInGroup(group); track trackByPin($index, pin)) {\n                <div class=\"pin-card\"\n                  [class.edit-mode]=\"EditMode\"\n                  [class.dragging]=\"DraggingPinId === pin.Id\"\n                  [class.drag-over]=\"DragOverPinId === pin.Id\"\n                  [draggable]=\"EditMode\"\n                  (dragstart)=\"OnDragStart($event, pin)\"\n                  (dragover)=\"OnDragOver($event, pin)\"\n                  (dragleave)=\"OnDragLeave()\"\n                  (drop)=\"OnDrop($event, pin)\"\n                  (dragend)=\"OnDragEnd()\"\n                  (click)=\"OnPinClick(pin)\">\n\n                  @if (EditMode) {\n                    <div class=\"edit-controls\">\n                      <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n                      <div class=\"edit-card-actions\">\n                        <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n                          <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  }\n\n                  @if (pin.Thumbnail) {\n                    <div class=\"pin-thumbnail\">\n                      <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                        </div>\n                      }\n                    </div>\n                  } @else if (pin.ResourceType === 'Actions') {\n                    <div class=\"pin-thumbnail action-mode\"\n                         [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <div class=\"pin-info\">\n                    @if (EditMode && EditingPinId === pin.Id) {\n                      <input class=\"pin-name-input\"\n                        [value]=\"pin.DisplayName\"\n                        (blur)=\"SavePinName(pin.Id, $event.target.value)\"\n                        (keydown.enter)=\"SavePinName(pin.Id, $event.target.value)\"\n                        (click)=\"$event.stopPropagation()\" />\n                    } @else {\n                      <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n                        {{ pin.DisplayName }}\n                        @if (!EditMode) {\n                          <button class=\"more-btn\" (click)=\"$event.stopPropagation()\">\n                            <i class=\"fa-solid fa-ellipsis\"></i>\n                          </button>\n                        }\n                      </div>\n                    }\n                    <div class=\"pin-meta\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      {{ GetResourceTypeLabel(pin) }}\n                      @if (pin.ApplicationName) {\n                        <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            }\n\n            <!-- Add Pin card (edit mode) -->\n            @if (EditMode) {\n              <div class=\"add-pin-card\" (click)=\"OpenAddPinPanel()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                <span>Add Pin</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Pin Context Menu (ellipsis) -->\n    @if (PinMenuVisible && PinMenuPin) {\n      <div class=\"pin-context-menu\"\n        [style.left.px]=\"PinMenuX\"\n        [style.top.px]=\"PinMenuY\">\n        <div class=\"pin-context-item\" (click)=\"OnPinMenuEdit()\">\n          <i class=\"fa-solid fa-pen\"></i>\n          <span>Edit</span>\n        </div>\n        <div class=\"pin-context-divider\"></div>\n        <div class=\"pin-context-submenu\">\n          <div class=\"pin-context-item submenu-header\">\n            <i class=\"fa-solid fa-folder\"></i>\n            <span>Move to Group</span>\n          </div>\n          @if (PinMenuPin.Group) {\n            <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(undefined)\">\n              <span>(No group)</span>\n            </div>\n          }\n          @for (group of PinGroups; track group) {\n            @if (group !== PinMenuPin.Group) {\n              <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(group)\">\n                <span>{{ group }}</span>\n              </div>\n            }\n          }\n        </div>\n        <div class=\"pin-context-divider\"></div>\n        <div class=\"pin-context-item danger\" (click)=\"OnPinMenuUnpin()\">\n          <i class=\"fa-solid fa-thumbtack-slash\"></i>\n          <span>Unpin</span>\n        </div>\n      </div>\n    }\n\n    <!-- Add Pin Slide-In Panel -->\n    @if (AddPanelOpen) {\n      <div class=\"slide-panel-backdrop\" (click)=\"CloseAddPinPanel()\"></div>\n      <div class=\"slide-panel\">\n        <div class=\"slide-panel-header\">\n          <h3><i class=\"fa-solid fa-thumbtack\"></i> Add Pin</h3>\n          <button class=\"slide-panel-close\" (click)=\"CloseAddPinPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <div class=\"search-box\">\n          <div class=\"search-input-wrapper\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n            <input type=\"text\"\n              placeholder=\"Search apps, dashboards, views, queries...\"\n              [(ngModel)]=\"AddPanelSearchQuery\" />\n          </div>\n        </div>\n\n        <div class=\"group-selector\">\n          <label><i class=\"fa-solid fa-folder\"></i> Add to group:</label>\n          <select [(ngModel)]=\"AddPanelSelectedGroup\">\n            <option value=\"\">(No group)</option>\n            @for (group of PinGroups; track group) {\n              <option [value]=\"group\">{{ group }}</option>\n            }\n            <option value=\"__new__\">+ New group...</option>\n          </select>\n        </div>\n        @if (AddPanelSelectedGroup === '__new__') {\n          <div class=\"new-group-row\">\n            <input class=\"new-group-input\"\n              type=\"text\"\n              placeholder=\"Enter new group name...\"\n              [(ngModel)]=\"AddPanelNewGroupName\" />\n          </div>\n        }\n\n        <div class=\"panel-results\">\n          @if (AddPanelLoading) {\n            <div class=\"panel-loading\">\n              <mj-loading text=\"Loading resources...\" size=\"small\"></mj-loading>\n            </div>\n          } @else {\n            <!-- Apps with Nav Items -->\n            @if (FilterApps().length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('apps')\">\n                  <i class=\"fa-solid fa-grid-2\"></i> Applications\n                  <span class=\"panel-count\">{{ FilterApps().length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['apps']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['apps']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['apps']) {\n                  @for (app of FilterApps(); track app.appId) {\n                    <div class=\"panel-app-header\" [style.--panel-app-color]=\"app.color\">\n                      <div class=\"panel-app-icon\">\n                        <i [class]=\"app.icon\"></i>\n                      </div>\n                      <span class=\"panel-app-name\">{{ app.appName }}</span>\n                    </div>\n                    @for (ni of app.navItems; track ni.label) {\n                      <div class=\"panel-item panel-nav-item\">\n                        <div class=\"panel-item-icon\" [style.background]=\"'color-mix(in srgb, ' + app.color + ' 10%, var(--mj-bg-surface-card))'\">\n                          <i [class]=\"ni.icon\" [style.color]=\"app.color\"></i>\n                        </div>\n                        <div class=\"panel-item-info\">\n                          <div class=\"panel-item-name\">{{ ni.label }}</div>\n                        </div>\n                        <div class=\"panel-item-action\">\n                          @if (ni.pinned) {\n                            <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                          } @else {\n                            <button class=\"pin-btn\" (click)=\"PinAppNavItem(app.appName, app.icon, app.color, ni.label, ni.icon)\">\n                              <i class=\"fa-solid fa-plus\"></i> Pin\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                }\n              </div>\n            }\n\n            <!-- Dashboards (metadata-driven Config type only) -->\n            @if (FilterPanelItems(AvailableDashboards).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('dashboards')\">\n                  <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['dashboards']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['dashboards']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['dashboards']) {\n                  @for (item of FilterPanelItems(AvailableDashboards); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-gauge-high\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('Dashboards', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Views -->\n            @if (FilterPanelItems(AvailableViews).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('views')\">\n                  <i class=\"fa-solid fa-table-list\"></i> Views\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableViews).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['views']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['views']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['views']) {\n                  @for (item of FilterPanelItems(AvailableViews); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                        <div class=\"panel-item-sub\">{{ item.entityName }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('User Views', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Queries -->\n            @if (FilterPanelItems(AvailableQueries).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('queries')\">\n                  <i class=\"fa-solid fa-database\"></i> Queries\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['queries']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['queries']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['queries']) {\n                  @for (item of FilterPanelItems(AvailableQueries); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-database\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('Queries', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Quick Actions -->\n            @if (FilterPanelItems(AvailableActions).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('actions')\">\n                  <i class=\"fa-solid fa-bolt\"></i> Quick Actions\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableActions).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['actions']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['actions']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['actions']) {\n                  @for (item of FilterPanelItems(AvailableActions); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-bolt\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                        @if (item.description) {\n                          <div class=\"panel-item-sub\">{{ item.description }}</div>\n                        }\n                      </div>\n                      <div class=\"panel-item-action\">\n                        <button class=\"pin-btn\" (click)=\"OpenActionPinConfig(item.id, item.name, item.description)\">\n                          <i class=\"fa-solid fa-sliders\"></i> Configure\n                        </button>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Action Pin Dialogs -->\n    <mj-action-pin-config-dialog\n      [Visible]=\"ActionConfigDialogVisible\"\n      [ActionID]=\"ActionConfigActionId\"\n      [ActionName]=\"ActionConfigActionName\"\n      [ActionDescription]=\"ActionConfigActionDescription\"\n      (Result)=\"OnActionConfigResult($event)\">\n    </mj-action-pin-config-dialog>\n\n    <mj-action-pin-runner-dialog\n      [Visible]=\"ActionRunnerDialogVisible\"\n      [Pin]=\"ActionRunnerPin\"\n      (Result)=\"OnActionRunnerResult($event)\">\n    </mj-action-pin-runner-dialog>\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          My 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 mjButton\n              variant=\"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-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]=\"getEntityIconByName(favorite.Entity)\"></i>\n                    </div>\n                    <div class=\"sidebar-item-info\">\n                      <span class=\"sidebar-item-title\">{{ getFavoriteDisplayName(favorite) }}</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]=\"getEntityIconByName(item.entityName)\"></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: var(--mj-bg-page);\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 var(--mj-transition-slow);\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: var(--mj-text-4xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section .date {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-muted);\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-brand-md);\n  transition: all var(--mj-transition-base);\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\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: var(--mj-text-muted);\n}\n\n.loading-spinner {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-brand-primary);\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: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.section-title i {\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-shadow-lg);\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: var(--mj-radius-lg);\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: var(--mj-text-xl);\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: var(--mj-text-inverse);\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: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description {\n  margin: 0 0 10px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.nav-item-chip i {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n}\n\n.more-items {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-base);\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: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-text-disabled);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\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: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform var(--mj-transition-slow);\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header h3 i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n  font-size: var(--mj-text-xs);\n}\n\n.notifications-section .sidebar-section-title i {\n  color: var(--mj-color-warning-600);\n}\n\n.favorites-section .sidebar-section-title i {\n  color: var(--mj-status-warning);\n}\n\n.recents-section .sidebar-section-title i {\n  color: var(--mj-brand-primary);\n}\n\n.section-badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-item:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\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: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.notification-item .sidebar-item-icon {\n  background: var(--mj-color-warning-50);\n}\n\n.notification-item .sidebar-item-icon i {\n  color: var(--mj-color-warning-600);\n}\n\n.favorite-item .sidebar-item-icon {\n  background: var(--mj-color-warning-50);\n}\n\n.favorite-item .sidebar-item-icon i {\n  color: var(--mj-color-warning-500);\n}\n\n.recent-item .sidebar-item-icon {\n  background: var(--mj-color-info-50);\n}\n\n.recent-item .sidebar-item-icon i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  padding: 8px 0;\n}\n\n.sidebar-loading i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.sidebar-empty i {\n  font-size: var(--mj-text-4xl);\n  margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n\n\n/* ========================================\n   PINNED SECTION\n   ======================================== */\n.pinned-section {\n  margin-bottom: 32px;\n}\n\n.pinned-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n.pinned-header .section-title {\n  margin: 0;\n}\n\n.pinned-actions {\n  margin-left: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.pin-action-btn {\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-success);\n}\n\n/* Edit Mode Banner */\n.edit-mode-banner {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n  border-radius: var(--mj-radius-lg);\n  padding: 12px 20px;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner strong {\n  color: var(--mj-brand-primary);\n}\n\n/* Pin Empty State */\n.pin-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px 20px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.pin-empty-state > i {\n  font-size: 40px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.pin-empty-state h3 {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  margin: 0 0 6px 0;\n}\n\n.pin-empty-state p {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  max-width: 360px;\n  margin: 0 0 16px 0;\n}\n\n/* Pin Grid */\n.pin-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 12px;\n}\n\n/* Group Header */\n.group-header {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0 4px 0;\n  margin-top: 8px;\n}\n\n.group-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.group-line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n.group-count {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.group-name-input {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  width: 160px;\n}\n\n.group-edit-controls {\n  display: flex;\n  gap: 6px;\n}\n\n.group-edit-btn {\n  background: none;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n/* Pin Card */\n.pin-card {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n}\n\n.pin-card:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.pin-card.edit-mode {\n  cursor: grab;\n}\n\n.pin-card.edit-mode:active {\n  cursor: grabbing;\n}\n\n.pin-card.dragging {\n  opacity: 0.5;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-lg);\n  transform: rotate(2deg);\n}\n\n.pin-card.drag-over {\n  border-color: var(--mj-brand-primary);\n  border-style: dashed;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Edit controls overlay */\n.edit-controls {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  right: 8px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.edit-controls > * {\n  pointer-events: auto;\n}\n\n.drag-handle {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: grab;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.drag-handle:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.edit-card-btn {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n/* Pin Thumbnail */\n.pin-thumbnail {\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  position: relative;\n}\n\n.pin-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode > i {\n  font-size: 36px;\n  color: var(--pin-icon-color, var(--mj-text-muted));\n  opacity: 0.7;\n}\n\n/* Action-pin card: colored gradient background with white icon/SVG */\n.pin-thumbnail.action-mode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse, white);\n  background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode > i {\n  font-size: 36px;\n  color: var(--mj-text-inverse, white);\n}\n\n/* Hover overlay */\n.pin-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  background: rgba(0,0,0,0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.pin-card:hover .pin-overlay {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.open-btn {\n  padding: 8px 20px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: none;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* Pin Info */\n.pin-info {\n  padding: 10px 12px;\n}\n\n.pin-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-name .more-btn {\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.pin-card:hover .pin-name .more-btn {\n  opacity: 1;\n}\n\n.pin-name .more-btn:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 6px;\n  width: 100%;\n  outline: none;\n  background: var(--mj-bg-surface);\n}\n\n.pin-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pin-meta > i {\n  font-size: 10px;\n}\n\n.pin-app-badge {\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n/* Add Pin Card */\n.add-pin-card {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 2px dashed var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 180px;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  gap: 8px;\n  color: var(--mj-text-muted);\n}\n\n.add-pin-card:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card i {\n  font-size: 28px;\n}\n\n.add-pin-card span {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n}\n\n/* ========================================\n   PIN CONTEXT MENU (ELLIPSIS)\n   ======================================== */\n.pin-context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10001;\n  overflow: hidden;\n  animation: pinMenuIn 0.15s ease;\n}\n\n@keyframes pinMenuIn {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 14px;\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.pin-context-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header {\n  font-weight: var(--mj-font-medium);\n  cursor: default;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header:hover {\n  background: transparent;\n}\n\n.pin-context-item.submenu-item {\n  padding-left: 30px;\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* ========================================\n   SLIDE-IN PANEL (Add Pin)\n   ======================================== */\n.slide-panel-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000;\n}\n\n.slide-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 400px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 2001;\n  display: flex;\n  flex-direction: column;\n  animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.slide-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header h3 {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n}\n\n.slide-panel-header h3 i {\n  color: var(--mj-brand-primary);\n}\n\n.slide-panel-close {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* Search box */\n.search-box {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper i {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.search-input-wrapper input {\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.search-input-wrapper input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n/* Group selector */\n.group-selector {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.group-selector label {\n  font-weight: var(--mj-font-medium);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.group-selector select {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.new-group-input {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n/* Panel results */\n.panel-results {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.panel-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.panel-section {\n  margin-bottom: 20px;\n}\n\n.panel-section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title i:first-child {\n  font-size: 12px;\n}\n\n.panel-section-title.collapsible {\n  cursor: pointer;\n  user-select: none;\n  transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible:hover {\n  color: var(--mj-text-secondary);\n}\n\n.section-chevron {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.panel-count {\n  margin-left: auto;\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n/* App hierarchy in panel */\n.panel-app-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 6px 12px;\n  margin-top: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header:first-child {\n  margin-top: 0;\n}\n\n.panel-app-icon {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-app-icon i {\n  font-size: 14px;\n  color: var(--panel-app-color);\n}\n\n.panel-app-name {\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Nav items under app \u2014 indented with left border accent */\n.panel-item.panel-nav-item {\n  padding: 10px 12px 10px 32px;\n  margin-left: 12px;\n  border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item:last-of-type {\n  border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item:hover {\n  border-left-color: var(--mj-brand-primary);\n}\n\n/* New group row */\n.new-group-row {\n  padding: 0 20px 12px 20px;\n}\n\n.new-group-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n.panel-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  cursor: pointer;\n}\n\n.panel-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-item-icon i {\n  font-size: 14px;\n}\n\n.panel-item-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-item-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-item-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.panel-item-action {\n  flex-shrink: 0;\n}\n\n.panel-item-action button {\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-sm);\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge {\n  background: transparent;\n  color: var(--mj-status-success);\n  border: 1px solid var(--mj-status-success);\n  cursor: default !important;\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: var(--mj-text-3xl);\n  }\n\n  /* Make sidebar an overlay on tablet */\n  .quick-access-sidebar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\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: absolute;\n    top: 0;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\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: var(--mj-text-2xl);\n  }\n\n  /* Full-width sidebar on mobile \u2014 fixed overlay covering full viewport */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 10000;\n    border-left: none;\n    border-top: none;\n  }\n\n  /* No separate backdrop needed on mobile \u2014 sidebar covers full screen */\n  .home-dashboard.sidebar-open::before {\n    display: none;\n  }\n\n  /* No ::after backdrop needed on mobile */\n  .home-dashboard.sidebar-open::after {\n    display: none;\n  }\n\n  .pin-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 12px;\n  }\n\n  .slide-panel {\n    width: 100%;\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: var(--mj-text-lg);\n  }\n\n  .app-name {\n    font-size: var(--mj-text-sm);\n  }\n\n  .nav-preview {\n    display: none;\n  }\n\n  /* Move FAB to bottom-right on mobile \u2014 fixed so it stays visible while scrolling */\n  .sidebar-fab-toggle {\n    position: fixed;\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: var(--mj-text-lg);\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: var(--mj-text-xl);\n  }\n\n  .greeting-section .date {\n    font-size: var(--mj-text-sm);\n  }\n\n  .section-title {\n    font-size: var(--mj-text-base);\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: var(--mj-text-base);\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    <!-- Pinned Section -->\n    @if (!isLoading) {\n      <div class=\"pinned-section\">\n        <div class=\"pinned-header\">\n          <h2 class=\"section-title\">\n            <i class=\"fa-solid fa-thumbtack\"></i>\n            Pinned\n          </h2>\n          <div class=\"pinned-actions\">\n            @if (EditMode) {\n              <button class=\"pin-action-btn done\" (click)=\"ToggleEditMode()\">\n                <i class=\"fa-solid fa-check\"></i> Done\n              </button>\n            } @else {\n              <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Pin\n              </button>\n              @if (PinnedItems.length > 0) {\n                <button class=\"pin-action-btn\" (click)=\"ToggleEditMode()\">\n                  <i class=\"fa-solid fa-pen\"></i> Edit\n                </button>\n              }\n            }\n          </div>\n        </div>\n\n        @if (EditMode) {\n          <div class=\"edit-mode-banner\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            <span><strong>Edit mode</strong> \u2014 Drag cards to reorder. Click names to rename.</span>\n          </div>\n        }\n\n        <!-- Empty State -->\n        @if (PinnedItems.length === 0 && (EditMode || !HidePinEmptyState)) {\n          <div class=\"pin-empty-state\">\n            @if (!EditMode) {\n              <button type=\"button\" class=\"pin-empty-close\" (click)=\"DismissPinEmptyState()\" title=\"Hide this\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            }\n            <i class=\"fa-solid fa-thumbtack\"></i>\n            <h3>No pinned items yet</h3>\n            <p>Pin your favorite dashboards, views, queries, and reports for quick access.</p>\n            <button class=\"pin-action-btn primary\" (click)=\"OpenAddPinPanel()\">\n              <i class=\"fa-solid fa-plus\"></i> Add your first pin\n            </button>\n            @if (!EditMode && !HidePinEmptyState) {\n              <button type=\"button\" class=\"pin-empty-dismiss\" (click)=\"DismissPinEmptyState()\">\n                Don't show this again\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Pin Grid -->\n        @if (PinnedItems.length > 0) {\n          <div class=\"pin-grid\">\n            <!-- Ungrouped Pins -->\n            @for (pin of UngroupedPins; track trackByPin($index, pin)) {\n              <div class=\"pin-card\"\n                [class.edit-mode]=\"EditMode\"\n                [class.dragging]=\"DraggingPinId === pin.Id\"\n                [class.drag-over]=\"DragOverPinId === pin.Id\"\n                [draggable]=\"EditMode\"\n                (dragstart)=\"OnDragStart($event, pin)\"\n                (dragover)=\"OnDragOver($event, pin)\"\n                (dragleave)=\"OnDragLeave()\"\n                (drop)=\"OnDrop($event, pin)\"\n                (dragend)=\"OnDragEnd()\"\n                (click)=\"OnPinClick(pin)\">\n\n                <!-- Edit mode controls -->\n                @if (EditMode) {\n                  <div class=\"edit-controls\">\n                    <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n                    <div class=\"edit-card-actions\">\n                      <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n                        <i class=\"fa-solid fa-xmark\"></i>\n                      </button>\n                    </div>\n                  </div>\n                }\n\n                <!-- Thumbnail / Icon -->\n                @if (pin.Thumbnail) {\n                  <div class=\"pin-thumbnail\">\n                    <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                      </div>\n                    }\n                  </div>\n                } @else if (pin.ResourceType === 'Actions') {\n                  <div class=\"pin-thumbnail action-mode\"\n                       [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    @if (!EditMode) {\n                      <div class=\"pin-overlay\">\n                        <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- Pin Info -->\n                <div class=\"pin-info\">\n                  @if (EditMode && EditingPinId === pin.Id) {\n                    <input class=\"pin-name-input\"\n                      [value]=\"pin.DisplayName\"\n                      (blur)=\"SavePinName(pin.Id, GetInputValue($event))\"\n                      (keydown.enter)=\"SavePinName(pin.Id, GetInputValue($event))\"\n                      (click)=\"$event.stopPropagation()\" />\n                  } @else {\n                    <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n                      {{ pin.DisplayName }}\n                      @if (!EditMode) {\n                        <button class=\"more-btn\" (click)=\"ShowPinMenu($event, pin)\">\n                          <i class=\"fa-solid fa-ellipsis\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                  <div class=\"pin-meta\">\n                    <i [class]=\"GetPinIcon(pin)\"></i>\n                    {{ GetResourceTypeLabel(pin) }}\n                    @if (pin.ApplicationName && pin.ResourceType !== 'Custom') {\n                      <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Grouped Pins -->\n            @for (group of PinGroups; track trackByGroup($index, group)) {\n              <!-- Group Header -->\n              <div class=\"group-header\">\n                @if (EditMode && EditingGroupName === group) {\n                  <input class=\"group-name-input\"\n                    [value]=\"group\"\n                    (blur)=\"SaveGroupName(group, GetInputValue($event))\"\n                    (keydown.enter)=\"SaveGroupName(group, GetInputValue($event))\" />\n                } @else {\n                  <span class=\"group-name\" (click)=\"EditMode ? StartEditingGroup(group) : null\">{{ group }}</span>\n                }\n                <div class=\"group-line\"></div>\n                <span class=\"group-count\">{{ GetPinsInGroup(group).length }} pins</span>\n                @if (EditMode) {\n                  <div class=\"group-edit-controls\">\n                    <button class=\"group-edit-btn danger\" (click)=\"RemoveGroup(group)\">\n                      <i class=\"fa-solid fa-folder-minus\"></i> Remove Group\n                    </button>\n                  </div>\n                }\n              </div>\n\n              <!-- Pins in Group -->\n              @for (pin of GetPinsInGroup(group); track trackByPin($index, pin)) {\n                <div class=\"pin-card\"\n                  [class.edit-mode]=\"EditMode\"\n                  [class.dragging]=\"DraggingPinId === pin.Id\"\n                  [class.drag-over]=\"DragOverPinId === pin.Id\"\n                  [draggable]=\"EditMode\"\n                  (dragstart)=\"OnDragStart($event, pin)\"\n                  (dragover)=\"OnDragOver($event, pin)\"\n                  (dragleave)=\"OnDragLeave()\"\n                  (drop)=\"OnDrop($event, pin)\"\n                  (dragend)=\"OnDragEnd()\"\n                  (click)=\"OnPinClick(pin)\">\n\n                  @if (EditMode) {\n                    <div class=\"edit-controls\">\n                      <div class=\"drag-handle\"><i class=\"fa-solid fa-grip-vertical\"></i></div>\n                      <div class=\"edit-card-actions\">\n                        <button class=\"edit-card-btn delete\" (click)=\"RemovePin(pin.Id); $event.stopPropagation()\">\n                          <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  }\n\n                  @if (pin.Thumbnail) {\n                    <div class=\"pin-thumbnail\">\n                      <img [src]=\"pin.Thumbnail\" [alt]=\"pin.DisplayName\" />\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                        </div>\n                      }\n                    </div>\n                  } @else if (pin.ResourceType === 'Actions') {\n                    <div class=\"pin-thumbnail action-mode\"\n                         [style.background]=\"'linear-gradient(135deg, ' + GetPinAccentColor(pin) + ' 0%, ' + GetPinAccentColor(pin) + 'cc 100%)'\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"pin-thumbnail icon-mode\" [style.--pin-icon-color]=\"pin.Color || 'var(--mj-text-muted)'\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      @if (!EditMode) {\n                        <div class=\"pin-overlay\">\n                          <button class=\"open-btn\" (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <div class=\"pin-info\">\n                    @if (EditMode && EditingPinId === pin.Id) {\n                      <input class=\"pin-name-input\"\n                        [value]=\"pin.DisplayName\"\n                        (blur)=\"SavePinName(pin.Id, $event.target.value)\"\n                        (keydown.enter)=\"SavePinName(pin.Id, $event.target.value)\"\n                        (click)=\"$event.stopPropagation()\" />\n                    } @else {\n                      <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n                        {{ pin.DisplayName }}\n                        @if (!EditMode) {\n                          <button class=\"more-btn\" (click)=\"$event.stopPropagation()\">\n                            <i class=\"fa-solid fa-ellipsis\"></i>\n                          </button>\n                        }\n                      </div>\n                    }\n                    <div class=\"pin-meta\">\n                      <i [class]=\"GetPinIcon(pin)\"></i>\n                      {{ GetResourceTypeLabel(pin) }}\n                      @if (pin.ApplicationName) {\n                        <span class=\"pin-app-badge\">{{ pin.ApplicationName }}</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            }\n\n            <!-- Add Pin card (edit mode) -->\n            @if (EditMode) {\n              <div class=\"add-pin-card\" (click)=\"OpenAddPinPanel()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                <span>Add Pin</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Pin Context Menu (ellipsis) -->\n    @if (PinMenuVisible && PinMenuPin) {\n      <div class=\"pin-context-menu\"\n        [style.left.px]=\"PinMenuX\"\n        [style.top.px]=\"PinMenuY\">\n        <div class=\"pin-context-item\" (click)=\"OnPinMenuEdit()\">\n          <i class=\"fa-solid fa-pen\"></i>\n          <span>Edit</span>\n        </div>\n        <div class=\"pin-context-divider\"></div>\n        <div class=\"pin-context-submenu\">\n          <div class=\"pin-context-item submenu-header\">\n            <i class=\"fa-solid fa-folder\"></i>\n            <span>Move to Group</span>\n          </div>\n          @if (PinMenuPin.Group) {\n            <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(undefined)\">\n              <span>(No group)</span>\n            </div>\n          }\n          @for (group of PinGroups; track group) {\n            @if (group !== PinMenuPin.Group) {\n              <div class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(group)\">\n                <span>{{ group }}</span>\n              </div>\n            }\n          }\n        </div>\n        <div class=\"pin-context-divider\"></div>\n        <div class=\"pin-context-item danger\" (click)=\"OnPinMenuUnpin()\">\n          <i class=\"fa-solid fa-thumbtack-slash\"></i>\n          <span>Unpin</span>\n        </div>\n      </div>\n    }\n\n    <!-- Add Pin Slide-In Panel -->\n    @if (AddPanelOpen) {\n      <div class=\"slide-panel-backdrop\" (click)=\"CloseAddPinPanel()\"></div>\n      <div class=\"slide-panel\">\n        <div class=\"slide-panel-header\">\n          <h3><i class=\"fa-solid fa-thumbtack\"></i> Add Pin</h3>\n          <button class=\"slide-panel-close\" (click)=\"CloseAddPinPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <div class=\"search-box\">\n          <div class=\"search-input-wrapper\">\n            <i class=\"fa-solid fa-magnifying-glass\"></i>\n            <input type=\"text\"\n              placeholder=\"Search apps, dashboards, views, queries...\"\n              [(ngModel)]=\"AddPanelSearchQuery\" />\n          </div>\n        </div>\n\n        <div class=\"group-selector\">\n          <label><i class=\"fa-solid fa-folder\"></i> Add to group:</label>\n          <select [(ngModel)]=\"AddPanelSelectedGroup\">\n            <option value=\"\">(No group)</option>\n            @for (group of PinGroups; track group) {\n              <option [value]=\"group\">{{ group }}</option>\n            }\n            <option value=\"__new__\">+ New group...</option>\n          </select>\n        </div>\n        @if (AddPanelSelectedGroup === '__new__') {\n          <div class=\"new-group-row\">\n            <input class=\"new-group-input\"\n              type=\"text\"\n              placeholder=\"Enter new group name...\"\n              [(ngModel)]=\"AddPanelNewGroupName\" />\n          </div>\n        }\n\n        <div class=\"panel-results\">\n          @if (AddPanelLoading) {\n            <div class=\"panel-loading\">\n              <mj-loading text=\"Loading resources...\" size=\"small\"></mj-loading>\n            </div>\n          } @else {\n            <!-- Apps with Nav Items -->\n            @if (FilterApps().length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('apps')\">\n                  <i class=\"fa-solid fa-grid-2\"></i> Applications\n                  <span class=\"panel-count\">{{ FilterApps().length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['apps']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['apps']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['apps']) {\n                  @for (app of FilterApps(); track app.appId) {\n                    <div class=\"panel-app-header\" [style.--panel-app-color]=\"app.color\">\n                      <div class=\"panel-app-icon\">\n                        <i [class]=\"app.icon\"></i>\n                      </div>\n                      <span class=\"panel-app-name\">{{ app.appName }}</span>\n                    </div>\n                    @for (ni of app.navItems; track ni.label) {\n                      <div class=\"panel-item panel-nav-item\">\n                        <div class=\"panel-item-icon\" [style.background]=\"'color-mix(in srgb, ' + app.color + ' 10%, var(--mj-bg-surface-card))'\">\n                          <i [class]=\"ni.icon\" [style.color]=\"app.color\"></i>\n                        </div>\n                        <div class=\"panel-item-info\">\n                          <div class=\"panel-item-name\">{{ ni.label }}</div>\n                        </div>\n                        <div class=\"panel-item-action\">\n                          @if (ni.pinned) {\n                            <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                          } @else {\n                            <button class=\"pin-btn\" (click)=\"PinAppNavItem(app.appName, app.icon, app.color, ni.label, ni.icon)\">\n                              <i class=\"fa-solid fa-plus\"></i> Pin\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                }\n              </div>\n            }\n\n            <!-- Dashboards (metadata-driven Config type only) -->\n            @if (FilterPanelItems(AvailableDashboards).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('dashboards')\">\n                  <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['dashboards']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['dashboards']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['dashboards']) {\n                  @for (item of FilterPanelItems(AvailableDashboards); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-gauge-high\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('Dashboards', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Views -->\n            @if (FilterPanelItems(AvailableViews).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('views')\">\n                  <i class=\"fa-solid fa-table-list\"></i> Views\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableViews).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['views']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['views']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['views']) {\n                  @for (item of FilterPanelItems(AvailableViews); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                        <div class=\"panel-item-sub\">{{ item.entityName }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('User Views', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Queries -->\n            @if (FilterPanelItems(AvailableQueries).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('queries')\">\n                  <i class=\"fa-solid fa-database\"></i> Queries\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['queries']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['queries']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['queries']) {\n                  @for (item of FilterPanelItems(AvailableQueries); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-database\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                      </div>\n                      <div class=\"panel-item-action\">\n                        @if (item.pinned) {\n                          <button class=\"pinned-badge\"><i class=\"fa-solid fa-check\"></i> Pinned</button>\n                        } @else {\n                          <button class=\"pin-btn\" (click)=\"PinFromPanel('Queries', item.id, item.name)\">\n                            <i class=\"fa-solid fa-plus\"></i> Pin\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n\n            <!-- Quick Actions -->\n            @if (FilterPanelItems(AvailableActions).length > 0) {\n              <div class=\"panel-section\">\n                <div class=\"panel-section-title collapsible\" (click)=\"TogglePanelSection('actions')\">\n                  <i class=\"fa-solid fa-bolt\"></i> Quick Actions\n                  <span class=\"panel-count\">{{ FilterPanelItems(AvailableActions).length }}</span>\n                  <i class=\"section-chevron fa-solid\" [class.fa-chevron-down]=\"!PanelSectionCollapsed['actions']\" [class.fa-chevron-right]=\"PanelSectionCollapsed['actions']\"></i>\n                </div>\n                @if (!PanelSectionCollapsed['actions']) {\n                  @for (item of FilterPanelItems(AvailableActions); track item.id) {\n                    <div class=\"panel-item\">\n                      <div class=\"panel-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface-card))\">\n                        <i class=\"fa-solid fa-bolt\" style=\"color: var(--mj-brand-primary)\"></i>\n                      </div>\n                      <div class=\"panel-item-info\">\n                        <div class=\"panel-item-name\">{{ item.name }}</div>\n                        @if (item.description) {\n                          <div class=\"panel-item-sub\">{{ item.description }}</div>\n                        }\n                      </div>\n                      <div class=\"panel-item-action\">\n                        <button class=\"pin-btn\" (click)=\"OpenActionPinConfig(item.id, item.name, item.description)\">\n                          <i class=\"fa-solid fa-sliders\"></i> Configure\n                        </button>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Action Pin Dialogs -->\n    <mj-action-pin-config-dialog\n      [Visible]=\"ActionConfigDialogVisible\"\n      [ActionID]=\"ActionConfigActionId\"\n      [ActionName]=\"ActionConfigActionName\"\n      [ActionDescription]=\"ActionConfigActionDescription\"\n      (Result)=\"OnActionConfigResult($event)\">\n    </mj-action-pin-config-dialog>\n\n    <mj-action-pin-runner-dialog\n      [Visible]=\"ActionRunnerDialogVisible\"\n      [Pin]=\"ActionRunnerPin\"\n      (Result)=\"OnActionRunnerResult($event)\">\n    </mj-action-pin-runner-dialog>\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          My 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 mjButton\n              variant=\"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-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]=\"getEntityIconByName(favorite.Entity)\"></i>\n                    </div>\n                    <div class=\"sidebar-item-info\">\n                      <span class=\"sidebar-item-title\">{{ getFavoriteDisplayName(favorite) }}</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]=\"getEntityIconByName(item.entityName)\"></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: var(--mj-bg-page);\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 var(--mj-transition-slow);\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: var(--mj-text-4xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section .date {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  color: var(--mj-text-muted);\n}\n\n/* FAB Toggle Button for Quick Access - top-right on desktop */\n.sidebar-fab-toggle {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  width: 56px;\n  height: 56px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-brand-md);\n  transition: all var(--mj-transition-base);\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sidebar-fab-toggle:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: scale(1.05);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\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: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\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: var(--mj-text-muted);\n}\n\n.loading-spinner {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-brand-primary);\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: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.section-title i {\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-shadow-lg);\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: var(--mj-radius-lg);\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: var(--mj-text-xl);\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: var(--mj-text-inverse);\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: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description {\n  margin: 0 0 10px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.nav-item-chip i {\n  font-size: 9px;\n  color: var(--mj-text-muted);\n}\n\n.more-items {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-base);\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: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.empty-icon i {\n  font-size: var(--mj-text-4xl);\n  color: var(--mj-text-disabled);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\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: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 320px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform var(--mj-transition-slow);\n  overflow: hidden;\n  z-index: 100;\n  box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.sidebar-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sidebar-header h3 i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.sidebar-close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-close-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.sidebar-section-title i {\n  font-size: var(--mj-text-xs);\n}\n\n.notifications-section .sidebar-section-title i {\n  color: var(--mj-color-warning-600);\n}\n\n.favorites-section .sidebar-section-title i {\n  color: var(--mj-status-warning);\n}\n\n.recents-section .sidebar-section-title i {\n  color: var(--mj-brand-primary);\n}\n\n.section-badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.sidebar-item:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateX(4px);\n}\n\n.sidebar-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\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: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.notification-item .sidebar-item-icon {\n  background: var(--mj-color-warning-50);\n}\n\n.notification-item .sidebar-item-icon i {\n  color: var(--mj-color-warning-600);\n}\n\n.favorite-item .sidebar-item-icon {\n  background: var(--mj-color-warning-50);\n}\n\n.favorite-item .sidebar-item-icon i {\n  color: var(--mj-color-warning-500);\n}\n\n.recent-item .sidebar-item-icon {\n  background: var(--mj-color-info-50);\n}\n\n.recent-item .sidebar-item-icon i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-item-subtitle {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\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: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  padding: 8px 0;\n}\n\n.sidebar-loading i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.sidebar-empty i {\n  font-size: var(--mj-text-4xl);\n  margin-bottom: 12px;\n}\n\n.sidebar-empty p {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n\n\n/* ========================================\n   PINNED SECTION\n   ======================================== */\n.pinned-section {\n  margin-bottom: 32px;\n}\n\n.pinned-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n.pinned-header .section-title {\n  margin: 0;\n}\n\n.pinned-actions {\n  margin-left: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.pin-action-btn {\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pin-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pin-action-btn.done {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-success);\n}\n\n/* Edit Mode Banner */\n.edit-mode-banner {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n  border-radius: var(--mj-radius-lg);\n  padding: 12px 20px;\n  margin-bottom: 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.edit-mode-banner i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n\n.edit-mode-banner strong {\n  color: var(--mj-brand-primary);\n}\n\n/* Pin Empty State */\n.pin-empty-state {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px 20px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n.pin-empty-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pin-empty-close:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-empty-state > i {\n  font-size: 40px;\n  color: var(--mj-text-disabled);\n  margin-bottom: 16px;\n}\n\n.pin-empty-state h3 {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  margin: 0 0 6px 0;\n}\n\n.pin-empty-state p {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  max-width: 360px;\n  margin: 0 0 16px 0;\n}\n\n.pin-empty-dismiss {\n  margin-top: 12px;\n  background: transparent;\n  border: none;\n  padding: 4px 8px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.pin-empty-dismiss:hover {\n  color: var(--mj-text-secondary);\n}\n\n/* Pin Grid */\n.pin-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 12px;\n}\n\n/* Group Header */\n.group-header {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 0 4px 0;\n  margin-top: 8px;\n}\n\n.group-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.group-line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-default);\n}\n\n.group-count {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.group-name-input {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 8px;\n  background: var(--mj-bg-surface);\n  outline: none;\n  width: 160px;\n}\n\n.group-edit-controls {\n  display: flex;\n  gap: 6px;\n}\n\n.group-edit-btn {\n  background: none;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  transition: all var(--mj-transition-base);\n}\n\n.group-edit-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.group-edit-btn.danger:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n/* Pin Card */\n.pin-card {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.25s ease;\n  position: relative;\n}\n\n.pin-card:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.pin-card.edit-mode {\n  cursor: grab;\n}\n\n.pin-card.edit-mode:active {\n  cursor: grabbing;\n}\n\n.pin-card.dragging {\n  opacity: 0.5;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-lg);\n  transform: rotate(2deg);\n}\n\n.pin-card.drag-over {\n  border-color: var(--mj-brand-primary);\n  border-style: dashed;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Edit controls overlay */\n.edit-controls {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  right: 8px;\n  display: flex;\n  justify-content: space-between;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.edit-controls > * {\n  pointer-events: auto;\n}\n\n.drag-handle {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: grab;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.drag-handle:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.edit-card-btn {\n  width: 28px;\n  height: 28px;\n  background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-subtle);\n  transition: all var(--mj-transition-base);\n}\n\n.edit-card-btn:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.edit-card-btn.delete:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n\n/* Pin Thumbnail */\n.pin-thumbnail {\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  position: relative;\n}\n\n.pin-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.pin-thumbnail.icon-mode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pin-icon-color, var(--mj-text-muted)) 10%, var(--mj-bg-surface-card));\n}\n\n.pin-thumbnail.icon-mode > i {\n  font-size: 36px;\n  color: var(--pin-icon-color, var(--mj-text-muted));\n  opacity: 0.7;\n}\n\n/* Action-pin card: colored gradient background with white icon/SVG */\n.pin-thumbnail.action-mode {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse, white);\n  background: var(--mj-brand-primary);\n}\n\n.pin-thumbnail.action-mode > i {\n  font-size: 36px;\n  color: var(--mj-text-inverse, white);\n}\n\n/* Hover overlay */\n.pin-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  background: rgba(0,0,0,0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.pin-card:hover .pin-overlay {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.open-btn {\n  padding: 8px 20px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: none;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* Pin Info */\n.pin-info {\n  padding: 10px 12px;\n}\n\n.pin-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pin-name .more-btn {\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.pin-card:hover .pin-name .more-btn {\n  opacity: 1;\n}\n\n.pin-name .more-btn:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name-input {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  padding: 2px 6px;\n  width: 100%;\n  outline: none;\n  background: var(--mj-bg-surface);\n}\n\n.pin-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.pin-meta > i {\n  font-size: 10px;\n}\n\n.pin-app-badge {\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-secondary);\n}\n\n/* Add Pin Card */\n.add-pin-card {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  border: 2px dashed var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 180px;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  gap: 8px;\n  color: var(--mj-text-muted);\n}\n\n.add-pin-card:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-pin-card i {\n  font-size: 28px;\n}\n\n.add-pin-card span {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n}\n\n/* ========================================\n   PIN CONTEXT MENU (ELLIPSIS)\n   ======================================== */\n.pin-context-menu {\n  position: fixed;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10001;\n  overflow: hidden;\n  animation: pinMenuIn 0.15s ease;\n}\n\n@keyframes pinMenuIn {\n  from { opacity: 0; transform: scale(0.95); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.pin-context-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 14px;\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.pin-context-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-context-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-item.danger {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.pin-context-item.submenu-header {\n  font-weight: var(--mj-font-medium);\n  cursor: default;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  padding: 6px 14px;\n}\n\n.pin-context-item.submenu-header:hover {\n  background: transparent;\n}\n\n.pin-context-item.submenu-item {\n  padding-left: 30px;\n  font-size: var(--mj-text-sm);\n}\n\n.pin-context-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* ========================================\n   SLIDE-IN PANEL (Add Pin)\n   ======================================== */\n.slide-panel-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 2000;\n}\n\n.slide-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 400px;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 2001;\n  display: flex;\n  flex-direction: column;\n  animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.slide-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.slide-panel-header h3 {\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n}\n\n.slide-panel-header h3 i {\n  color: var(--mj-brand-primary);\n}\n\n.slide-panel-close {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--mj-transition-base);\n}\n\n.slide-panel-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n/* Search box */\n.search-box {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 8px 12px;\n  transition: all var(--mj-transition-base);\n}\n\n.search-input-wrapper:focus-within {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-input-wrapper i {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.search-input-wrapper input {\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.search-input-wrapper input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n/* Group selector */\n.group-selector {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n}\n\n.group-selector label {\n  font-weight: var(--mj-font-medium);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.group-selector select {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.new-group-input {\n  flex: 1;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n/* Panel results */\n.panel-results {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n\n.panel-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.panel-section {\n  margin-bottom: 20px;\n}\n\n.panel-section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-section-title i:first-child {\n  font-size: 12px;\n}\n\n.panel-section-title.collapsible {\n  cursor: pointer;\n  user-select: none;\n  transition: color var(--mj-transition-base);\n}\n\n.panel-section-title.collapsible:hover {\n  color: var(--mj-text-secondary);\n}\n\n.section-chevron {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.panel-count {\n  margin-left: auto;\n  background: var(--mj-bg-surface-card);\n  padding: 1px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n/* App hierarchy in panel */\n.panel-app-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 6px 12px;\n  margin-top: 8px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-app-header:first-child {\n  margin-top: 0;\n}\n\n.panel-app-icon {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-app-icon i {\n  font-size: 14px;\n  color: var(--panel-app-color);\n}\n\n.panel-app-name {\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Nav items under app \u2014 indented with left border accent */\n.panel-item.panel-nav-item {\n  padding: 10px 12px 10px 32px;\n  margin-left: 12px;\n  border-left: 2px solid var(--mj-border-subtle);\n}\n\n.panel-item.panel-nav-item:last-of-type {\n  border-left-color: transparent;\n}\n\n.panel-item.panel-nav-item:hover {\n  border-left-color: var(--mj-brand-primary);\n}\n\n/* New group row */\n.new-group-row {\n  padding: 0 20px 12px 20px;\n}\n\n.new-group-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  outline: none;\n}\n\n.panel-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  cursor: pointer;\n}\n\n.panel-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.panel-item-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.panel-item-icon i {\n  font-size: 14px;\n}\n\n.panel-item-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-item-name {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-item-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.panel-item-action {\n  flex-shrink: 0;\n}\n\n.panel-item-action button {\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-sm);\n  font-size: 12px;\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n\n.pin-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: 1px solid var(--mj-brand-primary);\n}\n\n.pin-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.pinned-badge {\n  background: transparent;\n  color: var(--mj-status-success);\n  border: 1px solid var(--mj-status-success);\n  cursor: default !important;\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: var(--mj-text-3xl);\n  }\n\n  /* Make sidebar an overlay on tablet */\n  .quick-access-sidebar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    z-index: 1000;\n    box-shadow: -4px 0 20px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\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: absolute;\n    top: 0;\n    left: 0;\n    right: 320px;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\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: var(--mj-text-2xl);\n  }\n\n  /* Full-width sidebar on mobile \u2014 fixed overlay covering full viewport */\n  .quick-access-sidebar {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-width: 100%;\n    z-index: 10000;\n    border-left: none;\n    border-top: none;\n  }\n\n  /* No separate backdrop needed on mobile \u2014 sidebar covers full screen */\n  .home-dashboard.sidebar-open::before {\n    display: none;\n  }\n\n  /* No ::after backdrop needed on mobile */\n  .home-dashboard.sidebar-open::after {\n    display: none;\n  }\n\n  .pin-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 12px;\n  }\n\n  .slide-panel {\n    width: 100%;\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: var(--mj-text-lg);\n  }\n\n  .app-name {\n    font-size: var(--mj-text-sm);\n  }\n\n  .nav-preview {\n    display: none;\n  }\n\n  /* Move FAB to bottom-right on mobile \u2014 fixed so it stays visible while scrolling */\n  .sidebar-fab-toggle {\n    position: fixed;\n    top: auto;\n    bottom: 20px;\n    right: 20px;\n    width: 48px;\n    height: 48px;\n    font-size: var(--mj-text-lg);\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: var(--mj-text-xl);\n  }\n\n  .greeting-section .date {\n    font-size: var(--mj-text-sm);\n  }\n\n  .section-title {\n    font-size: var(--mj-text-base);\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: var(--mj-text-base);\n  }\n}\n"] }]
     }], () => [{ type: i1.ApplicationManager }, { type: i2.RecentAccessService }, { type: i0.ChangeDetectorRef }], { appConfigDialog: [{
             type: ViewChild,
             args: ['appConfigDialog']