@memberjunction/ng-dashboards 3.3.0 → 3.4.0

package/dist/APIKeys/api-key-create-dialog.component.js

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata } from '@memberjunction/core';
 import { GraphQLEncryptionClient } from '@memberjunction/graphql-dataprovider';
+import { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-keys-base';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -149,7 +150,7 @@ function APIKeyCreateDialogComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.Error);
 } }
 function APIKeyCreateDialogComponent_div_11_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
+    i0.ɵɵelementStart(0, "div", 53)(1, "span", 54);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " selected ");
@@ -160,10 +161,10 @@ function APIKeyCreateDialogComponent_div_11_div_7_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtextInterpolate(ctx_r1.getSelectedScopeCount());
 } }
 function APIKeyCreateDialogComponent_div_11_mj_loading_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 54);
+    i0.ɵɵelement(0, "mj-loading", 55);
 } }
 function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelementStart(0, "span", 75);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -173,14 +174,14 @@ function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_span_6_Temp
 } }
 function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69)(1, "label", 70)(2, "input", 30);
+    i0.ɵɵelementStart(0, "div", 70)(1, "label", 71)(2, "input", 30);
     i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template_input_ngModelChange_2_listener($event) { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; i0.ɵɵtwoWayBindingSet(item_r11.selected, $event) || (item_r11.selected = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("change", function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r10); const category_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateCategoryState(category_r9)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 71)(4, "span", 72);
+    i0.ɵɵelementStart(3, "div", 72)(4, "span", 73);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_span_6_Template, 2, 1, "span", 73);
+    i0.ɵɵtemplate(6, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_span_6_Template, 2, 1, "span", 74);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r11 = ctx.$implicit;
@@ -192,8 +193,8 @@ function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template(rf
     i0.ɵɵproperty("ngIf", item_r11.scope.Description);
 } }
 function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵtemplate(1, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template, 7, 3, "div", 68);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵtemplate(1, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_div_1_Template, 7, 3, "div", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r9 = i0.ɵɵnextContext().$implicit;
@@ -202,27 +203,27 @@ function APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_Template(rf, ctx)
 } }
 function APIKeyCreateDialogComponent_div_11_div_9_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
+    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_div_11_div_9_div_1_Template_div_click_1_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategory(category_r9)); });
-    i0.ɵɵelementStart(2, "div", 59);
+    i0.ɵɵelementStart(2, "div", 60);
     i0.ɵɵelement(3, "i");
-    i0.ɵɵelementStart(4, "span", 60);
+    i0.ɵɵelementStart(4, "span", 61);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 61);
+    i0.ɵɵelementStart(6, "span", 62);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 62)(9, "label", 63);
+    i0.ɵɵelementStart(8, "div", 63)(9, "label", 64);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_div_11_div_9_div_1_Template_label_click_9_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(10, "input", 64);
+    i0.ɵɵelementStart(10, "input", 65);
     i0.ɵɵlistener("change", function APIKeyCreateDialogComponent_div_11_div_9_div_1_Template_input_change_10_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r9)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "All");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(13, "i", 65);
+    i0.ɵɵelement(13, "i", 66);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(14, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_Template, 2, 1, "div", 66);
+    i0.ɵɵtemplate(14, APIKeyCreateDialogComponent_div_11_div_9_div_1_div_14_Template, 2, 1, "div", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r9 = ctx.$implicit;
@@ -241,14 +242,28 @@ function APIKeyCreateDialogComponent_div_11_div_9_div_1_Template(rf, ctx) { if (
     i0.ɵɵproperty("ngIf", category_r9.expanded);
 } }
 function APIKeyCreateDialogComponent_div_11_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵtemplate(1, APIKeyCreateDialogComponent_div_11_div_9_div_1_Template, 15, 12, "div", 56);
+    i0.ɵɵelementStart(0, "div", 56);
+    i0.ɵɵtemplate(1, APIKeyCreateDialogComponent_div_11_div_9_div_1_Template, 15, 12, "div", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.ScopeCategories);
 } }
+function APIKeyCreateDialogComponent_div_11_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "i", 77);
+    i0.ɵɵelementStart(2, "div")(3, "strong");
+    i0.ɵɵtext(4, "Warning: No permissions selected");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "API keys without any assigned scopes will have ");
+    i0.ɵɵelementStart(7, "strong");
+    i0.ɵɵtext(8, "no permissions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(9, " and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.");
+    i0.ɵɵelementEnd()()();
+} }
 function APIKeyCreateDialogComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44)(1, "div", 45)(2, "div", 46)(3, "h4");
     i0.ɵɵtext(4, "Select Permission Scopes");
@@ -267,7 +282,9 @@ function APIKeyCreateDialogComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(15, "entities:*");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(16, " for broad access within a category");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(17, APIKeyCreateDialogComponent_div_11_div_17_Template, 10, 0, "div", 52);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(7);
@@ -276,12 +293,14 @@ function APIKeyCreateDialogComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.IsLoadingScopes);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingScopes);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingScopes && ctx_r1.getSelectedScopeCount() === 0);
 } }
 function APIKeyCreateDialogComponent_div_12_div_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85)(1, "span", 86);
+    i0.ɵɵelementStart(0, "div", 87)(1, "span", 88);
     i0.ɵɵtext(2, "Description:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 87);
+    i0.ɵɵelementStart(3, "span", 89);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -291,48 +310,48 @@ function APIKeyCreateDialogComponent_div_12_div_23_Template(rf, ctx) { if (rf &
 } }
 function APIKeyCreateDialogComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 75)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 77);
+    i0.ɵɵelementStart(0, "div", 78)(1, "div", 79);
+    i0.ɵɵelement(2, "i", 80);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h3", 78);
+    i0.ɵɵelementStart(3, "h3", 81);
     i0.ɵɵtext(4, "API Key Created Successfully!");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 79)(6, "div", 80);
-    i0.ɵɵelement(7, "i", 81);
+    i0.ɵɵelementStart(5, "div", 82)(6, "div", 83);
+    i0.ɵɵelement(7, "i", 77);
     i0.ɵɵelementStart(8, "span");
     i0.ɵɵtext(9, "Copy this key now. It won't be shown again!");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 82)(11, "code");
+    i0.ɵɵelementStart(10, "div", 84)(11, "code");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 83);
+    i0.ɵɵelementStart(13, "button", 85);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_div_12_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyKey()); });
-    i0.ɵɵelement(14, "i", 65);
+    i0.ɵɵelement(14, "i", 66);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(17, "div", 84)(18, "div", 85)(19, "span", 86);
+    i0.ɵɵelementStart(17, "div", 86)(18, "div", 87)(19, "span", 88);
     i0.ɵɵtext(20, "Label:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 87);
+    i0.ɵɵelementStart(21, "span", 89);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(23, APIKeyCreateDialogComponent_div_12_div_23_Template, 5, 1, "div", 88);
-    i0.ɵɵelementStart(24, "div", 85)(25, "span", 86);
+    i0.ɵɵtemplate(23, APIKeyCreateDialogComponent_div_12_div_23_Template, 5, 1, "div", 90);
+    i0.ɵɵelementStart(24, "div", 87)(25, "span", 88);
     i0.ɵɵtext(26, "Expires:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 87);
+    i0.ɵɵelementStart(27, "span", 89);
     i0.ɵɵtext(28);
     i0.ɵɵpipe(29, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 85)(31, "span", 86);
+    i0.ɵɵelementStart(30, "div", 87)(31, "span", 88);
     i0.ɵɵtext(32, "Scopes:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "span", 87);
+    i0.ɵɵelementStart(33, "span", 89);
     i0.ɵɵtext(34);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(35, "div", 89);
-    i0.ɵɵelement(36, "i", 90);
+    i0.ɵɵelementStart(35, "div", 91);
+    i0.ɵɵelement(36, "i", 92);
     i0.ɵɵelementStart(37, "div")(38, "strong");
     i0.ɵɵtext(39, "Security Note:");
     i0.ɵɵelementEnd();
@@ -360,12 +379,12 @@ function APIKeyCreateDialogComponent_div_12_Template(rf, ctx) { if (rf & 1) {
 function APIKeyCreateDialogComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "button", 91);
+    i0.ɵɵelementStart(1, "button", 93);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_ng_container_14_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToScopes()); });
     i0.ɵɵtext(2, " Next: Permissions ");
-    i0.ɵɵelement(3, "i", 92);
+    i0.ɵɵelement(3, "i", 94);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 93);
+    i0.ɵɵelementStart(4, "button", 95);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_ng_container_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵtext(5, "Cancel");
     i0.ɵɵelementEnd();
@@ -375,7 +394,7 @@ function APIKeyCreateDialogComponent_ng_container_14_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("themeColor", "primary");
 } }
 function APIKeyCreateDialogComponent_ng_container_15_mj_loading_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 97);
+    i0.ɵɵelement(0, "mj-loading", 99);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
@@ -388,13 +407,13 @@ function APIKeyCreateDialogComponent_ng_container_15_span_3_Template(rf, ctx) {
 function APIKeyCreateDialogComponent_ng_container_15_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "button", 94);
+    i0.ɵɵelementStart(1, "button", 96);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_ng_container_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createKey()); });
-    i0.ɵɵtemplate(2, APIKeyCreateDialogComponent_ng_container_15_mj_loading_2_Template, 1, 1, "mj-loading", 95)(3, APIKeyCreateDialogComponent_ng_container_15_span_3_Template, 3, 0, "span", 12);
+    i0.ɵɵtemplate(2, APIKeyCreateDialogComponent_ng_container_15_mj_loading_2_Template, 1, 1, "mj-loading", 97)(3, APIKeyCreateDialogComponent_ng_container_15_span_3_Template, 3, 0, "span", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 93);
+    i0.ɵɵelementStart(4, "button", 95);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_ng_container_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goBack()); });
-    i0.ɵɵelement(5, "i", 96);
+    i0.ɵɵelement(5, "i", 98);
     i0.ɵɵtext(6, " Back ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -410,9 +429,9 @@ function APIKeyCreateDialogComponent_ng_container_15_Template(rf, ctx) { if (rf
 function APIKeyCreateDialogComponent_ng_container_16_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "button", 91);
+    i0.ɵɵelementStart(1, "button", 93);
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_ng_container_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵelement(2, "i", 98);
+    i0.ɵɵelement(2, "i", 100);
     i0.ɵɵtext(3, " Done ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -455,19 +474,13 @@ export class APIKeyCreateDialogComponent {
     RawApiKey = '';
     KeyCopied = false;
     Error = '';
-    // Category icons and colors
-    categoryConfig = {
-        'Entities': { icon: 'fa-solid fa-database', color: '#6366f1' },
-        'Agents': { icon: 'fa-solid fa-robot', color: '#10b981' },
-        'Admin': { icon: 'fa-solid fa-shield-halved', color: '#f59e0b' },
-        'Actions': { icon: 'fa-solid fa-bolt', color: '#8b5cf6' },
-        'Queries': { icon: 'fa-solid fa-magnifying-glass', color: '#3b82f6' },
-        'Reports': { icon: 'fa-solid fa-chart-bar', color: '#ef4444' },
-        'Communication': { icon: 'fa-solid fa-envelope', color: '#ec4899' },
-        'Other': { icon: 'fa-solid fa-ellipsis', color: '#6b7280' }
+    // Default UI config for categories without explicit configuration
+    defaultUIConfig = {
+        icon: 'fa-solid fa-ellipsis',
+        color: '#6b7280'
     };
-    async ngOnInit() {
-        await this.loadScopes();
+    ngOnInit() {
+        this.loadScopes();
     }
     /**
      * Handle escape key to close dialog
@@ -478,41 +491,53 @@ export class APIKeyCreateDialogComponent {
         }
     }
     /**
-     * Load available scopes
+     * Load available scopes from cached data.
+     * Uses UIConfig from root scopes for category icons/colors.
      */
-    async loadScopes() {
+    loadScopes() {
         this.IsLoadingScopes = true;
         try {
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'MJ: API Scopes',
-                OrderBy: 'Category, Name',
-                ResultType: 'entity_object'
-            });
-            if (result.Success) {
-                const categoryMap = new Map();
-                for (const scope of result.Results) {
-                    const category = scope.Category || 'Other';
-                    if (!categoryMap.has(category)) {
-                        categoryMap.set(category, []);
-                    }
-                    categoryMap.get(category).push({
-                        scope,
-                        selected: false
+            const base = APIKeysEngineBase.Instance;
+            const scopes = base.Scopes;
+            // Build a map of category -> root scope UIConfig
+            // Root scopes (ParentID is null) define the UI appearance for their category
+            const categoryUIConfigs = new Map();
+            for (const scope of scopes) {
+                if (!scope.ParentID) {
+                    // This is a root scope - use its UIConfig for the category
+                    const uiConfig = parseAPIScopeUIConfig(scope);
+                    categoryUIConfigs.set(scope.Category, {
+                        icon: uiConfig.icon || this.defaultUIConfig.icon,
+                        color: uiConfig.color || this.defaultUIConfig.color
                     });
                 }
-                this.ScopeCategories = Array.from(categoryMap.entries()).map(([name, scopes]) => {
-                    const config = this.categoryConfig[name] || this.categoryConfig['Other'];
-                    return {
-                        name,
-                        icon: config.icon,
-                        color: config.color,
-                        scopes,
-                        expanded: false,
-                        allSelected: false
-                    };
+            }
+            // Group scopes by category
+            const categoryMap = new Map();
+            for (const scope of scopes) {
+                const category = scope.Category || 'Other';
+                if (!categoryMap.has(category)) {
+                    categoryMap.set(category, []);
+                }
+                categoryMap.get(category).push({
+                    scope,
+                    selected: false
                 });
             }
+            // Build categories with UI config from root scopes
+            this.ScopeCategories = Array.from(categoryMap.entries())
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([name, scopeItems]) => {
+                const config = categoryUIConfigs.get(name) || this.defaultUIConfig;
+                return {
+                    name,
+                    icon: config.icon,
+                    color: config.color,
+                    scopes: scopeItems.sort((a, b) => a.scope.Name.localeCompare(b.scope.Name)),
+                    expanded: false,
+                    allSelected: false
+                };
+            });
         }
         catch (error) {
             console.error('Error loading scopes:', error);
@@ -686,7 +711,7 @@ export class APIKeyCreateDialogComponent {
     static ɵfac = function APIKeyCreateDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIKeyCreateDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIKeyCreateDialogComponent, selectors: [["mj-api-key-create-dialog"]], hostBindings: function APIKeyCreateDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function APIKeyCreateDialogComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { Visible: "Visible" }, outputs: { VisibleChange: "VisibleChange", Created: "Created", Closed: "Closed" }, decls: 17, vars: 11, consts: [["class", "slideout-backdrop", 3, "click", 4, "ngIf"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], ["class", "slideout-close", "title", "Close (Esc)", 3, "click", 4, "ngIf"], ["class", "step-indicator", 4, "ngIf"], [1, "slideout-content"], ["class", "step-panel", 4, "ngIf"], ["class", "step-panel scopes-step", 4, "ngIf"], ["class", "step-panel success-step", 4, "ngIf"], [1, "slideout-footer"], [4, "ngIf"], [1, "slideout-backdrop", 3, "click"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "step-indicator"], [1, "step"], [1, "step-number"], [1, "step-label"], [1, "step-connector"], [1, "step-panel"], [1, "form-section"], [1, "form-label", "required"], ["kendoTextBox", "", "placeholder", "e.g., ElevenLabs Integration, CI/CD Pipeline", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-hint"], [1, "form-label"], ["kendoTextArea", "", "placeholder", "Optional notes about how this key will be used...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "expiration-options"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel"], ["class", "preset-buttons", 4, "ngIf"], ["class", "custom-date", 4, "ngIf"], ["class", "expiration-preview", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "preset-buttons"], ["class", "preset-btn", 3, "active", "click", 4, "ngFor", "ngForOf"], [1, "preset-btn", 3, "click"], [1, "custom-date"], ["format", "MMM d, yyyy", "placeholder", "Select expiration date", 3, "ngModelChange", "ngModel", "min"], [1, "expiration-preview"], [1, "fa-solid", "fa-calendar-check"], [1, "error-message"], [1, "fa-solid", "fa-circle-exclamation"], [1, "step-panel", "scopes-step"], [1, "scopes-header"], [1, "scopes-info"], ["class", "scopes-count", 4, "ngIf"], ["text", "Loading scopes...", 4, "ngIf"], ["class", "scope-categories", 4, "ngIf"], [1, "scope-tip"], [1, "fa-solid", "fa-lightbulb"], [1, "scopes-count"], [1, "count"], ["text", "Loading scopes..."], [1, "scope-categories"], ["class", "scope-category", 4, "ngFor", "ngForOf"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-badge"], [1, "category-right"], [1, "select-all-label", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "fa-solid"], ["class", "category-scopes", 4, "ngIf"], [1, "category-scopes"], ["class", "scope-item", 4, "ngFor", "ngForOf"], [1, "scope-item"], [1, "scope-label"], [1, "scope-info"], [1, "scope-name"], ["class", "scope-desc", 4, "ngIf"], [1, "scope-desc"], [1, "step-panel", "success-step"], [1, "success-icon"], [1, "fa-solid", "fa-check-circle"], [1, "success-title"], [1, "key-display"], [1, "key-warning"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "key-value"], [1, "copy-btn", 3, "click"], [1, "key-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["class", "detail-row", 4, "ngIf"], [1, "security-note"], [1, "fa-solid", "fa-shield-check"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-arrow-right"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], [1, "fa-solid", "fa-arrow-left"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-check"]], template: function APIKeyCreateDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Visible: "Visible" }, outputs: { VisibleChange: "VisibleChange", Created: "Created", Closed: "Closed" }, decls: 17, vars: 11, consts: [["class", "slideout-backdrop", 3, "click", 4, "ngIf"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], ["class", "slideout-close", "title", "Close (Esc)", 3, "click", 4, "ngIf"], ["class", "step-indicator", 4, "ngIf"], [1, "slideout-content"], ["class", "step-panel", 4, "ngIf"], ["class", "step-panel scopes-step", 4, "ngIf"], ["class", "step-panel success-step", 4, "ngIf"], [1, "slideout-footer"], [4, "ngIf"], [1, "slideout-backdrop", 3, "click"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "step-indicator"], [1, "step"], [1, "step-number"], [1, "step-label"], [1, "step-connector"], [1, "step-panel"], [1, "form-section"], [1, "form-label", "required"], ["kendoTextBox", "", "placeholder", "e.g., ElevenLabs Integration, CI/CD Pipeline", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-hint"], [1, "form-label"], ["kendoTextArea", "", "placeholder", "Optional notes about how this key will be used...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "expiration-options"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel"], ["class", "preset-buttons", 4, "ngIf"], ["class", "custom-date", 4, "ngIf"], ["class", "expiration-preview", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "preset-buttons"], ["class", "preset-btn", 3, "active", "click", 4, "ngFor", "ngForOf"], [1, "preset-btn", 3, "click"], [1, "custom-date"], ["format", "MMM d, yyyy", "placeholder", "Select expiration date", 3, "ngModelChange", "ngModel", "min"], [1, "expiration-preview"], [1, "fa-solid", "fa-calendar-check"], [1, "error-message"], [1, "fa-solid", "fa-circle-exclamation"], [1, "step-panel", "scopes-step"], [1, "scopes-header"], [1, "scopes-info"], ["class", "scopes-count", 4, "ngIf"], ["text", "Loading scopes...", 4, "ngIf"], ["class", "scope-categories", 4, "ngIf"], [1, "scope-tip"], [1, "fa-solid", "fa-lightbulb"], ["class", "no-scopes-warning", 4, "ngIf"], [1, "scopes-count"], [1, "count"], ["text", "Loading scopes..."], [1, "scope-categories"], ["class", "scope-category", 4, "ngFor", "ngForOf"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-badge"], [1, "category-right"], [1, "select-all-label", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "fa-solid"], ["class", "category-scopes", 4, "ngIf"], [1, "category-scopes"], ["class", "scope-item", 4, "ngFor", "ngForOf"], [1, "scope-item"], [1, "scope-label"], [1, "scope-info"], [1, "scope-name"], ["class", "scope-desc", 4, "ngIf"], [1, "scope-desc"], [1, "no-scopes-warning"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "step-panel", "success-step"], [1, "success-icon"], [1, "fa-solid", "fa-check-circle"], [1, "success-title"], [1, "key-display"], [1, "key-warning"], [1, "key-value"], [1, "copy-btn", 3, "click"], [1, "key-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["class", "detail-row", 4, "ngIf"], [1, "security-note"], [1, "fa-solid", "fa-shield-check"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-arrow-right"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], [1, "fa-solid", "fa-arrow-left"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-check"]], template: function APIKeyCreateDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, APIKeyCreateDialogComponent_div_0_Template, 1, 0, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
@@ -697,7 +722,7 @@ export class APIKeyCreateDialogComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(8, APIKeyCreateDialogComponent_div_8_Template, 12, 8, "div", 6);
             i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵtemplate(10, APIKeyCreateDialogComponent_div_10_Template, 23, 8, "div", 8)(11, APIKeyCreateDialogComponent_div_11_Template, 17, 3, "div", 9)(12, APIKeyCreateDialogComponent_div_12_Template, 41, 15, "div", 10);
+            i0.ɵɵtemplate(10, APIKeyCreateDialogComponent_div_10_Template, 23, 8, "div", 8)(11, APIKeyCreateDialogComponent_div_11_Template, 18, 4, "div", 9)(12, APIKeyCreateDialogComponent_div_12_Template, 41, 15, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 11);
             i0.ɵɵtemplate(14, APIKeyCreateDialogComponent_ng_container_14_Template, 6, 1, "ng-container", 12)(15, APIKeyCreateDialogComponent_ng_container_15_Template, 7, 4, "ng-container", 12)(16, APIKeyCreateDialogComponent_ng_container_16_Template, 4, 1, "ng-container", 12);
@@ -722,11 +747,11 @@ export class APIKeyCreateDialogComponent {
             i0.ɵɵproperty("ngIf", ctx.Step === "scopes");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.Step === "success");
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextAreaDirective, i3.TextBoxDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ButtonComponent, i6.LoadingComponent, i1.DatePipe], styles: ["\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: 520px;\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    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\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: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\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-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);\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, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 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(245, 158, 11, 0.4);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.step[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 2px solid #d1d5db;\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: #6b7280;\n    transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.step.completed[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.step-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n    color: #92400e;\n    font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 2px;\n    background: #d1d5db;\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n    background: linear-gradient(90deg, #10b981, #f59e0b);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n    max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n    content: ' *';\n    color: #ef4444;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #374151;\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    background: #fffbeb;\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.custom-date[_ngcontent-%COMP%] {\n    margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: #ecfdf5;\n    border-radius: 8px;\n    font-size: 13px;\n    color: #059669;\n}\n\n.expiration-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n    color: #dc2626;\n    font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.scopes-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n}\n\n.scopes-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label[_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-right[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: #eff6ff;\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #1d4ed8;\n}\n\n.scope-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #3b82f6;\n}\n\n.scope-tip[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #dbeafe;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: #10b981;\n}\n\n.success-title[_ngcontent-%COMP%] {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n    background: #1f2937;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: rgba(245, 158, 11, 0.2);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #fcd34d;\n}\n\n.key-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: #374151;\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: #10b981;\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: #4b5563;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: #6b7280;\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n    background: #10b981;\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n    text-align: left;\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #1f2937;\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: #065f46;\n}\n\n.security-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #10b981;\n    margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\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[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}"] });
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextAreaDirective, i3.TextBoxDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ButtonComponent, i6.LoadingComponent, i1.DatePipe], styles: ["\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: 520px;\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    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\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: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\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-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);\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, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 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(245, 158, 11, 0.4);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.step[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 2px solid #d1d5db;\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: #6b7280;\n    transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.step.completed[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.step-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n    color: #92400e;\n    font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 2px;\n    background: #d1d5db;\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n    background: linear-gradient(90deg, #10b981, #f59e0b);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n    max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n    content: ' *';\n    color: #ef4444;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #374151;\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    background: #fffbeb;\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.custom-date[_ngcontent-%COMP%] {\n    margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: #ecfdf5;\n    border-radius: 8px;\n    font-size: 13px;\n    color: #059669;\n}\n\n.expiration-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n    color: #dc2626;\n    font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.scopes-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n}\n\n.scopes-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label[_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-right[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: #eff6ff;\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #1d4ed8;\n}\n\n.scope-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #3b82f6;\n}\n\n.scope-tip[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #dbeafe;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    line-height: 1.5;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: #10b981;\n}\n\n.success-title[_ngcontent-%COMP%] {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n    background: #1f2937;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: rgba(245, 158, 11, 0.2);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #fcd34d;\n}\n\n.key-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: #374151;\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: #10b981;\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: #4b5563;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: #6b7280;\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n    background: #10b981;\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n    text-align: left;\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #1f2937;\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: #065f46;\n}\n\n.security-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #10b981;\n    margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\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[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyCreateDialogComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-key-create-dialog', template: "<!-- Slide-out Backdrop -->\n<div class=\"slideout-backdrop\" *ngIf=\"Visible\" (click)=\"Step !== 'success' ? close() : null\"></div>\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n    <!-- Header -->\n    <div class=\"slideout-header\">\n        <div class=\"slideout-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            <span>Generate New API Key</span>\n        </div>\n        <button class=\"slideout-close\" *ngIf=\"Step !== 'success'\" (click)=\"close()\" title=\"Close (Esc)\">\n            <i class=\"fa-solid fa-times\"></i>\n        </button>\n    </div>\n\n    <!-- Step Indicator -->\n    <div class=\"step-indicator\" *ngIf=\"Step !== 'success'\">\n        <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n            <div class=\"step-number\">1</div>\n            <div class=\"step-label\">Configure</div>\n        </div>\n        <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n        <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n            <div class=\"step-number\">2</div>\n            <div class=\"step-label\">Permissions</div>\n        </div>\n    </div>\n\n    <div class=\"slideout-content\">\n        <!-- Configure Step -->\n        <div class=\"step-panel\" *ngIf=\"Step === 'configure'\">\n            <div class=\"form-section\">\n                <label class=\"form-label required\">Key Label</label>\n                <input kendoTextBox [(ngModel)]=\"Label\"\n                       placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\"\n                       class=\"form-input\" />\n                <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n            </div>\n\n            <div class=\"form-section\">\n                <label class=\"form-label\">Description</label>\n                <textarea kendoTextArea [(ngModel)]=\"Description\"\n                          placeholder=\"Optional notes about how this key will be used...\"\n                          [rows]=\"3\"\n                          class=\"form-textarea\"></textarea>\n            </div>\n\n            <div class=\"form-section\">\n                <label class=\"form-label\">Expiration</label>\n                <div class=\"expiration-options\">\n                    <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" kendoCheckBox\n                               [(ngModel)]=\"NeverExpires\"\n                               (change)=\"onNeverExpiresChange()\" />\n                        <span>Never expires</span>\n                    </label>\n\n                    <div class=\"preset-buttons\" *ngIf=\"!NeverExpires\">\n                        <button *ngFor=\"let preset of ExpirationPresets\"\n                                class=\"preset-btn\"\n                                [class.active]=\"SelectedPreset === preset\"\n                                (click)=\"onPresetSelect(preset)\">\n                            {{preset.label}}\n                        </button>\n                    </div>\n\n                    <div class=\"custom-date\" *ngIf=\"!NeverExpires && SelectedPreset?.days === -1\">\n                        <kendo-datepicker [(ngModel)]=\"ExpiresAt\"\n                                          [min]=\"getMinDate()\"\n                                          format=\"MMM d, yyyy\"\n                                          placeholder=\"Select expiration date\">\n                        </kendo-datepicker>\n                    </div>\n\n                    <div class=\"expiration-preview\" *ngIf=\"!NeverExpires && ExpiresAt\">\n                        <i class=\"fa-solid fa-calendar-check\"></i>\n                        <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"error-message\" *ngIf=\"Error\">\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\n                {{Error}}\n            </div>\n        </div>\n\n        <!-- Scopes Step -->\n        <div class=\"step-panel scopes-step\" *ngIf=\"Step === 'scopes'\">\n            <div class=\"scopes-header\">\n                <div class=\"scopes-info\">\n                    <h4>Select Permission Scopes</h4>\n                    <p>Choose what this API key can access. You can always modify this later.</p>\n                </div>\n                <div class=\"scopes-count\" *ngIf=\"getSelectedScopeCount() > 0\">\n                    <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n                </div>\n            </div>\n\n            <mj-loading *ngIf=\"IsLoadingScopes\" text=\"Loading scopes...\"></mj-loading>\n\n            <div class=\"scope-categories\" *ngIf=\"!IsLoadingScopes\">\n                <div class=\"scope-category\" *ngFor=\"let category of ScopeCategories\">\n                    <div class=\"category-header\" (click)=\"toggleCategory(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-badge\">{{category.scopes.length}}</span>\n                        </div>\n                        <div class=\"category-right\">\n                            <label class=\"select-all-label\" (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\" [class.fa-chevron-down]=\"!category.expanded\"\n                               [class.fa-chevron-up]=\"category.expanded\"></i>\n                        </div>\n                    </div>\n\n                    <div class=\"category-scopes\" *ngIf=\"category.expanded\">\n                        <div class=\"scope-item\" *ngFor=\"let item of category.scopes\">\n                            <label class=\"scope-label\">\n                                <input type=\"checkbox\" kendoCheckBox\n                                       [(ngModel)]=\"item.selected\"\n                                       (change)=\"updateCategoryState(category)\" />\n                                <div class=\"scope-info\">\n                                    <span class=\"scope-name\">{{item.scope.Name}}</span>\n                                    <span class=\"scope-desc\" *ngIf=\"item.scope.Description\">\n                                        {{item.scope.Description}}\n                                    </span>\n                                </div>\n                            </label>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"scope-tip\">\n                <i class=\"fa-solid fa-lightbulb\"></i>\n                <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n            </div>\n        </div>\n\n        <!-- Success Step -->\n        <div class=\"step-panel success-step\" *ngIf=\"Step === 'success'\">\n            <div class=\"success-icon\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n            </div>\n            <h3 class=\"success-title\">API Key Created Successfully!</h3>\n\n            <div class=\"key-display\">\n                <div class=\"key-warning\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    <span>Copy this key now. It won't be shown again!</span>\n                </div>\n\n                <div class=\"key-value\">\n                    <code>{{RawApiKey}}</code>\n                    <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n                        <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n                        <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"key-details\">\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Label:</span>\n                    <span class=\"detail-value\">{{Label}}</span>\n                </div>\n                <div class=\"detail-row\" *ngIf=\"Description\">\n                    <span class=\"detail-label\">Description:</span>\n                    <span class=\"detail-value\">{{Description}}</span>\n                </div>\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Expires:</span>\n                    <span class=\"detail-value\">\n                        {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n                    </span>\n                </div>\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Scopes:</span>\n                    <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n                </div>\n            </div>\n\n            <div class=\"security-note\">\n                <i class=\"fa-solid fa-shield-check\"></i>\n                <div>\n                    <strong>Security Note:</strong>\n                    Store this key securely. We only store a hash - the original key cannot be recovered.\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"slideout-footer\">\n        <ng-container *ngIf=\"Step === 'configure'\">\n            <button kendoButton [themeColor]=\"'primary'\" (click)=\"goToScopes()\">\n                Next: Permissions\n                <i class=\"fa-solid fa-arrow-right\"></i>\n            </button>\n            <button kendoButton (click)=\"close()\">Cancel</button>\n        </ng-container>\n\n        <ng-container *ngIf=\"Step === 'scopes'\">\n            <button kendoButton [themeColor]=\"'primary'\"\n                    [disabled]=\"IsCreating\"\n                    (click)=\"createKey()\">\n                <mj-loading *ngIf=\"IsCreating\" [showText]=\"false\" size=\"small\"></mj-loading>\n                <span *ngIf=\"!IsCreating\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    Generate Key\n                </span>\n            </button>\n            <button kendoButton (click)=\"goBack()\">\n                <i class=\"fa-solid fa-arrow-left\"></i>\n                Back\n            </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"Step === 'success'\">\n            <button kendoButton [themeColor]=\"'primary'\" (click)=\"close()\">\n                <i class=\"fa-solid fa-check\"></i>\n                Done\n            </button>\n        </ng-container>\n    </div>\n</div>\n", styles: ["/* ========================================\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: 520px;\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    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\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: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\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 Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel {\n    padding: 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);\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, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 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(245, 158, 11, 0.4);\n}\n\n:host ::ng-deep .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n/* Step Indicator */\n.step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 2px solid #d1d5db;\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: #6b7280;\n    transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.step.completed .step-number {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.step-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.step.active .step-label {\n    color: #92400e;\n    font-weight: 600;\n}\n\n.step-connector {\n    width: 80px;\n    height: 2px;\n    background: #d1d5db;\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active {\n    background: linear-gradient(90deg, #10b981, #f59e0b);\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content {\n    max-height: 450px;\n}\n\n/* Form Sections */\n.form-section {\n    margin-bottom: 24px;\n}\n\n.form-label {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 8px;\n}\n\n.form-label.required::after {\n    content: ' *';\n    color: #ef4444;\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.form-hint {\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n}\n\n/* Expiration Options */\n.expiration-options {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #374151;\n}\n\n.preset-buttons {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn {\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn:hover {\n    border-color: #f59e0b;\n    background: #fffbeb;\n}\n\n.preset-btn.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.custom-date {\n    margin-top: 4px;\n}\n\n.expiration-preview {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: #ecfdf5;\n    border-radius: 8px;\n    font-size: 13px;\n    color: #059669;\n}\n\n.expiration-preview i {\n    color: #10b981;\n}\n\n/* Error Message */\n.error-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n    color: #dc2626;\n    font-size: 14px;\n}\n\n/* Scopes */\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.scopes-info p {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.scopes-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n}\n\n.scopes-count .count {\n    font-weight: 700;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: #f3f4f6;\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-badge {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-right > i {\n    color: #9ca3af;\n    font-size: 12px;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n.scope-tip {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: #eff6ff;\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #1d4ed8;\n}\n\n.scope-tip i {\n    color: #3b82f6;\n}\n\n.scope-tip code {\n    background: #dbeafe;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n/* Success Content */\n.success-content {\n    text-align: center;\n}\n\n.success-icon {\n    margin-bottom: 16px;\n}\n\n.success-icon i {\n    font-size: 64px;\n    color: #10b981;\n}\n\n.success-title {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n/* Key Display */\n.key-display {\n    background: #1f2937;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: rgba(245, 158, 11, 0.2);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #fcd34d;\n}\n\n.key-value {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: #374151;\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value code {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: #10b981;\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: #4b5563;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn:hover {\n    background: #6b7280;\n}\n\n.copy-btn.copied {\n    background: #10b981;\n}\n\n/* Key Details */\n.key-details {\n    text-align: left;\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.detail-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #1f2937;\n}\n\n/* Security Note */\n.security-note {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: #065f46;\n}\n\n.security-note i {\n    font-size: 20px;\n    color: #10b981;\n    margin-top: 2px;\n}\n\n.security-note strong {\n    display: block;\n    margin-bottom: 4px;\n}\n\n/* Form input styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\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:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n"] }]
+        args: [{ selector: 'mj-api-key-create-dialog', template: "<!-- Slide-out Backdrop -->\n<div class=\"slideout-backdrop\" *ngIf=\"Visible\" (click)=\"Step !== 'success' ? close() : null\"></div>\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n    <!-- Header -->\n    <div class=\"slideout-header\">\n        <div class=\"slideout-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            <span>Generate New API Key</span>\n        </div>\n        <button class=\"slideout-close\" *ngIf=\"Step !== 'success'\" (click)=\"close()\" title=\"Close (Esc)\">\n            <i class=\"fa-solid fa-times\"></i>\n        </button>\n    </div>\n\n    <!-- Step Indicator -->\n    <div class=\"step-indicator\" *ngIf=\"Step !== 'success'\">\n        <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n            <div class=\"step-number\">1</div>\n            <div class=\"step-label\">Configure</div>\n        </div>\n        <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n        <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n            <div class=\"step-number\">2</div>\n            <div class=\"step-label\">Permissions</div>\n        </div>\n    </div>\n\n    <div class=\"slideout-content\">\n        <!-- Configure Step -->\n        <div class=\"step-panel\" *ngIf=\"Step === 'configure'\">\n            <div class=\"form-section\">\n                <label class=\"form-label required\">Key Label</label>\n                <input kendoTextBox [(ngModel)]=\"Label\"\n                       placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\"\n                       class=\"form-input\" />\n                <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n            </div>\n\n            <div class=\"form-section\">\n                <label class=\"form-label\">Description</label>\n                <textarea kendoTextArea [(ngModel)]=\"Description\"\n                          placeholder=\"Optional notes about how this key will be used...\"\n                          [rows]=\"3\"\n                          class=\"form-textarea\"></textarea>\n            </div>\n\n            <div class=\"form-section\">\n                <label class=\"form-label\">Expiration</label>\n                <div class=\"expiration-options\">\n                    <label class=\"checkbox-label\">\n                        <input type=\"checkbox\" kendoCheckBox\n                               [(ngModel)]=\"NeverExpires\"\n                               (change)=\"onNeverExpiresChange()\" />\n                        <span>Never expires</span>\n                    </label>\n\n                    <div class=\"preset-buttons\" *ngIf=\"!NeverExpires\">\n                        <button *ngFor=\"let preset of ExpirationPresets\"\n                                class=\"preset-btn\"\n                                [class.active]=\"SelectedPreset === preset\"\n                                (click)=\"onPresetSelect(preset)\">\n                            {{preset.label}}\n                        </button>\n                    </div>\n\n                    <div class=\"custom-date\" *ngIf=\"!NeverExpires && SelectedPreset?.days === -1\">\n                        <kendo-datepicker [(ngModel)]=\"ExpiresAt\"\n                                          [min]=\"getMinDate()\"\n                                          format=\"MMM d, yyyy\"\n                                          placeholder=\"Select expiration date\">\n                        </kendo-datepicker>\n                    </div>\n\n                    <div class=\"expiration-preview\" *ngIf=\"!NeverExpires && ExpiresAt\">\n                        <i class=\"fa-solid fa-calendar-check\"></i>\n                        <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"error-message\" *ngIf=\"Error\">\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\n                {{Error}}\n            </div>\n        </div>\n\n        <!-- Scopes Step -->\n        <div class=\"step-panel scopes-step\" *ngIf=\"Step === 'scopes'\">\n            <div class=\"scopes-header\">\n                <div class=\"scopes-info\">\n                    <h4>Select Permission Scopes</h4>\n                    <p>Choose what this API key can access. You can always modify this later.</p>\n                </div>\n                <div class=\"scopes-count\" *ngIf=\"getSelectedScopeCount() > 0\">\n                    <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n                </div>\n            </div>\n\n            <mj-loading *ngIf=\"IsLoadingScopes\" text=\"Loading scopes...\"></mj-loading>\n\n            <div class=\"scope-categories\" *ngIf=\"!IsLoadingScopes\">\n                <div class=\"scope-category\" *ngFor=\"let category of ScopeCategories\">\n                    <div class=\"category-header\" (click)=\"toggleCategory(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-badge\">{{category.scopes.length}}</span>\n                        </div>\n                        <div class=\"category-right\">\n                            <label class=\"select-all-label\" (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\" [class.fa-chevron-down]=\"!category.expanded\"\n                               [class.fa-chevron-up]=\"category.expanded\"></i>\n                        </div>\n                    </div>\n\n                    <div class=\"category-scopes\" *ngIf=\"category.expanded\">\n                        <div class=\"scope-item\" *ngFor=\"let item of category.scopes\">\n                            <label class=\"scope-label\">\n                                <input type=\"checkbox\" kendoCheckBox\n                                       [(ngModel)]=\"item.selected\"\n                                       (change)=\"updateCategoryState(category)\" />\n                                <div class=\"scope-info\">\n                                    <span class=\"scope-name\">{{item.scope.Name}}</span>\n                                    <span class=\"scope-desc\" *ngIf=\"item.scope.Description\">\n                                        {{item.scope.Description}}\n                                    </span>\n                                </div>\n                            </label>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"scope-tip\">\n                <i class=\"fa-solid fa-lightbulb\"></i>\n                <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n            </div>\n\n            <!-- No Scopes Warning -->\n            <div class=\"no-scopes-warning\" *ngIf=\"!IsLoadingScopes && getSelectedScopeCount() === 0\">\n                <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                <div>\n                    <strong>Warning: No permissions selected</strong>\n                    <p>API keys without any assigned scopes will have <strong>no permissions</strong> and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.</p>\n                </div>\n            </div>\n        </div>\n\n        <!-- Success Step -->\n        <div class=\"step-panel success-step\" *ngIf=\"Step === 'success'\">\n            <div class=\"success-icon\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n            </div>\n            <h3 class=\"success-title\">API Key Created Successfully!</h3>\n\n            <div class=\"key-display\">\n                <div class=\"key-warning\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    <span>Copy this key now. It won't be shown again!</span>\n                </div>\n\n                <div class=\"key-value\">\n                    <code>{{RawApiKey}}</code>\n                    <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n                        <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n                        <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"key-details\">\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Label:</span>\n                    <span class=\"detail-value\">{{Label}}</span>\n                </div>\n                <div class=\"detail-row\" *ngIf=\"Description\">\n                    <span class=\"detail-label\">Description:</span>\n                    <span class=\"detail-value\">{{Description}}</span>\n                </div>\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Expires:</span>\n                    <span class=\"detail-value\">\n                        {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n                    </span>\n                </div>\n                <div class=\"detail-row\">\n                    <span class=\"detail-label\">Scopes:</span>\n                    <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n                </div>\n            </div>\n\n            <div class=\"security-note\">\n                <i class=\"fa-solid fa-shield-check\"></i>\n                <div>\n                    <strong>Security Note:</strong>\n                    Store this key securely. We only store a hash - the original key cannot be recovered.\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"slideout-footer\">\n        <ng-container *ngIf=\"Step === 'configure'\">\n            <button kendoButton [themeColor]=\"'primary'\" (click)=\"goToScopes()\">\n                Next: Permissions\n                <i class=\"fa-solid fa-arrow-right\"></i>\n            </button>\n            <button kendoButton (click)=\"close()\">Cancel</button>\n        </ng-container>\n\n        <ng-container *ngIf=\"Step === 'scopes'\">\n            <button kendoButton [themeColor]=\"'primary'\"\n                    [disabled]=\"IsCreating\"\n                    (click)=\"createKey()\">\n                <mj-loading *ngIf=\"IsCreating\" [showText]=\"false\" size=\"small\"></mj-loading>\n                <span *ngIf=\"!IsCreating\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    Generate Key\n                </span>\n            </button>\n            <button kendoButton (click)=\"goBack()\">\n                <i class=\"fa-solid fa-arrow-left\"></i>\n                Back\n            </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"Step === 'success'\">\n            <button kendoButton [themeColor]=\"'primary'\" (click)=\"close()\">\n                <i class=\"fa-solid fa-check\"></i>\n                Done\n            </button>\n        </ng-container>\n    </div>\n</div>\n", styles: ["/* ========================================\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: 520px;\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    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\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: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\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 Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel {\n    padding: 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);\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, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 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(245, 158, 11, 0.4);\n}\n\n:host ::ng-deep .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n/* Step Indicator */\n.step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 2px solid #d1d5db;\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: #6b7280;\n    transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.step.completed .step-number {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.step-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.step.active .step-label {\n    color: #92400e;\n    font-weight: 600;\n}\n\n.step-connector {\n    width: 80px;\n    height: 2px;\n    background: #d1d5db;\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active {\n    background: linear-gradient(90deg, #10b981, #f59e0b);\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content {\n    max-height: 450px;\n}\n\n/* Form Sections */\n.form-section {\n    margin-bottom: 24px;\n}\n\n.form-label {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 8px;\n}\n\n.form-label.required::after {\n    content: ' *';\n    color: #ef4444;\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.form-hint {\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n}\n\n/* Expiration Options */\n.expiration-options {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #374151;\n}\n\n.preset-buttons {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn {\n    padding: 8px 16px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn:hover {\n    border-color: #f59e0b;\n    background: #fffbeb;\n}\n\n.preset-btn.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.custom-date {\n    margin-top: 4px;\n}\n\n.expiration-preview {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: #ecfdf5;\n    border-radius: 8px;\n    font-size: 13px;\n    color: #059669;\n}\n\n.expiration-preview i {\n    color: #10b981;\n}\n\n/* Error Message */\n.error-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n    color: #dc2626;\n    font-size: 14px;\n}\n\n/* Scopes */\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.scopes-info p {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.scopes-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n}\n\n.scopes-count .count {\n    font-weight: 700;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: #f3f4f6;\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-badge {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n    cursor: pointer;\n}\n\n.category-right > i {\n    color: #9ca3af;\n    font-size: 12px;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n.scope-tip {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: #eff6ff;\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #1d4ed8;\n}\n\n.scope-tip i {\n    color: #3b82f6;\n}\n\n.scope-tip code {\n    background: #dbeafe;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n/* No Scopes Warning */\n.no-scopes-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning i {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning strong {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning p {\n    margin: 0;\n    line-height: 1.5;\n}\n\n/* Success Content */\n.success-content {\n    text-align: center;\n}\n\n.success-icon {\n    margin-bottom: 16px;\n}\n\n.success-icon i {\n    font-size: 64px;\n    color: #10b981;\n}\n\n.success-title {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n/* Key Display */\n.key-display {\n    background: #1f2937;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: rgba(245, 158, 11, 0.2);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #fcd34d;\n}\n\n.key-value {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: #374151;\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value code {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: #10b981;\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: #4b5563;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn:hover {\n    background: #6b7280;\n}\n\n.copy-btn.copied {\n    background: #10b981;\n}\n\n/* Key Details */\n.key-details {\n    text-align: left;\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.detail-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #1f2937;\n}\n\n/* Security Note */\n.security-note {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: #065f46;\n}\n\n.security-note i {\n    font-size: 20px;\n    color: #10b981;\n    margin-top: 2px;\n}\n\n.security-note strong {\n    display: block;\n    margin-bottom: 4px;\n}\n\n/* Form input styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\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:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n"] }]
     }], null, { Visible: [{
             type: Input
         }], VisibleChange: [{
@@ -739,5 +764,5 @@ export class APIKeyCreateDialogComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyCreateDialogComponent, { className: "APIKeyCreateDialogComponent", filePath: "src/APIKeys/api-key-create-dialog.component.ts", lineNumber: 44 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyCreateDialogComponent, { className: "APIKeyCreateDialogComponent", filePath: "src/APIKeys/api-key-create-dialog.component.ts", lineNumber: 45 }); })();
 //# sourceMappingURL=api-key-create-dialog.component.js.map