@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/Credentials/components/credentials-overview-resource.component.js

@@ -11,22 +11,22 @@ import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { RunView, CompositeKey } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@memberjunction/ng-shared-generic";
-function CredentialsOverviewResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 1);
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
+function CredentialsOverviewResourceComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵtext(2, " New Credential ");
+    i0.ɵɵelementEnd();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 60);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
-    i0.ɵɵelement(1, "i", 61);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "New Credential");
-    i0.ɵɵelementEnd()();
+function CredentialsOverviewResourceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 4);
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
-    i0.ɵɵelement(1, "i", 62);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -34,11 +34,11 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_22_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.expiredCredentials, " expired ");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 63);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_23_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
-    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_13_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -46,45 +46,45 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_23_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.expiringSoonCount, " expiring soon ");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵelement(1, "i", 33);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 19);
+    i0.ɵɵelement(1, "i", 30);
     i0.ɵɵtext(2, " All credentials healthy ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_63_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "i", 31);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementEnd();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_5_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "circle", 72);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_5_Template_circle_click_1_listener() { const stat_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r6)); });
+    i0.ɵɵelementStart(1, "circle", 67);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_5_Template_circle_click_1_listener() { const stat_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r6)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const stat_r6 = ctx.$implicit;
-    const ɵ$index_184_r7 = ctx.$index;
+    const ɵ$index_174_r7 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("stroke", stat_r6.color)("stroke-dasharray", stat_r6.percentage * 2.51 + " " + (251 - stat_r6.percentage * 2.51))("stroke-dashoffset", ctx_r1.getDonutOffset(ɵ$index_184_r7));
+    i0.ɵɵattribute("stroke", stat_r6.color)("stroke-dasharray", stat_r6.percentage * 2.51 + " " + (251 - stat_r6.percentage * 2.51))("stroke-dashoffset", ctx_r1.getDonutOffset(ɵ$index_174_r7));
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_13_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_13_Template_div_click_0_listener() { const stat_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r9)); });
-    i0.ɵɵelement(1, "div", 74);
-    i0.ɵɵelementStart(2, "div", 75)(3, "div", 76);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_13_Template_div_click_0_listener() { const stat_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r9)); });
+    i0.ɵɵelement(1, "div", 69);
+    i0.ɵɵelementStart(2, "div", 70)(3, "div", 71);
     i0.ɵɵelement(4, "i");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 77);
+    i0.ɵɵelementStart(6, "div", 72);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(8, "i", 78);
+    i0.ɵɵelement(8, "i", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const stat_r9 = ctx.$implicit;
@@ -97,22 +97,22 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2("", stat_r9.count, " (", stat_r9.percentage, "%)");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "div", 64);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 59);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 65);
-    i0.ɵɵelement(3, "circle", 66);
-    i0.ɵɵrepeaterCreate(4, CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_5_Template, 2, 3, ":svg:ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(2, "svg", 60);
+    i0.ɵɵelement(3, "circle", 61);
+    i0.ɵɵrepeaterCreate(4, CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_5_Template, 2, 3, ":svg:ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "div", 67)(7, "div", 68);
+    i0.ɵɵelementStart(6, "div", 62)(7, "div", 63);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 69);
+    i0.ɵɵelementStart(9, "div", 64);
     i0.ɵɵtext(10, "Total");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 70);
-    i0.ɵɵrepeaterCreate(12, CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_For_13_Template, 9, 7, "div", 71, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(11, "div", 65);
+    i0.ɵɵrepeaterCreate(12, CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_For_13_Template, 9, 7, "div", 66, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -123,16 +123,16 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_Templ
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r1.categoryStats);
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_83_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "i", 79);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_73_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelement(1, "i", 74);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No credentials configured");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 92);
-    i0.ɵɵelement(1, "i", 94);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -140,9 +140,9 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", type_r11.activeCount, " ");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
-    i0.ɵɵelement(1, "i", 38);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 88);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -150,28 +150,28 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", type_r11.expiringCount, " ");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Template_div_click_0_listener() { const type_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTypeClick(type_r11)); });
-    i0.ɵɵelementStart(1, "div", 82)(2, "div", 83);
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Template_div_click_0_listener() { const type_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTypeClick(type_r11)); });
+    i0.ɵɵelementStart(1, "div", 77)(2, "div", 78);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 84);
+    i0.ɵɵelementStart(4, "div", 79);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 85)(7, "div", 86)(8, "span", 87);
+    i0.ɵɵelementStart(6, "div", 80)(7, "div", 81)(8, "span", 82);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 88);
+    i0.ɵɵelementStart(10, "span", 83);
     i0.ɵɵtext(11, "credentials");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 89);
-    i0.ɵɵelement(13, "div", 90);
+    i0.ɵɵelementStart(12, "div", 84);
+    i0.ɵɵelement(13, "div", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 91);
-    i0.ɵɵconditionalCreate(15, CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Conditional_15_Template, 3, 1, "span", 92);
-    i0.ɵɵconditionalCreate(16, CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Conditional_16_Template, 3, 1, "span", 93);
+    i0.ɵɵelementStart(14, "div", 86);
+    i0.ɵɵconditionalCreate(15, CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Conditional_15_Template, 3, 1, "span", 87);
+    i0.ɵɵconditionalCreate(16, CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Conditional_16_Template, 3, 1, "span", 88);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const type_r11 = ctx.$implicit;
@@ -189,24 +189,24 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2
     i0.ɵɵadvance();
     i0.ɵɵconditional(type_r11.expiringCount > 0 ? 16 : -1);
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵrepeaterCreate(1, CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_For_2_Template, 17, 7, "div", 80, i0.ɵɵrepeaterTrackByIdentity);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵrepeaterCreate(1, CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_For_2_Template, 17, 7, "div", 75, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.typeStats.slice(0, 6));
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_95_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "i", 95);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No credential types configured");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 104);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 99);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -214,25 +214,25 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("by ", activity_r13.user);
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_2_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_2_Template_div_click_0_listener() { const activity_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActivityClick(activity_r13)); });
-    i0.ɵɵelementStart(1, "div", 98);
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_For_2_Template_div_click_0_listener() { const activity_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActivityClick(activity_r13)); });
+    i0.ɵɵelementStart(1, "div", 93);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 99)(4, "div", 100);
+    i0.ɵɵelementStart(3, "div", 94)(4, "div", 95);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 101)(7, "span", 102);
+    i0.ɵɵelementStart(6, "div", 96)(7, "span", 97);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 103);
+    i0.ɵɵelementStart(9, "span", 98);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_2_Conditional_11_Template, 2, 1, "span", 104);
+    i0.ɵɵconditionalCreate(11, CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_For_2_Conditional_11_Template, 2, 1, "span", 99);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 105);
+    i0.ɵɵelementStart(12, "div", 100);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -253,195 +253,180 @@ function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(activity_r13.date), " ");
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵrepeaterCreate(1, CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_For_2_Template, 14, 8, "div", 96, i0.ɵɵrepeaterTrackByIdentity);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵrepeaterCreate(1, CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_For_2_Template, 14, 8, "div", 91, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.recentActivity);
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_107_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "i", 106);
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_97_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelement(1, "i", 101);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No recent activity");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template(rf, ctx) { if (rf & 1) {
+function CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56)(1, "div", 107);
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 102);
     i0.ɵɵtext(2, "Quick Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 108)(4, "button", 109);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
-    i0.ɵɵelement(5, "i", 61);
+    i0.ɵɵelementStart(3, "div", 103)(4, "button", 104);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(5, "i", 6);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7, "Add Credential");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 109);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
-    i0.ɵɵelement(9, "i", 95);
+    i0.ɵɵelementStart(8, "button", 104);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
+    i0.ɵɵelement(9, "i", 90);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11, "Manage Types");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "button", 109);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllCategories()); });
-    i0.ɵɵelement(13, "i", 110);
+    i0.ɵɵelementStart(12, "button", 104);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllCategories()); });
+    i0.ɵɵelement(13, "i", 105);
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15, "Categories");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "button", 109);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
-    i0.ɵɵelement(17, "i", 111);
+    i0.ɵɵelementStart(16, "button", 104);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
+    i0.ɵɵelement(17, "i", 106);
     i0.ɵɵelementStart(18, "span");
     i0.ɵɵtext(19, "Audit Log");
     i0.ɵɵelementEnd()()()();
 } }
-function CredentialsOverviewResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
-    i0.ɵɵtext(3, "Credential Overview");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 5);
-    i0.ɵɵtext(5, "Monitor and manage your organization's credentials");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 6)(7, "button", 7);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
-    i0.ɵɵelement(8, "i", 8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, CredentialsOverviewResourceComponent_Conditional_2_Conditional_9_Template, 4, 0, "button", 9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 10)(11, "div", 11)(12, "div", 12);
+function CredentialsOverviewResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(13, "svg", 13);
-    i0.ɵɵelement(14, "path", 14)(15, "path", 15);
+    i0.ɵɵelementStart(3, "svg", 10);
+    i0.ɵɵelement(4, "path", 11)(5, "path", 12);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(16, "div", 16);
-    i0.ɵɵtext(17);
+    i0.ɵɵelementStart(6, "div", 13);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div", 17)(19, "div", 18);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(8, "div", 14)(9, "div", 15);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 19);
-    i0.ɵɵconditionalCreate(22, CredentialsOverviewResourceComponent_Conditional_2_Conditional_22_Template, 3, 1, "span", 20);
-    i0.ɵɵconditionalCreate(23, CredentialsOverviewResourceComponent_Conditional_2_Conditional_23_Template, 3, 1, "span", 21);
-    i0.ɵɵconditionalCreate(24, CredentialsOverviewResourceComponent_Conditional_2_Conditional_24_Template, 3, 0, "span", 22);
+    i0.ɵɵelementStart(11, "div", 16);
+    i0.ɵɵconditionalCreate(12, CredentialsOverviewResourceComponent_Conditional_7_Conditional_12_Template, 3, 1, "span", 17);
+    i0.ɵɵconditionalCreate(13, CredentialsOverviewResourceComponent_Conditional_7_Conditional_13_Template, 3, 1, "span", 18);
+    i0.ɵɵconditionalCreate(14, CredentialsOverviewResourceComponent_Conditional_7_Conditional_14_Template, 3, 0, "span", 19);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(25, "div", 23)(26, "div", 24);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_div_click_26_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
-    i0.ɵɵelementStart(27, "div", 25);
-    i0.ɵɵelement(28, "i", 26);
+    i0.ɵɵelementStart(15, "div", 20)(16, "div", 21);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Template_div_click_16_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
+    i0.ɵɵelementStart(17, "div", 22);
+    i0.ɵɵelement(18, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 27)(30, "div", 28);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(19, "div", 24)(20, "div", 25);
+    i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 29);
-    i0.ɵɵtext(33, "Total Credentials");
+    i0.ɵɵelementStart(22, "div", 26);
+    i0.ɵɵtext(23, "Total Credentials");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 30);
-    i0.ɵɵelement(35, "i", 31);
+    i0.ɵɵelementStart(24, "div", 27);
+    i0.ɵɵelement(25, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 32);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_div_click_36_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
-    i0.ɵɵelementStart(37, "div", 25);
-    i0.ɵɵelement(38, "i", 33);
+    i0.ɵɵelementStart(26, "div", 29);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Template_div_click_26_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
+    i0.ɵɵelementStart(27, "div", 22);
+    i0.ɵɵelement(28, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 27)(40, "div", 28);
-    i0.ɵɵtext(41);
+    i0.ɵɵelementStart(29, "div", 24)(30, "div", 25);
+    i0.ɵɵtext(31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 29);
-    i0.ɵɵtext(43, "Active");
+    i0.ɵɵelementStart(32, "div", 26);
+    i0.ɵɵtext(33, "Active");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 34)(45, "span", 35);
-    i0.ɵɵtext(46);
+    i0.ɵɵelementStart(34, "div", 31)(35, "span", 32);
+    i0.ɵɵtext(36);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(47, "div", 36)(48, "div", 25);
-    i0.ɵɵelement(49, "i", 37);
+    i0.ɵɵelementStart(37, "div", 33)(38, "div", 22);
+    i0.ɵɵelement(39, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "div", 27)(51, "div", 28);
-    i0.ɵɵtext(52);
+    i0.ɵɵelementStart(40, "div", 24)(41, "div", 25);
+    i0.ɵɵtext(42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "div", 29);
-    i0.ɵɵtext(54, "Types");
+    i0.ɵɵelementStart(43, "div", 26);
+    i0.ɵɵtext(44, "Types");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(55, "div", 24);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_div_click_55_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
-    i0.ɵɵelementStart(56, "div", 25);
-    i0.ɵɵelement(57, "i", 38);
+    i0.ɵɵelementStart(45, "div", 21);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Template_div_click_45_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
+    i0.ɵɵelementStart(46, "div", 22);
+    i0.ɵɵelement(47, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "div", 27)(59, "div", 28);
-    i0.ɵɵtext(60);
+    i0.ɵɵelementStart(48, "div", 24)(49, "div", 25);
+    i0.ɵɵtext(50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "div", 29);
-    i0.ɵɵtext(62, "Expiring Soon");
+    i0.ɵɵelementStart(51, "div", 26);
+    i0.ɵɵtext(52, "Expiring Soon");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(63, CredentialsOverviewResourceComponent_Conditional_2_Conditional_63_Template, 2, 0, "div", 39);
+    i0.ɵɵconditionalCreate(53, CredentialsOverviewResourceComponent_Conditional_7_Conditional_53_Template, 2, 0, "div", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "div", 36)(65, "div", 25);
-    i0.ɵɵelement(66, "i", 40);
+    i0.ɵɵelementStart(54, "div", 33)(55, "div", 22);
+    i0.ɵɵelement(56, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "div", 27)(68, "div", 28);
-    i0.ɵɵtext(69);
+    i0.ɵɵelementStart(57, "div", 24)(58, "div", 25);
+    i0.ɵɵtext(59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(70, "div", 29);
-    i0.ɵɵtext(71, "Expired");
+    i0.ɵɵelementStart(60, "div", 26);
+    i0.ɵɵtext(61, "Expired");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(72, "div", 41)(73, "div", 42)(74, "div", 43)(75, "div", 44);
-    i0.ɵɵelement(76, "i", 45);
-    i0.ɵɵelementStart(77, "span");
-    i0.ɵɵtext(78, "Credentials by Category");
+    i0.ɵɵelementStart(62, "div", 38)(63, "div", 39)(64, "div", 40)(65, "div", 41);
+    i0.ɵɵelement(66, "i", 42);
+    i0.ɵɵelementStart(67, "span");
+    i0.ɵɵtext(68, "Credentials by Category");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(79, "span", 46);
-    i0.ɵɵtext(80, "Click to filter by category");
+    i0.ɵɵelementStart(69, "span", 43);
+    i0.ɵɵtext(70, "Click to filter by category");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(81, "div", 47);
-    i0.ɵɵconditionalCreate(82, CredentialsOverviewResourceComponent_Conditional_2_Conditional_82_Template, 14, 1, "div", 48);
-    i0.ɵɵconditionalCreate(83, CredentialsOverviewResourceComponent_Conditional_2_Conditional_83_Template, 4, 0, "div", 49);
+    i0.ɵɵelementStart(71, "div", 44);
+    i0.ɵɵconditionalCreate(72, CredentialsOverviewResourceComponent_Conditional_7_Conditional_72_Template, 14, 1, "div", 45);
+    i0.ɵɵconditionalCreate(73, CredentialsOverviewResourceComponent_Conditional_7_Conditional_73_Template, 4, 0, "div", 46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(84, "div", 50)(85, "div", 43)(86, "div", 44);
-    i0.ɵɵelement(87, "i", 37);
-    i0.ɵɵelementStart(88, "span");
-    i0.ɵɵtext(89, "Top Credential Types");
+    i0.ɵɵelementStart(74, "div", 47)(75, "div", 40)(76, "div", 41);
+    i0.ɵɵelement(77, "i", 34);
+    i0.ɵɵelementStart(78, "span");
+    i0.ɵɵtext(79, "Top Credential Types");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(90, "button", 51);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_button_click_90_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
-    i0.ɵɵtext(91, " View All ");
-    i0.ɵɵelement(92, "i", 31);
+    i0.ɵɵelementStart(80, "button", 48);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Template_button_click_80_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
+    i0.ɵɵtext(81, " View All ");
+    i0.ɵɵelement(82, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(93, "div", 47);
-    i0.ɵɵconditionalCreate(94, CredentialsOverviewResourceComponent_Conditional_2_Conditional_94_Template, 3, 0, "div", 52);
-    i0.ɵɵconditionalCreate(95, CredentialsOverviewResourceComponent_Conditional_2_Conditional_95_Template, 4, 0, "div", 49);
+    i0.ɵɵelementStart(83, "div", 44);
+    i0.ɵɵconditionalCreate(84, CredentialsOverviewResourceComponent_Conditional_7_Conditional_84_Template, 3, 0, "div", 49);
+    i0.ɵɵconditionalCreate(85, CredentialsOverviewResourceComponent_Conditional_7_Conditional_85_Template, 4, 0, "div", 46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(96, "div", 53)(97, "div", 43)(98, "div", 44);
-    i0.ɵɵelement(99, "i", 54);
-    i0.ɵɵelementStart(100, "span");
-    i0.ɵɵtext(101, "Recent Activity");
+    i0.ɵɵelementStart(86, "div", 50)(87, "div", 40)(88, "div", 41);
+    i0.ɵɵelement(89, "i", 51);
+    i0.ɵɵelementStart(90, "span");
+    i0.ɵɵtext(91, "Recent Activity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(102, "button", 51);
-    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_2_Template_button_click_102_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
-    i0.ɵɵtext(103, " View All ");
-    i0.ɵɵelement(104, "i", 31);
+    i0.ɵɵelementStart(92, "button", 48);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_Conditional_7_Template_button_click_92_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
+    i0.ɵɵtext(93, " View All ");
+    i0.ɵɵelement(94, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(105, "div", 47);
-    i0.ɵɵconditionalCreate(106, CredentialsOverviewResourceComponent_Conditional_2_Conditional_106_Template, 3, 0, "div", 55);
-    i0.ɵɵconditionalCreate(107, CredentialsOverviewResourceComponent_Conditional_2_Conditional_107_Template, 4, 0, "div", 49);
+    i0.ɵɵelementStart(95, "div", 44);
+    i0.ɵɵconditionalCreate(96, CredentialsOverviewResourceComponent_Conditional_7_Conditional_96_Template, 3, 0, "div", 52);
+    i0.ɵɵconditionalCreate(97, CredentialsOverviewResourceComponent_Conditional_7_Conditional_97_Template, 4, 0, "div", 46);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(108, CredentialsOverviewResourceComponent_Conditional_2_Conditional_108_Template, 20, 0, "div", 56);
-    i0.ɵɵelementStart(109, "div", 57);
-    i0.ɵɵelement(110, "i", 58);
-    i0.ɵɵelementStart(111, "div", 59)(112, "strong");
-    i0.ɵɵtext(113, "Security Note:");
+    i0.ɵɵconditionalCreate(98, CredentialsOverviewResourceComponent_Conditional_7_Conditional_98_Template, 20, 0, "div", 53);
+    i0.ɵɵelementStart(99, "div", 54);
+    i0.ɵɵelement(100, "i", 55);
+    i0.ɵɵelementStart(101, "div", 56)(102, "strong");
+    i0.ɵɵtext(103, "Security Note:");
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(114, " All credential values are encrypted. Access to credentials is logged in the audit trail for compliance and security monitoring. ");
+    i0.ɵɵtext(104, " All credential values are encrypted. Access to credentials is logged in the audit trail for compliance and security monitoring. ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.UserCanCreateCredentials ? 9 : -1);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.getHealthClass());
     i0.ɵɵadvance(5);
     i0.ɵɵattribute("stroke-dasharray", ctx_r1.getHealthScore() + ", 100");
@@ -450,11 +435,11 @@ function CredentialsOverviewResourceComponent_Conditional_2_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.getHealthLabel());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.expiredCredentials > 0 ? 22 : -1);
+    i0.ɵɵconditional(ctx_r1.expiredCredentials > 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.expiredCredentials === 0 && ctx_r1.expiringSoonCount === 0 ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.expiredCredentials === 0 && ctx_r1.expiringSoonCount === 0 ? 14 : -1);
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.totalCredentials);
     i0.ɵɵadvance(10);
@@ -468,25 +453,25 @@ function CredentialsOverviewResourceComponent_Conditional_2_Template(rf, ctx) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.expiringSoonCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.expiringSoonCount > 0 ? 63 : -1);
+    i0.ɵɵconditional(ctx_r1.expiringSoonCount > 0 ? 53 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("danger", ctx_r1.expiredCredentials > 0);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.expiredCredentials);
     i0.ɵɵadvance(13);
-    i0.ɵɵconditional(ctx_r1.categoryStats.length > 0 ? 82 : -1);
+    i0.ɵɵconditional(ctx_r1.categoryStats.length > 0 ? 72 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.categoryStats.length === 0 ? 83 : -1);
+    i0.ɵɵconditional(ctx_r1.categoryStats.length === 0 ? 73 : -1);
     i0.ɵɵadvance(11);
-    i0.ɵɵconditional(ctx_r1.typeStats.length > 0 ? 94 : -1);
+    i0.ɵɵconditional(ctx_r1.typeStats.length > 0 ? 84 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.typeStats.length === 0 ? 95 : -1);
+    i0.ɵɵconditional(ctx_r1.typeStats.length === 0 ? 85 : -1);
     i0.ɵɵadvance(11);
-    i0.ɵɵconditional(ctx_r1.recentActivity.length > 0 ? 106 : -1);
+    i0.ɵɵconditional(ctx_r1.recentActivity.length > 0 ? 96 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.recentActivity.length === 0 ? 107 : -1);
+    i0.ɵɵconditional(ctx_r1.recentActivity.length === 0 ? 97 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.UserCanCreateCredentials ? 108 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanCreateCredentials ? 98 : -1);
 } }
 let CredentialsOverviewResourceComponent = class CredentialsOverviewResourceComponent extends BaseResourceComponent {
     cdr;
@@ -914,17 +899,26 @@ let CredentialsOverviewResourceComponent = class CredentialsOverviewResourceComp
         return offset;
     }
     static ɵfac = function CredentialsOverviewResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CredentialsOverviewResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsOverviewResourceComponent, selectors: [["mj-credentials-overview-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[1, "overview-container"], ["text", "Loading overview..."], [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-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, "kpi-card"], [1, "fa-solid", "fa-cubes"], [1, "fa-solid", "fa-clock"], [1, "kpi-trend", "warning"], [1, "fa-solid", "fa-circle-xmark"], [1, "content-grid"], [1, "panel", "category-panel"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-chart-pie"], [1, "panel-subtitle"], [1, "panel-body"], [1, "category-chart"], [1, "empty-state"], [1, "panel", "types-panel"], [1, "panel-action", 3, "click"], [1, "type-list"], [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, "fa-solid", "fa-circle-exclamation"], [1, "health-warning-text", 3, "click"], [1, "donut-chart-container"], ["viewBox", "0 0 100 100", 1, "donut-chart"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "12"], [1, "donut-center"], [1, "donut-total"], [1, "donut-label"], [1, "category-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, "fa-solid", "fa-folder-open"], [1, "type-item"], [1, "type-item", 3, "click"], [1, "type-info"], [1, "type-name"], [1, "type-category"], [1, "type-stats"], [1, "type-count"], [1, "count-value"], [1, "count-label"], [1, "type-bar"], [1, "type-bar-fill"], [1, "type-indicators"], ["title", "Active", 1, "indicator", "active"], ["title", "Expiring Soon", 1, "indicator", "warning"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-shapes"], [1, "activity-item"], [1, "activity-item", 3, "click"], [1, "activity-icon", 3, "ngClass"], [1, "activity-info"], [1, "activity-name"], [1, "activity-meta"], [1, "activity-type"], [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-folder-tree"], [1, "fa-solid", "fa-clipboard-list"]], template: function CredentialsOverviewResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, CredentialsOverviewResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
-            i0.ɵɵconditionalCreate(2, CredentialsOverviewResourceComponent_Conditional_2_Template, 115, 26);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsOverviewResourceComponent, selectors: [["mj-credentials-overview-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 4, consts: [["Title", "Credential Overview", "Icon", "fa-solid fa-chart-pie", "Subtitle", "Monitor and manage your organization's credentials"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm"], ["text", "Loading overview..."], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], [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-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, "kpi-card"], [1, "fa-solid", "fa-cubes"], [1, "fa-solid", "fa-clock"], [1, "kpi-trend", "warning"], [1, "fa-solid", "fa-circle-xmark"], [1, "content-grid"], [1, "panel", "category-panel"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-chart-pie"], [1, "panel-subtitle"], [1, "panel-body"], [1, "category-chart"], [1, "empty-state"], [1, "panel", "types-panel"], [1, "panel-action", 3, "click"], [1, "type-list"], [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, "fa-solid", "fa-circle-exclamation"], [1, "health-warning-text", 3, "click"], [1, "donut-chart-container"], ["viewBox", "0 0 100 100", 1, "donut-chart"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "12"], [1, "donut-center"], [1, "donut-total"], [1, "donut-label"], [1, "category-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, "fa-solid", "fa-folder-open"], [1, "type-item"], [1, "type-item", 3, "click"], [1, "type-info"], [1, "type-name"], [1, "type-category"], [1, "type-stats"], [1, "type-count"], [1, "count-value"], [1, "count-label"], [1, "type-bar"], [1, "type-bar-fill"], [1, "type-indicators"], ["title", "Active", 1, "indicator", "active"], ["title", "Expiring Soon", 1, "indicator", "warning"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-shapes"], [1, "activity-item"], [1, "activity-item", 3, "click"], [1, "activity-icon", 3, "ngClass"], [1, "activity-info"], [1, "activity-name"], [1, "activity-meta"], [1, "activity-type"], [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-folder-tree"], [1, "fa-solid", "fa-clipboard-list"]], template: function CredentialsOverviewResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "mj-refresh-button", 2);
+            i0.ɵɵlistener("Clicked", function CredentialsOverviewResourceComponent_Template_mj_refresh_button_Clicked_3_listener() { return ctx.refresh(); });
             i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, CredentialsOverviewResourceComponent_Conditional_4_Template, 3, 0, "button", 3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "mj-page-body");
+            i0.ɵɵconditionalCreate(6, CredentialsOverviewResourceComponent_Conditional_6_Template, 1, 0, "mj-loading", 4);
+            i0.ɵɵconditionalCreate(7, CredentialsOverviewResourceComponent_Conditional_7_Template, 105, 25);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Loading", ctx.isLoading);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
+            i0.ɵɵconditional(ctx.UserCanCreateCredentials ? 4 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 2 : -1);
-        } }, dependencies: [i1.NgClass, i2.LoadingComponent], styles: [".overview-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\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-sunken);\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: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\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-status-warning);\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-status-success);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\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-status-error);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-warning);\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-ok[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-success);\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(180px, 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: 0 2px 8px rgba(0, 0, 0, 0.08);\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: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.kpi-card.danger[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\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-disabled);\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-status-warning);\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.category-panel[_ngcontent-%COMP%] {\n    grid-row: span 2;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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-surface-card);\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-disabled);\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.category-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: 200px;\n    height: 200px;\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: 32px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.category-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-surface-card);\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-sunken);\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-disabled);\n    font-size: 10px;\n}\n\n\n\n.type-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_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.type-category[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n.type-stats[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.count-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.type-bar[_ngcontent-%COMP%] {\n    width: 100px;\n    height: 4px;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: var(--mj-brand-primary);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.indicator.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 6px;\n}\n\n\n\n.activity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\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-sunken);\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: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\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-type[_ngcontent-%COMP%] {\n    background: var(--mj-border-default);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.activity-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\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: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 12px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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-text-secondary);\n    line-height: 1.5;\n}\n\n.notice-content[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n\n\n@media (max-width: 1024px) {\n    .content-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel[_ngcontent-%COMP%] {\n        grid-row: auto;\n    }\n\n    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container[_ngcontent-%COMP%] {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend[_ngcontent-%COMP%] {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container[_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    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.isLoading ? 7 : -1);
+        } }, dependencies: [i1.NgClass, i2.MJButtonDirective, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageBodyComponent, i2.MJRefreshButtonComponent, i3.LoadingComponent], styles: ["\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\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-status-warning);\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-status-success);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\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-status-error);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-warning);\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-ok[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-success);\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(180px, 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: 0 2px 8px rgba(0, 0, 0, 0.08);\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: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.kpi-card.danger[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\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-disabled);\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-status-warning);\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.category-panel[_ngcontent-%COMP%] {\n    grid-row: span 2;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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-surface-card);\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-disabled);\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.category-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: 200px;\n    height: 200px;\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: 32px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.category-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-surface-card);\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-sunken);\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-disabled);\n    font-size: 10px;\n}\n\n\n\n.type-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_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.type-category[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n.type-stats[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.count-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.type-bar[_ngcontent-%COMP%] {\n    width: 100px;\n    height: 4px;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: var(--mj-brand-primary);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.indicator.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 6px;\n}\n\n\n\n.activity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\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-sunken);\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: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\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-type[_ngcontent-%COMP%] {\n    background: var(--mj-border-default);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.activity-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\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: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 12px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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-text-secondary);\n    line-height: 1.5;\n}\n\n.notice-content[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n\n\n@media (max-width: 1024px) {\n    .content-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel[_ngcontent-%COMP%] {\n        grid-row: auto;\n    }\n\n    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container[_ngcontent-%COMP%] {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend[_ngcontent-%COMP%] {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container[_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    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}"], changeDetection: 0 });
 };
 CredentialsOverviewResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CredentialsOverviewResource')
@@ -932,7 +926,7 @@ CredentialsOverviewResourceComponent = __decorate([
 export { CredentialsOverviewResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsOverviewResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-credentials-overview-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overview-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading overview...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header with Actions -->\n    <div class=\"overview-header\">\n      <div class=\"header-left\">\n        <h2 class=\"overview-title\">Credential Overview</h2>\n        <p class=\"overview-subtitle\">Monitor and manage your organization's credentials</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 (UserCanCreateCredentials) {\n          <button class=\"btn-primary\" (click)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New Credential</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 (expiredCredentials > 0) {\n            <span class=\"health-alert\">\n              <i class=\"fa-solid fa-circle-exclamation\"></i>\n              {{expiredCredentials}} expired\n            </span>\n          }\n          @if (expiringSoonCount > 0) {\n            <span class=\"health-warning-text\" (click)=\"viewExpiringCredentials()\">\n              <i class=\"fa-solid fa-clock\"></i>\n              {{expiringSoonCount}} expiring soon\n            </span>\n          }\n          @if (expiredCredentials === 0 && expiringSoonCount === 0) {\n            <span class=\"health-ok\">\n              <i class=\"fa-solid fa-check-circle\"></i>\n              All credentials 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)=\"viewAllCredentials()\">\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\">{{totalCredentials}}</div>\n          <div class=\"kpi-label\">Total Credentials</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)=\"viewAllCredentials()\">\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\">{{activeCredentials}}</div>\n          <div class=\"kpi-label\">Active</div>\n        </div>\n        <div class=\"kpi-trend success\">\n          <span class=\"percentage\">{{totalCredentials > 0 ? (activeCredentials / totalCredentials * 100).toFixed(0) : 0}}%</span>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon\">\n          <i class=\"fa-solid fa-cubes\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{credentialTypes}}</div>\n          <div class=\"kpi-label\">Types</div>\n        </div>\n      </div>\n      <div class=\"kpi-card clickable\" [class.warning]=\"expiringSoonCount > 0\" (click)=\"viewExpiringCredentials()\">\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\" [class.danger]=\"expiredCredentials > 0\">\n        <div class=\"kpi-icon\">\n          <i class=\"fa-solid fa-circle-xmark\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{expiredCredentials}}</div>\n          <div class=\"kpi-label\">Expired</div>\n        </div>\n      </div>\n    </div>\n    <!-- Content Grid -->\n    <div class=\"content-grid\">\n      <!-- Category Distribution Chart -->\n      <div class=\"panel category-panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-chart-pie\"></i>\n            <span>Credentials by Category</span>\n          </div>\n          <span class=\"panel-subtitle\">Click to filter by category</span>\n        </div>\n        <div class=\"panel-body\">\n          @if (categoryStats.length > 0) {\n            <div class=\"category-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=\"var(--mj-border-default)\" stroke-width=\"12\"/>\n                  @for (stat of categoryStats; 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)=\"onCategoryClick(stat)\"\n                        />\n                    </ng-container>\n                  }\n                </svg>\n                <div class=\"donut-center\">\n                  <div class=\"donut-total\">{{totalCredentials}}</div>\n                  <div class=\"donut-label\">Total</div>\n                </div>\n              </div>\n              <!-- Legend -->\n              <div class=\"category-legend\">\n                @for (stat of categoryStats; track stat) {\n                  <div class=\"legend-item\" (click)=\"onCategoryClick(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}} ({{stat.percentage}}%)</div>\n                    </div>\n                    <i class=\"fa-solid fa-chevron-right legend-arrow\"></i>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (categoryStats.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n              <span>No credentials configured</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Types Breakdown -->\n      <div class=\"panel types-panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-cubes\"></i>\n            <span>Top Credential Types</span>\n          </div>\n          <button class=\"panel-action\" (click)=\"viewAllTypes()\">\n            View All <i class=\"fa-solid fa-arrow-right\"></i>\n          </button>\n        </div>\n        <div class=\"panel-body\">\n          @if (typeStats.length > 0) {\n            <div class=\"type-list\">\n              @for (type of typeStats.slice(0, 6); track type) {\n                <div class=\"type-item\" (click)=\"onTypeClick(type)\">\n                  <div class=\"type-info\">\n                    <div class=\"type-name\">{{type.typeName}}</div>\n                    <div class=\"type-category\">{{type.category}}</div>\n                  </div>\n                  <div class=\"type-stats\">\n                    <div class=\"type-count\">\n                      <span class=\"count-value\">{{type.credentialCount}}</span>\n                      <span class=\"count-label\">credentials</span>\n                    </div>\n                    <div class=\"type-bar\">\n                      <div class=\"type-bar-fill\"\n                        [style.width.%]=\"totalCredentials > 0 ? (type.credentialCount / totalCredentials * 100) : 0\">\n                      </div>\n                    </div>\n                    <div class=\"type-indicators\">\n                      @if (type.activeCount > 0) {\n                        <span class=\"indicator active\" title=\"Active\">\n                          <i class=\"fa-solid fa-circle\"></i> {{type.activeCount}}\n                        </span>\n                      }\n                      @if (type.expiringCount > 0) {\n                        <span class=\"indicator warning\" title=\"Expiring Soon\">\n                          <i class=\"fa-solid fa-clock\"></i> {{type.expiringCount}}\n                        </span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n          @if (typeStats.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-shapes\"></i>\n              <span>No credential types 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          <button class=\"panel-action\" (click)=\"viewAuditLog()\">\n            View All <i class=\"fa-solid fa-arrow-right\"></i>\n          </button>\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.credentialName}}</div>\n                    <div class=\"activity-meta\">\n                      <span class=\"activity-type\">{{activity.typeName}}</span>\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 (UserCanCreateCredentials) {\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)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Credential</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAllTypes()\">\n            <i class=\"fa-solid fa-shapes\"></i>\n            <span>Manage Types</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAllCategories()\">\n            <i class=\"fa-solid fa-folder-tree\"></i>\n            <span>Categories</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAuditLog()\">\n            <i class=\"fa-solid fa-clipboard-list\"></i>\n            <span>Audit Log</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 Note:</strong> All credential values are encrypted.\n        Access to credentials is logged in the audit trail for compliance and security monitoring.\n      </div>\n    </div>\n  }\n</div>\n", styles: [".overview-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\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-sunken);\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: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Health Banner */\n.health-banner {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.health-banner.health-critical {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\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-status-warning);\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-status-success);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning .health-label {\n    color: var(--mj-status-warning);\n}\n\n.health-banner.health-critical .health-label {\n    color: var(--mj-status-error);\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-status-error);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-warning);\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-ok {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-success);\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(180px, 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: 0 2px 8px rgba(0, 0, 0, 0.08);\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: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active .kpi-icon {\n    background: var(--mj-status-success);\n}\n\n.kpi-card.warning .kpi-icon {\n    background: var(--mj-status-warning);\n}\n\n.kpi-card.danger .kpi-icon {\n    background: var(--mj-status-error);\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-disabled);\n}\n\n.kpi-trend.success {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning {\n    color: var(--mj-status-warning);\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.category-panel {\n    grid-row: span 2;\n}\n\n.panel {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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-surface-card);\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-disabled);\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/* Category Chart */\n.category-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: 200px;\n    height: 200px;\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: 32px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n/* Category Legend */\n.category-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-surface-card);\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-sunken);\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-disabled);\n    font-size: 10px;\n}\n\n/* Type List */\n.type-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\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.type-category {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n.type-stats {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.count-label {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.type-bar {\n    width: 100px;\n    height: 4px;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill {\n    height: 100%;\n    background: var(--mj-brand-primary);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active {\n    color: var(--mj-status-success);\n}\n\n.indicator.warning {\n    color: var(--mj-status-warning);\n}\n\n.indicator i {\n    font-size: 6px;\n}\n\n/* Activity List */\n.activity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\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-sunken);\n}\n\n.activity-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-created i {\n    color: var(--mj-status-success);\n}\n\n.activity-icon.action-updated {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-updated i {\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-accessed {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-accessed i {\n    color: var(--mj-status-warning);\n}\n\n.activity-icon.action-rotated {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-rotated i {\n    color: var(--mj-brand-primary);\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-type {\n    background: var(--mj-border-default);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action {\n    font-weight: 500;\n}\n\n.activity-time {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\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: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 12px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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-text-secondary);\n    line-height: 1.5;\n}\n\n.notice-content strong {\n    font-weight: 600;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .content-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel {\n        grid-row: auto;\n    }\n\n    .category-chart {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container {\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    .category-chart {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-credentials-overview-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Credential Overview\"\n    Icon=\"fa-solid fa-chart-pie\"\n    Subtitle=\"Monitor and manage your organization's credentials\">\n    <div actions>\n      <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refresh()\"></mj-refresh-button>\n      @if (UserCanCreateCredentials) {\n        <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewCredential()\">\n          <i class=\"fa-solid fa-plus\"></i> New Credential\n        </button>\n      }\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n  @if (isLoading) {\n    <mj-loading text=\"Loading overview...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\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 (expiredCredentials > 0) {\n            <span class=\"health-alert\">\n              <i class=\"fa-solid fa-circle-exclamation\"></i>\n              {{expiredCredentials}} expired\n            </span>\n          }\n          @if (expiringSoonCount > 0) {\n            <span class=\"health-warning-text\" (click)=\"viewExpiringCredentials()\">\n              <i class=\"fa-solid fa-clock\"></i>\n              {{expiringSoonCount}} expiring soon\n            </span>\n          }\n          @if (expiredCredentials === 0 && expiringSoonCount === 0) {\n            <span class=\"health-ok\">\n              <i class=\"fa-solid fa-check-circle\"></i>\n              All credentials 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)=\"viewAllCredentials()\">\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\">{{totalCredentials}}</div>\n          <div class=\"kpi-label\">Total Credentials</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)=\"viewAllCredentials()\">\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\">{{activeCredentials}}</div>\n          <div class=\"kpi-label\">Active</div>\n        </div>\n        <div class=\"kpi-trend success\">\n          <span class=\"percentage\">{{totalCredentials > 0 ? (activeCredentials / totalCredentials * 100).toFixed(0) : 0}}%</span>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon\">\n          <i class=\"fa-solid fa-cubes\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{credentialTypes}}</div>\n          <div class=\"kpi-label\">Types</div>\n        </div>\n      </div>\n      <div class=\"kpi-card clickable\" [class.warning]=\"expiringSoonCount > 0\" (click)=\"viewExpiringCredentials()\">\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\" [class.danger]=\"expiredCredentials > 0\">\n        <div class=\"kpi-icon\">\n          <i class=\"fa-solid fa-circle-xmark\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{expiredCredentials}}</div>\n          <div class=\"kpi-label\">Expired</div>\n        </div>\n      </div>\n    </div>\n    <!-- Content Grid -->\n    <div class=\"content-grid\">\n      <!-- Category Distribution Chart -->\n      <div class=\"panel category-panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-chart-pie\"></i>\n            <span>Credentials by Category</span>\n          </div>\n          <span class=\"panel-subtitle\">Click to filter by category</span>\n        </div>\n        <div class=\"panel-body\">\n          @if (categoryStats.length > 0) {\n            <div class=\"category-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=\"var(--mj-border-default)\" stroke-width=\"12\"/>\n                  @for (stat of categoryStats; 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)=\"onCategoryClick(stat)\"\n                        />\n                    </ng-container>\n                  }\n                </svg>\n                <div class=\"donut-center\">\n                  <div class=\"donut-total\">{{totalCredentials}}</div>\n                  <div class=\"donut-label\">Total</div>\n                </div>\n              </div>\n              <!-- Legend -->\n              <div class=\"category-legend\">\n                @for (stat of categoryStats; track stat) {\n                  <div class=\"legend-item\" (click)=\"onCategoryClick(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}} ({{stat.percentage}}%)</div>\n                    </div>\n                    <i class=\"fa-solid fa-chevron-right legend-arrow\"></i>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (categoryStats.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n              <span>No credentials configured</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Types Breakdown -->\n      <div class=\"panel types-panel\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            <i class=\"fa-solid fa-cubes\"></i>\n            <span>Top Credential Types</span>\n          </div>\n          <button class=\"panel-action\" (click)=\"viewAllTypes()\">\n            View All <i class=\"fa-solid fa-arrow-right\"></i>\n          </button>\n        </div>\n        <div class=\"panel-body\">\n          @if (typeStats.length > 0) {\n            <div class=\"type-list\">\n              @for (type of typeStats.slice(0, 6); track type) {\n                <div class=\"type-item\" (click)=\"onTypeClick(type)\">\n                  <div class=\"type-info\">\n                    <div class=\"type-name\">{{type.typeName}}</div>\n                    <div class=\"type-category\">{{type.category}}</div>\n                  </div>\n                  <div class=\"type-stats\">\n                    <div class=\"type-count\">\n                      <span class=\"count-value\">{{type.credentialCount}}</span>\n                      <span class=\"count-label\">credentials</span>\n                    </div>\n                    <div class=\"type-bar\">\n                      <div class=\"type-bar-fill\"\n                        [style.width.%]=\"totalCredentials > 0 ? (type.credentialCount / totalCredentials * 100) : 0\">\n                      </div>\n                    </div>\n                    <div class=\"type-indicators\">\n                      @if (type.activeCount > 0) {\n                        <span class=\"indicator active\" title=\"Active\">\n                          <i class=\"fa-solid fa-circle\"></i> {{type.activeCount}}\n                        </span>\n                      }\n                      @if (type.expiringCount > 0) {\n                        <span class=\"indicator warning\" title=\"Expiring Soon\">\n                          <i class=\"fa-solid fa-clock\"></i> {{type.expiringCount}}\n                        </span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n          @if (typeStats.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-shapes\"></i>\n              <span>No credential types 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          <button class=\"panel-action\" (click)=\"viewAuditLog()\">\n            View All <i class=\"fa-solid fa-arrow-right\"></i>\n          </button>\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.credentialName}}</div>\n                    <div class=\"activity-meta\">\n                      <span class=\"activity-type\">{{activity.typeName}}</span>\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 (UserCanCreateCredentials) {\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)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Credential</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAllTypes()\">\n            <i class=\"fa-solid fa-shapes\"></i>\n            <span>Manage Types</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAllCategories()\">\n            <i class=\"fa-solid fa-folder-tree\"></i>\n            <span>Categories</span>\n          </button>\n          <button class=\"quick-action\" (click)=\"viewAuditLog()\">\n            <i class=\"fa-solid fa-clipboard-list\"></i>\n            <span>Audit Log</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 Note:</strong> All credential values are encrypted.\n        Access to credentials is logged in the audit trail for compliance and security monitoring.\n      </div>\n    </div>\n  }\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Health Banner */\n.health-banner {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.health-banner.health-critical {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\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-status-warning);\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-status-success);\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning .health-label {\n    color: var(--mj-status-warning);\n}\n\n.health-banner.health-critical .health-label {\n    color: var(--mj-status-error);\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-status-error);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-warning);\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-ok {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-status-success);\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(180px, 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: 0 2px 8px rgba(0, 0, 0, 0.08);\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: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active .kpi-icon {\n    background: var(--mj-status-success);\n}\n\n.kpi-card.warning .kpi-icon {\n    background: var(--mj-status-warning);\n}\n\n.kpi-card.danger .kpi-icon {\n    background: var(--mj-status-error);\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-disabled);\n}\n\n.kpi-trend.success {\n    color: var(--mj-status-success);\n}\n\n.kpi-trend.warning {\n    color: var(--mj-status-warning);\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.category-panel {\n    grid-row: span 2;\n}\n\n.panel {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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-surface-card);\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-disabled);\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/* Category Chart */\n.category-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: 200px;\n    height: 200px;\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: 32px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.donut-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n/* Category Legend */\n.category-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-surface-card);\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-sunken);\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-disabled);\n    font-size: 10px;\n}\n\n/* Type List */\n.type-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\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.type-category {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n.type-stats {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.count-label {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.type-bar {\n    width: 100px;\n    height: 4px;\n    background: var(--mj-border-default);\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill {\n    height: 100%;\n    background: var(--mj-brand-primary);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active {\n    color: var(--mj-status-success);\n}\n\n.indicator.warning {\n    color: var(--mj-status-warning);\n}\n\n.indicator i {\n    font-size: 6px;\n}\n\n/* Activity List */\n.activity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\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-sunken);\n}\n\n.activity-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-created i {\n    color: var(--mj-status-success);\n}\n\n.activity-icon.action-updated {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-updated i {\n    color: var(--mj-brand-primary);\n}\n\n.activity-icon.action-accessed {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-accessed i {\n    color: var(--mj-status-warning);\n}\n\n.activity-icon.action-rotated {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.activity-icon.action-rotated i {\n    color: var(--mj-brand-primary);\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-type {\n    background: var(--mj-border-default);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action {\n    font-weight: 500;\n}\n\n.activity-time {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\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: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 12px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\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-text-secondary);\n    line-height: 1.5;\n}\n\n.notice-content strong {\n    font-weight: 600;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .content-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel {\n        grid-row: auto;\n    }\n\n    .category-chart {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container {\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    .category-chart {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsOverviewResourceComponent, { className: "CredentialsOverviewResourceComponent", filePath: "src/Credentials/components/credentials-overview-resource.component.ts", lineNumber: 50 }); })();
 //# sourceMappingURL=credentials-overview-resource.component.js.map