@memberjunction/ng-dashboards 5.23.0 → 5.25.0

package/dist/DataExplorer/data-explorer-dashboard.component.js

@@ -5,10 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core';
-import { NavigationEnd } from '@angular/router';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { Subject } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { BaseDashboard } from '@memberjunction/ng-shared';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
 import { Metadata, RunView, EntityFieldTSType } from '@memberjunction/core';
@@ -17,20 +16,19 @@ import { UserInfoEngine } from '@memberjunction/core-entities';
 import { EntityViewerComponent, ViewConfigPanelComponent, buildCompositeKey, buildPkString } from '@memberjunction/ng-entity-viewer';
 import { ViewSelectorComponent } from './components/view-selector/view-selector.component';
 import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
+import { UserViewEngine } from '@memberjunction/core-entities';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/explorer-state.service";
-import * as i2 from "@angular/router";
-import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "@memberjunction/ng-shared";
-import * as i5 from "@memberjunction/ng-export-service";
-import * as i6 from "@angular/forms";
-import * as i7 from "@memberjunction/ng-entity-viewer";
-import * as i8 from "@memberjunction/ng-list-management";
-import * as i9 from "./components/navigation-panel/navigation-panel.component";
-import * as i10 from "./components/view-selector/view-selector.component";
-import * as i11 from "./components/filter-dialog/filter-dialog.component";
-import * as i12 from "@angular/common";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-export-service";
+import * as i4 from "@angular/forms";
+import * as i5 from "@memberjunction/ng-entity-viewer";
+import * as i6 from "@memberjunction/ng-list-management";
+import * as i7 from "./components/navigation-panel/navigation-panel.component";
+import * as i8 from "./components/view-selector/view-selector.component";
+import * as i9 from "./components/filter-dialog/filter-dialog.component";
+import * as i10 from "@angular/common";
 const _c0 = ["filterInput"];
 const _forTrack0 = ($index, $item) => $item.label;
 const _forTrack1 = ($index, $item) => $item.name;
@@ -196,129 +194,141 @@ function DataExplorerDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.liveFilterText ? 4 : -1);
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("timeline")); });
-    i0.ɵɵelement(1, "i", 50);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "timeline");
-} }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeDateFieldDropdown()); });
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeDateFieldDropdown()); });
     i0.ɵɵelementEnd();
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 63);
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 61);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("rotated", ctx_r1.isDateFieldDropdownOpen);
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 68);
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_For_2_Template_div_click_0_listener() { const field_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setTimelineDateField(field_r17.name)); });
-    i0.ɵɵelement(1, "i", 66);
-    i0.ɵɵelementStart(2, "span", 67);
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_For_2_Template_div_click_0_listener() { const field_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setTimelineDateField(field_r16.name)); });
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(2, "span", 65);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_For_2_Conditional_4_Template, 1, 0, "i", 68);
+    i0.ɵɵconditionalCreate(4, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_For_2_Conditional_4_Template, 1, 0, "i", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r17 = ctx.$implicit;
+    const field_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("selected", field_r17.name === ctx_r1.effectiveTimelineDateField);
+    i0.ɵɵclassProp("selected", field_r16.name === ctx_r1.effectiveTimelineDateField);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(field_r17.displayName);
+    i0.ɵɵtextInterpolate(field_r16.displayName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(field_r17.name === ctx_r1.effectiveTimelineDateField ? 4 : -1);
+    i0.ɵɵconditional(field_r16.name === ctx_r1.effectiveTimelineDateField ? 4 : -1);
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_For_2_Template, 5, 4, "div", 64, _forTrack1);
+    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_For_2_Template, 5, 4, "div", 62, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.availableDateFields);
 } }
-function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵconditionalCreate(1, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template, 1, 0, "div", 52);
-    i0.ɵɵelementStart(2, "div", 53)(3, "button", 54);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDateFieldDropdown()); });
-    i0.ɵɵelement(4, "i", 55);
-    i0.ɵɵelementStart(5, "span", 56);
-    i0.ɵɵtext(6);
+function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 51);
+    i0.ɵɵconditionalCreate(2, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_2_Template, 1, 0, "div", 52);
+    i0.ɵɵelementStart(3, "div", 53)(4, "button", 54);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDateFieldDropdown()); });
+    i0.ɵɵelement(5, "i", 55);
+    i0.ɵɵelementStart(6, "span", 56);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_7_Template, 1, 2, "i", 57);
+    i0.ɵɵconditionalCreate(8, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_8_Template, 1, 2, "i", 57);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Conditional_8_Template, 3, 0, "div", 58);
+    i0.ɵɵconditionalCreate(9, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Conditional_9_Template, 3, 0, "div", 58);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 59)(10, "button", 60);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
+    i0.ɵɵelementStart(10, "button", 59);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineOrientation()); });
     i0.ɵɵelement(11, "i");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 61)(13, "button", 60);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
-    i0.ɵɵelement(14, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 59);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleTimelineSortOrder()); });
+    i0.ɵɵelement(13, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen ? 2 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("open", ctx_r1.isDateFieldDropdownOpen);
     i0.ɵɵproperty("disabled", ctx_r1.availableDateFields.length <= 1);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.effectiveTimelineDateFieldDisplayName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.availableDateFields.length > 1 ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.availableDateFields.length > 1 ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen && ctx_r1.availableDateFields.length > 1 ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isDateFieldDropdownOpen && ctx_r1.availableDateFields.length > 1 ? 8 : -1);
-    i0.ɵɵadvance(2);
     i0.ɵɵproperty("title", ctx_r1.state.timelineOrientation === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.state.timelineOrientation === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("title", ctx_r1.state.timelineSortOrder === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.state.timelineSortOrder === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
 } }
+function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("timeline")); });
+    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "timeline");
+} }
+function DataExplorerDashboardComponent_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("map")); });
+    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "map");
+} }
 function DataExplorerDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "button", 44);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("grid")); });
-    i0.ɵɵelement(2, "i", 45);
+    i0.ɵɵconditionalCreate(0, DataExplorerDashboardComponent_Conditional_11_Conditional_0_Template, 14, 13, "div", 43);
+    i0.ɵɵelementStart(1, "div", 44)(2, "button", 45);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("grid")); });
+    i0.ɵɵelement(3, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 46);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("cards")); });
-    i0.ɵɵelement(4, "i", 47);
+    i0.ɵɵelementStart(4, "button", 47);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_11_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("cards")); });
+    i0.ɵɵelement(5, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, DataExplorerDashboardComponent_Conditional_11_Conditional_5_Template, 2, 2, "button", 48);
+    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template, 2, 2, "button", 49);
+    i0.ɵɵconditionalCreate(7, DataExplorerDashboardComponent_Conditional_11_Conditional_7_Template, 2, 2, "button", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_11_Conditional_6_Template, 15, 13);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.state.viewMode === "timeline" && ctx_r1.entityHasDateFields ? 0 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "grid");
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "cards");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.entityHasDateFields ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.entityHasDateFields ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.state.viewMode === "timeline" && ctx_r1.entityHasDateFields ? 6 : -1);
+    i0.ɵɵconditional((ctx_r1.selectedEntity == null ? null : ctx_r1.selectedEntity.SupportsGeoCoding) ? 7 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵelementStart(0, "span", 73);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -327,11 +337,11 @@ function DataExplorerDashboardComponent_Conditional_12_Conditional_2_Template(rf
     i0.ɵɵtextInterpolate(ctx_r1.recentRecords.length + ctx_r1.favoriteRecords.length);
 } }
 function DataExplorerDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 69);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessPanel()); });
-    i0.ɵɵelement(1, "i", 70);
-    i0.ɵɵconditionalCreate(2, DataExplorerDashboardComponent_Conditional_12_Conditional_2_Template, 2, 1, "span", 71);
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessPanel()); });
+    i0.ɵɵelement(1, "i", 72);
+    i0.ɵɵconditionalCreate(2, DataExplorerDashboardComponent_Conditional_12_Conditional_2_Template, 2, 1, "span", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -340,19 +350,19 @@ function DataExplorerDashboardComponent_Conditional_12_Template(rf, ctx) { if (r
     i0.ɵɵconditional(ctx_r1.recentRecords.length + ctx_r1.favoriteRecords.length > 0 ? 2 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵelement(1, "mj-loading", 73);
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "mj-loading", 75);
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 105);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.entityFilterText = ""); });
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.entityFilterText = ""); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 80);
+    i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1, "/");
     i0.ɵɵelementEnd();
 } }
@@ -363,49 +373,49 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵtextInterpolate1(" across ", ctx_r1.applicationCount, " applications ");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 111);
+    i0.ɵɵelementStart(0, "span", 113);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r22 = i0.ɵɵnextContext().$implicit;
+    const entity_r23 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(entity_r22.Description);
+    i0.ɵɵtextInterpolate(entity_r23.Description);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template_div_click_0_listener() { const entity_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r22)); });
-    i0.ɵɵelementStart(1, "div", 108);
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template_div_click_0_listener() { const entity_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r23)); });
+    i0.ɵɵelementStart(1, "div", 110);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 109)(4, "span", 110);
+    i0.ɵɵelementStart(3, "div", 111)(4, "span", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Conditional_6_Template, 2, 1, "span", 111);
+    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Conditional_6_Template, 2, 1, "span", 113);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 112);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template_button_click_7_listener($event) { const entity_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r22, $event)); });
+    i0.ɵɵelementStart(7, "button", 114);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template_button_click_7_listener($event) { const entity_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r23, $event)); });
     i0.ɵɵelement(8, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r22 = ctx.$implicit;
+    const entity_r23 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("title", entity_r22.Description || entity_r22.DisplayNameOrName);
+    i0.ɵɵproperty("title", entity_r23.Description || entity_r23.DisplayNameOrName);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r22));
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r23));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r22.DisplayNameOrName);
+    i0.ɵɵtextInterpolate(entity_r23.DisplayNameOrName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(entity_r22.Description ? 6 : -1);
+    i0.ɵɵconditional(entity_r23.Description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r22));
-    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r22) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r23));
+    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r23) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r22) ? "fa-solid fa-star" : "fa-regular fa-star");
+    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r23) ? "fa-solid fa-star" : "fa-regular fa-star");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template, 9, 10, "div", 106, _forTrack3);
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_For_2_Template, 9, 10, "div", 108, _forTrack3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -413,96 +423,96 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵrepeater(ctx_r1.flatFilteredEntities);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 111);
+    i0.ɵɵelementStart(0, "span", 113);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r26 = i0.ɵɵnextContext().$implicit;
+    const entity_r27 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(entity_r26.Description);
+    i0.ɵɵtextInterpolate(entity_r27.Description);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 107);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template_div_click_0_listener() { const entity_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r26)); });
-    i0.ɵɵelementStart(1, "div", 108);
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template_div_click_0_listener() { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r27)); });
+    i0.ɵɵelementStart(1, "div", 110);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 109)(4, "span", 110);
+    i0.ɵɵelementStart(3, "div", 111)(4, "span", 112);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Conditional_6_Template, 2, 1, "span", 111);
+    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Conditional_6_Template, 2, 1, "span", 113);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 112);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template_button_click_7_listener($event) { const entity_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r26, $event)); });
+    i0.ɵɵelementStart(7, "button", 114);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template_button_click_7_listener($event) { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r27, $event)); });
     i0.ɵɵelement(8, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r26 = ctx.$implicit;
+    const entity_r27 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", entity_r26.Description || entity_r26.DisplayNameOrName);
+    i0.ɵɵproperty("title", entity_r27.Description || entity_r27.DisplayNameOrName);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r26));
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r27));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r26.DisplayNameOrName);
+    i0.ɵɵtextInterpolate(entity_r27.DisplayNameOrName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(entity_r26.Description ? 6 : -1);
+    i0.ɵɵconditional(entity_r27.Description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r26));
-    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r26) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r27));
+    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r27) ? "Remove from favorites" : "Add to favorites");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r26) ? "fa-solid fa-star" : "fa-regular fa-star");
+    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r27) ? "fa-solid fa-star" : "fa-regular fa-star");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 119)(1, "div", 87);
-    i0.ɵɵrepeaterCreate(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template, 9, 10, "div", 106, _forTrack3);
+    i0.ɵɵelementStart(0, "div", 121)(1, "div", 89);
+    i0.ɵɵrepeaterCreate(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_For_3_Template, 9, 10, "div", 108, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const group_r24 = i0.ɵɵnextContext().$implicit;
+    const group_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(group_r24.entities);
+    i0.ɵɵrepeater(group_r25.entities);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 114);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Template_div_click_1_listener() { const group_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAppGroup(group_r24.applicationId)); });
-    i0.ɵɵelementStart(2, "div", 115);
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 116);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Template_div_click_1_listener() { const group_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAppGroup(group_r25.applicationId)); });
+    i0.ɵɵelementStart(2, "div", 117);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 116);
+    i0.ɵɵelementStart(4, "span", 118);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 117);
+    i0.ɵɵelementStart(6, "span", 119);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "i", 118);
+    i0.ɵɵelement(8, "i", 120);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_Template, 4, 0, "div", 119);
+    i0.ɵɵconditionalCreate(9, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Conditional_9_Template, 4, 0, "div", 121);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r24 = ctx.$implicit;
+    const group_r25 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background", group_r24.applicationColor ? group_r24.applicationColor + "15" : null)("color", group_r24.applicationColor || null);
+    i0.ɵɵstyleProp("background", group_r25.applicationColor ? group_r25.applicationColor + "15" : null)("color", group_r25.applicationColor || null);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(group_r24.applicationIcon || "fa-solid fa-folder");
+    i0.ɵɵclassMap(group_r25.applicationIcon || "fa-solid fa-folder");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r24.applicationName);
+    i0.ɵɵtextInterpolate(group_r25.applicationName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r24.entities.length);
+    i0.ɵɵtextInterpolate(group_r25.entities.length);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", group_r24.isExpanded);
+    i0.ɵɵclassProp("expanded", group_r25.isExpanded);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(group_r24.isExpanded ? 9 : -1);
+    i0.ɵɵconditional(group_r25.isExpanded ? 9 : -1);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Template, 10, 11, "div", 113, _forTrack5);
+    i0.ɵɵrepeaterCreate(0, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_For_1_Template, 10, 11, "div", 115, _forTrack5);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r1.filteredAppEntityGroups);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 120);
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵelement(1, "i", 122);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -512,8 +522,8 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵtextInterpolate1("No entities match \"", ctx_r1.entityFilterText, "\"");
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89);
-    i0.ɵɵelement(1, "i", 121);
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵelement(1, "i", 123);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Entities Available");
     i0.ɵɵelementEnd();
@@ -522,167 +532,167 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional
     i0.ɵɵelementEnd()();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_40_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_40_Template_div_click_0_listener() { const record_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRecentRecordClick(record_r28)); });
-    i0.ɵɵelementStart(1, "div", 123);
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_40_Template_div_click_0_listener() { const record_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRecentRecordClick(record_r29)); });
+    i0.ɵɵelementStart(1, "div", 125);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 124)(4, "div", 125);
+    i0.ɵɵelementStart(3, "div", 126)(4, "div", 127);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 126);
+    i0.ɵɵelementStart(6, "div", 128);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "span", 127);
+    i0.ɵɵelementStart(8, "span", 129);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const record_r28 = ctx.$implicit;
+    const record_r29 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r28.entityId));
+    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r29.entityId));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(record_r28.recordName || record_r28.recordId);
+    i0.ɵɵtextInterpolate(record_r29.recordName || record_r29.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(record_r28.entityName);
+    i0.ɵɵtextInterpolate(record_r29.entityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatRelativeTime(record_r28.latestAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatRelativeTime(record_r29.latestAt));
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelementStart(0, "div", 104);
     i0.ɵɵtext(1, "No recent records");
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_52_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_52_Template_div_click_0_listener() { const entity_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r30)); });
-    i0.ɵɵelementStart(1, "div", 123);
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_52_Template_div_click_0_listener() { const entity_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r31)); });
+    i0.ɵɵelementStart(1, "div", 125);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 124)(4, "div", 125);
+    i0.ɵɵelementStart(3, "div", 126)(4, "div", 127);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const entity_r30 = ctx.$implicit;
+    const entity_r31 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r30));
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r31));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(entity_r30.DisplayNameOrName);
+    i0.ɵɵtextInterpolate(entity_r31.DisplayNameOrName);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_53_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelementStart(0, "div", 104);
     i0.ɵɵtext(1, "No recent entities");
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_64_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_64_Template_div_click_0_listener() { const record_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFavoriteRecordClick(record_r32)); });
-    i0.ɵɵelementStart(1, "div", 123);
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_64_Template_div_click_0_listener() { const record_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFavoriteRecordClick(record_r33)); });
+    i0.ɵɵelementStart(1, "div", 125);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 124)(4, "div", 125);
+    i0.ɵɵelementStart(3, "div", 126)(4, "div", 127);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 126);
+    i0.ɵɵelementStart(6, "div", 128);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const record_r32 = ctx.$implicit;
+    const record_r33 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r32.entityId));
+    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r33.entityId));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(record_r32.recordName || record_r32.recordId);
+    i0.ɵɵtextInterpolate(record_r33.recordName || record_r33.recordId);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(record_r32.entityName);
+    i0.ɵɵtextInterpolate(record_r33.entityName);
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelementStart(0, "div", 104);
     i0.ɵɵtext(1, "No favorite records");
     i0.ɵɵelementEnd();
 } }
 function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74)(1, "div", 75)(2, "div", 76);
-    i0.ɵɵelement(3, "i", 77);
-    i0.ɵɵelementStart(4, "input", 78, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.entityFilterText, $event) || (ctx_r1.entityFilterText = $event); return i0.ɵɵresetView($event); });
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "div", 78);
+    i0.ɵɵelement(3, "i", 79);
+    i0.ɵɵelementStart(4, "input", 80, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.entityFilterText, $event) || (ctx_r1.entityFilterText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template, 2, 0, "button", 79)(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template, 2, 0, "span", 80);
+    i0.ɵɵconditionalCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template, 2, 0, "button", 81)(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template, 2, 0, "span", 82);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 81)(9, "span", 82);
+    i0.ɵɵelementStart(8, "div", 83)(9, "span", 84);
     i0.ɵɵtext(10);
     i0.ɵɵconditionalCreate(11, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_11_Template, 1, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 83)(13, "button", 84);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setHomeViewMode("all")); });
+    i0.ɵɵelementStart(12, "div", 85)(13, "button", 86);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setHomeViewMode("all")); });
     i0.ɵɵtext(14, " All Entities ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 84);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setHomeViewMode("favorites")); });
-    i0.ɵɵelement(16, "i", 85);
+    i0.ɵɵelementStart(15, "button", 86);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setHomeViewMode("favorites")); });
+    i0.ɵɵelement(16, "i", 87);
     i0.ɵɵtext(17, " My Favorites ");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(18, "div", 86);
-    i0.ɵɵconditionalCreate(19, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_Template, 3, 0, "div", 87)(20, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_Template, 2, 0);
-    i0.ɵɵconditionalCreate(21, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_21_Template, 4, 1, "div", 88);
-    i0.ɵɵconditionalCreate(22, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_22_Template, 6, 0, "div", 89);
+    i0.ɵɵelementStart(18, "div", 88);
+    i0.ɵɵconditionalCreate(19, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_19_Template, 3, 0, "div", 89)(20, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_20_Template, 2, 0);
+    i0.ɵɵconditionalCreate(21, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_21_Template, 4, 1, "div", 90);
+    i0.ɵɵconditionalCreate(22, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_22_Template, 6, 0, "div", 91);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 90)(24, "div", 91)(25, "h3");
+    i0.ɵɵelementStart(23, "div", 92)(24, "div", 93)(25, "h3");
     i0.ɵɵtext(26, "Quick Access");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "button", 92);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessPanel()); });
-    i0.ɵɵelement(28, "i", 93);
+    i0.ɵɵelementStart(27, "button", 94);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessPanel()); });
+    i0.ɵɵelement(28, "i", 95);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 94)(30, "div", 95)(31, "div", 96);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_31_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("recentRecords")); });
-    i0.ɵɵelement(32, "i", 97);
+    i0.ɵɵelementStart(29, "div", 96)(30, "div", 97)(31, "div", 98);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_31_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("recentRecords")); });
+    i0.ɵɵelement(32, "i", 99);
     i0.ɵɵelementStart(33, "span");
     i0.ɵɵtext(34, "Recent Records");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "span", 98);
+    i0.ɵɵelementStart(35, "span", 100);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(37, "i", 99);
+    i0.ɵɵelement(37, "i", 101);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 100);
-    i0.ɵɵrepeaterCreate(39, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_40_Template, 10, 5, "div", 101, _forTrack2);
-    i0.ɵɵconditionalCreate(41, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_41_Template, 2, 0, "div", 102);
+    i0.ɵɵelementStart(38, "div", 102);
+    i0.ɵɵrepeaterCreate(39, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_40_Template, 10, 5, "div", 103, _forTrack2);
+    i0.ɵɵconditionalCreate(41, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_41_Template, 2, 0, "div", 104);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 95)(43, "div", 96);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_43_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("recentEntities")); });
-    i0.ɵɵelement(44, "i", 103);
+    i0.ɵɵelementStart(42, "div", 97)(43, "div", 98);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_43_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("recentEntities")); });
+    i0.ɵɵelement(44, "i", 105);
     i0.ɵɵelementStart(45, "span");
     i0.ɵɵtext(46, "Recent Entities");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "span", 98);
+    i0.ɵɵelementStart(47, "span", 100);
     i0.ɵɵtext(48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(49, "i", 99);
+    i0.ɵɵelement(49, "i", 101);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "div", 100);
-    i0.ɵɵrepeaterCreate(51, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_52_Template, 6, 3, "div", 101, _forTrack3);
-    i0.ɵɵconditionalCreate(53, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_53_Template, 2, 0, "div", 102);
+    i0.ɵɵelementStart(50, "div", 102);
+    i0.ɵɵrepeaterCreate(51, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_52_Template, 6, 3, "div", 103, _forTrack3);
+    i0.ɵɵconditionalCreate(53, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_53_Template, 2, 0, "div", 104);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(54, "div", 95)(55, "div", 96);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_55_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("favoriteRecords")); });
-    i0.ɵɵelement(56, "i", 104);
+    i0.ɵɵelementStart(54, "div", 97)(55, "div", 98);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template_div_click_55_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleQuickAccessSection("favoriteRecords")); });
+    i0.ɵɵelement(56, "i", 106);
     i0.ɵɵelementStart(57, "span");
     i0.ɵɵtext(58, "Favorite Records");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(59, "span", 98);
+    i0.ɵɵelementStart(59, "span", 100);
     i0.ɵɵtext(60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(61, "i", 99);
+    i0.ɵɵelement(61, "i", 101);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "div", 100);
-    i0.ɵɵrepeaterCreate(63, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_64_Template, 8, 4, "div", 101, _forTrack4);
-    i0.ɵɵconditionalCreate(65, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_65_Template, 2, 0, "div", 102);
+    i0.ɵɵelementStart(62, "div", 102);
+    i0.ɵɵrepeaterCreate(63, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_64_Template, 8, 4, "div", 103, _forTrack4);
+    i0.ɵɵconditionalCreate(65, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_65_Template, 2, 0, "div", 104);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -734,7 +744,7 @@ function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template(rf
 } }
 function DataExplorerDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵconditionalCreate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template, 2, 0, "div", 72)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template, 66, 27);
+    i0.ɵɵconditionalCreate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template, 2, 0, "div", 74)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template, 66, 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -742,24 +752,24 @@ function DataExplorerDashboardComponent_Conditional_14_Template(rf, ctx) { if (r
     i0.ɵɵconditional(ctx_r1.isLoadingEntities ? 1 : 2);
 } }
 function DataExplorerDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-viewer", 128, 1);
-    i0.ɵɵlistener("viewModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_viewModeChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged($event)); })("filterTextChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filterTextChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterTextChanged($event)); })("recordSelected", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordSelected($event)); })("recordOpened", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordOpened($event)); })("dataLoaded", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_dataLoaded_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDataLoaded($event)); })("filteredCountChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filteredCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilteredCountChanged($event)); })("gridStateChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); })("selectionChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionChanged($event)); })("addToListRequested", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_addToListRequested_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddToListRequested($event)); });
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 130, 1);
+    i0.ɵɵlistener("viewModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_viewModeChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged($event)); })("filterTextChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filterTextChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterTextChanged($event)); })("recordSelected", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordSelected($event)); })("recordOpened", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordOpened($event)); })("dataLoaded", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_dataLoaded_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDataLoaded($event)); })("filteredCountChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filteredCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilteredCountChanged($event)); })("gridStateChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); })("selectionChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionChanged($event)); })("addToListRequested", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_addToListRequested_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddToListRequested($event)); })("mapRenderModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_mapRenderModeChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapRenderModeChange($event)); })("mapDisplayStateChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_mapDisplayStateChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMapDisplayStateChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("viewEntity", ctx_r1.selectedViewEntity)("viewMode", ctx_r1.state.viewMode)("filterText", ctx_r1.debouncedFilterText)("selectedRecordId", ctx_r1.state.selectedRecordId)("config", ctx_r1.viewerConfig)("gridState", ctx_r1.currentGridState)("timelineConfig", ctx_r1.currentTimelineConfig)("gridSelectionMode", "checkbox")("showGridToolbar", false)("showAddToListButton", false);
+    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("viewEntity", ctx_r1.selectedViewEntity)("viewMode", ctx_r1.state.viewMode)("filterText", ctx_r1.debouncedFilterText)("selectedRecordId", ctx_r1.state.selectedRecordId)("config", ctx_r1.viewerConfig)("gridState", ctx_r1.currentGridState)("timelineConfig", ctx_r1.currentTimelineConfig)("gridSelectionMode", "checkbox")("showGridToolbar", false)("showAddToListButton", false)("mapRenderMode", ctx_r1.state.mapRenderMode || "point")("mapDisplayState", ctx_r1.mapDisplayState);
 } }
 function DataExplorerDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 129)(1, "div", 130)(2, "button", 131);
-    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_16_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openListManagementDialog()); });
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 131)(1, "div", 132)(2, "button", 133);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_16_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openListManagementDialog()); });
     i0.ɵɵelement(3, "i", 35);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Add to List");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "mj-entity-record-detail-panel", 132);
-    i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_close_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDetailPanelClosed()); })("openRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRecord_6_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecord($event)); })("navigateToRelated", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_navigateToRelated_6_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigateToRelated($event)); })("openRelatedRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRelatedRecord_6_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRelatedRecord($event)); })("openForeignKeyRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openForeignKeyRecord_6_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenForeignKeyRecord($event)); });
+    i0.ɵɵelementStart(6, "mj-entity-record-detail-panel", 134);
+    i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_close_6_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDetailPanelClosed()); })("openRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRecord_6_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecord($event)); })("navigateToRelated", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_navigateToRelated_6_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigateToRelated($event)); })("openRelatedRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRelatedRecord_6_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRelatedRecord($event)); })("openForeignKeyRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openForeignKeyRecord_6_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenForeignKeyRecord($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -768,9 +778,9 @@ function DataExplorerDashboardComponent_Conditional_16_Template(rf, ctx) { if (r
     i0.ɵɵproperty("entity", ctx_r1.detailPanelEntity)("record", ctx_r1.selectedRecord);
 } }
 function DataExplorerDashboardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-management-dialog", 133);
-    i0.ɵɵlistener("complete", function DataExplorerDashboardComponent_Conditional_20_Template_mj_list_management_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListManagementComplete($event)); })("cancel", function DataExplorerDashboardComponent_Conditional_20_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListManagementCancel()); });
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-list-management-dialog", 135);
+    i0.ɵɵlistener("complete", function DataExplorerDashboardComponent_Conditional_20_Template_mj_list_management_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListManagementComplete($event)); })("cancel", function DataExplorerDashboardComponent_Conditional_20_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListManagementCancel()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -786,9 +796,7 @@ function DataExplorerDashboardComponent_Conditional_20_Template(rf, ctx) { if (r
 let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extends BaseDashboard {
     stateService;
     cdr;
-    router;
     recentAccessService;
-    navigationService;
     exportService;
     ngZone;
     destroy$ = new Subject();
@@ -821,6 +829,12 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
      * Use this alongside contextName for a fully customized header (e.g., "fa-solid fa-users" for CRM).
      */
     contextIcon = null;
+    /**
+     * Initial query params forwarded from the resource wrapper.
+     * On hard refresh, the shell delivers params to the wrapper (which has Data.Configuration.queryParams),
+     * not to this inner dashboard component. This input bridges that gap.
+     */
+    initialQueryParams = {};
     /**
      * Emitted when the display title should change (entity selected, record opened, etc.)
      */
@@ -860,10 +874,6 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     isLoadingEntities = true;
     // Date field dropdown state
     isDateFieldDropdownOpen = false;
-    // Flag to skip URL updates during initialization (when applying deep link)
-    skipUrlUpdates = true;
-    // Track the last URL we navigated to, to avoid reacting to our own navigation
-    lastNavigatedUrl = '';
     // Recent records from User Record Logs
     recentRecords = [];
     // Favorite records from User Favorites (non-entity favorites)
@@ -1205,25 +1215,30 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     filterDialogDisabled = false;
     // View save state
     isSavingView = false;
-    constructor(stateService, cdr, router, recentAccessService, navigationService, exportService, ngZone) {
+    constructor(stateService, cdr, recentAccessService, exportService, ngZone) {
         super();
         this.stateService = stateService;
         this.cdr = cdr;
-        this.router = router;
         this.recentAccessService = recentAccessService;
-        this.navigationService = navigationService;
         this.exportService = exportService;
         this.ngZone = ngZone;
         this.state = this.stateService.CurrentState;
     }
     async ngOnInit() {
+        super.ngOnInit();
         // Ensure UserInfoEngine is configured before we try to access user settings
         // This prevents race conditions where we try to load default view settings
         // before the user settings have been loaded from the server
         await UserInfoEngine.Instance.Config(false);
-        // Parse URL state FIRST - URL wins over persisted state
-        // This must happen before loading entities to prevent race conditions
-        const urlState = this.parseUrlState();
+        // Read initial query params — prefer params forwarded from the resource wrapper
+        // (which has Data.Configuration.queryParams from the shell), then fall back to
+        // this component's own GetQueryParams() for cases where the dashboard is used standalone.
+        const wrapperParams = this.initialQueryParams && Object.keys(this.initialQueryParams).length > 0
+            ? this.initialQueryParams
+            : null;
+        const ownParams = this.GetQueryParams();
+        const rawParams = wrapperParams || (Object.keys(ownParams).length > 0 ? ownParams : {});
+        const urlState = this.buildDeepLinkFromParams(rawParams);
         // Set context for state service (enables context-specific settings)
         await this.stateService.setContext(this.entityFilter);
         this.state = this.stateService.CurrentState;
@@ -1235,11 +1250,9 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         await this.loadEntities(urlState);
         // Apply URL state after entities are loaded
         if (urlState) {
-            // URL has state - apply it (overrides persisted state)
-            this.applyUrlState(urlState);
+            await this.applyUrlState(urlState);
         }
         else if (this.deepLink) {
-            // No URL state but @Input deepLink provided - use that
             await this.applyDeepLink(this.deepLink);
         }
         // Subscribe to state changes
@@ -1248,6 +1261,15 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             .subscribe(state => {
             const entityChanged = state.selectedEntityName !== this.state.selectedEntityName;
             this.state = state;
+            // Self-correct map mode: if a URL-sourced mode is pending and state
+            // has diverged (e.g., reset to 'point' by some init step), re-apply it.
+            // _pendingMapMode stays alive until the map component emits real state
+            // via onMapDisplayStateChange (user interaction), NOT on first state match.
+            if (this._pendingMapMode && state.mapRenderMode !== this._pendingMapMode) {
+                const mode = this._pendingMapMode;
+                this.stateService.updateState({ mapRenderMode: mode });
+                return; // Let the next subscription fire handle the rest
+            }
             // When entity changes, clear user search text and update title
             if (entityChanged) {
                 this.liveFilterText = '';
@@ -1255,10 +1277,8 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 this.emitDisplayName();
             }
             this.onStateChanged();
-            // Update URL to reflect current state (for deep linking)
-            if (!this.skipUrlUpdates) {
-                this.updateUrl();
-            }
+            // Update URL query params to reflect current state (for deep linking)
+            this.pushCurrentStateToUrl();
             this.cdr.detectChanges();
         });
         // Subscribe to breadcrumb changes
@@ -1270,9 +1290,9 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         });
         // Setup debounced filter - 500ms delay allows comfortable typing before triggering search
         // IMPORTANT: Do NOT call setSmartFilterPrompt here. Updating the state service triggers
-        // URL updates via the shell's workspace sync, which fires NavigationEnd, which triggers
-        // applyUrlState, which clears the filter text. The debouncedFilterText flows directly
-        // to the entity-viewer via [filterText] binding — no state service involvement needed.
+        // URL updates (via pushCurrentStateToUrl → UpdateQueryParams), which in turn can trigger
+        // OnQueryParamsChanged, which would clear the filter text. The debouncedFilterText flows
+        // directly to the entity-viewer via [filterText] binding — no state service involvement needed.
         this.filterInput$
             .pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(filterText => {
@@ -1294,25 +1314,8 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             this.favoriteRecords = records;
             this.cdr.detectChanges();
         });
-        // Subscribe to router NavigationEnd events for back/forward button support
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
-            .subscribe(event => {
-            // Only react to navigation events that weren't triggered by us
-            // Normalize URLs by decoding to handle + vs %20 encoding differences
-            // Note: decodeURIComponent doesn't decode +, so we also replace + with space
-            const currentUrl = event.urlAfterRedirects || event.url;
-            const normalizedCurrentUrl = decodeURIComponent(currentUrl).replace(/\+/g, ' ');
-            const normalizedLastUrl = decodeURIComponent(this.lastNavigatedUrl).replace(/\+/g, ' ');
-            const isExternal = normalizedCurrentUrl !== normalizedLastUrl;
-            if (isExternal) {
-                this.onExternalNavigation(currentUrl);
-            }
-        });
-        // Enable URL updates now that initialization is complete
-        this.skipUrlUpdates = false;
-        // Update URL to reflect current state (whether from URL, deepLink, or persisted)
-        this.updateUrl();
+        // Push initial state to URL (covers deepLink and persisted state)
+        this.pushCurrentStateToUrl();
         // Notify that loading is complete (for resource wrapper integration)
         this.NotifyLoadComplete();
     }
@@ -1622,7 +1625,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             return null;
         }
         try {
-            const parsed = JSON.parse(view.GridState);
+            const parsed = view.GridStateObject;
             // Validate structure - expect columnSettings array
             if (parsed && Array.isArray(parsed.columnSettings)) {
                 // Validate columns and sorts against current entity to prevent stale
@@ -1767,17 +1770,17 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 newView.UserID = md.CurrentUser.ID;
                 newView.IsShared = event.isShared;
                 newView.IsDefault = false;
-                // Set GridState and SortState
+                // Set state via typed object setters
                 if (gridState) {
-                    newView.GridState = JSON.stringify(gridState);
+                    newView.GridStateObject = gridState;
                 }
                 if (sortState) {
-                    newView.SortState = JSON.stringify(sortState);
+                    newView.SortStateObject = sortState;
                 }
                 // Set Smart Filter settings
                 newView.SmartFilterEnabled = event.smartFilterEnabled;
                 newView.SmartFilterPrompt = event.smartFilterPrompt;
-                // BUG-008: Always set FilterState consistently
+                // BUG-008: Always set FilterState consistently (raw string — Kendo CompositeFilterDescriptor shape)
                 newView.FilterState = filterStateJson;
                 const saved = await newView.Save();
                 if (saved) {
@@ -1806,17 +1809,17 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 this.selectedViewEntity.Name = event.name;
                 this.selectedViewEntity.Description = event.description;
                 this.selectedViewEntity.IsShared = event.isShared;
-                // Update GridState and SortState
+                // Update state via typed object setters
                 if (gridState) {
-                    this.selectedViewEntity.GridState = JSON.stringify(gridState);
+                    this.selectedViewEntity.GridStateObject = gridState;
                 }
                 if (sortState) {
-                    this.selectedViewEntity.SortState = JSON.stringify(sortState);
+                    this.selectedViewEntity.SortStateObject = sortState;
                 }
                 // Update Smart Filter settings
                 this.selectedViewEntity.SmartFilterEnabled = event.smartFilterEnabled;
                 this.selectedViewEntity.SmartFilterPrompt = event.smartFilterPrompt;
-                // BUG-008: Always set FilterState consistently
+                // BUG-008: Always set FilterState consistently (raw string — Kendo CompositeFilterDescriptor shape)
                 this.selectedViewEntity.FilterState = filterStateJson;
                 const saved = await this.selectedViewEntity.Save();
                 if (saved) {
@@ -1929,7 +1932,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 DisplayName: col.displayName,
                 userDisplayName: col.userDisplayName, // Include user-defined column alias
                 hidden: false, // Visible columns only
-                width: col.width || null,
+                width: col.width || undefined,
                 orderIndex: idx,
                 format: col.format // Include column format settings
             }));
@@ -1947,7 +1950,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 Name: f.Name,
                 DisplayName: f.DisplayNameOrName,
                 hidden: false,
-                width: f.DefaultColumnWidth || null,
+                width: f.DefaultColumnWidth || undefined,
                 orderIndex: idx
             }));
             if (columnSettings.length === 0) {
@@ -1996,7 +1999,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         if (event.sortItems && event.sortItems.length > 0) {
             return event.sortItems.map(item => ({
                 field: item.field,
-                direction: item.direction // 'asc' or 'desc'
+                direction: item.direction
             }));
         }
         // Fallback to deprecated sortField for backward compatibility
@@ -2165,20 +2168,20 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         let sortCount = 0;
         let aggregateCount = 0;
         try {
-            const gridState = view.GridState ? JSON.parse(view.GridState) : null;
-            if (Array.isArray(gridState)) {
-                columnCount = gridState.filter((c) => !c['hidden']).length;
+            const gridState = view.GridStateObject;
+            if (gridState?.columnSettings && Array.isArray(gridState.columnSettings)) {
+                columnCount = gridState.columnSettings.filter((c) => !c.hidden).length;
             }
         }
         catch { /* ignore */ }
         try {
-            const filterState = view.FilterState ? JSON.parse(view.FilterState) : null;
+            const filterState = view.FilterStateObject;
             if (filterState?.filters?.length)
                 filterCount = filterState.filters.length;
         }
         catch { /* ignore */ }
         try {
-            const sortState = view.SortState ? JSON.parse(view.SortState) : null;
+            const sortState = view.SortStateObject;
             if (Array.isArray(sortState))
                 sortCount = sortState.length;
         }
@@ -2321,6 +2324,41 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             this.stateService.setViewModified(true);
         }
     }
+    /**
+     * Get the current map display state for passing to the EntityViewer/MapView.
+     */
+    get mapDisplayState() {
+        if (this.state.mapZoom == null) {
+            return null;
+        }
+        return {
+            ZoomLevel: this.state.mapZoom,
+            CenterLat: this.state.mapCenterLat ?? 20,
+            CenterLng: this.state.mapCenterLng ?? 0
+        };
+    }
+    /**
+     * Handle map display state changes from the map component.
+     * Persists zoom, center, and render mode across page reloads.
+     */
+    /**
+     * Handle map render mode change (user clicked mode button in map component).
+     */
+    onMapRenderModeChange(mode) {
+        this._pendingMapMode = null; // User-initiated — clear any pending URL mode
+        this.stateService.updateState({ mapRenderMode: mode });
+    }
+    /**
+     * Handle map display state change (zoom/pan — fires on moveend).
+     */
+    onMapDisplayStateChange(state) {
+        this._pendingMapMode = null; // Map is interactive now — clear pending
+        this.stateService.updateState({
+            mapZoom: state.ZoomLevel ?? null,
+            mapCenterLat: state.CenterLat ?? null,
+            mapCenterLng: state.CenterLng ?? null
+        });
+    }
     /**
      * Handle smart filter change from dashboard header
      */
@@ -2820,6 +2858,12 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     }
     /** Record ID to select once data loads (from deep link) */
     pendingRecordSelection = null;
+    /**
+     * Pending map mode from URL that must survive initialization state resets.
+     * Set during applyUrlState, cleared once state matches or after first successful re-apply.
+     * The state subscription self-corrects: any time state diverges from this value, it re-applies.
+     */
+    _pendingMapMode = null;
     // ========================================
     // BREADCRUMB NAVIGATION
     // ========================================
@@ -2893,50 +2937,98 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         return `fa-solid fa-${icon}`;
     }
     // ========================================
-    // URL DEEP LINKING
+    // URL DEEP LINKING (Framework Query Param Lifecycle)
     // ========================================
     /**
-     * Parse URL query string and return a deep link object.
+     * Build a DataExplorerDeepLink from framework query params.
      * Returns null if no relevant params found.
-     *
-     * Query params:
-     * - entity: Selected entity name
-     * - record: Selected record ID (URL segment format via CompositeKey)
-     * - filter: Current filter text
-     * - view: View mode (grid or cards)
-     */
-    parseUrlState() {
-        const url = this.router.url;
-        const queryIndex = url.indexOf('?');
-        if (queryIndex === -1) {
-            return null;
-        }
-        const queryString = url.substring(queryIndex + 1);
-        const params = new URLSearchParams(queryString);
-        const entity = params.get('entity');
-        const record = params.get('record');
-        const filter = params.get('filter');
-        const view = params.get('view');
-        // If no params, return null
-        if (!entity && !record && !filter && !view) {
+     */
+    buildDeepLinkFromParams(params) {
+        const entity = params['entity'] || null;
+        const record = params['record'] || null;
+        const filterParam = params['filter'] || null;
+        const view = params['view'] || null;
+        const viewId = params['viewId'] || null;
+        const mapMode = params['mapMode'] || null;
+        if (!entity && !record && !filterParam && !view && !viewId && !mapMode) {
             return null;
         }
         return {
             entity: entity || undefined,
             record: record || undefined,
-            filter: filter || undefined,
-            viewMode: view || undefined
+            filter: filterParam || undefined,
+            viewMode: view || undefined,
+            viewId: viewId || undefined,
+            mapMode: mapMode || undefined
         };
     }
+    /**
+     * React to back/forward navigation or deep-link entry.
+     * The base class calls this when query params change via popstate or deeplink.
+     */
+    OnQueryParamsChanged(params, _source) {
+        this.applyParams(params);
+    }
+    /**
+     * Public entry point for the resource wrapper to forward query param changes.
+     * The wrapper receives OnQueryParamsChanged from the framework and delegates here.
+     */
+    HandleQueryParamsChanged(params, _source) {
+        this.applyParams(params);
+    }
+    /**
+     * Apply a params map (from framework query params) to the component state.
+     */
+    async applyParams(params) {
+        const deepLink = this.buildDeepLinkFromParams(params);
+        if (deepLink) {
+            await this.applyUrlState(deepLink);
+        }
+        else {
+            // No params — go to home view
+            this.selectedEntity = null;
+            this.selectedRecord = null;
+            this.detailPanelEntity = null;
+            this.stateService.selectEntity(null);
+            this.stateService.closeDetailPanel();
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Push current navigation state to the URL via the framework.
+     * Called whenever state changes so users can bookmark/share URLs.
+     */
+    pushCurrentStateToUrl() {
+        const hasEntity = !!this.state.selectedEntityName;
+        const hasViewId = !!(this.state.selectedViewId && hasEntity);
+        const queryParams = {
+            entity: this.state.selectedEntityName || null,
+            record: (this.state.selectedRecordId && hasEntity) ? this.state.selectedRecordId : null,
+            filter: null, // Never in URL — filters live in saved views (DB), not query strings
+            view: (this.state.viewMode && this.state.viewMode !== 'grid') ? this.state.viewMode : null,
+            viewId: hasViewId ? this.state.selectedViewId : null,
+            mapMode: this.state.viewMode === 'map' ? (this.state.mapRenderMode || 'point') : null
+        };
+        this.UpdateQueryParams(queryParams);
+    }
     /**
      * Apply URL state to the component.
      * Used both during init and for popstate handling.
      */
-    applyUrlState(urlState) {
-        // Apply view mode if specified
+    async applyUrlState(urlState) {
+        // Store URL-sourced map mode BEFORE switching to map view — various init steps
+        // can reset mapRenderMode to 'point'. The state subscription self-corrects using this.
+        if (urlState.mapMode && ['point', 'choropleth', 'heatmap'].includes(urlState.mapMode)) {
+            this._pendingMapMode = urlState.mapMode;
+        }
+        // Apply view mode (may trigger map component creation if switching to 'map')
         if (urlState.viewMode) {
             this.stateService.setViewMode(urlState.viewMode);
         }
+        // Apply map render mode to state
+        if (this._pendingMapMode) {
+            this.stateService.updateState({ mapRenderMode: this._pendingMapMode });
+        }
         // Navigate to entity if specified
         if (urlState.entity) {
             const entity = this.entities.find(e => e.Name.toLowerCase() === urlState.entity.toLowerCase());
@@ -2948,12 +3040,19 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                     this.selectedEntity = entity;
                     this.stateService.selectEntity(entity.Name);
                 }
-                // Apply filter if specified (to smart filter state, not user search)
-                if (urlState.filter) {
-                    this.stateService.setSmartFilterPrompt(urlState.filter);
+                // Restore saved view by ID if specified
+                if (urlState.viewId) {
+                    await this.restoreViewFromUrl(urlState.viewId, entity);
                 }
-                else if (entityChanged) {
-                    // Only clear filter if entity changed (selectEntity already handles this)
+                else {
+                    // No specific view — clear view selection to use default
+                    this.selectedViewEntity = null;
+                    this.stateService.selectView(null);
+                    this.currentGridState = this.loadUserDefaultGridState();
+                }
+                // Filters live in saved views (DB), never in URL query strings.
+                // Clear smart filter on entity change when no specific view is selected.
+                if (entityChanged && !urlState.viewId) {
                     this.stateService.setSmartFilterPrompt('');
                 }
                 // User search text is always cleared when applying URL state
@@ -3004,111 +3103,43 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         this.cdr.detectChanges();
     }
     /**
-     * Emit the current display name based on selected entity/record.
-     */
-    emitDisplayName() {
-        if (this.state.selectedEntityName) {
-            this.DisplayNameChanged.emit(this.state.selectedEntityName);
+     * Restore a saved view from the URL's viewId parameter.
+     * Looks up the view by ID, sets it as selected, and applies its grid state and filters.
+     * Must be async because UserViewEngine's cache may not be populated yet on cold page loads.
+     */
+    async restoreViewFromUrl(viewId, entity) {
+        // Ensure the view engine cache is populated before querying —
+        // on hard refresh, the cache may be empty and GetAccessibleViewsForEntity returns []
+        await UserViewEngine.Instance.Config(false);
+        const accessibleViews = UserViewEngine.Instance.GetAccessibleViewsForEntity(entity.ID);
+        const view = accessibleViews.find(v => UUIDsEqual(v.ID, viewId)) || null;
+        if (view) {
+            this.selectedViewEntity = view;
+            this.stateService.selectView(viewId);
+            this.currentGridState = this.parseViewGridState(view);
+            // Apply the view's smart filter if it has one
+            if (view.SmartFilterEnabled && view.SmartFilterPrompt) {
+                this.stateService.setSmartFilterPrompt(view.SmartFilterPrompt);
+            }
         }
         else {
-            this.DisplayNameChanged.emit('Data');
+            console.warn('[DataExplorer] restoreViewFromUrl: view NOT FOUND, falling back to default. viewId=', viewId);
+            this.selectedViewEntity = null;
+            this.stateService.selectView(null);
+            this.currentGridState = this.loadUserDefaultGridState();
         }
+        this.cdr.detectChanges();
     }
     /**
-     * Update the URL query string to reflect current navigation state.
-     * This enables deep linking - users can bookmark or share URLs to specific views.
-     * Called immediately on state changes (not debounced).
-     * Uses NavigationService for proper URL management that respects app-scoped routes.
+     * Emit the current display name based on selected entity/record.
      */
-    updateUrl() {
-        const queryParams = {};
-        // Add entity if selected
+    emitDisplayName() {
         if (this.state.selectedEntityName) {
-            queryParams['entity'] = this.state.selectedEntityName;
-        }
-        else {
-            queryParams['entity'] = null;
-        }
-        // Add record if selected (only if entity is also selected)
-        if (this.state.selectedRecordId && this.state.selectedEntityName) {
-            queryParams['record'] = this.state.selectedRecordId;
-        }
-        else {
-            queryParams['record'] = null;
-        }
-        // Add filter if present (only if entity is also selected)
-        if (this.state.smartFilterPrompt && this.state.selectedEntityName) {
-            queryParams['filter'] = this.state.smartFilterPrompt;
-        }
-        else {
-            queryParams['filter'] = null;
-        }
-        // Add view mode if not default (grid is default)
-        if (this.state.viewMode && this.state.viewMode !== 'grid') {
-            queryParams['view'] = this.state.viewMode;
-        }
-        else {
-            queryParams['view'] = null;
-        }
-        // Use NavigationService to update query params properly
-        this.navigationService.UpdateActiveTabQueryParams(queryParams);
-    }
-    /**
-     * Handle external navigation (back/forward buttons).
-     * Parses the URL and applies the state without triggering a new navigation.
-     */
-    onExternalNavigation(url) {
-        // Check if this URL is for our component (contains our base path)
-        const currentPath = this.router.url.split('?')[0];
-        const newPath = url.split('?')[0];
-        // Only handle if we're still on the same base path (same dashboard instance)
-        if (currentPath !== newPath) {
-            return; // Different route entirely, shell will handle it
-        }
-        // Parse the new URL state
-        const urlState = this.parseUrlFromString(url);
-        // Apply the state without triggering URL updates
-        this.skipUrlUpdates = true;
-        if (urlState) {
-            this.applyUrlState(urlState);
+            this.DisplayNameChanged.emit(this.state.selectedEntityName);
         }
         else {
-            // No params means go to home view
-            this.selectedEntity = null;
-            this.selectedRecord = null;
-            this.detailPanelEntity = null;
-            this.stateService.selectEntity(null);
-            this.stateService.closeDetailPanel();
-        }
-        this.skipUrlUpdates = false;
-        // Update the tracked URL
-        this.lastNavigatedUrl = url;
-        this.cdr.detectChanges();
-    }
-    /**
-     * Parse URL state from a URL string (used for external navigation).
-     */
-    parseUrlFromString(url) {
-        const queryIndex = url.indexOf('?');
-        if (queryIndex === -1) {
-            return null;
-        }
-        const queryString = url.substring(queryIndex + 1);
-        const params = new URLSearchParams(queryString);
-        const entity = params.get('entity');
-        const record = params.get('record');
-        const filterParam = params.get('filter');
-        const view = params.get('view');
-        // If no params, return null
-        if (!entity && !record && !filterParam && !view) {
-            return null;
+            this.DisplayNameChanged.emit('Data');
         }
-        return {
-            entity: entity || undefined,
-            record: record || undefined,
-            filter: filterParam || undefined,
-            viewMode: view || undefined
-        };
     }
     // ========================================
     // HOME SCREEN ACTIONS
@@ -3497,7 +3528,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
         this.listManagementConfig = null;
         this.cdr.detectChanges();
     }
-    static ɵfac = function DataExplorerDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataExplorerDashboardComponent)(i0.ɵɵdirectiveInject(i1.ExplorerStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i3.RecentAccessService), i0.ɵɵdirectiveInject(i4.NavigationService), i0.ɵɵdirectiveInject(i5.ExportService), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵfac = function DataExplorerDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataExplorerDashboardComponent)(i0.ɵɵdirectiveInject(i1.ExplorerStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2.RecentAccessService), i0.ɵɵdirectiveInject(i3.ExportService), i0.ɵɵdirectiveInject(i0.NgZone)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataExplorerDashboardComponent, selectors: [["mj-data-explorer-dashboard"]], viewQuery: function DataExplorerDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(ViewSelectorComponent, 5)(EntityViewerComponent, 5)(ViewConfigPanelComponent, 5);
         } if (rf & 2) {
@@ -3508,7 +3539,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewConfigPanelRef = _t.first);
         } }, hostBindings: function DataExplorerDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function DataExplorerDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { entityFilter: "entityFilter", deepLink: "deepLink", contextName: "contextName", contextIcon: "contextIcon" }, outputs: { DisplayNameChanged: "DisplayNameChanged" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 24, vars: 40, consts: [["filterInput", ""], ["entityViewer", ""], [1, "data-explorer-container"], [1, "navigation-panel", 3, "collapsed", "width"], [1, "content-area"], [1, "breadcrumb-bar"], [1, "content-header"], [1, "header-left"], [1, "header-center"], [1, "smart-filter-container"], [1, "header-right"], ["title", "Recents & Favorites", 1, "header-action-btn", 3, "active"], [1, "content-body"], [1, "home-view-concept-d"], [3, "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig", "gridSelectionMode", "showGridToolbar", "showAddToListButton"], [1, "detail-panel", 3, "width"], [3, "close", "save", "saveDefaults", "delete", "duplicate", "openFilterDialogRequest", "entity", "viewEntity", "isOpen", "currentGridState", "externalFilterState", "isSaving", "DefaultSaveAsNew", "PendingNewViewName", "PendingNewViewDescription", "PendingNewViewIsShared"], [3, "close", "apply", "isOpen", "fields", "filter", "disabled"], [3, "closed", "visible", "config"], [3, "config", "visible"], [3, "Save", "Close", "OpenAdvanced", "IsOpen", "ViewEntity", "EntityName", "Summary", "IsSaving", "DefaultSaveAsNew"], [3, "Duplicate", "Cancel", "IsOpen", "SourceViewName", "Summary"], [3, "Action", "Cancel", "IsOpen", "ViewName"], [1, "navigation-panel"], [3, "entitySelected", "toggleCollapse", "sectionToggled", "openRecord", "selectRecord", "expandAndFocus", "entities", "appEntityGroups", "selectedEntityName", "favorites", "recentItems", "collapsed", "allowedEntityNames", "favoritesSectionExpanded", "recentSectionExpanded", "entitiesSectionExpanded", "viewsSectionExpanded"], [1, "breadcrumb-item", 3, "click", "title"], [1, "breadcrumb-icon", 3, "class"], [1, "breadcrumb-label"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-icon"], [1, "entity-icon"], [1, "entity-title"], [1, "record-count"], [3, "viewSelected", "saveViewRequested", "manageViewsRequested", "openInTabRequested", "configureViewRequested", "createNewRecordRequested", "exportRequested", "duplicateViewRequested", "quickSaveRequested", "revertRequested", "entity", "selectedViewId", "viewModified"], [1, "header-action-btn", 3, "click", "disabled", "title"], [1, "fa-solid", "fa-list-check"], [1, "selection-badge"], [1, "entity-icon", 3, "class"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", "placeholder", "Filter records... (press / to focus)", 1, "smart-filter-input", 3, "input", "value"], [1, "clear-filter-btn"], [1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "view-mode-toggle"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], [1, "date-field-selector-container"], [1, "date-field-backdrop"], [1, "date-field-selector-wrapper"], [1, "date-field-selector-button", 3, "click", "disabled"], [1, "fa-solid", "fa-calendar-days", "date-field-icon"], [1, "date-field-name"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow", 3, "rotated"], [1, "date-field-dropdown-panel"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [1, "date-field-backdrop", 3, "click"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow"], [1, "date-field-dropdown-item", 3, "selected"], [1, "date-field-dropdown-item", 3, "click"], [1, "fa-regular", "fa-calendar", "item-icon"], [1, "item-name"], [1, "fa-solid", "fa-check", "selected-check"], ["title", "Recents & Favorites", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "qa-badge"], [1, "loading-state"], ["text", "Loading entities...", "size", "medium"], [1, "home-main-area"], [1, "search-hero"], [1, "search-hero-container"], [1, "fa-solid", "fa-magnifying-glass", "search-hero-icon"], ["type", "text", "placeholder", "Search entities...", 1, "search-hero-input", 3, "ngModelChange", "ngModel"], [1, "search-hero-clear"], [1, "search-hero-shortcut"], [1, "search-meta-row"], [1, "search-entity-count"], [1, "pill-toggle"], [1, "pill-btn", 3, "click"], [1, "fa-solid", "fa-star"], [1, "entity-groups-area"], [1, "entity-item-grid"], [1, "home-no-results"], [1, "empty-state"], [1, "quick-access-panel"], [1, "qa-header"], [1, "qa-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "qa-body"], [1, "qa-section"], [1, "qa-section-header", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left", "qa-section-icon"], [1, "qa-section-count"], [1, "fa-solid", "fa-chevron-down", "qa-section-chevron"], [1, "qa-section-body"], [1, "qa-item"], [1, "qa-empty"], [1, "fa-solid", "fa-table", "qa-section-icon"], [1, "fa-solid", "fa-star", "qa-section-icon", 2, "color", "var(--mj-status-warning)"], [1, "search-hero-clear", 3, "click"], [1, "entity-item", 3, "title"], [1, "entity-item", 3, "click", "title"], [1, "entity-item-icon"], [1, "entity-item-text"], [1, "entity-item-name"], [1, "entity-item-desc"], [1, "entity-item-fav", 3, "click", "title"], [1, "app-group"], [1, "app-group-header", 3, "click"], [1, "app-group-icon"], [1, "app-group-name"], [1, "app-group-count"], [1, "fa-solid", "fa-chevron-right", "app-group-chevron"], [1, "app-group-entities"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fa-solid", "fa-database", "empty-icon"], [1, "qa-item", 3, "click"], [1, "qa-item-icon"], [1, "qa-item-info"], [1, "qa-item-name"], [1, "qa-item-meta"], [1, "qa-item-time"], [3, "viewModeChange", "filterTextChange", "recordSelected", "recordOpened", "dataLoaded", "filteredCountChanged", "gridStateChanged", "selectionChanged", "addToListRequested", "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig", "gridSelectionMode", "showGridToolbar", "showAddToListButton"], [1, "detail-panel"], [1, "detail-panel-actions"], ["title", "Add to List", 1, "detail-action-btn", 3, "click"], [3, "close", "openRecord", "navigateToRelated", "openRelatedRecord", "openForeignKeyRecord", "entity", "record"], [3, "complete", "cancel", "config", "visible"]], template: function DataExplorerDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { entityFilter: "entityFilter", deepLink: "deepLink", contextName: "contextName", contextIcon: "contextIcon", initialQueryParams: "initialQueryParams" }, outputs: { DisplayNameChanged: "DisplayNameChanged" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 24, vars: 40, consts: [["filterInput", ""], ["entityViewer", ""], [1, "data-explorer-container"], [1, "navigation-panel", 3, "collapsed", "width"], [1, "content-area"], [1, "breadcrumb-bar"], [1, "content-header"], [1, "header-left"], [1, "header-center"], [1, "smart-filter-container"], [1, "header-right"], ["title", "Recents & Favorites", 1, "header-action-btn", 3, "active"], [1, "content-body"], [1, "home-view-concept-d"], [3, "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig", "gridSelectionMode", "showGridToolbar", "showAddToListButton", "mapRenderMode", "mapDisplayState"], [1, "detail-panel", 3, "width"], [3, "close", "save", "saveDefaults", "delete", "duplicate", "openFilterDialogRequest", "entity", "viewEntity", "isOpen", "currentGridState", "externalFilterState", "isSaving", "DefaultSaveAsNew", "PendingNewViewName", "PendingNewViewDescription", "PendingNewViewIsShared"], [3, "close", "apply", "isOpen", "fields", "filter", "disabled"], [3, "closed", "visible", "config"], [3, "config", "visible"], [3, "Save", "Close", "OpenAdvanced", "IsOpen", "ViewEntity", "EntityName", "Summary", "IsSaving", "DefaultSaveAsNew"], [3, "Duplicate", "Cancel", "IsOpen", "SourceViewName", "Summary"], [3, "Action", "Cancel", "IsOpen", "ViewName"], [1, "navigation-panel"], [3, "entitySelected", "toggleCollapse", "sectionToggled", "openRecord", "selectRecord", "expandAndFocus", "entities", "appEntityGroups", "selectedEntityName", "favorites", "recentItems", "collapsed", "allowedEntityNames", "favoritesSectionExpanded", "recentSectionExpanded", "entitiesSectionExpanded", "viewsSectionExpanded"], [1, "breadcrumb-item", 3, "click", "title"], [1, "breadcrumb-icon", 3, "class"], [1, "breadcrumb-label"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-icon"], [1, "entity-icon"], [1, "entity-title"], [1, "record-count"], [3, "viewSelected", "saveViewRequested", "manageViewsRequested", "openInTabRequested", "configureViewRequested", "createNewRecordRequested", "exportRequested", "duplicateViewRequested", "quickSaveRequested", "revertRequested", "entity", "selectedViewId", "viewModified"], [1, "header-action-btn", 3, "click", "disabled", "title"], [1, "fa-solid", "fa-list-check"], [1, "selection-badge"], [1, "entity-icon", 3, "class"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", "placeholder", "Filter records... (press / to focus)", 1, "smart-filter-input", 3, "input", "value"], [1, "clear-filter-btn"], [1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "view-specific-controls"], [1, "view-mode-toggle"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Timeline View", 1, "toggle-btn", 3, "active"], ["title", "Map View", 1, "toggle-btn", 3, "active"], [1, "date-field-selector-container"], [1, "date-field-backdrop"], [1, "date-field-selector-wrapper"], [1, "date-field-selector-button", 3, "click", "disabled"], [1, "fa-solid", "fa-calendar-days", "date-field-icon"], [1, "date-field-name"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow", 3, "rotated"], [1, "date-field-dropdown-panel"], [1, "view-specific-btn", 3, "click", "title"], [1, "date-field-backdrop", 3, "click"], [1, "fa-solid", "fa-chevron-down", "date-field-arrow"], [1, "date-field-dropdown-item", 3, "selected"], [1, "date-field-dropdown-item", 3, "click"], [1, "fa-regular", "fa-calendar", "item-icon"], [1, "item-name"], [1, "fa-solid", "fa-check", "selected-check"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], ["title", "Map View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-map-location-dot"], ["title", "Recents & Favorites", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "qa-badge"], [1, "loading-state"], ["text", "Loading entities...", "size", "medium"], [1, "home-main-area"], [1, "search-hero"], [1, "search-hero-container"], [1, "fa-solid", "fa-magnifying-glass", "search-hero-icon"], ["type", "text", "placeholder", "Search entities...", 1, "search-hero-input", 3, "ngModelChange", "ngModel"], [1, "search-hero-clear"], [1, "search-hero-shortcut"], [1, "search-meta-row"], [1, "search-entity-count"], [1, "pill-toggle"], [1, "pill-btn", 3, "click"], [1, "fa-solid", "fa-star"], [1, "entity-groups-area"], [1, "entity-item-grid"], [1, "home-no-results"], [1, "empty-state"], [1, "quick-access-panel"], [1, "qa-header"], [1, "qa-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "qa-body"], [1, "qa-section"], [1, "qa-section-header", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left", "qa-section-icon"], [1, "qa-section-count"], [1, "fa-solid", "fa-chevron-down", "qa-section-chevron"], [1, "qa-section-body"], [1, "qa-item"], [1, "qa-empty"], [1, "fa-solid", "fa-table", "qa-section-icon"], [1, "fa-solid", "fa-star", "qa-section-icon", 2, "color", "var(--mj-status-warning)"], [1, "search-hero-clear", 3, "click"], [1, "entity-item", 3, "title"], [1, "entity-item", 3, "click", "title"], [1, "entity-item-icon"], [1, "entity-item-text"], [1, "entity-item-name"], [1, "entity-item-desc"], [1, "entity-item-fav", 3, "click", "title"], [1, "app-group"], [1, "app-group-header", 3, "click"], [1, "app-group-icon"], [1, "app-group-name"], [1, "app-group-count"], [1, "fa-solid", "fa-chevron-right", "app-group-chevron"], [1, "app-group-entities"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fa-solid", "fa-database", "empty-icon"], [1, "qa-item", 3, "click"], [1, "qa-item-icon"], [1, "qa-item-info"], [1, "qa-item-name"], [1, "qa-item-meta"], [1, "qa-item-time"], [3, "viewModeChange", "filterTextChange", "recordSelected", "recordOpened", "dataLoaded", "filteredCountChanged", "gridStateChanged", "selectionChanged", "addToListRequested", "mapRenderModeChange", "mapDisplayStateChange", "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState", "timelineConfig", "gridSelectionMode", "showGridToolbar", "showAddToListButton", "mapRenderMode", "mapDisplayState"], [1, "detail-panel"], [1, "detail-panel-actions"], ["title", "Add to List", 1, "detail-action-btn", 3, "click"], [3, "close", "openRecord", "navigateToRelated", "openRelatedRecord", "openForeignKeyRecord", "entity", "record"], [3, "complete", "cancel", "config", "visible"]], template: function DataExplorerDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵconditionalCreate(1, DataExplorerDashboardComponent_Conditional_1_Template, 2, 16, "div", 3);
             i0.ɵɵelementStart(2, "div", 4);
@@ -3520,11 +3551,11 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵconditionalCreate(9, DataExplorerDashboardComponent_Conditional_9_Template, 5, 2, "div", 9);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "div", 10);
-            i0.ɵɵconditionalCreate(11, DataExplorerDashboardComponent_Conditional_11_Template, 7, 6);
+            i0.ɵɵconditionalCreate(11, DataExplorerDashboardComponent_Conditional_11_Template, 8, 7);
             i0.ɵɵconditionalCreate(12, DataExplorerDashboardComponent_Conditional_12_Template, 3, 3, "button", 11);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(13, "div", 12);
-            i0.ɵɵconditionalCreate(14, DataExplorerDashboardComponent_Conditional_14_Template, 3, 1, "div", 13)(15, DataExplorerDashboardComponent_Conditional_15_Template, 2, 11, "mj-entity-viewer", 14);
+            i0.ɵɵconditionalCreate(14, DataExplorerDashboardComponent_Conditional_14_Template, 3, 1, "div", 13)(15, DataExplorerDashboardComponent_Conditional_15_Template, 2, 13, "mj-entity-viewer", 14);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(16, DataExplorerDashboardComponent_Conditional_16_Template, 7, 4, "div", 15);
             i0.ɵɵelementStart(17, "mj-view-config-panel", 16);
@@ -3581,7 +3612,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵproperty("IsOpen", ctx.showDuplicateDialog)("SourceViewName", ctx.duplicateSourceViewName)("Summary", ctx.duplicateSummary);
             i0.ɵɵadvance();
             i0.ɵɵproperty("IsOpen", ctx.showSharedViewWarning)("ViewName", (ctx.selectedViewEntity == null ? null : ctx.selectedViewEntity.Name) ?? "");
-        } }, dependencies: [i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.EntityViewerComponent, i7.EntityRecordDetailPanelComponent, i7.ViewConfigPanelComponent, i7.QuickSaveDialogComponent, i7.DuplicateViewDialogComponent, i7.SharedViewWarningDialogComponent, i3.LoadingComponent, i5.ExportDialogComponent, i8.ListManagementDialogComponent, i9.NavigationPanelComponent, i10.ViewSelectorComponent, i11.FilterDialogComponent, i12.DecimalPipe], styles: [".data-explorer-container[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface-card);\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed[_ngcontent-%COMP%] {\n  width: 48px;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-border-strong);\n  flex-shrink: 0;\n}\n\n.content-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n\n\n.header-left[_ngcontent-%COMP%]     mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.header-center[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.header-action-btn[_ngcontent-%COMP%] {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\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.header-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.header-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.selection-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.date-field-selector-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-field-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.date-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .selected-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: var(--mj-border-default);\n  margin-bottom: 24px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.home-view-concept-d[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.home-main-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.home-main-area.panel-open[_ngcontent-%COMP%] {\n  margin-right: 320px;\n}\n\n\n\n\n\n\n.search-hero[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 36px 40px 24px;\n  text-align: center;\n}\n\n.search-hero-container[_ngcontent-%COMP%] {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-hero-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 14px 18px 14px 44px;\n  font-size: 15px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: all 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  font-family: inherit;\n}\n\n.search-hero-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.search-hero-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-primary);\n}\n\n.search-hero-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-primary);\n  font-size: 15px;\n  pointer-events: none;\n}\n\n.search-hero-shortcut[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.search-hero-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n\n\n.search-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.search-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.pill-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.pill-btn[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pill-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pill-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pill-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n\n\n\n.entity-groups-area[_ngcontent-%COMP%] {\n  padding: 12px 40px 60px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n}\n\n.app-group-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.12s;\n  user-select: none;\n}\n\n.app-group-header[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.app-group-icon[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 17px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.app-group-name[_ngcontent-%COMP%] {\n  font-size: 21px;\n  font-weight: 600;\n  flex: 1;\n}\n\n.app-group-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: transform 0.2s;\n}\n\n.app-group-chevron.expanded[_ngcontent-%COMP%] {\n  transform: rotate(90deg);\n}\n\n.app-group-entities[_ngcontent-%COMP%] {\n  padding: 4px 14px 10px 60px;\n}\n\n\n\n\n\n\n.entity-item-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  gap: 12px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 14px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.12s;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.entity-item-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .entity-item-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.entity-item-text[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-item-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.entity-item-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.entity-item-fav[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s;\n  font-size: 11px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  align-self: center;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .entity-item-fav[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-item-fav.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.quick-access-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 50;\n  transform: translateX(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.quick-access-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.qa-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.qa-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.qa-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.qa-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  user-select: none;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  margin-left: auto;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.15s;\n}\n\n.qa-section.collapsed[_ngcontent-%COMP%]   .qa-section-chevron[_ngcontent-%COMP%] {\n  transform: rotate(-90deg);\n}\n\n.qa-section-body[_ngcontent-%COMP%] {\n  padding: 0 8px 8px;\n}\n\n.qa-section.collapsed[_ngcontent-%COMP%]   .qa-section-body[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.qa-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.08s;\n}\n\n.qa-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-item-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.qa-item-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.qa-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.qa-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.qa-item-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.qa-empty[_ngcontent-%COMP%] {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n\n\n.qa-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 0 5px;\n  border-radius: 8px;\n  min-width: 16px;\n  text-align: center;\n}\n\n\n\n.home-no-results[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n\n.home-no-results[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 28px;\n  margin-bottom: 10px;\n  display: block;\n}\n\n.home-no-results[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin: 0;\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.detail-panel[_ngcontent-%COMP%]   mj-entity-record-detail-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.detail-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.detail-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n[_nghost-%COMP%]     mj-explorer-grid-view, \n[_nghost-%COMP%]     mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n\n\n\n\n\n\n\n.content-header.home-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 16px 24px 8px;\n}\n\n.content-body.home-content[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container[_ngcontent-%COMP%]   .smart-filter-input[_ngcontent-%COMP%] {\n  padding-left: 40px;\n}\n\n\n\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  height: auto;\n  padding: 32px;\n  background: var(--mj-bg-surface-card);\n}\n\n.empty-state.small[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .entity-item-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center[_ngcontent-%COMP%] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .search-hero[_ngcontent-%COMP%] {\n    padding: 24px 16px 16px;\n  }\n\n  .entity-groups-area[_ngcontent-%COMP%] {\n    padding: 8px 16px 40px;\n  }\n\n  .app-group-entities[_ngcontent-%COMP%] {\n    padding-left: 36px;\n  }\n\n  .home-main-area.panel-open[_ngcontent-%COMP%] {\n    margin-right: 0;\n  }\n\n  .quick-access-panel[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .navigation-panel[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .content-header[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .content-body[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .entity-item-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .view-mode-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .app-group-name[_ngcontent-%COMP%] {\n    font-size: 17px;\n  }\n\n  .entity-item-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}"], data: { animation: [
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.EntityViewerComponent, i5.EntityRecordDetailPanelComponent, i5.ViewConfigPanelComponent, i5.QuickSaveDialogComponent, i5.DuplicateViewDialogComponent, i5.SharedViewWarningDialogComponent, i2.LoadingComponent, i3.ExportDialogComponent, i6.ListManagementDialogComponent, i7.NavigationPanelComponent, i8.ViewSelectorComponent, i9.FilterDialogComponent, i10.DecimalPipe], styles: [".data-explorer-container[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface-card);\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed[_ngcontent-%COMP%] {\n  width: 48px;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-border-strong);\n  flex-shrink: 0;\n}\n\n.content-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n  position: relative;\n  z-index: 1100; \n\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n\n\n.header-left[_ngcontent-%COMP%]     mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.header-center[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.header-action-btn[_ngcontent-%COMP%] {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\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.header-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.header-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.selection-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.date-field-selector-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-selector-button[_ngcontent-%COMP%]:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-field-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.date-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .selected-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n\n\n\n.view-specific-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.view-specific-btn[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.view-specific-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: var(--mj-border-default);\n  margin-bottom: 24px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.home-view-concept-d[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.home-main-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.home-main-area.panel-open[_ngcontent-%COMP%] {\n  margin-right: 320px;\n}\n\n\n\n\n\n\n.search-hero[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 36px 40px 24px;\n  text-align: center;\n}\n\n.search-hero-container[_ngcontent-%COMP%] {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-hero-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 14px 18px 14px 44px;\n  font-size: 15px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: all 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  font-family: inherit;\n}\n\n.search-hero-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.search-hero-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-primary);\n}\n\n.search-hero-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-primary);\n  font-size: 15px;\n  pointer-events: none;\n}\n\n.search-hero-shortcut[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.search-hero-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n\n\n.search-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.search-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.pill-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.pill-btn[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pill-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pill-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pill-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n\n\n\n.entity-groups-area[_ngcontent-%COMP%] {\n  padding: 12px 40px 60px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n}\n\n.app-group-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.12s;\n  user-select: none;\n}\n\n.app-group-header[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.app-group-icon[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 17px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.app-group-name[_ngcontent-%COMP%] {\n  font-size: 21px;\n  font-weight: 600;\n  flex: 1;\n}\n\n.app-group-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: transform 0.2s;\n}\n\n.app-group-chevron.expanded[_ngcontent-%COMP%] {\n  transform: rotate(90deg);\n}\n\n.app-group-entities[_ngcontent-%COMP%] {\n  padding: 4px 14px 10px 60px;\n}\n\n\n\n\n\n\n.entity-item-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  gap: 12px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 14px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.12s;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.entity-item-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .entity-item-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.entity-item-text[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-item-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.entity-item-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.entity-item-fav[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s;\n  font-size: 11px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  align-self: center;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .entity-item-fav[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-item-fav.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.quick-access-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 50;\n  transform: translateX(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.quick-access-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.qa-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.qa-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.qa-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.qa-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  user-select: none;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  margin-left: auto;\n}\n\n.qa-section-header[_ngcontent-%COMP%]   .qa-section-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.15s;\n}\n\n.qa-section.collapsed[_ngcontent-%COMP%]   .qa-section-chevron[_ngcontent-%COMP%] {\n  transform: rotate(-90deg);\n}\n\n.qa-section-body[_ngcontent-%COMP%] {\n  padding: 0 8px 8px;\n}\n\n.qa-section.collapsed[_ngcontent-%COMP%]   .qa-section-body[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.qa-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.08s;\n}\n\n.qa-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-item-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.qa-item-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.qa-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.qa-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.qa-item-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.qa-empty[_ngcontent-%COMP%] {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n\n\n.qa-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 0 5px;\n  border-radius: 8px;\n  min-width: 16px;\n  text-align: center;\n}\n\n\n\n.home-no-results[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n\n.home-no-results[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 28px;\n  margin-bottom: 10px;\n  display: block;\n}\n\n.home-no-results[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin: 0;\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.detail-panel[_ngcontent-%COMP%]   mj-entity-record-detail-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.detail-action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.detail-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n[_nghost-%COMP%]     mj-explorer-grid-view, \n[_nghost-%COMP%]     mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n\n\n\n\n\n\n\n.content-header.home-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 16px 24px 8px;\n}\n\n.content-body.home-content[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container[_ngcontent-%COMP%]   .smart-filter-input[_ngcontent-%COMP%] {\n  padding-left: 40px;\n}\n\n\n\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  height: auto;\n  padding: 32px;\n  background: var(--mj-bg-surface-card);\n}\n\n.empty-state.small[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .entity-item-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center[_ngcontent-%COMP%] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .search-hero[_ngcontent-%COMP%] {\n    padding: 24px 16px 16px;\n  }\n\n  .entity-groups-area[_ngcontent-%COMP%] {\n    padding: 8px 16px 40px;\n  }\n\n  .app-group-entities[_ngcontent-%COMP%] {\n    padding-left: 36px;\n  }\n\n  .home-main-area.panel-open[_ngcontent-%COMP%] {\n    margin-right: 0;\n  }\n\n  .quick-access-panel[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .navigation-panel[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .content-header[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .content-body[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .entity-item-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .view-mode-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .app-group-name[_ngcontent-%COMP%] {\n    font-size: 17px;\n  }\n\n  .entity-item-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}"], data: { animation: [
                 trigger('slideInLeft', [
                     transition(':enter', [
                         style({ transform: 'translateX(-100%)', opacity: 0 }),
@@ -3609,8 +3640,8 @@ export { DataExplorerDashboardComponent };
                             animate('200ms ease-in', style({ transform: 'translateX(-100%)', opacity: 0 }))
                         ])
                     ])
-                ], template: "<div class=\"data-explorer-container\">\n  <!-- Navigation Panel (Left) - Hidden at home level, animated -->\n  @if (!isAtHomeLevel) {\n    <div\n      class=\"navigation-panel\"\n      [class.collapsed]=\"state.navigationPanelCollapsed\"\n      [style.width.px]=\"state.navigationPanelCollapsed ? 48 : state.navigationPanelWidth\"\n      [@slideInLeft]>\n\n      <mj-explorer-navigation-panel\n        [entities]=\"entities\"\n        [appEntityGroups]=\"appEntityGroups\"\n        [selectedEntityName]=\"state.selectedEntityName\"\n        [favorites]=\"state.favorites\"\n        [recentItems]=\"state.recentItems\"\n        [collapsed]=\"state.navigationPanelCollapsed\"\n        [allowedEntityNames]=\"allowedEntityNames\"\n        [favoritesSectionExpanded]=\"state.favoritesSectionExpanded\"\n        [recentSectionExpanded]=\"state.recentSectionExpanded\"\n        [entitiesSectionExpanded]=\"state.entitiesSectionExpanded\"\n        [viewsSectionExpanded]=\"state.viewsSectionExpanded\"\n        (entitySelected)=\"onEntitySelected($event)\"\n        (toggleCollapse)=\"toggleNavigationPanel()\"\n        (sectionToggled)=\"stateService.toggleSection($event)\"\n        (openRecord)=\"onOpenRecordFromNav($event)\"\n        (selectRecord)=\"onSelectRecordFromNav($event)\"\n        (expandAndFocus)=\"onExpandAndFocus($event)\">\n      </mj-explorer-navigation-panel>\n    </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"content-area\">\n    <!-- Breadcrumb Bar - Hidden at home level -->\n    @if (!isAtHomeLevel && breadcrumbs.length > 0) {\n      <div class=\"breadcrumb-bar\">\n        @for (crumb of breadcrumbs; track crumb.label; let i = $index; let last = $last) {\n          <span\n            class=\"breadcrumb-item\"\n            [class.clickable]=\"!last\"\n            [class.current]=\"last\"\n            (click)=\"onBreadcrumbClick(crumb, i)\"\n            [title]=\"crumb.label\">\n            @if (crumb.icon) {\n              <i [class]=\"crumb.icon\" class=\"breadcrumb-icon\"></i>\n            }\n            <span class=\"breadcrumb-label\">{{ crumb.label }}</span>\n          </span>\n          @if (!last) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n          }\n        }\n      </div>\n    }\n\n    <!-- Header -->\n    <div class=\"content-header\" [class.home-header]=\"isAtHomeLevel\">\n      <div class=\"header-left\">\n        @if (selectedEntity) {\n          <i [class]=\"getEntityIcon(selectedEntity)\" class=\"entity-icon\"></i>\n          <h2 class=\"entity-title\">{{ selectedEntity.DisplayNameOrName }}</h2>\n          @if (debouncedFilterText && filteredRecordCount !== totalRecordCount) {\n            <span class=\"record-count\">{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span class=\"record-count\">{{ totalRecordCount | number }} records</span>\n          }\n\n          <!-- View Selector -->\n          <mj-view-selector\n            [entity]=\"selectedEntity\"\n            [selectedViewId]=\"state.selectedViewId\"\n            [viewModified]=\"state.viewModified\"\n            (viewSelected)=\"onViewSelected($event)\"\n            (saveViewRequested)=\"onSaveViewRequested($event)\"\n            (manageViewsRequested)=\"onManageViewsRequested()\"\n            (openInTabRequested)=\"onOpenInTabRequested($event)\"\n            (configureViewRequested)=\"onConfigureViewRequested()\"\n            (createNewRecordRequested)=\"onCreateNewRecord()\"\n            (exportRequested)=\"onExport()\"\n            (duplicateViewRequested)=\"onDuplicateView($event)\"\n            (quickSaveRequested)=\"onQuickSaveRequested($event)\"\n            (revertRequested)=\"onRevertView()\">\n          </mj-view-selector>\n\n          <!-- Add to List Button -->\n          <button\n            class=\"header-action-btn\"\n            [class.disabled]=\"!hasSelectedRecords\"\n            [disabled]=\"!hasSelectedRecords\"\n            (click)=\"onAddToListClick()\"\n            [title]=\"hasSelectedRecords ? 'Add ' + selectedRecords.length + ' selected record(s) to a list' : 'Select records to add to a list'\">\n            <i class=\"fa-solid fa-list-check\"></i>\n            @if (hasSelectedRecords) {\n              <span class=\"selection-badge\">{{ selectedRecords.length }}</span>\n            }\n          </button>\n        } @else {\n          @if (displayIcon) {\n            <i [class]=\"displayIcon\" class=\"entity-icon\"></i>\n          }\n          <h2 class=\"entity-title\">{{ displayTitle }}</h2>\n          <span class=\"record-count\">{{ entities.length }} entities available</span>\n        }\n      </div>\n\n      <div class=\"header-center\">\n        @if (selectedEntity) {\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter records... (press / to focus)\"\n              [value]=\"liveFilterText\"\n              (input)=\"onFilterInputChanged(filterInput.value)\"\n            />\n            @if (liveFilterText) {\n              <button class=\"clear-filter-btn\" (click)=\"clearRecordFilter()\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Home-level search moved to search hero section -->\n      </div>\n\n      <div class=\"header-right\">\n        @if (selectedEntity) {\n          <!-- View Mode Toggle -->\n          <div class=\"view-mode-toggle\">\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'grid'\"\n              (click)=\"onViewModeChanged('grid')\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'cards'\"\n              (click)=\"onViewModeChanged('cards')\"\n              title=\"Cards View\">\n              <i class=\"fa-solid fa-grip\"></i>\n            </button>\n            @if (entityHasDateFields) {\n              <button\n                class=\"toggle-btn\"\n                [class.active]=\"state.viewMode === 'timeline'\"\n                (click)=\"onViewModeChanged('timeline')\"\n                title=\"Timeline View\">\n                <i class=\"fa-solid fa-timeline\"></i>\n              </button>\n            }\n          </div>\n\n          <!-- Timeline Controls (only shown when timeline view is active) -->\n          @if (state.viewMode === 'timeline' && entityHasDateFields) {\n            <!-- Date Field Selector -->\n            <div class=\"date-field-selector-container\">\n              <!-- Backdrop for closing dropdown -->\n              @if (isDateFieldDropdownOpen) {\n                <div class=\"date-field-backdrop\" (click)=\"closeDateFieldDropdown()\"></div>\n              }\n\n              <div class=\"date-field-selector-wrapper\">\n                <button\n                  class=\"date-field-selector-button\"\n                  [class.open]=\"isDateFieldDropdownOpen\"\n                  [disabled]=\"availableDateFields.length <= 1\"\n                  (click)=\"toggleDateFieldDropdown()\">\n                  <i class=\"fa-solid fa-calendar-days date-field-icon\"></i>\n                  <span class=\"date-field-name\">{{ effectiveTimelineDateFieldDisplayName }}</span>\n                  @if (availableDateFields.length > 1) {\n                    <i class=\"fa-solid fa-chevron-down date-field-arrow\" [class.rotated]=\"isDateFieldDropdownOpen\"></i>\n                  }\n                </button>\n\n                @if (isDateFieldDropdownOpen && availableDateFields.length > 1) {\n                  <div class=\"date-field-dropdown-panel\">\n                    @for (field of availableDateFields; track field.name) {\n                      <div\n                        class=\"date-field-dropdown-item\"\n                        [class.selected]=\"field.name === effectiveTimelineDateField\"\n                        (click)=\"setTimelineDateField(field.name)\">\n                        <i class=\"fa-regular fa-calendar item-icon\"></i>\n                        <span class=\"item-name\">{{ field.displayName }}</span>\n                        @if (field.name === effectiveTimelineDateField) {\n                          <i class=\"fa-solid fa-check selected-check\"></i>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Orientation Toggle -->\n            <div class=\"timeline-orientation-toggle\">\n              <button\n                class=\"toggle-btn\"\n                (click)=\"toggleTimelineOrientation()\"\n                [title]=\"state.timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n                <i [class]=\"state.timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n              </button>\n            </div>\n\n            <!-- Sort Order Toggle -->\n            <div class=\"timeline-sort-toggle\">\n              <button\n                class=\"toggle-btn\"\n                (click)=\"toggleTimelineSortOrder()\"\n                [title]=\"state.timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n                <i [class]=\"state.timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n              </button>\n            </div>\n          }\n        }\n        @if (!selectedEntity) {\n          <!-- Quick Access panel toggle -->\n          <button\n            class=\"header-action-btn\"\n            [class.active]=\"state.quickAccessPanelOpen\"\n            (click)=\"toggleQuickAccessPanel()\"\n            title=\"Recents & Favorites\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n            @if (recentRecords.length + favoriteRecords.length > 0) {\n              <span class=\"qa-badge\">{{ recentRecords.length + favoriteRecords.length }}</span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Content Body - Using mj-entity-viewer composite -->\n    <div class=\"content-body\" [class.home-content]=\"isAtHomeLevel\">\n      @if (!selectedEntity) {\n        <!-- Concept D: Application Groups + Search-First Home View -->\n        <div class=\"home-view-concept-d\">\n          @if (isLoadingEntities) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading entities...\" size=\"medium\"></mj-loading>\n            </div>\n          } @else {\n            <div class=\"home-main-area\" [class.panel-open]=\"state.quickAccessPanelOpen\">\n              <!-- Search Hero -->\n              <div class=\"search-hero\">\n                <div class=\"search-hero-container\">\n                  <i class=\"fa-solid fa-magnifying-glass search-hero-icon\"></i>\n                  <input\n                    #filterInput\n                    type=\"text\"\n                    class=\"search-hero-input\"\n                    placeholder=\"Search entities...\"\n                    [(ngModel)]=\"entityFilterText\"\n                  />\n                  @if (entityFilterText) {\n                    <button class=\"search-hero-clear\" (click)=\"entityFilterText = ''\">\n                      <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                  } @else {\n                    <span class=\"search-hero-shortcut\">/</span>\n                  }\n                </div>\n\n                <!-- Meta row: entity count + All/Favorites pills -->\n                <div class=\"search-meta-row\">\n                  <span class=\"search-entity-count\">\n                    {{ filteredEntityCount }} entities\n                    @if (applicationCount > 0) {\n                      across {{ applicationCount }} applications\n                    }\n                  </span>\n                  <div class=\"pill-toggle\">\n                    <button\n                      class=\"pill-btn\"\n                      [class.active]=\"state.homeViewMode === 'all'\"\n                      (click)=\"setHomeViewMode('all')\">\n                      All Entities\n                    </button>\n                    <button\n                      class=\"pill-btn\"\n                      [class.active]=\"state.homeViewMode === 'favorites'\"\n                      (click)=\"setHomeViewMode('favorites')\">\n                      <i class=\"fa-solid fa-star\"></i> My Favorites\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Entity Groups Area -->\n              <div class=\"entity-groups-area\">\n                @if (entityFilter?.applicationId) {\n                  <!-- Single-app mode: flat entity grid (no grouping) -->\n                  <div class=\"entity-item-grid\">\n                    @for (entity of flatFilteredEntities; track entity.ID) {\n                      <div\n                        class=\"entity-item\"\n                        (click)=\"onEntitySelected(entity)\"\n                        [title]=\"entity.Description || entity.DisplayNameOrName\">\n                        <div class=\"entity-item-icon\">\n                          <i [class]=\"getEntityIcon(entity)\"></i>\n                        </div>\n                        <div class=\"entity-item-text\">\n                          <span class=\"entity-item-name\">{{ entity.DisplayNameOrName }}</span>\n                          @if (entity.Description) {\n                            <span class=\"entity-item-desc\">{{ entity.Description }}</span>\n                          }\n                        </div>\n                        <button\n                          class=\"entity-item-fav\"\n                          [class.favorited]=\"isEntityFavorited(entity)\"\n                          (click)=\"toggleEntityFavorite(entity, $event)\"\n                          [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                          <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                        </button>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <!-- Multi-app mode: grouped by application -->\n                  @for (group of filteredAppEntityGroups; track group.applicationId) {\n                    <div class=\"app-group\">\n                      <div class=\"app-group-header\" (click)=\"toggleAppGroup(group.applicationId)\">\n                        <div\n                          class=\"app-group-icon\"\n                          [style.background]=\"group.applicationColor ? group.applicationColor + '15' : null\"\n                          [style.color]=\"group.applicationColor || null\">\n                          <i [class]=\"group.applicationIcon || 'fa-solid fa-folder'\"></i>\n                        </div>\n                        <span class=\"app-group-name\">{{ group.applicationName }}</span>\n                        <span class=\"app-group-count\">{{ group.entities.length }}</span>\n                        <i class=\"fa-solid fa-chevron-right app-group-chevron\"\n                           [class.expanded]=\"group.isExpanded\"></i>\n                      </div>\n                      @if (group.isExpanded) {\n                        <div class=\"app-group-entities\">\n                          <div class=\"entity-item-grid\">\n                            @for (entity of group.entities; track entity.ID) {\n                              <div\n                                class=\"entity-item\"\n                                (click)=\"onEntitySelected(entity)\"\n                                [title]=\"entity.Description || entity.DisplayNameOrName\">\n                                <div class=\"entity-item-icon\">\n                                  <i [class]=\"getEntityIcon(entity)\"></i>\n                                </div>\n                                <div class=\"entity-item-text\">\n                                  <span class=\"entity-item-name\">{{ entity.DisplayNameOrName }}</span>\n                                  @if (entity.Description) {\n                                    <span class=\"entity-item-desc\">{{ entity.Description }}</span>\n                                  }\n                                </div>\n                                <button\n                                  class=\"entity-item-fav\"\n                                  [class.favorited]=\"isEntityFavorited(entity)\"\n                                  (click)=\"toggleEntityFavorite(entity, $event)\"\n                                  [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                                  <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n\n                <!-- No results -->\n                @if (filteredEntityCount === 0 && entities.length > 0) {\n                  <div class=\"home-no-results\">\n                    <i class=\"fa-solid fa-magnifying-glass\"></i>\n                    <p>No entities match \"{{ entityFilterText }}\"</p>\n                  </div>\n                }\n                @if (entities.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-database empty-icon\"></i>\n                    <h3>No Entities Available</h3>\n                    <p>There are no entities configured for this application.</p>\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Quick Access Panel (right slide-in) -->\n            <div class=\"quick-access-panel\" [class.open]=\"state.quickAccessPanelOpen\">\n              <div class=\"qa-header\">\n                <h3>Quick Access</h3>\n                <button class=\"qa-close-btn\" (click)=\"toggleQuickAccessPanel()\">\n                  <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n              </div>\n              <div class=\"qa-body\">\n                <!-- Recent Records (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('recentRecords')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('recentRecords')\">\n                    <i class=\"fa-solid fa-clock-rotate-left qa-section-icon\"></i>\n                    <span>Recent Records</span>\n                    <span class=\"qa-section-count\">{{ quickAccessRecentRecords.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (record of quickAccessRecentRecords; track record.entityId + '|' + record.recordId) {\n                      <div class=\"qa-item\" (click)=\"onRecentRecordClick(record)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ record.recordName || record.recordId }}</div>\n                          <div class=\"qa-item-meta\">{{ record.entityName }}</div>\n                        </div>\n                        <span class=\"qa-item-time\">{{ formatRelativeTime(record.latestAt) }}</span>\n                      </div>\n                    }\n                    @if (quickAccessRecentRecords.length === 0) {\n                      <div class=\"qa-empty\">No recent records</div>\n                    }\n                  </div>\n                </div>\n\n                <!-- Recent Entities (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('recentEntities')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('recentEntities')\">\n                    <i class=\"fa-solid fa-table qa-section-icon\"></i>\n                    <span>Recent Entities</span>\n                    <span class=\"qa-section-count\">{{ quickAccessRecentEntities.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (entity of quickAccessRecentEntities; track entity.ID) {\n                      <div class=\"qa-item\" (click)=\"onEntitySelected(entity)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIcon(entity)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ entity.DisplayNameOrName }}</div>\n                        </div>\n                      </div>\n                    }\n                    @if (quickAccessRecentEntities.length === 0) {\n                      <div class=\"qa-empty\">No recent entities</div>\n                    }\n                  </div>\n                </div>\n\n                <!-- Favorite Records (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('favoriteRecords')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('favoriteRecords')\">\n                    <i class=\"fa-solid fa-star qa-section-icon\" style=\"color: var(--mj-status-warning);\"></i>\n                    <span>Favorite Records</span>\n                    <span class=\"qa-section-count\">{{ quickAccessFavoriteRecords.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (record of quickAccessFavoriteRecords; track record.userFavoriteId) {\n                      <div class=\"qa-item\" (click)=\"onFavoriteRecordClick(record)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ record.recordName || record.recordId }}</div>\n                          <div class=\"qa-item-meta\">{{ record.entityName }}</div>\n                        </div>\n                      </div>\n                    }\n                    @if (quickAccessFavoriteRecords.length === 0) {\n                      <div class=\"qa-empty\">No favorite records</div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <mj-entity-viewer\n          #entityViewer\n          [entity]=\"selectedEntity\"\n          [viewEntity]=\"selectedViewEntity\"\n          [viewMode]=\"state.viewMode\"\n          [filterText]=\"debouncedFilterText\"\n          [selectedRecordId]=\"state.selectedRecordId\"\n          [config]=\"viewerConfig\"\n          [gridState]=\"currentGridState\"\n          [timelineConfig]=\"currentTimelineConfig\"\n          [gridSelectionMode]=\"'checkbox'\"\n          [showGridToolbar]=\"false\"\n          [showAddToListButton]=\"false\"\n          (viewModeChange)=\"onViewModeChanged($event)\"\n          (filterTextChange)=\"onFilterTextChanged($event)\"\n          (recordSelected)=\"onViewerRecordSelected($event)\"\n          (recordOpened)=\"onViewerRecordOpened($event)\"\n          (dataLoaded)=\"onDataLoaded($event)\"\n          (filteredCountChanged)=\"onFilteredCountChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\"\n          (selectionChanged)=\"onSelectionChanged($event)\"\n          (addToListRequested)=\"onAddToListRequested($event)\">\n        </mj-entity-viewer>\n      }\n    </div>\n  </div>\n\n  <!-- Detail Panel (Right - Slide In) -->\n  @if (state.detailPanelOpen && selectedRecord) {\n    <div class=\"detail-panel\" [style.width.px]=\"state.detailPanelWidth\">\n      <!-- Detail Panel Actions Bar -->\n      <div class=\"detail-panel-actions\">\n        <button\n          class=\"detail-action-btn\"\n          (click)=\"openListManagementDialog()\"\n          title=\"Add to List\">\n          <i class=\"fa-solid fa-list-check\"></i>\n          <span>Add to List</span>\n        </button>\n      </div>\n      <mj-entity-record-detail-panel\n        [entity]=\"detailPanelEntity\"\n        [record]=\"selectedRecord\"\n        (close)=\"onDetailPanelClosed()\"\n        (openRecord)=\"onOpenRecord($event)\"\n        (navigateToRelated)=\"onNavigateToRelated($event)\"\n        (openRelatedRecord)=\"onOpenRelatedRecord($event)\"\n        (openForeignKeyRecord)=\"onOpenForeignKeyRecord($event)\">\n      </mj-entity-record-detail-panel>\n    </div>\n  }\n\n  <!-- View Configuration Panel -->\n  <mj-view-config-panel\n    [entity]=\"selectedEntity\"\n    [viewEntity]=\"selectedViewEntity\"\n    [isOpen]=\"state.viewConfigPanelOpen\"\n    [currentGridState]=\"currentGridState\"\n    [externalFilterState]=\"filterDialogState\"\n    [isSaving]=\"isSavingView\"\n    [DefaultSaveAsNew]=\"defaultSaveAsNew\"\n    [PendingNewViewName]=\"pendingNewViewName\"\n    [PendingNewViewDescription]=\"pendingNewViewDescription\"\n    [PendingNewViewIsShared]=\"pendingNewViewIsShared\"\n    (close)=\"onCloseViewConfigPanel()\"\n    (save)=\"onSaveView($event)\"\n    (saveDefaults)=\"onSaveDefaultViewSettings($event)\"\n    (delete)=\"onDeleteView()\"\n    (duplicate)=\"onDuplicateFromPanel()\"\n    (openFilterDialogRequest)=\"onOpenFilterDialogRequest($event)\">\n  </mj-view-config-panel>\n\n  <!-- Filter Dialog (rendered at dashboard level for full viewport width) -->\n  <mj-filter-dialog\n    [isOpen]=\"isFilterDialogOpen\"\n    [fields]=\"filterDialogFields\"\n    [filter]=\"filterDialogState\"\n    [disabled]=\"filterDialogDisabled\"\n    (close)=\"onCloseFilterDialog()\"\n    (apply)=\"onFilterApplied($event)\">\n  </mj-filter-dialog>\n\n  <!-- Export Dialog -->\n  <mj-export-dialog\n    [visible]=\"showExportDialog\"\n    [config]=\"exportDialogConfig\"\n    (closed)=\"onExportDialogClosed($event)\">\n  </mj-export-dialog>\n\n  <!-- List Management Dialog -->\n  @if (showListManagementDialog && listManagementConfig) {\n    <mj-list-management-dialog\n      [config]=\"listManagementConfig\"\n      [visible]=\"showListManagementDialog\"\n      (complete)=\"onListManagementComplete($event)\"\n      (cancel)=\"onListManagementCancel()\">\n    </mj-list-management-dialog>\n  }\n\n  <!-- Quick Save Dialog (F-001) -->\n  <mj-quick-save-dialog\n    [IsOpen]=\"showQuickSaveDialog\"\n    [ViewEntity]=\"selectedViewEntity\"\n    [EntityName]=\"selectedEntity?.DisplayNameOrName ?? ''\"\n    [Summary]=\"quickSaveSummary\"\n    [IsSaving]=\"isSavingView\"\n    [DefaultSaveAsNew]=\"defaultSaveAsNew\"\n    (Save)=\"onQuickSave($event)\"\n    (Close)=\"onQuickSaveClose()\"\n    (OpenAdvanced)=\"onQuickSaveOpenAdvanced($event)\">\n  </mj-quick-save-dialog>\n\n  <!-- Duplicate View Dialog (F-005) -->\n  <mj-duplicate-view-dialog\n    [IsOpen]=\"showDuplicateDialog\"\n    [SourceViewName]=\"duplicateSourceViewName\"\n    [Summary]=\"duplicateSummary\"\n    (Duplicate)=\"onDuplicateConfirmed($event)\"\n    (Cancel)=\"onDuplicateCancel()\">\n  </mj-duplicate-view-dialog>\n\n  <!-- Shared View Warning Dialog (view-creation-flow Scenario 5) -->\n  <mj-shared-view-warning-dialog\n    [IsOpen]=\"showSharedViewWarning\"\n    [ViewName]=\"selectedViewEntity?.Name ?? ''\"\n    (Action)=\"onSharedViewAction($event)\"\n    (Cancel)=\"onSharedViewWarningCancel()\">\n  </mj-shared-view-warning-dialog>\n</div>\n", styles: [".data-explorer-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface-card);\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed {\n  width: 48px;\n}\n\n.content-area {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator {\n  font-size: 10px;\n  color: var(--mj-border-strong);\n  flex-shrink: 0;\n}\n\n.content-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n/* View Selector within header */\n.header-left ::ng-deep mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.header-center {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.smart-filter-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: var(--mj-text-primary);\n}\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Header Action Button (Add to List, etc.) */\n.header-action-btn {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn:hover:not(.disabled) {\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.header-action-btn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.header-action-btn i {\n  font-size: 14px;\n}\n.selection-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n/* Timeline Date Field Selector - Styled Dropdown */\n.date-field-selector-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper {\n  position: relative;\n}\n\n.date-field-selector-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-selector-button:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open {\n  background: var(--mj-bg-surface-active);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-field-icon {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.date-field-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow {\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.date-field-dropdown-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item.selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item .item-icon {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item .item-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item .selected-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container,\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: var(--mj-border-default);\n  margin-bottom: 24px;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   CONCEPT D: HOME VIEW LAYOUT\n   ============================================ */\n\n.home-view-concept-d {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.home-main-area {\n  flex: 1;\n  overflow-y: auto;\n  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.home-main-area.panel-open {\n  margin-right: 320px;\n}\n\n/* ============================================\n   SEARCH HERO\n   ============================================ */\n\n.search-hero {\n  background: var(--mj-bg-surface);\n  padding: 36px 40px 24px;\n  text-align: center;\n}\n\n.search-hero-container {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-hero-input {\n  width: 100%;\n  padding: 14px 18px 14px 44px;\n  font-size: 15px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: all 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  font-family: inherit;\n}\n\n.search-hero-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.search-hero-input::placeholder {\n  color: var(--mj-text-primary);\n}\n\n.search-hero-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-primary);\n  font-size: 15px;\n  pointer-events: none;\n}\n\n.search-hero-shortcut {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.search-hero-clear {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n/* Meta row: entity count + pills */\n.search-meta-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.search-entity-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.pill-toggle {\n  display: flex;\n  gap: 6px;\n}\n\n.pill-btn {\n  padding: 6px 16px;\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pill-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pill-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pill-btn i {\n  font-size: 11px;\n}\n\n/* ============================================\n   APPLICATION GROUPS\n   ============================================ */\n\n.entity-groups-area {\n  padding: 12px 40px 60px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-group {\n  margin-bottom: 4px;\n}\n\n.app-group-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.12s;\n  user-select: none;\n}\n\n.app-group-header:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.app-group-icon {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 17px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.app-group-name {\n  font-size: 21px;\n  font-weight: 600;\n  flex: 1;\n}\n\n.app-group-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: transform 0.2s;\n}\n\n.app-group-chevron.expanded {\n  transform: rotate(90deg);\n}\n\n.app-group-entities {\n  padding: 4px 14px 10px 60px;\n}\n\n/* ============================================\n   ENTITY ITEM GRID (pills)\n   ============================================ */\n\n.entity-item-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  gap: 12px;\n}\n\n.entity-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 14px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.12s;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.entity-item:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.entity-item-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.entity-item:hover .entity-item-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.entity-item-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-item-name {\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.entity-item-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.entity-item-fav {\n  color: var(--mj-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s;\n  font-size: 11px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  align-self: center;\n}\n\n.entity-item:hover .entity-item-fav {\n  opacity: 1;\n}\n\n.entity-item-fav.favorited {\n  opacity: 1;\n  color: var(--mj-status-warning);\n}\n\n/* ============================================\n   QUICK ACCESS PANEL (right slide-in)\n   ============================================ */\n\n.quick-access-panel {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 50;\n  transform: translateX(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.quick-access-panel.open {\n  transform: translateX(0);\n}\n\n.qa-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-header h3 {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.qa-close-btn {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.qa-close-btn:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-body {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.qa-section {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  user-select: none;\n}\n\n.qa-section-header .qa-section-icon {\n  font-size: 12px;\n}\n\n.qa-section-header .qa-section-count {\n  background: var(--mj-bg-surface-card);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  margin-left: auto;\n}\n\n.qa-section-header .qa-section-chevron {\n  font-size: 10px;\n  transition: transform 0.15s;\n}\n\n.qa-section.collapsed .qa-section-chevron {\n  transform: rotate(-90deg);\n}\n\n.qa-section-body {\n  padding: 0 8px 8px;\n}\n\n.qa-section.collapsed .qa-section-body {\n  display: none;\n}\n\n.qa-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.08s;\n}\n\n.qa-item:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-item-icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.qa-item-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.qa-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.qa-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.qa-item-time {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.qa-empty {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n/* Quick Access toggle button badge */\n.qa-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 0 5px;\n  border-radius: 8px;\n  min-width: 16px;\n  text-align: center;\n}\n\n/* No results state for home view */\n.home-no-results {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n\n.home-no-results i {\n  font-size: 28px;\n  margin-bottom: 10px;\n  display: block;\n}\n\n.home-no-results p {\n  font-size: 14px;\n  margin: 0;\n}\n\n.detail-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: slideIn 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.detail-panel mj-entity-record-detail-panel {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* Detail Panel Actions Bar */\n.detail-panel-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.detail-action-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.detail-action-btn i {\n  font-size: 12px;\n}\n\n:host ::ng-deep mj-explorer-grid-view,\n:host ::ng-deep mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   HOME SCREEN STYLES\n   ============================================ */\n\n/* Home-level header adjustments */\n.content-header.home-header {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 16px 24px 8px;\n}\n\n.content-body.home-content {\n  padding: 0;\n}\n\n/* Smart filter with search icon (entity-level filter) */\n.filter-icon {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container .smart-filter-input {\n  padding-left: 40px;\n}\n\n/* ============================================\n   VIEW MODE TOGGLE OVERRIDES\n   ============================================ */\n\n.view-mode-toggle .toggle-btn {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* ============================================\n   EMPTY STATE VARIANTS\n   ============================================ */\n\n.empty-state.small {\n  height: auto;\n  padding: 32px;\n  background: var(--mj-bg-surface-card);\n}\n\n.empty-state.small .empty-icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small h3 {\n  font-size: 16px;\n}\n\n.empty-state.small p {\n  font-size: 13px;\n}\n\n/* ============================================\n   RESPONSIVE STYLES\n   ============================================ */\n\n@media (max-width: 1200px) {\n  .entity-item-grid {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .search-hero {\n    padding: 24px 16px 16px;\n  }\n\n  .entity-groups-area {\n    padding: 8px 16px 40px;\n  }\n\n  .app-group-entities {\n    padding-left: 36px;\n  }\n\n  .home-main-area.panel-open {\n    margin-right: 0;\n  }\n\n  .quick-access-panel {\n    width: 100%;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container {\n    flex-direction: column;\n  }\n\n  .navigation-panel {\n    display: none;\n  }\n\n  .content-header {\n    padding: 12px 16px;\n  }\n\n  .content-body {\n    padding: 12px 16px;\n  }\n\n  .entity-item-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .view-mode-toggle {\n    display: none;\n  }\n\n  .app-group-name {\n    font-size: 17px;\n  }\n\n  .entity-item-name {\n    font-size: 14px;\n  }\n}\n"] }]
-    }], () => [{ type: i1.ExplorerStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i3.RecentAccessService }, { type: i4.NavigationService }, { type: i5.ExportService }, { type: i0.NgZone }], { filterInputRef: [{
+                ], template: "<div class=\"data-explorer-container\">\n  <!-- Navigation Panel (Left) - Hidden at home level, animated -->\n  @if (!isAtHomeLevel) {\n    <div\n      class=\"navigation-panel\"\n      [class.collapsed]=\"state.navigationPanelCollapsed\"\n      [style.width.px]=\"state.navigationPanelCollapsed ? 48 : state.navigationPanelWidth\"\n      [@slideInLeft]>\n\n      <mj-explorer-navigation-panel\n        [entities]=\"entities\"\n        [appEntityGroups]=\"appEntityGroups\"\n        [selectedEntityName]=\"state.selectedEntityName\"\n        [favorites]=\"state.favorites\"\n        [recentItems]=\"state.recentItems\"\n        [collapsed]=\"state.navigationPanelCollapsed\"\n        [allowedEntityNames]=\"allowedEntityNames\"\n        [favoritesSectionExpanded]=\"state.favoritesSectionExpanded\"\n        [recentSectionExpanded]=\"state.recentSectionExpanded\"\n        [entitiesSectionExpanded]=\"state.entitiesSectionExpanded\"\n        [viewsSectionExpanded]=\"state.viewsSectionExpanded\"\n        (entitySelected)=\"onEntitySelected($event)\"\n        (toggleCollapse)=\"toggleNavigationPanel()\"\n        (sectionToggled)=\"stateService.toggleSection($event)\"\n        (openRecord)=\"onOpenRecordFromNav($event)\"\n        (selectRecord)=\"onSelectRecordFromNav($event)\"\n        (expandAndFocus)=\"onExpandAndFocus($event)\">\n      </mj-explorer-navigation-panel>\n    </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"content-area\">\n    <!-- Breadcrumb Bar - Hidden at home level -->\n    @if (!isAtHomeLevel && breadcrumbs.length > 0) {\n      <div class=\"breadcrumb-bar\">\n        @for (crumb of breadcrumbs; track crumb.label; let i = $index; let last = $last) {\n          <span\n            class=\"breadcrumb-item\"\n            [class.clickable]=\"!last\"\n            [class.current]=\"last\"\n            (click)=\"onBreadcrumbClick(crumb, i)\"\n            [title]=\"crumb.label\">\n            @if (crumb.icon) {\n              <i [class]=\"crumb.icon\" class=\"breadcrumb-icon\"></i>\n            }\n            <span class=\"breadcrumb-label\">{{ crumb.label }}</span>\n          </span>\n          @if (!last) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n          }\n        }\n      </div>\n    }\n\n    <!-- Header -->\n    <div class=\"content-header\" [class.home-header]=\"isAtHomeLevel\">\n      <div class=\"header-left\">\n        @if (selectedEntity) {\n          <i [class]=\"getEntityIcon(selectedEntity)\" class=\"entity-icon\"></i>\n          <h2 class=\"entity-title\">{{ selectedEntity.DisplayNameOrName }}</h2>\n          @if (debouncedFilterText && filteredRecordCount !== totalRecordCount) {\n            <span class=\"record-count\">{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span class=\"record-count\">{{ totalRecordCount | number }} records</span>\n          }\n\n          <!-- View Selector -->\n          <mj-view-selector\n            [entity]=\"selectedEntity\"\n            [selectedViewId]=\"state.selectedViewId\"\n            [viewModified]=\"state.viewModified\"\n            (viewSelected)=\"onViewSelected($event)\"\n            (saveViewRequested)=\"onSaveViewRequested($event)\"\n            (manageViewsRequested)=\"onManageViewsRequested()\"\n            (openInTabRequested)=\"onOpenInTabRequested($event)\"\n            (configureViewRequested)=\"onConfigureViewRequested()\"\n            (createNewRecordRequested)=\"onCreateNewRecord()\"\n            (exportRequested)=\"onExport()\"\n            (duplicateViewRequested)=\"onDuplicateView($event)\"\n            (quickSaveRequested)=\"onQuickSaveRequested($event)\"\n            (revertRequested)=\"onRevertView()\">\n          </mj-view-selector>\n\n          <!-- Add to List Button -->\n          <button\n            class=\"header-action-btn\"\n            [class.disabled]=\"!hasSelectedRecords\"\n            [disabled]=\"!hasSelectedRecords\"\n            (click)=\"onAddToListClick()\"\n            [title]=\"hasSelectedRecords ? 'Add ' + selectedRecords.length + ' selected record(s) to a list' : 'Select records to add to a list'\">\n            <i class=\"fa-solid fa-list-check\"></i>\n            @if (hasSelectedRecords) {\n              <span class=\"selection-badge\">{{ selectedRecords.length }}</span>\n            }\n          </button>\n        } @else {\n          @if (displayIcon) {\n            <i [class]=\"displayIcon\" class=\"entity-icon\"></i>\n          }\n          <h2 class=\"entity-title\">{{ displayTitle }}</h2>\n          <span class=\"record-count\">{{ entities.length }} entities available</span>\n        }\n      </div>\n\n      <div class=\"header-center\">\n        @if (selectedEntity) {\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter records... (press / to focus)\"\n              [value]=\"liveFilterText\"\n              (input)=\"onFilterInputChanged(filterInput.value)\"\n            />\n            @if (liveFilterText) {\n              <button class=\"clear-filter-btn\" (click)=\"clearRecordFilter()\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Home-level search moved to search hero section -->\n      </div>\n\n      <div class=\"header-right\">\n        @if (selectedEntity) {\n          <!-- View-specific controls \u2014 positioned LEFT of the view mode toggle -->\n          <!-- These controls are contextual to the active view mode -->\n          @if (state.viewMode === 'timeline' && entityHasDateFields) {\n            <div class=\"view-specific-controls\">\n              <!-- Date Field Selector -->\n              <div class=\"date-field-selector-container\">\n                @if (isDateFieldDropdownOpen) {\n                  <div class=\"date-field-backdrop\" (click)=\"closeDateFieldDropdown()\"></div>\n                }\n                <div class=\"date-field-selector-wrapper\">\n                  <button\n                    class=\"date-field-selector-button\"\n                    [class.open]=\"isDateFieldDropdownOpen\"\n                    [disabled]=\"availableDateFields.length <= 1\"\n                    (click)=\"toggleDateFieldDropdown()\">\n                    <i class=\"fa-solid fa-calendar-days date-field-icon\"></i>\n                    <span class=\"date-field-name\">{{ effectiveTimelineDateFieldDisplayName }}</span>\n                    @if (availableDateFields.length > 1) {\n                      <i class=\"fa-solid fa-chevron-down date-field-arrow\" [class.rotated]=\"isDateFieldDropdownOpen\"></i>\n                    }\n                  </button>\n                  @if (isDateFieldDropdownOpen && availableDateFields.length > 1) {\n                    <div class=\"date-field-dropdown-panel\">\n                      @for (field of availableDateFields; track field.name) {\n                        <div\n                          class=\"date-field-dropdown-item\"\n                          [class.selected]=\"field.name === effectiveTimelineDateField\"\n                          (click)=\"setTimelineDateField(field.name)\">\n                          <i class=\"fa-regular fa-calendar item-icon\"></i>\n                          <span class=\"item-name\">{{ field.displayName }}</span>\n                          @if (field.name === effectiveTimelineDateField) {\n                            <i class=\"fa-solid fa-check selected-check\"></i>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Orientation Toggle -->\n              <button\n                class=\"view-specific-btn\"\n                (click)=\"toggleTimelineOrientation()\"\n                [title]=\"state.timelineOrientation === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n                <i [class]=\"state.timelineOrientation === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n              </button>\n              <!-- Sort Order Toggle -->\n              <button\n                class=\"view-specific-btn\"\n                (click)=\"toggleTimelineSortOrder()\"\n                [title]=\"state.timelineSortOrder === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n                <i [class]=\"state.timelineSortOrder === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- View Mode Toggle \u2014 always rightmost in the header -->\n          <div class=\"view-mode-toggle\">\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'grid'\"\n              (click)=\"onViewModeChanged('grid')\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'cards'\"\n              (click)=\"onViewModeChanged('cards')\"\n              title=\"Cards View\">\n              <i class=\"fa-solid fa-grip\"></i>\n            </button>\n            @if (entityHasDateFields) {\n              <button\n                class=\"toggle-btn\"\n                [class.active]=\"state.viewMode === 'timeline'\"\n                (click)=\"onViewModeChanged('timeline')\"\n                title=\"Timeline View\">\n                <i class=\"fa-solid fa-timeline\"></i>\n              </button>\n            }\n            @if (selectedEntity?.SupportsGeoCoding) {\n              <button\n                class=\"toggle-btn\"\n                [class.active]=\"state.viewMode === 'map'\"\n                (click)=\"onViewModeChanged('map')\"\n                title=\"Map View\">\n                <i class=\"fa-solid fa-map-location-dot\"></i>\n              </button>\n            }\n          </div>\n        }\n        @if (!selectedEntity) {\n          <!-- Quick Access panel toggle -->\n          <button\n            class=\"header-action-btn\"\n            [class.active]=\"state.quickAccessPanelOpen\"\n            (click)=\"toggleQuickAccessPanel()\"\n            title=\"Recents & Favorites\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n            @if (recentRecords.length + favoriteRecords.length > 0) {\n              <span class=\"qa-badge\">{{ recentRecords.length + favoriteRecords.length }}</span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Content Body - Using mj-entity-viewer composite -->\n    <div class=\"content-body\" [class.home-content]=\"isAtHomeLevel\">\n      @if (!selectedEntity) {\n        <!-- Concept D: Application Groups + Search-First Home View -->\n        <div class=\"home-view-concept-d\">\n          @if (isLoadingEntities) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading entities...\" size=\"medium\"></mj-loading>\n            </div>\n          } @else {\n            <div class=\"home-main-area\" [class.panel-open]=\"state.quickAccessPanelOpen\">\n              <!-- Search Hero -->\n              <div class=\"search-hero\">\n                <div class=\"search-hero-container\">\n                  <i class=\"fa-solid fa-magnifying-glass search-hero-icon\"></i>\n                  <input\n                    #filterInput\n                    type=\"text\"\n                    class=\"search-hero-input\"\n                    placeholder=\"Search entities...\"\n                    [(ngModel)]=\"entityFilterText\"\n                  />\n                  @if (entityFilterText) {\n                    <button class=\"search-hero-clear\" (click)=\"entityFilterText = ''\">\n                      <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                  } @else {\n                    <span class=\"search-hero-shortcut\">/</span>\n                  }\n                </div>\n\n                <!-- Meta row: entity count + All/Favorites pills -->\n                <div class=\"search-meta-row\">\n                  <span class=\"search-entity-count\">\n                    {{ filteredEntityCount }} entities\n                    @if (applicationCount > 0) {\n                      across {{ applicationCount }} applications\n                    }\n                  </span>\n                  <div class=\"pill-toggle\">\n                    <button\n                      class=\"pill-btn\"\n                      [class.active]=\"state.homeViewMode === 'all'\"\n                      (click)=\"setHomeViewMode('all')\">\n                      All Entities\n                    </button>\n                    <button\n                      class=\"pill-btn\"\n                      [class.active]=\"state.homeViewMode === 'favorites'\"\n                      (click)=\"setHomeViewMode('favorites')\">\n                      <i class=\"fa-solid fa-star\"></i> My Favorites\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Entity Groups Area -->\n              <div class=\"entity-groups-area\">\n                @if (entityFilter?.applicationId) {\n                  <!-- Single-app mode: flat entity grid (no grouping) -->\n                  <div class=\"entity-item-grid\">\n                    @for (entity of flatFilteredEntities; track entity.ID) {\n                      <div\n                        class=\"entity-item\"\n                        (click)=\"onEntitySelected(entity)\"\n                        [title]=\"entity.Description || entity.DisplayNameOrName\">\n                        <div class=\"entity-item-icon\">\n                          <i [class]=\"getEntityIcon(entity)\"></i>\n                        </div>\n                        <div class=\"entity-item-text\">\n                          <span class=\"entity-item-name\">{{ entity.DisplayNameOrName }}</span>\n                          @if (entity.Description) {\n                            <span class=\"entity-item-desc\">{{ entity.Description }}</span>\n                          }\n                        </div>\n                        <button\n                          class=\"entity-item-fav\"\n                          [class.favorited]=\"isEntityFavorited(entity)\"\n                          (click)=\"toggleEntityFavorite(entity, $event)\"\n                          [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                          <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                        </button>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <!-- Multi-app mode: grouped by application -->\n                  @for (group of filteredAppEntityGroups; track group.applicationId) {\n                    <div class=\"app-group\">\n                      <div class=\"app-group-header\" (click)=\"toggleAppGroup(group.applicationId)\">\n                        <div\n                          class=\"app-group-icon\"\n                          [style.background]=\"group.applicationColor ? group.applicationColor + '15' : null\"\n                          [style.color]=\"group.applicationColor || null\">\n                          <i [class]=\"group.applicationIcon || 'fa-solid fa-folder'\"></i>\n                        </div>\n                        <span class=\"app-group-name\">{{ group.applicationName }}</span>\n                        <span class=\"app-group-count\">{{ group.entities.length }}</span>\n                        <i class=\"fa-solid fa-chevron-right app-group-chevron\"\n                           [class.expanded]=\"group.isExpanded\"></i>\n                      </div>\n                      @if (group.isExpanded) {\n                        <div class=\"app-group-entities\">\n                          <div class=\"entity-item-grid\">\n                            @for (entity of group.entities; track entity.ID) {\n                              <div\n                                class=\"entity-item\"\n                                (click)=\"onEntitySelected(entity)\"\n                                [title]=\"entity.Description || entity.DisplayNameOrName\">\n                                <div class=\"entity-item-icon\">\n                                  <i [class]=\"getEntityIcon(entity)\"></i>\n                                </div>\n                                <div class=\"entity-item-text\">\n                                  <span class=\"entity-item-name\">{{ entity.DisplayNameOrName }}</span>\n                                  @if (entity.Description) {\n                                    <span class=\"entity-item-desc\">{{ entity.Description }}</span>\n                                  }\n                                </div>\n                                <button\n                                  class=\"entity-item-fav\"\n                                  [class.favorited]=\"isEntityFavorited(entity)\"\n                                  (click)=\"toggleEntityFavorite(entity, $event)\"\n                                  [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                                  <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n\n                <!-- No results -->\n                @if (filteredEntityCount === 0 && entities.length > 0) {\n                  <div class=\"home-no-results\">\n                    <i class=\"fa-solid fa-magnifying-glass\"></i>\n                    <p>No entities match \"{{ entityFilterText }}\"</p>\n                  </div>\n                }\n                @if (entities.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-database empty-icon\"></i>\n                    <h3>No Entities Available</h3>\n                    <p>There are no entities configured for this application.</p>\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Quick Access Panel (right slide-in) -->\n            <div class=\"quick-access-panel\" [class.open]=\"state.quickAccessPanelOpen\">\n              <div class=\"qa-header\">\n                <h3>Quick Access</h3>\n                <button class=\"qa-close-btn\" (click)=\"toggleQuickAccessPanel()\">\n                  <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n              </div>\n              <div class=\"qa-body\">\n                <!-- Recent Records (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('recentRecords')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('recentRecords')\">\n                    <i class=\"fa-solid fa-clock-rotate-left qa-section-icon\"></i>\n                    <span>Recent Records</span>\n                    <span class=\"qa-section-count\">{{ quickAccessRecentRecords.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (record of quickAccessRecentRecords; track record.entityId + '|' + record.recordId) {\n                      <div class=\"qa-item\" (click)=\"onRecentRecordClick(record)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ record.recordName || record.recordId }}</div>\n                          <div class=\"qa-item-meta\">{{ record.entityName }}</div>\n                        </div>\n                        <span class=\"qa-item-time\">{{ formatRelativeTime(record.latestAt) }}</span>\n                      </div>\n                    }\n                    @if (quickAccessRecentRecords.length === 0) {\n                      <div class=\"qa-empty\">No recent records</div>\n                    }\n                  </div>\n                </div>\n\n                <!-- Recent Entities (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('recentEntities')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('recentEntities')\">\n                    <i class=\"fa-solid fa-table qa-section-icon\"></i>\n                    <span>Recent Entities</span>\n                    <span class=\"qa-section-count\">{{ quickAccessRecentEntities.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (entity of quickAccessRecentEntities; track entity.ID) {\n                      <div class=\"qa-item\" (click)=\"onEntitySelected(entity)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIcon(entity)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ entity.DisplayNameOrName }}</div>\n                        </div>\n                      </div>\n                    }\n                    @if (quickAccessRecentEntities.length === 0) {\n                      <div class=\"qa-empty\">No recent entities</div>\n                    }\n                  </div>\n                </div>\n\n                <!-- Favorite Records (max 3) -->\n                <div class=\"qa-section\" [class.collapsed]=\"!isQuickAccessSectionExpanded('favoriteRecords')\">\n                  <div class=\"qa-section-header\" (click)=\"toggleQuickAccessSection('favoriteRecords')\">\n                    <i class=\"fa-solid fa-star qa-section-icon\" style=\"color: var(--mj-status-warning);\"></i>\n                    <span>Favorite Records</span>\n                    <span class=\"qa-section-count\">{{ quickAccessFavoriteRecords.length }}</span>\n                    <i class=\"fa-solid fa-chevron-down qa-section-chevron\"></i>\n                  </div>\n                  <div class=\"qa-section-body\">\n                    @for (record of quickAccessFavoriteRecords; track record.userFavoriteId) {\n                      <div class=\"qa-item\" (click)=\"onFavoriteRecordClick(record)\">\n                        <div class=\"qa-item-icon\">\n                          <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                        </div>\n                        <div class=\"qa-item-info\">\n                          <div class=\"qa-item-name\">{{ record.recordName || record.recordId }}</div>\n                          <div class=\"qa-item-meta\">{{ record.entityName }}</div>\n                        </div>\n                      </div>\n                    }\n                    @if (quickAccessFavoriteRecords.length === 0) {\n                      <div class=\"qa-empty\">No favorite records</div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <mj-entity-viewer\n          #entityViewer\n          [entity]=\"selectedEntity\"\n          [viewEntity]=\"selectedViewEntity\"\n          [viewMode]=\"state.viewMode\"\n          [filterText]=\"debouncedFilterText\"\n          [selectedRecordId]=\"state.selectedRecordId\"\n          [config]=\"viewerConfig\"\n          [gridState]=\"currentGridState\"\n          [timelineConfig]=\"currentTimelineConfig\"\n          [gridSelectionMode]=\"'checkbox'\"\n          [showGridToolbar]=\"false\"\n          [showAddToListButton]=\"false\"\n          (viewModeChange)=\"onViewModeChanged($event)\"\n          (filterTextChange)=\"onFilterTextChanged($event)\"\n          (recordSelected)=\"onViewerRecordSelected($event)\"\n          (recordOpened)=\"onViewerRecordOpened($event)\"\n          (dataLoaded)=\"onDataLoaded($event)\"\n          (filteredCountChanged)=\"onFilteredCountChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\"\n          (selectionChanged)=\"onSelectionChanged($event)\"\n          (addToListRequested)=\"onAddToListRequested($event)\"\n          [mapRenderMode]=\"state.mapRenderMode || 'point'\"\n          [mapDisplayState]=\"mapDisplayState\"\n          (mapRenderModeChange)=\"onMapRenderModeChange($event)\"\n          (mapDisplayStateChange)=\"onMapDisplayStateChange($event)\">\n        </mj-entity-viewer>\n      }\n    </div>\n  </div>\n\n  <!-- Detail Panel (Right - Slide In) -->\n  @if (state.detailPanelOpen && selectedRecord) {\n    <div class=\"detail-panel\" [style.width.px]=\"state.detailPanelWidth\">\n      <!-- Detail Panel Actions Bar -->\n      <div class=\"detail-panel-actions\">\n        <button\n          class=\"detail-action-btn\"\n          (click)=\"openListManagementDialog()\"\n          title=\"Add to List\">\n          <i class=\"fa-solid fa-list-check\"></i>\n          <span>Add to List</span>\n        </button>\n      </div>\n      <mj-entity-record-detail-panel\n        [entity]=\"detailPanelEntity\"\n        [record]=\"selectedRecord\"\n        (close)=\"onDetailPanelClosed()\"\n        (openRecord)=\"onOpenRecord($event)\"\n        (navigateToRelated)=\"onNavigateToRelated($event)\"\n        (openRelatedRecord)=\"onOpenRelatedRecord($event)\"\n        (openForeignKeyRecord)=\"onOpenForeignKeyRecord($event)\">\n      </mj-entity-record-detail-panel>\n    </div>\n  }\n\n  <!-- View Configuration Panel -->\n  <mj-view-config-panel\n    [entity]=\"selectedEntity\"\n    [viewEntity]=\"selectedViewEntity\"\n    [isOpen]=\"state.viewConfigPanelOpen\"\n    [currentGridState]=\"currentGridState\"\n    [externalFilterState]=\"filterDialogState\"\n    [isSaving]=\"isSavingView\"\n    [DefaultSaveAsNew]=\"defaultSaveAsNew\"\n    [PendingNewViewName]=\"pendingNewViewName\"\n    [PendingNewViewDescription]=\"pendingNewViewDescription\"\n    [PendingNewViewIsShared]=\"pendingNewViewIsShared\"\n    (close)=\"onCloseViewConfigPanel()\"\n    (save)=\"onSaveView($event)\"\n    (saveDefaults)=\"onSaveDefaultViewSettings($event)\"\n    (delete)=\"onDeleteView()\"\n    (duplicate)=\"onDuplicateFromPanel()\"\n    (openFilterDialogRequest)=\"onOpenFilterDialogRequest($event)\">\n  </mj-view-config-panel>\n\n  <!-- Filter Dialog (rendered at dashboard level for full viewport width) -->\n  <mj-filter-dialog\n    [isOpen]=\"isFilterDialogOpen\"\n    [fields]=\"filterDialogFields\"\n    [filter]=\"filterDialogState\"\n    [disabled]=\"filterDialogDisabled\"\n    (close)=\"onCloseFilterDialog()\"\n    (apply)=\"onFilterApplied($event)\">\n  </mj-filter-dialog>\n\n  <!-- Export Dialog -->\n  <mj-export-dialog\n    [visible]=\"showExportDialog\"\n    [config]=\"exportDialogConfig\"\n    (closed)=\"onExportDialogClosed($event)\">\n  </mj-export-dialog>\n\n  <!-- List Management Dialog -->\n  @if (showListManagementDialog && listManagementConfig) {\n    <mj-list-management-dialog\n      [config]=\"listManagementConfig\"\n      [visible]=\"showListManagementDialog\"\n      (complete)=\"onListManagementComplete($event)\"\n      (cancel)=\"onListManagementCancel()\">\n    </mj-list-management-dialog>\n  }\n\n  <!-- Quick Save Dialog (F-001) -->\n  <mj-quick-save-dialog\n    [IsOpen]=\"showQuickSaveDialog\"\n    [ViewEntity]=\"selectedViewEntity\"\n    [EntityName]=\"selectedEntity?.DisplayNameOrName ?? ''\"\n    [Summary]=\"quickSaveSummary\"\n    [IsSaving]=\"isSavingView\"\n    [DefaultSaveAsNew]=\"defaultSaveAsNew\"\n    (Save)=\"onQuickSave($event)\"\n    (Close)=\"onQuickSaveClose()\"\n    (OpenAdvanced)=\"onQuickSaveOpenAdvanced($event)\">\n  </mj-quick-save-dialog>\n\n  <!-- Duplicate View Dialog (F-005) -->\n  <mj-duplicate-view-dialog\n    [IsOpen]=\"showDuplicateDialog\"\n    [SourceViewName]=\"duplicateSourceViewName\"\n    [Summary]=\"duplicateSummary\"\n    (Duplicate)=\"onDuplicateConfirmed($event)\"\n    (Cancel)=\"onDuplicateCancel()\">\n  </mj-duplicate-view-dialog>\n\n  <!-- Shared View Warning Dialog (view-creation-flow Scenario 5) -->\n  <mj-shared-view-warning-dialog\n    [IsOpen]=\"showSharedViewWarning\"\n    [ViewName]=\"selectedViewEntity?.Name ?? ''\"\n    (Action)=\"onSharedViewAction($event)\"\n    (Cancel)=\"onSharedViewWarningCancel()\">\n  </mj-shared-view-warning-dialog>\n</div>\n", styles: [".data-explorer-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface-card);\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed {\n  width: 48px;\n}\n\n.content-area {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator {\n  font-size: 10px;\n  color: var(--mj-border-strong);\n  flex-shrink: 0;\n}\n\n.content-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n  position: relative;\n  z-index: 1100; /* Above Leaflet map containers (z-index ~400-1000) so dropdowns render on top */\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n/* View Selector within header */\n.header-left ::ng-deep mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.header-center {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 8px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.smart-filter-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: var(--mj-text-primary);\n}\n.toggle-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Header Action Button (Add to List, etc.) */\n.header-action-btn {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn:hover:not(.disabled) {\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.header-action-btn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.header-action-btn i {\n  font-size: 14px;\n}\n.selection-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n/* Timeline Date Field Selector - Styled Dropdown */\n.date-field-selector-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.date-field-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.date-field-selector-wrapper {\n  position: relative;\n}\n\n.date-field-selector-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 120px;\n  max-width: 200px;\n}\n\n.date-field-selector-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.date-field-selector-button:disabled {\n  cursor: default;\n  opacity: 0.8;\n}\n\n.date-field-selector-button.open {\n  background: var(--mj-bg-surface-active);\n  border-color: var(--mj-brand-primary);\n}\n\n.date-field-icon {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.date-field-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.date-field-arrow {\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.date-field-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n.date-field-dropdown-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 180px;\n  max-width: 280px;\n  max-height: 300px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n\n.date-field-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n  font-size: 13px;\n}\n\n.date-field-dropdown-item:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.date-field-dropdown-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item.selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n}\n\n.date-field-dropdown-item .item-icon {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  width: 16px;\n  text-align: center;\n}\n\n.date-field-dropdown-item .item-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.date-field-dropdown-item .selected-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n/* View-specific controls \u2014 contextual controls for the active view mode.\n   Positioned LEFT of the view mode toggle with a subtle visual separator. */\n.view-specific-controls {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.view-specific-btn {\n  width: 30px;\n  height: 30px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.view-specific-btn:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Legacy \u2014 keep for backward compat but no longer used in template */\n.timeline-orientation-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.content-body {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container,\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: var(--mj-border-default);\n  margin-bottom: 24px;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   CONCEPT D: HOME VIEW LAYOUT\n   ============================================ */\n\n.home-view-concept-d {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.home-main-area {\n  flex: 1;\n  overflow-y: auto;\n  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.home-main-area.panel-open {\n  margin-right: 320px;\n}\n\n/* ============================================\n   SEARCH HERO\n   ============================================ */\n\n.search-hero {\n  background: var(--mj-bg-surface);\n  padding: 36px 40px 24px;\n  text-align: center;\n}\n\n.search-hero-container {\n  position: relative;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.search-hero-input {\n  width: 100%;\n  padding: 14px 18px 14px 44px;\n  font-size: 15px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  outline: none;\n  transition: all 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  font-family: inherit;\n}\n\n.search-hero-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.search-hero-input::placeholder {\n  color: var(--mj-text-primary);\n}\n\n.search-hero-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-primary);\n  font-size: 15px;\n  pointer-events: none;\n}\n\n.search-hero-shortcut {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.search-hero-clear {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n/* Meta row: entity count + pills */\n.search-meta-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.search-entity-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.pill-toggle {\n  display: flex;\n  gap: 6px;\n}\n\n.pill-btn {\n  padding: 6px 16px;\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pill-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.pill-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.pill-btn i {\n  font-size: 11px;\n}\n\n/* ============================================\n   APPLICATION GROUPS\n   ============================================ */\n\n.entity-groups-area {\n  padding: 12px 40px 60px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.app-group {\n  margin-bottom: 4px;\n}\n\n.app-group-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.12s;\n  user-select: none;\n}\n\n.app-group-header:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.app-group-icon {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 17px;\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.app-group-name {\n  font-size: 21px;\n  font-weight: 600;\n  flex: 1;\n}\n\n.app-group-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: transform 0.2s;\n}\n\n.app-group-chevron.expanded {\n  transform: rotate(90deg);\n}\n\n.app-group-entities {\n  padding: 4px 14px 10px 60px;\n}\n\n/* ============================================\n   ENTITY ITEM GRID (pills)\n   ============================================ */\n\n.entity-item-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  gap: 12px;\n}\n\n.entity-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 14px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.12s;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.entity-item:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.entity-item-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.entity-item:hover .entity-item-icon {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.entity-item-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-item-name {\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.entity-item-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.entity-item-fav {\n  color: var(--mj-text-muted);\n  opacity: 0;\n  transition: opacity 0.12s;\n  font-size: 11px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  align-self: center;\n}\n\n.entity-item:hover .entity-item-fav {\n  opacity: 1;\n}\n\n.entity-item-fav.favorited {\n  opacity: 1;\n  color: var(--mj-status-warning);\n}\n\n/* ============================================\n   QUICK ACCESS PANEL (right slide-in)\n   ============================================ */\n\n.quick-access-panel {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 50;\n  transform: translateX(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.quick-access-panel.open {\n  transform: translateX(0);\n}\n\n.qa-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-header h3 {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 0;\n}\n\n.qa-close-btn {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.qa-close-btn:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-body {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.qa-section {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.qa-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  user-select: none;\n}\n\n.qa-section-header .qa-section-icon {\n  font-size: 12px;\n}\n\n.qa-section-header .qa-section-count {\n  background: var(--mj-bg-surface-card);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  margin-left: auto;\n}\n\n.qa-section-header .qa-section-chevron {\n  font-size: 10px;\n  transition: transform 0.15s;\n}\n\n.qa-section.collapsed .qa-section-chevron {\n  transform: rotate(-90deg);\n}\n\n.qa-section-body {\n  padding: 0 8px 8px;\n}\n\n.qa-section.collapsed .qa-section-body {\n  display: none;\n}\n\n.qa-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.08s;\n}\n\n.qa-item:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.qa-item-icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.qa-item-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.qa-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.qa-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.qa-item-time {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.qa-empty {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n/* Quick Access toggle button badge */\n.qa-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 0 5px;\n  border-radius: 8px;\n  min-width: 16px;\n  text-align: center;\n}\n\n/* No results state for home view */\n.home-no-results {\n  text-align: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n\n.home-no-results i {\n  font-size: 28px;\n  margin-bottom: 10px;\n  display: block;\n}\n\n.home-no-results p {\n  font-size: 14px;\n  margin: 0;\n}\n\n.detail-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: slideIn 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n}\n\n.detail-panel mj-entity-record-detail-panel {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* Detail Panel Actions Bar */\n.detail-panel-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.detail-action-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.detail-action-btn i {\n  font-size: 12px;\n}\n\n:host ::ng-deep mj-explorer-grid-view,\n:host ::ng-deep mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   HOME SCREEN STYLES\n   ============================================ */\n\n/* Home-level header adjustments */\n.content-header.home-header {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 16px 24px 8px;\n}\n\n.content-body.home-content {\n  padding: 0;\n}\n\n/* Smart filter with search icon (entity-level filter) */\n.filter-icon {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container .smart-filter-input {\n  padding-left: 40px;\n}\n\n/* ============================================\n   VIEW MODE TOGGLE OVERRIDES\n   ============================================ */\n\n.view-mode-toggle .toggle-btn {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* ============================================\n   EMPTY STATE VARIANTS\n   ============================================ */\n\n.empty-state.small {\n  height: auto;\n  padding: 32px;\n  background: var(--mj-bg-surface-card);\n}\n\n.empty-state.small .empty-icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small h3 {\n  font-size: 16px;\n}\n\n.empty-state.small p {\n  font-size: 13px;\n}\n\n/* ============================================\n   RESPONSIVE STYLES\n   ============================================ */\n\n@media (max-width: 1200px) {\n  .entity-item-grid {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .search-hero {\n    padding: 24px 16px 16px;\n  }\n\n  .entity-groups-area {\n    padding: 8px 16px 40px;\n  }\n\n  .app-group-entities {\n    padding-left: 36px;\n  }\n\n  .home-main-area.panel-open {\n    margin-right: 0;\n  }\n\n  .quick-access-panel {\n    width: 100%;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container {\n    flex-direction: column;\n  }\n\n  .navigation-panel {\n    display: none;\n  }\n\n  .content-header {\n    padding: 12px 16px;\n  }\n\n  .content-body {\n    padding: 12px 16px;\n  }\n\n  .entity-item-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .view-mode-toggle {\n    display: none;\n  }\n\n  .app-group-name {\n    font-size: 17px;\n  }\n\n  .entity-item-name {\n    font-size: 14px;\n  }\n}\n"] }]
+    }], () => [{ type: i1.ExplorerStateService }, { type: i0.ChangeDetectorRef }, { type: i2.RecentAccessService }, { type: i3.ExportService }, { type: i0.NgZone }], { filterInputRef: [{
             type: ViewChild,
             args: ['filterInput']
         }], viewSelectorRef: [{
@@ -3630,11 +3661,13 @@ export { DataExplorerDashboardComponent };
             type: Input
         }], contextIcon: [{
             type: Input
+        }], initialQueryParams: [{
+            type: Input
         }], DisplayNameChanged: [{
             type: Output
         }], handleKeyboardShortcut: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 76 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 77 }); })();
 //# sourceMappingURL=data-explorer-dashboard.component.js.map