npm - @memberjunction/ng-dashboards - Versions diffs - 5.22.0 → 5.23.0 - Mend

@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

Files changed (204) hide show

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

@@ -12,7 +12,7 @@ import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-layout";
+import * as i3 from "angular-split";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "./system-config-filter-panel.component";
 const _forTrack0 = ($index, $item) => $item.ID;
@@ -22,23 +22,34 @@ function SystemConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf &
 function SystemConfigurationComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Show Filters ");
 } }
-function SystemConfigurationComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "mj-loading", 26);
+function SystemConfigurationComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 18)(1, "mj-system-config-filter-panel", 24);
+    i0.ɵɵlistener("filtersChange", function SystemConfigurationComponent_Conditional_23_Template_mj_system_config_filter_panel_filtersChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFiltersChange($event)); })("filterChange", function SystemConfigurationComponent_Conditional_23_Template_mj_system_config_filter_panel_filterChange_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange()); })("resetFilters", function SystemConfigurationComponent_Conditional_23_Template_mj_system_config_filter_panel_resetFilters_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResetFilters()); })("closePanel", function SystemConfigurationComponent_Conditional_23_Template_mj_system_config_filter_panel_closePanel_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("size", 20)("minSize", 15)("maxSize", 30);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("configurations", ctx_r1.configurations)("filteredConfigurations", ctx_r1.filteredConfigurations)("filters", ctx_r1.currentFilters);
+} }
+function SystemConfigurationComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "mj-loading", 25);
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "p", 27);
-    i0.ɵɵelement(2, "i", 28);
+function SystemConfigurationComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "p", 26);
+    i0.ɵɵelement(2, "i", 27);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.error, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.error, " ");
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
+function SystemConfigurationComponent_Conditional_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵelement(1, "i", 4);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No configurations found");
@@ -47,262 +58,262 @@ function SystemConfigurationComponent_Conditional_29_Conditional_0_Template(rf,
     i0.ɵɵtext(5, "No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.");
     i0.ɵɵelementEnd()();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
-    i0.ɵɵelement(1, "i", 52);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Default ");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 44);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 43);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const config_r3 = i0.ɵɵnextContext().$implicit;
+    const config_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(config_r3.Description);
+    i0.ɵɵtextInterpolate(config_r4.Description);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 45);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 44);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const config_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.onOpenPrompt(config_r3.DefaultPromptForContextCompressionID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 65)(2, "div", 66);
-    i0.ɵɵelement(3, "i", 67);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const config_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.onOpenPrompt(config_r4.DefaultPromptForContextCompressionID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 64)(2, "div", 65);
+    i0.ɵɵelement(3, "i", 66);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 68)(5, "span", 69);
+    i0.ɵɵelementStart(4, "div", 67)(5, "span", 68);
     i0.ɵɵtext(6, "Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵelementStart(7, "span", 69);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(9, "i", 71);
+    i0.ɵɵelement(9, "i", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    const config_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(config_r3.compressionPrompt.Name);
+    i0.ɵɵtextInterpolate(config_r4.compressionPrompt.Name);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61);
     i0.ɵɵtext(1, "No compression prompt configured");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const config_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.onOpenPrompt(config_r3.DefaultPromptForContextSummarizationID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 65)(2, "div", 66);
-    i0.ɵɵelement(3, "i", 72);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const config_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.onOpenPrompt(config_r4.DefaultPromptForContextSummarizationID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 64)(2, "div", 65);
+    i0.ɵɵelement(3, "i", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 68)(5, "span", 69);
+    i0.ɵɵelementStart(4, "div", 67)(5, "span", 68);
     i0.ɵɵtext(6, "Context Summarization");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵelementStart(7, "span", 69);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(9, "i", 71);
+    i0.ɵɵelement(9, "i", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    const config_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(config_r3.summarizationPrompt.Name);
+    i0.ɵɵtextInterpolate(config_r4.summarizationPrompt.Name);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61);
     i0.ɵɵtext(1, "No summarization prompt configured");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template_div_click_0_listener($event) { const param_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(7); ctx_r0.onOpenParam(param_r7); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 77)(2, "div", 78);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template_div_click_0_listener($event) { const param_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(7); ctx_r1.onOpenParam(param_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 76)(2, "div", 77);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 79)(5, "span", 80);
+    i0.ɵɵelementStart(4, "div", 78)(5, "span", 79);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 81);
+    i0.ɵɵelementStart(7, "span", 80);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "span", 82);
+    i0.ɵɵelementStart(9, "span", 81);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const param_r7 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(7);
+    const param_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(7);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r0.getParamTypeIcon(param_r7.Type));
+    i0.ɵɵclassMap(ctx_r1.getParamTypeIcon(param_r8.Type));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(param_r7.Name);
+    i0.ɵɵtextInterpolate(param_r8.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(param_r7.Type);
+    i0.ɵɵtextInterpolate(param_r8.Type);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatParamValue(param_r7));
+    i0.ɵɵtextInterpolate(ctx_r1.formatParamValue(param_r8));
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "h5", 58);
-    i0.ɵɵelement(2, "i", 73);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62)(1, "h5", 57);
+    i0.ɵɵelement(2, "i", 72);
     i0.ɵɵtext(3, " Configuration Parameters ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 74);
-    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template, 11, 5, "div", 75, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 73);
+    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template, 11, 5, "div", 74, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    const config_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(config_r3.params);
+    i0.ɵɵrepeater(config_r4.params);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "h5", 58);
-    i0.ɵɵelement(2, "i", 73);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62)(1, "h5", 57);
+    i0.ɵɵelement(2, "i", 72);
     i0.ɵɵtext(3, " Configuration Parameters ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 83);
+    i0.ɵɵelementStart(4, "div", 82);
     i0.ɵɵtext(5, "No parameters configured");
     i0.ɵɵelementEnd()();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "div", 53)(2, "div", 54)(3, "span", 55);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 52)(2, "div", 53)(3, "span", 54);
     i0.ɵɵtext(4, "Parameters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 56);
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 54)(8, "span", 55);
+    i0.ɵɵelementStart(7, "div", 53)(8, "span", 54);
     i0.ɵɵtext(9, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 56);
+    i0.ɵɵelementStart(10, "span", 55);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 54)(13, "span", 55);
+    i0.ɵɵelementStart(12, "div", 53)(13, "span", 54);
     i0.ɵɵtext(14, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 56);
+    i0.ɵɵelementStart(15, "span", 55);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 57)(18, "h5", 58);
-    i0.ɵɵelement(19, "i", 59);
+    i0.ɵɵelementStart(17, "div", 56)(18, "h5", 57);
+    i0.ɵɵelement(19, "i", 58);
     i0.ɵɵtext(20, " Linked Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 60);
-    i0.ɵɵconditionalCreate(22, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template, 10, 1, "div", 61)(23, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template, 2, 0, "div", 62);
-    i0.ɵɵconditionalCreate(24, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template, 10, 1, "div", 61)(25, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template, 2, 0, "div", 62);
+    i0.ɵɵelementStart(21, "div", 59);
+    i0.ɵɵconditionalCreate(22, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template, 10, 1, "div", 60)(23, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template, 2, 0, "div", 61);
+    i0.ɵɵconditionalCreate(24, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template, 10, 1, "div", 60)(25, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template, 2, 0, "div", 61);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(26, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template, 7, 0, "div", 63)(27, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template, 6, 0, "div", 63);
+    i0.ɵɵconditionalCreate(26, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template, 7, 0, "div", 62)(27, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template, 6, 0, "div", 62);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const config_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const config_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate((config_r3.params == null ? null : config_r3.params.length) || 0);
+    i0.ɵɵtextInterpolate((config_r4.params == null ? null : config_r4.params.length) || 0);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r3.__mj_CreatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(config_r4.__mj_CreatedAt));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r3.__mj_UpdatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(config_r4.__mj_UpdatedAt));
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(config_r3.compressionPrompt ? 22 : 23);
+    i0.ɵɵconditional(config_r4.compressionPrompt ? 22 : 23);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.summarizationPrompt ? 24 : 25);
+    i0.ɵɵconditional(config_r4.summarizationPrompt ? 24 : 25);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.params && config_r3.params.length > 0 ? 26 : 27);
+    i0.ɵɵconditional(config_r4.params && config_r4.params.length > 0 ? 26 : 27);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33)(1, "div", 34);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleExpanded(config_r3)); });
-    i0.ɵɵelementStart(2, "div", 35)(3, "div", 36);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleExpanded(config_r4)); });
+    i0.ɵɵelementStart(2, "div", 34)(3, "div", 35);
     i0.ɵɵelement(4, "i", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 37)(6, "h4", 38);
+    i0.ɵɵelementStart(5, "div", 36)(6, "h4", 37);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 39);
-    i0.ɵɵconditionalCreate(9, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_9_Template, 3, 0, "span", 40);
-    i0.ɵɵelementStart(10, "span", 41);
+    i0.ɵɵelementStart(8, "div", 38);
+    i0.ɵɵconditionalCreate(9, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_9_Template, 3, 0, "span", 39);
+    i0.ɵɵelementStart(10, "span", 40);
     i0.ɵɵelement(11, "i");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelement(13, "i", 42);
+    i0.ɵɵelement(13, "i", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 43);
-    i0.ɵɵconditionalCreate(15, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_15_Template, 2, 1, "p", 44)(16, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 0, "p", 45);
-    i0.ɵɵconditionalCreate(17, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 28, 6, "div", 46);
+    i0.ɵɵelementStart(14, "div", 42);
+    i0.ɵɵconditionalCreate(15, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_15_Template, 2, 1, "p", 43)(16, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 0, "p", 44);
+    i0.ɵɵconditionalCreate(17, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 28, 6, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 47);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_div_click_18_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(19, "button", 48);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_button_click_19_listener($event) { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showConfigDetails(config_r3, $event)); });
-    i0.ɵɵelement(20, "i", 49);
+    i0.ɵɵelementStart(18, "div", 46);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_div_click_18_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(19, "button", 47);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_19_listener($event) { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showConfigDetails(config_r4, $event)); });
+    i0.ɵɵelement(20, "i", 48);
     i0.ɵɵtext(21, " Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "button", 50);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_button_click_22_listener() { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onOpenConfiguration(config_r3)); });
-    i0.ɵɵelement(23, "i", 51);
+    i0.ɵɵelementStart(22, "button", 49);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_22_listener() { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onOpenConfiguration(config_r4)); });
+    i0.ɵɵelement(23, "i", 50);
     i0.ɵɵtext(24, " Configure ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const config_r3 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", config_r3.isExpanded);
+    const config_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("expanded", config_r4.isExpanded);
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(config_r3.Name);
+    i0.ɵɵtextInterpolate(config_r4.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.IsDefault ? 9 : -1);
+    i0.ɵɵconditional(config_r4.IsDefault ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(config_r3.Status));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(config_r4.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.getStatusIcon(config_r3.Status));
+    i0.ɵɵclassMap(ctx_r1.getStatusIcon(config_r4.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", config_r3.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", config_r4.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("rotated", config_r3.isExpanded);
+    i0.ɵɵclassProp("rotated", config_r4.isExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.Description ? 15 : 16);
+    i0.ɵɵconditional(config_r4.Description ? 15 : 16);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.isExpanded ? 17 : -1);
+    i0.ɵɵconditional(config_r4.isExpanded ? 17 : -1);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵrepeaterCreate(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template, 25, 12, "div", 32, _forTrack0);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵrepeaterCreate(1, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 25, 12, "div", 31, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.filteredConfigurations);
+    i0.ɵɵrepeater(ctx_r1.filteredConfigurations);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 91);
-    i0.ɵɵelement(1, "i", 52);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 90);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Default ");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const config_r11 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(config_r10.Description);
+    i0.ɵɵtextInterpolate(config_r11.Description);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 88)(3, "div", 89);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 87)(3, "div", 88);
     i0.ɵɵelement(4, "i", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div")(6, "div", 90);
+    i0.ɵɵelementStart(5, "div")(6, "div", 89);
     i0.ɵɵtext(7);
-    i0.ɵɵconditionalCreate(8, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_8_Template, 3, 0, "span", 91);
+    i0.ɵɵconditionalCreate(8, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Conditional_8_Template, 3, 0, "span", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_9_Template, 2, 1, "div", 92);
+    i0.ɵɵconditionalCreate(9, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Conditional_9_Template, 2, 1, "div", 91);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "td")(11, "span", 41);
+    i0.ɵɵelementStart(10, "td")(11, "span", 40);
     i0.ɵɵelement(12, "i");
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
@@ -312,291 +323,291 @@ function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1
     i0.ɵɵelementStart(16, "td");
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "td")(19, "div", 93)(20, "button", 94);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template_button_click_20_listener() { const config_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showConfigDetails(config_r10)); });
-    i0.ɵɵelement(21, "i", 49);
+    i0.ɵɵelementStart(18, "td")(19, "div", 92)(20, "button", 93);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Template_button_click_20_listener() { const config_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showConfigDetails(config_r11)); });
+    i0.ɵɵelement(21, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "button", 95);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template_button_click_22_listener() { const config_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onOpenConfiguration(config_r10)); });
-    i0.ɵɵelement(23, "i", 51);
+    i0.ɵɵelementStart(22, "button", 94);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Template_button_click_22_listener() { const config_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onOpenConfiguration(config_r11)); });
+    i0.ɵɵelement(23, "i", 50);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const config_r10 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const config_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate1(" ", config_r10.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", config_r11.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(config_r10.IsDefault ? 8 : -1);
+    i0.ɵɵconditional(config_r11.IsDefault ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(config_r10.Description ? 9 : -1);
+    i0.ɵɵconditional(config_r11.Description ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(config_r10.Status));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(config_r11.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.getStatusIcon(config_r10.Status));
+    i0.ɵɵclassMap(ctx_r1.getStatusIcon(config_r11.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", config_r10.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", config_r11.Status, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate((config_r10.params == null ? null : config_r10.params.length) || 0);
+    i0.ɵɵtextInterpolate((config_r11.params == null ? null : config_r11.params.length) || 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r10.__mj_UpdatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(config_r11.__mj_UpdatedAt));
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31)(1, "table", 84)(2, "thead")(3, "tr")(4, "th", 85);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Name")); });
-    i0.ɵɵelementStart(5, "span", 86);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 30)(1, "table", 83)(2, "thead")(3, "tr")(4, "th", 84);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Name")); });
+    i0.ɵɵelementStart(5, "span", 85);
     i0.ɵɵtext(6, " Configuration ");
-    i0.ɵɵelement(7, "i", 87);
+    i0.ɵɵelement(7, "i", 86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "th", 85);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Status")); });
-    i0.ɵɵelementStart(9, "span", 86);
+    i0.ɵɵelementStart(8, "th", 84);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Status")); });
+    i0.ɵɵelementStart(9, "span", 85);
     i0.ɵɵtext(10, " Status ");
-    i0.ɵɵelement(11, "i", 87);
+    i0.ɵɵelement(11, "i", 86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "th", 85);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Parameters")); });
-    i0.ɵɵelementStart(13, "span", 86);
+    i0.ɵɵelementStart(12, "th", 84);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Parameters")); });
+    i0.ɵɵelementStart(13, "span", 85);
     i0.ɵɵtext(14, " Parameters ");
-    i0.ɵɵelement(15, "i", 87);
+    i0.ɵɵelement(15, "i", 86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "th", 85);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Updated")); });
-    i0.ɵɵelementStart(17, "span", 86);
+    i0.ɵɵelementStart(16, "th", 84);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Updated")); });
+    i0.ɵɵelementStart(17, "span", 85);
     i0.ɵɵtext(18, " Updated ");
-    i0.ɵɵelement(19, "i", 87);
+    i0.ɵɵelement(19, "i", 86);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(20, "th");
     i0.ɵɵtext(21, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(22, "tbody");
-    i0.ɵɵrepeaterCreate(23, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template, 24, 9, "tr", null, _forTrack0);
+    i0.ɵɵrepeaterCreate(23, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_24_Template, 24, 9, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Name")("desc", ctx_r0.sortColumn === "Name" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵclassProp("sorted", ctx_r1.sortColumn === "Name")("desc", ctx_r1.sortColumn === "Name" && ctx_r1.sortDirection === "desc");
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Status")("desc", ctx_r0.sortColumn === "Status" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵclassProp("sorted", ctx_r1.sortColumn === "Status")("desc", ctx_r1.sortColumn === "Status" && ctx_r1.sortDirection === "desc");
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Parameters")("desc", ctx_r0.sortColumn === "Parameters" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵclassProp("sorted", ctx_r1.sortColumn === "Parameters")("desc", ctx_r1.sortColumn === "Parameters" && ctx_r1.sortDirection === "desc");
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Updated")("desc", ctx_r0.sortColumn === "Updated" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵclassProp("sorted", ctx_r1.sortColumn === "Updated")("desc", ctx_r1.sortColumn === "Updated" && ctx_r1.sortDirection === "desc");
     i0.ɵɵadvance(7);
-    i0.ɵɵrepeater(ctx_r0.filteredConfigurations);
+    i0.ɵɵrepeater(ctx_r1.filteredConfigurations);
 } }
-function SystemConfigurationComponent_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template, 3, 0, "div", 30);
-    i0.ɵɵconditionalCreate(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template, 25, 16, "div", 31);
+function SystemConfigurationComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template, 3, 0, "div", 29);
+    i0.ɵɵconditionalCreate(1, SystemConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template, 25, 16, "div", 30);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.viewMode === "grid" ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.viewMode === "list" ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 1 : -1);
 } }
-function SystemConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SystemConfigurationComponent_Conditional_29_Conditional_0_Template, 6, 0, "div", 29)(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Template, 2, 2);
+function SystemConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SystemConfigurationComponent_Conditional_28_Conditional_0_Template, 6, 0, "div", 28)(1, SystemConfigurationComponent_Conditional_28_Conditional_1_Template, 2, 2);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r0.filteredConfigurations.length === 0 ? 0 : 1);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.filteredConfigurations.length === 0 ? 0 : 1);
 } }
-function SystemConfigurationComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_30_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
+function SystemConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 107);
-    i0.ɵɵelement(1, "i", 52);
+function SystemConfigurationComponent_Conditional_31_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 106);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Default Configuration ");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105)(1, "h4", 108);
-    i0.ɵɵelement(2, "i", 119);
+function SystemConfigurationComponent_Conditional_31_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104)(1, "h4", 107);
+    i0.ɵɵelement(2, "i", 118);
     i0.ɵɵtext(3, " Description ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 120);
+    i0.ɵɵelementStart(4, "p", 119);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Description);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedConfig.Description);
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+function SystemConfigurationComponent_Conditional_31_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.compressionPrompt.Name, " ");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedConfig.compressionPrompt.Name, " ");
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 115);
+function SystemConfigurationComponent_Conditional_31_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 114);
     i0.ɵɵtext(1, "Not configured");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+function SystemConfigurationComponent_Conditional_31_Conditional_49_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.summarizationPrompt.Name, " ");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedConfig.summarizationPrompt.Name, " ");
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 115);
+function SystemConfigurationComponent_Conditional_31_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 114);
     i0.ɵɵtext(1, "Not configured");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_51_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122)(1, "div", 77);
+function SystemConfigurationComponent_Conditional_31_Conditional_51_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 121)(1, "div", 76);
     i0.ɵɵelement(2, "i");
-    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵelementStart(3, "span", 79);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "span", 82);
+    i0.ɵɵelementStart(5, "span", 81);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const param_r13 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const param_r14 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.getParamTypeIcon(param_r13.Type));
+    i0.ɵɵclassMap(ctx_r1.getParamTypeIcon(param_r14.Type));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(param_r13.Name);
+    i0.ɵɵtextInterpolate(param_r14.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.formatParamValue(param_r13));
+    i0.ɵɵtextInterpolate(ctx_r1.formatParamValue(param_r14));
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_51_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 123);
+function SystemConfigurationComponent_Conditional_31_Conditional_51_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 122);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r0.selectedConfig.params.length - 5, " more parameters ");
+    i0.ɵɵtextInterpolate1(" +", ctx_r1.selectedConfig.params.length - 5, " more parameters ");
 } }
-function SystemConfigurationComponent_Conditional_32_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105)(1, "h4", 108);
-    i0.ɵɵelement(2, "i", 73);
+function SystemConfigurationComponent_Conditional_31_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104)(1, "h4", 107);
+    i0.ɵɵelement(2, "i", 72);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 121);
-    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_32_Conditional_51_For_6_Template, 7, 4, "div", 122, _forTrack0);
-    i0.ɵɵconditionalCreate(7, SystemConfigurationComponent_Conditional_32_Conditional_51_Conditional_7_Template, 2, 1, "div", 123);
+    i0.ɵɵelementStart(4, "div", 120);
+    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_31_Conditional_51_For_6_Template, 7, 4, "div", 121, _forTrack0);
+    i0.ɵɵconditionalCreate(7, SystemConfigurationComponent_Conditional_31_Conditional_51_Conditional_7_Template, 2, 1, "div", 122);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" Parameters (", ctx_r0.selectedConfig.params.length, ") ");
+    i0.ɵɵtextInterpolate1(" Parameters (", ctx_r1.selectedConfig.params.length, ") ");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.selectedConfig.params.slice(0, 5));
+    i0.ɵɵrepeater(ctx_r1.selectedConfig.params.slice(0, 5));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.selectedConfig.params.length > 5 ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.params.length > 5 ? 7 : -1);
 } }
-function SystemConfigurationComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98)(2, "div", 99);
+function SystemConfigurationComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 96)(1, "div", 97)(2, "div", 98);
     i0.ɵɵelement(3, "i", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 100)(5, "h3");
+    i0.ɵɵelementStart(4, "div", 99)(5, "h3");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 101);
+    i0.ɵɵelementStart(7, "span", 100);
     i0.ɵɵtext(8, "AI Configuration");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "button", 102);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_32_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
-    i0.ɵɵelement(10, "i", 103);
+    i0.ɵɵelementStart(9, "button", 101);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_31_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+    i0.ɵɵelement(10, "i", 102);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 104)(12, "div", 105)(13, "div", 106)(14, "span", 41);
+    i0.ɵɵelementStart(11, "div", 103)(12, "div", 104)(13, "div", 105)(14, "span", 40);
     i0.ɵɵelement(15, "i");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, SystemConfigurationComponent_Conditional_32_Conditional_17_Template, 3, 0, "span", 107);
+    i0.ɵɵconditionalCreate(17, SystemConfigurationComponent_Conditional_31_Conditional_17_Template, 3, 0, "span", 106);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, SystemConfigurationComponent_Conditional_32_Conditional_18_Template, 6, 1, "div", 105);
-    i0.ɵɵelementStart(19, "div", 105)(20, "h4", 108);
-    i0.ɵɵelement(21, "i", 109);
+    i0.ɵɵconditionalCreate(18, SystemConfigurationComponent_Conditional_31_Conditional_18_Template, 6, 1, "div", 104);
+    i0.ɵɵelementStart(19, "div", 104)(20, "h4", 107);
+    i0.ɵɵelement(21, "i", 108);
     i0.ɵɵtext(22, " Overview ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 110)(24, "div", 111)(25, "span", 112);
+    i0.ɵɵelementStart(23, "div", 109)(24, "div", 110)(25, "span", 111);
     i0.ɵɵtext(26, "Parameters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 113);
+    i0.ɵɵelementStart(27, "span", 112);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 111)(30, "span", 112);
+    i0.ɵɵelementStart(29, "div", 110)(30, "span", 111);
     i0.ɵɵtext(31, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "span", 113);
+    i0.ɵɵelementStart(32, "span", 112);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(34, "div", 105)(35, "h4", 108);
-    i0.ɵɵelement(36, "i", 59);
+    i0.ɵɵelementStart(34, "div", 104)(35, "h4", 107);
+    i0.ɵɵelement(36, "i", 58);
     i0.ɵɵtext(37, " Linked Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 114)(39, "div", 111)(40, "span", 112);
+    i0.ɵɵelementStart(38, "div", 113)(39, "div", 110)(40, "span", 111);
     i0.ɵɵtext(41, "Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "span", 113);
-    i0.ɵɵconditionalCreate(43, SystemConfigurationComponent_Conditional_32_Conditional_43_Template, 1, 1)(44, SystemConfigurationComponent_Conditional_32_Conditional_44_Template, 2, 0, "span", 115);
+    i0.ɵɵelementStart(42, "span", 112);
+    i0.ɵɵconditionalCreate(43, SystemConfigurationComponent_Conditional_31_Conditional_43_Template, 1, 1)(44, SystemConfigurationComponent_Conditional_31_Conditional_44_Template, 2, 0, "span", 114);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "div", 111)(46, "span", 112);
+    i0.ɵɵelementStart(45, "div", 110)(46, "span", 111);
     i0.ɵɵtext(47, "Context Summarization");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "span", 113);
-    i0.ɵɵconditionalCreate(49, SystemConfigurationComponent_Conditional_32_Conditional_49_Template, 1, 1)(50, SystemConfigurationComponent_Conditional_32_Conditional_50_Template, 2, 0, "span", 115);
+    i0.ɵɵelementStart(48, "span", 112);
+    i0.ɵɵconditionalCreate(49, SystemConfigurationComponent_Conditional_31_Conditional_49_Template, 1, 1)(50, SystemConfigurationComponent_Conditional_31_Conditional_50_Template, 2, 0, "span", 114);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(51, SystemConfigurationComponent_Conditional_32_Conditional_51_Template, 8, 2, "div", 105);
-    i0.ɵɵelementStart(52, "div", 105)(53, "h4", 108);
-    i0.ɵɵelement(54, "i", 116);
+    i0.ɵɵconditionalCreate(51, SystemConfigurationComponent_Conditional_31_Conditional_51_Template, 8, 2, "div", 104);
+    i0.ɵɵelementStart(52, "div", 104)(53, "h4", 107);
+    i0.ɵɵelement(54, "i", 115);
     i0.ɵɵtext(55, " Timestamps ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "div", 110)(57, "div", 111)(58, "span", 112);
+    i0.ɵɵelementStart(56, "div", 109)(57, "div", 110)(58, "span", 111);
     i0.ɵɵtext(59, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "span", 113);
+    i0.ɵɵelementStart(60, "span", 112);
     i0.ɵɵtext(61);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(62, "div", 111)(63, "span", 112);
+    i0.ɵɵelementStart(62, "div", 110)(63, "span", 111);
     i0.ɵɵtext(64, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(65, "span", 113);
+    i0.ɵɵelementStart(65, "span", 112);
     i0.ɵɵtext(66);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(67, "div", 117)(68, "button", 118);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_32_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openConfigFromPanel()); });
-    i0.ɵɵelement(69, "i", 51);
+    i0.ɵɵelementStart(67, "div", 116)(68, "button", 117);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_31_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openConfigFromPanel()); });
+    i0.ɵɵelement(69, "i", 50);
     i0.ɵɵtext(70, " Open Full Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Name);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedConfig.Name);
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(ctx_r0.selectedConfig.Status));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(ctx_r1.selectedConfig.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.getStatusIcon(ctx_r0.selectedConfig.Status));
+    i0.ɵɵclassMap(ctx_r1.getStatusIcon(ctx_r1.selectedConfig.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedConfig.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.selectedConfig.IsDefault ? 17 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.IsDefault ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.selectedConfig.Description ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.Description ? 18 : -1);
     i0.ɵɵadvance(10);
-    i0.ɵɵtextInterpolate((ctx_r0.selectedConfig.params == null ? null : ctx_r0.selectedConfig.params.length) || 0);
+    i0.ɵɵtextInterpolate((ctx_r1.selectedConfig.params == null ? null : ctx_r1.selectedConfig.params.length) || 0);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Status);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedConfig.Status);
     i0.ɵɵadvance(10);
-    i0.ɵɵconditional(ctx_r0.selectedConfig.compressionPrompt ? 43 : 44);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.compressionPrompt ? 43 : 44);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r0.selectedConfig.summarizationPrompt ? 49 : 50);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.summarizationPrompt ? 49 : 50);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.selectedConfig.params && ctx_r0.selectedConfig.params.length > 0 ? 51 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedConfig.params && ctx_r1.selectedConfig.params.length > 0 ? 51 : -1);
     i0.ɵɵadvance(10);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDate(ctx_r0.selectedConfig.__mj_CreatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.selectedConfig.__mj_CreatedAt));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.formatDate(ctx_r0.selectedConfig.__mj_UpdatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.selectedConfig.__mj_UpdatedAt));
 } }
 /**
  * AI Configuration Resource - displays AI system configuration management
@@ -888,7 +899,7 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
         return 'fa-solid fa-sliders';
     }
     static ɵfac = function SystemConfigurationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SystemConfigurationComponent)(i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemConfigurationComponent, selectors: [["app-system-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 27, consts: [[1, "system-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-sliders"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "config-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grid-2"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Refresh", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "configurations", "filteredConfigurations", "filters"], [3, "resizable", "scrollable"], [1, "configurations-content"], [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, "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: 32, vars: 18, consts: [[1, "system-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-sliders"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "config-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grid-2"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Refresh", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "main-content"], ["direction", "horizontal", 1, "main-splitter"], [3, "size", "minSize", "maxSize"], [1, "configurations-content"], [1, "loading-container"], [1, "error-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "configurations", "filteredConfigurations", "filters"], ["text", "Loading AI configurations...", "size", "large"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [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, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " AI Configuration ");
@@ -914,17 +925,16 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
             i0.ɵɵelement(19, "i", 15);
             i0.ɵɵtext(20, " Refresh ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(21, "div", 16)(22, "kendo-splitter", 17)(23, "kendo-splitter-pane", 18)(24, "mj-system-config-filter-panel", 19);
-            i0.ɵɵlistener("filtersChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filtersChange_24_listener($event) { return ctx.onFiltersChange($event); })("filterChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filterChange_24_listener() { return ctx.onFilterChange(); })("resetFilters", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_resetFilters_24_listener() { return ctx.onResetFilters(); })("closePanel", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_closePanel_24_listener() { return ctx.toggleFilterPanel(); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(25, "kendo-splitter-pane", 20)(26, "div", 21);
-            i0.ɵɵconditionalCreate(27, SystemConfigurationComponent_Conditional_27_Template, 2, 0, "div", 22);
-            i0.ɵɵconditionalCreate(28, SystemConfigurationComponent_Conditional_28_Template, 4, 1, "div", 23);
-            i0.ɵɵconditionalCreate(29, SystemConfigurationComponent_Conditional_29_Template, 2, 1);
+            i0.ɵɵelementStart(21, "div", 16)(22, "as-split", 17);
+            i0.ɵɵconditionalCreate(23, SystemConfigurationComponent_Conditional_23_Template, 2, 6, "as-split-area", 18);
+            i0.ɵɵelementStart(24, "as-split-area")(25, "div", 19);
+            i0.ɵɵconditionalCreate(26, SystemConfigurationComponent_Conditional_26_Template, 2, 0, "div", 20);
+            i0.ɵɵconditionalCreate(27, SystemConfigurationComponent_Conditional_27_Template, 4, 1, "div", 21);
+            i0.ɵɵconditionalCreate(28, SystemConfigurationComponent_Conditional_28_Template, 2, 1);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(30, SystemConfigurationComponent_Conditional_30_Template, 1, 0, "div", 24);
-            i0.ɵɵelementStart(31, "div", 25);
-            i0.ɵɵconditionalCreate(32, SystemConfigurationComponent_Conditional_32_Template, 71, 14);
+            i0.ɵɵconditionalCreate(29, SystemConfigurationComponent_Conditional_29_Template, 1, 0, "div", 22);
+            i0.ɵɵelementStart(30, "div", 23);
+            i0.ɵɵconditionalCreate(31, SystemConfigurationComponent_Conditional_31_Template, 71, 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(8);
@@ -940,24 +950,20 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
             i0.ɵɵadvance();
             i0.ɵɵclassProp("fa-spin", ctx.isLoading);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("size", ctx.filterPanelVisible ? "320px" : "0px")("collapsible", false)("resizable", ctx.filterPanelVisible)("scrollable", false)("hidden", !ctx.filterPanelVisible);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("configurations", ctx.configurations)("filteredConfigurations", ctx.filteredConfigurations)("filters", ctx.currentFilters);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("resizable", true)("scrollable", false);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
+            i0.ɵɵconditional(ctx.filterPanelVisible ? 23 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.isLoading ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 28 : -1);
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 29 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.detailPanelVisible ? 30 : -1);
+            i0.ɵɵconditional(ctx.detailPanelVisible ? 29 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedConfig ? 32 : -1);
-        } }, dependencies: [i2.NgClass, i3.SplitterComponent, i3.SplitterPaneComponent, i4.LoadingComponent, i5.SystemConfigFilterPanelComponent], styles: ["\n\n\n\n\n\n\n.system-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\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: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.config-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\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-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\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\nkendo-splitter[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitbar {\n  background: var(--mj-border-default);\n  width: 6px;\n}\n\n[_nghost-%COMP%]     .k-splitbar:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n[_nghost-%COMP%]     .k-pane {\n  overflow: hidden;\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}"] });
+            i0.ɵɵconditional(ctx.selectedConfig ? 31 : -1);
+        } }, dependencies: [i2.NgClass, i3.SplitComponent, i3.SplitAreaComponent, i4.LoadingComponent, i5.SystemConfigFilterPanelComponent], styles: ["\n\n\n\n\n\n\n.system-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\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: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.config-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\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-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\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}"] });
 };
 SystemConfigurationComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIConfigResource')
@@ -965,7 +971,7 @@ SystemConfigurationComponent = __decorate([
 export { SystemConfigurationComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SystemConfigurationComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-system-configuration', template: "<div class=\"system-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        AI Configuration\n      </h2>\n      <button\n        type=\"button\"\n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"config-count\">\n        {{ filteredConfigurations.length }} of {{ configurations.length }} configurations\n      </span>\n    </div>\n\n    <div class=\"header-controls\">\n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grid-2\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"control-btn\"\n        (click)=\"loadData()\"\n        [disabled]=\"isLoading\"\n        title=\"Refresh\">\n        <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n        Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\">\n    <kendo-splitter\n      class=\"main-splitter\"\n      orientation=\"horizontal\">\n\n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane\n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-system-config-filter-panel\n          [configurations]=\"configurations\"\n          [filteredConfigurations]=\"filteredConfigurations\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-system-config-filter-panel>\n      </kendo-splitter-pane>\n\n      <!-- Configurations List Panel -->\n      <kendo-splitter-pane\n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"configurations-content\">\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        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\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</div>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* ============================================================================\n   CONTAINER & LAYOUT\n   ============================================================================ */\n.system-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ============================================================================\n   HEADER\n   ============================================================================ */\n.dashboard-header {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title i {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: var(--mj-bg-surface-card);\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: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.config-count {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\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-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\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   ============================================================================ */\nkendo-splitter {\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: var(--mj-border-default);\n  width: 6px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n:host ::ng-deep .k-pane {\n  overflow: hidden;\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: "<div class=\"system-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        AI Configuration\n      </h2>\n      <button\n        type=\"button\"\n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"config-count\">\n        {{ filteredConfigurations.length }} of {{ configurations.length }} configurations\n      </span>\n    </div>\n\n    <div class=\"header-controls\">\n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grid-2\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"control-btn\"\n        (click)=\"loadData()\"\n        [disabled]=\"isLoading\"\n        title=\"Refresh\">\n        <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n        Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\">\n    <as-split direction=\"horizontal\" class=\"main-splitter\">\n\n      <!-- Filter Panel (Left) -->\n      @if (filterPanelVisible) {\n      <as-split-area [size]=\"20\" [minSize]=\"15\" [maxSize]=\"30\">\n        <mj-system-config-filter-panel\n          [configurations]=\"configurations\"\n          [filteredConfigurations]=\"filteredConfigurations\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-system-config-filter-panel>\n      </as-split-area>\n      }\n\n      <!-- Configurations List Panel -->\n      <as-split-area>\n        <div class=\"configurations-content\">\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        </div>\n      </as-split-area>\n    </as-split>\n  </div>\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</div>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* ============================================================================\n   CONTAINER & LAYOUT\n   ============================================================================ */\n.system-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ============================================================================\n   HEADER\n   ============================================================================ */\n.dashboard-header {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title i {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: var(--mj-bg-surface-card);\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: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.config-count {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\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-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\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"] }]
     }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemConfigurationComponent, { className: "SystemConfigurationComponent", filePath: "src/AI/components/system/system-configuration.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=system-configuration.component.js.map