@memberjunction/ng-dashboards 5.37.0 → 5.39.0

package/dist/AI/components/system/system-configuration.component.js

@@ -948,23 +948,23 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
         return 'fa-solid fa-sliders';
     }
     static ɵfac = function SystemConfigurationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SystemConfigurationComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemConfigurationComponent, selectors: [["app-system-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 18, consts: [["Title", "Configuration", "Icon", "fa-solid fa-cogs"], ["meta", ""], ["Label", "configurations", 3, "Count", "Total"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search configurations...", 3, "ValueChange", "Value"], [3, "Flex"], [1, "loading-container"], [1, "error-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading AI configurations...", "size", "large"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "fa-solid", "fa-sliders"], [1, "configurations-grid"], [1, "configurations-list"], [1, "config-card", 3, "expanded"], [1, "config-card"], [1, "card-header", 3, "click"], [1, "config-info"], [1, "config-icon"], [1, "config-details"], [1, "config-name"], [1, "config-meta"], [1, "default-badge"], [1, "status-badge", 3, "ngClass"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "config-description"], [1, "config-description", "text-muted"], [1, "expanded-content"], [1, "card-actions", 3, "click"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-star"], [1, "config-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "prompts-section"], [1, "section-title"], [1, "fa-solid", "fa-message-lines"], [1, "prompt-links"], [1, "prompt-link"], [1, "no-prompt"], [1, "params-section"], [1, "prompt-link", 3, "click"], [1, "prompt-link-info"], [1, "prompt-link-icon"], [1, "fa-solid", "fa-compress"], [1, "prompt-link-details"], [1, "prompt-link-label"], [1, "prompt-link-name"], [1, "fa-solid", "fa-arrow-right", "prompt-link-arrow"], [1, "fa-solid", "fa-file-lines"], [1, "fa-solid", "fa-gear"], [1, "params-grid"], [1, "param-item"], [1, "param-item", 3, "click"], [1, "param-info"], [1, "param-type-icon"], [1, "param-details"], [1, "param-name"], [1, "param-type"], [1, "param-value"], [1, "no-params"], [1, "configurations-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "config-name-cell"], [1, "config-icon-small"], [1, "config-name-text"], [1, "default-badge", 2, "margin-left", "8px"], [1, "config-description-small"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", 1, "action-btn-small", "primary", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge", "default"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "detail-grid", "single-column"], [1, "muted"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "detail-params-list"], [1, "detail-param-item"], [1, "params-more"]], template: function SystemConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemConfigurationComponent, selectors: [["app-system-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 18, consts: [["Title", "Configuration", "Icon", "fa-solid fa-cogs"], ["meta", ""], ["Label", "configurations", 3, "Count", "Total"], ["actions", ""], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search configurations...", 3, "ValueChange", "Value"], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], [3, "Flex"], [1, "loading-container"], [1, "error-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading AI configurations...", "size", "large"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "fa-solid", "fa-sliders"], [1, "configurations-grid"], [1, "configurations-list"], [1, "config-card", 3, "expanded"], [1, "config-card"], [1, "card-header", 3, "click"], [1, "config-info"], [1, "config-icon"], [1, "config-details"], [1, "config-name"], [1, "config-meta"], [1, "default-badge"], [1, "status-badge", 3, "ngClass"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "config-description"], [1, "config-description", "text-muted"], [1, "expanded-content"], [1, "card-actions", 3, "click"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-star"], [1, "config-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "prompts-section"], [1, "section-title"], [1, "fa-solid", "fa-message-lines"], [1, "prompt-links"], [1, "prompt-link"], [1, "no-prompt"], [1, "params-section"], [1, "prompt-link", 3, "click"], [1, "prompt-link-info"], [1, "prompt-link-icon"], [1, "fa-solid", "fa-compress"], [1, "prompt-link-details"], [1, "prompt-link-label"], [1, "prompt-link-name"], [1, "fa-solid", "fa-arrow-right", "prompt-link-arrow"], [1, "fa-solid", "fa-file-lines"], [1, "fa-solid", "fa-gear"], [1, "params-grid"], [1, "param-item"], [1, "param-item", 3, "click"], [1, "param-info"], [1, "param-type-icon"], [1, "param-details"], [1, "param-name"], [1, "param-type"], [1, "param-value"], [1, "no-params"], [1, "configurations-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "config-name-cell"], [1, "config-icon-small"], [1, "config-name-text"], [1, "default-badge", 2, "margin-left", "8px"], [1, "config-description-small"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", 1, "action-btn-small", "primary", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge", "default"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "detail-grid", "single-column"], [1, "muted"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "detail-params-list"], [1, "detail-param-item"], [1, "params-more"]], template: function SystemConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
             i0.ɵɵelement(3, "mj-stat-badge", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3)(5, "mj-filter-popover", 4);
-            i0.ɵɵlistener("ClearAllRequested", function SystemConfigurationComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.resetPopoverFilters(); });
-            i0.ɵɵelementStart(6, "mj-filter-panel", 5);
-            i0.ɵɵlistener("ValuesChange", function SystemConfigurationComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function SystemConfigurationComponent_Template_mj_filter_panel_Reset_6_listener() { return ctx.resetPopoverFilters(); });
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-refresh-button", 4);
+            i0.ɵɵlistener("Clicked", function SystemConfigurationComponent_Template_mj_refresh_button_Clicked_5_listener() { return ctx.loadData(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "mj-view-toggle", 6);
-            i0.ɵɵlistener("KeyChange", function SystemConfigurationComponent_Template_mj_view_toggle_KeyChange_7_listener($event) { return ctx.setViewMode($event); });
+            i0.ɵɵelementStart(6, "div", 5)(7, "mj-page-search", 6);
+            i0.ɵɵlistener("ValueChange", function SystemConfigurationComponent_Template_mj_page_search_ValueChange_7_listener($event) { return ctx.onSearchTermChange($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mj-refresh-button", 7);
-            i0.ɵɵlistener("Clicked", function SystemConfigurationComponent_Template_mj_refresh_button_Clicked_8_listener() { return ctx.loadData(); });
+            i0.ɵɵelementStart(8, "mj-filter-popover", 7);
+            i0.ɵɵlistener("ClearAllRequested", function SystemConfigurationComponent_Template_mj_filter_popover_ClearAllRequested_8_listener() { return ctx.resetPopoverFilters(); });
+            i0.ɵɵelementStart(9, "mj-filter-panel", 8);
+            i0.ɵɵlistener("ValuesChange", function SystemConfigurationComponent_Template_mj_filter_panel_ValuesChange_9_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function SystemConfigurationComponent_Template_mj_filter_panel_Reset_9_listener() { return ctx.resetPopoverFilters(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 8)(10, "mj-page-search", 9);
-            i0.ɵɵlistener("ValueChange", function SystemConfigurationComponent_Template_mj_page_search_ValueChange_10_listener($event) { return ctx.onSearchTermChange($event); });
+            i0.ɵɵelementStart(10, "mj-view-toggle", 9);
+            i0.ɵɵlistener("KeyChange", function SystemConfigurationComponent_Template_mj_view_toggle_KeyChange_10_listener($event) { return ctx.setViewMode($event); });
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(11, "mj-page-body", 10);
             i0.ɵɵconditionalCreate(12, SystemConfigurationComponent_Conditional_12_Template, 2, 0, "div", 11);
@@ -979,16 +979,16 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("Count", ctx.filteredConfigurations.length)("Total", ctx.configurations.length);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.isLoading);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Value", ctx.currentFilters.searchTerm);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Fields", ctx.configFilterFields)("Values", ctx.configFilterValues);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Options", ctx.configViewOptions)("ActiveKey", ctx.viewMode);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Loading", ctx.isLoading);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Value", ctx.currentFilters.searchTerm);
-            i0.ɵɵadvance();
             i0.ɵɵproperty("Flex", true);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading ? 12 : -1);
@@ -1002,7 +1002,7 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
             i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedConfig ? 17 : -1);
-        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i3.MJFilterPopoverComponent, i3.MJPageSearchComponent, i3.MJFilterPanelComponent, i3.MJViewToggleComponent, i3.MJStatBadgeComponent, i3.MJRefreshButtonComponent], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]   mj-page-body[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n  border-radius: 12px;\n  color: var(--mj-status-error);\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 80px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 72px;\n  color: var(--mj-border-strong);\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 28px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.configurations-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n\n\n\n\n.config-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.2s ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.config-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.config-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n\n\n.default-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.config-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.config-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n\n\n.prompts-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.prompt-links[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  transform: translateX(4px);\n}\n\n.prompt-link-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.prompt-link-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover   .prompt-link-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: translateX(4px);\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-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  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.param-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.param-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.param-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-warning);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n\n\n\n\n.configurations-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.configurations-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child {\n  cursor: default;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.configurations-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.config-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.config-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n}\n\n.config-name-text[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  }\n}\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 20px;\n  }\n\n  .config-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\nas-split[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default[_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.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.detail-params-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface);\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible[_ngcontent-%COMP%] {\n    right: 0;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
+        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i3.MJFilterPopoverComponent, i3.MJPageSearchComponent, i3.MJFilterPanelComponent, i3.MJViewToggleComponent, i3.MJStatBadgeComponent, i3.MJRefreshButtonComponent], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]   mj-page-body[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n  border-radius: 12px;\n  color: var(--mj-status-error);\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 80px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 72px;\n  color: var(--mj-border-strong);\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 28px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.configurations-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n\n\n\n\n.config-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.2s ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.config-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.config-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n\n\n.default-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.config-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.config-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n\n\n.prompts-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.prompt-links[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  transform: translateX(4px);\n}\n\n.prompt-link-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.prompt-link-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover   .prompt-link-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: translateX(4px);\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-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  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.param-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.param-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.param-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-warning);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n\n\n\n\n.configurations-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.configurations-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child {\n  cursor: default;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.configurations-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.config-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.config-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n}\n\n.config-name-text[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  }\n}\n\n@media (max-width: 768px) {\n  \n\n\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 20px;\n  }\n\n  .config-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\nas-split[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default[_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.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.detail-params-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface);\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible[_ngcontent-%COMP%] {\n    right: 0;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 };
 SystemConfigurationComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIConfigResource')
@@ -1010,7 +1010,7 @@ SystemConfigurationComponent = __decorate([
 export { SystemConfigurationComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SystemConfigurationComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-system-configuration', template: "<mj-page-layout>\n  <!-- Header -->\n  <mj-page-header\n    Title=\"Configuration\"\n    Icon=\"fa-solid fa-cogs\">\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"filteredConfigurations.length\"\n        [Total]=\"configurations.length\"\n        Label=\"configurations\">\n      </mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetPopoverFilters()\">\n        <mj-filter-panel\n          [Fields]=\"configFilterFields\"\n          [Values]=\"configFilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetPopoverFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n\n      <mj-view-toggle\n        [Options]=\"configViewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n\n      <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"loadData()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search configurations...\"\n        [Value]=\"currentFilters.searchTerm\"\n        (ValueChange)=\"onSearchTermChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <!-- Main Content (no sidebar \u2014 filters live in the popover above) -->\n  <mj-page-body [Flex]=\"true\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading AI configurations...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Error State -->\n          @if (error && !isLoading) {\n            <div class=\"error-container\">\n              <p class=\"error-message\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                {{ error }}\n              </p>\n            </div>\n          }\n\n          <!-- Configurations Content -->\n          @if (!isLoading && !error) {\n            @if (filteredConfigurations.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-sliders\"></i>\n                <h3>No configurations found</h3>\n                <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"configurations-grid\">\n                  @for (config of filteredConfigurations; track config.ID) {\n                    <div class=\"config-card\" [class.expanded]=\"config.isExpanded\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleExpanded(config)\">\n                        <div class=\"config-info\">\n                          <div class=\"config-icon\">\n                            <i class=\"fa-solid fa-sliders\"></i>\n                          </div>\n                          <div class=\"config-details\">\n                            <h4 class=\"config-name\">{{ config.Name }}</h4>\n                            <div class=\"config-meta\">\n                              @if (config.IsDefault) {\n                                <span class=\"default-badge\">\n                                  <i class=\"fa-solid fa-star\"></i>\n                                  Default\n                                </span>\n                              }\n                              <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                                <i [class]=\"getStatusIcon(config.Status)\"></i>\n                                {{ config.Status }}\n                              </span>\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"config.isExpanded\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (config.Description) {\n                          <p class=\"config-description\">{{ config.Description }}</p>\n                        } @else {\n                          <p class=\"config-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expanded Content -->\n                        @if (config.isExpanded) {\n                          <div class=\"expanded-content\">\n                            <!-- Stats Grid -->\n                            <div class=\"config-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Parameters</span>\n                                <span class=\"stat-value\">{{ config.params?.length || 0 }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Created</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_CreatedAt) }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Updated</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_UpdatedAt) }}</span>\n                              </div>\n                            </div>\n\n                            <!-- Linked Prompts -->\n                            <div class=\"prompts-section\">\n                              <h5 class=\"section-title\">\n                                <i class=\"fa-solid fa-message-lines\"></i>\n                                Linked Prompts\n                              </h5>\n                              <div class=\"prompt-links\">\n                                @if (config.compressionPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextCompressionID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-compress\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Compression</span>\n                                        <span class=\"prompt-link-name\">{{ config.compressionPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No compression prompt configured</div>\n                                }\n\n                                @if (config.summarizationPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextSummarizationID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-file-lines\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Summarization</span>\n                                        <span class=\"prompt-link-name\">{{ config.summarizationPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No summarization prompt configured</div>\n                                }\n                              </div>\n                            </div>\n\n                            <!-- Configuration Parameters -->\n                            @if (config.params && config.params.length > 0) {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"params-grid\">\n                                  @for (param of config.params; track param.ID) {\n                                    <div class=\"param-item\" (click)=\"onOpenParam(param); $event.stopPropagation()\">\n                                      <div class=\"param-info\">\n                                        <div class=\"param-type-icon\">\n                                          <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                                        </div>\n                                        <div class=\"param-details\">\n                                          <span class=\"param-name\">{{ param.Name }}</span>\n                                          <span class=\"param-type\">{{ param.Type }}</span>\n                                        </div>\n                                      </div>\n                                      <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            } @else {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"no-params\">No parameters configured</div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                        <button\n                          type=\"button\"\n                          class=\"action-btn\"\n                          (click)=\"showConfigDetails(config, $event)\"\n                          title=\"View Details\">\n                          <i class=\"fa-solid fa-eye\"></i>\n                          Details\n                        </button>\n\n                        <button\n                          type=\"button\"\n                          class=\"action-btn action-btn-primary\"\n                          (click)=\"onOpenConfiguration(config)\">\n                          <i class=\"fa-solid fa-edit\"></i>\n                          Configure\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"configurations-list\">\n                  <table class=\"configurations-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Configuration\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Parameters')\"\n                            [class.sorted]=\"sortColumn === 'Parameters'\"\n                            [class.desc]=\"sortColumn === 'Parameters' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Parameters\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Updated')\"\n                            [class.sorted]=\"sortColumn === 'Updated'\"\n                            [class.desc]=\"sortColumn === 'Updated' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Updated\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (config of filteredConfigurations; track config.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"config-name-cell\">\n                              <div class=\"config-icon-small\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                              </div>\n                              <div>\n                                <div class=\"config-name-text\">\n                                  {{ config.Name }}\n                                  @if (config.IsDefault) {\n                                    <span class=\"default-badge\" style=\"margin-left: 8px;\">\n                                      <i class=\"fa-solid fa-star\"></i>\n                                      Default\n                                    </span>\n                                  }\n                                </div>\n                                @if (config.Description) {\n                                  <div class=\"config-description-small\">{{ config.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                              <i [class]=\"getStatusIcon(config.Status)\"></i>\n                              {{ config.Status }}\n                            </span>\n                          </td>\n                          <td>{{ config.params?.length || 0 }}</td>\n                          <td>{{ formatDate(config.__mj_UpdatedAt) }}</td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small\"\n                                (click)=\"showConfigDetails(config)\"\n                                title=\"View Details\">\n                                <i class=\"fa-solid fa-eye\"></i>\n                              </button>\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"onOpenConfiguration(config)\">\n                                <i class=\"fa-solid fa-edit\"></i>\n                              </button>\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n  </mj-page-body>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedConfig) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\">\n            <i class=\"fa-solid fa-sliders\"></i>\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedConfig.Name }}</h3>\n            <span class=\"detail-subtitle\">AI Configuration</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass(selectedConfig.Status)\">\n              <i [class]=\"getStatusIcon(selectedConfig.Status)\"></i>\n              {{ selectedConfig.Status }}\n            </span>\n            @if (selectedConfig.IsDefault) {\n              <span class=\"feature-badge default\">\n                <i class=\"fa-solid fa-star\"></i>\n                Default Configuration\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedConfig.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedConfig.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Stats -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Overview\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Parameters</span>\n              <span class=\"detail-value\">{{ selectedConfig.params?.length || 0 }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Status</span>\n              <span class=\"detail-value\">{{ selectedConfig.Status }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Linked Prompts -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-message-lines\"></i>\n            Linked Prompts\n          </h4>\n          <div class=\"detail-grid single-column\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.compressionPrompt) {\n                  {{ selectedConfig.compressionPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Summarization</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.summarizationPrompt) {\n                  {{ selectedConfig.summarizationPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Parameters Preview -->\n        @if (selectedConfig.params && selectedConfig.params.length > 0) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-gear\"></i>\n              Parameters ({{ selectedConfig.params.length }})\n            </h4>\n            <div class=\"detail-params-list\">\n              @for (param of selectedConfig.params.slice(0, 5); track param.ID) {\n                <div class=\"detail-param-item\">\n                  <div class=\"param-info\">\n                    <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                    <span class=\"param-name\">{{ param.Name }}</span>\n                  </div>\n                  <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                </div>\n              }\n              @if (selectedConfig.params.length > 5) {\n                <div class=\"params-more\">\n                  +{{ selectedConfig.params.length - 5 }} more parameters\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_CreatedAt) }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_UpdatedAt) }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openConfigFromPanel()\">\n          <i class=\"fa-solid fa-edit\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</mj-page-layout>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Tinted card background on the body \u2014 matches Agents / Prompts / Models for\n   AI-section visual consistency (the original .configurations-content was\n   transparent; this is a deliberate harmonization). */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* ============================================================================\n   MAIN CONTENT AREA\n   ============================================================================ */\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* ============================================================================\n   LOADING STATE\n   ============================================================================ */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n/* ============================================================================\n   ERROR STATE\n   ============================================================================ */\n.error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n  border-radius: 12px;\n  color: var(--mj-status-error);\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message i {\n  font-size: 20px;\n}\n\n/* ============================================================================\n   EMPTY STATE\n   ============================================================================ */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 72px;\n  color: var(--mj-border-strong);\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-secondary);\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 28px;\n  color: var(--mj-text-muted);\n}\n\n/* ============================================================================\n   CONFIGURATION GRID\n   ============================================================================ */\n.configurations-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n/* ============================================================================\n   CONFIGURATION CARD\n   ============================================================================ */\n.config-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded {\n  box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded::before {\n  opacity: 1;\n}\n\n/* Card Header */\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.2s ease;\n}\n\n.card-header:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.config-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.config-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge i {\n  font-size: 11px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n/* Default Badge */\n.default-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Expand Icon */\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n/* Card Body */\n.card-body {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.config-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* ============================================================================\n   EXPANDED CONTENT\n   ============================================================================ */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Stats Grid */\n.config-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n/* Prompts Section */\n.prompts-section {\n  margin-top: 20px;\n}\n\n.section-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.prompt-links {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  transform: translateX(4px);\n}\n\n.prompt-link-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.prompt-link-icon i {\n  font-size: 14px;\n}\n\n.prompt-link-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover .prompt-link-arrow {\n  color: var(--mj-brand-primary);\n  transform: translateX(4px);\n}\n\n.no-prompt {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n}\n\n/* Parameters Section */\n.params-section {\n  margin-top: 20px;\n}\n\n.params-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.param-type-icon i {\n  font-size: 13px;\n}\n\n.param-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.param-type {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.param-value {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n/* ============================================================================\n   CARD ACTIONS\n   ============================================================================ */\n.card-actions {\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn i {\n  font-size: 12px;\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning {\n  background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning:hover {\n  background: var(--mj-status-warning);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n/* ============================================================================\n   LIST VIEW\n   ============================================================================ */\n.configurations-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.configurations-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table th {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table th:last-child {\n  cursor: default;\n}\n\n.configurations-table th:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.configurations-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.configurations-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.configurations-table th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background 0.2s ease;\n}\n\n.configurations-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.configurations-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.configurations-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.config-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.config-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n}\n\n.config-name-text {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* ============================================================================\n   RESPONSIVE DESIGN\n   ============================================================================ */\n@media (max-width: 1024px) {\n  .configurations-grid {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  }\n}\n\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n\n  .header-info {\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n\n  .header-controls {\n    justify-content: space-between;\n  }\n\n  .configurations-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 20px;\n  }\n\n  .config-icon {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon i {\n    font-size: 20px;\n  }\n\n  .card-actions {\n    flex-wrap: wrap;\n  }\n}\n\n/* ============================================================================\n   SPLITTER CUSTOMIZATION\n   ============================================================================ */\nas-split {\n  background: transparent;\n}\n\n/* ============================================================================\n   DETAIL PANEL - SLIDE-IN OVERLAY\n   ============================================================================ */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column {\n  grid-template-columns: 1fr;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value .muted {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n/* Detail Params List */\n.detail-params-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item .param-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item .param-info i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-param-item .param-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.detail-param-item .param-value {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface);\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible {\n    right: 0;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-system-configuration', template: "<mj-page-layout>\n  <!-- Header -->\n  <mj-page-header\n    Title=\"Configuration\"\n    Icon=\"fa-solid fa-cogs\">\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"filteredConfigurations.length\"\n        [Total]=\"configurations.length\"\n        Label=\"configurations\">\n      </mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"loadData()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search configurations...\"\n        [Value]=\"currentFilters.searchTerm\"\n        (ValueChange)=\"onSearchTermChange($event)\">\n      </mj-page-search>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetPopoverFilters()\">\n        <mj-filter-panel\n          [Fields]=\"configFilterFields\"\n          [Values]=\"configFilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetPopoverFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n      <mj-view-toggle\n        [Options]=\"configViewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n    </div>\n  </mj-page-header>\n\n  <!-- Main Content (no sidebar \u2014 filters live in the popover above) -->\n  <mj-page-body [Flex]=\"true\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading AI configurations...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Error State -->\n          @if (error && !isLoading) {\n            <div class=\"error-container\">\n              <p class=\"error-message\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                {{ error }}\n              </p>\n            </div>\n          }\n\n          <!-- Configurations Content -->\n          @if (!isLoading && !error) {\n            @if (filteredConfigurations.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-sliders\"></i>\n                <h3>No configurations found</h3>\n                <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"configurations-grid\">\n                  @for (config of filteredConfigurations; track config.ID) {\n                    <div class=\"config-card\" [class.expanded]=\"config.isExpanded\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleExpanded(config)\">\n                        <div class=\"config-info\">\n                          <div class=\"config-icon\">\n                            <i class=\"fa-solid fa-sliders\"></i>\n                          </div>\n                          <div class=\"config-details\">\n                            <h4 class=\"config-name\">{{ config.Name }}</h4>\n                            <div class=\"config-meta\">\n                              @if (config.IsDefault) {\n                                <span class=\"default-badge\">\n                                  <i class=\"fa-solid fa-star\"></i>\n                                  Default\n                                </span>\n                              }\n                              <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                                <i [class]=\"getStatusIcon(config.Status)\"></i>\n                                {{ config.Status }}\n                              </span>\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"config.isExpanded\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (config.Description) {\n                          <p class=\"config-description\">{{ config.Description }}</p>\n                        } @else {\n                          <p class=\"config-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expanded Content -->\n                        @if (config.isExpanded) {\n                          <div class=\"expanded-content\">\n                            <!-- Stats Grid -->\n                            <div class=\"config-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Parameters</span>\n                                <span class=\"stat-value\">{{ config.params?.length || 0 }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Created</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_CreatedAt) }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Updated</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_UpdatedAt) }}</span>\n                              </div>\n                            </div>\n\n                            <!-- Linked Prompts -->\n                            <div class=\"prompts-section\">\n                              <h5 class=\"section-title\">\n                                <i class=\"fa-solid fa-message-lines\"></i>\n                                Linked Prompts\n                              </h5>\n                              <div class=\"prompt-links\">\n                                @if (config.compressionPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextCompressionID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-compress\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Compression</span>\n                                        <span class=\"prompt-link-name\">{{ config.compressionPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No compression prompt configured</div>\n                                }\n\n                                @if (config.summarizationPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextSummarizationID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-file-lines\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Summarization</span>\n                                        <span class=\"prompt-link-name\">{{ config.summarizationPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No summarization prompt configured</div>\n                                }\n                              </div>\n                            </div>\n\n                            <!-- Configuration Parameters -->\n                            @if (config.params && config.params.length > 0) {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"params-grid\">\n                                  @for (param of config.params; track param.ID) {\n                                    <div class=\"param-item\" (click)=\"onOpenParam(param); $event.stopPropagation()\">\n                                      <div class=\"param-info\">\n                                        <div class=\"param-type-icon\">\n                                          <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                                        </div>\n                                        <div class=\"param-details\">\n                                          <span class=\"param-name\">{{ param.Name }}</span>\n                                          <span class=\"param-type\">{{ param.Type }}</span>\n                                        </div>\n                                      </div>\n                                      <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            } @else {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"no-params\">No parameters configured</div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                        <button\n                          type=\"button\"\n                          class=\"action-btn\"\n                          (click)=\"showConfigDetails(config, $event)\"\n                          title=\"View Details\">\n                          <i class=\"fa-solid fa-eye\"></i>\n                          Details\n                        </button>\n\n                        <button\n                          type=\"button\"\n                          class=\"action-btn action-btn-primary\"\n                          (click)=\"onOpenConfiguration(config)\">\n                          <i class=\"fa-solid fa-edit\"></i>\n                          Configure\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"configurations-list\">\n                  <table class=\"configurations-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Configuration\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Parameters')\"\n                            [class.sorted]=\"sortColumn === 'Parameters'\"\n                            [class.desc]=\"sortColumn === 'Parameters' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Parameters\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Updated')\"\n                            [class.sorted]=\"sortColumn === 'Updated'\"\n                            [class.desc]=\"sortColumn === 'Updated' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Updated\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (config of filteredConfigurations; track config.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"config-name-cell\">\n                              <div class=\"config-icon-small\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                              </div>\n                              <div>\n                                <div class=\"config-name-text\">\n                                  {{ config.Name }}\n                                  @if (config.IsDefault) {\n                                    <span class=\"default-badge\" style=\"margin-left: 8px;\">\n                                      <i class=\"fa-solid fa-star\"></i>\n                                      Default\n                                    </span>\n                                  }\n                                </div>\n                                @if (config.Description) {\n                                  <div class=\"config-description-small\">{{ config.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                              <i [class]=\"getStatusIcon(config.Status)\"></i>\n                              {{ config.Status }}\n                            </span>\n                          </td>\n                          <td>{{ config.params?.length || 0 }}</td>\n                          <td>{{ formatDate(config.__mj_UpdatedAt) }}</td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small\"\n                                (click)=\"showConfigDetails(config)\"\n                                title=\"View Details\">\n                                <i class=\"fa-solid fa-eye\"></i>\n                              </button>\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"onOpenConfiguration(config)\">\n                                <i class=\"fa-solid fa-edit\"></i>\n                              </button>\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n  </mj-page-body>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedConfig) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\">\n            <i class=\"fa-solid fa-sliders\"></i>\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedConfig.Name }}</h3>\n            <span class=\"detail-subtitle\">AI Configuration</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass(selectedConfig.Status)\">\n              <i [class]=\"getStatusIcon(selectedConfig.Status)\"></i>\n              {{ selectedConfig.Status }}\n            </span>\n            @if (selectedConfig.IsDefault) {\n              <span class=\"feature-badge default\">\n                <i class=\"fa-solid fa-star\"></i>\n                Default Configuration\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedConfig.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedConfig.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Stats -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Overview\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Parameters</span>\n              <span class=\"detail-value\">{{ selectedConfig.params?.length || 0 }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Status</span>\n              <span class=\"detail-value\">{{ selectedConfig.Status }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Linked Prompts -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-message-lines\"></i>\n            Linked Prompts\n          </h4>\n          <div class=\"detail-grid single-column\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.compressionPrompt) {\n                  {{ selectedConfig.compressionPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Summarization</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.summarizationPrompt) {\n                  {{ selectedConfig.summarizationPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Parameters Preview -->\n        @if (selectedConfig.params && selectedConfig.params.length > 0) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-gear\"></i>\n              Parameters ({{ selectedConfig.params.length }})\n            </h4>\n            <div class=\"detail-params-list\">\n              @for (param of selectedConfig.params.slice(0, 5); track param.ID) {\n                <div class=\"detail-param-item\">\n                  <div class=\"param-info\">\n                    <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                    <span class=\"param-name\">{{ param.Name }}</span>\n                  </div>\n                  <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                </div>\n              }\n              @if (selectedConfig.params.length > 5) {\n                <div class=\"params-more\">\n                  +{{ selectedConfig.params.length - 5 }} more parameters\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_CreatedAt) }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_UpdatedAt) }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openConfigFromPanel()\">\n          <i class=\"fa-solid fa-edit\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</mj-page-layout>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Tinted card background on the body \u2014 matches Agents / Prompts / Models for\n   AI-section visual consistency (the original .configurations-content was\n   transparent; this is a deliberate harmonization). */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* ============================================================================\n   MAIN CONTENT AREA\n   ============================================================================ */\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* ============================================================================\n   LOADING STATE\n   ============================================================================ */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n/* ============================================================================\n   ERROR STATE\n   ============================================================================ */\n.error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n  border-radius: 12px;\n  color: var(--mj-status-error);\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message i {\n  font-size: 20px;\n}\n\n/* ============================================================================\n   EMPTY STATE\n   ============================================================================ */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 72px;\n  color: var(--mj-border-strong);\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-secondary);\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 28px;\n  color: var(--mj-text-muted);\n}\n\n/* ============================================================================\n   CONFIGURATION GRID\n   ============================================================================ */\n.configurations-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n/* ============================================================================\n   CONFIGURATION CARD\n   ============================================================================ */\n.config-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded {\n  box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded::before {\n  opacity: 1;\n}\n\n/* Card Header */\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.2s ease;\n}\n\n.card-header:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.config-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.config-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge i {\n  font-size: 11px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n/* Default Badge */\n.default-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Expand Icon */\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n/* Card Body */\n.card-body {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.config-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* ============================================================================\n   EXPANDED CONTENT\n   ============================================================================ */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Stats Grid */\n.config-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n\n/* Prompts Section */\n.prompts-section {\n  margin-top: 20px;\n}\n\n.section-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.prompt-links {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  transform: translateX(4px);\n}\n\n.prompt-link-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.prompt-link-icon i {\n  font-size: 14px;\n}\n\n.prompt-link-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover .prompt-link-arrow {\n  color: var(--mj-brand-primary);\n  transform: translateX(4px);\n}\n\n.no-prompt {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n}\n\n/* Parameters Section */\n.params-section {\n  margin-top: 20px;\n}\n\n.params-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.param-type-icon i {\n  font-size: 13px;\n}\n\n.param-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.param-type {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.param-value {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params {\n  font-size: 13px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px dashed var(--mj-border-default);\n  text-align: center;\n}\n\n/* ============================================================================\n   CARD ACTIONS\n   ============================================================================ */\n.card-actions {\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn i {\n  font-size: 12px;\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning {\n  background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning:hover {\n  background: var(--mj-status-warning);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n/* ============================================================================\n   LIST VIEW\n   ============================================================================ */\n.configurations-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.configurations-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table th {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table th:last-child {\n  cursor: default;\n}\n\n.configurations-table th:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.configurations-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.configurations-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.configurations-table th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.configurations-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background 0.2s ease;\n}\n\n.configurations-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.configurations-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.configurations-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.config-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.config-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n}\n\n.config-name-text {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* ============================================================================\n   RESPONSIVE DESIGN\n   ============================================================================ */\n@media (max-width: 1024px) {\n  .configurations-grid {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  }\n}\n\n@media (max-width: 768px) {\n  /* Header chrome is owned by the shared <mj-page-header> \u2014 page-header.scss.\n     No per-component header rules here. */\n  .configurations-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 20px;\n  }\n\n  .config-icon {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon i {\n    font-size: 20px;\n  }\n\n  .card-actions {\n    flex-wrap: wrap;\n  }\n}\n\n/* ============================================================================\n   SPLITTER CUSTOMIZATION\n   ============================================================================ */\nas-split {\n  background: transparent;\n}\n\n/* ============================================================================\n   DETAIL PANEL - SLIDE-IN OVERLAY\n   ============================================================================ */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column {\n  grid-template-columns: 1fr;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value .muted {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n/* Detail Params List */\n.detail-params-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item .param-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item .param-info i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-param-item .param-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.detail-param-item .param-value {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: var(--mj-bg-surface);\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible {\n    right: 0;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemConfigurationComponent, { className: "SystemConfigurationComponent", filePath: "src/AI/components/system/system-configuration.component.ts", lineNumber: 33 }); })();
 //# sourceMappingURL=system-configuration.component.js.map