@memberjunction/ng-dashboards 6.2.0-edge.2 → 6.2.0-edge.4

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

@@ -4,17 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ViewChild, ChangeDetectionStrategy, inject } from '@angular/core';
+import { Component, ViewChild, ChangeDetectionStrategy, ElementRef, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { BaseResourceComponent, HomeAppPinService } from '@memberjunction/ng-shared';
-import { RegisterClass } from '@memberjunction/global';
-import { CompositeKey } from '@memberjunction/core';
+import { BaseResourceComponent, HomeAppPinService, IsDashboardEntity, SafeDetectChanges, BuildDashboardPinInput } from '@memberjunction/ng-shared';
+import { ResourceTypeForEntity } from '@memberjunction/ng-shared-generic';
+import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { CompositeKey, LogError } from '@memberjunction/core';
 import { UserInfoEngine, DashboardEngine, UserViewEngine, QueryEngine } from '@memberjunction/core-entities';
 import { ActionEngineBase } from '@memberjunction/actions-base';
+import { DASHBOARD_NAME_MAX_LENGTH } from '@memberjunction/ng-dashboard-viewer';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { MJConfirmService } from '@memberjunction/ng-ui-components';
 import { BuildHomeAgentContext, BuildHomeNotFoundError, ResolveNamedRecord } from './home-agent-context';
+import { MenuAnchorOf, NextMenuFocusIndex, PlaceMenu } from './home-menus';
+import { BuildPinDashboardNames, BuildPinnedDashboards, CanShowInHome, DashboardIdOfPin, FindDashboard, ResolvePinnedDashboardReference, ResolvePinResourceType, } from './home-pinned-dashboards';
 import { ValidateStringParam } from '../shared/agent-tool-validation';
+import { ObserveDashboardLibraryChanges } from '../shared/dashboard-library-changes';
+import { AutoInstallDashboardsApp, CreateBlankDashboard, DashboardNameMaxLength, EnsureDashboardsApp } from '../shared/dashboards-app.helpers';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@memberjunction/ng-shared";
@@ -22,477 +29,480 @@ import * as i3 from "@angular/forms";
 import * as i4 from "@memberjunction/ng-ui-components";
 import * as i5 from "@memberjunction/ng-shared-generic";
 import * as i6 from "@memberjunction/ng-explorer-settings";
-import * as i7 from "./action-pin-config-dialog.component";
-import * as i8 from "./action-pin-runner-dialog.component";
-import * as i9 from "@angular/common";
+import * as i7 from "@memberjunction/ng-dashboard-viewer";
+import * as i8 from "./home-dashboard-switcher.component";
+import * as i9 from "./action-pin-config-dialog.component";
+import * as i10 from "./action-pin-runner-dialog.component";
+import * as i11 from "../DashboardEditor/dashboard-editor.component";
+import * as i12 from "@angular/common";
 const _c0 = ["appConfigDialog"];
-const _forTrack0 = ($index, $item) => $item.appId;
-const _forTrack1 = ($index, $item) => $item.label;
-const _forTrack2 = ($index, $item) => $item.id;
-function HomeDashboardComponent_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
-    i0.ɵɵelement(1, "i", 24);
-    i0.ɵɵtext(2, " Done ");
+const _c1 = ["pinMenu"];
+const _c2 = ["dashboardEditor"];
+const _forTrack0 = ($index, $item) => $item.Key;
+const _forTrack1 = ($index, $item) => $item.Id;
+const _forTrack2 = ($index, $item) => $item.appId;
+const _forTrack3 = ($index, $item) => $item.label;
+const _forTrack4 = ($index, $item) => $item.id;
+function HomeDashboardComponent_Conditional_2_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 28);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "span", 34);
+    i0.ɵɵtext(3, "Done");
+    i0.ɵɵelementEnd()();
+} }
+function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(2, "span", 34);
+    i0.ɵɵtext(3, "Edit");
+    i0.ɵɵelementEnd()();
+} }
+function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleEditMode()); });
-    i0.ɵɵelement(1, "i", 29);
-    i0.ɵɵtext(2, " Edit ");
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(2, "span", 34);
+    i0.ɵɵtext(3, "Add Pin");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "mj-home-dashboard-switcher", 37);
+    i0.ɵɵlistener("Pick", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template_mj_home_dashboard_switcher_Pick_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnSwitcherPick($event)); })("New", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template_mj_home_dashboard_switcher_New_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenNewDashboardDialog()); })("ManagePins", function HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template_mj_home_dashboard_switcher_ManagePins_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ManagePins()); });
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Conditional_5_Template, 4, 0, "button", 38);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Dashboards", ctx_r2.PinnedDashboards)("CurrentId", null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 5 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
-    i0.ɵɵelement(1, "i", 26);
-    i0.ɵɵtext(2, " Add Pin ");
+function HomeDashboardComponent_Conditional_2_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_1_Template, 4, 0, "button", 31)(2, HomeDashboardComponent_Conditional_2_ng_template_9_Conditional_2_Template, 6, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_8_Conditional_7_Conditional_3_Template, 3, 0, "button", 27);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 1 : 2);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 30);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementStart(2, "span")(3, "strong");
     i0.ɵɵtext(4, "Edit mode");
     i0.ɵɵelementEnd();
     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", 35);
-    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", 36);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.DismissPinEmptyState()); });
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.DismissPinEmptyState()); });
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(4); 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.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_1_Template, 2, 0, "button", 31);
-    i0.ɵɵelementStart(2, "mj-empty-state", 32)(3, "button", 33);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
-    i0.ɵɵelement(4, "i", 26);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_1_Template, 2, 0, "button", 46);
+    i0.ɵɵelementStart(2, "mj-empty-state", 47)(3, "button", 48);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
+    i0.ɵɵelement(4, "i", 49);
     i0.ɵɵtext(5, " Add your first pin ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_9_Conditional_6_Template, 2, 0, "button", 34);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Conditional_6_Template, 2, 0, "button", 50);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 1 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(!ctx_r2.EditMode && !ctx_r2.HidePinEmptyState ? 6 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 50);
-    i0.ɵɵelement(2, "i", 51);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 62);
+    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_1_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r10); const section_r11 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SaveGroupName(section_r11.Group, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_1_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r10); const section_r11 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SaveGroupName(section_r11.Group, ctx_r2.GetInputValue($event))); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 52)(4, "button", 53);
-    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", 36);
-    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const section_r11 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", section_r11.Group);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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", 42);
-    i0.ɵɵelement(1, "img", 54);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Conditional_2_Template, 3, 0, "div", 55);
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r12); const section_r11 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingGroup(section_r11.Group) : null); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("src", pin_r10.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r10.DisplayName);
+    const section_r11 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
+    i0.ɵɵtextInterpolate(section_r11.Group);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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.ɵɵelementStart(0, "div", 61)(1, "button", 64);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const section_r11 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.RemoveGroup(section_r11.Group)); });
+    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵtext(3, " Remove Group ");
     i0.ɵɵelementEnd()();
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Conditional_2_Template, 3, 0, "div", 55);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_1_Template, 1, 1, "input", 57)(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_2_Template, 2, 1, "span", 58);
+    i0.ɵɵelement(3, "div", 59);
+    i0.ɵɵelementStart(4, "span", 60);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Conditional_6_Template, 4, 0, "div", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r10) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r10) + "cc 100%)");
+    const section_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
+    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName === section_r11.Group ? 1 : 2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", section_r11.Pins.length, " pins");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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()); });
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 77);
+    i0.ɵɵelement(2, "i", 78);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 79)(4, "button", 80);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_1_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r16); const pin_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.RemovePin(pin_r15.Id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(5, "i", 81);
+    i0.ɵɵelementEnd()()();
+} }
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83)(1, "button", 39);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_2_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r17); const pin_r15 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.OnPinClick(pin_r15); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(2, "Open");
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const pin_r15 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Open " + ctx_r2.PinName(pin_r15));
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Conditional_2_Template, 3, 0, "div", 55);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "img", 82);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_2_Conditional_2_Template, 3, 1, "div", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("--pin-icon-color", pin_r10.Color || "var(--mj-text-muted)");
+    const pin_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
+    i0.ɵɵproperty("src", pin_r15.Thumbnail, i0.ɵɵsanitizeUrl)("alt", ctx_r2.PinName(pin_r15));
     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 _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 59);
-    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) { return $event.stopPropagation(); });
-    i0.ɵɵelementEnd();
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83)(1, "button", 39);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_3_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r18); const pin_r15 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.OnPinClick(pin_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtext(2, "Run");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    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 _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 62);
-    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", 63);
-    i0.ɵɵelementEnd();
+    const pin_r15 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Run " + ctx_r2.PinName(pin_r15));
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 60);
-    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", 61);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_3_Conditional_2_Template, 3, 1, "div", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const pin_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r15) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r15) + "cc 100%)");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", pin_r10.DisplayName, " ");
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r15));
     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", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83)(1, "button", 39);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_4_Conditional_2_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r19); const pin_r15 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.OnPinClick(pin_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtext(2, "Open");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const pin_r10 = i0.ɵɵnextContext().$implicit;
+    const pin_r15 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pin_r10.ApplicationName);
+    i0.ɵɵattribute("aria-label", "Open " + ctx_r2.PinName(pin_r15));
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
-    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", 41);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_2_Template, 3, 3, "div", 42)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_3_Template, 3, 5, "div", 43)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_4_Template, 3, 5, "div", 44);
-    i0.ɵɵelementStart(5, "div", 45);
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_6_Template, 1, 1, "input", 46)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_7_Template, 3, 2, "div", 47);
-    i0.ɵɵelementStart(8, "div", 48);
-    i0.ɵɵelement(9, "i");
-    i0.ɵɵtext(10);
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_8_Conditional_10_For_2_Conditional_11_Template, 2, 1, "span", 49);
-    i0.ɵɵelementEnd()()();
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_4_Conditional_2_Template, 3, 1, "div", 83);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r10 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    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);
+    const pin_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
+    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r15));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r10.Thumbnail ? 2 : pin_r10.ResourceType === "Actions" ? 3 : 4);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r10.Id ? 6 : 7);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r10));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r10), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r10.ApplicationName && pin_r10.ResourceType !== "Custom" ? 11 : -1);
+    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 70);
-    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))); });
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 86);
+    i0.ɵɵlistener("blur", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_6_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r20); const pin_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.SavePinName(pin_r15.Id, ctx_r2.GetInputValue($event))); })("keydown.enter", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_6_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r20); const pin_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnPinNameEnter(pin_r15.Id, $event)); })("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_6_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r19 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", group_r19);
+    const pin_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("value", ctx_r2.PinName(pin_r15));
+    i0.ɵɵattribute("aria-label", "Name of " + ctx_r2.PinName(pin_r15));
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 71);
-    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);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 90);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Conditional_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const pin_r15 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.ShowPinMenu($event, pin_r15)); });
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r19 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(group_r19);
+    const pin_r15 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵattribute("aria-label", "Pin options for " + ctx_r2.PinName(pin_r15))("aria-expanded", (ctx_r2.PinMenuPin == null ? null : ctx_r2.PinMenuPin.Id) === pin_r15.Id);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69)(1, "button", 72);
-    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", 73);
-    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 _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 50);
-    i0.ɵɵelement(2, "i", 51);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const pin_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.EditMode ? ctx_r2.StartEditingPin(pin_r15.Id, $event) : null); });
+    i0.ɵɵelementStart(1, "span", 88);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 52)(4, "button", 53);
-    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", 36);
-    i0.ɵɵelementEnd()()();
-} }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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", 42);
-    i0.ɵɵelement(1, "img", 54);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Conditional_2_Template, 3, 0, "div", 55);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Conditional_3_Template, 2, 2, "button", 89);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("src", pin_r23.Thumbnail, i0.ɵɵsanitizeUrl)("alt", pin_r23.DisplayName);
+    const pin_r15 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.PinName(pin_r15));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
+    i0.ɵɵconditional(!ctx_r2.EditMode ? 3 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 75);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Conditional_2_Template, 3, 0, "div", 55);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("background", "linear-gradient(135deg, " + ctx_r2.GetPinAccentColor(pin_r23) + " 0%, " + ctx_r2.GetPinAccentColor(pin_r23) + "cc 100%)");
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵlistener("dragstart", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_dragstart_0_listener($event) { const pin_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnDragStart($event, pin_r15)); })("dragover", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_dragover_0_listener($event) { const pin_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnDragOver($event, pin_r15)); })("dragleave", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_dragleave_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnDragLeave()); })("drop", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_drop_0_listener($event) { const pin_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnDrop($event, pin_r15)); })("dragend", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template_div_click_0_listener() { const pin_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnPinClick(pin_r15)); });
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_1_Template, 6, 0, "div", 67);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_2_Template, 3, 3, "div", 68)(3, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_3_Template, 3, 5, "div", 69)(4, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_4_Template, 3, 3, "div", 70);
+    i0.ɵɵelementStart(5, "div", 71);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_6_Template, 1, 2, "input", 72)(7, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_7_Template, 4, 2, "div", 73);
+    i0.ɵɵelementStart(8, "div", 74);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Conditional_9_Template, 1, 0, "i", 75);
+    i0.ɵɵelementStart(10, "span", 76);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const pin_r15 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("edit-mode", ctx_r2.EditMode)("dragging", ctx_r2.DraggingPinId === pin_r15.Id)("drag-over", ctx_r2.DragOverPinId === pin_r15.Id)("menu-open", (ctx_r2.PinMenuPin == null ? null : ctx_r2.PinMenuPin.Id) === pin_r15.Id);
+    i0.ɵɵproperty("draggable", ctx_r2.EditMode);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
+    i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
     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 _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    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()();
+    i0.ɵɵconditional(pin_r15.Thumbnail ? 2 : pin_r15.ResourceType === "Actions" ? 3 : 4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r15.Id ? 6 : 7);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(pin_r15.ResourceType === "Dashboards" ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.GetResourceTypeLabel(pin_r15));
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Conditional_2_Template, 3, 0, "div", 55);
-    i0.ɵɵelementEnd();
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Conditional_0_Template, 7, 3, "div", 55);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_For_2_Template, 12, 14, "div", 56, _forTrack1);
 } if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("--pin-icon-color", pin_r23.Color || "var(--mj-text-muted)");
+    const section_r11 = ctx.$implicit;
+    i0.ɵɵconditional(section_r11.Group !== null ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
+    i0.ɵɵrepeater(section_r11.Pins);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 59);
-    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) { return $event.stopPropagation(); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", pin_r23.DisplayName);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OpenAddPinPanel()); });
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Add Pin");
+    i0.ɵɵelementEnd()();
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 62);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Conditional_2_Template_button_click_0_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelement(1, "i", 63);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_For_2_Template, 3, 1, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_Conditional_3_Template, 4, 0, "div", 54);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.PinSections);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 3 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 60);
-    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", 61);
+function HomeDashboardComponent_Conditional_2_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_1_Template, 6, 0, "div", 42);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_2_Template, 7, 2, "div", 43);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_2_ng_template_10_Conditional_3_Template, 4, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", pin_r23.DisplayName, " ");
+    i0.ɵɵconditional(ctx_r2.PinnedItems.length === 0 && (ctx_r2.EditMode || !ctx_r2.HidePinEmptyState) ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.EditMode ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.PinnedItems.length > 0 ? 3 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 49);
+function HomeDashboardComponent_Conditional_2_For_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 97);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pin_r23 = i0.ɵɵnextContext().$implicit;
+    const appData_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pin_r23.ApplicationName);
+    i0.ɵɵtextInterpolate(appData_r25.app.Description);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
-    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", 41);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_2_Template, 3, 3, "div", 42)(3, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_3_Template, 3, 5, "div", 43)(4, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_4_Template, 3, 5, "div", 44);
-    i0.ɵɵelementStart(5, "div", 45);
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_6_Template, 1, 1, "input", 46)(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Conditional_7_Template, 3, 2, "div", 47);
-    i0.ɵɵelementStart(8, "div", 48);
-    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", 49);
-    i0.ɵɵelementEnd()()();
+function HomeDashboardComponent_Conditional_2_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_2_For_16_Template_div_click_0_listener() { const appData_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnAppClick(appData_r25.app)); });
+    i0.ɵɵelementStart(1, "div", 94);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 95)(4, "h3", 96);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_2_For_16_Conditional_6_Template, 2, 1, "p", 97);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const pin_r23 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    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_r23.Thumbnail ? 2 : pin_r23.ResourceType === "Actions" ? 3 : 4);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingPinId === pin_r23.Id ? 6 : 7);
+    const appData_r25 = ctx.$implicit;
+    i0.ɵɵstyleProp("--app-color", appData_r25.color);
+    i0.ɵɵproperty("mjClickable", appData_r25.app.Name)("TestId", "app-tile-" + appData_r25.app.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(appData_r25.icon);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r2.GetPinIcon(pin_r23));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetResourceTypeLabel(pin_r23), " ");
+    i0.ɵɵtextInterpolate(appData_r25.app.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(pin_r23.ApplicationName ? 11 : -1);
+    i0.ɵɵconditional(appData_r25.app.Description ? 6 : -1);
 } }
-function HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_1_Template, 1, 1, "input", 65)(2, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_2_Template, 2, 1, "span", 66);
-    i0.ɵɵelement(3, "div", 67);
-    i0.ɵɵelementStart(4, "span", 68);
-    i0.ɵɵtext(5);
+function HomeDashboardComponent_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 98);
+    i0.ɵɵlistener("Action", function HomeDashboardComponent_Conditional_2_Conditional_17_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OpenConfigDialog()); });
+    i0.ɵɵelementEnd();
+} }
+function HomeDashboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 16)(2, "div", 17)(3, "h1");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 18);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "mj-accordion-panel", 19);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_2_Template_mj_accordion_panel_ExpandedChange_7_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinnedExpandedChange($event)); });
+    i0.ɵɵtemplate(8, HomeDashboardComponent_Conditional_2_ng_template_8_Template, 3, 0, "ng-template", 20)(9, HomeDashboardComponent_Conditional_2_ng_template_9_Template, 3, 1, "ng-template", 21)(10, HomeDashboardComponent_Conditional_2_ng_template_10_Template, 4, 3, "ng-template", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_Conditional_6_Template, 4, 0, "div", 69);
+    i0.ɵɵelementStart(11, "section", 23)(12, "h2", 24);
+    i0.ɵɵtext(13, "My applications");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_8_Conditional_10_For_4_For_8_Template, 12, 14, "div", 38, i0.ɵɵcomponentInstance().trackByPin, true);
+    i0.ɵɵelementStart(14, "div", 25);
+    i0.ɵɵrepeaterCreate(15, HomeDashboardComponent_Conditional_2_For_16_Template, 7, 8, "div", 26, i0.ɵɵcomponentInstance().TrackByApp, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(17, HomeDashboardComponent_Conditional_2_Conditional_17_Template, 1, 0, "mj-empty-state", 27);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const group_r19 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.EditingGroupName === group_r19 ? 1 : 2);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", ctx_r2.GetPinsInGroup(group_r19).length, " pins");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
+    i0.ɵɵtextInterpolate2("", ctx_r2.Greeting, ", ", ctx_r2.GreetingName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.FormattedDate);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.GetPinsInGroup(group_r19));
-} }
-function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_8_Conditional_10_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); 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");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵproperty("Bare", true)("TitleIconMuted", true)("HeadingLevel", 2)("FlushBody", true)("Expanded", ctx_r2.PinnedExpanded);
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r2.AppsDisplayData);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.Apps.length === 0 ? 17 : -1);
 } }
-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", 38, 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", 39);
+function HomeDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dashboard-editor", 99, 2);
+    i0.ɵɵtwoWayListener("StartInEditModeChange", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_StartInEditModeChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.DashboardStartsInEditMode, $event) || (ctx_r2.DashboardStartsInEditMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("Loaded", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_Loaded_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardViewLoaded($event)); })("EditingChange", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_EditingChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardEditingChange($event)); })("NameChanged", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_NameChanged_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardSaved()); })("Saved", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_Saved_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardSaved()); })("LoadFailed", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_LoadFailed_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardViewLoadFailed()); })("OpenInDashboardsRequested", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_OpenInDashboardsRequested_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenDashboardInDashboardsApp($event)); })("NavigationRequested", function HomeDashboardComponent_Conditional_3_Template_mj_dashboard_editor_NavigationRequested_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDashboardNavigationRequested($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.UngroupedPins);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.PinGroups);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 5 : -1);
+    const ctx_r2 = i0.ɵɵnextContext();
+    const homeDashboardTitle_r28 = i0.ɵɵreference(5);
+    i0.ɵɵproperty("Provider", ctx_r2.Provider)("DashboardId", ctx_r2.CurrentDashboardId);
+    i0.ɵɵtwoWayProperty("StartInEditMode", ctx_r2.DashboardStartsInEditMode);
+    i0.ɵɵproperty("TitleTemplate", homeDashboardTitle_r28)("ShowOpenInDashboards", true);
 } }
-function HomeDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 15)(2, "h2", 16);
-    i0.ɵɵelement(3, "i", 17);
-    i0.ɵɵtext(4, " Pinned ");
+function HomeDashboardComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 100)(1, "nav", 101)(2, "button", 102);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_ng_template_4_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSwitcherPick(null)); });
+    i0.ɵɵelement(3, "i", 103);
+    i0.ɵɵtext(4, " Home");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 18);
-    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, 7, 2, "div", 21);
-    i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_8_Conditional_10_Template, 6, 1, "div", 22);
+    i0.ɵɵelementStart(5, "span", 85);
+    i0.ɵɵtext(6, "/");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Pinned dashboards");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "mj-home-dashboard-switcher", 104);
+    i0.ɵɵlistener("Pick", function HomeDashboardComponent_ng_template_4_Template_mj_home_dashboard_switcher_Pick_9_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSwitcherPick($event)); })("New", function HomeDashboardComponent_ng_template_4_Template_mj_home_dashboard_switcher_New_9_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenNewDashboardDialog()); })("ManagePins", function HomeDashboardComponent_ng_template_4_Template_mj_home_dashboard_switcher_ManagePins_9_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ManagePins()); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    const dashboard_r30 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : 7);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 8 : -1);
-    i0.ɵɵadvance();
-    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);
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("HeadingLevel", 1)("Label", dashboard_r30.Name)("Dashboards", ctx_r2.PinnedDashboards)("CurrentId", dashboard_r30.ID);
 } }
-function HomeDashboardComponent_Conditional_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(undefined)); });
+    i0.ɵɵelementStart(0, "button", 114);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_6_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); 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) {
+function HomeDashboardComponent_Conditional_6_For_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const group_r34 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(group_r34)); });
+    i0.ɵɵelementStart(0, "button", 114);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_6_For_14_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const group_r34 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnPinMenuMoveToGroup(group_r34)); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -501,47 +511,54 @@ function HomeDashboardComponent_Conditional_9_For_13_Conditional_0_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(group_r34);
 } }
-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", 81);
+function HomeDashboardComponent_Conditional_6_For_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_6_For_14_Conditional_0_Template, 3, 1, "button", 111);
 } if (rf & 2) {
     const group_r34 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(group_r34 !== ctx_r2.PinMenuPin.Group ? 0 : -1);
 } }
-function HomeDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 75)(1, "div", 76);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r31); 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.ɵɵelementStart(0, "div", 105, 3);
+    i0.ɵɵlistener("keydown", function HomeDashboardComponent_Conditional_6_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuKeydown($event)); });
+    i0.ɵɵelementStart(2, "button", 106);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_6_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuEdit()); });
+    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5, "Edit");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "div", 77);
-    i0.ɵɵelementStart(6, "div", 78)(7, "div", 79);
-    i0.ɵɵelement(8, "i", 80);
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10, "Move to Group");
+    i0.ɵɵelement(6, "div", 107);
+    i0.ɵɵelementStart(7, "div", 108)(8, "div", 109);
+    i0.ɵɵelement(9, "i", 110);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11, "Move to Group");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_9_Conditional_11_Template, 3, 0, "div", 81);
-    i0.ɵɵrepeaterCreate(12, HomeDashboardComponent_Conditional_9_For_13_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(14, "div", 77);
-    i0.ɵɵelementStart(15, "div", 82);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_9_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuUnpin()); });
-    i0.ɵɵelement(16, "i", 83);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Unpin");
+    i0.ɵɵconditionalCreate(12, HomeDashboardComponent_Conditional_6_Conditional_12_Template, 3, 0, "button", 111);
+    i0.ɵɵrepeaterCreate(13, HomeDashboardComponent_Conditional_6_For_14_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(15, "div", 107);
+    i0.ɵɵelementStart(16, "button", 112);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_6_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPinMenuUnpin()); });
+    i0.ɵɵelement(17, "i", 113);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Unpin");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r2.PinMenuX, "px")("top", ctx_r2.PinMenuY, "px");
-    i0.ɵɵadvance(11);
-    i0.ɵɵconditional(ctx_r2.PinMenuPin.Group ? 11 : -1);
+    i0.ɵɵstyleProp("left", ctx_r2.PinMenuX, "px")("top", ctx_r2.PinMenuY, "px")("max-height", ctx_r2.PinMenuMaxHeight, "px");
+    i0.ɵɵattribute("aria-label", "Options for " + ctx_r2.PinName(ctx_r2.PinMenuPin));
+    i0.ɵɵadvance(7);
+    i0.ɵɵattribute("aria-labelledby", ctx_r2.PinMenuGroupLabelId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", ctx_r2.PinMenuGroupLabelId);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.PinMenuPin.Group ? 12 : -1);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.PinGroups);
 } }
-function HomeDashboardComponent_Conditional_10_For_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 96);
+function HomeDashboardComponent_Conditional_7_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 128);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -550,25 +567,25 @@ function HomeDashboardComponent_Conditional_10_For_20_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(group_r36);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98)(1, "input", 101);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelNewGroupName, $event) || (ctx_r2.AddPanelNewGroupName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 130)(1, "input", 133);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_7_Conditional_23_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r37); 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);
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.AddPanelNewGroupName);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 100);
-    i0.ɵɵelement(1, "mj-loading", 102);
+function HomeDashboardComponent_Conditional_7_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 132);
+    i0.ɵɵelement(1, "mj-loading", 134);
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 107);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 137);
     i0.ɵɵtext(1, " Applications ");
-    i0.ɵɵelementStart(2, "span", 108);
+    i0.ɵɵelementStart(2, "span", 138);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -576,29 +593,29 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_t
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FilterApps().length);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵelement(1, "i", 24);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 147);
+    i0.ɵɵelement(1, "i", 149);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 119);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ni_r40 = i0.ɵɵnextContext().$implicit; const app_r41 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinAppNavItem(app_r41.appName, app_r41.icon, app_r41.color, ni_r40.label, ni_r40.icon)); });
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "button", 150);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ni_r40 = i0.ɵɵnextContext().$implicit; const app_r41 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinAppNavItem(app_r41.appName, app_r41.icon, app_r41.color, ni_r40.label, ni_r40.icon)); });
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112)(1, "div", 113);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 142)(1, "div", 143);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115);
+    i0.ɵɵelementStart(3, "div", 144)(4, "div", 145);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 116);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_7_Template, 3, 0, "button", 117)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template, 3, 0, "button", 118);
+    i0.ɵɵelementStart(6, "div", 146);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_7_Template, 3, 0, "button", 147)(8, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Conditional_8_Template, 3, 0, "button", 148);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ni_r40 = ctx.$implicit;
@@ -613,14 +630,14 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_t
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ni_r40.pinned ? 7 : 8);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109)(1, "div", 110);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 139)(1, "div", 140);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 111);
+    i0.ɵɵelementStart(3, "span", 141);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Template, 9, 8, "div", 112, _forTrack1);
+    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_For_6_Template, 9, 8, "div", 142, _forTrack3);
 } if (rf & 2) {
     const app_r41 = ctx.$implicit;
     i0.ɵɵstyleProp("--panel-app-color", app_r41.color);
@@ -631,26 +648,26 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_t
     i0.ɵɵadvance();
     i0.ɵɵrepeater(app_r41.navItems);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_For_1_Template, 7, 5, null, null, _forTrack0);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_For_1_Template, 7, 5, null, null, _forTrack2);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵrepeater(ctx_r2.FilterApps());
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
-    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("apps", $event)); });
-    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_1_Template, 4, 1, "ng-template", 105)(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_ng_template_2_Template, 2, 0, "ng-template", 106);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 136);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("apps", $event)); });
+    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_1_Template, 4, 1, "ng-template", 20)(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_ng_template_2_Template, 2, 0, "ng-template", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r2.PanelSectionCollapsed["apps"]);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 120);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 151);
     i0.ɵɵtext(1, " Dashboards ");
-    i0.ɵɵelementStart(2, "span", 108);
+    i0.ɵɵelementStart(2, "span", 138);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -658,29 +675,29 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_t
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FilterPanelItems(ctx_r2.AvailableDashboards).length);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵelement(1, "i", 24);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 147);
+    i0.ɵɵelement(1, "i", 149);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 119);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const item_r44 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Dashboards", item_r44.id, item_r44.name)); });
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "button", 150);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const item_r44 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Dashboards", item_r44.id, item_r44.name)); });
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
-    i0.ɵɵelement(2, "i", 123);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵelement(2, "i", 154);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115);
+    i0.ɵɵelementStart(3, "div", 144)(4, "div", 145);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 116);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_7_Template, 3, 0, "button", 117)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template, 3, 0, "button", 118);
+    i0.ɵɵelementStart(6, "div", 146);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_7_Template, 3, 0, "button", 147)(8, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Conditional_8_Template, 3, 0, "button", 148);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r44 = ctx.$implicit;
@@ -689,26 +706,26 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_t
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(item_r44.pinned ? 7 : 8);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_For_1_Template, 9, 2, "div", 121, _forTrack2);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_For_1_Template, 9, 2, "div", 152, _forTrack4);
 } 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) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
-    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("dashboards", $event)); });
-    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_1_Template, 4, 1, "ng-template", 105)(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_ng_template_2_Template, 2, 0, "ng-template", 106);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 136);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("dashboards", $event)); });
+    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_1_Template, 4, 1, "ng-template", 20)(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_ng_template_2_Template, 2, 0, "ng-template", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r2.PanelSectionCollapsed["dashboards"]);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 124);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 155);
     i0.ɵɵtext(1, " Views ");
-    i0.ɵɵelementStart(2, "span", 108);
+    i0.ɵɵelementStart(2, "span", 138);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -716,32 +733,32 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_t
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FilterPanelItems(ctx_r2.AvailableViews).length);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵelement(1, "i", 24);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 147);
+    i0.ɵɵelement(1, "i", 149);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r46 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 119);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const item_r47 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("User Views", item_r47.id, item_r47.name)); });
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "button", 150);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const item_r47 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("User Views", item_r47.id, item_r47.name)); });
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
-    i0.ɵɵelement(2, "i", 125);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵelement(2, "i", 156);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115);
+    i0.ɵɵelementStart(3, "div", 144)(4, "div", 145);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 126);
+    i0.ɵɵelementStart(6, "div", 157);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 116);
-    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_9_Template, 3, 0, "button", 117)(10, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template, 3, 0, "button", 118);
+    i0.ɵɵelementStart(8, "div", 146);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_9_Template, 3, 0, "button", 147)(10, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Conditional_10_Template, 3, 0, "button", 148);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r47 = ctx.$implicit;
@@ -752,26 +769,26 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_t
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(item_r47.pinned ? 9 : 10);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_For_1_Template, 11, 3, "div", 121, _forTrack2);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_For_1_Template, 11, 3, "div", 152, _forTrack4);
 } 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) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
-    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r45); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("views", $event)); });
-    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_1_Template, 4, 1, "ng-template", 105)(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_ng_template_2_Template, 2, 0, "ng-template", 106);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 136);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r45); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("views", $event)); });
+    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_1_Template, 4, 1, "ng-template", 20)(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_ng_template_2_Template, 2, 0, "ng-template", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r2.PanelSectionCollapsed["views"]);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 127);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 158);
     i0.ɵɵtext(1, " Queries ");
-    i0.ɵɵelementStart(2, "span", 108);
+    i0.ɵɵelementStart(2, "span", 138);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -779,29 +796,29 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_t
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FilterPanelItems(ctx_r2.AvailableQueries).length);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵelement(1, "i", 24);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 147);
+    i0.ɵɵelement(1, "i", 149);
     i0.ɵɵtext(2, " Pinned");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r49 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 119);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r49); const item_r50 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Queries", item_r50.id, item_r50.name)); });
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "button", 150);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r49); const item_r50 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.PinFromPanel("Queries", item_r50.id, item_r50.name)); });
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵtext(2, " Pin ");
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
-    i0.ɵɵelement(2, "i", 128);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵelement(2, "i", 159);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115);
+    i0.ɵɵelementStart(3, "div", 144)(4, "div", 145);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 116);
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_7_Template, 3, 0, "button", 117)(8, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template, 3, 0, "button", 118);
+    i0.ɵɵelementStart(6, "div", 146);
+    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_7_Template, 3, 0, "button", 147)(8, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Conditional_8_Template, 3, 0, "button", 148);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r50 = ctx.$implicit;
@@ -810,26 +827,26 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_t
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(item_r50.pinned ? 7 : 8);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_For_1_Template, 9, 2, "div", 121, _forTrack2);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_For_1_Template, 9, 2, "div", 152, _forTrack4);
 } 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) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r48 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
-    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r48); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("queries", $event)); });
-    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_1_Template, 4, 1, "ng-template", 105)(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 106);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 136);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r48); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("queries", $event)); });
+    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_1_Template, 4, 1, "ng-template", 20)(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r2.PanelSectionCollapsed["queries"]);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 129);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 160);
     i0.ɵɵtext(1, " Quick Actions ");
-    i0.ɵɵelementStart(2, "span", 108);
+    i0.ɵɵelementStart(2, "span", 138);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -837,8 +854,8 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_t
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions).length);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 126);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 157);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -846,19 +863,19 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_t
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r53.description);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r52 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
-    i0.ɵɵelement(2, "i", 130);
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵelement(2, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115);
+    i0.ɵɵelementStart(3, "div", 144)(4, "div", 145);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_For_1_Conditional_6_Template, 2, 1, "div", 126);
+    i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_For_1_Conditional_6_Template, 2, 1, "div", 157);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 116)(8, "button", 119);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_For_1_Template_button_click_8_listener() { const item_r53 = i0.ɵɵrestoreView(_r52).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OpenActionPinConfig(item_r53.id, item_r53.name, item_r53.description)); });
-    i0.ɵɵelement(9, "i", 131);
+    i0.ɵɵelementStart(7, "div", 146)(8, "button", 150);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_For_1_Template_button_click_8_listener() { const item_r53 = i0.ɵɵrestoreView(_r52).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OpenActionPinConfig(item_r53.id, item_r53.name, item_r53.description)); });
+    i0.ɵɵelement(9, "i", 162);
     i0.ɵɵtext(10, " Configure ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -868,28 +885,28 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_t
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r53.description ? 6 : -1);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_For_1_Template, 11, 2, "div", 121, _forTrack2);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_For_1_Template, 11, 2, "div", 152, _forTrack4);
 } 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) {
+function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r51 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
-    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r51); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("actions", $event)); });
-    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_1_Template, 4, 1, "ng-template", 105)(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_ng_template_2_Template, 2, 0, "ng-template", 106);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 136);
+    i0.ɵɵlistener("ExpandedChange", function HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r51); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnPanelSectionExpandedChange("actions", $event)); });
+    i0.ɵɵtemplate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_1_Template, 4, 1, "ng-template", 20)(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_ng_template_2_Template, 2, 0, "ng-template", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r2.PanelSectionCollapsed["actions"]);
 } }
-function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_0_Template, 3, 2, "mj-accordion-panel", 103);
-    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_1_Template, 3, 2, "mj-accordion-panel", 103);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_2_Template, 3, 2, "mj-accordion-panel", 103);
-    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_3_Template, 3, 2, "mj-accordion-panel", 103);
-    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_10_Conditional_26_Conditional_4_Template, 3, 2, "mj-accordion-panel", 103);
+function HomeDashboardComponent_Conditional_7_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_0_Template, 3, 2, "mj-accordion-panel", 135);
+    i0.ɵɵconditionalCreate(1, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_1_Template, 3, 2, "mj-accordion-panel", 135);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_2_Template, 3, 2, "mj-accordion-panel", 135);
+    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_3_Template, 3, 2, "mj-accordion-panel", 135);
+    i0.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_7_Conditional_26_Conditional_4_Template, 3, 2, "mj-accordion-panel", 135);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r2.FilterApps().length > 0 ? 0 : -1);
@@ -902,40 +919,40 @@ function HomeDashboardComponent_Conditional_10_Conditional_26_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.FilterPanelItems(ctx_r2.AvailableActions).length > 0 ? 4 : -1);
 } }
-function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function HomeDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
+    i0.ɵɵelementStart(0, "div", 115);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 86)(2, "div", 87)(3, "h3");
-    i0.ɵɵelement(4, "i", 17);
+    i0.ɵɵelementStart(1, "div", 116)(2, "div", 117)(3, "h3");
+    i0.ɵɵelement(4, "i", 118);
     i0.ɵɵtext(5, " Add Pin");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 88);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
-    i0.ɵɵelement(7, "i", 36);
+    i0.ɵɵelementStart(6, "button", 119);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseAddPinPanel()); });
+    i0.ɵɵelement(7, "i", 52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 89)(9, "div", 90);
-    i0.ɵɵelement(10, "i", 91);
-    i0.ɵɵelementStart(11, "input", 92);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSearchQuery, $event) || (ctx_r2.AddPanelSearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "div", 120)(9, "div", 121);
+    i0.ɵɵelement(10, "i", 122);
+    i0.ɵɵelementStart(11, "input", 123);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_7_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r35); 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", 93)(13, "label");
-    i0.ɵɵelement(14, "i", 80);
+    i0.ɵɵelementStart(12, "div", 124)(13, "label");
+    i0.ɵɵelement(14, "i", 125);
     i0.ɵɵtext(15, " Add to group:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "select", 94);
-    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_10_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSelectedGroup, $event) || (ctx_r2.AddPanelSelectedGroup = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(17, "option", 95);
+    i0.ɵɵelementStart(16, "select", 126);
+    i0.ɵɵtwoWayListener("ngModelChange", function HomeDashboardComponent_Conditional_7_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.AddPanelSelectedGroup, $event) || (ctx_r2.AddPanelSelectedGroup = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(17, "option", 127);
     i0.ɵɵtext(18, "(No group)");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_10_For_20_Template, 2, 2, "option", 96, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementStart(21, "option", 97);
+    i0.ɵɵrepeaterCreate(19, HomeDashboardComponent_Conditional_7_For_20_Template, 2, 2, "option", 128, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(21, "option", 129);
     i0.ɵɵtext(22, "+ New group...");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_10_Conditional_23_Template, 2, 1, "div", 98);
-    i0.ɵɵelementStart(24, "div", 99);
-    i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_10_Conditional_25_Template, 2, 0, "div", 100)(26, HomeDashboardComponent_Conditional_10_Conditional_26_Template, 5, 5);
+    i0.ɵɵconditionalCreate(23, HomeDashboardComponent_Conditional_7_Conditional_23_Template, 2, 1, "div", 130);
+    i0.ɵɵelementStart(24, "div", 131);
+    i0.ɵɵconditionalCreate(25, HomeDashboardComponent_Conditional_7_Conditional_25_Template, 2, 0, "div", 132)(26, HomeDashboardComponent_Conditional_7_Conditional_26_Template, 5, 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -950,134 +967,39 @@ function HomeDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.AddPanelLoading ? 25 : 26);
 } }
-function HomeDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "mj-loading", 132);
-    i0.ɵɵelementEnd();
-} }
-function HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 141);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const appData_r55 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(appData_r55.app.Description);
-} }
-function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r56 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r56.Icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r56.Label);
-} }
-function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 146);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const appData_r55 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", appData_r55.moreItemsCount, " more ");
-} }
-function HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 142);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_For_2_Template, 4, 3, "div", 145, i0.ɵɵcomponentInstance().trackByNavItem, true);
-    i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Conditional_3_Template, 2, 1, "span", 146);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const appData_r55 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(appData_r55.navItemsPreview);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(appData_r55.showMoreItems ? 3 : -1);
-} }
-function HomeDashboardComponent_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r54 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 136);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_14_For_6_Template_div_click_0_listener() { const appData_r55 = i0.ɵɵrestoreView(_r54).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAppClick(appData_r55.app)); });
-    i0.ɵɵelementStart(1, "div", 137)(2, "div", 138);
-    i0.ɵɵelement(3, "i");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 139)(5, "h3", 140);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_For_6_Conditional_7_Template, 2, 1, "p", 141);
-    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_14_For_6_Conditional_8_Template, 4, 1, "div", 142);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 143);
-    i0.ɵɵelement(10, "i", 144);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const appData_r55 = ctx.$implicit;
-    i0.ɵɵstyleProp("--app-color", appData_r55.color);
-    i0.ɵɵproperty("mjClickable", appData_r55.app.Name)("testId", "app-tile-" + appData_r55.app.Name);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(appData_r55.icon);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(appData_r55.app.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(appData_r55.app.Description ? 7 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(appData_r55.navItemsCount > 0 ? 8 : -1);
-} }
-function HomeDashboardComponent_Conditional_14_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r57 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 147);
-    i0.ɵɵlistener("Action", function HomeDashboardComponent_Conditional_14_Conditional_7_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r57); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openConfigDialog()); });
+function HomeDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "mj-loading", 163);
     i0.ɵɵelementEnd();
 } }
-function HomeDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "h2", 16);
-    i0.ɵɵelement(2, "i", 107);
-    i0.ɵɵtext(3, " My Applications ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 133);
-    i0.ɵɵrepeaterCreate(5, HomeDashboardComponent_Conditional_14_For_6_Template, 11, 9, "div", 134, i0.ɵɵcomponentInstance().trackByApp, true);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_14_Conditional_7_Template, 1, 0, "mj-empty-state", 135);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(ctx_r2.appsDisplayData);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.apps.length === 0 ? 7 : -1);
-} }
-function HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r59 = 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_r60 = i0.ɵɵrestoreView(_r59).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r60)); });
-    i0.ɵɵelementStart(1, "div", 161)(2, "span", 162);
+function HomeDashboardComponent_Conditional_12_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r55 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_12_Conditional_8_For_8_Template_div_click_0_listener() { const notification_r56 = i0.ɵɵrestoreView(_r55).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNotificationClick(notification_r56)); });
+    i0.ɵɵelementStart(1, "div", 177)(2, "span", 178);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 163);
+    i0.ɵɵelementStart(4, "span", 179);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "slice");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const notification_r60 = ctx.$implicit;
-    i0.ɵɵproperty("mjClickable", notification_r60.Title);
+    const notification_r56 = ctx.$implicit;
+    i0.ɵɵproperty("mjClickable", notification_r56.Title);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(notification_r60.Title);
+    i0.ɵɵtextInterpolate(notification_r56.Title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 4, notification_r60.Message, 0, 40), "", ((notification_r60.Message == null ? null : notification_r60.Message.length) || 0) > 40 ? "..." : "");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 4, notification_r56.Message, 0, 40), "", ((notification_r56.Message == null ? null : notification_r56.Message.length) || 0) > 40 ? "..." : "");
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 151)(1, "h4", 155);
-    i0.ɵɵelement(2, "i", 156);
+function HomeDashboardComponent_Conditional_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 167)(1, "h4", 171);
+    i0.ɵɵelement(2, "i", 172);
     i0.ɵɵtext(3, " Notifications ");
-    i0.ɵɵelementStart(4, "span", 157);
+    i0.ɵɵelementStart(4, "span", 173);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 158);
-    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_15_Conditional_8_For_8_Template, 7, 8, "div", 159, i0.ɵɵcomponentInstance().trackByNotification, true);
+    i0.ɵɵelementStart(6, "div", 174);
+    i0.ɵɵrepeaterCreate(7, HomeDashboardComponent_Conditional_12_Conditional_8_For_8_Template, 7, 8, "div", 175, i0.ɵɵcomponentInstance().trackByNotification, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1086,53 +1008,53 @@ function HomeDashboardComponent_Conditional_15_Conditional_8_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.unreadNotifications);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r61 = 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_r62 = i0.ɵɵrestoreView(_r61).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r62)); });
-    i0.ɵɵelementStart(1, "div", 168);
+function HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r57 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_4_For_2_Template_div_click_0_listener() { const favorite_r58 = i0.ɵɵrestoreView(_r57).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFavoriteClick(favorite_r58)); });
+    i0.ɵɵelementStart(1, "div", 184);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 161)(4, "span", 162);
+    i0.ɵɵelementStart(3, "div", 177)(4, "span", 178);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 163);
+    i0.ɵɵelementStart(6, "span", 179);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const favorite_r62 = ctx.$implicit;
+    const favorite_r58 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("mjClickable", ctx_r2.getFavoriteDisplayName(favorite_r62));
+    i0.ɵɵproperty("mjClickable", ctx_r2.getFavoriteDisplayName(favorite_r58));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(favorite_r62.Entity));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(favorite_r58.Entity));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(favorite_r62));
+    i0.ɵɵtextInterpolate(ctx_r2.getFavoriteDisplayName(favorite_r58));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(favorite_r62.Entity);
+    i0.ɵɵtextInterpolate(favorite_r58.Entity);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 158);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_4_For_2_Template, 8, 5, "div", 166, i0.ɵɵcomponentInstance().trackByFavorite, true);
+function HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 174);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_4_For_2_Template, 8, 5, "div", 182, i0.ɵɵcomponentInstance().trackByFavorite, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.favorites);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 165);
-    i0.ɵɵelement(1, "i", 169);
+function HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 181);
+    i0.ɵɵelement(1, "i", 185);
     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", 152)(1, "h4", 155);
-    i0.ɵɵelement(2, "i", 164);
+function HomeDashboardComponent_Conditional_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 168)(1, "h4", 171);
+    i0.ɵɵelement(2, "i", 180);
     i0.ɵɵtext(3, " Favorites ");
     i0.ɵɵelementEnd();
-    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.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_4_Template, 3, 0, "div", 174);
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_12_Conditional_9_Conditional_5_Template, 4, 0, "div", 181);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1141,53 +1063,53 @@ function HomeDashboardComponent_Conditional_15_Conditional_9_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.favoritesLoading ? 5 : -1);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r63 = 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_r64 = i0.ɵɵrestoreView(_r63).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r64)); });
-    i0.ɵɵelementStart(1, "div", 168);
+function HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r59 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 188);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_4_For_2_Template_div_click_0_listener() { const item_r60 = i0.ɵɵrestoreView(_r59).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onRecentClick(item_r60)); });
+    i0.ɵɵelementStart(1, "div", 184);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 161)(4, "span", 162);
+    i0.ɵɵelementStart(3, "div", 177)(4, "span", 178);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 163);
+    i0.ɵɵelementStart(6, "span", 179);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r64 = ctx.$implicit;
+    const item_r60 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("mjClickable", item_r64.recordName || item_r64.recordId);
+    i0.ɵɵproperty("mjClickable", item_r60.recordName || item_r60.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(item_r64.entityName));
+    i0.ɵɵclassMap(ctx_r2.getEntityIconByName(item_r60.entityName));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r64.recordName || item_r64.recordId);
+    i0.ɵɵtextInterpolate(item_r60.recordName || item_r60.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", item_r64.entityName, " \u00B7 ", ctx_r2.formatDate(item_r64.latestAt));
+    i0.ɵɵtextInterpolate2("", item_r60.entityName, " \u00B7 ", ctx_r2.formatDate(item_r60.latestAt));
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 158);
-    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_4_For_2_Template, 8, 6, "div", 171, i0.ɵɵcomponentInstance().trackByRecent, true);
+function HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 174);
+    i0.ɵɵrepeaterCreate(1, HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_4_For_2_Template, 8, 6, "div", 187, i0.ɵɵcomponentInstance().trackByRecent, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.recentItems);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 165);
-    i0.ɵɵelement(1, "i", 169);
+function HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 181);
+    i0.ɵɵelement(1, "i", 185);
     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", 153)(1, "h4", 155);
-    i0.ɵɵelement(2, "i", 170);
+function HomeDashboardComponent_Conditional_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 169)(1, "h4", 171);
+    i0.ɵɵelement(2, "i", 186);
     i0.ɵɵtext(3, " Recent ");
     i0.ɵɵelementEnd();
-    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.ɵɵconditionalCreate(4, HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_4_Template, 3, 0, "div", 174);
+    i0.ɵɵconditionalCreate(5, HomeDashboardComponent_Conditional_12_Conditional_10_Conditional_5_Template, 4, 0, "div", 181);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1196,24 +1118,24 @@ function HomeDashboardComponent_Conditional_15_Conditional_10_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.recentsLoading ? 5 : -1);
 } }
-function HomeDashboardComponent_Conditional_15_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 154);
+function HomeDashboardComponent_Conditional_12_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 170);
 } }
-function HomeDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r58 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 148)(2, "h3");
-    i0.ɵɵelement(3, "i", 129);
+function HomeDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r54 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 164)(2, "h3");
+    i0.ɵɵelement(3, "i", 160);
     i0.ɵɵtext(4, " Quick Access ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 149);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r58); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(6, "i", 36);
+    i0.ɵɵelementStart(5, "button", 165);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r54); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
+    i0.ɵɵelement(6, "i", 52);
     i0.ɵɵelementEnd()();
-    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, 1, 0, "mj-empty-state", 154);
+    i0.ɵɵelementStart(7, "div", 166);
+    i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_12_Conditional_8_Template, 9, 1, "div", 167);
+    i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_12_Conditional_9_Template, 6, 2, "div", 168);
+    i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_12_Conditional_10_Template, 6, 2, "div", 169);
+    i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_12_Conditional_11_Template, 1, 0, "mj-empty-state", 170);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1226,8 +1148,8 @@ function HomeDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     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", 174);
+function HomeDashboardComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 190);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1235,18 +1157,32 @@ function HomeDashboardComponent_Conditional_16_Conditional_2_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.unreadNotifications.length);
 } }
-function HomeDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r65 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 173);
-    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r65); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
-    i0.ɵɵelement(1, "i", 129);
-    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_16_Conditional_2_Template, 2, 1, "span", 174);
+function HomeDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r61 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 189);
+    i0.ɵɵlistener("click", function HomeDashboardComponent_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r61); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSidebar()); });
+    i0.ɵɵelement(1, "i", 160);
+    i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_13_Conditional_2_Template, 2, 1, "span", 190);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.unreadNotifications.length > 0 ? 2 : -1);
 } }
+/** User setting for the Pinned section: 'true' when collapsed, 'false' when open. A missing setting means open. */
+const PINNED_COLLAPSED_SETTING = 'HomeApp.PinnedCollapsed';
+/** The query param that names the dashboard Home shows in place of its overview. */
+const DASHBOARD_QUERY_PARAM = 'dashboard';
+/** The dashboard view's title: the switcher button that names the open dashboard. */
+const DASHBOARD_TITLE_SELECTOR = '.dashboard-title .switcher-title';
+/** The notice when Home cannot show the dashboard the URL or the editor names. */
+const DASHBOARD_NOT_AVAILABLE = 'That dashboard is not available';
+/** The name the SwitchHomeDashboard agent tool takes for Home's overview (any letter case). */
+const HOME_OVERVIEW_NAME = 'Home';
+/** Width of the pin options menu, in pixels. */
+const PIN_MENU_WIDTH = 220;
+/** Process-wide counter for the ids that label each Home's pin menu groups. */
+let nextPinMenuUid = 0;
 /**
  * Home Dashboard - Personalized home screen showing all available applications
  * with quick access navigation and configuration options.
@@ -1262,7 +1198,11 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     destroy$ = new Subject();
     metadata = this.ProviderToUse;
     pinService = inject(HomeAppPinService);
+    confirmService = inject(MJConfirmService);
+    hostElement = inject(ElementRef);
     AppConfigDialog;
+    pinMenuEl;
+    dashboardEditor;
     /** @deprecated Use {@link AppConfigDialog}. */
     get appConfigDialog() {
         return this.AppConfigDialog;
@@ -1272,6 +1212,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.AppConfigDialog = value;
     }
     // State
+    /** True until Home's first load finishes; the page shows its loading view meanwhile. A later app-list reload does not set it. */
     isLoading = true;
     Apps = [];
     /** @deprecated Use {@link Apps}. */
@@ -1378,10 +1319,14 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     }
     // Pin empty-state dismissal preference (persisted in UserSettings via UserInfoEngine)
     HidePinEmptyState = false;
+    /** Whether the Pinned section is open. Saved for each user in the HomeApp.PinnedCollapsed setting. */
+    PinnedExpanded = true;
     // Pin state
     PinnedItems = [];
     UngroupedPins = [];
     PinGroups = [];
+    /** The pin grid's runs: ungrouped pins first, then each group in group order. */
+    PinSections = [];
     EditMode = false;
     AddPanelOpen = false;
     AddPanelSearchQuery = '';
@@ -1409,9 +1354,50 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     PinMenuVisible = false;
     PinMenuX = 0;
     PinMenuY = 0;
+    /** The pin menu's max height in pixels: the room on its side of the button. Null while the menu is measured. */
+    PinMenuMaxHeight = null;
     PinMenuPin = null;
-    // Whether Data Explorer app is available (if so, dashboards/queries/views are accessible via its nav items)
+    /** Id of the menu's "Move to Group" header, which names the group rows. */
+    PinMenuGroupLabelId = `home-pin-menu-groups-${nextPinMenuUid++}`;
+    /** The ellipsis button that opened the pin options menu. Escape and Tab put focus back on it. */
+    pinMenuTrigger = null;
+    // Whether the Add Pin panel found the Data Explorer app. Query pins then open in its Queries nav item.
     HasDataExplorerApp = false;
+    // Dashboard view: a pinned dashboard shown in place of the overview
+    /** The dashboard Home shows in place of its overview, or null on the overview. */
+    CurrentDashboard = null;
+    /** ID of that dashboard, or null. */
+    CurrentDashboardId = null;
+    /** True when the dashboard view opens in edit mode. The editor reads it once, then sets it back to false. */
+    DashboardStartsInEditMode = false;
+    /** True while the dashboard Home shows is in edit mode. */
+    IsDashboardEditing = false;
+    /** The pinned Config dashboards, in pin order, for the Dashboards switcher. */
+    PinnedDashboards = [];
+    /** The names dashboard pins show, by pin id: their dashboards' names from the dashboard cache. */
+    pinDashboardNames = new Map();
+    /** True once the first load of the dashboard cache has finished, also when it failed. */
+    dashboardCacheLoaded = false;
+    /** The dashboard the URL asks for; shown once the dashboard cache has loaded. */
+    requestedDashboardId = null;
+    /**
+     * The dashboard Home shows because a URL change named it: back, forward or a deep link into the open tab. When the
+     * editor cannot show it, Home leaves the URL as it is. Home's first load does not set it, and any other change of the
+     * shown dashboard clears it.
+     */
+    urlShownDashboardId = null;
+    /**
+     * The dashboard whose title gets focus when the editor has shown it: one the user picked in a switcher or opened from a
+     * pin, or one an agent showed after its switch removed the part of Home that had focus.
+     */
+    focusTitleOnLoad = null;
+    // New dashboard: the name dialog
+    /** True while the New dashboard name dialog is open. */
+    ShowNewDashboardDialog = false;
+    /** True while the named dashboard is being created. */
+    IsCreatingDashboard = false;
+    /** The longest name the dialog accepts. */
+    NewDashboardNameMaxLength = DASHBOARD_NAME_MAX_LENGTH;
     // Drag state
     DraggingPinId = null;
     DragOverPinId = null;
@@ -1428,6 +1414,26 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     set favoriteDisplayNames(value) {
         this.FavoriteDisplayNames = value;
     }
+    /** True when Home shows its overview: the greeting, Pinned and My applications. */
+    get ShowOverview() {
+        return !this.isLoading && !this.CurrentDashboard;
+    }
+    /** True when Home shows a dashboard in place of its overview. */
+    get ShowDashboardView() {
+        return !this.isLoading && this.CurrentDashboard !== null;
+    }
+    /** The Quick Access button and sidebar show on the overview only: in the dashboard view the button would cover the header's actions. */
+    get ShowQuickAccess() {
+        return this.HasSidebarContent && !this.CurrentDashboard;
+    }
+    /** The name of the dashboard Home shows, from the dashboard cache; null on the overview. */
+    get CurrentDashboardName() {
+        return this.CurrentDashboardId ? this.cachedDashboardName(this.CurrentDashboardId) : null;
+    }
+    /** True while the dashboard Home shows is in edit mode (see BaseResourceComponent.IsEditing). */
+    IsEditing() {
+        return this.IsDashboardEditing;
+    }
     /**
      * Check if sidebar has any content to show
      */
@@ -1443,10 +1449,12 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         return this.HasSidebarContent;
     }
     /**
-     * Toggle sidebar visibility
+     * Opens or closes the Quick Access sidebar and marks Home for check, so the change shows at the next render also
+     * when the agent's ToggleSidebar tool calls this outside a template event.
      */
     ToggleSidebar() {
         this.SidebarOpen = !this.SidebarOpen;
+        this.cdr.markForCheck();
     }
     /** @deprecated Use {@link ToggleSidebar}. */
     toggleSidebar() {
@@ -1474,20 +1482,20 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         // Get current user info
         this.CurrentUser = {
             Name: this.metadata.CurrentUser?.Name || 'User',
-            Email: this.metadata.CurrentUser?.Email || ''
+            Email: this.metadata.CurrentUser?.Email || '',
+            FirstName: this.metadata.CurrentUser?.FirstName || ''
         };
-        // Subscribe to loading state from ApplicationManager
-        this.appManager.Loading
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(loading => {
-            // Only update isLoading if manager is actively loading
-            // (we start with isLoading=true and only set to false when we have apps)
-            if (loading) {
-                this.isLoading = true;
-                this.cdr.markForCheck();
-            }
-        });
-        // Subscribe to applications list, filtering out the Home app
+        this.loadSectionStates();
+        // The dashboard the tab's data names, for when the query-param stream has not delivered one
+        const initialDashboard = this.GetQueryParams()[DASHBOARD_QUERY_PARAM]?.trim();
+        if (initialDashboard && !this.requestedDashboardId) {
+            this.requestedDashboardId = initialDashboard;
+        }
+        // The Dashboards part of the first load: the automatic app install and the dashboard cache
+        const dashboardsLoad = this.loadDashboards();
+        // Subscribe to applications list, filtering out the Home app. The loading view shows during the first load
+        // only: a later reload of the list (an app install) keeps the page as it is, so an open dashboard and its edit
+        // stay, and the overview keeps its apps until the new list arrives.
         this.appManager.Applications
             .pipe(takeUntil(this.destroy$))
             .subscribe(async (apps) => {
@@ -1495,6 +1503,8 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             this.Apps = apps.filter(app => app.Name !== 'Home');
             // Pre-compute display data for all apps
             await this.computeAppsDisplayData();
+            // The page shows once the Dashboards part of the first load is done (see loadDashboards)
+            await dashboardsLoad;
             this.isLoading = false;
             this.NotifyLoadComplete();
             // Apps changed → keep the agent's view of the launcher in sync.
@@ -1519,6 +1529,10 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             this.publishAgentContext();
             this.cdr.markForCheck();
         });
+        // The switcher, the dashboard pin names and the open dashboard follow changes to the dashboard cache
+        ObserveDashboardLibraryChanges()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.refreshPinnedDashboards());
         // Favorites and recents load asynchronously in the sidebar
         this.NotifyLoadComplete();
         // Load favorites and recents asynchronously (don't block rendering)
@@ -1535,8 +1549,11 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             this.PinnedItems = pins;
             this.UngroupedPins = this.pinService.GetUngroupedPins();
             this.PinGroups = this.pinService.GetGroups();
-            this.publishAgentContext();
-            this.cdr.markForCheck();
+            this.PinSections = [
+                { Key: 'ungrouped', Group: null, Pins: this.UngroupedPins },
+                ...this.PinGroups.map(group => ({ Key: `group:${group}`, Group: group, Pins: this.pinService.GetPinsInGroup(group) })),
+            ];
+            this.refreshPinnedDashboards();
         });
         // Resolve display names for record-type pins that have raw ID titles
         this.resolveRecordPinNames();
@@ -1562,11 +1579,16 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     //
     // 🚨 SAFETY BOUNDARY: the Home dashboard exposes ONLY navigation / discovery /
     // panel-toggle operations to the agent. No pin create, no pin delete, no pin
-    // rename, no group mutation, no reordering — those are user-confirm-driven or
-    // destructive and stay in the UI. Every tool below maps to the exact same
-    // component method a user click would call (OpenApp→onAppClick, OpenPin→OnPinClick,
-    // search→AddPanel search field, panel/sidebar/edit-mode toggles). Handlers are
-    // tolerant: they never throw, returning { Success, Data?, ErrorMessage? }.
+    // rename, no group mutation, no reordering, and no dashboard create, rename,
+    // edit, save or delete — those are user-confirm-driven or destructive and stay
+    // in the UI. Home registers no dashboard edit tools for the dashboard it shows
+    // (those are on the dashboard tab). Every tool below maps to the exact same
+    // component method a user click would call (OpenApp→OnAppClick, OpenPin→openPin,
+    // which a pin click calls, SwitchHomeDashboard→OpenDashboardInHome / GoHome,
+    // which a switcher pick calls, search→AddPanel search field, panel/sidebar/
+    // edit-mode toggles). Leaving a dashboard with unsaved changes asks the user
+    // first, as it does for a click. Handlers are tolerant: they never throw,
+    // returning { Success, Data?, ErrorMessage? }.
     /**
      * Publish the current Home dashboard state to the AI agent via NavigationService.
      * The shaping lives in the pure {@link buildHomeAgentContext} helper so it stays
@@ -1580,7 +1602,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             PinnedItemCount: this.PinnedItems.length,
             PinGroupCount: this.PinGroups.length,
             PinGroupNames: this.PinGroups,
-            PinNames: this.PinnedItems.map(p => p.DisplayName),
+            PinNames: this.PinnedItems.map(p => this.PinName(p)),
             UnreadNotifications: this.UnreadNotifications.length,
             NotificationTitles: this.UnreadNotifications.map(n => n.Title ?? '(untitled)'),
             RecentItemsCount: this.RecentItems.length,
@@ -1589,6 +1611,11 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             AddPanelOpen: this.AddPanelOpen,
             SidebarOpen: this.SidebarOpen,
             AddPanelSearchQuery: this.AddPanelSearchQuery,
+            PinnedCollapsed: !this.PinnedExpanded,
+            CurrentDashboardName: this.CurrentDashboardName,
+            CurrentDashboardID: this.CurrentDashboardId,
+            IsEditingDashboard: this.IsDashboardEditing,
+            PinnedDashboardNames: this.PinnedDashboards.map(d => d.Name),
         });
         this.navigationService.SetAgentContext(this, context);
     }
@@ -1607,14 +1634,16 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
      *
      * Tools:
      * - OpenApp: switch to an application by name (exact or partial match).
-     * - OpenPin: open a pinned item by its display name (exact or partial match).
+     * - OpenPin: open a pinned item by the name it shows (exact or partial match). A pinned dashboard opens inside Home.
      * - SearchPins: find pinned items by a name query (read-only — returns matches).
      * - OpenRecent: open a recently-accessed item by display name (read-only navigation).
      * - SearchAddPinPanel: open the Add Pin panel (if needed) and apply a search query.
      * - ClearAddPinPanelSearch: clear the Add Pin panel search query.
      * - OpenAddPinPanel / CloseAddPinPanel: toggle the Add Pin panel.
-     * - ToggleSidebar: toggle the notifications/favorites/recents sidebar.
-     * - TogglePinEditMode: toggle pin edit mode (reorder/rename UI affordances).
+     * - ToggleSidebar: toggle the notifications/favorites/recents sidebar (on the overview only).
+     * - TogglePinEditMode: toggle pin edit mode (reorder/rename UI affordances; on the overview only).
+     * - SwitchHomeDashboard: show a pinned dashboard inside Home by its name (exact or partial match) or id, or "Home"
+     *   for the overview.
      */
     registerAgentClientTools() {
         this.navigationService.SetAgentClientTools(this, [
@@ -1626,13 +1655,13 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             },
             {
                 Name: 'OpenPin',
-                Description: 'Open a pinned item on the Home screen by its display name (exact or partial match).',
+                Description: 'Open a pinned item on the Home screen by the name it shows (exact or partial match). A pinned dashboard opens inside Home; other pins open as before.',
                 ParameterSchema: { type: 'object', properties: { pinName: { type: 'string' } }, required: ['pinName'] },
                 Handler: async (params) => this.toolOpenPin(params),
             },
             {
                 Name: 'SearchPins',
-                Description: 'Find pinned items on the Home screen whose display name matches a query (case-insensitive contains). Read-only — returns the matching pin names; does not open anything.',
+                Description: 'Find pinned items on the Home screen whose name, as the pin shows it, matches a query (case-insensitive contains). Read-only — returns the matching pin names; does not open anything.',
                 ParameterSchema: { type: 'object', properties: { query: { type: 'string' } }, required: ['query'] },
                 Handler: async (params) => this.toolSearchPins(params),
             },
@@ -1676,23 +1705,21 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             },
             {
                 Name: 'ToggleSidebar',
-                Description: 'Toggle the Home sidebar (unread notifications, favorites, and recent items).',
+                Description: `Toggle the Home sidebar (unread notifications, favorites, and recent items). Quick Access shows on the ${HOME_OVERVIEW_NAME} overview only: while Home shows a dashboard, use SwitchHomeDashboard with "${HOME_OVERVIEW_NAME}" first.`,
                 ParameterSchema: { type: 'object', properties: {} },
-                Handler: async () => {
-                    this.ToggleSidebar();
-                    this.publishAgentContext();
-                    return { Success: true, Data: { SidebarOpen: this.SidebarOpen } };
-                },
+                Handler: async () => this.toolToggleSidebar(),
             },
             {
                 Name: 'TogglePinEditMode',
-                Description: 'Toggle pin edit mode on the Home screen (lets the user rename/reorder pins). This only changes the UI mode — it does not modify any pins.',
+                Description: `Toggle pin edit mode on the Home overview (lets the user rename/reorder pins). This only changes the UI mode — it does not modify any pins. Pin edit mode shows on the ${HOME_OVERVIEW_NAME} overview only: while Home shows a dashboard, use SwitchHomeDashboard with "${HOME_OVERVIEW_NAME}" first.`,
                 ParameterSchema: { type: 'object', properties: {} },
-                Handler: async () => {
-                    this.ToggleEditMode();
-                    this.publishAgentContext();
-                    return { Success: true, Data: { EditMode: this.EditMode } };
-                },
+                Handler: async () => this.toolTogglePinEditMode(),
+            },
+            {
+                Name: 'SwitchHomeDashboard',
+                Description: `Show a pinned dashboard inside Home by its name (exact or partial match) or id, or "${HOME_OVERVIEW_NAME}" to return to the Home overview. Navigation only — it does not pin, unpin, rename or edit dashboards. When the open dashboard has unsaved changes, the user is asked first.`,
+                ParameterSchema: { type: 'object', properties: { dashboard: { type: 'string' } }, required: ['dashboard'] },
+                Handler: async (params) => this.toolSwitchHomeDashboard(params),
             },
         ]);
     }
@@ -1718,12 +1745,15 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         await this.OnAppClick(app);
         return { Success: true, Data: { AppName: app.Name } };
     }
-    /** The pinned items narrowed to the resolver's structural shape (Name == DisplayName). */
+    /** The pinned items with the names they show, for the resolver. */
     get pinNamedRecords() {
-        return this.PinnedItems.map(p => ({ Name: p.DisplayName }));
+        return this.PinnedItems.map(pin => ({ Name: this.PinName(pin), Pin: pin }));
     }
-    /** Resolve a pinned item by display name (exact then partial, case-insensitive) and open it. */
-    toolOpenPin(params) {
+    /**
+     * Resolve a pinned item by the name it shows (exact then partial, case-insensitive) and open it. A pinned dashboard
+     * opens inside Home. Focus stays where it is unless the change removed it (see refocusIfRemoved).
+     */
+    async toolOpenPin(params) {
         const parsed = ValidateStringParam(params['pinName'], 'pinName');
         if (!parsed.ok) {
             return parsed.result;
@@ -1732,32 +1762,35 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         if (!pinName) {
             return { Success: false, ErrorMessage: 'pinName is required.' };
         }
-        const match = ResolveNamedRecord(pinName, this.pinNamedRecords);
+        const records = this.pinNamedRecords;
+        const match = ResolveNamedRecord(pinName, records);
         if (!match) {
-            return { Success: false, ErrorMessage: BuildHomeNotFoundError(pinName, 'pinned item', this.pinNamedRecords) };
+            return { Success: false, ErrorMessage: BuildHomeNotFoundError(pinName, 'pinned item', records) };
         }
-        const pin = this.PinnedItems.find(p => p.DisplayName === match.Name);
-        if (!pin) {
-            return { Success: false, ErrorMessage: BuildHomeNotFoundError(pinName, 'pinned item', this.pinNamedRecords) };
+        const opened = await this.switchViewForAgent(() => this.leaveEditModeAndOpenPin(match.Pin));
+        if (!opened) {
+            return { Success: false, ErrorMessage: `"${match.Name}" did not open. The pin may be broken, or the user kept editing the open dashboard.` };
         }
-        // OnPinClick is a no-op while in edit mode; clear edit mode so the open succeeds.
+        return { Success: true, Data: { PinName: match.Name } };
+    }
+    /** Opens a pin for the agent. A pin does not open in edit mode: Home leaves it first, as Done does, and tells the agent. */
+    leaveEditModeAndOpenPin(pin) {
         if (this.EditMode) {
-            this.EditMode = false;
+            this.ToggleEditMode();
+            this.publishAgentContext();
         }
-        this.OnPinClick(pin);
-        return { Success: true, Data: { PinName: pin.DisplayName } };
+        return this.openPin(pin);
     }
-    /** Find pinned items whose display name matches a query (read-only — returns matches). */
+    /** Find pinned items whose shown name matches a query (read-only — returns matches). */
     toolSearchPins(params) {
         const parsed = ValidateStringParam(params['query'], 'query');
         if (!parsed.ok) {
             return parsed.result;
         }
         const query = parsed.value.trim().toLowerCase();
-        const matches = query
-            ? this.PinnedItems.filter(p => p.DisplayName.toLowerCase().includes(query))
-            : [...this.PinnedItems];
-        return { Success: true, Data: { Matches: matches.map(p => p.DisplayName), MatchCount: matches.length } };
+        const names = this.PinnedItems.map(p => this.PinName(p));
+        const matches = query ? names.filter(name => name.toLowerCase().includes(query)) : names;
+        return { Success: true, Data: { Matches: matches, MatchCount: matches.length } };
     }
     /** Resolve a recent item by display name (exact then partial) and navigate to it. */
     toolOpenRecent(params) {
@@ -1785,6 +1818,60 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.OnRecentClick(item);
         return { Success: true, Data: { Name: match.Name, ResourceType: item.resourceType } };
     }
+    /**
+     * Shows a pinned dashboard in Home by id (any letter case) or name (exact, then partial), or the overview for
+     * "Home". It uses the methods a switcher pick uses, so the user is asked first about unsaved changes. Unlike a pick,
+     * it moves focus only when the switch removed it (see refocusIfRemoved).
+     */
+    async toolSwitchHomeDashboard(params) {
+        const parsed = ValidateStringParam(params['dashboard'], 'dashboard');
+        if (!parsed.ok) {
+            return parsed.result;
+        }
+        const reference = parsed.value.trim();
+        if (!reference) {
+            return { Success: false, ErrorMessage: 'dashboard is required.' };
+        }
+        if (reference.toLowerCase() === HOME_OVERVIEW_NAME.toLowerCase()) {
+            return (await this.switchViewForAgent(() => this.GoHome()))
+                ? { Success: true, Data: { HomeView: 'Overview' } }
+                : { Success: false, ErrorMessage: `The ${HOME_OVERVIEW_NAME} overview did not open. The user kept editing the open dashboard.` };
+        }
+        const target = ResolvePinnedDashboardReference(reference, this.PinnedDashboards);
+        if (!target) {
+            const candidates = [{ Name: HOME_OVERVIEW_NAME }, ...this.PinnedDashboards.map(d => ({ Name: d.Name }))];
+            return { Success: false, ErrorMessage: BuildHomeNotFoundError(reference, 'pinned dashboard', candidates) };
+        }
+        // The switcher's list can trail the dashboard cache by a moment
+        if (!this.findHomeDashboard(target.ID)) {
+            return { Success: false, ErrorMessage: `"${target.Name}" did not open. The dashboard is not available.` };
+        }
+        if (!(await this.switchViewForAgent(() => this.OpenDashboardInHome(target.ID)))) {
+            return { Success: false, ErrorMessage: `"${target.Name}" did not open. The user kept editing the open dashboard.` };
+        }
+        return { Success: true, Data: { CurrentDashboardName: target.Name } };
+    }
+    /** Opens or closes Quick Access. While a dashboard shows, where Quick Access does not show, it changes nothing. */
+    toolToggleSidebar() {
+        if (this.CurrentDashboardId) {
+            return { Success: false, ErrorMessage: overviewOnlyError('Quick Access') };
+        }
+        this.ToggleSidebar();
+        this.publishAgentContext();
+        return { Success: true, Data: { SidebarOpen: this.SidebarOpen } };
+    }
+    /**
+     * Turns pin edit mode on or off. While a dashboard shows, where the pins do not show, it changes nothing: it neither
+     * opens a collapsed Pinned section nor saves that.
+     */
+    toolTogglePinEditMode() {
+        if (this.CurrentDashboardId) {
+            return { Success: false, ErrorMessage: overviewOnlyError('Pin edit mode') };
+        }
+        this.ToggleEditMode();
+        this.publishAgentContext();
+        return { Success: true, Data: { EditMode: this.EditMode } };
+    }
     /** Open the Add Pin panel (if needed) and apply a search query. */
     async toolSearchAddPinPanel(params) {
         const parsed = ValidateStringParam(params['query'], 'query');
@@ -1826,6 +1913,10 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     get greeting() {
         return this.Greeting;
     }
+    /** The first name the greeting uses, or the user's display name. */
+    get GreetingName() {
+        return this.CurrentUser?.FirstName || this.CurrentUser?.Name || 'User';
+    }
     /**
      * Get formatted date string
      */
@@ -1889,7 +1980,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             }));
             return {
                 app,
-                color: app.GetColor() || '#1976d2',
+                color: app.GetColor() || 'var(--mj-brand-primary)',
                 icon: app.Icon || 'fa-solid fa-cube',
                 navItemsCount,
                 navItemsPreview,
@@ -2019,10 +2110,10 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         // Navigate based on entity type using NavigationService
         const entityName = favorite.Entity?.toLowerCase();
         const recordId = favorite.RecordID;
-        if (entityName === 'dashboards') {
-            this.navigationService.OpenDashboard(recordId, 'Dashboard');
+        if (IsDashboardEntity(favorite.Entity)) {
+            this.openDashboard(recordId, 'Dashboard');
         }
-        else if (entityName === 'user views') {
+        else if (ResourceTypeForEntity(favorite.Entity) === 'view') {
             this.navigationService.OpenView(recordId, 'View');
         }
         else if (entityName?.includes('artifact')) {
@@ -2051,7 +2142,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
                 this.navigationService.OpenView(item.recordId, name || 'View');
                 break;
             case 'dashboard':
-                this.navigationService.OpenDashboard(item.recordId, name || 'Dashboard');
+                this.openDashboard(item.recordId, name || 'Dashboard');
                 break;
             case 'artifact':
                 this.navigationService.OpenArtifact(item.recordId, name || 'Artifact');
@@ -2065,118 +2156,534 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
             }
         }
     }
-    /** @deprecated Use {@link OnRecentClick}. */
-    onRecentClick(item) {
-        return this.OnRecentClick(item);
+    /** @deprecated Use {@link OnRecentClick}. */
+    onRecentClick(item) {
+        return this.OnRecentClick(item);
+    }
+    /**
+     * Navigate to a notification using NavigationService
+     */
+    OnNotificationClick(notification) {
+        // Navigate to the notifications view using NavigationService
+        this.navigationService.OpenDynamicView('MJ: User Notifications');
+    }
+    /** @deprecated Use {@link OnNotificationClick}. */
+    onNotificationClick(notification) {
+        return this.OnNotificationClick(notification);
+    }
+    /**
+     * Get icon for an entity by name, using entity metadata Icon field (cached)
+     */
+    GetEntityIconByName(entityName) {
+        if (!entityName)
+            return 'fa-solid fa-file';
+        const cached = this.resourceIconCache.get(entityName);
+        if (cached)
+            return cached;
+        const entityInfo = this.metadata.Entities.find(e => e.Name === entityName);
+        const icon = entityInfo ? this.resolveEntityIcon(entityInfo.Icon) : 'fa-solid fa-file';
+        this.resourceIconCache.set(entityName, icon);
+        return icon;
+    }
+    /** @deprecated Use {@link GetEntityIconByName}. */
+    getEntityIconByName(entityName) {
+        return this.GetEntityIconByName(entityName);
+    }
+    /**
+     * Resolve an entity's Icon field to a full Font Awesome class string
+     */
+    resolveEntityIcon(icon) {
+        if (!icon)
+            return 'fa-solid fa-table';
+        // Already has a style prefix
+        if (icon.startsWith('fa-solid') || icon.startsWith('fa-regular') ||
+            icon.startsWith('fa-light') || icon.startsWith('fa-brands') ||
+            icon.startsWith('fa ')) {
+            return icon;
+        }
+        // Has fa- prefix but no style
+        if (icon.startsWith('fa-')) {
+            return `fa-solid ${icon}`;
+        }
+        // Just an icon name like "table" or "users"
+        return `fa-solid fa-${icon}`;
+    }
+    /**
+     * Format a date for display (pure function, safe to call in template)
+     */
+    formatDate(date) {
+        if (!date)
+            return '';
+        const now = new Date();
+        const diff = now.getTime() - new Date(date).getTime();
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        if (days === 0)
+            return 'Today';
+        if (days === 1)
+            return 'Yesterday';
+        if (days < 7)
+            return `${days} days ago`;
+        return new Date(date).toLocaleDateString();
+    }
+    /**
+     * Track function for favorites
+     */
+    TrackByFavorite(_index, item) {
+        return item.ID;
+    }
+    /** @deprecated Use {@link TrackByFavorite}. */
+    trackByFavorite(_index, item) {
+        return this.TrackByFavorite(_index, item);
+    }
+    /**
+     * Remove duplicate recent items (same entity + recordId). Keeps the first occurrence.
+     */
+    deduplicateRecents(items) {
+        const seen = new Set();
+        return items.filter(item => {
+            const key = `${item.entityName}-${item.recordId}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
+    /**
+     * Track function for recent items
+     */
+    TrackByRecent(_index, item) {
+        return `${item.entityName}-${item.recordId}`;
+    }
+    /** @deprecated Use {@link TrackByRecent}. */
+    trackByRecent(_index, item) {
+        return this.TrackByRecent(_index, item);
+    }
+    /**
+     * Track function for notifications
+     */
+    TrackByNotification(_index, item) {
+        return item.ID;
+    }
+    /** @deprecated Use {@link TrackByNotification}. */
+    trackByNotification(_index, item) {
+        return this.TrackByNotification(_index, item);
+    }
+    // =============================================
+    // DASHBOARDS APP AND CACHE
+    // =============================================
+    /**
+     * The Dashboards part of Home's first load: the automatic Dashboards app install (at most once
+     * per user) and the dashboard cache. Home stays on its loading view until both finish, so the
+     * app-list reload that an install causes does not show a second loading view. Each install step
+     * gives up after DASHBOARDS_APP_INSTALL_STEP_TIMEOUT_MS. The cache load has no time limit: Home
+     * shows its loading view until the server answers or the load fails. Never rejects.
+     */
+    async loadDashboards() {
+        await Promise.allSettled([AutoInstallDashboardsApp(this.appManager), this.loadDashboardCache()]);
+    }
+    /**
+     * Loads the dashboard cache if it is not loaded yet, then reads the switcher's list and the dashboard pin names
+     * from it and shows the dashboard the URL asks for (one Home cannot show is removed from the URL). A failed load is
+     * only logged. Never rejects.
+     */
+    async loadDashboardCache() {
+        try {
+            await DashboardEngine.Instance.Config(false, this.ProviderToUse.CurrentUser, this.ProviderToUse);
+        }
+        catch (error) {
+            LogError(`Home: could not load the dashboards: ${errorMessage(error)}`);
+        }
+        this.dashboardCacheLoaded = true;
+        this.refreshPinnedDashboards();
+        this.applyRequestedDashboard(true);
+    }
+    /** Reloads the dashboard cache, so a dashboard saved a moment ago is in it. A failure is only logged. */
+    async reloadDashboardCache() {
+        try {
+            await DashboardEngine.Instance.Config(true, this.ProviderToUse.CurrentUser, this.ProviderToUse);
+        }
+        catch (error) {
+            LogError(`Home: could not reload the dashboards: ${errorMessage(error)}`);
+        }
+    }
+    /** The dashboards the user can open, from the dashboard cache; none when the user cannot read the cache. */
+    accessibleDashboards() {
+        const engine = DashboardEngine.Instance;
+        return engine.IsPermissionConstrained ? [] : engine.GetAccessibleDashboards(this.ProviderToUse.CurrentUser.ID);
+    }
+    /** Re-reads the switcher's list and the names dashboard pins show, and keeps the open dashboard in step with the cache. */
+    refreshPinnedDashboards() {
+        const dashboards = this.accessibleDashboards();
+        this.PinnedDashboards = BuildPinnedDashboards(this.PinnedItems, dashboards);
+        this.pinDashboardNames = BuildPinDashboardNames(this.PinnedItems, dashboards);
+        this.syncCurrentDashboard(dashboards);
+        this.publishAgentContext();
+        this.cdr.markForCheck();
+    }
+    /**
+     * Opens a dashboard in place of the preview tab, which is usually the tab that shows Home, so Back
+     * returns to Home. A Shift-click opens it in a separate tab.
+     */
+    openDashboard(dashboardId, dashboardName) {
+        this.navigationService.OpenDashboard(dashboardId, dashboardName);
+    }
+    /**
+     * Follows a link from a panel of the dashboard Home shows: a record, a dashboard or a query, as the
+     * dashboard tab does. Other link types are only logged.
+     */
+    OnDashboardNavigationRequested(event) {
+        const request = event.request;
+        switch (request.type) {
+            case 'OpenEntityRecord': {
+                const key = CompositeKey.FromURLSegment(this.ProviderToUse.EntityByName(request.entityName), request.recordId);
+                this.navigationService.OpenEntityRecord(request.entityName, key);
+                break;
+            }
+            case 'OpenDashboard':
+                this.openDashboard(request.dashboardId, this.cachedDashboardName(request.dashboardId));
+                break;
+            case 'OpenQuery':
+                this.navigationService.OpenQuery(request.queryId, 'Query');
+                break;
+            default:
+                console.warn(`[Home] A dashboard panel asked for a link type that Home does not open: ${request.type}`);
+        }
+    }
+    /** The dashboard's name from the dashboard cache, or 'Dashboard' when the cache does not have it. */
+    cachedDashboardName(dashboardId) {
+        const engine = DashboardEngine.Instance;
+        if (engine.IsPermissionConstrained) {
+            return 'Dashboard';
+        }
+        return engine.Dashboards.find(d => UUIDsEqual(d.ID, dashboardId))?.Name ?? 'Dashboard';
+    }
+    // =============================================
+    // DASHBOARD VIEW
+    // =============================================
+    /**
+     * Shows a dashboard inside Home in place of the overview and writes it to the URL (?dashboard=<id>). Only a Config
+     * dashboard the user can open shows in Home. Asks first when the open dashboard has unsaved changes. Returns false
+     * when the dashboard did not open.
+     */
+    async OpenDashboardInHome(dashboardId, startInEditMode = false) {
+        const dashboard = this.findHomeDashboard(dashboardId);
+        if (!dashboard)
+            return false;
+        if (UUIDsEqual(dashboard.ID, this.CurrentDashboardId))
+            return true;
+        if (!(await this.confirmLeaveDashboard()))
+            return false;
+        // Another open of the same dashboard (a double click) finished meanwhile
+        if (UUIDsEqual(dashboard.ID, this.CurrentDashboardId))
+            return true;
+        this.requestedDashboardId = dashboard.ID;
+        this.setCurrentDashboard(dashboard, startInEditMode);
+        this.UpdateQueryParams({ [DASHBOARD_QUERY_PARAM]: dashboard.ID });
+        void this.recentAccessService.LogAccess('MJ: Dashboards', dashboard.ID, 'dashboard');
+        return true;
+    }
+    /**
+     * Returns to the overview (switcher Home, breadcrumb Home) and removes the dashboard from the URL. Asks first when
+     * the open dashboard has unsaved changes. Returns false when the user keeps editing.
+     */
+    async GoHome() {
+        if (!this.CurrentDashboardId)
+            return true;
+        if (!(await this.confirmLeaveDashboard()))
+            return false;
+        this.closeDashboardView();
+        return true;
+    }
+    /**
+     * A pick in a Dashboards switcher, or the breadcrumb's Home: null returns to the overview, an id opens that
+     * dashboard in Home. Focus then moves to what shows.
+     */
+    OnSwitcherPick(dashboardId) {
+        void this.followSwitcherPick(dashboardId);
+    }
+    /**
+     * Manage pins (switcher): the overview with the pins in edit mode, and focus on the Pinned header. When the user
+     * keeps editing the open dashboard, Home stays on it and focus goes to its title.
+     */
+    async ManagePins() {
+        const home = await this.GoHome();
+        if (home && !this.EditMode) {
+            this.ToggleEditMode();
+        }
+        this.focusShownView();
+    }
+    /** The switcher's New dashboard: asks to leave unsaved changes first, then asks for the name. */
+    async OpenNewDashboardDialog() {
+        if (!(await this.confirmLeaveDashboard()))
+            return;
+        this.NewDashboardNameMaxLength = DashboardNameMaxLength(this.ProviderToUse);
+        this.ShowNewDashboardDialog = true;
+        this.cdr.markForCheck();
+    }
+    /** Closes the name dialog; nothing is created. */
+    OnNewDashboardCancelled() {
+        this.ShowNewDashboardDialog = false;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Creates the named dashboard, pins it to Home and shows it in Home in edit mode. When the save fails, the
+     * dialog stays open with the name and the user is told. A second Create while one runs is ignored.
+     */
+    async OnNewDashboardNamed(name) {
+        if (this.IsCreatingDashboard)
+            return;
+        this.IsCreatingDashboard = true;
+        this.cdr.markForCheck();
+        try {
+            const dashboard = await CreateBlankDashboard(this.ProviderToUse, name);
+            if (!dashboard) {
+                MJNotificationService.Instance.CreateSimpleNotification('Could not create the dashboard', 'error', 3000);
+                return;
+            }
+            await this.reloadDashboardCache();
+            this.pinService.AddPin(BuildDashboardPinInput(dashboard));
+            this.ShowNewDashboardDialog = false;
+            if (!(await this.OpenDashboardInHome(dashboard.ID, true))) {
+                this.openDashboard(dashboard.ID, dashboard.Name);
+            }
+        }
+        catch (error) {
+            LogError(`Home: could not open the new dashboard: ${errorMessage(error)}`);
+            MJNotificationService.Instance.CreateSimpleNotification('Could not open the new dashboard', 'error', 3000);
+        }
+        finally {
+            this.IsCreatingDashboard = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Opens the dashboard in a tab of the Dashboards app, installing the app first when the user lacks it. */
+    async OpenDashboardInDashboardsApp(dashboard) {
+        const app = await EnsureDashboardsApp(this.appManager);
+        this.navigationService.OpenDashboard(dashboard.ID, dashboard.Name, app ? { applicationId: app.ID } : undefined);
     }
     /**
-     * Navigate to a notification using NavigationService
+     * The editor entered or left edit mode. The editor can report leaving it while Home renders (it drops an edit when
+     * it gets another dashboard), so this sets no state the template reads, and tells the agent after the render.
      */
-    OnNotificationClick(notification) {
-        // Navigate to the notifications view using NavigationService
-        this.navigationService.OpenDynamicView('MJ: User Notifications');
-    }
-    /** @deprecated Use {@link OnNotificationClick}. */
-    onNotificationClick(notification) {
-        return this.OnNotificationClick(notification);
+    OnDashboardEditingChange(editing) {
+        this.IsDashboardEditing = editing;
+        queueMicrotask(() => this.publishAgentContext());
     }
     /**
-     * Get icon for an entity by name, using entity metadata Icon field (cached)
+     * The editor saved the dashboard, or its saved name changed: the switcher and the pin names read the new name from
+     * the cache.
      */
-    GetEntityIconByName(entityName) {
-        if (!entityName)
-            return 'fa-solid fa-file';
-        const cached = this.resourceIconCache.get(entityName);
-        if (cached)
-            return cached;
-        const entityInfo = this.metadata.Entities.find(e => e.Name === entityName);
-        const icon = entityInfo ? this.resolveEntityIcon(entityInfo.Icon) : 'fa-solid fa-file';
-        this.resourceIconCache.set(entityName, icon);
-        return icon;
+    OnDashboardSaved() {
+        this.refreshPinnedDashboards();
+    }
+    /** The editor has shown a dashboard. Its title gets focus when Home asked for that (see focusTitleOnLoad). */
+    OnDashboardViewLoaded(dashboard) {
+        if (this.focusTitleOnLoad && UUIDsEqual(dashboard.ID, this.focusTitleOnLoad)) {
+            this.focusTitleOnLoad = null;
+            this.focusInHome(DASHBOARD_TITLE_SELECTOR);
+        }
     }
-    /** @deprecated Use {@link GetEntityIconByName}. */
-    getEntityIconByName(entityName) {
-        return this.GetEntityIconByName(entityName);
+    /**
+     * The editor could not show the dashboard: Home returns to its overview and tells the user. A dashboard that a URL
+     * change named stays in the URL, since a write would add a history entry that every later Back lands on again. Any
+     * other dashboard is removed from the URL: one the user opened in Home, or the one Home opened with on its first load,
+     * so the tab does not keep it.
+     */
+    OnDashboardViewLoadFailed() {
+        const namedByUrl = this.urlShownDashboardId !== null && UUIDsEqual(this.urlShownDashboardId, this.CurrentDashboardId);
+        this.closeDashboardView(DASHBOARD_NOT_AVAILABLE, !namedByUrl);
+    }
+    /** Applies the dashboard the URL names, for back and forward, deep links and pins of Home. */
+    OnQueryParamsChanged(params, _source) {
+        const requested = params[DASHBOARD_QUERY_PARAM]?.trim() || null;
+        if (UUIDsEqual(requested, this.requestedDashboardId))
+            return;
+        if (this.hasUnsavedDashboardChanges()) {
+            void this.followDashboardParamAfterConfirm(requested);
+            return;
+        }
+        this.requestedDashboardId = requested;
+        this.applyRequestedDashboard(false);
     }
     /**
-     * Resolve an entity's Icon field to a full Font Awesome class string
+     * Asks before a URL change leaves unsaved changes. When the user keeps editing, writes the open dashboard back to the
+     * URL.
      */
-    resolveEntityIcon(icon) {
-        if (!icon)
-            return 'fa-solid fa-table';
-        // Already has a style prefix
-        if (icon.startsWith('fa-solid') || icon.startsWith('fa-regular') ||
-            icon.startsWith('fa-light') || icon.startsWith('fa-brands') ||
-            icon.startsWith('fa ')) {
-            return icon;
+    async followDashboardParamAfterConfirm(requested) {
+        if (!(await this.confirmLeaveDashboard())) {
+            this.UpdateQueryParams({ [DASHBOARD_QUERY_PARAM]: this.CurrentDashboardId });
+            return;
         }
-        // Has fa- prefix but no style
-        if (icon.startsWith('fa-')) {
-            return `fa-solid ${icon}`;
+        this.requestedDashboardId = requested;
+        this.applyRequestedDashboard(false);
+    }
+    /**
+     * Shows the dashboard the URL asks for, once the dashboard cache has loaded: the dashboard view for a Config
+     * dashboard the user can open, else the overview. For a dashboard Home cannot show, the user is told, and
+     * `removeFromUrl` removes it from the URL. After a URL change (back, forward, a deep link into the open tab) the URL
+     * stays as it is: a write then would add a history entry that every later Back lands on again. After a URL change,
+     * Home also notes that the URL named the dashboard it shows (see OnDashboardViewLoadFailed).
+     */
+    applyRequestedDashboard(removeFromUrl) {
+        if (!this.dashboardCacheLoaded)
+            return;
+        const requested = this.requestedDashboardId;
+        const dashboard = requested ? this.findHomeDashboard(requested) : null;
+        if (requested && !dashboard) {
+            this.closeDashboardView(DASHBOARD_NOT_AVAILABLE, removeFromUrl);
+            return;
         }
-        // Just an icon name like "table" or "users"
-        return `fa-solid fa-${icon}`;
+        this.setCurrentDashboard(dashboard, false);
+        this.urlShownDashboardId = removeFromUrl ? null : dashboard?.ID ?? null;
     }
     /**
-     * Format a date for display (pure function, safe to call in template)
+     * Keeps the open dashboard in step with the cache: one that is gone, or that the user can no longer open, returns
+     * Home to the overview.
      */
-    formatDate(date) {
-        if (!date)
-            return '';
-        const now = new Date();
-        const diff = now.getTime() - new Date(date).getTime();
-        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-        if (days === 0)
-            return 'Today';
-        if (days === 1)
-            return 'Yesterday';
-        if (days < 7)
-            return `${days} days ago`;
-        return new Date(date).toLocaleDateString();
+    syncCurrentDashboard(dashboards) {
+        if (!this.dashboardCacheLoaded || !this.CurrentDashboardId || FindDashboard(dashboards, this.CurrentDashboardId))
+            return;
+        this.closeDashboardView('The dashboard is no longer available');
     }
     /**
-     * Track function for favorites
+     * Returns Home to its overview and, with a notice, tells the user. `removeFromUrl` also removes the dashboard from
+     * the URL; that write runs after the current call stack, and only when no dashboard shows by then.
      */
-    TrackByFavorite(_index, item) {
-        return item.ID;
+    closeDashboardView(notice, removeFromUrl = true) {
+        this.requestedDashboardId = null;
+        this.setCurrentDashboard(null, false);
+        if (removeFromUrl) {
+            queueMicrotask(() => {
+                if (!this.CurrentDashboardId) {
+                    this.UpdateQueryParams({ [DASHBOARD_QUERY_PARAM]: null });
+                }
+            });
+        }
+        if (notice) {
+            MJNotificationService.Instance.CreateSimpleNotification(notice, 'warning', 3000);
+        }
     }
-    /** @deprecated Use {@link TrackByFavorite}. */
-    trackByFavorite(_index, item) {
-        return this.TrackByFavorite(_index, item);
+    /**
+     * Shows `dashboard` (or the overview for null). Home keeps the object it was given for the same dashboard: the
+     * editor follows the dashboard cache itself after a save, so a new copy of the same dashboard is not pushed to it.
+     */
+    setCurrentDashboard(dashboard, startInEditMode) {
+        if (UUIDsEqual(dashboard?.ID, this.CurrentDashboardId))
+            return;
+        this.CurrentDashboard = dashboard;
+        this.CurrentDashboardId = dashboard?.ID ?? null;
+        this.DashboardStartsInEditMode = dashboard !== null && startInEditMode;
+        this.IsDashboardEditing = false;
+        this.focusTitleOnLoad = null;
+        this.urlShownDashboardId = null;
+        this.EditingPinId = null;
+        this.SidebarOpen = false;
+        this.HidePinMenu();
+        this.publishAgentContext();
+        this.cdr.markForCheck();
+    }
+    /** A Config dashboard the user can open, by id (any letter case), or null. */
+    findHomeDashboard(dashboardId) {
+        const dashboard = FindDashboard(this.accessibleDashboards(), dashboardId);
+        return dashboard && CanShowInHome(dashboard) ? dashboard : null;
+    }
+    /** True while the open dashboard is in edit mode with changes the editor has not saved. */
+    hasUnsavedDashboardChanges() {
+        return this.IsDashboardEditing && (this.dashboardEditor?.HasUnsavedChanges ?? false);
     }
     /**
-     * Remove duplicate recent items (same entity + recordId). Keeps the first occurrence.
+     * True when Home may leave the open dashboard: it is not being edited, its changes are saved, or the user chose to
+     * discard them (the editor then cancels its edit). False when the user keeps editing.
      */
-    deduplicateRecents(items) {
-        const seen = new Set();
-        return items.filter(item => {
-            const key = `${item.entityName}-${item.recordId}`;
-            if (seen.has(key)) {
-                return false;
-            }
-            seen.add(key);
+    async confirmLeaveDashboard() {
+        const editor = this.dashboardEditor;
+        if (!editor || !this.IsDashboardEditing)
             return true;
+        if (editor.HasUnsavedChanges && !(await this.confirmDiscardDashboardChanges()))
+            return false;
+        editor.CancelEdit();
+        return true;
+    }
+    /**
+     * Asks whether to discard the open dashboard's unsaved changes. Resolves true for Discard changes, false for Keep
+     * editing.
+     */
+    confirmDiscardDashboardChanges() {
+        return this.confirmService.Confirm({
+            title: 'Discard changes?',
+            message: `Leave "${this.CurrentDashboardName}" without saving?`,
+            detail: 'Your changes to this dashboard will be lost.',
+            type: 'warning',
+            confirmText: 'Discard changes',
+            cancelText: 'Keep editing',
         });
     }
     /**
-     * Track function for recent items
+     * Follows a switcher pick, then moves focus to what shows: a dashboard Home switched to gets focus on its title once
+     * the editor has shown it; otherwise focus goes to the open dashboard's title, or to the Pinned header.
      */
-    TrackByRecent(_index, item) {
-        return `${item.entityName}-${item.recordId}`;
+    async followSwitcherPick(dashboardId) {
+        const switching = dashboardId !== null && !UUIDsEqual(dashboardId, this.CurrentDashboardId);
+        const moved = dashboardId ? await this.OpenDashboardInHome(dashboardId) : await this.GoHome();
+        if (moved && switching) {
+            this.focusTitleOnLoad = this.CurrentDashboardId;
+        }
+        else {
+            this.focusShownView();
+        }
     }
-    /** @deprecated Use {@link TrackByRecent}. */
-    trackByRecent(_index, item) {
-        return this.TrackByRecent(_index, item);
+    /** Runs an agent's change of Home's view, then moves focus when the change removed it (see refocusIfRemoved). */
+    async switchViewForAgent(switchView) {
+        const focused = this.focusedElementInHome();
+        const switched = await switchView();
+        this.refocusIfRemoved(focused);
+        return switched;
+    }
+    /** The element in Home that has focus, or null when focus is outside Home. */
+    focusedElementInHome() {
+        const focused = document.activeElement;
+        return focused instanceof HTMLElement && this.hostElement.nativeElement.contains(focused) ? focused : null;
     }
     /**
-     * Track function for notifications
+     * After an agent changed Home's view: renders Home, and when `focused` is gone (the change removed the part of Home it
+     * was in), moves focus as a switcher pick does, to the title of the dashboard Home shows once the editor has shown it,
+     * or on the overview to the Pinned header. Focus that is still on the page stays where it is.
      */
-    TrackByNotification(_index, item) {
-        return item.ID;
+    refocusIfRemoved(focused) {
+        if (!focused)
+            return;
+        SafeDetectChanges(this.cdr);
+        if (focused.isConnected)
+            return;
+        if (this.CurrentDashboardId) {
+            this.focusTitleOnLoad = this.CurrentDashboardId;
+        }
+        else {
+            this.focusShownView();
+        }
     }
-    /** @deprecated Use {@link TrackByNotification}. */
-    trackByNotification(_index, item) {
-        return this.TrackByNotification(_index, item);
+    /**
+     * Moves focus to the open dashboard's title, or on the overview to the Pinned header: its Dashboards button, or Done
+     * while the pins are in edit mode.
+     */
+    focusShownView() {
+        if (this.CurrentDashboardId) {
+            this.focusInHome(DASHBOARD_TITLE_SELECTOR);
+        }
+        else {
+            this.focusInHome(this.EditMode ? '.pinned-actions > button' : '.pinned-actions .switcher-button');
+        }
+    }
+    /**
+     * Renders Home, then focuses the first element in it that matches `selector`, and returns that element. Returns null,
+     * and focuses nothing, when none shows.
+     */
+    focusInHome(selector) {
+        SafeDetectChanges(this.cdr);
+        const element = this.hostElement.nativeElement.querySelector(selector);
+        element?.focus();
+        return element;
     }
     // =============================================
     // PIN NAME RESOLUTION
@@ -2189,7 +2696,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         // Find pins that need name resolution: records with raw ID titles,
         // or any pin whose DisplayName contains "ID|" (raw composite key)
         const pinsNeedingNames = this.PinnedItems.filter(pin => {
-            const rt = this.resolveStoredResourceType(pin);
+            const rt = ResolvePinResourceType(pin);
             if (rt !== 'Records')
                 return false;
             // Check if the name looks like a raw ID format
@@ -2232,7 +2739,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
      * Resolve missing icons for Custom (app nav item) pins by looking up nav items.
      */
     async resolveCustomPinIcons() {
-        const pinsNeedingIcons = this.PinnedItems.filter(pin => this.resolveStoredResourceType(pin) === 'Custom' && !pin.Icon);
+        const pinsNeedingIcons = this.PinnedItems.filter(pin => ResolvePinResourceType(pin) === 'Custom' && !pin.Icon);
         if (pinsNeedingIcons.length === 0)
             return;
         for (const pin of pinsNeedingIcons) {
@@ -2254,145 +2761,144 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     // PIN MANAGEMENT
     // =============================================
     /**
-     * Navigate to a pinned resource
+     * Opens a pinned resource. A click in edit mode does nothing. A dashboard the click shows in Home gets focus on its
+     * title once the editor has shown it.
      */
     OnPinClick(pin) {
+        void this.openPinForUser(pin);
+    }
+    /** Opens a pin the user clicked. When it shows a dashboard in Home, that dashboard's title gets focus once the editor has shown it. */
+    async openPinForUser(pin) {
+        const shown = this.CurrentDashboardId;
+        if ((await this.openPin(pin)) && this.CurrentDashboardId && !UUIDsEqual(this.CurrentDashboardId, shown)) {
+            this.focusTitleOnLoad = this.CurrentDashboardId;
+        }
+    }
+    /**
+     * Opens a pin: a dashboard pin as openDashboardPin describes, other pins as Home always has. Returns false when
+     * nothing opened: in edit mode, for a broken pin, or when the user kept editing the open dashboard.
+     */
+    async openPin(pin) {
         if (this.EditMode)
-            return;
+            return false;
+        const resourceType = ResolvePinResourceType(pin);
+        return resourceType === 'Dashboards' ? this.openDashboardPin(pin) : this.openResourcePin(pin, resourceType);
+    }
+    /**
+     * Opens a dashboard pin: a Config dashboard the user can open shows inside Home; a Code dashboard, or one the cache
+     * does not have, opens in a tab under the name the pin shows. Returns false when nothing opened.
+     */
+    async openDashboardPin(pin) {
+        const dashboardId = DashboardIdOfPin(pin);
+        if (!dashboardId) {
+            console.warn('[Pin Click] Dashboards pin missing dashboardId and recordId', pin.Configuration);
+            return false;
+        }
+        if (this.findHomeDashboard(dashboardId)) {
+            return this.OpenDashboardInHome(dashboardId);
+        }
+        this.openDashboard(dashboardId, this.PinName(pin));
+        return true;
+    }
+    /**
+     * Opens a pin that is not a dashboard pin: a view, a query, a record, an app page or an action. Returns false when
+     * the pin is broken and nothing opened.
+     */
+    openResourcePin(pin, resourceType) {
         const config = pin.Configuration;
-        const rt = this.resolveStoredResourceType(pin);
-        // For Dashboards, Views, Queries — route through Data Explorer if available
-        const deApp = this.HasDataExplorerApp
-            ? this.appManager.GetAllApps().find(a => a.Name === 'Data Explorer')
-            : null;
-        switch (rt) {
-            case 'Dashboards': {
-                const dashboardId = config['dashboardId'];
-                if (!dashboardId)
-                    break;
-                if (deApp) {
-                    void this.navigationService.SwitchToApp(deApp.ID, 'Dashboards', { dashboard: dashboardId });
-                }
-                else {
-                    this.navigationService.OpenDashboard(dashboardId, pin.DisplayName);
-                }
-                break;
-            }
-            case 'User Views':
+        switch (resourceType) {
+            case 'User Views': {
                 if (config['isDynamic']) {
-                    this.navigationService.OpenDynamicView((config['Entity'] || config['entity']), config['extraFilter']);
-                }
-                else {
-                    const viewId = config['viewId'];
-                    if (viewId) {
-                        this.navigationService.OpenView(viewId, pin.DisplayName);
+                    const entityName = (config['Entity'] || config['entity']);
+                    if (!entityName) {
+                        console.warn('[Pin Click] Dynamic view pin missing Entity', config);
+                        return false;
                     }
+                    this.navigationService.OpenDynamicView(entityName, config['extraFilter']);
+                    return true;
                 }
-                break;
+                const viewId = config['viewId'];
+                if (!viewId)
+                    return false;
+                this.navigationService.OpenView(viewId, pin.DisplayName);
+                return true;
+            }
             case 'Queries': {
                 const queryId = config['queryId'];
                 if (!queryId)
-                    break;
+                    return false;
+                // Opens in Data Explorer's Queries nav item once the Add Pin panel has found that app
+                const deApp = this.HasDataExplorerApp
+                    ? this.appManager.GetAllApps().find(a => a.Name === 'Data Explorer')
+                    : null;
                 if (deApp) {
                     void this.navigationService.SwitchToApp(deApp.ID, 'Queries', { queryId: queryId });
                 }
                 else {
                     this.navigationService.OpenQuery(queryId, pin.DisplayName);
                 }
-                break;
+                return true;
             }
             case 'Records': {
                 const entityName = (config['Entity'] || config['entity']);
                 const recordId = config['recordId'];
-                if (entityName && recordId) {
-                    const compositeKey = this.buildCompositeKeyForRecord(entityName, recordId);
-                    if (compositeKey) {
-                        this.navigationService.OpenEntityRecord(entityName, compositeKey);
-                    }
-                }
-                else {
+                if (!entityName || !recordId) {
                     console.warn('[Pin Click] Records pin missing Entity or recordId', config);
+                    return false;
                 }
-                break;
-            }
-            case 'Custom': {
-                // Custom resources are nav items within apps — always use app name, never ID
-                const navItemName = config['navItemName'];
-                const appName = config['appName'];
-                const queryParams = config['queryParams'];
-                if (appName) {
-                    const app = this.appManager.GetAllApps().find(a => a.Name === appName);
-                    if (app) {
-                        // 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);
-                    }
-                }
-                else {
-                    console.warn('[Pin Click] Custom pin missing appName', config);
-                }
-                break;
+                const compositeKey = this.buildCompositeKeyForRecord(entityName, recordId);
+                if (!compositeKey)
+                    return false;
+                this.navigationService.OpenEntityRecord(entityName, compositeKey);
+                return true;
             }
+            case 'Custom':
+                return this.openAppPagePin(config);
             case 'Actions': {
                 const actionId = config['actionId'];
                 if (!actionId) {
                     console.warn('[Pin Click] Action pin missing actionId', config);
-                    break;
+                    return false;
                 }
                 this.ActionRunnerPin = pin;
                 this.ActionRunnerDialogVisible = true;
                 this.cdr.markForCheck();
-                break;
+                return true;
             }
             default:
-                console.warn('[Pin Click] Unrecognized resource type', rt, 'for pin', pin.DisplayName, config);
-                break;
+                console.warn('[Pin Click] Unrecognized resource type', resourceType, 'for pin', pin.DisplayName, config);
+                return false;
+        }
+    }
+    /** Opens an app page pin (a Custom pin): a nav item of an app, found by the app's name. Returns false when the pin is broken. */
+    openAppPagePin(config) {
+        // Custom resources are nav items within apps — always use app name, never ID
+        const navItemName = config['navItemName'];
+        const appName = config['appName'];
+        const queryParams = config['queryParams'];
+        if (!appName) {
+            console.warn('[Pin Click] Custom pin missing appName', config);
+            return false;
+        }
+        const app = this.appManager.GetAllApps().find(a => a.Name === appName);
+        if (!app) {
+            console.warn(`[Pin Click] Custom pin: app "${appName}" not found`, config);
+            return false;
         }
+        // SwitchToApp gets the query params, so the target tab has them when it activates, before a cached resource
+        // component reattaches: the page opens on the state the pin names.
+        void this.navigationService.SwitchToApp(app.ID, navItemName, queryParams);
+        return true;
     }
     /**
-     * Resolve a pin's resource type from its stored ResourceType and config keys.
-     * Handles legacy pins that may have stored a UUID resourceTypeId or
-     * a raw config.resourceType string instead of the canonical type names.
-     */
-    resolveStoredResourceType(pin) {
-        const rt = pin.ResourceType;
-        const config = pin.Configuration;
-        // Already a known canonical type
-        const knownTypes = ['Dashboards', 'User Views', 'Queries', 'Reports', 'Records', 'Custom', 'Actions'];
-        if (knownTypes.includes(rt))
-            return rt;
-        // Check the config's own resourceType field
-        const configRt = config['resourceType'];
-        if (configRt && knownTypes.includes(configRt))
-            return configRt;
-        // Fall back to detecting by config keys
-        if (config['dashboardId'])
-            return 'Dashboards';
-        if (config['viewId'])
-            return 'User Views';
-        if (config['queryId'])
-            return 'Queries';
-        if (config['reportId'])
-            return 'Reports';
-        if ((config['Entity'] || config['entity']) && config['recordId'])
-            return 'Records';
-        if (config['actionId'])
-            return 'Actions';
-        if (config['navItemName'])
-            return 'Custom';
-        return rt; // Give up and return whatever was stored
-    }
-    /**
-     * Toggle edit mode for pins
+     * Toggle edit mode for pins. Entering edit mode opens a collapsed Pinned section.
      */
     ToggleEditMode() {
         this.EditMode = !this.EditMode;
-        if (!this.EditMode) {
+        if (this.EditMode) {
+            this.openPinnedSection();
+        }
+        else {
             this.EditingPinId = null;
             this.EditingGroupName = null;
         }
@@ -2407,6 +2913,27 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         UserInfoEngine.Instance.SetSettingDebounced('HomeApp.HidePinEmptyState', 'true');
         this.cdr.markForCheck();
     }
+    /** Opens or collapses the Pinned section, saves the choice for the user and reports it to the agent. */
+    OnPinnedExpandedChange(expanded) {
+        this.PinnedExpanded = expanded;
+        this.sectionStateChanged(PINNED_COLLAPSED_SETTING, expanded);
+    }
+    /** Reads whether the Pinned section is open. 'true' means collapsed; a missing setting means open. */
+    loadSectionStates() {
+        this.PinnedExpanded = UserInfoEngine.Instance.GetSetting(PINNED_COLLAPSED_SETTING) !== 'true';
+    }
+    /** Saves a section's state for the user ('true' when collapsed), reports it to the agent and renders. */
+    sectionStateChanged(settingKey, expanded) {
+        UserInfoEngine.Instance.SetSettingDebounced(settingKey, expanded ? 'false' : 'true');
+        this.publishAgentContext();
+        this.cdr.markForCheck();
+    }
+    /** Opens the Pinned section when it is collapsed, so edit mode or a new pin shows. */
+    openPinnedSection() {
+        if (!this.PinnedExpanded) {
+            this.OnPinnedExpandedChange(true);
+        }
+    }
     /**
      * Remove a pin
      */
@@ -2414,22 +2941,96 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         this.pinService.RemovePin(pinId);
     }
     /**
-     * Start inline editing of a pin's display name
+     * Starts renaming a pin: shows its rename box, with focus in it and the name selected. A dashboard pin is renamed
+     * only by a user who can edit its dashboard; other users are told why not.
      */
     StartEditingPin(pinId, event) {
         event.stopPropagation();
+        const pin = this.PinnedItems.find(p => p.Id === pinId);
+        if (pin && !this.canRenamePin(pin)) {
+            this.notifyCannotRename(pin);
+            return;
+        }
         this.EditingPinId = pinId;
-        this.cdr.markForCheck();
+        this.focusPinNameInput();
     }
     /**
-     * Save edited pin name
+     * Saves the name typed in a pin's rename box and closes the box. A dashboard pin renames its dashboard, since it
+     * shows the dashboard's name; other pins rename only the pin. An empty or unchanged name changes nothing. A call
+     * after the rename has ended does nothing: the browser can blur the box as it goes away.
      */
     SavePinName(pinId, newName) {
-        if (newName.trim()) {
-            this.pinService.UpdatePin(pinId, { DisplayName: newName.trim() });
-        }
+        if (this.EditingPinId !== pinId)
+            return;
         this.EditingPinId = null;
         this.cdr.markForCheck();
+        const pin = this.PinnedItems.find(p => p.Id === pinId);
+        const name = newName.trim();
+        if (!pin || !name || name === this.PinName(pin))
+            return;
+        const dashboard = this.pinDashboard(pin);
+        if (dashboard) {
+            void this.renameDashboard(dashboard, pin, name);
+            return;
+        }
+        this.pinService.UpdatePin(pinId, { DisplayName: name });
+    }
+    /** Enter in a pin's rename box: saves the name, then moves focus to Done, since the box goes away. */
+    OnPinNameEnter(pinId, event) {
+        this.SavePinName(pinId, this.GetInputValue(event));
+        this.focusShownView();
+    }
+    /** Renders Home, then puts focus in the open rename box and selects the name, so typing replaces it. */
+    focusPinNameInput() {
+        this.focusInHome('.pin-card .pin-name-input')?.select();
+    }
+    /** The dashboard a dashboard pin shows, from the dashboard cache. Null for other pins, and when the cache lacks it. */
+    pinDashboard(pin) {
+        return FindDashboard(this.accessibleDashboards(), DashboardIdOfPin(pin));
+    }
+    /** True when the user may rename the pin: a pin that shows no cached dashboard, or a dashboard pin whose dashboard the user can edit. */
+    canRenamePin(pin) {
+        const dashboard = this.pinDashboard(pin);
+        return !dashboard || DashboardEngine.Instance.CanUserEditDashboard(dashboard.ID, this.ProviderToUse.CurrentUser.ID);
+    }
+    /** Tells the user that only people who can edit the pin's dashboard can rename the pin. */
+    notifyCannotRename(pin) {
+        MJNotificationService.Instance.CreateSimpleNotification(`Only people who can edit "${this.PinName(pin)}" can rename it`, 'info', 3000);
+    }
+    /**
+     * Renames the dashboard a pin shows, and keeps the pin's stored name in step: the name the pin shows when the cache
+     * lacks the dashboard. It renames the cache's own dashboard object, so the switcher, the pin names and an editor that
+     * shows the dashboard have the new name at once. While a save of that object runs (an editor's Save, for example),
+     * it renames nothing and tells the user: its own save would join the running one and write nothing. A failed save
+     * puts the old name back and tells the user.
+     */
+    async renameDashboard(dashboard, pin, name) {
+        if (dashboard.IsSaving) {
+            MJNotificationService.Instance.CreateSimpleNotification(`"${dashboard.Name}" is being saved. Rename it again in a moment.`, 'info', 3000);
+            return;
+        }
+        const previous = dashboard.Name;
+        dashboard.Name = name;
+        this.refreshPinnedDashboards();
+        const failure = await this.saveRenamedDashboard(dashboard);
+        if (failure !== null) {
+            dashboard.Name = previous;
+            this.refreshPinnedDashboards();
+            LogError(`Home: could not rename the dashboard "${previous}": ${failure}`);
+            MJNotificationService.Instance.CreateSimpleNotification(`Could not rename "${previous}"`, 'error', 3000);
+            return;
+        }
+        this.pinService.UpdatePin(pin.Id, { DisplayName: name });
+        MJNotificationService.Instance.CreateSimpleNotification(`Renamed the dashboard to "${name}"`, 'success', 2000);
+    }
+    /** Saves a renamed dashboard. Returns null when it saved, else why not. Never throws. */
+    async saveRenamedDashboard(dashboard) {
+        try {
+            return (await dashboard.Save()) ? null : dashboard.LatestResult?.CompleteMessage ?? 'unknown error';
+        }
+        catch (error) {
+            return errorMessage(error);
+        }
     }
     /**
      * Extract input value from a DOM event (strict template helper)
@@ -2472,6 +3073,10 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     GetPinsInGroup(groupName) {
         return this.pinService.GetPinsInGroup(groupName);
     }
+    /** The name a pin shows: a dashboard pin shows its dashboard's name from the cache; other pins show their own. */
+    PinName(pin) {
+        return this.pinDashboardNames.get(pin.Id) ?? pin.DisplayName;
+    }
     /**
      * Get icon for a pin based on resource type and metadata
      */
@@ -2549,32 +3154,89 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     // PIN CONTEXT MENU (ELLIPSIS)
     // =============================================
     /**
-     * Show the pin context menu (triggered by ellipsis button)
+     * Opens the pin options menu under the pin's ellipsis button, right-aligned and inside the viewport, and moves
+     * focus to its first row. A click elsewhere, Escape or Tab closes it.
      */
     ShowPinMenu(event, pin) {
         event.stopPropagation();
         event.preventDefault();
+        const trigger = event.currentTarget;
+        if (!(trigger instanceof HTMLElement)) {
+            return;
+        }
+        const anchor = MenuAnchorOf(trigger);
+        this.pinMenuTrigger = trigger;
         this.PinMenuPin = pin;
-        this.PinMenuX = event.clientX;
-        this.PinMenuY = event.clientY;
         this.PinMenuVisible = true;
-        this.cdr.markForCheck();
-        // Close on click outside or Escape
+        this.placePinMenu(anchor, 0);
+        // Render the menu with no max height to measure its full height, then place it again with that height
+        this.PinMenuMaxHeight = null;
+        this.cdr.detectChanges();
+        this.placePinMenu(anchor, this.pinMenuEl?.nativeElement.offsetHeight ?? 0);
+        this.cdr.detectChanges();
+        this.pinMenuRows()[0]?.focus({ preventScroll: true });
+        this.watchPinMenuDismiss();
+    }
+    /**
+     * Keys in the pin options menu: ArrowDown, ArrowUp, Home and End move between the rows. Escape closes the menu
+     * and puts focus back on its button. Tab closes it too, and the browser moves focus on from the button.
+     */
+    OnPinMenuKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closePinMenuToTrigger();
+        }
+        else if (event.key === 'Tab') {
+            this.closePinMenuToTrigger();
+        }
+        else {
+            this.focusPinMenuRow(event);
+        }
+    }
+    /** Moves focus to the menu row that ArrowDown, ArrowUp, Home or End picks. Other keys do nothing. */
+    focusPinMenuRow(event) {
+        const rows = this.pinMenuRows();
+        const next = NextMenuFocusIndex(event.key, rows.findIndex(row => row === document.activeElement), rows.length);
+        if (next !== null) {
+            event.preventDefault();
+            rows[next].focus();
+        }
+    }
+    /** The menu's rows, in order: its menuitem buttons. */
+    pinMenuRows() {
+        return Array.from(this.pinMenuEl?.nativeElement.querySelectorAll('[role="menuitem"]') ?? []);
+    }
+    /** Closes the pin options menu and puts focus back on the button that opened it. */
+    closePinMenuToTrigger() {
+        const trigger = this.pinMenuTrigger;
+        this.HidePinMenu();
+        trigger?.focus();
+    }
+    /**
+     * Places the pin options menu next to its button and limits its height to the room on that side. A height of 0
+     * places it below the button.
+     */
+    placePinMenu(anchor, height) {
+        const place = PlaceMenu(anchor, PIN_MENU_WIDTH, height, 'right', { Width: window.innerWidth, Height: window.innerHeight });
+        this.PinMenuX = place.Left;
+        this.PinMenuY = place.Top;
+        this.PinMenuMaxHeight = place.MaxHeight;
+    }
+    /** Closes the pin options menu on the next click anywhere or on Escape. */
+    watchPinMenuDismiss() {
         setTimeout(() => {
-            const clickHandler = () => {
+            const close = () => {
                 this.HidePinMenu();
-                document.removeEventListener('click', clickHandler);
-                document.removeEventListener('keydown', keyHandler);
+                document.removeEventListener('click', close);
+                document.removeEventListener('keydown', onKeydown);
             };
-            const keyHandler = (e) => {
-                if (e.key === 'Escape') {
-                    this.HidePinMenu();
-                    document.removeEventListener('click', clickHandler);
-                    document.removeEventListener('keydown', keyHandler);
+            const onKeydown = (event) => {
+                if (event.key === 'Escape') {
+                    close();
                 }
             };
-            document.addEventListener('click', clickHandler);
-            document.addEventListener('keydown', keyHandler);
+            document.addEventListener('click', close);
+            document.addEventListener('keydown', onKeydown);
         }, 0);
     }
     /**
@@ -2583,18 +3245,30 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     HidePinMenu() {
         this.PinMenuVisible = false;
         this.PinMenuPin = null;
+        this.pinMenuTrigger = null;
         this.cdr.markForCheck();
     }
     /**
-     * Edit a pin (enters edit mode focused on this pin)
+     * Edit in a pin's menu: closes the menu, puts the pins in edit mode (opening a collapsed Pinned section) and starts
+     * renaming the pin, with focus in its rename box. For a dashboard pin the user cannot rename, it says why and moves
+     * focus to Done instead.
      */
     OnPinMenuEdit() {
-        if (this.PinMenuPin) {
-            this.EditMode = true;
-            this.EditingPinId = this.PinMenuPin.Id;
-            this.cdr.markForCheck();
-        }
+        const pin = this.PinMenuPin;
         this.HidePinMenu();
+        if (!pin)
+            return;
+        this.EditMode = true;
+        this.openPinnedSection();
+        if (this.canRenamePin(pin)) {
+            this.EditingPinId = pin.Id;
+            this.focusPinNameInput();
+        }
+        else {
+            this.EditingPinId = null;
+            this.notifyCannotRename(pin);
+            this.focusShownView();
+        }
     }
     /**
      * Move a pin to a different group
@@ -2739,8 +3413,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         }));
         // Load apps with their nav items
         await this.loadAvailableApps();
-        // Check if Data Explorer is available — if so, dashboards/queries/views
-        // are accessible through its nav items, no need for standalone sections
+        // Query pins open in Data Explorer when the user has that app (see OnPinClick)
         this.HasDataExplorerApp = this.AvailableApps.some(a => a.appName === 'Data Explorer');
     }
     /**
@@ -2811,6 +3484,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
                 };
             });
             MJNotificationService.Instance.CreateSimpleNotification(`"${navItemLabel}" pinned to Home`, 'success', 3000);
+            this.openPinnedSection();
             this.cdr.markForCheck();
         }
     }
@@ -2843,6 +3517,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         if (added) {
             this.updatePanelPinnedState(resourceType, id, true);
             MJNotificationService.Instance.CreateSimpleNotification(`"${name}" pinned to Home`, 'success', 3000);
+            this.openPinnedSection();
         }
     }
     // =============================================
@@ -2886,6 +3561,7 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
         const added = this.pinService.AddPin(input);
         if (added) {
             MJNotificationService.Instance.CreateSimpleNotification(`"${p.DisplayName}" pinned to Home`, 'success', 3000);
+            this.openPinnedSection();
         }
         else {
             MJNotificationService.Instance.CreateSimpleNotification('A pin with the same title and config already exists.', 'warning', 3000);
@@ -2936,63 +3612,62 @@ let HomeDashboardComponent = class HomeDashboardComponent extends BaseResourceCo
     }
     static ɵfac = function HomeDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HomeDashboardComponent)(i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i2.RecentAccessService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeDashboardComponent, selectors: [["mj-home-dashboard"]], viewQuery: function HomeDashboardComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5);
         } 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"], ["type", "button", "title", "Hide this", 1, "pin-empty-close"], ["Icon", "fa-solid fa-thumbtack", "Title", "No pinned items yet", "Message", "Pin your favorite dashboards, views, queries, and reports for quick access."], ["actions", "", "mjButton", "", "variant", "primary", 3, "click"], ["actions", "", "mjButton", "", "variant", "flat"], ["type", "button", "title", "Hide this", 1, "pin-empty-close", 3, "click"], [1, "fa-solid", "fa-xmark"], ["actions", "", "mjButton", "", "variant", "flat", 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"], ["aria-label", "Remove pin", "title", "Remove pin", 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"], ["aria-label", "Pin options", "title", "Pin options", 1, "more-btn"], ["aria-label", "Pin options", "title", "Pin options", 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"], ["Size", "sm", 1, "panel-section", 3, "FlushBody", "Expanded"], ["Size", "sm", 1, "panel-section", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "fa-solid", "fa-grid-2"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], [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, "mjClickable", "testId", "--app-color"], ["Icon", "fa-solid fa-folder-open", "Title", "No Applications Available", "Message", "You don't have any applications configured yet.", "ActionText", "Configure Applications", "ActionIcon", "fa-solid fa-gear"], [1, "app-card", 3, "click", "mjClickable", "testId"], [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"], ["Icon", "fa-solid fa-folder-open", "Title", "No Applications Available", "Message", "You don't have any applications configured yet.", "ActionText", "Configure Applications", "ActionIcon", "fa-solid fa-gear", 3, "Action"], [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"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No quick access items", 1, "sidebar-empty"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], ["testId", "notification-item", 1, "sidebar-item", "notification-item", 3, "mjClickable"], ["testId", "notification-item", 1, "sidebar-item", "notification-item", 3, "click", "mjClickable"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "fa-solid", "fa-star"], [1, "sidebar-loading"], ["testId", "favorite-item", 1, "sidebar-item", "favorite-item", 3, "mjClickable"], ["testId", "favorite-item", 1, "sidebar-item", "favorite-item", 3, "click", "mjClickable"], [1, "sidebar-item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-clock-rotate-left"], ["testId", "recent-item", 1, "sidebar-item", "recent-item", 3, "mjClickable"], ["testId", "recent-item", 1, "sidebar-item", "recent-item", 3, "click", "mjClickable"], ["title", "Quick Access", 1, "sidebar-fab-toggle", 3, "click"], [1, "fab-badge"]], template: function HomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pinMenuEl = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dashboardEditor = _t.first);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 16, vars: 19, consts: [["homeDashboardTitle", ""], ["appConfigDialog", ""], ["dashboardEditor", ""], ["pinMenu", ""], [1, "home-dashboard"], [1, "main-content"], [1, "home-overview"], ["BodyStyle", "card", 1, "home-dashboard-view", 3, "Provider", "DashboardId", "StartInEditMode", "TitleTemplate", "ShowOpenInDashboards"], ["role", "menu", 1, "pin-context-menu", 3, "left", "top", "max-height"], [3, "Result", "Visible", "ActionID", "ActionName", "ActionDescription"], [3, "Result", "Visible", "Pin"], [3, "Confirmed", "Cancelled", "Visible", "MaxLength", "Processing"], [1, "loading-container"], [1, "quick-access-sidebar"], ["title", "Quick Access", 1, "sidebar-fab-toggle"], [3, "ShowDialogChange", "ConfigSaved", "ShowDialog"], [1, "home-header"], [1, "greeting-section"], [1, "date"], [1, "pinned-section", 3, "ExpandedChange", "Bare", "TitleIconMuted", "HeadingLevel", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionActions", ""], ["mjAccordionBody", ""], [1, "apps-section"], [1, "section-title"], [1, "apps-grid"], [1, "app-card", 3, "mjClickable", "TestId", "--app-color"], ["Icon", "fa-solid fa-folder-open", "Title", "No Applications Available", "Message", "You don't have any applications configured yet.", "ActionText", "Configure Applications", "ActionIcon", "fa-solid fa-gear"], [1, "pinned-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-thumbtack"], [1, "pinned-actions"], ["type", "button", "mjButton", "", "Variant", "success", "Size", "sm"], ["type", "button", "mjButton", "", "Variant", "success", "Size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], [1, "pin-action-label"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["Look", "button", "Align", "right", "Label", "Dashboards", 3, "Pick", "New", "ManagePins", "Dashboards", "CurrentId"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], [1, "pinned-body"], [1, "edit-mode-banner"], [1, "pin-empty-state"], [1, "pin-grid"], [1, "fa-solid", "fa-arrows-up-down-left-right"], ["type", "button", "title", "Hide this", 1, "pin-empty-close"], ["Icon", "fa-solid fa-thumbtack", "Title", "No pinned items yet", "Message", "Pin your favorite dashboards, views, queries, and reports for quick access."], ["actions", "", "mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["actions", "", "mjButton", "", "variant", "flat"], ["type", "button", "title", "Hide this", 1, "pin-empty-close", 3, "click"], [1, "fa-solid", "fa-xmark"], ["actions", "", "mjButton", "", "variant", "flat", 3, "click"], [1, "add-pin-card"], [1, "group-header"], [1, "pin-card", 3, "edit-mode", "dragging", "drag-over", "menu-open", "draggable"], [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"], ["type", "button", 1, "group-edit-btn", "danger", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-folder-minus"], [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"], [1, "pin-info"], [1, "pin-name-input", 3, "value"], [1, "pin-name"], [1, "pin-meta"], ["aria-hidden", "true", 1, "fa-solid", "fa-gauge-high"], [1, "pin-kind"], [1, "drag-handle"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip-vertical"], [1, "edit-card-actions"], ["type", "button", "aria-label", "Remove pin", "title", "Remove pin", 1, "edit-card-btn", "delete", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [3, "src", "alt"], [1, "pin-overlay"], [1, "pin-thumbnail", "action-mode"], ["aria-hidden", "true"], [1, "pin-name-input", 3, "blur", "keydown.enter", "click", "value"], [1, "pin-name", 3, "click"], [1, "pin-name-text"], ["type", "button", "title", "Pin options", "aria-haspopup", "menu", 1, "more-btn"], ["type", "button", "title", "Pin options", "aria-haspopup", "menu", 1, "more-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], [1, "add-pin-card", 3, "click"], [1, "app-card", 3, "click", "mjClickable", "TestId"], ["aria-hidden", "true", 1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "app-description"], ["Icon", "fa-solid fa-folder-open", "Title", "No Applications Available", "Message", "You don't have any applications configured yet.", "ActionText", "Configure Applications", "ActionIcon", "fa-solid fa-gear", 3, "Action"], ["BodyStyle", "card", 1, "home-dashboard-view", 3, "StartInEditModeChange", "Loaded", "EditingChange", "NameChanged", "Saved", "LoadFailed", "OpenInDashboardsRequested", "NavigationRequested", "Provider", "DashboardId", "StartInEditMode", "TitleTemplate", "ShowOpenInDashboards"], [1, "dashboard-title"], ["aria-label", "Breadcrumb", 1, "dashboard-crumb"], ["type", "button", 1, "crumb-home", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-house"], ["Look", "title", "Align", "left", 3, "Pick", "New", "ManagePins", "HeadingLevel", "Label", "Dashboards", "CurrentId"], ["role", "menu", 1, "pin-context-menu", 3, "keydown"], ["type", "button", "role", "menuitem", 1, "pin-context-item", 3, "click"], ["role", "separator", 1, "pin-context-divider"], ["role", "group"], [1, "pin-context-item", "submenu-header", 3, "id"], ["aria-hidden", "true", 1, "fa-solid", "fa-folder"], ["type", "button", "role", "menuitem", 1, "pin-context-item", "submenu-item"], ["type", "button", "role", "menuitem", 1, "pin-context-item", "danger", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-thumbtack-slash"], ["type", "button", "role", "menuitem", 1, "pin-context-item", "submenu-item", 3, "click"], [1, "slide-panel-backdrop", 3, "click"], [1, "slide-panel"], [1, "slide-panel-header"], [1, "fa-solid", "fa-thumbtack"], [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"], [1, "fa-solid", "fa-folder"], [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"], ["Size", "sm", 1, "panel-section", 3, "FlushBody", "Expanded"], ["Size", "sm", 1, "panel-section", 3, "ExpandedChange", "FlushBody", "Expanded"], [1, "fa-solid", "fa-grid-2"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], [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, "fa-solid", "fa-check"], [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, "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"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No quick access items", 1, "sidebar-empty"], [1, "sidebar-section-title"], [1, "fa-solid", "fa-bell"], [1, "section-badge"], [1, "sidebar-items"], ["testId", "notification-item", 1, "sidebar-item", "notification-item", 3, "mjClickable"], ["testId", "notification-item", 1, "sidebar-item", "notification-item", 3, "click", "mjClickable"], [1, "sidebar-item-info"], [1, "sidebar-item-title"], [1, "sidebar-item-subtitle"], [1, "fa-solid", "fa-star"], [1, "sidebar-loading"], ["testId", "favorite-item", 1, "sidebar-item", "favorite-item", 3, "mjClickable"], ["testId", "favorite-item", 1, "sidebar-item", "favorite-item", 3, "click", "mjClickable"], [1, "sidebar-item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-clock-rotate-left"], ["testId", "recent-item", 1, "sidebar-item", "recent-item", 3, "mjClickable"], ["testId", "recent-item", 1, "sidebar-item", "recent-item", 3, "click", "mjClickable"], ["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);
+            i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
+            i0.ɵɵconditionalCreate(2, HomeDashboardComponent_Conditional_2_Template, 18, 9, "div", 6);
+            i0.ɵɵconditionalCreate(3, HomeDashboardComponent_Conditional_3_Template, 2, 5, "mj-dashboard-editor", 7);
+            i0.ɵɵtemplate(4, HomeDashboardComponent_ng_template_4_Template, 10, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(6, HomeDashboardComponent_Conditional_6_Template, 20, 10, "div", 8);
+            i0.ɵɵconditionalCreate(7, HomeDashboardComponent_Conditional_7_Template, 27, 4);
+            i0.ɵɵelementStart(8, "mj-action-pin-config-dialog", 9);
+            i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_config_dialog_Result_8_listener($event) { return ctx.OnActionConfigResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "p", 5);
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(8, HomeDashboardComponent_Conditional_8_Template, 11, 4, "div", 6);
-            i0.ɵɵconditionalCreate(9, HomeDashboardComponent_Conditional_9_Template, 19, 5, "div", 7);
-            i0.ɵɵconditionalCreate(10, HomeDashboardComponent_Conditional_10_Template, 27, 4);
-            i0.ɵɵelementStart(11, "mj-action-pin-config-dialog", 8);
-            i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_config_dialog_Result_11_listener($event) { return ctx.OnActionConfigResult($event); });
+            i0.ɵɵelementStart(9, "mj-action-pin-runner-dialog", 10);
+            i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_runner_dialog_Result_9_listener($event) { return ctx.OnActionRunnerResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "mj-action-pin-runner-dialog", 9);
-            i0.ɵɵlistener("Result", function HomeDashboardComponent_Template_mj_action_pin_runner_dialog_Result_12_listener($event) { return ctx.OnActionRunnerResult($event); });
+            i0.ɵɵelementStart(10, "mj-dashboard-name-dialog", 11);
+            i0.ɵɵlistener("Confirmed", function HomeDashboardComponent_Template_mj_dashboard_name_dialog_Confirmed_10_listener($event) { return ctx.OnNewDashboardNamed($event); })("Cancelled", function HomeDashboardComponent_Template_mj_dashboard_name_dialog_Cancelled_10_listener() { return ctx.OnNewDashboardCancelled(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, HomeDashboardComponent_Conditional_13_Template, 2, 0, "div", 10);
-            i0.ɵɵconditionalCreate(14, HomeDashboardComponent_Conditional_14_Template, 8, 1, "div", 11);
+            i0.ɵɵconditionalCreate(11, HomeDashboardComponent_Conditional_11_Template, 2, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, HomeDashboardComponent_Conditional_15_Template, 12, 4, "div", 12);
-            i0.ɵɵconditionalCreate(16, HomeDashboardComponent_Conditional_16_Template, 3, 1, "button", 13);
-            i0.ɵɵelementStart(17, "mj-user-app-config", 14, 0);
-            i0.ɵɵtwoWayListener("ShowDialogChange", function HomeDashboardComponent_Template_mj_user_app_config_ShowDialogChange_17_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ConfigSaved", function HomeDashboardComponent_Template_mj_user_app_config_ConfigSaved_17_listener() { return ctx.onConfigSaved(); });
+            i0.ɵɵconditionalCreate(12, HomeDashboardComponent_Conditional_12_Template, 12, 4, "div", 13);
+            i0.ɵɵconditionalCreate(13, HomeDashboardComponent_Conditional_13_Template, 3, 1, "button", 14);
+            i0.ɵɵelementStart(14, "mj-user-app-config", 15, 1);
+            i0.ɵɵtwoWayListener("ShowDialogChange", function HomeDashboardComponent_Template_mj_user_app_config_ShowDialogChange_14_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showConfigDialog, $event) || (ctx.showConfigDialog = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ConfigSaved", function HomeDashboardComponent_Template_mj_user_app_config_ConfigSaved_14_listener() { return ctx.onConfigSaved(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵclassProp("sidebar-open", ctx.sidebarOpen && ctx.hasSidebarContent);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate2("", ctx.greeting, ", ", ctx.currentUser == null ? null : ctx.currentUser.Name);
+            i0.ɵɵclassProp("sidebar-open", ctx.SidebarOpen && ctx.ShowQuickAccess);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.formattedDate);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 8 : -1);
+            i0.ɵɵconditional(ctx.ShowOverview ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.PinMenuVisible && ctx.PinMenuPin ? 9 : -1);
+            i0.ɵɵconditional(ctx.ShowDashboardView && ctx.CurrentDashboardId ? 3 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.PinMenuVisible && ctx.PinMenuPin ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.AddPanelOpen ? 10 : -1);
+            i0.ɵɵconditional(ctx.AddPanelOpen ? 7 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Visible", ctx.ActionConfigDialogVisible)("ActionID", ctx.ActionConfigActionId)("ActionName", ctx.ActionConfigActionName)("ActionDescription", ctx.ActionConfigActionDescription);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Visible", ctx.ActionRunnerDialogVisible)("Pin", ctx.ActionRunnerPin);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 13 : -1);
+            i0.ɵɵproperty("Visible", ctx.ShowNewDashboardDialog)("MaxLength", ctx.NewDashboardNameMaxLength)("Processing", ctx.IsCreatingDashboard);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 14 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasSidebarContent ? 15 : -1);
+            i0.ɵɵconditional(ctx.ShowQuickAccess ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasSidebarContent && !ctx.sidebarOpen ? 16 : -1);
+            i0.ɵɵconditional(ctx.ShowQuickAccess && !ctx.SidebarOpen ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i4.MJClickableDirective, i4.MJEmptyStateComponent, i4.MJAccordionPanelComponent, i4.MJAccordionTitleDirective, i4.MJAccordionBodyDirective, 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.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.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n  margin-right: 320px;\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.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.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.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.apps-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\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.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.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.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.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\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.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.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.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.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.pin-empty-state[_ngcontent-%COMP%] {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\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\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.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.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.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.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.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.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.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\n\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%], \n.pin-card[_ngcontent-%COMP%]:focus-within   .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.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.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.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.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.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.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\n\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.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.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@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@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  .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  .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@media (max-width: 768px) {\n  \n\n\n\n  .main-content[_ngcontent-%COMP%] {\n    padding: 20px;\n    padding-bottom: 100px; \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  .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  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    display: none;\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  .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, i4.MJClickableDirective, i4.MJEmptyStateComponent, i4.MJAccordionPanelComponent, i4.MJAccordionTitleDirective, i4.MJAccordionActionsDirective, i4.MJAccordionBodyDirective, i5.LoadingComponent, i6.UserAppConfigComponent, i7.DashboardNameDialogComponent, i8.HomeDashboardSwitcherComponent, i9.ActionPinConfigDialogComponent, i10.ActionPinRunnerDialogComponent, i11.DashboardEditorComponent, i12.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.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow-y: auto;\n  transition: margin-right var(--mj-transition-slow);\n}\n\n\n.home-dashboard.sidebar-open[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%] {\n  margin-right: 320px;\n}\n\n\n.home-overview[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: var(--mj-space-7) var(--mj-space-8) var(--mj-space-10);\n}\n\n\n.home-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--mj-space-4);\n  margin-bottom: var(--mj-space-6);\n}\n\n.greeting-section[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  letter-spacing: var(--mj-tracking-tight);\n  line-height: var(--mj-leading-tight);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  margin: var(--mj-space-1) 0 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.home-dashboard-view[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 520px;\n}\n\n\n.dashboard-title[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.dashboard-crumb[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.crumb-home[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-link);\n  cursor: pointer;\n}\n\n.crumb-home[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-link-hover);\n}\n\n.crumb-home[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\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.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.apps-section[_ngcontent-%COMP%] {\n  margin-bottom: var(--mj-space-8);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 var(--mj-space-3);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n}\n\n.apps-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));\n  gap: var(--mj-space-3);\n}\n\n\n.app-card[_ngcontent-%COMP%] {\n  --app-color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-4);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition:\n    border-color var(--mj-transition-fast),\n    box-shadow var(--mj-transition-fast),\n    transform var(--mj-transition-fast);\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.app-card[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.app-icon[_ngcontent-%COMP%] {\n  flex: 0 0 36px;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n  margin: 2px 0 0;\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-secondary);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\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.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.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  display: block;\n  margin-bottom: var(--mj-space-8);\n}\n\n\n.pinned-title[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-bold);\n}\n\n.pinned-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n\n.pinned-body[_ngcontent-%COMP%] {\n  padding-top: var(--mj-space-3);\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.pin-empty-state[_ngcontent-%COMP%] {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\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\n.pin-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: var(--mj-space-4);\n  margin-bottom: var(--mj-space-3);\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.pin-card[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color var(--mj-transition-fast),\n    box-shadow var(--mj-transition-fast),\n    transform var(--mj-transition-fast);\n}\n\n.pin-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\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.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.pin-thumbnail[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.pin-thumbnail[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n}\n\n.pin-thumbnail.icon-mode[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  width: 52px;\n  height: 52px;\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n\n.pin-thumbnail.action-mode[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\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.pin-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  background: var(--mj-bg-overlay);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--mj-transition-fast);\n}\n\n.pin-card[_ngcontent-%COMP%]:hover   .pin-overlay[_ngcontent-%COMP%], \n.pin-card[_ngcontent-%COMP%]:focus-within   .pin-overlay[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n\n.pin-info[_ngcontent-%COMP%] {\n  padding: var(--mj-space-3);\n}\n\n.pin-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.pin-name-text[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  margin: -4px -4px -4px 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: pointer;\n  opacity: 0;\n  transition:\n    opacity var(--mj-transition-fast),\n    background-color var(--mj-transition-fast),\n    color var(--mj-transition-fast);\n}\n\n\n.pin-card[_ngcontent-%COMP%]:hover   .more-btn[_ngcontent-%COMP%], \n.pin-card[_ngcontent-%COMP%]:focus-within   .more-btn[_ngcontent-%COMP%], \n.pin-card.menu-open[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%]:hover, \n.pin-card.menu-open[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name[_ngcontent-%COMP%]   .more-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.pin-name-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 2px 6px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  outline: none;\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n\n.pin-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  min-width: 0;\n  margin-top: 2px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pin-meta[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-kind[_ngcontent-%COMP%] {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pin-card[_ngcontent-%COMP%], \n   .app-card[_ngcontent-%COMP%] {\n    transition: none;\n  }\n  .pin-card[_ngcontent-%COMP%]:hover, \n   .app-card[_ngcontent-%COMP%]:hover {\n    transform: none;\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  z-index: 10001;\n  width: 220px;\n  overflow-y: auto;\n  padding: 6px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  animation: _ngcontent-%COMP%_pinMenuIn var(--mj-transition-fast);\n}\n\n@keyframes _ngcontent-%COMP%_pinMenuIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-context-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  width: 100%;\n  padding: 8px 10px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  font: inherit;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  text-align: left;\n  cursor: pointer;\n}\n\n.pin-context-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n.pin-context-item[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  background: var(--mj-bg-surface-hover);\n  box-shadow: inset 0 0 0 var(--mj-ring-width) var(--mj-focus-ring-color);\n}\n\n.pin-context-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 14px;\n  text-align: center;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pin-context-item.danger[_ngcontent-%COMP%], \n.pin-context-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.submenu-header[_ngcontent-%COMP%] {\n  padding-bottom: 4px;\n  cursor: default;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\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: 34px;\n}\n\n.pin-context-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  margin: 6px 4px;\n  background: var(--mj-border-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pin-context-menu[_ngcontent-%COMP%] { animation: none; }\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.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.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.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\n\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.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.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@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\n\n@media (max-width: 992px) {\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  .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@media (max-width: 900px) {\n  .home-overview[_ngcontent-%COMP%] {\n    padding: var(--mj-space-5) var(--mj-space-4);\n  }\n}\n\n\n@media (max-width: 768px) {\n  .home-overview[_ngcontent-%COMP%] {\n    padding-bottom: 100px; \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  .home-dashboard.sidebar-open[_ngcontent-%COMP%]::before {\n    display: none;\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: var(--mj-space-3);\n  }\n\n  .slide-panel[_ngcontent-%COMP%] {\n    width: 100%;\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  .home-overview[_ngcontent-%COMP%] {\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  \n\n  .pinned-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .pinned-actions[_ngcontent-%COMP%]   .pin-action-label[_ngcontent-%COMP%] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\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')
@@ -3000,10 +3675,23 @@ 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 || !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            <mj-empty-state Icon=\"fa-solid fa-thumbtack\"\n              Title=\"No pinned items yet\"\n              Message=\"Pin your favorite dashboards, views, queries, and reports for quick access.\">\n              <button actions mjButton variant=\"primary\" (click)=\"OpenAddPinPanel()\">\n                <i class=\"fa-solid fa-plus\"></i> Add your first pin\n              </button>\n              @if (!EditMode && !HidePinEmptyState) {\n                <button actions mjButton variant=\"flat\" (click)=\"DismissPinEmptyState()\">\n                  Don't show this again\n                </button>\n              }\n            </mj-empty-state>\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\" aria-label=\"Remove pin\" title=\"Remove pin\" (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\" aria-label=\"Pin options\" title=\"Pin options\" (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\" aria-label=\"Remove pin\" title=\"Remove pin\" (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\" aria-label=\"Pin options\" title=\"Pin options\" (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              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['apps']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('apps', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-grid-2\"></i> Applications\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterApps().length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Dashboards (metadata-driven Config type only) -->\n            @if (FilterPanelItems(AvailableDashboards).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['dashboards']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('dashboards', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Views -->\n            @if (FilterPanelItems(AvailableViews).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['views']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('views', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-table-list\"></i> Views\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableViews).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Queries -->\n            @if (FilterPanelItems(AvailableQueries).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['queries']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('queries', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-database\"></i> Queries\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Quick Actions -->\n            @if (FilterPanelItems(AvailableActions).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['actions']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('actions', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-bolt\"></i> Quick Actions\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableActions).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\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              [mjClickable]=\"appData.app.Name\"\n              [testId]=\"'app-tile-' + appData.app.Name\"\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          <mj-empty-state Icon=\"fa-solid fa-folder-open\"\n            Title=\"No Applications Available\"\n            Message=\"You don't have any applications configured yet.\"\n            ActionText=\"Configure Applications\"\n            ActionIcon=\"fa-solid fa-gear\"\n            (Action)=\"openConfigDialog()\" />\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                  [mjClickable]=\"notification.Title\"\n                  testId=\"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                    [mjClickable]=\"getFavoriteDisplayName(favorite)\"\n                    testId=\"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                    [mjClickable]=\"item.recordName || item.recordId\"\n                    testId=\"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          <mj-empty-state class=\"sidebar-empty\" Size=\"compact\"\n            Icon=\"fa-solid fa-inbox\"\n            Title=\"No quick access items\" />\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/* ========================================\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  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\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 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/* Also reveal on keyboard focus \u2014 the pin's overflow menu is the only route to\n   rename/remove/configure, and at opacity 0 it was pointer-only: invisible to a\n   tabbing keyboard user and unreachable without a hover. */\n.pin-card:hover .pin-name .more-btn,\n.pin-card:focus-within .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/* Section header (title row + chevron) now owned by <mj-accordion-panel>. */\n\n/* Section count pill migrated to <mj-accordion-badge mj-accordion-badge--right>;\n   bespoke .panel-count rule removed. */\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  /* Keep the fixed-height + scroll contract on mobile (matches desktop and the\n     shared <mj-page-layout>/<mj-page-body> primitives). Overriding to\n     height:auto / overflow:visible breaks .main-content's flex:1 scroll inside\n     the fixed-height shell, leaving the page non-scrollable. */\n  .main-content {\n    padding: 20px;\n    padding-bottom: 100px; /* Space for FAB button */\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 && ShowQuickAccess\">\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Overview: the greeting, Pinned and My applications in one centered column -->\n    @if (ShowOverview) {\n      <div class=\"home-overview\">\n        <!-- Header Section -->\n        <div class=\"home-header\">\n          <div class=\"greeting-section\">\n            <h1>{{ Greeting }}, {{ GreetingName }}</h1>\n            <p class=\"date\">{{ FormattedDate }}</p>\n          </div>\n        </div>\n\n        <!-- Pinned Section: collapses to its header (title, Add Pin / Dashboards / Edit, or Done) -->\n        <mj-accordion-panel class=\"pinned-section\" [Bare]=\"true\" [TitleIconMuted]=\"true\" [HeadingLevel]=\"2\" [FlushBody]=\"true\"\n            [Expanded]=\"PinnedExpanded\" (ExpandedChange)=\"OnPinnedExpandedChange($event)\">\n          <ng-template mjAccordionTitle>\n            <span class=\"pinned-title\"><i class=\"fa-solid fa-thumbtack\" aria-hidden=\"true\"></i> Pinned</span>\n          </ng-template>\n          <ng-template mjAccordionActions>\n            <div class=\"pinned-actions\">\n              @if (EditMode) {\n                <button type=\"button\" mjButton Variant=\"success\" Size=\"sm\" (click)=\"ToggleEditMode()\">\n                  <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i> <span class=\"pin-action-label\">Done</span>\n                </button>\n              } @else {\n                <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" (click)=\"OpenAddPinPanel()\">\n                  <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> <span class=\"pin-action-label\">Add Pin</span>\n                </button>\n                <mj-home-dashboard-switcher Look=\"button\" Align=\"right\" Label=\"Dashboards\"\n                    [Dashboards]=\"PinnedDashboards\" [CurrentId]=\"null\"\n                    (Pick)=\"OnSwitcherPick($event)\" (New)=\"OpenNewDashboardDialog()\" (ManagePins)=\"ManagePins()\">\n                </mj-home-dashboard-switcher>\n                @if (PinnedItems.length > 0) {\n                  <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" (click)=\"ToggleEditMode()\">\n                    <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i> <span class=\"pin-action-label\">Edit</span>\n                  </button>\n                }\n              }\n            </div>\n          </ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"pinned-body\">\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                  <mj-empty-state Icon=\"fa-solid fa-thumbtack\"\n                    Title=\"No pinned items yet\"\n                    Message=\"Pin your favorite dashboards, views, queries, and reports for quick access.\">\n                    <button actions mjButton variant=\"primary\" (click)=\"OpenAddPinPanel()\">\n                      <i class=\"fa-solid fa-plus\"></i> Add your first pin\n                    </button>\n                    @if (!EditMode && !HidePinEmptyState) {\n                      <button actions mjButton variant=\"flat\" (click)=\"DismissPinEmptyState()\">\n                        Don't show this again\n                      </button>\n                    }\n                  </mj-empty-state>\n                </div>\n              }\n\n              <!-- Pin Grid: the ungrouped pins, then each group under its header, from one card markup -->\n              @if (PinnedItems.length > 0) {\n                <div class=\"pin-grid\">\n                  @for (section of PinSections; track section.Key) {\n                    @if (section.Group !== null) {\n                      <div class=\"group-header\">\n                        @if (EditMode && EditingGroupName === section.Group) {\n                          <input class=\"group-name-input\" [value]=\"section.Group\"\n                            (blur)=\"SaveGroupName(section.Group, GetInputValue($event))\"\n                            (keydown.enter)=\"SaveGroupName(section.Group, GetInputValue($event))\" />\n                        } @else {\n                          <span class=\"group-name\" (click)=\"EditMode ? StartEditingGroup(section.Group) : null\">{{ section.Group }}</span>\n                        }\n                        <div class=\"group-line\"></div>\n                        <span class=\"group-count\">{{ section.Pins.length }} pins</span>\n                        @if (EditMode) {\n                          <div class=\"group-edit-controls\">\n                            <button type=\"button\" class=\"group-edit-btn danger\" (click)=\"RemoveGroup(section.Group)\">\n                              <i class=\"fa-solid fa-folder-minus\" aria-hidden=\"true\"></i> Remove Group\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                    @for (pin of section.Pins; track pin.Id) {\n                      <div class=\"pin-card\"\n                        [class.edit-mode]=\"EditMode\"\n                        [class.dragging]=\"DraggingPinId === pin.Id\"\n                        [class.drag-over]=\"DragOverPinId === pin.Id\"\n                        [class.menu-open]=\"PinMenuPin?.Id === pin.Id\"\n                        [draggable]=\"EditMode\"\n                        (dragstart)=\"OnDragStart($event, pin)\" (dragover)=\"OnDragOver($event, pin)\" (dragleave)=\"OnDragLeave()\"\n                        (drop)=\"OnDrop($event, pin)\" (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\" aria-hidden=\"true\"></i></div>\n                            <div class=\"edit-card-actions\">\n                              <button type=\"button\" class=\"edit-card-btn delete\" aria-label=\"Remove pin\" title=\"Remove pin\"\n                                (click)=\"RemovePin(pin.Id); $event.stopPropagation()\"><i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i></button>\n                            </div>\n                          </div>\n                        }\n\n                        <!-- Thumbnail: the pin's image, the action accent, or the brand icon tile -->\n                        @if (pin.Thumbnail) {\n                          <div class=\"pin-thumbnail\">\n                            <img [src]=\"pin.Thumbnail\" [alt]=\"PinName(pin)\" />\n                            @if (!EditMode) {\n                              <div class=\"pin-overlay\">\n                                <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" [attr.aria-label]=\"'Open ' + PinName(pin)\"\n                                  (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)\" aria-hidden=\"true\"></i>\n                            @if (!EditMode) {\n                              <div class=\"pin-overlay\">\n                                <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" [attr.aria-label]=\"'Run ' + PinName(pin)\"\n                                  (click)=\"OnPinClick(pin); $event.stopPropagation()\">Run</button>\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          <div class=\"pin-thumbnail icon-mode\">\n                            <i [class]=\"GetPinIcon(pin)\" aria-hidden=\"true\"></i>\n                            @if (!EditMode) {\n                              <div class=\"pin-overlay\">\n                                <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" [attr.aria-label]=\"'Open ' + PinName(pin)\"\n                                  (click)=\"OnPinClick(pin); $event.stopPropagation()\">Open</button>\n                              </div>\n                            }\n                          </div>\n                        }\n\n                        <!-- Pin Info: the name with the pin options button, and the kind line -->\n                        <div class=\"pin-info\">\n                          @if (EditMode && EditingPinId === pin.Id) {\n                            <input class=\"pin-name-input\" [value]=\"PinName(pin)\" [attr.aria-label]=\"'Name of ' + PinName(pin)\"\n                              (blur)=\"SavePinName(pin.Id, GetInputValue($event))\"\n                              (keydown.enter)=\"OnPinNameEnter(pin.Id, $event)\"\n                              (click)=\"$event.stopPropagation()\" />\n                          } @else {\n                            <div class=\"pin-name\" (click)=\"EditMode ? StartEditingPin(pin.Id, $event) : null\">\n                              <span class=\"pin-name-text\">{{ PinName(pin) }}</span>\n                              @if (!EditMode) {\n                                <button type=\"button\" class=\"more-btn\" [attr.aria-label]=\"'Pin options for ' + PinName(pin)\" title=\"Pin options\" aria-haspopup=\"menu\"\n                                  [attr.aria-expanded]=\"PinMenuPin?.Id === pin.Id\" (click)=\"ShowPinMenu($event, pin)\">\n                                  <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n                                </button>\n                              }\n                            </div>\n                          }\n                          <div class=\"pin-meta\">\n                            @if (pin.ResourceType === 'Dashboards') {\n                              <i class=\"fa-solid fa-gauge-high\" aria-hidden=\"true\"></i>\n                            }\n                            <span class=\"pin-kind\">{{ GetResourceTypeLabel(pin) }}</span>\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\" aria-hidden=\"true\"></i>\n                      <span>Add Pin</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </ng-template>\n        </mj-accordion-panel>\n\n        <!-- My applications -->\n        <section class=\"apps-section\">\n          <h2 class=\"section-title\">My applications</h2>\n          <div class=\"apps-grid\">\n            @for (appData of AppsDisplayData; track TrackByApp($index, appData)) {\n              <div class=\"app-card\" [mjClickable]=\"appData.app.Name\" [TestId]=\"'app-tile-' + appData.app.Name\"\n                [style.--app-color]=\"appData.color\" (click)=\"OnAppClick(appData.app)\">\n                <div class=\"app-icon\" aria-hidden=\"true\"><i [class]=\"appData.icon\"></i></div>\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                </div>\n              </div>\n            }\n          </div>\n          <!-- Empty State -->\n          @if (Apps.length === 0) {\n            <mj-empty-state Icon=\"fa-solid fa-folder-open\"\n              Title=\"No Applications Available\"\n              Message=\"You don't have any applications configured yet.\"\n              ActionText=\"Configure Applications\"\n              ActionIcon=\"fa-solid fa-gear\"\n              (Action)=\"OpenConfigDialog()\" />\n          }\n        </section>\n      </div>\n    }\n\n    <!-- Dashboard view: a pinned dashboard at full size in place of the overview, in the shared dashboard editor -->\n    @if (ShowDashboardView && CurrentDashboardId) {\n      <mj-dashboard-editor #dashboardEditor class=\"home-dashboard-view\"\n          [Provider]=\"Provider\" [DashboardId]=\"CurrentDashboardId\"\n          [(StartInEditMode)]=\"DashboardStartsInEditMode\"\n          [TitleTemplate]=\"homeDashboardTitle\" [ShowOpenInDashboards]=\"true\" BodyStyle=\"card\"\n          (Loaded)=\"OnDashboardViewLoaded($event)\"\n          (EditingChange)=\"OnDashboardEditingChange($event)\" (NameChanged)=\"OnDashboardSaved()\" (Saved)=\"OnDashboardSaved()\"\n          (LoadFailed)=\"OnDashboardViewLoadFailed()\"\n          (OpenInDashboardsRequested)=\"OpenDashboardInDashboardsApp($event)\"\n          (NavigationRequested)=\"OnDashboardNavigationRequested($event)\">\n      </mj-dashboard-editor>\n    }\n\n    <!-- The dashboard view's title in view mode: the breadcrumb over the Dashboards switcher, whose trigger is the view's heading -->\n    <ng-template #homeDashboardTitle let-dashboard>\n      <div class=\"dashboard-title\">\n        <nav class=\"dashboard-crumb\" aria-label=\"Breadcrumb\">\n          <button type=\"button\" class=\"crumb-home\" (click)=\"OnSwitcherPick(null)\"><i class=\"fa-solid fa-house\" aria-hidden=\"true\"></i> Home</button>\n          <span aria-hidden=\"true\">/</span>\n          <span>Pinned dashboards</span>\n        </nav>\n        <mj-home-dashboard-switcher Look=\"title\" Align=\"left\" [HeadingLevel]=\"1\" [Label]=\"dashboard.Name\"\n            [Dashboards]=\"PinnedDashboards\" [CurrentId]=\"dashboard.ID\"\n            (Pick)=\"OnSwitcherPick($event)\" (New)=\"OpenNewDashboardDialog()\" (ManagePins)=\"ManagePins()\">\n        </mj-home-dashboard-switcher>\n      </div>\n    </ng-template>\n\n    <!-- Pin options menu (ellipsis): fixed next to its button (below it, or above it when there is no room below), outside the cards so it stacks above them -->\n    @if (PinMenuVisible && PinMenuPin) {\n      <div #pinMenu class=\"pin-context-menu\" role=\"menu\" [attr.aria-label]=\"'Options for ' + PinName(PinMenuPin)\"\n        [style.left.px]=\"PinMenuX\" [style.top.px]=\"PinMenuY\" [style.max-height.px]=\"PinMenuMaxHeight\" (keydown)=\"OnPinMenuKeydown($event)\">\n        <button type=\"button\" role=\"menuitem\" class=\"pin-context-item\" (click)=\"OnPinMenuEdit()\">\n          <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i><span>Edit</span>\n        </button>\n        <div class=\"pin-context-divider\" role=\"separator\"></div>\n        <div role=\"group\" [attr.aria-labelledby]=\"PinMenuGroupLabelId\">\n          <div class=\"pin-context-item submenu-header\" [id]=\"PinMenuGroupLabelId\"><i class=\"fa-solid fa-folder\" aria-hidden=\"true\"></i><span>Move to Group</span></div>\n          @if (PinMenuPin.Group) {\n            <button type=\"button\" role=\"menuitem\" class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(undefined)\"><span>(No group)</span></button>\n          }\n          @for (group of PinGroups; track group) {\n            @if (group !== PinMenuPin.Group) {\n              <button type=\"button\" role=\"menuitem\" class=\"pin-context-item submenu-item\" (click)=\"OnPinMenuMoveToGroup(group)\"><span>{{ group }}</span></button>\n            }\n          }\n        </div>\n        <div class=\"pin-context-divider\" role=\"separator\"></div>\n        <button type=\"button\" role=\"menuitem\" class=\"pin-context-item danger\" (click)=\"OnPinMenuUnpin()\">\n          <i class=\"fa-solid fa-thumbtack-slash\" aria-hidden=\"true\"></i><span>Unpin</span>\n        </button>\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              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['apps']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('apps', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-grid-2\"></i> Applications\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterApps().length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Dashboards (metadata-driven Config type only) -->\n            @if (FilterPanelItems(AvailableDashboards).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['dashboards']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('dashboards', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-gauge-high\"></i> Dashboards\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableDashboards).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Views -->\n            @if (FilterPanelItems(AvailableViews).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['views']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('views', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-table-list\"></i> Views\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableViews).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Queries -->\n            @if (FilterPanelItems(AvailableQueries).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['queries']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('queries', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-database\"></i> Queries\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableQueries).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\n            }\n\n            <!-- Quick Actions -->\n            @if (FilterPanelItems(AvailableActions).length > 0) {\n              <mj-accordion-panel class=\"panel-section\" Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"!PanelSectionCollapsed['actions']\"\n                  (ExpandedChange)=\"OnPanelSectionExpandedChange('actions', $event)\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-bolt\"></i> Quick Actions\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ FilterPanelItems(AvailableActions).length }}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\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                </ng-template>\n              </mj-accordion-panel>\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    <!-- New dashboard: asks for the name; Cancel creates nothing -->\n    <mj-dashboard-name-dialog [Visible]=\"ShowNewDashboardDialog\" [MaxLength]=\"NewDashboardNameMaxLength\"\n        [Processing]=\"IsCreatingDashboard\" (Confirmed)=\"OnNewDashboardNamed($event)\" (Cancelled)=\"OnNewDashboardCancelled()\">\n    </mj-dashboard-name-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  </div>\n\n  <!-- Collapsible Right Sidebar (the overview only) -->\n  @if (ShowQuickAccess) {\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                  [mjClickable]=\"notification.Title\"\n                  testId=\"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                    [mjClickable]=\"getFavoriteDisplayName(favorite)\"\n                    testId=\"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                    [mjClickable]=\"item.recordName || item.recordId\"\n                    testId=\"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          <mj-empty-state class=\"sidebar-empty\" Size=\"compact\"\n            Icon=\"fa-solid fa-inbox\"\n            Title=\"No quick access items\" />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Quick Access FAB Toggle (Fixed Button; the overview only) -->\n  @if (ShowQuickAccess && !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  min-width: 0;\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/* The overview column: greeting, Pinned and My applications */\n.home-overview {\n  width: 100%;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: var(--mj-space-7) var(--mj-space-8) var(--mj-space-10);\n}\n\n/* Header: greeting */\n.home-header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--mj-space-4);\n  margin-bottom: var(--mj-space-6);\n}\n\n.greeting-section h1 {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  letter-spacing: var(--mj-tracking-tight);\n  line-height: var(--mj-leading-tight);\n  color: var(--mj-text-primary);\n}\n\n.greeting-section .date {\n  margin: var(--mj-space-1) 0 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-muted);\n}\n\n/* ========================================\n   DASHBOARD VIEW\n   ======================================== */\n\n/* The dashboard view fills the page; the editor lays out its header and body. */\n.home-dashboard-view {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 520px;\n}\n\n/* View-mode title: breadcrumb over the title switcher */\n.dashboard-title {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.dashboard-crumb {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.crumb-home {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-link);\n  cursor: pointer;\n}\n\n.crumb-home:hover {\n  color: var(--mj-text-link-hover);\n}\n\n.crumb-home:focus-visible {\n  outline: none;\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-focus-ring);\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/* My applications */\n.apps-section {\n  margin-bottom: var(--mj-space-8);\n}\n\n.section-title {\n  margin: 0 0 var(--mj-space-3);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-primary);\n}\n\n.apps-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));\n  gap: var(--mj-space-3);\n}\n\n/* App Card: an icon tile in the app's color, then the name and description */\n.app-card {\n  --app-color: var(--mj-brand-primary);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-4);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition:\n    border-color var(--mj-transition-fast),\n    box-shadow var(--mj-transition-fast),\n    transform var(--mj-transition-fast);\n}\n\n.app-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.app-card:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.app-icon {\n  flex: 0 0 36px;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--app-color) 12%, transparent);\n  color: var(--app-color);\n  font-size: 16px;\n}\n\n.app-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-name {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.app-description {\n  margin: 2px 0 0;\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-snug);\n  color: var(--mj-text-secondary);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\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/* The section's accordion panel. The panel's header row holds the title, the actions and the chevron. */\n.pinned-section {\n  display: block;\n  margin-bottom: var(--mj-space-8);\n}\n\n/* Section title in the panel's toggle. It takes the toggle's text color, so the hover cue shows. */\n.pinned-title {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-bold);\n}\n\n.pinned-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n/* The accordion body is flush (FlushBody); the grid gets its top gap here */\n.pinned-body {\n  padding-top: var(--mj-space-3);\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  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  border: 2px dashed var(--mj-border-default);\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 Grid */\n.pin-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: var(--mj-space-4);\n  margin-bottom: var(--mj-space-3);\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  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color var(--mj-transition-fast),\n    box-shadow var(--mj-transition-fast),\n    transform var(--mj-transition-fast);\n}\n\n.pin-card:hover {\n  border-color: var(--mj-border-strong);\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  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.pin-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Every pin but an action pin shows its icon on a brand-tinted tile */\n.pin-thumbnail.icon-mode {\n  display: grid;\n  place-items: center;\n}\n\n.pin-thumbnail.icon-mode > i {\n  display: grid;\n  place-items: center;\n  width: 52px;\n  height: 52px;\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n/* Action pins keep their accent gradient (inline style) and white icon */\n.pin-thumbnail.action-mode {\n  display: grid;\n  place-items: center;\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 with the Open (or Run) button */\n.pin-overlay {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  background: var(--mj-bg-overlay);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--mj-transition-fast);\n}\n\n.pin-card:hover .pin-overlay,\n.pin-card:focus-within .pin-overlay {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Pin Info */\n.pin-info {\n  padding: var(--mj-space-3);\n}\n\n.pin-name {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.pin-name-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.pin-name .more-btn {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  margin: -4px -4px -4px 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  cursor: pointer;\n  opacity: 0;\n  transition:\n    opacity var(--mj-transition-fast),\n    background-color var(--mj-transition-fast),\n    color var(--mj-transition-fast);\n}\n\n/* Shown on hover, on keyboard focus, and while its menu is open */\n.pin-card:hover .more-btn,\n.pin-card:focus-within .more-btn,\n.pin-card.menu-open .more-btn {\n  opacity: 1;\n}\n\n.pin-name .more-btn:hover,\n.pin-card.menu-open .more-btn {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.pin-name .more-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.pin-name-input {\n  width: 100%;\n  padding: 2px 6px;\n  border: 1px solid var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm);\n  outline: none;\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n/* Kind line */\n.pin-meta {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  min-width: 0;\n  margin-top: 2px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.pin-meta > i {\n  font-size: 11px;\n}\n\n.pin-kind {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pin-card,\n  .app-card {\n    transition: none;\n  }\n  .pin-card:hover,\n  .app-card:hover {\n    transform: none;\n  }\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/* Fixed next to its button and above the page chrome; the component limits its height to the room on that side */\n.pin-context-menu {\n  position: fixed;\n  z-index: 10001;\n  width: 220px;\n  overflow-y: auto;\n  padding: 6px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  animation: pinMenuIn var(--mj-transition-fast);\n}\n\n@keyframes pinMenuIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-context-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  width: 100%;\n  padding: 8px 10px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  font: inherit;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  text-align: left;\n  cursor: pointer;\n}\n\n.pin-context-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Keyboard focus: a ring drawn inside the row */\n.pin-context-item:focus-visible {\n  outline: none;\n  background: var(--mj-bg-surface-hover);\n  box-shadow: inset 0 0 0 var(--mj-ring-width) var(--mj-focus-ring-color);\n}\n\n.pin-context-item i {\n  width: 14px;\n  text-align: center;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.pin-context-item.danger,\n.pin-context-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.pin-context-item.submenu-header {\n  padding-bottom: 4px;\n  cursor: default;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n}\n\n.pin-context-item.submenu-header:hover {\n  background: transparent;\n}\n\n.pin-context-item.submenu-item {\n  padding-left: 34px;\n}\n\n.pin-context-divider {\n  height: 1px;\n  margin: 6px 4px;\n  background: var(--mj-border-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pin-context-menu { animation: none; }\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/* Section header (title row + chevron) now owned by <mj-accordion-panel>. */\n\n/* Section count pill migrated to <mj-accordion-badge mj-accordion-badge--right>;\n   bespoke .panel-count rule removed. */\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\n/* Tablet */\n@media (max-width: 992px) {\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/* Narrow screens: less page padding. The pin and app grids reflow on their own. */\n@media (max-width: 900px) {\n  .home-overview {\n    padding: var(--mj-space-5) var(--mj-space-4);\n  }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n  .home-overview {\n    padding-bottom: 100px; /* Space for FAB button */\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: var(--mj-space-3);\n  }\n\n  .slide-panel {\n    width: 100%;\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  .home-overview {\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  /* Pinned header: the title without its icon, and icon-only actions, so it fits on one row.\n     The action labels stay in the accessibility tree, so each button keeps its name. */\n  .pinned-title i {\n    display: none;\n  }\n\n  .pinned-actions .pin-action-label {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\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']
+        }], pinMenuEl: [{
+            type: ViewChild,
+            args: ['pinMenu']
+        }], dashboardEditor: [{
+            type: ViewChild,
+            args: ['dashboardEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/Home/home-dashboard.component.ts", lineNumber: 46 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeDashboardComponent, { className: "HomeDashboardComponent", filePath: "src/Home/home-dashboard.component.ts", lineNumber: 98 }); })();
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+/** What a Home agent tool for a part of the overview says while a dashboard shows: the part shows on the overview only. */
+function overviewOnlyError(part) {
+    return `${part} shows on the ${HOME_OVERVIEW_NAME} overview only. Use SwitchHomeDashboard with "${HOME_OVERVIEW_NAME}" first.`;
+}
 //# sourceMappingURL=home-dashboard.component.js.map