npm - @memberjunction/ng-dashboards - Versions diffs - 5.10.1 → 5.12.0 - Mend

@memberjunction/ng-dashboards 5.10.1 → 5.12.0

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

Files changed (231) hide show

package/dist/DataExplorer/data-explorer-dashboard.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-explorer-dashboard.component.d.ts","sourceRoot":"","sources":["../../src/DataExplorer/data-explorer-dashboard.component.ts"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"data-explorer-dashboard.component.d.ts","sourceRoot":"","sources":["../../src/DataExplorer/data-explorer-dashboard.component.ts"],"names":[],"mappings":"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"}

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

@@ -880,6 +880,11 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     // Quick Save Dialog state (F-001)
     showQuickSaveDialog = false;
     quickSaveSummary = null;
+    // Pending new-view context: carries name/description/sharing from quick save dialog
+    // to the config panel when user clicks "Customize columns, filters & sorting..."
+    pendingNewViewName = '';
+    pendingNewViewDescription = '';
+    pendingNewViewIsShared = false;
     // Duplicate View Dialog state (F-005)
     showDuplicateDialog = false;
     duplicateSourceViewName = '';
@@ -1689,6 +1694,13 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
      */
     onCloseViewConfigPanel() {
         this.stateService.closeViewConfigPanel();
+        this.clearPendingNewViewState();
+    }
+    clearPendingNewViewState() {
+        this.pendingNewViewName = '';
+        this.pendingNewViewDescription = '';
+        this.pendingNewViewIsShared = false;
+        this.defaultSaveAsNew = false;
     }
     // ========================================
     // FILTER DIALOG (at dashboard level for full width)
@@ -1776,6 +1788,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                     this.stateService.closeViewConfigPanel();
                     // BUG-002: Show success notification
                     this.showNotification(`View "${newView.Name}" created successfully`, 'success', 2500);
+                    this.clearPendingNewViewState();
                 }
                 else {
                     // BUG-001: Panel stays open on failure
@@ -2109,7 +2122,12 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
     /**
      * Handle quick save "Open Advanced" - close dialog and open full config panel
      */
-    onQuickSaveOpenAdvanced() {
+    onQuickSaveOpenAdvanced(event) {
+        // Carry form data from quick save dialog to the config panel
+        this.pendingNewViewName = event.Name;
+        this.pendingNewViewDescription = event.Description;
+        this.pendingNewViewIsShared = event.IsShared;
+        this.defaultSaveAsNew = true;
         this.showQuickSaveDialog = false;
         this.stateService.openViewConfigPanel();
         this.cdr.detectChanges();
@@ -3179,7 +3197,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
                 applicationId: '__system_other__',
                 applicationName: 'System & Other',
                 applicationIcon: 'fa-solid fa-ellipsis',
-                applicationColor: '#9e9e9e',
+                applicationColor: 'var(--mj-text-disabled)',
                 entities: ungroupedEntities,
                 isExpanded: this.state.expandedAppGroups.includes('__system_other__')
             });
@@ -3468,7 +3486,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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 24, vars: 37, 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"], [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", "#f59e0b"], [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" }, 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) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵconditionalCreate(1, DataExplorerDashboardComponent_Conditional_1_Template, 2, 16, "div", 3);
             i0.ɵɵelementStart(2, "div", 4);
@@ -3498,7 +3516,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(20, DataExplorerDashboardComponent_Conditional_20_Template, 1, 2, "mj-list-management-dialog", 19);
             i0.ɵɵelementStart(21, "mj-quick-save-dialog", 20);
-            i0.ɵɵlistener("Save", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_Save_21_listener($event) { return ctx.onQuickSave($event); })("Close", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_Close_21_listener() { return ctx.onQuickSaveClose(); })("OpenAdvanced", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_OpenAdvanced_21_listener() { return ctx.onQuickSaveOpenAdvanced(); });
+            i0.ɵɵlistener("Save", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_Save_21_listener($event) { return ctx.onQuickSave($event); })("Close", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_Close_21_listener() { return ctx.onQuickSaveClose(); })("OpenAdvanced", function DataExplorerDashboardComponent_Template_mj_quick_save_dialog_OpenAdvanced_21_listener($event) { return ctx.onQuickSaveOpenAdvanced($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(22, "mj-duplicate-view-dialog", 21);
             i0.ɵɵlistener("Duplicate", function DataExplorerDashboardComponent_Template_mj_duplicate_view_dialog_Duplicate_22_listener($event) { return ctx.onDuplicateConfirmed($event); })("Cancel", function DataExplorerDashboardComponent_Template_mj_duplicate_view_dialog_Cancel_22_listener() { return ctx.onDuplicateCancel(); });
@@ -3528,7 +3546,7 @@ let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extend
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.state.detailPanelOpen && ctx.selectedRecord ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("entity", ctx.selectedEntity)("viewEntity", ctx.selectedViewEntity)("isOpen", ctx.state.viewConfigPanelOpen)("currentGridState", ctx.currentGridState)("externalFilterState", ctx.filterDialogState)("isSaving", ctx.isSavingView)("DefaultSaveAsNew", ctx.defaultSaveAsNew);
+            i0.ɵɵproperty("entity", ctx.selectedEntity)("viewEntity", ctx.selectedViewEntity)("isOpen", ctx.state.viewConfigPanelOpen)("currentGridState", ctx.currentGridState)("externalFilterState", ctx.filterDialogState)("isSaving", ctx.isSavingView)("DefaultSaveAsNew", ctx.defaultSaveAsNew)("PendingNewViewName", ctx.pendingNewViewName)("PendingNewViewDescription", ctx.pendingNewViewDescription)("PendingNewViewIsShared", ctx.pendingNewViewIsShared);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isFilterDialogOpen)("fields", ctx.filterDialogFields)("filter", ctx.filterDialogState)("disabled", ctx.filterDialogDisabled);
             i0.ɵɵadvance();
@@ -3541,7 +3559,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, i8.ListManagementDialogComponent, i5.ExportDialogComponent, 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: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\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: #f5f7fa;\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: white;\n  border-bottom: 1px solid #eee;\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: #666;\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: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: #1a1a1a;\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: #ccc;\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: white;\n  border-bottom: 1px solid #e0e0e0;\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: #1976d2;\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\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 #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #999;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #424242;\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: #f0f0f0;\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: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\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 #e0e0e0;\n  background: white;\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: #1976d2;\n  color: #1976d2;\n  background: #f5f9ff;\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: #1976d2;\n  color: white;\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(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\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(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\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(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\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(--text-secondary, #666);\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(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\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(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%] {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected[_ngcontent-%COMP%]:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n  color: var(--text-secondary, #666);\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(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n\n\n.timeline-orientation-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\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: white;\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\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: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #e0e0e0;\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: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\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: linear-gradient(180deg, white 0%, #f5f7fa 100%);\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 #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  color: #111827;\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: #1976d2;\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(25, 118, 210, 0.08);\n}\n\n.search-hero-input[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\n.search-hero-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\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: #f5f7fa;\n  border: 1px solid #e5e7eb;\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: #9ca3af;\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: #757575;\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #424242;\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: #9ca3af;\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 #e5e7eb;\n  background: white;\n  font-size: 13px;\n  color: #6b7280;\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: #1976d2;\n  color: #1976d2;\n}\n\n.pill-btn.active[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n  border-color: #1976d2;\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: #eff6ff;\n  color: #2563eb;\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: #9ca3af;\n  background: #f5f7fa;\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron[_ngcontent-%COMP%] {\n  color: #9ca3af;\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 #f0f1f3;\n  background: white;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n  border-color: #bfdbfe;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: #eff6ff;\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: #6b7280;\n  background: #f5f7fa;\n  flex-shrink: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .entity-item-icon[_ngcontent-%COMP%] {\n  background: #dbeafe;\n  color: #2563eb;\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: #9ca3af;\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: #9ca3af;\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: #f59e0b;\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: white;\n  border-left: 1px solid #e5e7eb;\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 #e5e7eb;\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: #9ca3af;\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: #f5f7fa;\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 #f0f1f3;\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: #9ca3af;\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: #f5f7fa;\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: #f5f7fa;\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: #f5f7fa;\n  color: #6b7280;\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: #9ca3af;\n}\n\n.qa-item-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #9ca3af;\n  white-space: nowrap;\n}\n\n.qa-empty[_ngcontent-%COMP%] {\n  padding: 20px 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n}\n\n\n\n.qa-badge[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\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: #9ca3af;\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: white;\n  border-left: 1px solid #e0e0e0;\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: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 1px solid #e2e8f0;\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: white;\n  color: #475569;\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: #3b82f6;\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);\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: #999;\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: #fafafa;\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: [i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel, i7.EntityViewerComponent, i7.EntityRecordDetailPanelComponent, i7.ViewConfigPanelComponent, i7.QuickSaveDialogComponent, i7.DuplicateViewDialogComponent, i7.SharedViewWarningDialogComponent, i3.LoadingComponent, i8.ListManagementDialogComponent, i5.ExportDialogComponent, 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: [
                 trigger('slideInLeft', [
                     transition(':enter', [
                         style({ transform: 'translateX(-100%)', opacity: 0 }),
@@ -3569,7 +3587,7 @@ 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: #f59e0b;\"></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    (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()\">\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: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\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: #f5f7fa;\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\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: #666;\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: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current {\n  color: #1a1a1a;\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: #ccc;\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: white;\n  border-bottom: 1px solid #e0e0e0;\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: #1976d2;\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count {\n  font-size: 13px;\n  color: #666;\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 #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input::placeholder {\n  color: #999;\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: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: #e0e0e0;\n  color: #424242;\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: #f0f0f0;\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: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: #333;\n}\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\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 #e0e0e0;\n  background: white;\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n  margin-left: 8px;\n}\n.header-action-btn:hover:not(.disabled) {\n  border-color: #1976d2;\n  color: #1976d2;\n  background: #f5f9ff;\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: #1976d2;\n  color: white;\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(--background-alt, #f5f5f5);\n  border: 1px solid var(--border-color, #e0e0e0);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-primary, #333);\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(--background-hover, #e8e8e8);\n  border-color: var(--border-color-hover, #ccc);\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(--background-active, #e0e0e0);\n  border-color: var(--primary-color, #007bff);\n}\n\n.date-field-icon {\n  color: var(--text-secondary, #666);\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(--text-secondary, #666);\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(--background-panel, #fff);\n  border: 1px solid var(--border-color, #e0e0e0);\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(--background-hover, #f5f5f5);\n}\n\n.date-field-dropdown-item.selected {\n  background: var(--primary-light, #e6f0ff);\n}\n\n.date-field-dropdown-item.selected:hover {\n  background: var(--primary-light-hover, #d6e4f9);\n}\n\n.date-field-dropdown-item .item-icon {\n  color: var(--text-secondary, #666);\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(--primary-color, #007bff);\n  font-size: 12px;\n}\n\n/* Timeline Orientation Toggle */\n.timeline-orientation-toggle {\n  display: flex;\n  background: #f0f0f0;\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: white;\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\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: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: #e0e0e0;\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: #333;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\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: linear-gradient(180deg, white 0%, #f5f7fa 100%);\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 #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  color: #111827;\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: #1976d2;\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(25, 118, 210, 0.08);\n}\n\n.search-hero-input::placeholder {\n  color: #9ca3af;\n}\n\n.search-hero-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\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: #f5f7fa;\n  border: 1px solid #e5e7eb;\n  padding: 2px 7px;\n  border-radius: 5px;\n  font-size: 12px;\n  color: #9ca3af;\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: #757575;\n  transition: all 0.15s ease;\n}\n\n.search-hero-clear:hover {\n  background: #e0e0e0;\n  color: #424242;\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: #9ca3af;\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 #e5e7eb;\n  background: white;\n  font-size: 13px;\n  color: #6b7280;\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: #1976d2;\n  color: #1976d2;\n}\n\n.pill-btn.active {\n  background: #1976d2;\n  color: white;\n  border-color: #1976d2;\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: #eff6ff;\n  color: #2563eb;\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: #9ca3af;\n  background: #f5f7fa;\n  padding: 2px 9px;\n  border-radius: 10px;\n}\n\n.app-group-chevron {\n  color: #9ca3af;\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 #f0f1f3;\n  background: white;\n}\n\n.entity-item:hover {\n  border-color: #bfdbfe;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  background: #eff6ff;\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: #6b7280;\n  background: #f5f7fa;\n  flex-shrink: 0;\n}\n\n.entity-item:hover .entity-item-icon {\n  background: #dbeafe;\n  color: #2563eb;\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: #9ca3af;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.3;\n}\n\n.entity-item-fav {\n  color: #9ca3af;\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: #f59e0b;\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: white;\n  border-left: 1px solid #e5e7eb;\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 #e5e7eb;\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: #9ca3af;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.qa-close-btn:hover {\n  background: #f5f7fa;\n}\n\n.qa-body {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.qa-section {\n  border-bottom: 1px solid #f0f1f3;\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: #9ca3af;\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: #f5f7fa;\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: #f5f7fa;\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: #f5f7fa;\n  color: #6b7280;\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: #9ca3af;\n}\n\n.qa-item-time {\n  font-size: 11px;\n  color: #9ca3af;\n  white-space: nowrap;\n}\n\n.qa-empty {\n  padding: 20px 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n}\n\n/* Quick Access toggle button badge */\n.qa-badge {\n  background: #1976d2;\n  color: white;\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: #9ca3af;\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: white;\n  border-left: 1px solid #e0e0e0;\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: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 1px solid #e2e8f0;\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: white;\n  color: #475569;\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: #3b82f6;\n  color: white;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);\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: #999;\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: #fafafa;\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"] }]
+                ], 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: [{
             type: ViewChild,
             args: ['filterInput']
@@ -3594,5 +3612,5 @@ export { DataExplorerDashboardComponent };
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 75 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 76 }); })();
 //# sourceMappingURL=data-explorer-dashboard.component.js.map