@memberjunction/ng-dashboards 5.35.0 → 5.36.0

package/dist/APIKeys/api-keys-resource.component.js

@@ -12,31 +12,33 @@ import { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-ke
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "./api-key-create-dialog.component";
-import * as i4 from "./api-key-edit-panel.component";
-import * as i5 from "./api-key-list.component";
-import * as i6 from "./api-applications-panel.component";
-import * as i7 from "./api-scopes-panel.component";
-import * as i8 from "./api-usage-panel.component";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "./api-key-create-dialog.component";
+import * as i5 from "./api-key-edit-panel.component";
+import * as i6 from "./api-key-list.component";
+import * as i7 from "./api-applications-panel.component";
+import * as i8 from "./api-scopes-panel.component";
+import * as i9 from "./api-usage-panel.component";
 const _c0 = ["keyList"];
-function APIKeysResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 2);
+function APIKeysResourceComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
+    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵtext(2, " Generate New Key ");
+    i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 76);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
-    i0.ɵɵelement(1, "i", 77);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Generate New Key");
-    i0.ɵɵelementEnd()();
+function APIKeysResourceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "mj-loading", 12);
+    i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 78);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_22_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expired")); });
-    i0.ɵɵelement(1, "i", 79);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_12_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expired")); });
+    i0.ɵɵelement(1, "i", 63);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -44,11 +46,11 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Con
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ExpiredKeys, " expired ");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 80);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_23_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
-    i0.ɵɵelement(1, "i", 55);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_13_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
+    i0.ɵɵelement(1, "i", 40);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56,11 +58,11 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Con
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ExpiringSoonCount, " expiring soon ");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 81);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_24_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("never-used")); });
-    i0.ɵɵelement(1, "i", 82);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_14_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("never-used")); });
+    i0.ɵɵelement(1, "i", 66);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -68,129 +70,129 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Con
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.NeverUsedKeys, " never used ");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
-    i0.ɵɵelement(1, "i", 52);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵtext(2, " All keys healthy ");
     i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵelement(1, "i", 50);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_84_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_84_For_2_Template_div_click_0_listener() { const key_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openEditPanel(key_r9)); });
-    i0.ɵɵelementStart(1, "div", 85);
-    i0.ɵɵelement(2, "i", 8);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_74_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_74_For_2_Template_div_click_0_listener() { const key_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openEditPanel(key_r8)); });
+    i0.ɵɵelementStart(1, "div", 69);
+    i0.ɵɵelement(2, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 86)(4, "div", 87);
+    i0.ɵɵelementStart(3, "div", 70)(4, "div", 71);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 88)(7, "span", 89);
+    i0.ɵɵelementStart(6, "div", 72)(7, "span", 73);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 90);
+    i0.ɵɵelementStart(9, "span", 74);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 91)(12, "div", 92);
+    i0.ɵɵelementStart(11, "div", 75)(12, "div", 76);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 93);
+    i0.ɵɵelementStart(14, "div", 77);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const key_r9 = ctx.$implicit;
+    const key_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", key_r9.Status === "Active");
+    i0.ɵɵclassProp("active", key_r8.Status === "Active");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(key_r9.Label);
+    i0.ɵɵtextInterpolate(key_r8.Label);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(key_r9.User);
+    i0.ɵɵtextInterpolate(key_r8.User);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("...", key_r9.Hash.slice(-8));
+    i0.ɵɵtextInterpolate1("...", key_r8.Hash.slice(-8));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(key_r9.LastUsedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(key_r8.LastUsedAt));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getExpirationClass(key_r9));
+    i0.ɵɵproperty("ngClass", ctx_r1.getExpirationClass(key_r8));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatExpiration(key_r9.ExpiresAt), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatExpiration(key_r8.ExpiresAt), " ");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_84_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵrepeaterCreate(1, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_84_For_2_Template, 16, 8, "div", 83, i0.ɵɵrepeaterTrackByIdentity);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_74_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵrepeaterCreate(1, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_74_For_2_Template, 16, 8, "div", 67, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.TopUsedKeys);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_85_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "i", 8);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_75_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 30);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No active keys with recent usage");
     i0.ɵɵelementEnd()();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "circle", 102);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_5_Template_circle_click_1_listener() { const stat_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onScopeClick(stat_r11)); });
+    i0.ɵɵelementStart(1, "circle", 86);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_5_Template_circle_click_1_listener() { const stat_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onScopeClick(stat_r10)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const stat_r11 = ctx.$implicit;
-    const ɵ$index_303_r12 = ctx.$index;
+    const stat_r10 = ctx.$implicit;
+    const ɵ$index_243_r11 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("stroke", stat_r11.color)("stroke-dasharray", stat_r11.percentage * 2.51 + " " + (251 - stat_r11.percentage * 2.51))("stroke-dashoffset", ctx_r1.getDonutOffset(ɵ$index_303_r12));
+    i0.ɵɵattribute("stroke", stat_r10.color)("stroke-dasharray", stat_r10.percentage * 2.51 + " " + (251 - stat_r10.percentage * 2.51))("stroke-dashoffset", ctx_r1.getDonutOffset(ɵ$index_243_r11));
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_13_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_13_Template_div_click_0_listener() { const stat_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onScopeClick(stat_r14)); });
-    i0.ɵɵelement(1, "div", 104);
-    i0.ɵɵelementStart(2, "div", 105)(3, "div", 106);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_13_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_13_Template_div_click_0_listener() { const stat_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onScopeClick(stat_r13)); });
+    i0.ɵɵelement(1, "div", 88);
+    i0.ɵɵelementStart(2, "div", 89)(3, "div", 90);
     i0.ɵɵelement(4, "i");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 107);
+    i0.ɵɵelementStart(6, "div", 91);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(8, "i", 108);
+    i0.ɵɵelement(8, "i", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const stat_r14 = ctx.$implicit;
+    const stat_r13 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", stat_r14.color);
+    i0.ɵɵstyleProp("background-color", stat_r13.color);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(stat_r14.iconClass);
+    i0.ɵɵclassMap(stat_r13.iconClass);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", stat_r14.category, " ");
+    i0.ɵɵtextInterpolate1(" ", stat_r13.category, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", stat_r14.count, " scopes");
+    i0.ɵɵtextInterpolate1("", stat_r13.count, " scopes");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 94);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 78);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 95);
-    i0.ɵɵelement(3, "circle", 96);
-    i0.ɵɵrepeaterCreate(4, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_5_Template, 2, 3, ":svg:ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(2, "svg", 79);
+    i0.ɵɵelement(3, "circle", 80);
+    i0.ɵɵrepeaterCreate(4, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_5_Template, 2, 3, ":svg:ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "div", 97)(7, "div", 98);
+    i0.ɵɵelementStart(6, "div", 81)(7, "div", 82);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 99);
+    i0.ɵɵelementStart(9, "div", 83);
     i0.ɵɵtext(10, "Categories");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 100);
-    i0.ɵɵrepeaterCreate(12, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_For_13_Template, 9, 6, "div", 101, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(11, "div", 84);
+    i0.ɵɵrepeaterCreate(12, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_For_13_Template, 9, 6, "div", 85, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -201,245 +203,230 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Con
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r1.ScopeStats);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_96_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "i", 14);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No scopes configured");
     i0.ɵɵelementEnd()();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 116);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const activity_r16 = i0.ɵɵnextContext().$implicit;
+    const activity_r15 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("by ", activity_r16.user);
+    i0.ɵɵtextInterpolate1("by ", activity_r15.user);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 110);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_For_2_Template_div_click_0_listener() { const activity_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onActivityClick(activity_r16)); });
-    i0.ɵɵelementStart(1, "div", 111);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_For_2_Template_div_click_0_listener() { const activity_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onActivityClick(activity_r15)); });
+    i0.ɵɵelementStart(1, "div", 95);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 112)(4, "div", 113);
+    i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 114)(7, "span", 115);
+    i0.ɵɵelementStart(6, "div", 98)(7, "span", 99);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_For_2_Conditional_9_Template, 2, 1, "span", 116);
+    i0.ɵɵconditionalCreate(9, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_For_2_Conditional_9_Template, 2, 1, "span", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 117);
+    i0.ɵɵelementStart(10, "div", 101);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const activity_r16 = ctx.$implicit;
+    const activity_r15 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getActionClass(activity_r16.action));
+    i0.ɵɵproperty("ngClass", ctx_r1.getActionClass(activity_r15.action));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getActionIcon(activity_r16.action));
+    i0.ɵɵclassMap(ctx_r1.getActionIcon(activity_r15.action));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(activity_r16.keyLabel);
+    i0.ɵɵtextInterpolate(activity_r15.keyLabel);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(activity_r16.action);
+    i0.ɵɵtextInterpolate(activity_r15.action);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(activity_r16.user ? 9 : -1);
+    i0.ɵɵconditional(activity_r15.user ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(activity_r16.date), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(activity_r15.date), " ");
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵrepeaterCreate(1, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_For_2_Template, 12, 7, "div", 109, i0.ɵɵrepeaterTrackByIdentity);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵrepeaterCreate(1, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_For_2_Template, 12, 7, "div", 93, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.RecentActivity);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_105_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "i", 118);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_95_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 102);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No recent activity");
     i0.ɵɵelementEnd()();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 72)(1, "div", 119);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58)(1, "div", 103);
     i0.ɵɵtext(2, "Quick Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 120)(4, "button", 121);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
-    i0.ɵɵelement(5, "i", 77);
+    i0.ɵɵelementStart(3, "div", 104)(4, "button", 105);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
+    i0.ɵɵelement(5, "i", 106);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7, "Generate Key");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 121);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
-    i0.ɵɵelement(9, "i", 122);
+    i0.ɵɵelementStart(8, "button", 105);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
+    i0.ɵɵelement(9, "i", 107);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11, "View All Keys");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "button", 121);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
-    i0.ɵɵelement(13, "i", 55);
+    i0.ɵɵelementStart(12, "button", 105);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
+    i0.ɵɵelement(13, "i", 40);
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15, "Expiring Keys");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "button", 121);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("never-used")); });
-    i0.ɵɵelement(17, "i", 82);
+    i0.ɵɵelementStart(16, "button", 105);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showListView("never-used")); });
+    i0.ɵɵelement(17, "i", 66);
     i0.ɵɵelementStart(18, "span");
     i0.ɵɵtext(19, "Never Used");
     i0.ɵɵelementEnd()()()();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22)(2, "h2", 23);
-    i0.ɵɵtext(3, "API Keys Management");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 24);
-    i0.ɵɵtext(5, "Manage API keys for external integrations and services");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 25)(7, "button", 26);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.refresh()); });
-    i0.ɵɵelement(8, "i", 27);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_9_Template, 4, 0, "button", 28);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 29)(11, "div", 30)(12, "div", 31);
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 14)(2, "div", 15);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 32);
-    i0.ɵɵelement(14, "path", 33)(15, "path", 34);
+    i0.ɵɵelementStart(3, "svg", 16);
+    i0.ɵɵelement(4, "path", 17)(5, "path", 18);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(16, "div", 35);
-    i0.ɵɵtext(17);
+    i0.ɵɵelementStart(6, "div", 19);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div", 36)(19, "div", 37);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(8, "div", 20)(9, "div", 21);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 38);
-    i0.ɵɵconditionalCreate(22, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_22_Template, 3, 1, "span", 39);
-    i0.ɵɵconditionalCreate(23, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_23_Template, 3, 1, "span", 40);
-    i0.ɵɵconditionalCreate(24, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_24_Template, 3, 1, "span", 41);
-    i0.ɵɵconditionalCreate(25, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_25_Template, 3, 0, "span", 42);
+    i0.ɵɵelementStart(11, "div", 22);
+    i0.ɵɵconditionalCreate(12, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_12_Template, 3, 1, "span", 23);
+    i0.ɵɵconditionalCreate(13, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_13_Template, 3, 1, "span", 24);
+    i0.ɵɵconditionalCreate(14, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_14_Template, 3, 1, "span", 25);
+    i0.ɵɵconditionalCreate(15, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_15_Template, 3, 0, "span", 26);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "div", 43)(27, "div", 44);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_div_click_27_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
-    i0.ɵɵelementStart(28, "div", 45);
-    i0.ɵɵelement(29, "i", 8);
+    i0.ɵɵelementStart(16, "div", 27)(17, "div", 28);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
+    i0.ɵɵelementStart(18, "div", 29);
+    i0.ɵɵelement(19, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "div", 46)(31, "div", 47);
-    i0.ɵɵtext(32);
+    i0.ɵɵelementStart(20, "div", 31)(21, "div", 32);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div", 48);
-    i0.ɵɵtext(34, "Total Keys");
+    i0.ɵɵelementStart(23, "div", 33);
+    i0.ɵɵtext(24, "Total Keys");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 49);
-    i0.ɵɵelement(36, "i", 50);
+    i0.ɵɵelementStart(25, "div", 34);
+    i0.ɵɵelement(26, "i", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 51);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("active")); });
-    i0.ɵɵelementStart(38, "div", 45);
-    i0.ɵɵelement(39, "i", 52);
+    i0.ɵɵelementStart(27, "div", 36);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_div_click_27_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("active")); });
+    i0.ɵɵelementStart(28, "div", 29);
+    i0.ɵɵelement(29, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "div", 46)(41, "div", 47);
-    i0.ɵɵtext(42);
+    i0.ɵɵelementStart(30, "div", 31)(31, "div", 32);
+    i0.ɵɵtext(32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "div", 48);
-    i0.ɵɵtext(44, "Active");
+    i0.ɵɵelementStart(33, "div", 33);
+    i0.ɵɵtext(34, "Active");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "div", 53)(46, "span", 54);
-    i0.ɵɵtext(47);
+    i0.ɵɵelementStart(35, "div", 38)(36, "span", 39);
+    i0.ɵɵtext(37);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(48, "div", 44);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_div_click_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
-    i0.ɵɵelementStart(49, "div", 45);
-    i0.ɵɵelement(50, "i", 55);
+    i0.ɵɵelementStart(38, "div", 28);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("expiring")); });
+    i0.ɵɵelementStart(39, "div", 29);
+    i0.ɵɵelement(40, "i", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(51, "div", 46)(52, "div", 47);
-    i0.ɵɵtext(53);
+    i0.ɵɵelementStart(41, "div", 31)(42, "div", 32);
+    i0.ɵɵtext(43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 48);
-    i0.ɵɵtext(55, "Expiring Soon");
+    i0.ɵɵelementStart(44, "div", 33);
+    i0.ɵɵtext(45, "Expiring Soon");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(56, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_56_Template, 2, 0, "div", 56);
+    i0.ɵɵconditionalCreate(46, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_46_Template, 2, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "div", 44);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_div_click_57_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("revoked")); });
-    i0.ɵɵelementStart(58, "div", 45);
-    i0.ɵɵelement(59, "i", 57);
+    i0.ɵɵelementStart(47, "div", 28);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_div_click_47_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("revoked")); });
+    i0.ɵɵelementStart(48, "div", 29);
+    i0.ɵɵelement(49, "i", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "div", 46)(61, "div", 47);
-    i0.ɵɵtext(62);
+    i0.ɵɵelementStart(50, "div", 31)(51, "div", 32);
+    i0.ɵɵtext(52);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "div", 48);
-    i0.ɵɵtext(64, "Revoked");
+    i0.ɵɵelementStart(53, "div", 33);
+    i0.ɵɵtext(54, "Revoked");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(65, "div", 44);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_div_click_65_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.switchTab("scopes")); });
-    i0.ɵɵelementStart(66, "div", 45);
-    i0.ɵɵelement(67, "i", 14);
+    i0.ɵɵelementStart(55, "div", 28);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_div_click_55_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.switchTab("scopes")); });
+    i0.ɵɵelementStart(56, "div", 29);
+    i0.ɵɵelement(57, "i", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(68, "div", 46)(69, "div", 47);
-    i0.ɵɵtext(70);
+    i0.ɵɵelementStart(58, "div", 31)(59, "div", 32);
+    i0.ɵɵtext(60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(71, "div", 48);
-    i0.ɵɵtext(72, "Scope Categories");
+    i0.ɵɵelementStart(61, "div", 33);
+    i0.ɵɵtext(62, "Scope Categories");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(73, "div", 58)(74, "div", 59)(75, "div", 60)(76, "div", 61);
-    i0.ɵɵelement(77, "i", 8);
-    i0.ɵɵelementStart(78, "span");
-    i0.ɵɵtext(79, "Recently Used Keys");
+    i0.ɵɵelementStart(63, "div", 44)(64, "div", 45)(65, "div", 46)(66, "div", 47);
+    i0.ɵɵelement(67, "i", 30);
+    i0.ɵɵelementStart(68, "span");
+    i0.ɵɵtext(69, "Recently Used Keys");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(80, "button", 62);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template_button_click_80_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
-    i0.ɵɵtext(81, " View All ");
-    i0.ɵɵelement(82, "i", 50);
+    i0.ɵɵelementStart(70, "button", 48);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template_button_click_70_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showListView("all")); });
+    i0.ɵɵtext(71, " View All ");
+    i0.ɵɵelement(72, "i", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(83, "div", 63);
-    i0.ɵɵconditionalCreate(84, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_84_Template, 3, 0, "div", 64);
-    i0.ɵɵconditionalCreate(85, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_85_Template, 4, 0, "div", 65);
+    i0.ɵɵelementStart(73, "div", 49);
+    i0.ɵɵconditionalCreate(74, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_74_Template, 3, 0, "div", 50);
+    i0.ɵɵconditionalCreate(75, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_75_Template, 4, 0, "div", 51);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(86, "div", 66)(87, "div", 60)(88, "div", 61);
-    i0.ɵɵelement(89, "i", 14);
-    i0.ɵɵelementStart(90, "span");
-    i0.ɵɵtext(91, "Permission Scopes");
+    i0.ɵɵelementStart(76, "div", 52)(77, "div", 46)(78, "div", 47);
+    i0.ɵɵelement(79, "i", 43);
+    i0.ɵɵelementStart(80, "span");
+    i0.ɵɵtext(81, "Permission Scopes");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(92, "span", 67);
-    i0.ɵɵtext(93, "Available scope categories");
+    i0.ɵɵelementStart(82, "span", 53);
+    i0.ɵɵtext(83, "Available scope categories");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(94, "div", 63);
-    i0.ɵɵconditionalCreate(95, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_95_Template, 14, 1, "div", 68);
-    i0.ɵɵconditionalCreate(96, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_96_Template, 4, 0, "div", 65);
+    i0.ɵɵelementStart(84, "div", 49);
+    i0.ɵɵconditionalCreate(85, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_85_Template, 14, 1, "div", 54);
+    i0.ɵɵconditionalCreate(86, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_86_Template, 4, 0, "div", 51);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(97, "div", 69)(98, "div", 60)(99, "div", 61);
-    i0.ɵɵelement(100, "i", 70);
-    i0.ɵɵelementStart(101, "span");
-    i0.ɵɵtext(102, "Recent Activity");
+    i0.ɵɵelementStart(87, "div", 55)(88, "div", 46)(89, "div", 47);
+    i0.ɵɵelement(90, "i", 56);
+    i0.ɵɵelementStart(91, "span");
+    i0.ɵɵtext(92, "Recent Activity");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(103, "div", 63);
-    i0.ɵɵconditionalCreate(104, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_104_Template, 3, 0, "div", 71);
-    i0.ɵɵconditionalCreate(105, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_105_Template, 4, 0, "div", 65);
+    i0.ɵɵelementStart(93, "div", 49);
+    i0.ɵɵconditionalCreate(94, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_94_Template, 3, 0, "div", 57);
+    i0.ɵɵconditionalCreate(95, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_95_Template, 4, 0, "div", 51);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(106, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Conditional_106_Template, 20, 0, "div", 72);
-    i0.ɵɵelementStart(107, "div", 73);
-    i0.ɵɵelement(108, "i", 74);
-    i0.ɵɵelementStart(109, "div", 75)(110, "strong");
-    i0.ɵɵtext(111, "Security Best Practices:");
+    i0.ɵɵconditionalCreate(96, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Conditional_96_Template, 20, 0, "div", 58);
+    i0.ɵɵelementStart(97, "div", 59);
+    i0.ɵɵelement(98, "i", 60);
+    i0.ɵɵelementStart(99, "div", 61)(100, "strong");
+    i0.ɵɵtext(101, "Security Best Practices:");
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(112, " API keys should be rotated regularly and revoked when no longer needed. Keys are hashed and stored securely - the raw key is only shown once at creation time. All API key usage is logged for audit purposes. ");
+    i0.ɵɵtext(102, " API keys should be rotated regularly and revoked when no longer needed. Keys are hashed and stored securely - the raw key is only shown once at creation time. All API key usage is logged for audit purposes. ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.UserCanCreateKeys ? 9 : -1);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.getHealthClass());
     i0.ɵɵadvance(5);
     i0.ɵɵattribute("stroke-dasharray", ctx_r1.getHealthScore() + ", 100");
@@ -448,13 +435,13 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Tem
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.getHealthLabel());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.ExpiredKeys > 0 ? 22 : -1);
+    i0.ɵɵconditional(ctx_r1.ExpiredKeys > 0 ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ExpiringSoonCount > 0 ? 23 : -1);
+    i0.ɵɵconditional(ctx_r1.ExpiringSoonCount > 0 ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.NeverUsedKeys > 0 ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.NeverUsedKeys > 0 ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ExpiredKeys === 0 && ctx_r1.ExpiringSoonCount === 0 && ctx_r1.NeverUsedKeys === 0 ? 25 : -1);
+    i0.ɵɵconditional(ctx_r1.ExpiredKeys === 0 && ctx_r1.ExpiringSoonCount === 0 && ctx_r1.NeverUsedKeys === 0 ? 15 : -1);
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.TotalKeys);
     i0.ɵɵadvance(10);
@@ -466,7 +453,7 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Tem
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.ExpiringSoonCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.ExpiringSoonCount > 0 ? 56 : -1);
+    i0.ɵɵconditional(ctx_r1.ExpiringSoonCount > 0 ? 46 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("danger", ctx_r1.RevokedKeys > 0);
     i0.ɵɵadvance(5);
@@ -474,138 +461,76 @@ function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Tem
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.ScopeStats.length);
     i0.ɵɵadvance(14);
-    i0.ɵɵconditional(ctx_r1.TopUsedKeys.length > 0 ? 84 : -1);
+    i0.ɵɵconditional(ctx_r1.TopUsedKeys.length > 0 ? 74 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.TopUsedKeys.length === 0 ? 85 : -1);
+    i0.ɵɵconditional(ctx_r1.TopUsedKeys.length === 0 ? 75 : -1);
     i0.ɵɵadvance(10);
-    i0.ɵɵconditional(ctx_r1.ScopeStats.length > 0 ? 95 : -1);
+    i0.ɵɵconditional(ctx_r1.ScopeStats.length > 0 ? 85 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ScopeStats.length === 0 ? 96 : -1);
+    i0.ɵɵconditional(ctx_r1.ScopeStats.length === 0 ? 86 : -1);
     i0.ɵɵadvance(8);
-    i0.ɵɵconditional(ctx_r1.RecentActivity.length > 0 ? 104 : -1);
+    i0.ɵɵconditional(ctx_r1.RecentActivity.length > 0 ? 94 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.RecentActivity.length === 0 ? 105 : -1);
+    i0.ɵɵconditional(ctx_r1.RecentActivity.length === 0 ? 95 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.UserCanCreateKeys ? 106 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanCreateKeys ? 96 : -1);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123)(1, "button", 124);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showOverview()); });
-    i0.ɵɵelement(2, "i", 125);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108)(1, "button", 109);
+    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showOverview()); });
+    i0.ɵɵelement(2, "i", 110);
     i0.ɵɵtext(3, " Back to Overview ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "mj-api-key-list", 126, 0);
-    i0.ɵɵlistener("KeySelected", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_1_Template_mj_api_key_list_KeySelected_4_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onKeySelected($event)); })("CreateRequested", function APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_1_Template_mj_api_key_list_CreateRequested_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
+    i0.ɵɵelementStart(4, "mj-api-key-list", 111, 0);
+    i0.ɵɵlistener("KeySelected", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_1_Template_mj_api_key_list_KeySelected_4_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onKeySelected($event)); })("CreateRequested", function APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_1_Template_mj_api_key_list_CreateRequested_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("Filter", ctx_r1.ListFilter);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_0_Template, 113, 27);
-    i0.ɵɵconditionalCreate(1, APIKeysResourceComponent_Conditional_2_Conditional_31_Conditional_1_Template, 6, 1);
+function APIKeysResourceComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_0_Template, 103, 26);
+    i0.ɵɵconditionalCreate(1, APIKeysResourceComponent_Conditional_7_Conditional_1_Conditional_1_Template, 6, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.CurrentView === "overview" ? 0 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.CurrentView === "list" ? 1 : -1);
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-api-applications-panel", 127);
-    i0.ɵɵlistener("ApplicationUpdated", function APIKeysResourceComponent_Conditional_2_Conditional_32_Template_mj_api_applications_panel_ApplicationUpdated_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDataUpdated()); });
+function APIKeysResourceComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-api-applications-panel", 112);
+    i0.ɵɵlistener("ApplicationUpdated", function APIKeysResourceComponent_Conditional_7_Conditional_2_Template_mj_api_applications_panel_ApplicationUpdated_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDataUpdated()); });
     i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-api-scopes-panel", 128);
-    i0.ɵɵlistener("ScopeUpdated", function APIKeysResourceComponent_Conditional_2_Conditional_33_Template_mj_api_scopes_panel_ScopeUpdated_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDataUpdated()); });
+function APIKeysResourceComponent_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-api-scopes-panel", 113);
+    i0.ɵɵlistener("ScopeUpdated", function APIKeysResourceComponent_Conditional_7_Conditional_3_Template_mj_api_scopes_panel_ScopeUpdated_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDataUpdated()); });
     i0.ɵɵelementEnd();
 } }
-function APIKeysResourceComponent_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+function APIKeysResourceComponent_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-api-usage-panel");
 } }
-function APIKeysResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div", 7);
-    i0.ɵɵelement(3, "i", 8);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5, "API Keys");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "div", 9)(7, "button", 10);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchTab("keys"); return i0.ɵɵresetView(ctx_r1.closeNav()); });
-    i0.ɵɵelement(8, "i", 8);
-    i0.ɵɵelementStart(9, "span", 11);
-    i0.ɵɵtext(10, "API Keys");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 12);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 10);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchTab("applications"); return i0.ɵɵresetView(ctx_r1.closeNav()); });
-    i0.ɵɵelement(14, "i", 13);
-    i0.ɵɵelementStart(15, "span", 11);
-    i0.ɵɵtext(16, "Applications");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 12);
-    i0.ɵɵtext(18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "button", 10);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchTab("scopes"); return i0.ɵɵresetView(ctx_r1.closeNav()); });
-    i0.ɵɵelement(20, "i", 14);
-    i0.ɵɵelementStart(21, "span", 11);
-    i0.ɵɵtext(22, "Scopes");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 12);
-    i0.ɵɵtext(24);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "button", 10);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchTab("usage"); return i0.ɵɵresetView(ctx_r1.closeNav()); });
-    i0.ɵɵelement(26, "i", 15);
-    i0.ɵɵelementStart(27, "span", 11);
-    i0.ɵɵtext(28, "Usage Analytics");
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(29, "div", 16)(30, "div", 17);
-    i0.ɵɵconditionalCreate(31, APIKeysResourceComponent_Conditional_2_Conditional_31_Template, 2, 2);
-    i0.ɵɵconditionalCreate(32, APIKeysResourceComponent_Conditional_2_Conditional_32_Template, 1, 0, "mj-api-applications-panel");
-    i0.ɵɵconditionalCreate(33, APIKeysResourceComponent_Conditional_2_Conditional_33_Template, 1, 0, "mj-api-scopes-panel");
-    i0.ɵɵconditionalCreate(34, APIKeysResourceComponent_Conditional_2_Conditional_34_Template, 1, 0, "mj-api-usage-panel");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "button", 18);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleNav()); });
-    i0.ɵɵelement(36, "i", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 20);
-    i0.ɵɵlistener("click", function APIKeysResourceComponent_Conditional_2_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeNav()); });
+function APIKeysResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-page-body-interior");
+    i0.ɵɵconditionalCreate(1, APIKeysResourceComponent_Conditional_7_Conditional_1_Template, 2, 2);
+    i0.ɵɵconditionalCreate(2, APIKeysResourceComponent_Conditional_7_Conditional_2_Template, 1, 0, "mj-api-applications-panel");
+    i0.ɵɵconditionalCreate(3, APIKeysResourceComponent_Conditional_7_Conditional_3_Template, 1, 0, "mj-api-scopes-panel");
+    i0.ɵɵconditionalCreate(4, APIKeysResourceComponent_Conditional_7_Conditional_4_Template, 1, 0, "mj-api-usage-panel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(7);
-    i0.ɵɵclassProp("active", ctx_r1.MainTab === "keys");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.TotalKeys);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.MainTab === "applications");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.ApplicationCount);
+    i0.ɵɵconditional(ctx_r1.MainTab === "keys" ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.MainTab === "scopes");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.ScopeCount);
+    i0.ɵɵconditional(ctx_r1.MainTab === "applications" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r1.MainTab === "usage");
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.MainTab === "keys" ? 31 : -1);
+    i0.ɵɵconditional(ctx_r1.MainTab === "scopes" ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.MainTab === "applications" ? 32 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.MainTab === "scopes" ? 33 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.MainTab === "usage" ? 34 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-bars", !ctx_r1.NavOpen)("fa-times", ctx_r1.NavOpen);
+    i0.ɵɵconditional(ctx_r1.MainTab === "usage" ? 4 : -1);
 } }
 /**
  * API Keys Resource Component
@@ -624,7 +549,6 @@ let APIKeysResourceComponent = class APIKeysResourceComponent extends BaseResour
     CurrentView = 'overview';
     ListFilter = 'all';
     MainTab = 'keys';
-    NavOpen = false;
     // Application and scope counts for tab badges
     ApplicationCount = 0;
     ScopeCount = 0;
@@ -1073,26 +997,50 @@ let APIKeysResourceComponent = class APIKeysResourceComponent extends BaseResour
         this.MainTab = 'scopes';
     }
     /**
-     * Switch to a main tab
+     * Switch to a main tab. Resets to the overview view when returning to the
+     * Keys tab so the user always lands on the dashboard, not a stale list view.
      */
     switchTab(tab) {
         this.MainTab = tab;
-        // Reset to overview when switching back to keys
         if (tab === 'keys') {
             this.CurrentView = 'overview';
         }
     }
     /**
-     * Toggle mobile navigation
+     * L2 tabs rendered as `<mj-tab-nav>` in the interior chrome's [toolbar] slot.
+     * Badges reflect live counts; Usage Analytics has no badge by design.
      */
-    toggleNav() {
-        this.NavOpen = !this.NavOpen;
+    get tabsConfig() {
+        return [
+            { key: 'keys', icon: 'fa-solid fa-key', label: 'API Keys', badge: this.TotalKeys },
+            { key: 'applications', icon: 'fa-solid fa-cube', label: 'Applications', badge: this.ApplicationCount },
+            { key: 'scopes', icon: 'fa-solid fa-shield-halved', label: 'Scopes', badge: this.ScopeCount },
+            { key: 'usage', icon: 'fa-solid fa-chart-line', label: 'Usage Analytics' }
+        ];
     }
-    /**
-     * Close mobile navigation
-     */
-    closeNav() {
-        this.NavOpen = false;
+    /** Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */
+    onTabChange(key) {
+        if (key === 'keys' || key === 'applications' || key === 'scopes' || key === 'usage') {
+            this.switchTab(key);
+        }
+    }
+    /** Title rendered in the interior chrome — varies per tab. */
+    get currentTabTitle() {
+        switch (this.MainTab) {
+            case 'keys': return 'API Keys';
+            case 'applications': return 'API Applications';
+            case 'scopes': return 'API Scopes';
+            case 'usage': return 'Usage Analytics';
+        }
+    }
+    /** Subtitle rendered in the interior chrome — varies per tab to give context. */
+    get currentTabSubtitle() {
+        switch (this.MainTab) {
+            case 'keys': return 'Manage API keys for external integrations and services';
+            case 'applications': return 'Register and manage API applications';
+            case 'scopes': return 'Permission scopes that can be granted to API keys';
+            case 'usage': return 'Track usage patterns and analytics across all API keys';
+        }
     }
     /**
      * Handle updates from child panels
@@ -1107,27 +1055,37 @@ let APIKeysResourceComponent = class APIKeysResourceComponent extends BaseResour
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.keyListComponent = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 9, consts: [["keyList", ""], [1, "api-keys-dashboard"], ["text", "Loading API Keys..."], [3, "Created", "Closed", "Visible"], [3, "Updated", "Revoked", "Closed", "Visible", "KeyId"], [1, "dashboard-nav"], [1, "nav-header"], [1, "nav-title"], [1, "fa-solid", "fa-key"], [1, "nav-items"], [1, "nav-item", 3, "click"], [1, "nav-label"], [1, "nav-badge"], [1, "fa-solid", "fa-cube"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-chart-line"], [1, "dashboard-content"], [1, "content-wrapper"], [1, "mobile-nav-toggle", 3, "click"], [1, "fa-solid"], [1, "mobile-nav-overlay", 3, "click"], [1, "overview-header"], [1, "header-left"], [1, "overview-title"], [1, "overview-subtitle"], [1, "header-actions"], ["title", "Refresh", 1, "btn-refresh", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "btn-primary"], [1, "health-banner", 3, "ngClass"], [1, "health-score-container"], [1, "health-score-ring"], ["viewBox", "0 0 36 36", 1, "circular-chart"], ["d", "M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle-bg"], ["d", "M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle"], [1, "health-score-value"], [1, "health-info"], [1, "health-label"], [1, "health-details"], [1, "health-alert"], [1, "health-warning-text"], [1, "health-info-text"], [1, "health-ok"], [1, "kpi-row"], [1, "kpi-card", "clickable", 3, "click"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-trend"], [1, "fa-solid", "fa-arrow-right"], [1, "kpi-card", "active", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-trend", "success"], [1, "percentage"], [1, "fa-solid", "fa-clock"], [1, "kpi-trend", "warning"], [1, "fa-solid", "fa-ban"], [1, "content-grid"], [1, "panel", "keys-panel"], [1, "panel-header"], [1, "panel-title"], [1, "panel-action", 3, "click"], [1, "panel-body"], [1, "key-list"], [1, "empty-state"], [1, "panel", "scope-panel"], [1, "panel-subtitle"], [1, "scope-chart"], [1, "panel", "activity-panel"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "activity-list"], [1, "quick-actions"], [1, "security-notice"], [1, "fa-solid", "fa-shield-check"], [1, "notice-content"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "health-alert", 3, "click"], [1, "fa-solid", "fa-circle-exclamation"], [1, "health-warning-text", 3, "click"], [1, "health-info-text", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "key-item"], [1, "key-item", 3, "click"], [1, "key-icon"], [1, "key-info"], [1, "key-label"], [1, "key-meta"], [1, "key-user"], [1, "key-hash"], [1, "key-status"], [1, "last-used"], [1, "expiration", 3, "ngClass"], [1, "donut-chart-container"], ["viewBox", "0 0 100 100", 1, "donut-chart"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke", "#e5e7eb", "stroke-width", "12"], [1, "donut-center"], [1, "donut-total"], [1, "donut-label"], [1, "scope-legend"], [1, "legend-item"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke-width", "12", 1, "donut-segment", 3, "click"], [1, "legend-item", 3, "click"], [1, "legend-color"], [1, "legend-info"], [1, "legend-name"], [1, "legend-value"], [1, "fa-solid", "fa-chevron-right", "legend-arrow"], [1, "activity-item"], [1, "activity-item", 3, "click"], [1, "activity-icon", 3, "ngClass"], [1, "activity-info"], [1, "activity-name"], [1, "activity-meta"], [1, "activity-action"], [1, "activity-user"], [1, "activity-time"], [1, "fa-solid", "fa-inbox"], [1, "quick-actions-title"], [1, "quick-actions-grid"], [1, "quick-action", 3, "click"], [1, "fa-solid", "fa-list"], [1, "list-view-header"], [1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [3, "KeySelected", "CreateRequested", "Filter"], [3, "ApplicationUpdated"], [3, "ScopeUpdated"]], template: function APIKeysResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, APIKeysResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
-            i0.ɵɵconditionalCreate(2, APIKeysResourceComponent_Conditional_2_Template, 38, 19);
-            i0.ɵɵelementStart(3, "mj-api-key-create-dialog", 3);
-            i0.ɵɵlistener("Created", function APIKeysResourceComponent_Template_mj_api_key_create_dialog_Created_3_listener($event) { return ctx.onKeyCreated($event); })("Closed", function APIKeysResourceComponent_Template_mj_api_key_create_dialog_Closed_3_listener() { return ctx.onCreateDialogClosed(); });
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 10, consts: [["keyList", ""], ["Role", "region", "AriaLabel", "API Keys", 3, "Title", "Subtitle"], ["toolbar", ""], [3, "TabChange", "Tabs", "ActiveKey"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Generate a new API key"], [1, "api-keys-loading"], [3, "Created", "Closed", "Visible"], [3, "Updated", "Revoked", "Closed", "Visible", "KeyId"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Generate a new API key", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["text", "Loading API Keys..."], [1, "health-banner", 3, "ngClass"], [1, "health-score-container"], [1, "health-score-ring"], ["viewBox", "0 0 36 36", 1, "circular-chart"], ["d", "M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle-bg"], ["d", "M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle"], [1, "health-score-value"], [1, "health-info"], [1, "health-label"], [1, "health-details"], [1, "health-alert"], [1, "health-warning-text"], [1, "health-info-text"], [1, "health-ok"], [1, "kpi-row"], [1, "kpi-card", "clickable", 3, "click"], [1, "kpi-icon"], [1, "fa-solid", "fa-key"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-trend"], [1, "fa-solid", "fa-arrow-right"], [1, "kpi-card", "active", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-trend", "success"], [1, "percentage"], [1, "fa-solid", "fa-clock"], [1, "kpi-trend", "warning"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-shield-halved"], [1, "content-grid"], [1, "panel", "keys-panel"], [1, "panel-header"], [1, "panel-title"], [1, "panel-action", 3, "click"], [1, "panel-body"], [1, "key-list"], [1, "empty-state"], [1, "panel", "scope-panel"], [1, "panel-subtitle"], [1, "scope-chart"], [1, "panel", "activity-panel"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "activity-list"], [1, "quick-actions"], [1, "security-notice"], [1, "fa-solid", "fa-shield-check"], [1, "notice-content"], [1, "health-alert", 3, "click"], [1, "fa-solid", "fa-circle-exclamation"], [1, "health-warning-text", 3, "click"], [1, "health-info-text", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "key-item"], [1, "key-item", 3, "click"], [1, "key-icon"], [1, "key-info"], [1, "key-label"], [1, "key-meta"], [1, "key-user"], [1, "key-hash"], [1, "key-status"], [1, "last-used"], [1, "expiration", 3, "ngClass"], [1, "donut-chart-container"], ["viewBox", "0 0 100 100", 1, "donut-chart"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke", "#e5e7eb", "stroke-width", "12"], [1, "donut-center"], [1, "donut-total"], [1, "donut-label"], [1, "scope-legend"], [1, "legend-item"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke-width", "12", 1, "donut-segment", 3, "click"], [1, "legend-item", 3, "click"], [1, "legend-color"], [1, "legend-info"], [1, "legend-name"], [1, "legend-value"], [1, "fa-solid", "fa-chevron-right", "legend-arrow"], [1, "activity-item"], [1, "activity-item", 3, "click"], [1, "activity-icon", 3, "ngClass"], [1, "activity-info"], [1, "activity-name"], [1, "activity-meta"], [1, "activity-action"], [1, "activity-user"], [1, "activity-time"], [1, "fa-solid", "fa-inbox"], [1, "quick-actions-title"], [1, "quick-actions-grid"], [1, "quick-action", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-list"], [1, "list-view-header"], [1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [3, "KeySelected", "CreateRequested", "Filter"], [3, "ApplicationUpdated"], [3, "ScopeUpdated"]], template: function APIKeysResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-header-interior", 1)(1, "div", 2)(2, "mj-tab-nav", 3);
+            i0.ɵɵlistener("TabChange", function APIKeysResourceComponent_Template_mj_tab_nav_TabChange_2_listener($event) { return ctx.onTabChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(3, "div", 4)(4, "mj-refresh-button", 5);
+            i0.ɵɵlistener("Clicked", function APIKeysResourceComponent_Template_mj_refresh_button_Clicked_4_listener() { return ctx.refresh(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "mj-api-key-edit-panel", 4);
-            i0.ɵɵlistener("Updated", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Updated_4_listener() { return ctx.onKeyUpdated(); })("Revoked", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Revoked_4_listener() { return ctx.onKeyRevoked(); })("Closed", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Closed_4_listener() { return ctx.onEditPanelClosed(); });
+            i0.ɵɵconditionalCreate(5, APIKeysResourceComponent_Conditional_5_Template, 3, 0, "button", 6);
             i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(6, APIKeysResourceComponent_Conditional_6_Template, 2, 0, "div", 7)(7, APIKeysResourceComponent_Conditional_7_Template, 5, 4, "mj-page-body-interior");
+            i0.ɵɵelementStart(8, "mj-api-key-create-dialog", 8);
+            i0.ɵɵlistener("Created", function APIKeysResourceComponent_Template_mj_api_key_create_dialog_Created_8_listener($event) { return ctx.onKeyCreated($event); })("Closed", function APIKeysResourceComponent_Template_mj_api_key_create_dialog_Closed_8_listener() { return ctx.onCreateDialogClosed(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "mj-api-key-edit-panel", 9);
+            i0.ɵɵlistener("Updated", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Updated_9_listener() { return ctx.onKeyUpdated(); })("Revoked", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Revoked_9_listener() { return ctx.onKeyRevoked(); })("Closed", function APIKeysResourceComponent_Template_mj_api_key_edit_panel_Closed_9_listener() { return ctx.onEditPanelClosed(); });
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵclassProp("panel-open", ctx.ShowCreateDialog || ctx.ShowEditPanel)("nav-open", ctx.NavOpen);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
+            i0.ɵɵproperty("Title", ctx.currentTabTitle)("Subtitle", ctx.currentTabSubtitle);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Tabs", ctx.tabsConfig)("ActiveKey", ctx.MainTab);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.IsLoading);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
+            i0.ɵɵconditional(ctx.MainTab === "keys" && ctx.CurrentView === "overview" && ctx.UserCanCreateKeys ? 5 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 6 : 7);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("Visible", ctx.ShowCreateDialog);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Visible", ctx.ShowEditPanel)("KeyId", ctx.SelectedKeyId);
-        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.APIKeyCreateDialogComponent, i4.APIKeyEditPanelComponent, i5.APIKeyListComponent, i6.APIApplicationsPanelComponent, i7.APIScopesPanelComponent, i8.APIUsagePanelComponent], styles: ["\n\n.api-keys-dashboard[_ngcontent-%COMP%] {\n    display: flex;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.api-keys-dashboard.panel-open[_ngcontent-%COMP%]   .dashboard-content[_ngcontent-%COMP%] {\n    overflow: hidden;\n}\n\n\n\n.dashboard-nav[_ngcontent-%COMP%] {\n    width: 220px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.nav-header[_ngcontent-%COMP%] {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.nav-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 700;\n    font-size: 16px;\n    color: var(--mj-text-primary);\n}\n\n.nav-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n}\n\n.nav-items[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 12px;\n    overflow-y: auto;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 4px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    width: 100%;\n    text-align: left;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-label[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 22px;\n    height: 20px;\n    padding: 0 6px;\n    background: var(--mj-bg-surface-active);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.nav-item.active[_ngcontent-%COMP%]   .nav-badge[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n\n\n.dashboard-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    min-width: 0;\n}\n\n.content-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n\n\n.list-view-header[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.back-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n\n\n.overview-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.overview-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.overview-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-refresh[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-refresh[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.btn-refresh[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-status-success-bg);\n    border: 1px solid var(--mj-status-success-border);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning-bg);\n    border-color: var(--mj-color-accent-300);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%] {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error-border);\n}\n\n.health-score-container[_ngcontent-%COMP%] {\n    margin-right: 24px;\n}\n\n.health-score-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart[_ngcontent-%COMP%] {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: var(--mj-border-default);\n    stroke-width: 3.8;\n}\n\n.circle[_ngcontent-%COMP%] {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: var(--mj-status-success);\n    animation: _ngcontent-%COMP%_progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: var(--mj-color-warning-500);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: var(--mj-status-error);\n}\n\n@keyframes _ngcontent-%COMP%_progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.health-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.health-label[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-color-success-600);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-color-error-600);\n}\n\n.health-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-error-600);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-alert[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-warning-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-brand-primary-hover);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-info-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-info-text[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-ok[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-success-600);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n\n\n.kpi-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-card.active[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-color-warning-500) 0%, var(--mj-brand-primary-hover) 100%);\n}\n\n.kpi-card.danger[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-status-error) 0%, var(--mj-color-error-600) 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-text-inverse);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-trend.success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning[_ngcontent-%COMP%] {\n    color: var(--mj-color-warning-500);\n}\n\n.kpi-trend[_ngcontent-%COMP%]   .percentage[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n\n\n.content-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.keys-panel[_ngcontent-%COMP%] {\n    grid-row: span 1;\n}\n\n.scope-panel[_ngcontent-%COMP%] {\n    grid-row: span 1;\n}\n\n.activity-panel[_ngcontent-%COMP%] {\n    grid-column: span 2;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.panel-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 14px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.key-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, var(--mj-color-neutral-500) 0%, var(--mj-color-neutral-600) 100%);\n    border-radius: 8px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.key-icon.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.key-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.key-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.key-hash[_ngcontent-%COMP%] {\n    font-family: monospace;\n    background: var(--mj-bg-surface-active);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 11px;\n}\n\n.key-status[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    margin-left: 16px;\n}\n\n.last-used[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.expiration[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.expiration.expiring-soon[_ngcontent-%COMP%] {\n    color: var(--mj-color-warning-500);\n    font-weight: 500;\n}\n\n.expiration.expiring-critical[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.expiration.expired[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 600;\n}\n\n\n\n.scope-chart[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container[_ngcontent-%COMP%] {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin: 0 auto;\n}\n\n.donut-chart[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment[_ngcontent-%COMP%]:hover {\n    opacity: 0.8;\n}\n\n.donut-center[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.scope-legend[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.legend-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-value[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n}\n\n\n\n.activity-list[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 12px;\n}\n\n.activity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.activity-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, var(--mj-color-brand-100));\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%] {\n    background: var(--mj-color-success-100);\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-success-600);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%] {\n    background: var(--mj-color-indigo-100);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-indigo-500);\n}\n\n.activity-icon.action-revoked[_ngcontent-%COMP%] {\n    background: var(--mj-color-error-100);\n}\n\n.activity-icon.action-revoked[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-error-600);\n}\n\n.activity-icon.action-used[_ngcontent-%COMP%] {\n    background: var(--mj-color-brand-100);\n}\n\n.activity-icon.action-used[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n.activity-icon.action-extended[_ngcontent-%COMP%] {\n    background: var(--mj-color-info-100);\n}\n\n.activity-icon.action-extended[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-info);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.activity-action[_ngcontent-%COMP%] {\n    font-weight: 500;\n    text-transform: capitalize;\n}\n\n.activity-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n    transform: translateY(-2px);\n}\n\n.quick-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n}\n\n.quick-action[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n\n\n.security-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-color-brand-50) 0%, var(--mj-color-brand-100) 100%);\n    border-radius: 12px;\n    border: 1px solid var(--mj-color-accent-300);\n}\n\n.security-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-color-brand-800);\n    line-height: 1.5;\n}\n\n.notice-content[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n\n\n.mobile-nav-toggle[_ngcontent-%COMP%] {\n    display: none;\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    width: 56px;\n    height: 56px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 50%;\n    color: var(--mj-text-inverse);\n    font-size: 24px;\n    box-shadow: var(--mj-shadow-brand-md);\n    cursor: pointer;\n    z-index: 50;\n    transition: transform 0.2s ease;\n}\n\n.mobile-nav-toggle[_ngcontent-%COMP%]:hover {\n    transform: scale(1.05);\n}\n\n\n\n.mobile-nav-overlay[_ngcontent-%COMP%] {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 90;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n    .content-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .activity-panel[_ngcontent-%COMP%] {\n        grid-column: span 1;\n    }\n\n    .scope-chart[_ngcontent-%COMP%] {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container[_ngcontent-%COMP%] {\n        width: 140px;\n        height: 140px;\n    }\n\n    .scope-legend[_ngcontent-%COMP%] {\n        flex: 1;\n    }\n\n    .dashboard-nav[_ngcontent-%COMP%] {\n        width: 200px;\n    }\n}\n\n\n\n@media (max-width: 768px) {\n    .api-keys-dashboard[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .dashboard-nav[_ngcontent-%COMP%] {\n        position: fixed;\n        top: 0;\n        left: -280px;\n        width: 280px;\n        height: 100%;\n        z-index: 100;\n        transition: left 0.3s ease;\n        box-shadow: var(--mj-shadow-xl);\n    }\n\n    .api-keys-dashboard.nav-open[_ngcontent-%COMP%]   .dashboard-nav[_ngcontent-%COMP%] {\n        left: 0;\n    }\n\n    .mobile-nav-toggle[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .mobile-nav-overlay[_ngcontent-%COMP%] {\n        display: block;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.3s ease;\n    }\n\n    .api-keys-dashboard.nav-open[_ngcontent-%COMP%]   .mobile-nav-overlay[_ngcontent-%COMP%] {\n        opacity: 1;\n        pointer-events: auto;\n    }\n\n    .dashboard-content[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .content-wrapper[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .overview-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-end;\n    }\n\n    .health-banner[_ngcontent-%COMP%] {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container[_ngcontent-%COMP%] {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .scope-chart[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .activity-list[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .key-item[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .key-status[_ngcontent-%COMP%] {\n        width: 100%;\n        flex-direction: row;\n        justify-content: flex-start;\n        margin-left: 54px;\n        margin-top: 8px;\n        gap: 12px;\n    }\n}\n\n\n\n@media (max-width: 480px) {\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-card[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n    }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 40px;\n        height: 40px;\n    }\n\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 20px;\n    }\n\n    .overview-title[_ngcontent-%COMP%] {\n        font-size: 20px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n        padding: 8px 16px;\n        font-size: 13px;\n    }\n}"] });
+        } }, dependencies: [i1.NgClass, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i2.MJPageBodyInteriorComponent, i2.MJRefreshButtonComponent, i2.MJTabNavComponent, i3.LoadingComponent, i4.APIKeyCreateDialogComponent, i5.APIKeyEditPanelComponent, i6.APIKeyListComponent, i7.APIApplicationsPanelComponent, i8.APIScopesPanelComponent, i9.APIUsagePanelComponent], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n.api-keys-loading[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\n\n.list-view-header[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.back-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-status-success-bg);\n    border: 1px solid var(--mj-status-success-border);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning-bg);\n    border-color: var(--mj-color-accent-300);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%] {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error-border);\n}\n\n.health-score-container[_ngcontent-%COMP%] {\n    margin-right: 24px;\n}\n\n.health-score-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart[_ngcontent-%COMP%] {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: var(--mj-border-default);\n    stroke-width: 3.8;\n}\n\n.circle[_ngcontent-%COMP%] {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: var(--mj-status-success);\n    animation: _ngcontent-%COMP%_progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: var(--mj-color-warning-500);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: var(--mj-status-error);\n}\n\n@keyframes _ngcontent-%COMP%_progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.health-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.health-label[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-color-success-600);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-color-error-600);\n}\n\n.health-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-error-600);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-alert[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-warning-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-brand-primary-hover);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-info-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-info-text[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-ok[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-success-600);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n\n\n.kpi-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-card.active[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-color-warning-500) 0%, var(--mj-brand-primary-hover) 100%);\n}\n\n.kpi-card.danger[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-status-error) 0%, var(--mj-color-error-600) 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-text-inverse);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-trend.success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning[_ngcontent-%COMP%] {\n    color: var(--mj-color-warning-500);\n}\n\n.kpi-trend[_ngcontent-%COMP%]   .percentage[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n\n\n.content-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.keys-panel[_ngcontent-%COMP%] {\n    grid-row: span 1;\n}\n\n.scope-panel[_ngcontent-%COMP%] {\n    grid-row: span 1;\n}\n\n.activity-panel[_ngcontent-%COMP%] {\n    grid-column: span 2;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.panel-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 14px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.key-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, var(--mj-color-neutral-500) 0%, var(--mj-color-neutral-600) 100%);\n    border-radius: 8px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.key-icon.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.key-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.key-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.key-hash[_ngcontent-%COMP%] {\n    font-family: monospace;\n    background: var(--mj-bg-surface-active);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 11px;\n}\n\n.key-status[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    margin-left: 16px;\n}\n\n.last-used[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.expiration[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.expiration.expiring-soon[_ngcontent-%COMP%] {\n    color: var(--mj-color-warning-500);\n    font-weight: 500;\n}\n\n.expiration.expiring-critical[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.expiration.expired[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 600;\n}\n\n\n\n.scope-chart[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container[_ngcontent-%COMP%] {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin: 0 auto;\n}\n\n.donut-chart[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment[_ngcontent-%COMP%]:hover {\n    opacity: 0.8;\n}\n\n.donut-center[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.scope-legend[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.legend-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-value[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n}\n\n\n\n.activity-list[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 12px;\n}\n\n.activity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.activity-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, var(--mj-color-brand-100));\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%] {\n    background: var(--mj-color-success-100);\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-success-600);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%] {\n    background: var(--mj-color-indigo-100);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-indigo-500);\n}\n\n.activity-icon.action-revoked[_ngcontent-%COMP%] {\n    background: var(--mj-color-error-100);\n}\n\n.activity-icon.action-revoked[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-color-error-600);\n}\n\n.activity-icon.action-used[_ngcontent-%COMP%] {\n    background: var(--mj-color-brand-100);\n}\n\n.activity-icon.action-used[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n.activity-icon.action-extended[_ngcontent-%COMP%] {\n    background: var(--mj-color-info-100);\n}\n\n.activity-icon.action-extended[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-info);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.activity-action[_ngcontent-%COMP%] {\n    font-weight: 500;\n    text-transform: capitalize;\n}\n\n.activity-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n    transform: translateY(-2px);\n}\n\n.quick-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n}\n\n.quick-action[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n\n\n.security-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-color-brand-50) 0%, var(--mj-color-brand-100) 100%);\n    border-radius: 12px;\n    border: 1px solid var(--mj-color-accent-300);\n}\n\n.security-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-color-brand-800);\n    line-height: 1.5;\n}\n\n.notice-content[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n    .content-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .activity-panel[_ngcontent-%COMP%] {\n        grid-column: span 1;\n    }\n\n    .scope-chart[_ngcontent-%COMP%] {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container[_ngcontent-%COMP%] {\n        width: 140px;\n        height: 140px;\n    }\n\n    .scope-legend[_ngcontent-%COMP%] {\n        flex: 1;\n    }\n}\n\n\n\n@media (max-width: 768px) {\n    .content-wrapper[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .health-banner[_ngcontent-%COMP%] {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container[_ngcontent-%COMP%] {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .scope-chart[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .activity-list[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .key-item[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .key-status[_ngcontent-%COMP%] {\n        width: 100%;\n        flex-direction: row;\n        justify-content: flex-start;\n        margin-left: 54px;\n        margin-top: 8px;\n        gap: 12px;\n    }\n}\n\n\n\n@media (max-width: 480px) {\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-card[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n    }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 40px;\n        height: 40px;\n    }\n\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 20px;\n    }\n}"] });
 };
 APIKeysResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'APIKeysResource')
@@ -1135,10 +1093,10 @@ APIKeysResourceComponent = __decorate([
 export { APIKeysResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeysResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-api-keys-resource', template: "<div class=\"api-keys-dashboard\" [class.panel-open]=\"ShowCreateDialog || ShowEditPanel\" [class.nav-open]=\"NavOpen\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading API Keys...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Left Navigation Sidebar -->\n    <div class=\"dashboard-nav\">\n      <div class=\"nav-header\">\n        <div class=\"nav-title\">\n          <i class=\"fa-solid fa-key\"></i>\n          <span>API Keys</span>\n        </div>\n      </div>\n      <div class=\"nav-items\">\n        <button class=\"nav-item\" [class.active]=\"MainTab === 'keys'\" (click)=\"switchTab('keys'); closeNav()\">\n          <i class=\"fa-solid fa-key\"></i>\n          <span class=\"nav-label\">API Keys</span>\n          <span class=\"nav-badge\">{{TotalKeys}}</span>\n        </button>\n        <button class=\"nav-item\" [class.active]=\"MainTab === 'applications'\" (click)=\"switchTab('applications'); closeNav()\">\n          <i class=\"fa-solid fa-cube\"></i>\n          <span class=\"nav-label\">Applications</span>\n          <span class=\"nav-badge\">{{ApplicationCount}}</span>\n        </button>\n        <button class=\"nav-item\" [class.active]=\"MainTab === 'scopes'\" (click)=\"switchTab('scopes'); closeNav()\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"nav-label\">Scopes</span>\n          <span class=\"nav-badge\">{{ScopeCount}}</span>\n        </button>\n        <button class=\"nav-item\" [class.active]=\"MainTab === 'usage'\" (click)=\"switchTab('usage'); closeNav()\">\n          <i class=\"fa-solid fa-chart-line\"></i>\n          <span class=\"nav-label\">Usage Analytics</span>\n        </button>\n      </div>\n    </div>\n    <!-- Main Content Area -->\n    <div class=\"dashboard-content\">\n      <div class=\"content-wrapper\">\n        <!-- Keys Tab Content -->\n        @if (MainTab === 'keys') {\n          <!-- Overview View -->\n          @if (CurrentView === 'overview') {\n            <!-- Header with Actions -->\n            <div class=\"overview-header\">\n              <div class=\"header-left\">\n                <h2 class=\"overview-title\">API Keys Management</h2>\n                <p class=\"overview-subtitle\">Manage API keys for external integrations and services</p>\n              </div>\n              <div class=\"header-actions\">\n                <button class=\"btn-refresh\" (click)=\"refresh()\" title=\"Refresh\">\n                  <i class=\"fa-solid fa-refresh\"></i>\n                </button>\n                @if (UserCanCreateKeys) {\n                  <button class=\"btn-primary\" (click)=\"openCreateDialog()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>Generate New Key</span>\n                  </button>\n                }\n              </div>\n            </div>\n            <!-- Health Score Banner -->\n            <div class=\"health-banner\" [ngClass]=\"getHealthClass()\">\n              <div class=\"health-score-container\">\n                <div class=\"health-score-ring\">\n                  <svg viewBox=\"0 0 36 36\" class=\"circular-chart\">\n                    <path class=\"circle-bg\"\n                                    d=\"M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831\"\n                      />\n                    <path class=\"circle\"\n                      [attr.stroke-dasharray]=\"getHealthScore() + ', 100'\"\n                                    d=\"M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831\"\n                      />\n                  </svg>\n                  <div class=\"health-score-value\">{{getHealthScore()}}</div>\n                </div>\n              </div>\n              <div class=\"health-info\">\n                <div class=\"health-label\">{{getHealthLabel()}}</div>\n                <div class=\"health-details\">\n                  @if (ExpiredKeys > 0) {\n                    <span class=\"health-alert\" (click)=\"showListView('expired')\">\n                      <i class=\"fa-solid fa-circle-exclamation\"></i>\n                      {{ExpiredKeys}} expired\n                    </span>\n                  }\n                  @if (ExpiringSoonCount > 0) {\n                    <span class=\"health-warning-text\" (click)=\"showListView('expiring')\">\n                      <i class=\"fa-solid fa-clock\"></i>\n                      {{ExpiringSoonCount}} expiring soon\n                    </span>\n                  }\n                  @if (NeverUsedKeys > 0) {\n                    <span class=\"health-info-text\" (click)=\"showListView('never-used')\">\n                      <i class=\"fa-solid fa-question-circle\"></i>\n                      {{NeverUsedKeys}} never used\n                    </span>\n                  }\n                  @if (ExpiredKeys === 0 && ExpiringSoonCount === 0 && NeverUsedKeys === 0) {\n                    <span class=\"health-ok\">\n                      <i class=\"fa-solid fa-check-circle\"></i>\n                      All keys healthy\n                    </span>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- KPI Cards Row -->\n            <div class=\"kpi-row\">\n              <div class=\"kpi-card clickable\" (click)=\"showListView('all')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{TotalKeys}}</div>\n                  <div class=\"kpi-label\">Total Keys</div>\n                </div>\n                <div class=\"kpi-trend\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n              </div>\n              <div class=\"kpi-card active clickable\" (click)=\"showListView('active')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ActiveKeys}}</div>\n                  <div class=\"kpi-label\">Active</div>\n                </div>\n                <div class=\"kpi-trend success\">\n                  <span class=\"percentage\">{{TotalKeys > 0 ? (ActiveKeys / TotalKeys * 100).toFixed(0) : 100}}%</span>\n                </div>\n              </div>\n              <div class=\"kpi-card clickable\" [class.warning]=\"ExpiringSoonCount > 0\" (click)=\"showListView('expiring')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ExpiringSoonCount}}</div>\n                  <div class=\"kpi-label\">Expiring Soon</div>\n                </div>\n                @if (ExpiringSoonCount > 0) {\n                  <div class=\"kpi-trend warning\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n              <div class=\"kpi-card clickable\" [class.danger]=\"RevokedKeys > 0\" (click)=\"showListView('revoked')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-ban\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{RevokedKeys}}</div>\n                  <div class=\"kpi-label\">Revoked</div>\n                </div>\n              </div>\n              <div class=\"kpi-card clickable\" (click)=\"switchTab('scopes')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-shield-halved\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ScopeStats.length}}</div>\n                  <div class=\"kpi-label\">Scope Categories</div>\n                </div>\n              </div>\n            </div>\n            <!-- Content Grid -->\n            <div class=\"content-grid\">\n              <!-- Recently Used Keys -->\n              <div class=\"panel keys-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span>Recently Used Keys</span>\n                  </div>\n                  <button class=\"panel-action\" (click)=\"showListView('all')\">\n                    View All <i class=\"fa-solid fa-arrow-right\"></i>\n                  </button>\n                </div>\n                <div class=\"panel-body\">\n                  @if (TopUsedKeys.length > 0) {\n                    <div class=\"key-list\">\n                      @for (key of TopUsedKeys; track key) {\n                        <div class=\"key-item\" (click)=\"openEditPanel(key)\">\n                          <div class=\"key-icon\" [class.active]=\"key.Status === 'Active'\">\n                            <i class=\"fa-solid fa-key\"></i>\n                          </div>\n                          <div class=\"key-info\">\n                            <div class=\"key-label\">{{key.Label}}</div>\n                            <div class=\"key-meta\">\n                              <span class=\"key-user\">{{key.User}}</span>\n                              <span class=\"key-hash\">...{{key.Hash.slice(-8)}}</span>\n                            </div>\n                          </div>\n                          <div class=\"key-status\">\n                            <div class=\"last-used\">{{formatDate(key.LastUsedAt)}}</div>\n                            <div class=\"expiration\" [ngClass]=\"getExpirationClass(key)\">\n                              {{formatExpiration(key.ExpiresAt)}}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (TopUsedKeys.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-key\"></i>\n                      <span>No active keys with recent usage</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Scope Categories -->\n              <div class=\"panel scope-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span>Permission Scopes</span>\n                  </div>\n                  <span class=\"panel-subtitle\">Available scope categories</span>\n                </div>\n                <div class=\"panel-body\">\n                  @if (ScopeStats.length > 0) {\n                    <div class=\"scope-chart\">\n                      <!-- Visual Donut Chart -->\n                      <div class=\"donut-chart-container\">\n                        <svg viewBox=\"0 0 100 100\" class=\"donut-chart\">\n                          <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"12\"/>\n                          @for (stat of ScopeStats; track stat; let i = $index) {\n                            <ng-container>\n                              <circle\n                                cx=\"50\" cy=\"50\" r=\"40\"\n                                fill=\"none\"\n                                [attr.stroke]=\"stat.color\"\n                                stroke-width=\"12\"\n                                [attr.stroke-dasharray]=\"stat.percentage * 2.51 + ' ' + (251 - stat.percentage * 2.51)\"\n                                [attr.stroke-dashoffset]=\"getDonutOffset(i)\"\n                                class=\"donut-segment\"\n                                (click)=\"onScopeClick(stat)\"\n                                />\n                            </ng-container>\n                          }\n                        </svg>\n                        <div class=\"donut-center\">\n                          <div class=\"donut-total\">{{ScopeStats.length}}</div>\n                          <div class=\"donut-label\">Categories</div>\n                        </div>\n                      </div>\n                      <!-- Legend -->\n                      <div class=\"scope-legend\">\n                        @for (stat of ScopeStats; track stat) {\n                          <div class=\"legend-item\" (click)=\"onScopeClick(stat)\">\n                            <div class=\"legend-color\" [style.backgroundColor]=\"stat.color\"></div>\n                            <div class=\"legend-info\">\n                              <div class=\"legend-name\">\n                                <i [class]=\"stat.iconClass\"></i>\n                                {{stat.category}}\n                              </div>\n                              <div class=\"legend-value\">{{stat.count}} scopes</div>\n                            </div>\n                            <i class=\"fa-solid fa-chevron-right legend-arrow\"></i>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (ScopeStats.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-shield-halved\"></i>\n                      <span>No scopes configured</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Recent Activity -->\n              <div class=\"panel activity-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                    <span>Recent Activity</span>\n                  </div>\n                </div>\n                <div class=\"panel-body\">\n                  @if (RecentActivity.length > 0) {\n                    <div class=\"activity-list\">\n                      @for (activity of RecentActivity; track activity) {\n                        <div class=\"activity-item\" (click)=\"onActivityClick(activity)\">\n                          <div class=\"activity-icon\" [ngClass]=\"getActionClass(activity.action)\">\n                            <i [class]=\"getActionIcon(activity.action)\"></i>\n                          </div>\n                          <div class=\"activity-info\">\n                            <div class=\"activity-name\">{{activity.keyLabel}}</div>\n                            <div class=\"activity-meta\">\n                              <span class=\"activity-action\">{{activity.action}}</span>\n                              @if (activity.user) {\n                                <span class=\"activity-user\">by {{activity.user}}</span>\n                              }\n                            </div>\n                          </div>\n                          <div class=\"activity-time\">\n                            {{formatDate(activity.date)}}\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (RecentActivity.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-inbox\"></i>\n                      <span>No recent activity</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- Quick Actions -->\n            @if (UserCanCreateKeys) {\n              <div class=\"quick-actions\">\n                <div class=\"quick-actions-title\">Quick Actions</div>\n                <div class=\"quick-actions-grid\">\n                  <button class=\"quick-action\" (click)=\"openCreateDialog()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>Generate Key</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('all')\">\n                    <i class=\"fa-solid fa-list\"></i>\n                    <span>View All Keys</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('expiring')\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span>Expiring Keys</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('never-used')\">\n                    <i class=\"fa-solid fa-question-circle\"></i>\n                    <span>Never Used</span>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Security Notice -->\n            <div class=\"security-notice\">\n              <i class=\"fa-solid fa-shield-check\"></i>\n              <div class=\"notice-content\">\n                <strong>Security Best Practices:</strong>\n                API keys should be rotated regularly and revoked when no longer needed.\n                Keys are hashed and stored securely - the raw key is only shown once at creation time.\n                All API key usage is logged for audit purposes.\n              </div>\n            </div>\n          }\n          <!-- List View -->\n          @if (CurrentView === 'list') {\n            <div class=\"list-view-header\">\n              <button class=\"back-btn\" (click)=\"showOverview()\">\n                <i class=\"fa-solid fa-arrow-left\"></i>\n                Back to Overview\n              </button>\n            </div>\n            <mj-api-key-list #keyList\n              [Filter]=\"ListFilter\"\n              (KeySelected)=\"onKeySelected($event)\"\n              (CreateRequested)=\"openCreateDialog()\">\n            </mj-api-key-list>\n          }\n        }\n        <!-- Applications Tab Content -->\n        @if (MainTab === 'applications') {\n          <mj-api-applications-panel\n            (ApplicationUpdated)=\"onDataUpdated()\">\n          </mj-api-applications-panel>\n        }\n        <!-- Scopes Tab Content -->\n        @if (MainTab === 'scopes') {\n          <mj-api-scopes-panel\n            (ScopeUpdated)=\"onDataUpdated()\">\n          </mj-api-scopes-panel>\n        }\n        <!-- Usage Tab Content -->\n        @if (MainTab === 'usage') {\n          <mj-api-usage-panel></mj-api-usage-panel>\n        }\n      </div><!-- /.content-wrapper -->\n    </div><!-- /.dashboard-content -->\n    <!-- Mobile Navigation Toggle -->\n    <button class=\"mobile-nav-toggle\" (click)=\"toggleNav()\">\n      <i class=\"fa-solid\" [class.fa-bars]=\"!NavOpen\" [class.fa-times]=\"NavOpen\"></i>\n    </button>\n    <!-- Mobile Navigation Overlay -->\n    <div class=\"mobile-nav-overlay\" (click)=\"closeNav()\"></div>\n  }\n\n  <!-- Create Dialog -->\n  <mj-api-key-create-dialog\n    [Visible]=\"ShowCreateDialog\"\n    (Created)=\"onKeyCreated($event)\"\n    (Closed)=\"onCreateDialogClosed()\">\n  </mj-api-key-create-dialog>\n\n  <!-- Edit Panel -->\n  <mj-api-key-edit-panel\n    [Visible]=\"ShowEditPanel\"\n    [KeyId]=\"SelectedKeyId\"\n    (Updated)=\"onKeyUpdated()\"\n    (Revoked)=\"onKeyRevoked()\"\n    (Closed)=\"onEditPanelClosed()\">\n  </mj-api-key-edit-panel>\n</div>\n", styles: ["/* Main Dashboard Container */\n.api-keys-dashboard {\n    display: flex;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.api-keys-dashboard.panel-open .dashboard-content {\n    overflow: hidden;\n}\n\n/* Left Navigation Sidebar */\n.dashboard-nav {\n    width: 220px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.nav-header {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.nav-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 700;\n    font-size: 16px;\n    color: var(--mj-text-primary);\n}\n\n.nav-title i {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n}\n\n.nav-items {\n    flex: 1;\n    padding: 12px;\n    overflow-y: auto;\n}\n\n.nav-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 4px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    width: 100%;\n    text-align: left;\n}\n\n.nav-item:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n.nav-item.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n.nav-item i {\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.nav-item .nav-label {\n    flex: 1;\n}\n\n.nav-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 22px;\n    height: 20px;\n    padding: 0 6px;\n    background: var(--mj-bg-surface-active);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.nav-item.active .nav-badge {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n/* Dashboard Content Area */\n.dashboard-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    min-width: 0;\n}\n\n.content-wrapper {\n    flex: 1;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n/* List View Header */\n.list-view-header {\n    margin-bottom: 16px;\n}\n\n.back-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.back-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* Header */\n.overview-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left {\n    flex: 1;\n}\n\n.overview-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.overview-subtitle {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-refresh {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-refresh:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.btn-refresh i {\n    color: var(--mj-text-secondary);\n}\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n/* Health Banner */\n.health-banner {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-status-success-bg);\n    border: 1px solid var(--mj-status-success-border);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning {\n    background: var(--mj-status-warning-bg);\n    border-color: var(--mj-color-accent-300);\n}\n\n.health-banner.health-critical {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error-border);\n}\n\n.health-score-container {\n    margin-right: 24px;\n}\n\n.health-score-ring {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg {\n    fill: none;\n    stroke: var(--mj-border-default);\n    stroke-width: 3.8;\n}\n\n.circle {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: var(--mj-status-success);\n    animation: progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning .circle {\n    stroke: var(--mj-color-warning-500);\n}\n\n.health-banner.health-critical .circle {\n    stroke: var(--mj-status-error);\n}\n\n@keyframes progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.health-info {\n    flex: 1;\n}\n\n.health-label {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-color-success-600);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning .health-label {\n    color: var(--mj-brand-primary-hover);\n}\n\n.health-banner.health-critical .health-label {\n    color: var(--mj-color-error-600);\n}\n\n.health-details {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-error-600);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-alert:hover {\n    text-decoration: underline;\n}\n\n.health-warning-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-brand-primary-hover);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text:hover {\n    text-decoration: underline;\n}\n\n.health-info-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-info-text:hover {\n    text-decoration: underline;\n}\n\n.health-ok {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-success-600);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n/* KPI Cards */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable {\n    cursor: pointer;\n}\n\n.kpi-card.clickable:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-card.active .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n}\n\n.kpi-card.warning .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-color-warning-500) 0%, var(--mj-brand-primary-hover) 100%);\n}\n\n.kpi-card.danger .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-status-error) 0%, var(--mj-color-error-600) 100%);\n}\n\n.kpi-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon i {\n    font-size: 20px;\n    color: var(--mj-text-inverse);\n}\n\n.kpi-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-trend.success {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning {\n    color: var(--mj-color-warning-500);\n}\n\n.kpi-trend .percentage {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n/* Content Grid */\n.content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.keys-panel {\n    grid-row: span 1;\n}\n\n.scope-panel {\n    grid-row: span 1;\n}\n\n.activity-panel {\n    grid-column: span 2;\n}\n\n.panel {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n}\n\n.panel-subtitle {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.panel-action {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action:hover {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.panel-body {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Key List */\n.key-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.key-item {\n    display: flex;\n    align-items: center;\n    padding: 14px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.key-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, var(--mj-color-neutral-500) 0%, var(--mj-color-neutral-600) 100%);\n    border-radius: 8px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.key-icon.active {\n    background: var(--mj-brand-primary);\n}\n\n.key-icon i {\n    font-size: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.key-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.key-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.key-hash {\n    font-family: monospace;\n    background: var(--mj-bg-surface-active);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 11px;\n}\n\n.key-status {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    margin-left: 16px;\n}\n\n.last-used {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.expiration {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.expiration.expiring-soon {\n    color: var(--mj-color-warning-500);\n    font-weight: 500;\n}\n\n.expiration.expiring-critical {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.expiration.expired {\n    color: var(--mj-status-error);\n    font-weight: 600;\n}\n\n/* Scope Chart */\n.scope-chart {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin: 0 auto;\n}\n\n.donut-chart {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment:hover {\n    opacity: 0.8;\n}\n\n.donut-center {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label {\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n/* Scope Legend */\n.scope-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info {\n    flex: 1;\n}\n\n.legend-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name i {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-value {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-arrow {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n}\n\n/* Activity List */\n.activity-list {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 12px;\n}\n\n.activity-item {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.activity-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, var(--mj-color-brand-100));\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-created {\n    background: var(--mj-color-success-100);\n}\n\n.activity-icon.action-created i {\n    color: var(--mj-color-success-600);\n}\n\n.activity-icon.action-updated {\n    background: var(--mj-color-indigo-100);\n}\n\n.activity-icon.action-updated i {\n    color: var(--mj-color-indigo-500);\n}\n\n.activity-icon.action-revoked {\n    background: var(--mj-color-error-100);\n}\n\n.activity-icon.action-revoked i {\n    color: var(--mj-color-error-600);\n}\n\n.activity-icon.action-used {\n    background: var(--mj-color-brand-100);\n}\n\n.activity-icon.action-used i {\n    color: var(--mj-brand-primary-hover);\n}\n\n.activity-icon.action-extended {\n    background: var(--mj-color-info-100);\n}\n\n.activity-icon.action-extended i {\n    color: var(--mj-status-info);\n}\n\n.activity-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.activity-action {\n    font-weight: 500;\n    text-transform: capitalize;\n}\n\n.activity-time {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n/* Quick Actions */\n.quick-actions {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n    transform: translateY(-2px);\n}\n\n.quick-action i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n}\n\n.quick-action span {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n/* Security Notice */\n.security-notice {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-color-brand-50) 0%, var(--mj-color-brand-100) 100%);\n    border-radius: 12px;\n    border: 1px solid var(--mj-color-accent-300);\n}\n\n.security-notice i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content {\n    font-size: 13px;\n    color: var(--mj-color-brand-800);\n    line-height: 1.5;\n}\n\n.notice-content strong {\n    font-weight: 600;\n}\n\n/* Mobile Navigation Toggle */\n.mobile-nav-toggle {\n    display: none;\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    width: 56px;\n    height: 56px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 50%;\n    color: var(--mj-text-inverse);\n    font-size: 24px;\n    box-shadow: var(--mj-shadow-brand-md);\n    cursor: pointer;\n    z-index: 50;\n    transition: transform 0.2s ease;\n}\n\n.mobile-nav-toggle:hover {\n    transform: scale(1.05);\n}\n\n/* Mobile Nav Overlay */\n.mobile-nav-overlay {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 90;\n}\n\n/* ========================================\n   Responsive Styles\n   ======================================== */\n\n/* Tablet */\n@media (max-width: 1024px) {\n    .content-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .activity-panel {\n        grid-column: span 1;\n    }\n\n    .scope-chart {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container {\n        width: 140px;\n        height: 140px;\n    }\n\n    .scope-legend {\n        flex: 1;\n    }\n\n    .dashboard-nav {\n        width: 200px;\n    }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n    .api-keys-dashboard {\n        flex-direction: column;\n    }\n\n    .dashboard-nav {\n        position: fixed;\n        top: 0;\n        left: -280px;\n        width: 280px;\n        height: 100%;\n        z-index: 100;\n        transition: left 0.3s ease;\n        box-shadow: var(--mj-shadow-xl);\n    }\n\n    .api-keys-dashboard.nav-open .dashboard-nav {\n        left: 0;\n    }\n\n    .mobile-nav-toggle {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .mobile-nav-overlay {\n        display: block;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.3s ease;\n    }\n\n    .api-keys-dashboard.nav-open .mobile-nav-overlay {\n        opacity: 1;\n        pointer-events: auto;\n    }\n\n    .dashboard-content {\n        width: 100%;\n    }\n\n    .content-wrapper {\n        padding: 16px;\n    }\n\n    .overview-header {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-actions {\n        width: 100%;\n        justify-content: flex-end;\n    }\n\n    .health-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .scope-chart {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .activity-list {\n        grid-template-columns: 1fr;\n    }\n\n    .key-item {\n        flex-wrap: wrap;\n    }\n\n    .key-status {\n        width: 100%;\n        flex-direction: row;\n        justify-content: flex-start;\n        margin-left: 54px;\n        margin-top: 8px;\n        gap: 12px;\n    }\n}\n\n/* Small Mobile */\n@media (max-width: 480px) {\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-card {\n        padding: 12px 16px;\n    }\n\n    .kpi-icon {\n        width: 40px;\n        height: 40px;\n    }\n\n    .kpi-value {\n        font-size: 20px;\n    }\n\n    .overview-title {\n        font-size: 20px;\n    }\n\n    .btn-primary {\n        padding: 8px 16px;\n        font-size: 13px;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-keys-resource', template: "<!--\n  APIKeysResource is only ever loaded inside Admin \u2192 Identity & Access's\n  left-nav shell. Per Section 9b/10 of plans/explorer-chrome-conventions.md,\n  shell sub-pages must NOT render a page-level <mj-page-layout>+<mj-page-header>\n  (that produces a doubled-header). Instead the body opens with an\n  <mj-page-header-interior> card carrying the L2 tab nav and action chrome.\n-->\n<mj-page-header-interior\n  Role=\"region\"\n  AriaLabel=\"API Keys\"\n  [Title]=\"currentTabTitle\"\n  [Subtitle]=\"currentTabSubtitle\">\n  <div toolbar>\n    <mj-tab-nav\n      [Tabs]=\"tabsConfig\"\n      [ActiveKey]=\"MainTab\"\n      (TabChange)=\"onTabChange($event)\">\n    </mj-tab-nav>\n  </div>\n  <div actions>\n    <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"refresh()\"></mj-refresh-button>\n    @if (MainTab === 'keys' && CurrentView === 'overview' && UserCanCreateKeys) {\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"openCreateDialog()\" aria-label=\"Generate a new API key\">\n        <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n        Generate New Key\n      </button>\n    }\n  </div>\n</mj-page-header-interior>\n\n@if (IsLoading) {\n  <div class=\"api-keys-loading\">\n    <mj-loading text=\"Loading API Keys...\"></mj-loading>\n  </div>\n} @else {\n  <mj-page-body-interior>\n        <!-- Keys Tab Content -->\n        @if (MainTab === 'keys') {\n          <!-- Overview View \u2014 title + Refresh + Generate New Key now live in the page chrome above. -->\n          @if (CurrentView === 'overview') {\n            <!-- Health Score Banner -->\n            <div class=\"health-banner\" [ngClass]=\"getHealthClass()\">\n              <div class=\"health-score-container\">\n                <div class=\"health-score-ring\">\n                  <svg viewBox=\"0 0 36 36\" class=\"circular-chart\">\n                    <path class=\"circle-bg\"\n                                    d=\"M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831\"\n                      />\n                    <path class=\"circle\"\n                      [attr.stroke-dasharray]=\"getHealthScore() + ', 100'\"\n                                    d=\"M18 2.0845\n                                       a 15.9155 15.9155 0 0 1 0 31.831\n                                       a 15.9155 15.9155 0 0 1 0 -31.831\"\n                      />\n                  </svg>\n                  <div class=\"health-score-value\">{{getHealthScore()}}</div>\n                </div>\n              </div>\n              <div class=\"health-info\">\n                <div class=\"health-label\">{{getHealthLabel()}}</div>\n                <div class=\"health-details\">\n                  @if (ExpiredKeys > 0) {\n                    <span class=\"health-alert\" (click)=\"showListView('expired')\">\n                      <i class=\"fa-solid fa-circle-exclamation\"></i>\n                      {{ExpiredKeys}} expired\n                    </span>\n                  }\n                  @if (ExpiringSoonCount > 0) {\n                    <span class=\"health-warning-text\" (click)=\"showListView('expiring')\">\n                      <i class=\"fa-solid fa-clock\"></i>\n                      {{ExpiringSoonCount}} expiring soon\n                    </span>\n                  }\n                  @if (NeverUsedKeys > 0) {\n                    <span class=\"health-info-text\" (click)=\"showListView('never-used')\">\n                      <i class=\"fa-solid fa-question-circle\"></i>\n                      {{NeverUsedKeys}} never used\n                    </span>\n                  }\n                  @if (ExpiredKeys === 0 && ExpiringSoonCount === 0 && NeverUsedKeys === 0) {\n                    <span class=\"health-ok\">\n                      <i class=\"fa-solid fa-check-circle\"></i>\n                      All keys healthy\n                    </span>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- KPI Cards Row -->\n            <div class=\"kpi-row\">\n              <div class=\"kpi-card clickable\" (click)=\"showListView('all')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{TotalKeys}}</div>\n                  <div class=\"kpi-label\">Total Keys</div>\n                </div>\n                <div class=\"kpi-trend\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n              </div>\n              <div class=\"kpi-card active clickable\" (click)=\"showListView('active')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ActiveKeys}}</div>\n                  <div class=\"kpi-label\">Active</div>\n                </div>\n                <div class=\"kpi-trend success\">\n                  <span class=\"percentage\">{{TotalKeys > 0 ? (ActiveKeys / TotalKeys * 100).toFixed(0) : 100}}%</span>\n                </div>\n              </div>\n              <div class=\"kpi-card clickable\" [class.warning]=\"ExpiringSoonCount > 0\" (click)=\"showListView('expiring')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ExpiringSoonCount}}</div>\n                  <div class=\"kpi-label\">Expiring Soon</div>\n                </div>\n                @if (ExpiringSoonCount > 0) {\n                  <div class=\"kpi-trend warning\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n              <div class=\"kpi-card clickable\" [class.danger]=\"RevokedKeys > 0\" (click)=\"showListView('revoked')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-ban\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{RevokedKeys}}</div>\n                  <div class=\"kpi-label\">Revoked</div>\n                </div>\n              </div>\n              <div class=\"kpi-card clickable\" (click)=\"switchTab('scopes')\">\n                <div class=\"kpi-icon\">\n                  <i class=\"fa-solid fa-shield-halved\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ScopeStats.length}}</div>\n                  <div class=\"kpi-label\">Scope Categories</div>\n                </div>\n              </div>\n            </div>\n            <!-- Content Grid -->\n            <div class=\"content-grid\">\n              <!-- Recently Used Keys -->\n              <div class=\"panel keys-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span>Recently Used Keys</span>\n                  </div>\n                  <button class=\"panel-action\" (click)=\"showListView('all')\">\n                    View All <i class=\"fa-solid fa-arrow-right\"></i>\n                  </button>\n                </div>\n                <div class=\"panel-body\">\n                  @if (TopUsedKeys.length > 0) {\n                    <div class=\"key-list\">\n                      @for (key of TopUsedKeys; track key) {\n                        <div class=\"key-item\" (click)=\"openEditPanel(key)\">\n                          <div class=\"key-icon\" [class.active]=\"key.Status === 'Active'\">\n                            <i class=\"fa-solid fa-key\"></i>\n                          </div>\n                          <div class=\"key-info\">\n                            <div class=\"key-label\">{{key.Label}}</div>\n                            <div class=\"key-meta\">\n                              <span class=\"key-user\">{{key.User}}</span>\n                              <span class=\"key-hash\">...{{key.Hash.slice(-8)}}</span>\n                            </div>\n                          </div>\n                          <div class=\"key-status\">\n                            <div class=\"last-used\">{{formatDate(key.LastUsedAt)}}</div>\n                            <div class=\"expiration\" [ngClass]=\"getExpirationClass(key)\">\n                              {{formatExpiration(key.ExpiresAt)}}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (TopUsedKeys.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-key\"></i>\n                      <span>No active keys with recent usage</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Scope Categories -->\n              <div class=\"panel scope-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span>Permission Scopes</span>\n                  </div>\n                  <span class=\"panel-subtitle\">Available scope categories</span>\n                </div>\n                <div class=\"panel-body\">\n                  @if (ScopeStats.length > 0) {\n                    <div class=\"scope-chart\">\n                      <!-- Visual Donut Chart -->\n                      <div class=\"donut-chart-container\">\n                        <svg viewBox=\"0 0 100 100\" class=\"donut-chart\">\n                          <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"12\"/>\n                          @for (stat of ScopeStats; track stat; let i = $index) {\n                            <ng-container>\n                              <circle\n                                cx=\"50\" cy=\"50\" r=\"40\"\n                                fill=\"none\"\n                                [attr.stroke]=\"stat.color\"\n                                stroke-width=\"12\"\n                                [attr.stroke-dasharray]=\"stat.percentage * 2.51 + ' ' + (251 - stat.percentage * 2.51)\"\n                                [attr.stroke-dashoffset]=\"getDonutOffset(i)\"\n                                class=\"donut-segment\"\n                                (click)=\"onScopeClick(stat)\"\n                                />\n                            </ng-container>\n                          }\n                        </svg>\n                        <div class=\"donut-center\">\n                          <div class=\"donut-total\">{{ScopeStats.length}}</div>\n                          <div class=\"donut-label\">Categories</div>\n                        </div>\n                      </div>\n                      <!-- Legend -->\n                      <div class=\"scope-legend\">\n                        @for (stat of ScopeStats; track stat) {\n                          <div class=\"legend-item\" (click)=\"onScopeClick(stat)\">\n                            <div class=\"legend-color\" [style.backgroundColor]=\"stat.color\"></div>\n                            <div class=\"legend-info\">\n                              <div class=\"legend-name\">\n                                <i [class]=\"stat.iconClass\"></i>\n                                {{stat.category}}\n                              </div>\n                              <div class=\"legend-value\">{{stat.count}} scopes</div>\n                            </div>\n                            <i class=\"fa-solid fa-chevron-right legend-arrow\"></i>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (ScopeStats.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-shield-halved\"></i>\n                      <span>No scopes configured</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Recent Activity -->\n              <div class=\"panel activity-panel\">\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                    <span>Recent Activity</span>\n                  </div>\n                </div>\n                <div class=\"panel-body\">\n                  @if (RecentActivity.length > 0) {\n                    <div class=\"activity-list\">\n                      @for (activity of RecentActivity; track activity) {\n                        <div class=\"activity-item\" (click)=\"onActivityClick(activity)\">\n                          <div class=\"activity-icon\" [ngClass]=\"getActionClass(activity.action)\">\n                            <i [class]=\"getActionIcon(activity.action)\"></i>\n                          </div>\n                          <div class=\"activity-info\">\n                            <div class=\"activity-name\">{{activity.keyLabel}}</div>\n                            <div class=\"activity-meta\">\n                              <span class=\"activity-action\">{{activity.action}}</span>\n                              @if (activity.user) {\n                                <span class=\"activity-user\">by {{activity.user}}</span>\n                              }\n                            </div>\n                          </div>\n                          <div class=\"activity-time\">\n                            {{formatDate(activity.date)}}\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (RecentActivity.length === 0) {\n                    <div class=\"empty-state\">\n                      <i class=\"fa-solid fa-inbox\"></i>\n                      <span>No recent activity</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n            <!-- Quick Actions -->\n            @if (UserCanCreateKeys) {\n              <div class=\"quick-actions\">\n                <div class=\"quick-actions-title\">Quick Actions</div>\n                <div class=\"quick-actions-grid\">\n                  <button class=\"quick-action\" (click)=\"openCreateDialog()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>Generate Key</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('all')\">\n                    <i class=\"fa-solid fa-list\"></i>\n                    <span>View All Keys</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('expiring')\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span>Expiring Keys</span>\n                  </button>\n                  <button class=\"quick-action\" (click)=\"showListView('never-used')\">\n                    <i class=\"fa-solid fa-question-circle\"></i>\n                    <span>Never Used</span>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Security Notice -->\n            <div class=\"security-notice\">\n              <i class=\"fa-solid fa-shield-check\"></i>\n              <div class=\"notice-content\">\n                <strong>Security Best Practices:</strong>\n                API keys should be rotated regularly and revoked when no longer needed.\n                Keys are hashed and stored securely - the raw key is only shown once at creation time.\n                All API key usage is logged for audit purposes.\n              </div>\n            </div>\n          }\n          <!-- List View -->\n          @if (CurrentView === 'list') {\n            <div class=\"list-view-header\">\n              <button class=\"back-btn\" (click)=\"showOverview()\">\n                <i class=\"fa-solid fa-arrow-left\"></i>\n                Back to Overview\n              </button>\n            </div>\n            <mj-api-key-list #keyList\n              [Filter]=\"ListFilter\"\n              (KeySelected)=\"onKeySelected($event)\"\n              (CreateRequested)=\"openCreateDialog()\">\n            </mj-api-key-list>\n          }\n        }\n        <!-- Applications Tab Content -->\n        @if (MainTab === 'applications') {\n          <mj-api-applications-panel\n            (ApplicationUpdated)=\"onDataUpdated()\">\n          </mj-api-applications-panel>\n        }\n        <!-- Scopes Tab Content -->\n        @if (MainTab === 'scopes') {\n          <mj-api-scopes-panel\n            (ScopeUpdated)=\"onDataUpdated()\">\n          </mj-api-scopes-panel>\n        }\n        <!-- Usage Tab Content -->\n        @if (MainTab === 'usage') {\n          <mj-api-usage-panel></mj-api-usage-panel>\n        }\n  </mj-page-body-interior>\n}\n\n<!-- Create Dialog -->\n<mj-api-key-create-dialog\n  [Visible]=\"ShowCreateDialog\"\n  (Created)=\"onKeyCreated($event)\"\n  (Closed)=\"onCreateDialogClosed()\">\n</mj-api-key-create-dialog>\n\n<!-- Edit Panel -->\n<mj-api-key-edit-panel\n  [Visible]=\"ShowEditPanel\"\n  [KeyId]=\"SelectedKeyId\"\n  (Updated)=\"onKeyUpdated()\"\n  (Revoked)=\"onKeyRevoked()\"\n  (Closed)=\"onEditPanelClosed()\">\n</mj-api-key-edit-panel>\n", styles: ["/*\n  APIKeysResource renders as a sub-page inside Admin \u2192 Identity & Access's\n  left-nav shell. Host is a flex column so <mj-page-header-interior> pins at\n  the top and <mj-page-body-interior> fills the rest. See Section 10 of\n  plans/explorer-chrome-conventions.md.\n*/\n:host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n.api-keys-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* List View Header */\n.list-view-header {\n    margin-bottom: 16px;\n}\n\n.back-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.back-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* Health Banner */\n.health-banner {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-status-success-bg);\n    border: 1px solid var(--mj-status-success-border);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning {\n    background: var(--mj-status-warning-bg);\n    border-color: var(--mj-color-accent-300);\n}\n\n.health-banner.health-critical {\n    background: var(--mj-status-error-bg);\n    border-color: var(--mj-status-error-border);\n}\n\n.health-score-container {\n    margin-right: 24px;\n}\n\n.health-score-ring {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg {\n    fill: none;\n    stroke: var(--mj-border-default);\n    stroke-width: 3.8;\n}\n\n.circle {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: var(--mj-status-success);\n    animation: progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning .circle {\n    stroke: var(--mj-color-warning-500);\n}\n\n.health-banner.health-critical .circle {\n    stroke: var(--mj-status-error);\n}\n\n@keyframes progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.health-info {\n    flex: 1;\n}\n\n.health-label {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-color-success-600);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning .health-label {\n    color: var(--mj-brand-primary-hover);\n}\n\n.health-banner.health-critical .health-label {\n    color: var(--mj-color-error-600);\n}\n\n.health-details {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-error-600);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-alert:hover {\n    text-decoration: underline;\n}\n\n.health-warning-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-brand-primary-hover);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text:hover {\n    text-decoration: underline;\n}\n\n.health-info-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-info-text:hover {\n    text-decoration: underline;\n}\n\n.health-ok {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-color-success-600);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n/* KPI Cards */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable {\n    cursor: pointer;\n}\n\n.kpi-card.clickable:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--mj-shadow-lg);\n}\n\n.kpi-card.active .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n}\n\n.kpi-card.warning .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-color-warning-500) 0%, var(--mj-brand-primary-hover) 100%);\n}\n\n.kpi-card.danger .kpi-icon {\n    background: linear-gradient(135deg, var(--mj-status-error) 0%, var(--mj-color-error-600) 100%);\n}\n\n.kpi-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon i {\n    font-size: 20px;\n    color: var(--mj-text-inverse);\n}\n\n.kpi-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.2;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--mj-text-muted);\n}\n\n.kpi-trend.success {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning {\n    color: var(--mj-color-warning-500);\n}\n\n.kpi-trend .percentage {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n/* Content Grid */\n.content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.keys-panel {\n    grid-row: span 1;\n}\n\n.scope-panel {\n    grid-row: span 1;\n}\n\n.activity-panel {\n    grid-column: span 2;\n}\n\n.panel {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n}\n\n.panel-subtitle {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.panel-action {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action:hover {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.panel-body {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Key List */\n.key-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.key-item {\n    display: flex;\n    align-items: center;\n    padding: 14px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.key-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, var(--mj-color-neutral-500) 0%, var(--mj-color-neutral-600) 100%);\n    border-radius: 8px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.key-icon.active {\n    background: var(--mj-brand-primary);\n}\n\n.key-icon i {\n    font-size: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.key-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.key-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.key-hash {\n    font-family: monospace;\n    background: var(--mj-bg-surface-active);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 11px;\n}\n\n.key-status {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    margin-left: 16px;\n}\n\n.last-used {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.expiration {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.expiration.expiring-soon {\n    color: var(--mj-color-warning-500);\n    font-weight: 500;\n}\n\n.expiration.expiring-critical {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.expiration.expired {\n    color: var(--mj-status-error);\n    font-weight: 600;\n}\n\n/* Scope Chart */\n.scope-chart {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container {\n    position: relative;\n    width: 160px;\n    height: 160px;\n    margin: 0 auto;\n}\n\n.donut-chart {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment:hover {\n    opacity: 0.8;\n}\n\n.donut-center {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label {\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n/* Scope Legend */\n.scope-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n    transform: translateX(4px);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info {\n    flex: 1;\n}\n\n.legend-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name i {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-value {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-arrow {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n}\n\n/* Activity List */\n.activity-list {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 12px;\n}\n\n.activity-item {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--mj-bg-page);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.activity-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, var(--mj-color-brand-100));\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-created {\n    background: var(--mj-color-success-100);\n}\n\n.activity-icon.action-created i {\n    color: var(--mj-color-success-600);\n}\n\n.activity-icon.action-updated {\n    background: var(--mj-color-indigo-100);\n}\n\n.activity-icon.action-updated i {\n    color: var(--mj-color-indigo-500);\n}\n\n.activity-icon.action-revoked {\n    background: var(--mj-color-error-100);\n}\n\n.activity-icon.action-revoked i {\n    color: var(--mj-color-error-600);\n}\n\n.activity-icon.action-used {\n    background: var(--mj-color-brand-100);\n}\n\n.activity-icon.action-used i {\n    color: var(--mj-brand-primary-hover);\n}\n\n.activity-icon.action-extended {\n    background: var(--mj-color-info-100);\n}\n\n.activity-icon.action-extended i {\n    color: var(--mj-status-info);\n}\n\n.activity-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.activity-action {\n    font-weight: 500;\n    text-transform: capitalize;\n}\n\n.activity-time {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n}\n\n/* Quick Actions */\n.quick-actions {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n    transform: translateY(-2px);\n}\n\n.quick-action i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n}\n\n.quick-action span {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n/* Security Notice */\n.security-notice {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-color-brand-50) 0%, var(--mj-color-brand-100) 100%);\n    border-radius: 12px;\n    border: 1px solid var(--mj-color-accent-300);\n}\n\n.security-notice i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content {\n    font-size: 13px;\n    color: var(--mj-color-brand-800);\n    line-height: 1.5;\n}\n\n.notice-content strong {\n    font-weight: 600;\n}\n\n/* ========================================\n   Responsive Styles \u2014 chrome / nav responsiveness now owned by\n   <mj-page-layout> + <mj-left-nav>; only inner content needs tuning here.\n   ======================================== */\n\n/* Tablet */\n@media (max-width: 1024px) {\n    .content-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .activity-panel {\n        grid-column: span 1;\n    }\n\n    .scope-chart {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container {\n        width: 140px;\n        height: 140px;\n    }\n\n    .scope-legend {\n        flex: 1;\n    }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n    .content-wrapper {\n        padding: 16px;\n    }\n\n    .health-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .scope-chart {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .activity-list {\n        grid-template-columns: 1fr;\n    }\n\n    .key-item {\n        flex-wrap: wrap;\n    }\n\n    .key-status {\n        width: 100%;\n        flex-direction: row;\n        justify-content: flex-start;\n        margin-left: 54px;\n        margin-top: 8px;\n        gap: 12px;\n    }\n}\n\n/* Small Mobile */\n@media (max-width: 480px) {\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .kpi-card {\n        padding: 12px 16px;\n    }\n\n    .kpi-icon {\n        width: 40px;\n        height: 40px;\n    }\n\n    .kpi-value {\n        font-size: 20px;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { keyListComponent: [{
             type: ViewChild,
             args: ['keyList']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeysResourceComponent, { className: "APIKeysResourceComponent", filePath: "src/APIKeys/api-keys-resource.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeysResourceComponent, { className: "APIKeysResourceComponent", filePath: "src/APIKeys/api-keys-resource.component.ts", lineNumber: 53 }); })();
 //# sourceMappingURL=api-keys-resource.component.js.map