@memberjunction/ng-dashboards 5.34.1 → 5.35.0

package/dist/AI/components/prompts/prompt-management.component.js

@@ -17,157 +17,46 @@ import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@memberjunction/ng-ai-test-harness";
-import * as i3 from "@angular/forms";
-import * as i4 from "angular-split";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@angular/common";
-import * as i7 from "../../../shared/pipes/highlight-search.pipe";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@angular/common";
+import * as i6 from "../../../shared/pipes/highlight-search.pipe";
 const _forTrack0 = ($index, $item) => $item.ID;
 function PromptManagementComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Hide Filters ");
-} }
-function PromptManagementComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Show Filters ");
-} }
-function PromptManagementComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createNewPrompt()); });
-    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createNewPrompt()); });
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵtext(2, " New Prompt ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_21_For_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 39);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const category_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", category_r4.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(category_r4.Name);
-} }
-function PromptManagementComponent_Conditional_21_For_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 39);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const type_r5 = ctx.$implicit;
-    i0.ɵɵproperty("value", type_r5.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(type_r5.Name);
-} }
-function PromptManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "as-split-area", 17)(1, "div", 24)(2, "div", 25)(3, "h3");
-    i0.ɵɵtext(4, "Prompt Filters");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 26)(6, "span", 27);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 28);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "button", 29);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_21_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
-    i0.ɵɵelement(11, "i", 30);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 31)(13, "div", 32)(14, "label", 33);
-    i0.ɵɵelement(15, "i", 34);
-    i0.ɵɵtext(16, " Name ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "input", 35);
-    i0.ɵɵlistener("input", function PromptManagementComponent_Conditional_21_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event.target.value)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 32)(19, "label", 33);
-    i0.ɵɵelement(20, "i", 36);
-    i0.ɵɵtext(21, " Category ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "select", 37);
-    i0.ɵɵlistener("change", function PromptManagementComponent_Conditional_21_Template_select_change_22_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryChange($event.target.value)); });
-    i0.ɵɵelementStart(23, "option", 38);
-    i0.ɵɵtext(24, "All Categories");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(25, PromptManagementComponent_Conditional_21_For_26_Template, 2, 2, "option", 39, _forTrack0);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 32)(28, "label", 33);
-    i0.ɵɵelement(29, "i", 40);
-    i0.ɵɵtext(30, " Type ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "select", 37);
-    i0.ɵɵlistener("change", function PromptManagementComponent_Conditional_21_Template_select_change_31_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTypeChange($event.target.value)); });
-    i0.ɵɵelementStart(32, "option", 38);
-    i0.ɵɵtext(33, "All Types");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(34, PromptManagementComponent_Conditional_21_For_35_Template, 2, 2, "option", 39, _forTrack0);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 32)(37, "label", 33);
-    i0.ɵɵelement(38, "i", 41);
-    i0.ɵɵtext(39, " Status ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "select", 37);
-    i0.ɵɵlistener("change", function PromptManagementComponent_Conditional_21_Template_select_change_40_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStatusChange($event.target.value)); });
-    i0.ɵɵelementStart(41, "option", 38);
-    i0.ɵɵtext(42, "All Statuses");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "option", 42);
-    i0.ɵɵtext(44, "Active");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "option", 43);
-    i0.ɵɵtext(46, "Inactive");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(47, "div", 44)(48, "button", 45);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_21_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
-    i0.ɵɵelement(49, "i", 46);
-    i0.ɵɵtext(50, " Reset Filters ");
-    i0.ɵɵelementEnd()()()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("size", 20)("minSize", 15)("maxSize", 30);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r1.filteredPrompts.length);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("of ", ctx_r1.prompts.length);
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("value", ctx_r1.searchTerm);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r1.selectedCategory);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.categories);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("value", ctx_r1.selectedType);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.types);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("value", ctx_r1.selectedStatus);
-} }
-function PromptManagementComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "mj-loading", 47);
+function PromptManagementComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "mj-loading", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", ctx_r1.currentLoadingMessage);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createNewPrompt()); });
-    i0.ɵɵelement(1, "i", 23);
+function PromptManagementComponent_Conditional_13_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createNewPrompt()); });
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵtext(2, " Create New Prompt ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵelement(1, "i", 4);
+function PromptManagementComponent_Conditional_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 18);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No prompts found");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, PromptManagementComponent_Conditional_25_Conditional_0_Conditional_6_Template, 3, 0, "button", 49);
+    i0.ɵɵconditionalCreate(6, PromptManagementComponent_Conditional_13_Conditional_0_Conditional_6_Template, 3, 0, "button", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -176,168 +65,168 @@ function PromptManagementComponent_Conditional_25_Conditional_0_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.hasActiveFilters && ctx_r1.UserCanCreatePrompts ? 6 : -1);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 71);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const prompt_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("status-" + prompt_r8.Status.toLowerCase());
+    const prompt_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("status-" + prompt_r5.Status.toLowerCase());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", prompt_r8.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", prompt_r5.Status, " ");
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 65);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 36);
     i0.ɵɵpipe(1, "highlightSearch");
 } if (rf & 2) {
-    const prompt_r8 = i0.ɵɵnextContext().$implicit;
+    const prompt_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, prompt_r8.Description, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, prompt_r5.Description, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 66);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 37);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 76);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 47);
     i0.ɵɵtext(1, " Yes ");
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 77);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
     i0.ɵɵtext(1, " No ");
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 72)(2, "div", 73)(3, "span", 74);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 43)(2, "div", 44)(3, "span", 45);
     i0.ɵɵtext(4, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 75);
+    i0.ɵɵelementStart(5, "span", 46);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 73)(8, "span", 74);
+    i0.ɵɵelementStart(7, "div", 44)(8, "span", 45);
     i0.ɵɵtext(9, "Template");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 75);
-    i0.ɵɵconditionalCreate(11, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_11_Template, 2, 0)(12, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_12_Template, 2, 0);
+    i0.ɵɵelementStart(10, "span", 46);
+    i0.ɵɵconditionalCreate(11, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_11_Template, 2, 0)(12, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_12_Template, 2, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const prompt_r8 = i0.ɵɵnextContext().$implicit;
+    const prompt_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(prompt_r8.TypeName);
+    i0.ɵɵtextInterpolate(prompt_r5.TypeName);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(prompt_r8.MJTemplateEntity ? 11 : 12);
+    i0.ɵɵconditional(prompt_r5.MJTemplateEntity ? 11 : 12);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_19_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const prompt_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showPromptDetails(prompt_r8, $event)); });
-    i0.ɵɵelement(1, "i", 79);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_19_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const prompt_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showPromptDetails(prompt_r5, $event)); });
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_20_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const prompt_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.testPrompt(prompt_r8.ID, $event)); });
-    i0.ɵɵelement(1, "i", 81);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_20_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const prompt_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.testPrompt(prompt_r5.ID, $event)); });
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const prompt_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.togglePromptExpansion(prompt_r8.ID)); });
-    i0.ɵɵelementStart(2, "div", 56)(3, "div", 57);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const prompt_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.togglePromptExpansion(prompt_r5.ID)); });
+    i0.ɵɵelementStart(2, "div", 26)(3, "div", 27);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 58);
-    i0.ɵɵelement(6, "h4", 59);
+    i0.ɵɵelementStart(5, "div", 28);
+    i0.ɵɵelement(6, "h4", 29);
     i0.ɵɵpipe(7, "highlightSearch");
-    i0.ɵɵelementStart(8, "div", 60)(9, "span", 61);
-    i0.ɵɵelement(10, "i", 36);
+    i0.ɵɵelementStart(8, "div", 30)(9, "span", 31);
+    i0.ɵɵelement(10, "i", 32);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span", 62);
+    i0.ɵɵconditionalCreate(12, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span", 33);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(13, "i", 63);
+    i0.ɵɵelement(13, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 64);
-    i0.ɵɵconditionalCreate(15, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_15_Template, 2, 4, "p", 65)(16, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 0, "p", 66);
-    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 13, 2, "div", 67);
+    i0.ɵɵelementStart(14, "div", 35);
+    i0.ɵɵconditionalCreate(15, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_15_Template, 2, 4, "p", 36)(16, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 0, "p", 37);
+    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 13, 2, "div", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 68);
-    i0.ɵɵconditionalCreate(19, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_19_Template, 3, 0, "button", 69);
-    i0.ɵɵconditionalCreate(20, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Conditional_20_Template, 3, 0, "button", 70);
+    i0.ɵɵelementStart(18, "div", 39);
+    i0.ɵɵconditionalCreate(19, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_19_Template, 3, 0, "button", 40);
+    i0.ɵɵconditionalCreate(20, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Conditional_20_Template, 3, 0, "button", 41);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const prompt_r8 = ctx.$implicit;
+    const prompt_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedPromptId === prompt_r8.ID);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedPromptId === prompt_r5.ID);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.getPromptIcon(prompt_r8));
+    i0.ɵɵclassMap(ctx_r1.getPromptIcon(prompt_r5));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 13, prompt_r8.Name, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 13, prompt_r5.Name, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", prompt_r8.CategoryName, " ");
+    i0.ɵɵtextInterpolate1(" ", prompt_r5.CategoryName, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(prompt_r8.Status ? 12 : -1);
+    i0.ɵɵconditional(prompt_r5.Status ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("rotated", ctx_r1.expandedPromptId === prompt_r8.ID);
+    i0.ɵɵclassProp("rotated", ctx_r1.expandedPromptId === prompt_r5.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(prompt_r8.Description ? 15 : 16);
+    i0.ɵɵconditional(prompt_r5.Description ? 15 : 16);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.expandedPromptId === prompt_r8.ID ? 17 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedPromptId === prompt_r5.ID ? 17 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.UserCanReadPrompts ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(prompt_r8.Status === "Active" && ctx_r1.UserCanReadPrompts ? 20 : -1);
+    i0.ɵɵconditional(prompt_r5.Status === "Active" && ctx_r1.UserCanReadPrompts ? 20 : -1);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵrepeaterCreate(1, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_For_2_Template, 21, 16, "div", 53, _forTrack0);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵrepeaterCreate(1, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_For_2_Template, 21, 16, "div", 23, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.filteredPrompts);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 88);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 59);
     i0.ɵɵpipe(1, "highlightSearch");
 } if (rf & 2) {
-    const prompt_r12 = i0.ɵɵnextContext().$implicit;
+    const prompt_r9 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, prompt_r12.Description, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, prompt_r9.Description, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 90);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 61);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 91);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 62);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 95);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const prompt_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showPromptDetails(prompt_r12)); });
-    i0.ɵɵelement(1, "i", 79);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const prompt_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showPromptDetails(prompt_r9)); });
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 96);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const prompt_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.testPrompt(prompt_r12.ID, $event)); });
-    i0.ɵɵelement(1, "i", 81);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const prompt_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.testPrompt(prompt_r9.ID, $event)); });
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 86)(3, "div", 87);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 57)(3, "div", 58);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div");
-    i0.ɵɵelement(6, "div", 59);
+    i0.ɵɵelement(6, "div", 29);
     i0.ɵɵpipe(7, "highlightSearch");
-    i0.ɵɵconditionalCreate(8, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_8_Template, 2, 4, "div", 88);
+    i0.ɵɵconditionalCreate(8, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_8_Template, 2, 4, "div", 59);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(9, "td");
     i0.ɵɵtext(10);
@@ -345,65 +234,65 @@ function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Fo
     i0.ɵɵelementStart(11, "td");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "td")(14, "span", 89);
+    i0.ɵɵelementStart(13, "td")(14, "span", 60);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(16, "td");
-    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_17_Template, 1, 0, "i", 90)(18, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_18_Template, 1, 0, "i", 91);
+    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_17_Template, 1, 0, "i", 61)(18, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_18_Template, 1, 0, "i", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "td")(20, "div", 92);
-    i0.ɵɵconditionalCreate(21, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_21_Template, 2, 0, "button", 93);
-    i0.ɵɵconditionalCreate(22, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Conditional_22_Template, 2, 0, "button", 94);
+    i0.ɵɵelementStart(19, "td")(20, "div", 63);
+    i0.ɵɵconditionalCreate(21, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_21_Template, 2, 0, "button", 64);
+    i0.ɵɵconditionalCreate(22, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Conditional_22_Template, 2, 0, "button", 65);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const prompt_r12 = ctx.$implicit;
+    const prompt_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.getPromptIcon(prompt_r12));
+    i0.ɵɵclassMap(ctx_r1.getPromptIcon(prompt_r9));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 12, prompt_r12.Name, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 12, prompt_r9.Name, ctx_r1.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(prompt_r12.Description ? 8 : -1);
+    i0.ɵɵconditional(prompt_r9.Description ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(prompt_r12.CategoryName);
+    i0.ɵɵtextInterpolate(prompt_r9.CategoryName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(prompt_r12.TypeName);
+    i0.ɵɵtextInterpolate(prompt_r9.TypeName);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap("status-" + (prompt_r12.Status || "unknown").toLowerCase());
+    i0.ɵɵclassMap("status-" + (prompt_r9.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", prompt_r12.Status || "Unknown", " ");
+    i0.ɵɵtextInterpolate1(" ", prompt_r9.Status || "Unknown", " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(prompt_r12.MJTemplateEntity ? 17 : 18);
+    i0.ɵɵconditional(prompt_r9.MJTemplateEntity ? 17 : 18);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.UserCanReadPrompts ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(prompt_r12.Status === "Active" && ctx_r1.UserCanReadPrompts ? 22 : -1);
+    i0.ɵɵconditional(prompt_r9.Status === "Active" && ctx_r1.UserCanReadPrompts ? 22 : -1);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "table", 82)(2, "thead")(3, "tr")(4, "th", 83);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Name")); });
-    i0.ɵɵelementStart(5, "span", 84);
+function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "table", 53)(2, "thead")(3, "tr")(4, "th", 54);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Name")); });
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6, " Name ");
-    i0.ɵɵelement(7, "i", 85);
+    i0.ɵɵelement(7, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "th", 83);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Category")); });
-    i0.ɵɵelementStart(9, "span", 84);
+    i0.ɵɵelementStart(8, "th", 54);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Category")); });
+    i0.ɵɵelementStart(9, "span", 55);
     i0.ɵɵtext(10, " Category ");
-    i0.ɵɵelement(11, "i", 85);
+    i0.ɵɵelement(11, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "th", 83);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Type")); });
-    i0.ɵɵelementStart(13, "span", 84);
+    i0.ɵɵelementStart(12, "th", 54);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Type")); });
+    i0.ɵɵelementStart(13, "span", 55);
     i0.ɵɵtext(14, " Type ");
-    i0.ɵɵelement(15, "i", 85);
+    i0.ɵɵelement(15, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "th", 83);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Status")); });
-    i0.ɵɵelementStart(17, "span", 84);
+    i0.ɵɵelementStart(16, "th", 54);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Status")); });
+    i0.ɵɵelementStart(17, "span", 55);
     i0.ɵɵtext(18, " Status ");
-    i0.ɵɵelement(19, "i", 85);
+    i0.ɵɵelement(19, "i", 56);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(20, "th");
     i0.ɵɵtext(21, "Template");
@@ -412,7 +301,7 @@ function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Te
     i0.ɵɵtext(23, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(24, "tbody");
-    i0.ɵɵrepeaterCreate(25, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_For_26_Template, 23, 15, "tr", null, _forTrack0);
+    i0.ɵɵrepeaterCreate(25, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_For_26_Template, 23, 15, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -427,39 +316,39 @@ function PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Te
     i0.ɵɵadvance(9);
     i0.ɵɵrepeater(ctx_r1.filteredPrompts);
 } }
-function PromptManagementComponent_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_0_Template, 3, 0, "div", 51);
-    i0.ɵɵconditionalCreate(1, PromptManagementComponent_Conditional_25_Conditional_1_Conditional_1_Template, 27, 16, "div", 52);
+function PromptManagementComponent_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_0_Template, 3, 0, "div", 21);
+    i0.ɵɵconditionalCreate(1, PromptManagementComponent_Conditional_13_Conditional_1_Conditional_1_Template, 27, 16, "div", 22);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 0 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 1 : -1);
 } }
-function PromptManagementComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PromptManagementComponent_Conditional_25_Conditional_0_Template, 7, 2, "div", 48)(1, PromptManagementComponent_Conditional_25_Conditional_1_Template, 2, 2);
+function PromptManagementComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PromptManagementComponent_Conditional_13_Conditional_0_Template, 7, 2, "div", 17)(1, PromptManagementComponent_Conditional_13_Conditional_1_Template, 2, 2);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.filteredPrompts.length === 0 ? 0 : 1);
 } }
-function PromptManagementComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+function PromptManagementComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_28_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 107);
-    i0.ɵɵelement(1, "i", 119);
+function PromptManagementComponent_Conditional_16_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵtext(2, " Has Template ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_28_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105)(1, "h4", 108);
-    i0.ɵɵelement(2, "i", 120);
+function PromptManagementComponent_Conditional_16_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "h4", 80);
+    i0.ɵɵelement(2, "i", 92);
     i0.ɵɵtext(3, " Description ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 121);
+    i0.ɵɵelementStart(4, "p", 93);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -467,11 +356,11 @@ function PromptManagementComponent_Conditional_28_Conditional_18_Template(rf, ct
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.selectedPrompt.Description);
 } }
-function PromptManagementComponent_Conditional_28_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 111)(1, "span", 112);
+function PromptManagementComponent_Conditional_16_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83)(1, "span", 84);
     i0.ɵɵtext(2, "Min Power Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 113);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -479,95 +368,95 @@ function PromptManagementComponent_Conditional_28_Conditional_49_Template(rf, ct
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.selectedPrompt.MinPowerRank);
 } }
-function PromptManagementComponent_Conditional_28_Conditional_68_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 122);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_28_Conditional_68_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.testPrompt(ctx_r1.selectedPrompt.ID)); });
-    i0.ɵɵelement(1, "i", 81);
+function PromptManagementComponent_Conditional_16_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 94);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_16_Conditional_68_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.testPrompt(ctx_r1.selectedPrompt.ID)); });
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵtext(2, " Run Prompt ");
     i0.ɵɵelementEnd();
 } }
-function PromptManagementComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98)(1, "div", 99)(2, "div", 100);
+function PromptManagementComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 69)(1, "div", 70)(2, "div", 71);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 101)(5, "h3");
+    i0.ɵɵelementStart(4, "div", 72)(5, "h3");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 102);
+    i0.ɵɵelementStart(7, "span", 73);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "button", 103);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_28_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
-    i0.ɵɵelement(10, "i", 30);
+    i0.ɵɵelementStart(9, "button", 74);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_16_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+    i0.ɵɵelement(10, "i", 75);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 104)(12, "div", 105)(13, "div", 106)(14, "span", 89);
-    i0.ɵɵelement(15, "i", 71);
+    i0.ɵɵelementStart(11, "div", 76)(12, "div", 77)(13, "div", 78)(14, "span", 60);
+    i0.ɵɵelement(15, "i", 42);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_28_Conditional_17_Template, 3, 0, "span", 107);
+    i0.ɵɵconditionalCreate(17, PromptManagementComponent_Conditional_16_Conditional_17_Template, 3, 0, "span", 79);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, PromptManagementComponent_Conditional_28_Conditional_18_Template, 6, 1, "div", 105);
-    i0.ɵɵelementStart(19, "div", 105)(20, "h4", 108);
-    i0.ɵɵelement(21, "i", 109);
+    i0.ɵɵconditionalCreate(18, PromptManagementComponent_Conditional_16_Conditional_18_Template, 6, 1, "div", 77);
+    i0.ɵɵelementStart(19, "div", 77)(20, "h4", 80);
+    i0.ɵɵelement(21, "i", 81);
     i0.ɵɵtext(22, " Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 110)(24, "div", 111)(25, "span", 112);
+    i0.ɵɵelementStart(23, "div", 82)(24, "div", 83)(25, "span", 84);
     i0.ɵɵtext(26, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 113);
+    i0.ɵɵelementStart(27, "span", 85);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 111)(30, "span", 112);
+    i0.ɵɵelementStart(29, "div", 83)(30, "span", 84);
     i0.ɵɵtext(31, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "span", 113);
+    i0.ɵɵelementStart(32, "span", 85);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 111)(35, "span", 112);
+    i0.ɵɵelementStart(34, "div", 83)(35, "span", 84);
     i0.ɵɵtext(36, "Response Format");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "span", 113);
+    i0.ɵɵelementStart(37, "span", 85);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 111)(40, "span", 112);
+    i0.ɵɵelementStart(39, "div", 83)(40, "span", 84);
     i0.ɵɵtext(41, "Selection Strategy");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "span", 113);
+    i0.ɵɵelementStart(42, "span", 85);
     i0.ɵɵtext(43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 111)(45, "span", 112);
+    i0.ɵɵelementStart(44, "div", 83)(45, "span", 84);
     i0.ɵɵtext(46, "Power Preference");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "span", 113);
+    i0.ɵɵelementStart(47, "span", 85);
     i0.ɵɵtext(48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(49, PromptManagementComponent_Conditional_28_Conditional_49_Template, 5, 1, "div", 111);
+    i0.ɵɵconditionalCreate(49, PromptManagementComponent_Conditional_16_Conditional_49_Template, 5, 1, "div", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(50, "div", 105)(51, "h4", 108);
-    i0.ɵɵelement(52, "i", 114);
+    i0.ɵɵelementStart(50, "div", 77)(51, "h4", 80);
+    i0.ɵɵelement(52, "i", 86);
     i0.ɵɵtext(53, " Timestamps ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 110)(55, "div", 111)(56, "span", 112);
+    i0.ɵɵelementStart(54, "div", 82)(55, "div", 83)(56, "span", 84);
     i0.ɵɵtext(57, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "span", 113);
+    i0.ɵɵelementStart(58, "span", 85);
     i0.ɵɵtext(59);
     i0.ɵɵpipe(60, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(61, "div", 111)(62, "span", 112);
+    i0.ɵɵelementStart(61, "div", 83)(62, "span", 84);
     i0.ɵɵtext(63, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "span", 113);
+    i0.ɵɵelementStart(64, "span", 85);
     i0.ɵɵtext(65);
     i0.ɵɵpipe(66, "date");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(67, "div", 115);
-    i0.ɵɵconditionalCreate(68, PromptManagementComponent_Conditional_28_Conditional_68_Template, 3, 0, "button", 116);
-    i0.ɵɵelementStart(69, "button", 117);
-    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_28_Template_button_click_69_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openPromptFromPanel()); });
-    i0.ɵɵelement(70, "i", 118);
+    i0.ɵɵelementStart(67, "div", 87);
+    i0.ɵɵconditionalCreate(68, PromptManagementComponent_Conditional_16_Conditional_68_Template, 3, 0, "button", 88);
+    i0.ɵɵelementStart(69, "button", 89);
+    i0.ɵɵlistener("click", function PromptManagementComponent_Conditional_16_Template_button_click_69_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openPromptFromPanel()); });
+    i0.ɵɵelement(70, "i", 90);
     i0.ɵɵtext(71, " Open Full Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1101,6 +990,83 @@ let PromptManagementComponent = class PromptManagementComponent extends BaseReso
             this.selectedType !== 'all' ||
             this.selectedStatus !== 'all';
     }
+    /** Number of currently-applied filter criteria inside the popover (excludes searchTerm — surfaced separately in the header toolbar). */
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedCategory && this.selectedCategory !== 'all')
+            n++;
+        if (this.selectedType && this.selectedType !== 'all')
+            n++;
+        if (this.selectedStatus && this.selectedStatus !== 'all')
+            n++;
+        return n;
+    }
+    /** Reset only the filters inside the popover (not the toolbar search). */
+    resetPopoverFilters() {
+        this.selectedCategory = 'all';
+        this.selectedType = 'all';
+        this.selectedStatus = 'all';
+        this.applyFilters();
+        this.saveUserPreferencesDebounced();
+    }
+    /** View-mode options for the shared <mj-view-toggle>. */
+    promptViewOptions = [
+        { key: 'grid', icon: 'fa-solid fa-grip', title: 'Grid View' },
+        { key: 'list', icon: 'fa-solid fa-list', title: 'List View' },
+    ];
+    /** Values record consumed by the centralized <mj-filter-panel> (excludes searchTerm — surfaced in the page-header toolbar). */
+    get promptFilterValues() {
+        return {
+            categoryId: this.selectedCategory,
+            typeId: this.selectedType,
+            status: this.selectedStatus,
+        };
+    }
+    /** Field config consumed by the centralized <mj-filter-panel>. */
+    get promptFilterFields() {
+        return [
+            {
+                key: 'categoryId',
+                type: 'dropdown',
+                label: 'Category',
+                icon: 'fa-solid fa-folder',
+                filterable: this.categories.length > 10,
+                options: [
+                    { text: 'All Categories', value: 'all' },
+                    ...this.categories.map(c => ({ text: c.Name ?? '', value: c.ID })),
+                ],
+            },
+            {
+                key: 'typeId',
+                type: 'dropdown',
+                label: 'Type',
+                icon: 'fa-solid fa-tag',
+                options: [
+                    { text: 'All Types', value: 'all' },
+                    ...this.types.map(t => ({ text: t.Name ?? '', value: t.ID })),
+                ],
+            },
+            {
+                key: 'status',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-toggle-on',
+                options: [
+                    { text: 'All Statuses', value: 'all' },
+                    { text: 'Active', value: 'active' },
+                    { text: 'Inactive', value: 'inactive' },
+                ],
+            },
+        ];
+    }
+    /** Receive the updated values record from <mj-filter-panel> and apply it. */
+    onFilterValuesChange(values) {
+        this.selectedCategory = values['categoryId'] ?? 'all';
+        this.selectedType = values['typeId'] ?? 'all';
+        this.selectedStatus = values['status'] ?? 'all';
+        this.applyFilters();
+        this.saveUserPreferencesDebounced();
+    }
     get filteredPromptsAsEntities() {
         // The prompts are already MJAIPromptEntityExtended instances with extra properties
         return this.filteredPrompts;
@@ -1122,63 +1088,57 @@ let PromptManagementComponent = class PromptManagementComponent extends BaseReso
         return 'fa-solid fa-comment-dots';
     }
     static ɵfac = function PromptManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PromptManagementComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.AITestHarnessDialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptManagementComponent, selectors: [["app-prompt-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 14, consts: [[1, "prompt-management-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-message"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Prompt", 1, "control-btn", "primary"], [1, "main-content"], ["direction", "horizontal", 1, "main-splitter"], [3, "size", "minSize", "maxSize"], [1, "prompts-content"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["type", "button", "title", "Create New Prompt", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "filter-panel"], [1, "filter-panel-header"], [1, "filter-summary-inline"], [1, "summary-value"], [1, "summary-label"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "filter-group"], [1, "filter-label"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search prompts...", 1, "filter-input", 3, "input", "value"], [1, "fa-solid", "fa-folder"], [1, "filter-select", 3, "change", "value"], ["value", "all"], [3, "value"], [1, "fa-solid", "fa-tag"], [1, "fa-solid", "fa-toggle-on"], ["value", "active"], ["value", "inactive"], [1, "filter-actions"], ["title", "Reset all filters", 1, "reset-btn", 3, "click"], [1, "fa-solid", "fa-undo"], ["size", "large", 3, "text"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "prompts-grid"], [1, "prompts-list"], [1, "prompt-card", 3, "expanded"], [1, "prompt-card"], [1, "card-header", 3, "click"], [1, "prompt-info"], [1, "prompt-icon"], [1, "prompt-details"], [1, "prompt-name", 3, "innerHTML"], [1, "prompt-meta"], [1, "meta-item"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "prompt-description", 3, "innerHTML"], [1, "prompt-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Prompt", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "prompt-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Prompt", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "prompts-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "prompt-name-cell"], [1, "prompt-icon-small"], [1, "prompt-description-small", 3, "innerHTML"], [1, "status-badge"], [1, "fa-solid", "fa-check-circle", 2, "color", "#28a745"], [1, "fa-solid", "fa-times-circle", 2, "color", "var(--mj-text-muted)"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "Run Prompt", 1, "action-btn-small", "primary"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Prompt", 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, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-file-code"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function PromptManagementComponent_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 Prompts ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 5);
-            i0.ɵɵlistener("click", function PromptManagementComponent_Template_button_click_6_listener() { return ctx.toggleFilters(); });
-            i0.ɵɵelement(7, "i", 6);
-            i0.ɵɵconditionalCreate(8, PromptManagementComponent_Conditional_8_Template, 1, 0)(9, PromptManagementComponent_Conditional_9_Template, 1, 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PromptManagementComponent, selectors: [["app-prompt-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 16, consts: [["Title", "Prompts", "Icon", "fa-solid fa-comment-dots"], ["meta", ""], ["Label", "prompts", 3, "Count"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create New Prompt"], ["toolbar", ""], ["Placeholder", "Search prompts...", 3, "ValueChange", "Value"], [3, "Flex"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create New Prompt", 3, "click"], [1, "fa-solid", "fa-plus"], ["size", "large", 3, "text"], [1, "empty-state"], [1, "fa-solid", "fa-message"], ["type", "button", 1, "empty-state-btn"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "prompts-grid"], [1, "prompts-list"], [1, "prompt-card", 3, "expanded"], [1, "prompt-card"], [1, "card-header", 3, "click"], [1, "prompt-info"], [1, "prompt-icon"], [1, "prompt-details"], [1, "prompt-name", 3, "innerHTML"], [1, "prompt-meta"], [1, "meta-item"], [1, "fa-solid", "fa-folder"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "prompt-description", 3, "innerHTML"], [1, "prompt-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Prompt", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "prompt-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Prompt", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "prompts-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "prompt-name-cell"], [1, "prompt-icon-small"], [1, "prompt-description-small", 3, "innerHTML"], [1, "status-badge"], [1, "fa-solid", "fa-check-circle", 2, "color", "#28a745"], [1, "fa-solid", "fa-times-circle", 2, "color", "var(--mj-text-muted)"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "Run Prompt", 1, "action-btn-small", "primary"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Prompt", 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"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-file-code"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function PromptManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵelement(3, "mj-stat-badge", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "span", 7);
-            i0.ɵɵtext(11);
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-filter-popover", 4);
+            i0.ɵɵlistener("ClearAllRequested", function PromptManagementComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.resetPopoverFilters(); });
+            i0.ɵɵelementStart(6, "mj-filter-panel", 5);
+            i0.ɵɵlistener("ValuesChange", function PromptManagementComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function PromptManagementComponent_Template_mj_filter_panel_Reset_6_listener() { return ctx.resetPopoverFilters(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 8)(13, "div", 9)(14, "button", 10);
-            i0.ɵɵlistener("click", function PromptManagementComponent_Template_button_click_14_listener() { return ctx.setViewMode("grid"); });
-            i0.ɵɵelement(15, "i", 11);
+            i0.ɵɵelementStart(7, "mj-view-toggle", 6);
+            i0.ɵɵlistener("KeyChange", function PromptManagementComponent_Template_mj_view_toggle_KeyChange_7_listener($event) { return ctx.setViewMode($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 12);
-            i0.ɵɵlistener("click", function PromptManagementComponent_Template_button_click_16_listener() { return ctx.setViewMode("list"); });
-            i0.ɵɵelement(17, "i", 13);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(18, PromptManagementComponent_Conditional_18_Template, 3, 0, "button", 14);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 15)(20, "as-split", 16);
-            i0.ɵɵconditionalCreate(21, PromptManagementComponent_Conditional_21_Template, 51, 9, "as-split-area", 17);
-            i0.ɵɵelementStart(22, "as-split-area")(23, "div", 18);
-            i0.ɵɵconditionalCreate(24, PromptManagementComponent_Conditional_24_Template, 2, 1, "div", 19);
-            i0.ɵɵconditionalCreate(25, PromptManagementComponent_Conditional_25_Template, 2, 1);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(26, PromptManagementComponent_Conditional_26_Template, 1, 0, "div", 20);
-            i0.ɵɵelementStart(27, "div", 21);
-            i0.ɵɵconditionalCreate(28, PromptManagementComponent_Conditional_28_Template, 72, 24);
+            i0.ɵɵconditionalCreate(8, PromptManagementComponent_Conditional_8_Template, 3, 0, "button", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 8)(10, "mj-page-search", 9);
+            i0.ɵɵlistener("ValueChange", function PromptManagementComponent_Template_mj_page_search_ValueChange_10_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(11, "mj-page-body", 10);
+            i0.ɵɵconditionalCreate(12, PromptManagementComponent_Conditional_12_Template, 2, 1, "div", 11);
+            i0.ɵɵconditionalCreate(13, PromptManagementComponent_Conditional_13_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(14, PromptManagementComponent_Conditional_14_Template, 1, 0, "div", 12);
+            i0.ɵɵelementStart(15, "div", 13);
+            i0.ɵɵconditionalCreate(16, PromptManagementComponent_Conditional_16_Template, 72, 24);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.showFilters ? 8 : 9);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("", ctx.filteredPrompts.length, " prompts");
             i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("active", ctx.viewMode === "grid");
+            i0.ɵɵproperty("Count", ctx.filteredPrompts.length);
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.viewMode === "list");
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.promptFilterFields)("Values", ctx.promptFilterValues);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Options", ctx.promptViewOptions)("ActiveKey", ctx.viewMode);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.UserCanCreatePrompts ? 8 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.UserCanCreatePrompts ? 18 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.showFilters ? 21 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading ? 24 : -1);
+            i0.ɵɵproperty("Value", ctx.searchTerm);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Flex", true);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 25 : -1);
+            i0.ɵɵconditional(!ctx.isLoading ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.detailPanelVisible ? 26 : -1);
+            i0.ɵɵconditional(ctx.detailPanelVisible ? 14 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedPrompt ? 28 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.SplitComponent, i4.SplitAreaComponent, i5.LoadingComponent, i6.DatePipe, i7.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n.prompt-management-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\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: 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.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 500;\n  background: var(--mj-bg-surface-sunken);\n  padding: 6px 12px;\n  border-radius: 16px;\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-sunken);\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 12px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 14px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\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\n\nas-split[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n.prompts-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.prompts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.prompt-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.prompt-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.prompt-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\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-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.prompt-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.prompt-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.prompt-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.prompt-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n  background: var(--mj-color-warning-100);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\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-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.prompt-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.prompt-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\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.prompt-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\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.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: 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.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.prompts-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.prompts-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.prompts-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.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 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.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child {\n  cursor: default;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.prompts-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.prompts-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.prompts-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.prompts-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.prompts-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.prompt-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.prompt-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  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.prompt-name-cell[_ngcontent-%COMP%]   .prompt-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.prompt-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\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.3px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 8px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.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.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\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    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .prompts-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .prompts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .prompt-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\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[_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-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%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\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) 3%, 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-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}"] });
+            i0.ɵɵconditional(ctx.selectedPrompt ? 16 : -1);
+        } }, dependencies: [i3.LoadingComponent, i4.MJButtonDirective, i4.MJPageHeaderComponent, i4.MJPageLayoutComponent, i4.MJPageBodyComponent, i4.MJFilterPopoverComponent, i4.MJPageSearchComponent, i4.MJFilterPanelComponent, i4.MJViewToggleComponent, i4.MJStatBadgeComponent, i5.DatePipe, i6.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]   mj-page-body[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\nas-split[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n.prompts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.prompt-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.prompt-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.prompt-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.prompt-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\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-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.prompt-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.prompt-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.prompt-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.prompt-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n  background: var(--mj-color-warning-100);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\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-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.prompt-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.prompt-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\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.prompt-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\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.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: 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.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.prompts-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.prompts-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.prompts-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.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 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.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child {\n  cursor: default;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.prompts-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.prompts-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.prompts-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.prompts-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.prompts-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.prompts-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.prompts-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.prompt-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.prompt-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  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.prompt-name-cell[_ngcontent-%COMP%]   .prompt-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.prompt-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\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.3px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 8px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.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.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\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    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .prompts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .prompt-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\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[_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-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%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\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) 3%, 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-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}"] });
 };
 PromptManagementComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIPromptsResource')
@@ -1186,7 +1146,7 @@ PromptManagementComponent = __decorate([
 export { PromptManagementComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptManagementComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-prompt-management', template: "<div class=\"prompt-management-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-message\"></i>\n        AI Prompts\n      </h2>\n      <button\n        type=\"button\"\n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilters()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (showFilters) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredPrompts.length }} prompts</span>\n    </div>\n\n    <div class=\"header-controls\">\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-grip\"></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      @if (UserCanCreatePrompts) {\n        <button\n          type=\"button\"\n          class=\"control-btn primary\"\n          (click)=\"createNewPrompt()\"\n          title=\"Create New Prompt\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Prompt\n        </button>\n      }\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 (showFilters) {\n      <as-split-area [size]=\"20\" [minSize]=\"15\" [maxSize]=\"30\">\n        <div class=\"filter-panel\">\n          <div class=\"filter-panel-header\">\n            <h3>Prompt Filters</h3>\n            <div class=\"filter-summary-inline\">\n              <span class=\"summary-value\">{{ filteredPrompts.length }}</span>\n              <span class=\"summary-label\">of {{ prompts.length }}</span>\n            </div>\n            <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          </div>\n\n          <div class=\"filter-content\">\n            <!-- Search Filter -->\n            <div class=\"filter-group\">\n              <label class=\"filter-label\">\n                <i class=\"fa-solid fa-search\"></i>\n                Name\n              </label>\n              <input\n                type=\"text\"\n                class=\"filter-input\"\n                placeholder=\"Search prompts...\"\n                [value]=\"searchTerm\"\n                (input)=\"onSearchChange($any($event.target).value)\"\n              />\n            </div>\n\n            <!-- Category Filter -->\n            <div class=\"filter-group\">\n              <label class=\"filter-label\">\n                <i class=\"fa-solid fa-folder\"></i>\n                Category\n              </label>\n              <select class=\"filter-select\" [value]=\"selectedCategory\" (change)=\"onCategoryChange($any($event.target).value)\">\n                <option value=\"all\">All Categories</option>\n                @for (category of categories; track category.ID) {\n                  <option [value]=\"category.ID\">{{ category.Name }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Type Filter -->\n            <div class=\"filter-group\">\n              <label class=\"filter-label\">\n                <i class=\"fa-solid fa-tag\"></i>\n                Type\n              </label>\n              <select class=\"filter-select\" [value]=\"selectedType\" (change)=\"onTypeChange($any($event.target).value)\">\n                <option value=\"all\">All Types</option>\n                @for (type of types; track type.ID) {\n                  <option [value]=\"type.ID\">{{ type.Name }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Status Filter -->\n            <div class=\"filter-group\">\n              <label class=\"filter-label\">\n                <i class=\"fa-solid fa-toggle-on\"></i>\n                Status\n              </label>\n              <select class=\"filter-select\" [value]=\"selectedStatus\" (change)=\"onStatusChange($any($event.target).value)\">\n                <option value=\"all\">All Statuses</option>\n                <option value=\"active\">Active</option>\n                <option value=\"inactive\">Inactive</option>\n              </select>\n            </div>\n\n            <!-- Reset Button -->\n            <div class=\"filter-actions\">\n              <button class=\"reset-btn\" (click)=\"clearFilters()\" title=\"Reset all filters\">\n                <i class=\"fa-solid fa-undo\"></i>\n                Reset Filters\n              </button>\n            </div>\n          </div>\n        </div>\n      </as-split-area>\n      }\n\n      <!-- Prompts List Panel -->\n      <as-split-area>\n        <div class=\"prompts-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading [text]=\"currentLoadingMessage\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Prompts Display -->\n          @if (!isLoading) {\n            @if (filteredPrompts.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-message\"></i>\n                <h3>No prompts found</h3>\n                <p>{{ hasActiveFilters ? 'Try adjusting your filters' : 'Create your first AI prompt to get started' }}</p>\n                @if (!hasActiveFilters && UserCanCreatePrompts) {\n                  <button\n                    type=\"button\"\n                    class=\"empty-state-btn\"\n                    (click)=\"createNewPrompt()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Create New Prompt\n                  </button>\n                }\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"prompts-grid\">\n                  @for (prompt of filteredPrompts; track prompt.ID) {\n                    <div class=\"prompt-card\" [class.expanded]=\"expandedPromptId === prompt.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"togglePromptExpansion(prompt.ID)\">\n                        <div class=\"prompt-info\">\n                          <div class=\"prompt-icon\">\n                            <i [class]=\"getPromptIcon(prompt)\"></i>\n                          </div>\n                          <div class=\"prompt-details\">\n                            <h4 class=\"prompt-name\" [innerHTML]=\"prompt.Name | highlightSearch:searchTerm\"></h4>\n                            <div class=\"prompt-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-folder\"></i>\n                                {{ prompt.CategoryName }}\n                              </span>\n                              @if (prompt.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + prompt.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ prompt.Status }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"expandedPromptId === prompt.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (prompt.Description) {\n                          <p class=\"prompt-description\" [innerHTML]=\"prompt.Description | highlightSearch:searchTerm\"></p>\n                        } @else {\n                          <p class=\"prompt-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expandable Content -->\n                        @if (expandedPromptId === prompt.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"prompt-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Type</span>\n                                <span class=\"stat-value\">{{ prompt.TypeName }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Template</span>\n                                <span class=\"stat-value\">\n                                  @if (prompt.MJTemplateEntity) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Yes\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> No\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadPrompts) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showPromptDetails(prompt, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (prompt.Status === 'Active' && UserCanReadPrompts) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"testPrompt(prompt.ID, $event)\"\n                            title=\"Run Prompt\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"prompts-list\">\n                  <table class=\"prompts-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                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Category')\"\n                            [class.sorted]=\"sortColumn === 'Category'\"\n                            [class.desc]=\"sortColumn === 'Category' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Category\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Type')\"\n                            [class.sorted]=\"sortColumn === 'Type'\"\n                            [class.desc]=\"sortColumn === 'Type' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Type\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>Template</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (prompt of filteredPrompts; track prompt.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"prompt-name-cell\">\n                              <div class=\"prompt-icon-small\">\n                                <i [class]=\"getPromptIcon(prompt)\"></i>\n                              </div>\n                              <div>\n                                <div class=\"prompt-name\" [innerHTML]=\"prompt.Name | highlightSearch:searchTerm\"></div>\n                                @if (prompt.Description) {\n                                  <div class=\"prompt-description-small\" [innerHTML]=\"prompt.Description | highlightSearch:searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>{{ prompt.CategoryName }}</td>\n                          <td>{{ prompt.TypeName }}</td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (prompt.Status || 'unknown').toLowerCase()\">\n                              {{ prompt.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            @if (prompt.MJTemplateEntity) {\n                              <i class=\"fa-solid fa-check-circle\" style=\"color: #28a745;\"></i>\n                            } @else {\n                              <i class=\"fa-solid fa-times-circle\" style=\"color: var(--mj-text-muted);\"></i>\n                            }\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadPrompts) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showPromptDetails(prompt)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (prompt.Status === 'Active' && UserCanReadPrompts) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"testPrompt(prompt.ID, $event)\"\n                                  title=\"Run Prompt\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\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 (selectedPrompt) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\">\n            <i [class]=\"getPromptIcon(selectedPrompt)\"></i>\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedPrompt.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ selectedPrompt.TypeName || 'Prompt' }}</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\" [class]=\"'status-' + (selectedPrompt.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedPrompt.Status || 'Unknown' }}\n            </span>\n            @if (selectedPrompt.MJTemplateEntity) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-file-code\"></i>\n                Has Template\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedPrompt.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\">{{ selectedPrompt.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Category</span>\n              <span class=\"detail-value\">{{ selectedPrompt.CategoryName || 'Uncategorized' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Type</span>\n              <span class=\"detail-value\">{{ selectedPrompt.TypeName || 'Unknown' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Response Format</span>\n              <span class=\"detail-value\">{{ selectedPrompt.ResponseFormat }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Selection Strategy</span>\n              <span class=\"detail-value\">{{ selectedPrompt.SelectionStrategy }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Power Preference</span>\n              <span class=\"detail-value\">{{ selectedPrompt.PowerPreference }}</span>\n            </div>\n            @if (selectedPrompt.MinPowerRank) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Min Power Rank</span>\n                <span class=\"detail-value\">{{ selectedPrompt.MinPowerRank }}</span>\n              </div>\n            }\n          </div>\n        </div>\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\">{{ selectedPrompt.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedPrompt.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedPrompt.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"testPrompt(selectedPrompt.ID)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Prompt\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openPromptFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* ============================================\n   AI Prompts Dashboard - World-Class Design\n   Clean flat-color interface with brand blue theme\n   ============================================ */\n\n/* Container */\n.prompt-management-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Dashboard Header - Clean White Style */\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: 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.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn i {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n}\n\n.item-count {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 500;\n  background: var(--mj-bg-surface-sunken);\n  padding: 6px 12px;\n  border-radius: 16px;\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-sunken);\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 12px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 14px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.control-btn {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Main Content */\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/* Splitter Styling */\nas-split {\n  background: transparent;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Legacy support for non-scoped selectors */\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* Prompts Content */\n.prompts-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Grid View */\n.prompts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.prompt-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.prompt-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.prompt-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card:hover::before {\n  opacity: 1;\n}\n\n.prompt-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card.expanded::before {\n  opacity: 1;\n}\n\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-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.prompt-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.prompt-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.prompt-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.prompt-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: var(--mj-color-warning-100);\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\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-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.prompt-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.prompt-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\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.prompt-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\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.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: 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.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.prompts-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.prompts-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.prompts-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.prompts-table th {\n  padding: 16px 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.prompts-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table th:last-child {\n  cursor: default;\n}\n\n.prompts-table th:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.prompts-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.prompts-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.prompts-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.prompts-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.prompts-table th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.prompts-table th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.prompts-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.prompts-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.prompts-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.prompt-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.prompt-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\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 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.prompt-name-cell .prompt-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.prompt-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\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.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.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/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .prompts-content {\n    padding: 16px;\n  }\n\n  .prompts-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .prompt-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\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 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-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 i {\n  font-size: 13px;\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) 3%, 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-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-prompt-management', template: "<mj-page-layout>\n  <!-- Header -->\n  <mj-page-header\n    Title=\"Prompts\"\n    Icon=\"fa-solid fa-comment-dots\">\n    <div meta>\n      <mj-stat-badge [Count]=\"filteredPrompts.length\" Label=\"prompts\"></mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetPopoverFilters()\">\n        <mj-filter-panel\n          [Fields]=\"promptFilterFields\"\n          [Values]=\"promptFilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetPopoverFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n\n      <mj-view-toggle\n        [Options]=\"promptViewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n\n      @if (UserCanCreatePrompts) {\n        <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewPrompt()\" title=\"Create New Prompt\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Prompt\n        </button>\n      }\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search prompts...\"\n        [Value]=\"searchTerm\"\n        (ValueChange)=\"onSearchChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <!-- Main Content (no sidebar \u2014 filters live in the popover above) -->\n  <mj-page-body [Flex]=\"true\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading [text]=\"currentLoadingMessage\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Prompts Display -->\n          @if (!isLoading) {\n            @if (filteredPrompts.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-message\"></i>\n                <h3>No prompts found</h3>\n                <p>{{ hasActiveFilters ? 'Try adjusting your filters' : 'Create your first AI prompt to get started' }}</p>\n                @if (!hasActiveFilters && UserCanCreatePrompts) {\n                  <button\n                    type=\"button\"\n                    class=\"empty-state-btn\"\n                    (click)=\"createNewPrompt()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Create New Prompt\n                  </button>\n                }\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"prompts-grid\">\n                  @for (prompt of filteredPrompts; track prompt.ID) {\n                    <div class=\"prompt-card\" [class.expanded]=\"expandedPromptId === prompt.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"togglePromptExpansion(prompt.ID)\">\n                        <div class=\"prompt-info\">\n                          <div class=\"prompt-icon\">\n                            <i [class]=\"getPromptIcon(prompt)\"></i>\n                          </div>\n                          <div class=\"prompt-details\">\n                            <h4 class=\"prompt-name\" [innerHTML]=\"prompt.Name | highlightSearch:searchTerm\"></h4>\n                            <div class=\"prompt-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-folder\"></i>\n                                {{ prompt.CategoryName }}\n                              </span>\n                              @if (prompt.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + prompt.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ prompt.Status }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"expandedPromptId === prompt.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (prompt.Description) {\n                          <p class=\"prompt-description\" [innerHTML]=\"prompt.Description | highlightSearch:searchTerm\"></p>\n                        } @else {\n                          <p class=\"prompt-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expandable Content -->\n                        @if (expandedPromptId === prompt.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"prompt-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Type</span>\n                                <span class=\"stat-value\">{{ prompt.TypeName }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Template</span>\n                                <span class=\"stat-value\">\n                                  @if (prompt.MJTemplateEntity) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Yes\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> No\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadPrompts) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showPromptDetails(prompt, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (prompt.Status === 'Active' && UserCanReadPrompts) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"testPrompt(prompt.ID, $event)\"\n                            title=\"Run Prompt\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"prompts-list\">\n                  <table class=\"prompts-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                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Category')\"\n                            [class.sorted]=\"sortColumn === 'Category'\"\n                            [class.desc]=\"sortColumn === 'Category' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Category\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Type')\"\n                            [class.sorted]=\"sortColumn === 'Type'\"\n                            [class.desc]=\"sortColumn === 'Type' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Type\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>Template</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (prompt of filteredPrompts; track prompt.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"prompt-name-cell\">\n                              <div class=\"prompt-icon-small\">\n                                <i [class]=\"getPromptIcon(prompt)\"></i>\n                              </div>\n                              <div>\n                                <div class=\"prompt-name\" [innerHTML]=\"prompt.Name | highlightSearch:searchTerm\"></div>\n                                @if (prompt.Description) {\n                                  <div class=\"prompt-description-small\" [innerHTML]=\"prompt.Description | highlightSearch:searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>{{ prompt.CategoryName }}</td>\n                          <td>{{ prompt.TypeName }}</td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (prompt.Status || 'unknown').toLowerCase()\">\n                              {{ prompt.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            @if (prompt.MJTemplateEntity) {\n                              <i class=\"fa-solid fa-check-circle\" style=\"color: #28a745;\"></i>\n                            } @else {\n                              <i class=\"fa-solid fa-times-circle\" style=\"color: var(--mj-text-muted);\"></i>\n                            }\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadPrompts) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showPromptDetails(prompt)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (prompt.Status === 'Active' && UserCanReadPrompts) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"testPrompt(prompt.ID, $event)\"\n                                  title=\"Run Prompt\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n  </mj-page-body>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedPrompt) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\">\n            <i [class]=\"getPromptIcon(selectedPrompt)\"></i>\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedPrompt.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ selectedPrompt.TypeName || 'Prompt' }}</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\" [class]=\"'status-' + (selectedPrompt.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedPrompt.Status || 'Unknown' }}\n            </span>\n            @if (selectedPrompt.MJTemplateEntity) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-file-code\"></i>\n                Has Template\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedPrompt.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\">{{ selectedPrompt.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Category</span>\n              <span class=\"detail-value\">{{ selectedPrompt.CategoryName || 'Uncategorized' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Type</span>\n              <span class=\"detail-value\">{{ selectedPrompt.TypeName || 'Unknown' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Response Format</span>\n              <span class=\"detail-value\">{{ selectedPrompt.ResponseFormat }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Selection Strategy</span>\n              <span class=\"detail-value\">{{ selectedPrompt.SelectionStrategy }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Power Preference</span>\n              <span class=\"detail-value\">{{ selectedPrompt.PowerPreference }}</span>\n            </div>\n            @if (selectedPrompt.MinPowerRank) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Min Power Rank</span>\n                <span class=\"detail-value\">{{ selectedPrompt.MinPowerRank }}</span>\n              </div>\n            }\n          </div>\n        </div>\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\">{{ selectedPrompt.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedPrompt.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedPrompt.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"testPrompt(selectedPrompt.ID)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Prompt\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openPromptFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</mj-page-layout>\n", styles: ["/* ============================================\n   AI Prompts Dashboard - World-Class Design\n   Clean flat-color interface with brand blue theme\n   ============================================ */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Tinted card background on the body \u2014 matches the original .prompts-content\n   surface treatment so prompt cards sit on a lightly-tinted surface. */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nas-split {\n  background: transparent;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Legacy support for non-scoped selectors */\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n/* Grid View */\n.prompts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.prompt-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.prompt-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.prompt-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card:hover::before {\n  opacity: 1;\n}\n\n.prompt-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.prompt-card.expanded::before {\n  opacity: 1;\n}\n\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-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.prompt-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.prompt-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.prompt-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.prompt-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: var(--mj-color-warning-100);\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\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-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.prompt-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.prompt-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\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.prompt-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\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.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: 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.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.prompts-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.prompts-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.prompts-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.prompts-table th {\n  padding: 16px 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.prompts-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table th:last-child {\n  cursor: default;\n}\n\n.prompts-table th:last-child:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.prompts-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.prompts-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.prompts-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.prompts-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.prompts-table th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.prompts-table th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.prompts-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.prompts-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.prompts-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.prompts-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.prompt-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.prompt-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\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 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.prompt-name-cell .prompt-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.prompt-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\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.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.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/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .prompts-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .prompt-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\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 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-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 i {\n  font-size: 13px;\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) 3%, 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-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.AITestHarnessDialogService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptManagementComponent, { className: "PromptManagementComponent", filePath: "src/AI/components/prompts/prompt-management.component.ts", lineNumber: 46 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptManagementComponent, { className: "PromptManagementComponent", filePath: "src/AI/components/prompts/prompt-management.component.ts", lineNumber: 47 }); })();
 //# sourceMappingURL=prompt-management.component.js.map