@memberjunction/ng-dashboards 3.4.0 → 4.1.0

package/dist/APIKeys/api-applications-panel.component.js

@@ -10,12 +10,12 @@ import * as i4 from "@progress/kendo-angular-inputs";
 import * as i5 from "@progress/kendo-angular-buttons";
 import * as i6 from "@memberjunction/ng-shared-generic";
 const _c0 = () => ["Include", "Exclude"];
-function APIApplicationsPanelComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 32);
+function APIApplicationsPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 1);
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 45);
+function APIApplicationsPanelComponent_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23,9 +23,9 @@ function APIApplicationsPanelComponent_ng_container_2_div_11_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.SuccessMessage, " ");
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵelement(1, "i", 47);
+function APIApplicationsPanelComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,8 +33,8 @@ function APIApplicationsPanelComponent_ng_container_2_div_12_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ErrorMessage, " ");
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -42,8 +42,8 @@ function APIApplicationsPanelComponent_ng_container_2_div_14_div_10_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", appItem_r4.application.Description, " ");
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_span_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 76);
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 67);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51,20 +51,20 @@ function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Priority: ", scope_r5.Priority, " ");
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69)(1, "div", 70);
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61)(1, "div", 62);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 71)(4, "div", 72);
+    i0.ɵɵelementStart(3, "div", 63)(4, "div", 64);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 73)(7, "code");
+    i0.ɵɵelementStart(6, "div", 65)(7, "code");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 74);
+    i0.ɵɵelementStart(9, "span", 66);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_span_11_Template, 2, 1, "span", 75);
+    i0.ɵɵconditionalCreate(11, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_For_2_Conditional_11_Template, 2, 1, "span", 67);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const scope_r5 = ctx.$implicit;
@@ -80,62 +80,63 @@ function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(scope_r5.PatternType);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", scope_r5.Priority > 0);
+    i0.ɵɵconditional(scope_r5.Priority > 0 ? 11 : -1);
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵtemplate(1, APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_div_1_Template, 12, 7, "div", 68);
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵrepeaterCreate(1, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_For_2_Template, 12, 7, "div", 61, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const appItem_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", appItem_r4.scopes);
+    i0.ɵɵrepeater(appItem_r4.scopes);
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵelement(1, "i", 78);
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No scope rules defined - all access denied by default");
     i0.ɵɵelementEnd()();
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_div_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64)(2, "h4");
+function APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58)(2, "h4");
     i0.ɵɵtext(3, "Scope Ceiling Rules");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_4_Template, 2, 1, "div", 65)(5, APIApplicationsPanelComponent_ng_container_2_div_14_div_18_div_5_Template, 4, 0, "div", 66);
+    i0.ɵɵconditionalCreate(4, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_4_Template, 3, 0, "div", 59);
+    i0.ɵɵconditionalCreate(5, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Conditional_5_Template, 4, 0, "div", 60);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const appItem_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", appItem_r4.scopes.length > 0);
+    i0.ɵɵconditional(appItem_r4.scopes.length > 0 ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", appItem_r4.scopes.length === 0);
+    i0.ɵɵconditional(appItem_r4.scopes.length === 0 ? 5 : -1);
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_14_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_2_For_14_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49)(2, "div", 50);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_ng_container_2_div_14_Template_div_click_2_listener() { const appItem_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleExpanded(appItem_r4)); });
-    i0.ɵɵelementStart(3, "div", 51);
-    i0.ɵɵelement(4, "i", 23);
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45)(2, "div", 46);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_2_For_14_Template_div_click_2_listener() { const appItem_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleExpanded(appItem_r4)); });
+    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵelement(4, "i", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 52)(6, "div", 53);
+    i0.ɵɵelementStart(5, "div", 48)(6, "div", 49);
     i0.ɵɵtext(7);
-    i0.ɵɵelementStart(8, "span", 54);
+    i0.ɵɵelementStart(8, "span", 50);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, APIApplicationsPanelComponent_ng_container_2_div_14_div_10_Template, 2, 1, "div", 55);
+    i0.ɵɵconditionalCreate(10, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_10_Template, 2, 1, "div", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 56)(12, "div", 57);
-    i0.ɵɵelement(13, "i", 28);
+    i0.ɵɵelementStart(11, "div", 52)(12, "div", 53);
+    i0.ɵɵelement(13, "i", 27);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(15, "i", 58);
+    i0.ɵɵelement(15, "i", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "button", 59);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_ng_container_2_div_14_Template_button_click_16_listener($event) { const appItem_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openEditPanel(appItem_r4); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(17, "i", 60);
+    i0.ɵɵelementStart(16, "button", 55);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_2_For_14_Template_button_click_16_listener($event) { const appItem_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openEditPanel(appItem_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(17, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(18, APIApplicationsPanelComponent_ng_container_2_div_14_div_18_Template, 6, 2, "div", 61);
+    i0.ɵɵconditionalCreate(18, APIApplicationsPanelComponent_Conditional_2_For_14_Conditional_18_Template, 6, 2, "div", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const appItem_r4 = ctx.$implicit;
@@ -147,17 +148,17 @@ function APIApplicationsPanelComponent_ng_container_2_div_14_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", appItem_r4.application.IsActive ? "Active" : "Inactive", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", appItem_r4.application.Description);
+    i0.ɵɵconditional(appItem_r4.application.Description ? 10 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", appItem_r4.scopeCount, " scopes ");
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-down", !appItem_r4.expanded)("fa-chevron-up", appItem_r4.expanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", appItem_r4.expanded);
+    i0.ɵɵconditional(appItem_r4.expanded ? 18 : -1);
 } }
-function APIApplicationsPanelComponent_ng_container_2_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "i", 23);
+function APIApplicationsPanelComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 22);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No applications configured");
     i0.ɵɵelementEnd();
@@ -165,75 +166,75 @@ function APIApplicationsPanelComponent_ng_container_2_div_15_Template(rf, ctx) {
     i0.ɵɵtext(5, "Create an application to define scope ceilings for API key access");
     i0.ɵɵelementEnd()();
 } }
-function APIApplicationsPanelComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 33)(2, "div", 34)(3, "h3", 35);
-    i0.ɵɵelement(4, "i", 23);
-    i0.ɵɵtext(5, " API Applications ");
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 32)(2, "h3", 33);
+    i0.ɵɵelement(3, "i", 22);
+    i0.ɵɵtext(4, " API Applications ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 36);
-    i0.ɵɵtext(7, "Manage applications and their default scope permissions");
+    i0.ɵɵelementStart(5, "p", 34);
+    i0.ɵɵtext(6, "Manage applications and their default scope permissions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 37);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_ng_container_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreatePanel()); });
-    i0.ɵɵelement(9, "i", 38);
-    i0.ɵɵtext(10, " New Application ");
+    i0.ɵɵelementStart(7, "button", 35);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreatePanel()); });
+    i0.ɵɵelement(8, "i", 36);
+    i0.ɵɵtext(9, " New Application ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, APIApplicationsPanelComponent_ng_container_2_div_11_Template, 3, 1, "div", 39)(12, APIApplicationsPanelComponent_ng_container_2_div_12_Template, 3, 1, "div", 40);
-    i0.ɵɵelementStart(13, "div", 41);
-    i0.ɵɵtemplate(14, APIApplicationsPanelComponent_ng_container_2_div_14_Template, 19, 17, "div", 42)(15, APIApplicationsPanelComponent_ng_container_2_div_15_Template, 6, 0, "div", 43);
+    i0.ɵɵconditionalCreate(10, APIApplicationsPanelComponent_Conditional_2_Conditional_10_Template, 3, 1, "div", 37);
+    i0.ɵɵconditionalCreate(11, APIApplicationsPanelComponent_Conditional_2_Conditional_11_Template, 3, 1, "div", 38);
+    i0.ɵɵelementStart(12, "div", 39);
+    i0.ɵɵrepeaterCreate(13, APIApplicationsPanelComponent_Conditional_2_For_14_Template, 19, 17, "div", 40, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(15, APIApplicationsPanelComponent_Conditional_2_Conditional_15_Template, 6, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(11);
-    i0.ɵɵproperty("ngIf", ctx_r1.SuccessMessage);
+    i0.ɵɵadvance(10);
+    i0.ɵɵconditional(ctx_r1.SuccessMessage ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ErrorMessage);
+    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 11 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.Applications);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.Applications.length === 0);
+    i0.ɵɵrepeater(ctx_r1.Applications);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.Applications.length === 0 ? 15 : -1);
 } }
-function APIApplicationsPanelComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 80);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_div_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
     i0.ɵɵelementEnd();
 } }
-function APIApplicationsPanelComponent_mj_loading_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 81);
+function APIApplicationsPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 19);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIApplicationsPanelComponent_span_33_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵtext(2, " Create Application ");
     i0.ɵɵelementEnd();
 } }
-function APIApplicationsPanelComponent_div_57_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_57_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 11)(2, "div", 12)(3, "label");
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 10)(2, "div", 11)(3, "label");
     i0.ɵɵtext(4, "Application Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "input", 13);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_57_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditName, $event) || (ctx_r1.EditName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(5, "input", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_57_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditName, $event) || (ctx_r1.EditName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 12)(7, "label");
+    i0.ɵɵelementStart(6, "div", 11)(7, "label");
     i0.ɵɵtext(8, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "textarea", 14);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_57_Template_textarea_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(9, "textarea", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_57_Template_textarea_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 12)(11, "label", 15)(12, "input", 16);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_57_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditIsActive, $event) || (ctx_r1.EditIsActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(10, "div", 11)(11, "label", 14)(12, "input", 15);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_57_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditIsActive, $event) || (ctx_r1.EditIsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "div")(14, "span");
     i0.ɵɵtext(15, "Active");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 17);
+    i0.ɵɵelementStart(16, "span", 16);
     i0.ɵɵtext(17, "Inactive applications cannot be used with API keys");
     i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
@@ -246,8 +247,8 @@ function APIApplicationsPanelComponent_div_57_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditIsActive);
 } }
-function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 109);
+function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 90);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -255,9 +256,9 @@ function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_span_6_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", selection_r11.scope.Description, " ");
 } }
-function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 110)(1, "span", 111);
-    i0.ɵɵelement(2, "i", 112);
+function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91)(1, "span", 93);
+    i0.ɵɵelement(2, "i", 94);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -269,13 +270,13 @@ function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_7_Template(
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", selection_r11.pattern || "*", " ");
 } }
-function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_8_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113)(1, "input", 114);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_8_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r12); const selection_r11 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.pattern, $event) || (selection_r11.pattern = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 92)(1, "input", 95);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_8_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r12); const selection_r11 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.pattern, $event) || (selection_r11.pattern = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "kendo-dropdownlist", 115);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_8_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r12); const selection_r11 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.patternType, $event) || (selection_r11.patternType = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(2, "kendo-dropdownlist", 96);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_8_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r12); const selection_r11 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.patternType, $event) || (selection_r11.patternType = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const selection_r11 = i0.ɵɵnextContext().$implicit;
@@ -285,18 +286,19 @@ function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_8_Template(
     i0.ɵɵtwoWayProperty("ngModel", selection_r11.patternType);
     i0.ɵɵproperty("data", i0.ɵɵpureFunction0(4, _c0))("valuePrimitive", true);
 } }
-function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101)(1, "label", 102)(2, "input", 103);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_Template_input_ngModelChange_2_listener($event) { const selection_r11 = i0.ɵɵrestoreView(_r10).$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.selected, $event) || (selection_r11.selected = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r10); const category_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updateCategoryState(category_r9)); });
+    i0.ɵɵelementStart(0, "div", 85)(1, "label", 86)(2, "input", 87);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Template_input_ngModelChange_2_listener($event) { const selection_r11 = i0.ɵɵrestoreView(_r10).$implicit; i0.ɵɵtwoWayBindingSet(selection_r11.selected, $event) || (selection_r11.selected = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r10); const category_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updateCategoryState(category_r9)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "span", 105);
+    i0.ɵɵelementStart(3, "div", 88)(4, "span", 89);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_span_6_Template, 2, 1, "span", 106);
+    i0.ɵɵconditionalCreate(6, APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_6_Template, 2, 1, "span", 90);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_7_Template, 4, 9, "div", 107)(8, APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_div_8_Template, 3, 5, "div", 108);
+    i0.ɵɵconditionalCreate(7, APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_7_Template, 4, 9, "div", 91);
+    i0.ɵɵconditionalCreate(8, APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Conditional_8_Template, 3, 5, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const selection_r11 = ctx.$implicit;
@@ -306,44 +308,44 @@ function APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_Template(rf, ct
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(selection_r11.displayName || "(unnamed scope)");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", selection_r11.scope.Description);
+    i0.ɵɵconditional(selection_r11.scope.Description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", selection_r11.selected);
+    i0.ɵɵconditional(selection_r11.selected ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", selection_r11.selected);
+    i0.ɵɵconditional(selection_r11.selected ? 8 : -1);
 } }
-function APIApplicationsPanelComponent_div_58_div_6_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99);
-    i0.ɵɵtemplate(1, APIApplicationsPanelComponent_div_58_div_6_div_14_div_1_Template, 9, 7, "div", 100);
+function APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵrepeaterCreate(1, APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_For_2_Template, 9, 7, "div", 84, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", category_r9.scopes);
+    i0.ɵɵrepeater(category_r9.scopes);
 } }
-function APIApplicationsPanelComponent_div_58_div_6_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_58_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_div_58_div_6_Template_div_click_1_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleScopeCategory(category_r9)); });
-    i0.ɵɵelementStart(2, "div", 91);
+    i0.ɵɵelementStart(0, "div", 73)(1, "div", 75);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_58_For_7_Template_div_click_1_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleScopeCategory(category_r9)); });
+    i0.ɵɵelementStart(2, "div", 76);
     i0.ɵɵelement(3, "i");
-    i0.ɵɵelementStart(4, "span", 92);
+    i0.ɵɵelementStart(4, "span", 77);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 93);
+    i0.ɵɵelementStart(6, "span", 78);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 94)(9, "label", 95);
-    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_div_58_div_6_Template_label_click_9_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(10, "input", 96);
-    i0.ɵɵlistener("change", function APIApplicationsPanelComponent_div_58_div_6_Template_input_change_10_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r9)); });
+    i0.ɵɵelementStart(8, "div", 79)(9, "label", 80);
+    i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Conditional_58_For_7_Template_label_click_9_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(10, "input", 81);
+    i0.ɵɵlistener("change", function APIApplicationsPanelComponent_Conditional_58_For_7_Template_input_change_10_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r9)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "All");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(13, "i", 97);
+    i0.ɵɵelement(13, "i", 82);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(14, APIApplicationsPanelComponent_div_58_div_6_div_14_Template, 2, 1, "div", 98);
+    i0.ɵɵconditionalCreate(14, APIApplicationsPanelComponent_Conditional_58_For_7_Conditional_14_Template, 3, 0, "div", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r9 = ctx.$implicit;
@@ -360,39 +362,40 @@ function APIApplicationsPanelComponent_div_58_div_6_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("fa-chevron-down", !category_r9.expanded)("fa-chevron-up", category_r9.expanded);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", category_r9.expanded);
+    i0.ɵɵconditional(category_r9.expanded ? 14 : -1);
 } }
-function APIApplicationsPanelComponent_div_58_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 116);
-    i0.ɵɵelement(1, "i", 78);
+function APIApplicationsPanelComponent_Conditional_58_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No scopes available");
     i0.ɵɵelementEnd()();
 } }
-function APIApplicationsPanelComponent_div_58_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85);
-    i0.ɵɵelement(2, "i", 27);
+function APIApplicationsPanelComponent_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 71);
+    i0.ɵɵelement(2, "i", 26);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Define the maximum permissions this application can grant to API keys.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 86);
-    i0.ɵɵtemplate(6, APIApplicationsPanelComponent_div_58_div_6_Template, 15, 13, "div", 87)(7, APIApplicationsPanelComponent_div_58_div_7_Template, 4, 0, "div", 88);
+    i0.ɵɵelementStart(5, "div", 72);
+    i0.ɵɵrepeaterCreate(6, APIApplicationsPanelComponent_Conditional_58_For_7_Template, 15, 13, "div", 73, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(8, APIApplicationsPanelComponent_Conditional_58_Conditional_8_Template, 4, 0, "div", 74);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngForOf", ctx_r1.ScopeCategories);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ScopeCategories.length === 0);
+    i0.ɵɵrepeater(ctx_r1.ScopeCategories);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ScopeCategories.length === 0 ? 8 : -1);
 } }
-function APIApplicationsPanelComponent_mj_loading_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 81);
+function APIApplicationsPanelComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 19);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIApplicationsPanelComponent_span_62_Template(rf, ctx) { if (rf & 1) {
+function APIApplicationsPanelComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵtext(2, " Save Changes ");
     i0.ɵɵelementEnd();
 } }
@@ -400,10 +403,6 @@ const PANEL_WIDTH_SETTING_KEY = 'APIKeys.ApplicationsPanelWidth';
 const DEFAULT_PANEL_WIDTH = 570;
 const MIN_PANEL_WIDTH = 400;
 const MAX_PANEL_WIDTH = 800;
-/** Tree shaking prevention function */
-export function LoadAPIApplicationsPanel() {
-    // This function prevents tree shaking
-}
 /**
  * API Applications Panel Component
  * Manages API Applications and their scope assignments
@@ -910,94 +909,99 @@ export class APIApplicationsPanelComponent {
     }
     static ɵfac = function APIApplicationsPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIApplicationsPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIApplicationsPanelComponent, selectors: [["mj-api-applications-panel"]], hostBindings: function APIApplicationsPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mousemove", function APIApplicationsPanelComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, false, i0.ɵɵresolveDocument)("mouseup", function APIApplicationsPanelComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, false, i0.ɵɵresolveDocument);
-        } }, outputs: { ApplicationUpdated: "ApplicationUpdated" }, decls: 65, vars: 36, consts: [[1, "applications-panel"], ["text", "Loading applications...", 4, "ngIf"], [4, "ngIf"], ["class", "slideout-backdrop", 3, "click", 4, "ngIf"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-plus-circle"], ["title", "Close", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "slideout-content"], [1, "form-section"], [1, "form-field"], ["kendoTextBox", "", "placeholder", "e.g., MJAPI, MCP Server, Portal", 1, "form-input", 3, "ngModelChange", "ngModel"], ["kendoTextArea", "", "placeholder", "Describe the application's purpose...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [1, "checkbox-hint"], [1, "slideout-footer"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], ["kendoButton", "", 3, "click"], [1, "slideout-resize-handle", 3, "mousedown"], [1, "fa-solid", "fa-cube"], [1, "status-pill"], [1, "slideout-tabs"], [1, "slideout-tab", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-shield-halved"], [1, "tab-badge"], ["class", "tab-panel", 4, "ngIf"], ["class", "tab-panel scopes-panel", 4, "ngIf"], ["text", "Loading applications..."], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "panel-subtitle"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], ["class", "message success", 4, "ngIf"], ["class", "message error", 4, "ngIf"], [1, "applications-grid"], ["class", "app-card", 3, "inactive", "expanded", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "message", "success"], [1, "fa-solid", "fa-check-circle"], [1, "message", "error"], [1, "fa-solid", "fa-circle-exclamation"], [1, "app-card"], [1, "app-header"], [1, "app-header-main", 3, "click"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "status-badge"], ["class", "app-description", 4, "ngIf"], [1, "app-stats"], [1, "scope-count"], [1, "fa-solid", "expand-icon"], ["title", "Edit Application", 1, "app-edit-btn", 3, "click"], [1, "fa-solid", "fa-pencil"], ["class", "app-details", 4, "ngIf"], [1, "app-description"], [1, "app-details"], [1, "details-section"], ["class", "scope-rules", 4, "ngIf"], ["class", "empty-scopes", 4, "ngIf"], [1, "scope-rules"], ["class", "scope-rule", 4, "ngFor", "ngForOf"], [1, "scope-rule"], [1, "rule-icon", 3, "ngClass"], [1, "rule-info"], [1, "rule-scope"], [1, "rule-pattern"], [1, "pattern-type"], ["class", "priority", 4, "ngIf"], [1, "priority"], [1, "empty-scopes"], [1, "fa-solid", "fa-shield-xmark"], [1, "empty-state"], [1, "slideout-backdrop", 3, "click"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-save"], [1, "tab-panel"], [1, "tab-panel", "scopes-panel"], [1, "scopes-intro"], [1, "scope-categories-list"], ["class", "scope-category-card", 4, "ngFor", "ngForOf"], ["class", "empty-scopes-message", 4, "ngIf"], [1, "scope-category-card"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-count-badge"], [1, "category-right"], [1, "category-all-toggle", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "fa-solid", "category-chevron"], ["class", "category-scopes-list", 4, "ngIf"], [1, "category-scopes-list"], ["class", "scope-row", 3, "selected", 4, "ngFor", "ngForOf"], [1, "scope-row"], [1, "scope-select"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel"], [1, "scope-label"], [1, "scope-path"], ["class", "scope-description", 4, "ngIf"], ["class", "scope-pattern-display", 4, "ngIf"], ["class", "scope-pattern-config", 4, "ngIf"], [1, "scope-description"], [1, "scope-pattern-display"], [1, "pattern-tag"], [1, "fa-solid"], [1, "scope-pattern-config"], ["kendoTextBox", "", "placeholder", "*", "title", "Resource Pattern", 1, "pattern-field", 3, "ngModelChange", "ngModel"], ["title", "Pattern Type", 1, "type-field", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "empty-scopes-message"]], template: function APIApplicationsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousemove", function APIApplicationsPanelComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function APIApplicationsPanelComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, i0.ɵɵresolveDocument);
+        } }, outputs: { ApplicationUpdated: "ApplicationUpdated" }, standalone: false, decls: 65, vars: 36, consts: [[1, "applications-panel"], ["text", "Loading applications..."], [1, "slideout-backdrop"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-plus-circle"], ["title", "Close", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "slideout-content"], [1, "form-section"], [1, "form-field"], ["kendoTextBox", "", "placeholder", "e.g., MJAPI, MCP Server, Portal", 1, "form-input", 3, "ngModelChange", "ngModel"], ["kendoTextArea", "", "placeholder", "Describe the application's purpose...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [1, "checkbox-hint"], [1, "slideout-footer"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText"], ["kendoButton", "", 3, "click"], [1, "slideout-resize-handle", 3, "mousedown"], [1, "fa-solid", "fa-cube"], [1, "status-pill"], [1, "slideout-tabs"], [1, "slideout-tab", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-shield-halved"], [1, "tab-badge"], [1, "tab-panel"], [1, "tab-panel", "scopes-panel"], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "panel-subtitle"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "message", "success"], [1, "message", "error"], [1, "applications-grid"], [1, "app-card", 3, "inactive", "expanded"], [1, "empty-state"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-circle-exclamation"], [1, "app-card"], [1, "app-header"], [1, "app-header-main", 3, "click"], [1, "app-icon"], [1, "app-info"], [1, "app-name"], [1, "status-badge"], [1, "app-description"], [1, "app-stats"], [1, "scope-count"], [1, "fa-solid", "expand-icon"], ["title", "Edit Application", 1, "app-edit-btn", 3, "click"], [1, "fa-solid", "fa-pencil"], [1, "app-details"], [1, "details-section"], [1, "scope-rules"], [1, "empty-scopes"], [1, "scope-rule"], [1, "rule-icon", 3, "ngClass"], [1, "rule-info"], [1, "rule-scope"], [1, "rule-pattern"], [1, "pattern-type"], [1, "priority"], [1, "fa-solid", "fa-shield-xmark"], [1, "slideout-backdrop", 3, "click"], [1, "fa-solid", "fa-save"], [1, "scopes-intro"], [1, "scope-categories-list"], [1, "scope-category-card"], [1, "empty-scopes-message"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-count-badge"], [1, "category-right"], [1, "category-all-toggle", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "fa-solid", "category-chevron"], [1, "category-scopes-list"], [1, "scope-row", 3, "selected"], [1, "scope-row"], [1, "scope-select"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel"], [1, "scope-label"], [1, "scope-path"], [1, "scope-description"], [1, "scope-pattern-display"], [1, "scope-pattern-config"], [1, "pattern-tag"], [1, "fa-solid"], ["kendoTextBox", "", "placeholder", "*", "title", "Resource Pattern", 1, "pattern-field", 3, "ngModelChange", "ngModel"], ["title", "Pattern Type", 1, "type-field", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"]], template: function APIApplicationsPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, APIApplicationsPanelComponent_mj_loading_1_Template, 1, 0, "mj-loading", 1)(2, APIApplicationsPanelComponent_ng_container_2_Template, 16, 4, "ng-container", 2)(3, APIApplicationsPanelComponent_div_3_Template, 1, 0, "div", 3);
-            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div", 6);
-            i0.ɵɵelement(7, "i", 7);
+            i0.ɵɵconditionalCreate(1, APIApplicationsPanelComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
+            i0.ɵɵconditionalCreate(2, APIApplicationsPanelComponent_Conditional_2_Template, 16, 3);
+            i0.ɵɵconditionalCreate(3, APIApplicationsPanelComponent_Conditional_3_Template, 1, 0, "div", 2);
+            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4)(6, "div", 5);
+            i0.ɵɵelement(7, "i", 6);
             i0.ɵɵelementStart(8, "span");
             i0.ɵɵtext(9, "New Application");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(10, "button", 8);
+            i0.ɵɵelementStart(10, "button", 7);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_10_listener() { return ctx.closePanel(); });
-            i0.ɵɵelement(11, "i", 9);
+            i0.ɵɵelement(11, "i", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 10)(13, "div", 11)(14, "div", 12)(15, "label");
+            i0.ɵɵelementStart(12, "div", 9)(13, "div", 10)(14, "div", 11)(15, "label");
             i0.ɵɵtext(16, "Application Name *");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "input", 13);
+            i0.ɵɵelementStart(17, "input", 12);
             i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Template_input_ngModelChange_17_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.EditName, $event) || (ctx.EditName = $event); return $event; });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(18, "div", 12)(19, "label");
+            i0.ɵɵelementStart(18, "div", 11)(19, "label");
             i0.ɵɵtext(20, "Description");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "textarea", 14);
+            i0.ɵɵelementStart(21, "textarea", 13);
             i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Template_textarea_ngModelChange_21_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.EditDescription, $event) || (ctx.EditDescription = $event); return $event; });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 12)(23, "label", 15)(24, "input", 16);
+            i0.ɵɵelementStart(22, "div", 11)(23, "label", 14)(24, "input", 15);
             i0.ɵɵtwoWayListener("ngModelChange", function APIApplicationsPanelComponent_Template_input_ngModelChange_24_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.EditIsActive, $event) || (ctx.EditIsActive = $event); return $event; });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(25, "div")(26, "span");
             i0.ɵɵtext(27, "Active");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "span", 17);
+            i0.ɵɵelementStart(28, "span", 16);
             i0.ɵɵtext(29, "Inactive applications cannot be used with API keys");
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(30, "div", 18)(31, "button", 19);
+            i0.ɵɵelementStart(30, "div", 17)(31, "button", 18);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_31_listener() { return ctx.saveApplication(); });
-            i0.ɵɵtemplate(32, APIApplicationsPanelComponent_mj_loading_32_Template, 1, 1, "mj-loading", 20)(33, APIApplicationsPanelComponent_span_33_Template, 3, 0, "span", 2);
+            i0.ɵɵconditionalCreate(32, APIApplicationsPanelComponent_Conditional_32_Template, 1, 1, "mj-loading", 19);
+            i0.ɵɵconditionalCreate(33, APIApplicationsPanelComponent_Conditional_33_Template, 3, 0, "span");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "button", 21);
+            i0.ɵɵelementStart(34, "button", 20);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_34_listener() { return ctx.closePanel(); });
             i0.ɵɵtext(35, "Cancel");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(36, "div", 4)(37, "div", 22);
+            i0.ɵɵelementStart(36, "div", 3)(37, "div", 21);
             i0.ɵɵlistener("mousedown", function APIApplicationsPanelComponent_Template_div_mousedown_37_listener($event) { return ctx.startResize($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 5)(39, "div", 6);
-            i0.ɵɵelement(40, "i", 23);
+            i0.ɵɵelementStart(38, "div", 4)(39, "div", 5);
+            i0.ɵɵelement(40, "i", 22);
             i0.ɵɵelementStart(41, "span");
             i0.ɵɵtext(42);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "span", 24);
+            i0.ɵɵelementStart(43, "span", 23);
             i0.ɵɵtext(44);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(45, "button", 8);
+            i0.ɵɵelementStart(45, "button", 7);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_45_listener() { return ctx.closePanel(); });
-            i0.ɵɵelement(46, "i", 9);
+            i0.ɵɵelement(46, "i", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(47, "div", 25)(48, "button", 26);
+            i0.ɵɵelementStart(47, "div", 24)(48, "button", 25);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_48_listener() { return ctx.EditTab = "details"; });
-            i0.ɵɵelement(49, "i", 27);
+            i0.ɵɵelement(49, "i", 26);
             i0.ɵɵtext(50, " Details ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(51, "button", 26);
+            i0.ɵɵelementStart(51, "button", 25);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_51_listener() { return ctx.EditTab = "scopes"; });
-            i0.ɵɵelement(52, "i", 28);
+            i0.ɵɵelement(52, "i", 27);
             i0.ɵɵtext(53, " Scopes ");
-            i0.ɵɵelementStart(54, "span", 29);
+            i0.ɵɵelementStart(54, "span", 28);
             i0.ɵɵtext(55);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(56, "div", 10);
-            i0.ɵɵtemplate(57, APIApplicationsPanelComponent_div_57_Template, 18, 4, "div", 30)(58, APIApplicationsPanelComponent_div_58_Template, 8, 2, "div", 31);
+            i0.ɵɵelementStart(56, "div", 9);
+            i0.ɵɵconditionalCreate(57, APIApplicationsPanelComponent_Conditional_57_Template, 18, 4, "div", 29);
+            i0.ɵɵconditionalCreate(58, APIApplicationsPanelComponent_Conditional_58_Template, 9, 1, "div", 30);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(59, "div", 18)(60, "button", 19);
+            i0.ɵɵelementStart(59, "div", 17)(60, "button", 18);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_60_listener() { return ctx.saveAll(); });
-            i0.ɵɵtemplate(61, APIApplicationsPanelComponent_mj_loading_61_Template, 1, 1, "mj-loading", 20)(62, APIApplicationsPanelComponent_span_62_Template, 3, 0, "span", 2);
+            i0.ɵɵconditionalCreate(61, APIApplicationsPanelComponent_Conditional_61_Template, 1, 1, "mj-loading", 19);
+            i0.ɵɵconditionalCreate(62, APIApplicationsPanelComponent_Conditional_62_Template, 3, 0, "span");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(63, "button", 21);
+            i0.ɵɵelementStart(63, "button", 20);
             i0.ɵɵlistener("click", function APIApplicationsPanelComponent_Template_button_click_63_listener() { return ctx.closePanel(); });
             i0.ɵɵtext(64, "Cancel");
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("panel-open", ctx.ShowEditPanel || ctx.ShowCreatePanel);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading);
+            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.ShowEditPanel || ctx.ShowCreatePanel);
+            i0.ɵɵconditional(ctx.ShowEditPanel || ctx.ShowCreatePanel ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("open", ctx.ShowCreatePanel);
             i0.ɵɵadvance(13);
@@ -1010,9 +1014,9 @@ export class APIApplicationsPanelComponent {
             i0.ɵɵadvance(7);
             i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.EditName.trim() || ctx.IsSaving);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsSaving);
+            i0.ɵɵconditional(ctx.IsSaving ? 32 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsSaving);
+            i0.ɵɵconditional(!ctx.IsSaving ? 33 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("width", ctx.PanelWidth, "px");
             i0.ɵɵclassProp("open", ctx.ShowEditPanel);
@@ -1031,20 +1035,20 @@ export class APIApplicationsPanelComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.getSelectedScopeCount());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.EditTab === "details");
+            i0.ɵɵconditional(ctx.EditTab === "details" ? 57 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.EditTab === "scopes");
+            i0.ɵɵconditional(ctx.EditTab === "scopes" ? 58 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.EditName.trim() || ctx.IsSaving);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsSaving);
+            i0.ɵɵconditional(ctx.IsSaving ? 61 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsSaving);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextAreaDirective, i4.TextBoxDirective, i4.CheckBoxDirective, i5.ButtonComponent, i6.LoadingComponent], styles: [".applications-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.applications-panel.panel-open[_ngcontent-%COMP%] {\n    overflow: hidden;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.btn-create[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n\n\n.applications-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.app-card[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.app-card.inactive[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.app-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    gap: 12px;\n}\n\n.app-header-main[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    border-radius: 8px;\n    padding: 4px;\n    margin: -4px;\n}\n\n.app-header-main[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.app-edit-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.app-edit-btn[_ngcontent-%COMP%]:hover {\n    background: #8b5cf6;\n    border-color: #8b5cf6;\n    color: white;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border-radius: 10px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: white;\n}\n\n.app-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.app-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-left: 16px;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.scope-count[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n}\n\n\n\n.app-details[_ngcontent-%COMP%] {\n    padding: 0 20px 20px 20px;\n    border-top: 1px solid var(--border-color, #e5e7eb);\n    margin-top: 0;\n}\n\n.details-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.details-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 12px 0;\n}\n\n.scope-rules[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-rule[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.rule-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.rule-icon.pattern-include[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.rule-icon.pattern-exclude[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.rule-icon.pattern-deny[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.rule-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.rule-scope[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.rule-pattern[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    flex-wrap: wrap;\n}\n\n.rule-pattern[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    background: var(--tag-background, #e5e7eb);\n    padding: 2px 6px;\n    border-radius: 4px;\n    color: var(--text-primary, #1f2937);\n}\n\n.pattern-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.priority[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #8b5cf6;\n}\n\n.empty-scopes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.empty-scopes[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 570px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    transform: translateX(100%);\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 6px;\n    height: 100%;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    transition: background 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover, \n.slideout-resize-handle.resizing[_ngcontent-%COMP%] {\n    background: rgba(139, 92, 246, 0.3);\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2px;\n    height: 40px;\n    background: #d1d5db;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover::after {\n    opacity: 1;\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: #f3f4f6;\n    color: #6b7280;\n    flex-shrink: 0;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: #9ca3af;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #374151;\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n    background: #8b5cf6;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active)   .tab-badge[_ngcontent-%COMP%] {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.scopes-panel[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within {\n    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary {\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n.scopes-intro[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border: 1px solid #bfdbfe;\n    border-radius: 10px;\n    font-size: 13px;\n    color: #1e40af;\n    margin-bottom: 16px;\n    line-height: 1.4;\n}\n\n.scopes-intro[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #3b82f6;\n    font-size: 14px;\n    flex-shrink: 0;\n    margin-top: 1px;\n}\n\n.scope-categories-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-header[_ngcontent-%COMP%]:hover {\n    background: #f9fafb;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.category-count-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-chevron[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 11px;\n}\n\n.category-scopes-list[_ngcontent-%COMP%] {\n    border-top: 1px solid #e5e7eb;\n    padding: 8px;\n    max-height: 280px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-radius: 8px;\n    background: #f9fafb;\n    transition: all 0.2s ease;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.scope-row.selected[_ngcontent-%COMP%] {\n    background: #ede9fe;\n    border: 1px solid #c4b5fd;\n}\n\n.scope-select[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-select[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-path[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2937;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    word-break: break-word;\n}\n\n.scope-description[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    color: #6b7280;\n    margin-top: 2px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.scope-pattern-display[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n    font-size: 11px;\n    color: #6b7280;\n}\n\n.pattern-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    background: #f3f4f6;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: #374151;\n}\n\n.pattern-tag.include[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.pattern-tag.exclude[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.pattern-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.scope-pattern-config[_ngcontent-%COMP%] {\n    display: none;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover   .scope-pattern-config[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%]   .scope-pattern-config[_ngcontent-%COMP%] {\n    display: flex;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover   .scope-pattern-display[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%]   .scope-pattern-display[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.pattern-field[_ngcontent-%COMP%] {\n    width: 60px;\n}\n\n[_nghost-%COMP%]     .pattern-field .k-input {\n    padding: 3px 6px;\n    font-size: 11px;\n    border-radius: 4px;\n    height: 26px;\n}\n\n.type-field[_ngcontent-%COMP%] {\n    width: 75px;\n}\n\n[_nghost-%COMP%]     .type-field .k-dropdownlist {\n    font-size: 11px;\n    height: 26px;\n}\n\n[_nghost-%COMP%]     .type-field .k-input-inner {\n    padding: 2px 6px;\n    font-size: 11px;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n\n"] });
+            i0.ɵɵconditional(!ctx.IsSaving ? 62 : -1);
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxDirective, i4.TextAreaDirective, i4.CheckBoxDirective, i5.ButtonComponent, i6.LoadingComponent], styles: [".applications-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.applications-panel.panel-open[_ngcontent-%COMP%] {\n    overflow: hidden;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.btn-create[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n\n\n.applications-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.app-card[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.app-card.inactive[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.app-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    gap: 12px;\n}\n\n.app-header-main[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    border-radius: 8px;\n    padding: 4px;\n    margin: -4px;\n}\n\n.app-header-main[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.app-edit-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.app-edit-btn[_ngcontent-%COMP%]:hover {\n    background: #8b5cf6;\n    border-color: #8b5cf6;\n    color: white;\n}\n\n.app-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border-radius: 10px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: white;\n}\n\n.app-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.app-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-left: 16px;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.scope-count[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n}\n\n\n\n.app-details[_ngcontent-%COMP%] {\n    padding: 0 20px 20px 20px;\n    border-top: 1px solid var(--border-color, #e5e7eb);\n    margin-top: 0;\n}\n\n.details-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.details-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 12px 0;\n}\n\n.scope-rules[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-rule[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.rule-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.rule-icon.pattern-include[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.rule-icon.pattern-exclude[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.rule-icon.pattern-deny[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.rule-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.rule-scope[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.rule-pattern[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    flex-wrap: wrap;\n}\n\n.rule-pattern[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    background: var(--tag-background, #e5e7eb);\n    padding: 2px 6px;\n    border-radius: 4px;\n    color: var(--text-primary, #1f2937);\n}\n\n.pattern-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.priority[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #8b5cf6;\n}\n\n.empty-scopes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.empty-scopes[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 570px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    transform: translateX(100%);\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 6px;\n    height: 100%;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    transition: background 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover, \n.slideout-resize-handle.resizing[_ngcontent-%COMP%] {\n    background: rgba(139, 92, 246, 0.3);\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2px;\n    height: 40px;\n    background: #d1d5db;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover::after {\n    opacity: 1;\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #8b5cf6;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: #f3f4f6;\n    color: #6b7280;\n    flex-shrink: 0;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: #9ca3af;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #374151;\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n    background: #8b5cf6;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active)   .tab-badge[_ngcontent-%COMP%] {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.scopes-panel[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within {\n    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary {\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n.scopes-intro[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border: 1px solid #bfdbfe;\n    border-radius: 10px;\n    font-size: 13px;\n    color: #1e40af;\n    margin-bottom: 16px;\n    line-height: 1.4;\n}\n\n.scopes-intro[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #3b82f6;\n    font-size: 14px;\n    flex-shrink: 0;\n    margin-top: 1px;\n}\n\n.scope-categories-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-header[_ngcontent-%COMP%]:hover {\n    background: #f9fafb;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.category-count-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%]   .category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-chevron[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 11px;\n}\n\n.category-scopes-list[_ngcontent-%COMP%] {\n    border-top: 1px solid #e5e7eb;\n    padding: 8px;\n    max-height: 280px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-radius: 8px;\n    background: #f9fafb;\n    transition: all 0.2s ease;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.scope-row.selected[_ngcontent-%COMP%] {\n    background: #ede9fe;\n    border: 1px solid #c4b5fd;\n}\n\n.scope-select[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-select[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-path[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2937;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    word-break: break-word;\n}\n\n.scope-description[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    color: #6b7280;\n    margin-top: 2px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.scope-pattern-display[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n    font-size: 11px;\n    color: #6b7280;\n}\n\n.pattern-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    background: #f3f4f6;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: #374151;\n}\n\n.pattern-tag.include[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.pattern-tag.exclude[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.pattern-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.scope-pattern-config[_ngcontent-%COMP%] {\n    display: none;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover   .scope-pattern-config[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%]   .scope-pattern-config[_ngcontent-%COMP%] {\n    display: flex;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover   .scope-pattern-display[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%]   .scope-pattern-display[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.pattern-field[_ngcontent-%COMP%] {\n    width: 60px;\n}\n\n[_nghost-%COMP%]     .pattern-field .k-input {\n    padding: 3px 6px;\n    font-size: 11px;\n    border-radius: 4px;\n    height: 26px;\n}\n\n.type-field[_ngcontent-%COMP%] {\n    width: 75px;\n}\n\n[_nghost-%COMP%]     .type-field .k-dropdownlist {\n    font-size: 11px;\n    height: 26px;\n}\n\n[_nghost-%COMP%]     .type-field .k-input-inner {\n    padding: 2px 6px;\n    font-size: 11px;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n\n"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIApplicationsPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-applications-panel', template: "<div class=\"applications-panel\" [class.panel-open]=\"ShowEditPanel || ShowCreatePanel\">\n    <mj-loading *ngIf=\"IsLoading\" text=\"Loading applications...\"></mj-loading>\n\n    <ng-container *ngIf=\"!IsLoading\">\n        <!-- Header -->\n        <div class=\"panel-header\">\n            <div class=\"header-left\">\n                <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-cube\"></i>\n                    API Applications\n                </h3>\n                <p class=\"panel-subtitle\">Manage applications and their default scope permissions</p>\n            </div>\n            <button class=\"btn-create\" (click)=\"openCreatePanel()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                New Application\n            </button>\n        </div>\n\n        <!-- Messages -->\n        <div class=\"message success\" *ngIf=\"SuccessMessage\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{SuccessMessage}}\n        </div>\n        <div class=\"message error\" *ngIf=\"ErrorMessage\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{ErrorMessage}}\n        </div>\n\n        <!-- Applications Grid -->\n        <div class=\"applications-grid\">\n            <div class=\"app-card\" *ngFor=\"let appItem of Applications\"\n                 [class.inactive]=\"!appItem.application.IsActive\"\n                 [class.expanded]=\"appItem.expanded\">\n                <div class=\"app-header\">\n                    <div class=\"app-header-main\" (click)=\"toggleExpanded(appItem)\">\n                        <div class=\"app-icon\">\n                            <i class=\"fa-solid fa-cube\"></i>\n                        </div>\n                        <div class=\"app-info\">\n                            <div class=\"app-name\">\n                                {{appItem.application.Name}}\n                                <span class=\"status-badge\" [class.active]=\"appItem.application.IsActive\"\n                                      [class.inactive]=\"!appItem.application.IsActive\">\n                                    {{appItem.application.IsActive ? 'Active' : 'Inactive'}}\n                                </span>\n                            </div>\n                            <div class=\"app-description\" *ngIf=\"appItem.application.Description\">\n                                {{appItem.application.Description}}\n                            </div>\n                        </div>\n                        <div class=\"app-stats\">\n                            <div class=\"scope-count\">\n                                <i class=\"fa-solid fa-shield-halved\"></i>\n                                {{appItem.scopeCount}} scopes\n                            </div>\n                            <i class=\"fa-solid expand-icon\"\n                               [class.fa-chevron-down]=\"!appItem.expanded\"\n                               [class.fa-chevron-up]=\"appItem.expanded\"></i>\n                        </div>\n                    </div>\n                    <button class=\"app-edit-btn\" (click)=\"openEditPanel(appItem); $event.stopPropagation()\" title=\"Edit Application\">\n                        <i class=\"fa-solid fa-pencil\"></i>\n                    </button>\n                </div>\n\n                <!-- Expanded Content -->\n                <div class=\"app-details\" *ngIf=\"appItem.expanded\">\n                    <div class=\"details-section\">\n                        <h4>Scope Ceiling Rules</h4>\n                        <div class=\"scope-rules\" *ngIf=\"appItem.scopes.length > 0\">\n                            <div class=\"scope-rule\" *ngFor=\"let scope of appItem.scopes\">\n                                <div class=\"rule-icon\" [ngClass]=\"getPatternClass(scope.PatternType, scope.IsDeny)\">\n                                    <i [class]=\"getPatternIcon(scope.PatternType, scope.IsDeny)\"></i>\n                                </div>\n                                <div class=\"rule-info\">\n                                    <div class=\"rule-scope\">{{getScopeName(scope.ScopeID)}}</div>\n                                    <div class=\"rule-pattern\">\n                                        <code>{{scope.ResourcePattern}}</code>\n                                        <span class=\"pattern-type\">{{scope.PatternType}}</span>\n                                        <span class=\"priority\" *ngIf=\"scope.Priority > 0\">\n                                            Priority: {{scope.Priority}}\n                                        </span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"empty-scopes\" *ngIf=\"appItem.scopes.length === 0\">\n                            <i class=\"fa-solid fa-shield-xmark\"></i>\n                            <span>No scope rules defined - all access denied by default</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Empty State -->\n            <div class=\"empty-state\" *ngIf=\"Applications.length === 0\">\n                <i class=\"fa-solid fa-cube\"></i>\n                <span>No applications configured</span>\n                <p>Create an application to define scope ceilings for API key access</p>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- Slide-out Backdrop -->\n    <div class=\"slideout-backdrop\" *ngIf=\"ShowEditPanel || ShowCreatePanel\" (click)=\"closePanel()\"></div>\n\n    <!-- Create Panel (Slide-out) -->\n    <div class=\"slideout-panel\" [class.open]=\"ShowCreatePanel\">\n        <div class=\"slideout-header\">\n            <div class=\"slideout-title\">\n                <i class=\"fa-solid fa-plus-circle\"></i>\n                <span>New Application</span>\n            </div>\n            <button class=\"slideout-close\" (click)=\"closePanel()\" title=\"Close\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </div>\n\n        <div class=\"slideout-content\">\n            <div class=\"form-section\">\n                <div class=\"form-field\">\n                    <label>Application Name *</label>\n                    <input kendoTextBox [(ngModel)]=\"EditName\"\n                           placeholder=\"e.g., MJAPI, MCP Server, Portal\"\n                           class=\"form-input\" />\n                </div>\n\n                <div class=\"form-field\">\n                    <label>Description</label>\n                    <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                              placeholder=\"Describe the application's purpose...\"\n                              [rows]=\"3\"\n                              class=\"form-textarea\"></textarea>\n                </div>\n\n                <div class=\"form-field\">\n                    <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n                        <div>\n                            <span>Active</span>\n                            <span class=\"checkbox-hint\">Inactive applications cannot be used with API keys</span>\n                        </div>\n                    </label>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"slideout-footer\">\n            <button kendoButton [themeColor]=\"'primary'\"\n                    [disabled]=\"!EditName.trim() || IsSaving\"\n                    (click)=\"saveApplication()\">\n                <mj-loading *ngIf=\"IsSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n                <span *ngIf=\"!IsSaving\">\n                    <i class=\"fa-solid fa-save\"></i>\n                    Create Application\n                </span>\n            </button>\n            <button kendoButton (click)=\"closePanel()\">Cancel</button>\n        </div>\n    </div>\n\n    <!-- Edit Panel (Slide-out) -->\n    <div class=\"slideout-panel\" [class.open]=\"ShowEditPanel\" [style.width.px]=\"PanelWidth\">\n        <!-- Resize Handle -->\n        <div class=\"slideout-resize-handle\"\n             [class.resizing]=\"IsResizing\"\n             (mousedown)=\"startResize($event)\"></div>\n        <div class=\"slideout-header\">\n            <div class=\"slideout-title\">\n                <i class=\"fa-solid fa-cube\"></i>\n                <span>{{EditingApplication?.Name}}</span>\n                <span class=\"status-pill\" [class.active]=\"EditIsActive\">\n                    {{EditIsActive ? 'Active' : 'Inactive'}}\n                </span>\n            </div>\n            <button class=\"slideout-close\" (click)=\"closePanel()\" title=\"Close\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </div>\n\n        <!-- Tab Bar -->\n        <div class=\"slideout-tabs\">\n            <button class=\"slideout-tab\" [class.active]=\"EditTab === 'details'\"\n                    (click)=\"EditTab = 'details'\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                Details\n            </button>\n            <button class=\"slideout-tab\" [class.active]=\"EditTab === 'scopes'\"\n                    (click)=\"EditTab = 'scopes'\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                Scopes\n                <span class=\"tab-badge\">{{getSelectedScopeCount()}}</span>\n            </button>\n        </div>\n\n        <div class=\"slideout-content\">\n            <!-- Details Tab -->\n            <div class=\"tab-panel\" *ngIf=\"EditTab === 'details'\">\n                <div class=\"form-section\">\n                    <div class=\"form-field\">\n                        <label>Application Name *</label>\n                        <input kendoTextBox [(ngModel)]=\"EditName\"\n                               placeholder=\"e.g., MJAPI, MCP Server, Portal\"\n                               class=\"form-input\" />\n                    </div>\n\n                    <div class=\"form-field\">\n                        <label>Description</label>\n                        <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                                  placeholder=\"Describe the application's purpose...\"\n                                  [rows]=\"4\"\n                                  class=\"form-textarea\"></textarea>\n                    </div>\n\n                    <div class=\"form-field\">\n                        <label class=\"checkbox-label\">\n                            <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n                            <div>\n                                <span>Active</span>\n                                <span class=\"checkbox-hint\">Inactive applications cannot be used with API keys</span>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Scopes Tab -->\n            <div class=\"tab-panel scopes-panel\" *ngIf=\"EditTab === 'scopes'\">\n                <div class=\"scopes-intro\">\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    <span>Define the maximum permissions this application can grant to API keys.</span>\n                </div>\n\n                <div class=\"scope-categories-list\">\n                    <div class=\"scope-category-card\" *ngFor=\"let category of ScopeCategories\">\n                        <div class=\"category-header\" (click)=\"toggleScopeCategory(category)\">\n                            <div class=\"category-left\">\n                                <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                                <span class=\"category-name\">{{category.name}}</span>\n                                <span class=\"category-count-badge\">\n                                    {{getCategorySelectedCount(category)}}/{{category.scopes.length}}\n                                </span>\n                            </div>\n                            <div class=\"category-right\">\n                                <label class=\"category-all-toggle\" (click)=\"$event.stopPropagation()\">\n                                    <input type=\"checkbox\" kendoCheckBox\n                                           [checked]=\"category.allSelected\"\n                                           (change)=\"toggleCategoryAll(category)\" />\n                                    <span>All</span>\n                                </label>\n                                <i class=\"fa-solid category-chevron\"\n                                   [class.fa-chevron-down]=\"!category.expanded\"\n                                   [class.fa-chevron-up]=\"category.expanded\"></i>\n                            </div>\n                        </div>\n\n                        <div class=\"category-scopes-list\" *ngIf=\"category.expanded\">\n                            <div class=\"scope-row\" *ngFor=\"let selection of category.scopes\"\n                                 [class.selected]=\"selection.selected\">\n                                <label class=\"scope-select\">\n                                    <input type=\"checkbox\" kendoCheckBox\n                                           [(ngModel)]=\"selection.selected\"\n                                           (change)=\"updateCategoryState(category)\" />\n                                    <div class=\"scope-label\">\n                                        <span class=\"scope-path\">{{selection.displayName || '(unnamed scope)'}}</span>\n                                        <span class=\"scope-description\" *ngIf=\"selection.scope.Description\">\n                                            {{selection.scope.Description}}\n                                        </span>\n                                    </div>\n                                </label>\n\n                                <!-- Read-only pattern display -->\n                                <div class=\"scope-pattern-display\" *ngIf=\"selection.selected\">\n                                    <span class=\"pattern-tag\" [class.include]=\"selection.patternType === 'Include'\"\n                                          [class.exclude]=\"selection.patternType === 'Exclude'\">\n                                        <i class=\"fa-solid\" [class.fa-check]=\"selection.patternType === 'Include'\"\n                                           [class.fa-minus]=\"selection.patternType === 'Exclude'\"></i>\n                                        {{selection.pattern || '*'}}\n                                    </span>\n                                </div>\n                                <!-- Editable pattern config - shown on hover -->\n                                <div class=\"scope-pattern-config\" *ngIf=\"selection.selected\">\n                                    <input kendoTextBox [(ngModel)]=\"selection.pattern\"\n                                           placeholder=\"*\"\n                                           class=\"pattern-field\"\n                                           title=\"Resource Pattern\" />\n                                    <kendo-dropdownlist [(ngModel)]=\"selection.patternType\"\n                                                        [data]=\"['Include', 'Exclude']\"\n                                                        [valuePrimitive]=\"true\"\n                                                        class=\"type-field\"\n                                                        title=\"Pattern Type\">\n                                    </kendo-dropdownlist>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"empty-scopes-message\" *ngIf=\"ScopeCategories.length === 0\">\n                        <i class=\"fa-solid fa-shield-xmark\"></i>\n                        <span>No scopes available</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"slideout-footer\">\n            <button kendoButton [themeColor]=\"'primary'\"\n                    [disabled]=\"!EditName.trim() || IsSaving\"\n                    (click)=\"saveAll()\">\n                <mj-loading *ngIf=\"IsSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n                <span *ngIf=\"!IsSaving\">\n                    <i class=\"fa-solid fa-save\"></i>\n                    Save Changes\n                </span>\n            </button>\n            <button kendoButton (click)=\"closePanel()\">Cancel</button>\n        </div>\n    </div>\n</div>\n", styles: [".applications-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.applications-panel.panel-open {\n    overflow: hidden;\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left {\n    flex: 1;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title i {\n    color: #8b5cf6;\n}\n\n.panel-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.btn-create {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n/* Applications Grid */\n.applications-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.app-card {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n}\n\n.app-card:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.app-card.inactive {\n    opacity: 0.7;\n}\n\n.app-header {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    gap: 12px;\n}\n\n.app-header-main {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    border-radius: 8px;\n    padding: 4px;\n    margin: -4px;\n}\n\n.app-header-main:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.app-edit-btn {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.app-edit-btn:hover {\n    background: #8b5cf6;\n    border-color: #8b5cf6;\n    color: white;\n}\n\n.app-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border-radius: 10px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.app-icon i {\n    font-size: 20px;\n    color: white;\n}\n\n.app-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.app-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.status-badge {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-badge.active {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.status-badge.inactive {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.app-description {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.app-stats {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-left: 16px;\n}\n\n.scope-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.scope-count i {\n    color: #8b5cf6;\n}\n\n.expand-icon {\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n}\n\n/* Expanded Details */\n.app-details {\n    padding: 0 20px 20px 20px;\n    border-top: 1px solid var(--border-color, #e5e7eb);\n    margin-top: 0;\n}\n\n.details-section {\n    margin-top: 16px;\n}\n\n.details-section h4 {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 12px 0;\n}\n\n.scope-rules {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-rule {\n    display: flex;\n    align-items: flex-start;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.rule-icon {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.rule-icon.pattern-include {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.rule-icon.pattern-exclude {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.rule-icon.pattern-deny {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.rule-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.rule-scope {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.rule-pattern {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    flex-wrap: wrap;\n}\n\n.rule-pattern code {\n    font-family: monospace;\n    font-size: 12px;\n    background: var(--tag-background, #e5e7eb);\n    padding: 2px 6px;\n    border-radius: 4px;\n    color: var(--text-primary, #1f2937);\n}\n\n.pattern-type {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.priority {\n    font-size: 11px;\n    color: #8b5cf6;\n}\n\n.empty-scopes {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.empty-scopes i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* Legacy .details-actions removed - buttons now in header */\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 570px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    transform: translateX(100%);\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Resize handle */\n.slideout-resize-handle {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 6px;\n    height: 100%;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    transition: background 0.2s ease;\n}\n\n.slideout-resize-handle:hover,\n.slideout-resize-handle.resizing {\n    background: rgba(139, 92, 246, 0.3);\n}\n\n.slideout-resize-handle::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2px;\n    height: 40px;\n    background: #d1d5db;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle:hover::after {\n    opacity: 1;\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: #8b5cf6;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-title span:first-of-type {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.status-pill {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: #f3f4f6;\n    color: #6b7280;\n    flex-shrink: 0;\n}\n\n.status-pill.active {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: #9ca3af;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #374151;\n}\n\n/* Panel Tabs */\n.slideout-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.slideout-tab:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active {\n    background: #8b5cf6;\n    color: white;\n}\n\n.slideout-tab i {\n    font-size: 14px;\n}\n\n.tab-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.slideout-tab:not(.active) .tab-badge {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n.tab-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.scopes-panel {\n    height: 100%;\n}\n\n/* Form Section */\n.form-section {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n/* Form Fields */\n.form-field {\n    margin-bottom: 20px;\n}\n\n.form-field:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input {\n    width: 100%;\n}\n\n.form-textarea {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within {\n    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Slideout Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary {\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label span:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Legacy dialog-actions removed - now using slideout-footer */\n\n/* ========================================\n   Scopes Panel - Slide-out Layout\n   ======================================== */\n\n.scopes-intro {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border: 1px solid #bfdbfe;\n    border-radius: 10px;\n    font-size: 13px;\n    color: #1e40af;\n    margin-bottom: 16px;\n    line-height: 1.4;\n}\n\n.scopes-intro i {\n    color: #3b82f6;\n    font-size: 14px;\n    flex-shrink: 0;\n    margin-top: 1px;\n}\n\n.scope-categories-list {\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.scope-category-card {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.scope-category-card .category-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.scope-category-card .category-header:hover {\n    background: #f9fafb;\n}\n\n.scope-category-card .category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.scope-category-card .category-left i {\n    font-size: 14px;\n}\n\n.scope-category-card .category-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.category-count-badge {\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.scope-category-card .category-right {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n.category-all-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-chevron {\n    color: #9ca3af;\n    font-size: 11px;\n}\n\n.category-scopes-list {\n    border-top: 1px solid #e5e7eb;\n    padding: 8px;\n    max-height: 280px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-radius: 8px;\n    background: #f9fafb;\n    transition: all 0.2s ease;\n}\n\n.scope-row:hover {\n    background: #f3f4f6;\n}\n\n.scope-row.selected {\n    background: #ede9fe;\n    border: 1px solid #c4b5fd;\n}\n\n.scope-select {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-select input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.scope-label {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-path {\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2937;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    word-break: break-word;\n}\n\n.scope-description {\n    display: block;\n    font-size: 11px;\n    color: #6b7280;\n    margin-top: 2px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Pattern config for selected scopes - read-only display */\n.scope-pattern-display {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n    font-size: 11px;\n    color: #6b7280;\n}\n\n.pattern-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    background: #f3f4f6;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: #374151;\n}\n\n.pattern-tag.include {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.pattern-tag.exclude {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.pattern-tag i {\n    font-size: 10px;\n}\n\n/* Editable pattern config - shown on hover/edit */\n.scope-pattern-config {\n    display: none;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n}\n\n.scope-row:hover .scope-pattern-config,\n.scope-row.editing .scope-pattern-config {\n    display: flex;\n}\n\n.scope-row:hover .scope-pattern-display,\n.scope-row.editing .scope-pattern-display {\n    display: none;\n}\n\n.pattern-field {\n    width: 60px;\n}\n\n:host ::ng-deep .pattern-field .k-input {\n    padding: 3px 6px;\n    font-size: 11px;\n    border-radius: 4px;\n    height: 26px;\n}\n\n.type-field {\n    width: 75px;\n}\n\n:host ::ng-deep .type-field .k-dropdownlist {\n    font-size: 11px;\n    height: 26px;\n}\n\n:host ::ng-deep .type-field .k-input-inner {\n    padding: 2px 6px;\n    font-size: 11px;\n}\n\n.empty-scopes-message {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-scopes-message i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n/* Legacy dialog styles removed - now using slide-out panels */\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-applications-panel', template: "<div class=\"applications-panel\" [class.panel-open]=\"ShowEditPanel || ShowCreatePanel\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading applications...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <h3 class=\"panel-title\">\n          <i class=\"fa-solid fa-cube\"></i>\n          API Applications\n        </h3>\n        <p class=\"panel-subtitle\">Manage applications and their default scope permissions</p>\n      </div>\n      <button class=\"btn-create\" (click)=\"openCreatePanel()\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Application\n      </button>\n    </div>\n    <!-- Messages -->\n    @if (SuccessMessage) {\n      <div class=\"message success\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        {{SuccessMessage}}\n      </div>\n    }\n    @if (ErrorMessage) {\n      <div class=\"message error\">\n        <i class=\"fa-solid fa-circle-exclamation\"></i>\n        {{ErrorMessage}}\n      </div>\n    }\n    <!-- Applications Grid -->\n    <div class=\"applications-grid\">\n      @for (appItem of Applications; track appItem) {\n        <div class=\"app-card\"\n          [class.inactive]=\"!appItem.application.IsActive\"\n          [class.expanded]=\"appItem.expanded\">\n          <div class=\"app-header\">\n            <div class=\"app-header-main\" (click)=\"toggleExpanded(appItem)\">\n              <div class=\"app-icon\">\n                <i class=\"fa-solid fa-cube\"></i>\n              </div>\n              <div class=\"app-info\">\n                <div class=\"app-name\">\n                  {{appItem.application.Name}}\n                  <span class=\"status-badge\" [class.active]=\"appItem.application.IsActive\"\n                    [class.inactive]=\"!appItem.application.IsActive\">\n                    {{appItem.application.IsActive ? 'Active' : 'Inactive'}}\n                  </span>\n                </div>\n                @if (appItem.application.Description) {\n                  <div class=\"app-description\">\n                    {{appItem.application.Description}}\n                  </div>\n                }\n              </div>\n              <div class=\"app-stats\">\n                <div class=\"scope-count\">\n                  <i class=\"fa-solid fa-shield-halved\"></i>\n                  {{appItem.scopeCount}} scopes\n                </div>\n                <i class=\"fa-solid expand-icon\"\n                  [class.fa-chevron-down]=\"!appItem.expanded\"\n                [class.fa-chevron-up]=\"appItem.expanded\"></i>\n              </div>\n            </div>\n            <button class=\"app-edit-btn\" (click)=\"openEditPanel(appItem); $event.stopPropagation()\" title=\"Edit Application\">\n              <i class=\"fa-solid fa-pencil\"></i>\n            </button>\n          </div>\n          <!-- Expanded Content -->\n          @if (appItem.expanded) {\n            <div class=\"app-details\">\n              <div class=\"details-section\">\n                <h4>Scope Ceiling Rules</h4>\n                @if (appItem.scopes.length > 0) {\n                  <div class=\"scope-rules\">\n                    @for (scope of appItem.scopes; track scope) {\n                      <div class=\"scope-rule\">\n                        <div class=\"rule-icon\" [ngClass]=\"getPatternClass(scope.PatternType, scope.IsDeny)\">\n                          <i [class]=\"getPatternIcon(scope.PatternType, scope.IsDeny)\"></i>\n                        </div>\n                        <div class=\"rule-info\">\n                          <div class=\"rule-scope\">{{getScopeName(scope.ScopeID)}}</div>\n                          <div class=\"rule-pattern\">\n                            <code>{{scope.ResourcePattern}}</code>\n                            <span class=\"pattern-type\">{{scope.PatternType}}</span>\n                            @if (scope.Priority > 0) {\n                              <span class=\"priority\">\n                                Priority: {{scope.Priority}}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (appItem.scopes.length === 0) {\n                  <div class=\"empty-scopes\">\n                    <i class=\"fa-solid fa-shield-xmark\"></i>\n                    <span>No scope rules defined - all access denied by default</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <!-- Empty State -->\n      @if (Applications.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-cube\"></i>\n          <span>No applications configured</span>\n          <p>Create an application to define scope ceilings for API key access</p>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Slide-out Backdrop -->\n  @if (ShowEditPanel || ShowCreatePanel) {\n    <div class=\"slideout-backdrop\" (click)=\"closePanel()\"></div>\n  }\n\n  <!-- Create Panel (Slide-out) -->\n  <div class=\"slideout-panel\" [class.open]=\"ShowCreatePanel\">\n    <div class=\"slideout-header\">\n      <div class=\"slideout-title\">\n        <i class=\"fa-solid fa-plus-circle\"></i>\n        <span>New Application</span>\n      </div>\n      <button class=\"slideout-close\" (click)=\"closePanel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"slideout-content\">\n      <div class=\"form-section\">\n        <div class=\"form-field\">\n          <label>Application Name *</label>\n          <input kendoTextBox [(ngModel)]=\"EditName\"\n            placeholder=\"e.g., MJAPI, MCP Server, Portal\"\n            class=\"form-input\" />\n        </div>\n\n        <div class=\"form-field\">\n          <label>Description</label>\n          <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n            placeholder=\"Describe the application's purpose...\"\n            [rows]=\"3\"\n          class=\"form-textarea\"></textarea>\n        </div>\n\n        <div class=\"form-field\">\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n            <div>\n              <span>Active</span>\n              <span class=\"checkbox-hint\">Inactive applications cannot be used with API keys</span>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"slideout-footer\">\n      <button kendoButton [themeColor]=\"'primary'\"\n        [disabled]=\"!EditName.trim() || IsSaving\"\n        (click)=\"saveApplication()\">\n        @if (IsSaving) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsSaving) {\n          <span>\n            <i class=\"fa-solid fa-save\"></i>\n            Create Application\n          </span>\n        }\n      </button>\n      <button kendoButton (click)=\"closePanel()\">Cancel</button>\n    </div>\n  </div>\n\n  <!-- Edit Panel (Slide-out) -->\n  <div class=\"slideout-panel\" [class.open]=\"ShowEditPanel\" [style.width.px]=\"PanelWidth\">\n    <!-- Resize Handle -->\n    <div class=\"slideout-resize-handle\"\n      [class.resizing]=\"IsResizing\"\n    (mousedown)=\"startResize($event)\"></div>\n    <div class=\"slideout-header\">\n      <div class=\"slideout-title\">\n        <i class=\"fa-solid fa-cube\"></i>\n        <span>{{EditingApplication?.Name}}</span>\n        <span class=\"status-pill\" [class.active]=\"EditIsActive\">\n          {{EditIsActive ? 'Active' : 'Inactive'}}\n        </span>\n      </div>\n      <button class=\"slideout-close\" (click)=\"closePanel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Tab Bar -->\n    <div class=\"slideout-tabs\">\n      <button class=\"slideout-tab\" [class.active]=\"EditTab === 'details'\"\n        (click)=\"EditTab = 'details'\">\n        <i class=\"fa-solid fa-info-circle\"></i>\n        Details\n      </button>\n      <button class=\"slideout-tab\" [class.active]=\"EditTab === 'scopes'\"\n        (click)=\"EditTab = 'scopes'\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n        Scopes\n        <span class=\"tab-badge\">{{getSelectedScopeCount()}}</span>\n      </button>\n    </div>\n\n    <div class=\"slideout-content\">\n      <!-- Details Tab -->\n      @if (EditTab === 'details') {\n        <div class=\"tab-panel\">\n          <div class=\"form-section\">\n            <div class=\"form-field\">\n              <label>Application Name *</label>\n              <input kendoTextBox [(ngModel)]=\"EditName\"\n                placeholder=\"e.g., MJAPI, MCP Server, Portal\"\n                class=\"form-input\" />\n            </div>\n            <div class=\"form-field\">\n              <label>Description</label>\n              <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                placeholder=\"Describe the application's purpose...\"\n                [rows]=\"4\"\n              class=\"form-textarea\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <label class=\"checkbox-label\">\n                <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n                <div>\n                  <span>Active</span>\n                  <span class=\"checkbox-hint\">Inactive applications cannot be used with API keys</span>\n                </div>\n              </label>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Scopes Tab -->\n      @if (EditTab === 'scopes') {\n        <div class=\"tab-panel scopes-panel\">\n          <div class=\"scopes-intro\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Define the maximum permissions this application can grant to API keys.</span>\n          </div>\n          <div class=\"scope-categories-list\">\n            @for (category of ScopeCategories; track category) {\n              <div class=\"scope-category-card\">\n                <div class=\"category-header\" (click)=\"toggleScopeCategory(category)\">\n                  <div class=\"category-left\">\n                    <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                    <span class=\"category-name\">{{category.name}}</span>\n                    <span class=\"category-count-badge\">\n                      {{getCategorySelectedCount(category)}}/{{category.scopes.length}}\n                    </span>\n                  </div>\n                  <div class=\"category-right\">\n                    <label class=\"category-all-toggle\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" kendoCheckBox\n                        [checked]=\"category.allSelected\"\n                        (change)=\"toggleCategoryAll(category)\" />\n                      <span>All</span>\n                    </label>\n                    <i class=\"fa-solid category-chevron\"\n                      [class.fa-chevron-down]=\"!category.expanded\"\n                    [class.fa-chevron-up]=\"category.expanded\"></i>\n                  </div>\n                </div>\n                @if (category.expanded) {\n                  <div class=\"category-scopes-list\">\n                    @for (selection of category.scopes; track selection) {\n                      <div class=\"scope-row\"\n                        [class.selected]=\"selection.selected\">\n                        <label class=\"scope-select\">\n                          <input type=\"checkbox\" kendoCheckBox\n                            [(ngModel)]=\"selection.selected\"\n                            (change)=\"updateCategoryState(category)\" />\n                          <div class=\"scope-label\">\n                            <span class=\"scope-path\">{{selection.displayName || '(unnamed scope)'}}</span>\n                            @if (selection.scope.Description) {\n                              <span class=\"scope-description\">\n                                {{selection.scope.Description}}\n                              </span>\n                            }\n                          </div>\n                        </label>\n                        <!-- Read-only pattern display -->\n                        @if (selection.selected) {\n                          <div class=\"scope-pattern-display\">\n                            <span class=\"pattern-tag\" [class.include]=\"selection.patternType === 'Include'\"\n                              [class.exclude]=\"selection.patternType === 'Exclude'\">\n                              <i class=\"fa-solid\" [class.fa-check]=\"selection.patternType === 'Include'\"\n                              [class.fa-minus]=\"selection.patternType === 'Exclude'\"></i>\n                              {{selection.pattern || '*'}}\n                            </span>\n                          </div>\n                        }\n                        <!-- Editable pattern config - shown on hover -->\n                        @if (selection.selected) {\n                          <div class=\"scope-pattern-config\">\n                            <input kendoTextBox [(ngModel)]=\"selection.pattern\"\n                              placeholder=\"*\"\n                              class=\"pattern-field\"\n                              title=\"Resource Pattern\" />\n                            <kendo-dropdownlist [(ngModel)]=\"selection.patternType\"\n                              [data]=\"['Include', 'Exclude']\"\n                              [valuePrimitive]=\"true\"\n                              class=\"type-field\"\n                              title=\"Pattern Type\">\n                            </kendo-dropdownlist>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (ScopeCategories.length === 0) {\n              <div class=\"empty-scopes-message\">\n                <i class=\"fa-solid fa-shield-xmark\"></i>\n                <span>No scopes available</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"slideout-footer\">\n      <button kendoButton [themeColor]=\"'primary'\"\n        [disabled]=\"!EditName.trim() || IsSaving\"\n        (click)=\"saveAll()\">\n        @if (IsSaving) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsSaving) {\n          <span>\n            <i class=\"fa-solid fa-save\"></i>\n            Save Changes\n          </span>\n        }\n      </button>\n      <button kendoButton (click)=\"closePanel()\">Cancel</button>\n    </div>\n  </div>\n</div>\n", styles: [".applications-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.applications-panel.panel-open {\n    overflow: hidden;\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left {\n    flex: 1;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title i {\n    color: #8b5cf6;\n}\n\n.panel-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.btn-create {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n/* Applications Grid */\n.applications-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.app-card {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n}\n\n.app-card:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.app-card.inactive {\n    opacity: 0.7;\n}\n\n.app-header {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    gap: 12px;\n}\n\n.app-header-main {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    border-radius: 8px;\n    padding: 4px;\n    margin: -4px;\n}\n\n.app-header-main:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.app-edit-btn {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.app-edit-btn:hover {\n    background: #8b5cf6;\n    border-color: #8b5cf6;\n    color: white;\n}\n\n.app-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border-radius: 10px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.app-icon i {\n    font-size: 20px;\n    color: white;\n}\n\n.app-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.app-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.status-badge {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.status-badge.active {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.status-badge.inactive {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.app-description {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.app-stats {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-left: 16px;\n}\n\n.scope-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.scope-count i {\n    color: #8b5cf6;\n}\n\n.expand-icon {\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n}\n\n/* Expanded Details */\n.app-details {\n    padding: 0 20px 20px 20px;\n    border-top: 1px solid var(--border-color, #e5e7eb);\n    margin-top: 0;\n}\n\n.details-section {\n    margin-top: 16px;\n}\n\n.details-section h4 {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 12px 0;\n}\n\n.scope-rules {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-rule {\n    display: flex;\n    align-items: flex-start;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.rule-icon {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.rule-icon.pattern-include {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.rule-icon.pattern-exclude {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.rule-icon.pattern-deny {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.rule-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.rule-scope {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.rule-pattern {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    flex-wrap: wrap;\n}\n\n.rule-pattern code {\n    font-family: monospace;\n    font-size: 12px;\n    background: var(--tag-background, #e5e7eb);\n    padding: 2px 6px;\n    border-radius: 4px;\n    color: var(--text-primary, #1f2937);\n}\n\n.pattern-type {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.priority {\n    font-size: 11px;\n    color: #8b5cf6;\n}\n\n.empty-scopes {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n}\n\n.empty-scopes i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* Legacy .details-actions removed - buttons now in header */\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 570px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    transform: translateX(100%);\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Resize handle */\n.slideout-resize-handle {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 6px;\n    height: 100%;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    transition: background 0.2s ease;\n}\n\n.slideout-resize-handle:hover,\n.slideout-resize-handle.resizing {\n    background: rgba(139, 92, 246, 0.3);\n}\n\n.slideout-resize-handle::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2px;\n    height: 40px;\n    background: #d1d5db;\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle:hover::after {\n    opacity: 1;\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: #8b5cf6;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-title span:first-of-type {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.status-pill {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: #f3f4f6;\n    color: #6b7280;\n    flex-shrink: 0;\n}\n\n.status-pill.active {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: #9ca3af;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #374151;\n}\n\n/* Panel Tabs */\n.slideout-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.slideout-tab:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active {\n    background: #8b5cf6;\n    color: white;\n}\n\n.slideout-tab i {\n    font-size: 14px;\n}\n\n.tab-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.slideout-tab:not(.active) .tab-badge {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n.tab-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.scopes-panel {\n    height: 100%;\n}\n\n/* Form Section */\n.form-section {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n/* Form Fields */\n.form-field {\n    margin-bottom: 20px;\n}\n\n.form-field:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input {\n    width: 100%;\n}\n\n.form-textarea {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within {\n    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Slideout Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary {\n    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label span:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Legacy dialog-actions removed - now using slideout-footer */\n\n/* ========================================\n   Scopes Panel - Slide-out Layout\n   ======================================== */\n\n.scopes-intro {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border: 1px solid #bfdbfe;\n    border-radius: 10px;\n    font-size: 13px;\n    color: #1e40af;\n    margin-bottom: 16px;\n    line-height: 1.4;\n}\n\n.scopes-intro i {\n    color: #3b82f6;\n    font-size: 14px;\n    flex-shrink: 0;\n    margin-top: 1px;\n}\n\n.scope-categories-list {\n    flex: 1;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.scope-category-card {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.scope-category-card .category-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.scope-category-card .category-header:hover {\n    background: #f9fafb;\n}\n\n.scope-category-card .category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.scope-category-card .category-left i {\n    font-size: 14px;\n}\n\n.scope-category-card .category-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.category-count-badge {\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n.scope-category-card .category-right {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n.category-all-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-chevron {\n    color: #9ca3af;\n    font-size: 11px;\n}\n\n.category-scopes-list {\n    border-top: 1px solid #e5e7eb;\n    padding: 8px;\n    max-height: 280px;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 12px;\n    border-radius: 8px;\n    background: #f9fafb;\n    transition: all 0.2s ease;\n}\n\n.scope-row:hover {\n    background: #f3f4f6;\n}\n\n.scope-row.selected {\n    background: #ede9fe;\n    border: 1px solid #c4b5fd;\n}\n\n.scope-select {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-select input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.scope-label {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-path {\n    font-size: 12px;\n    font-weight: 500;\n    color: #1f2937;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    word-break: break-word;\n}\n\n.scope-description {\n    display: block;\n    font-size: 11px;\n    color: #6b7280;\n    margin-top: 2px;\n    line-height: 1.3;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Pattern config for selected scopes - read-only display */\n.scope-pattern-display {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n    font-size: 11px;\n    color: #6b7280;\n}\n\n.pattern-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    background: #f3f4f6;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: #374151;\n}\n\n.pattern-tag.include {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.pattern-tag.exclude {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.pattern-tag i {\n    font-size: 10px;\n}\n\n/* Editable pattern config - shown on hover/edit */\n.scope-pattern-config {\n    display: none;\n    gap: 6px;\n    margin-left: auto;\n    flex-shrink: 0;\n}\n\n.scope-row:hover .scope-pattern-config,\n.scope-row.editing .scope-pattern-config {\n    display: flex;\n}\n\n.scope-row:hover .scope-pattern-display,\n.scope-row.editing .scope-pattern-display {\n    display: none;\n}\n\n.pattern-field {\n    width: 60px;\n}\n\n:host ::ng-deep .pattern-field .k-input {\n    padding: 3px 6px;\n    font-size: 11px;\n    border-radius: 4px;\n    height: 26px;\n}\n\n.type-field {\n    width: 75px;\n}\n\n:host ::ng-deep .type-field .k-dropdownlist {\n    font-size: 11px;\n    height: 26px;\n}\n\n:host ::ng-deep .type-field .k-input-inner {\n    padding: 2px 6px;\n    font-size: 11px;\n}\n\n.empty-scopes-message {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-scopes-message i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n/* Legacy dialog styles removed - now using slide-out panels */\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { ApplicationUpdated: [{
             type: Output
         }], onMouseMove: [{
@@ -1054,5 +1058,5 @@ export class APIApplicationsPanelComponent {
             type: HostListener,
             args: ['document:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIApplicationsPanelComponent, { className: "APIApplicationsPanelComponent", filePath: "src/APIKeys/api-applications-panel.component.ts", lineNumber: 54 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIApplicationsPanelComponent, { className: "APIApplicationsPanelComponent", filePath: "src/APIKeys/api-applications-panel.component.ts", lineNumber: 49 }); })();
 //# sourceMappingURL=api-applications-panel.component.js.map