@memberjunction/ng-dashboards 5.34.1 → 5.35.0

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

@@ -10,43 +10,43 @@ import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-ui-components";
 import * as i3 from "@memberjunction/ng-shared-generic";
-function CredentialsAuditResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 1);
+function CredentialsAuditResourceComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 12);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_48_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 62);
-    i0.ɵɵelement(2, "div", 63)(3, "div", 64);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_35_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 42);
+    i0.ɵɵelement(2, "div", 43)(3, "div", 44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 65);
+    i0.ɵɵelementStart(4, "span", 45);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const data_r3 = ctx.$implicit;
+    const data_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", data_r3.hour + ": " + (data_r3.success + data_r3.failed) + " events");
+    i0.ɵɵproperty("title", data_r1.hour + ": " + (data_r1.success + data_r1.failed) + " events");
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("height", data_r3.success / ctx_r1.getMaxHourlyCount() * 100, "%");
+    i0.ɵɵstyleProp("height", data_r1.success / ctx_r1.getMaxHourlyCount() * 100, "%");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("height", data_r3.failed / ctx_r1.getMaxHourlyCount() * 100, "%");
+    i0.ɵɵstyleProp("height", data_r1.failed / ctx_r1.getMaxHourlyCount() * 100, "%");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(data_r3.hour.split(":")[0]);
+    i0.ɵɵtextInterpolate(data_r1.hour.split(":")[0]);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 53)(2, "h3");
-    i0.ɵɵelement(3, "i", 54);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 33)(2, "h3");
+    i0.ɵɵelement(3, "i", 34);
     i0.ɵɵtext(4, " Today's Activity ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 55)(6, "div", 56);
-    i0.ɵɵrepeaterCreate(7, CredentialsAuditResourceComponent_Conditional_2_Conditional_48_For_8_Template, 6, 6, "div", 57, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(5, "div", 35)(6, "div", 36);
+    i0.ɵɵrepeaterCreate(7, CredentialsAuditResourceComponent_Conditional_16_Conditional_35_For_8_Template, 6, 6, "div", 37, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 58)(10, "span", 59);
-    i0.ɵɵelement(11, "span", 60);
+    i0.ɵɵelementStart(9, "div", 38)(10, "span", 39);
+    i0.ɵɵelement(11, "span", 40);
     i0.ɵɵtext(12, " Success ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 59);
-    i0.ɵɵelement(14, "span", 61);
+    i0.ɵɵelementStart(13, "span", 39);
+    i0.ɵɵelement(14, "span", 41);
     i0.ɵɵtext(15, " Failed ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -54,273 +54,256 @@ function CredentialsAuditResourceComponent_Conditional_2_Conditional_48_Template
     i0.ɵɵadvance(7);
     i0.ɵɵrepeater(ctx_r1.hourlyData);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_54_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Conditional_54_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
-    i0.ɵɵelement(1, "i", 67);
-    i0.ɵɵelementEnd();
-} }
-function CredentialsAuditResourceComponent_Conditional_2_For_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const op_r5 = ctx.$implicit;
-    i0.ɵɵproperty("value", op_r5);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(op_r5);
-} }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext().$implicit;
+    const log_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", log_r7.Description, " ");
+    i0.ɵɵtextInterpolate1(" ", log_r4.Description, " ");
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 88);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 66);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext().$implicit;
+    const log_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubsystem(log_r7), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubsystem(log_r4), " ");
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 89);
-    i0.ɵɵelement(1, "i", 92);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 67);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext().$implicit;
+    const log_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", log_r7.parsedDetails == null ? null : log_r7.parsedDetails.credentialType, " ");
+    i0.ɵɵtextInterpolate1(" ", log_r4.parsedDetails == null ? null : log_r4.parsedDetails.credentialType, " ");
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "span", 96);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "span", 74);
     i0.ɵɵtext(2, "IP Address");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 97);
+    i0.ɵɵelementStart(3, "span", 75);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext(2).$implicit;
+    const log_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(log_r7.parsedDetails == null ? null : log_r7.parsedDetails.ipAddress);
+    i0.ɵɵtextInterpolate(log_r4.parsedDetails == null ? null : log_r4.parsedDetails.ipAddress);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "span", 96);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "span", 74);
     i0.ɵɵtext(2, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 97);
+    i0.ɵɵelementStart(3, "span", 75);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext(2).$implicit;
+    const log_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(log_r7.parsedDetails == null ? null : log_r7.parsedDetails.duration));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(log_r4.parsedDetails == null ? null : log_r4.parsedDetails.duration));
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "span", 96);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "span", 74);
     i0.ɵɵtext(2, "Credential ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 98);
+    i0.ɵɵelementStart(3, "span", 76);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext(2).$implicit;
+    const log_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(log_r7.parsedDetails == null ? null : log_r7.parsedDetails.credentialId);
+    i0.ɵɵtextInterpolate(log_r4.parsedDetails == null ? null : log_r4.parsedDetails.credentialId);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "span", 96);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73)(1, "span", 74);
     i0.ɵɵtext(2, "Error Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 99);
+    i0.ɵɵelementStart(3, "span", 77);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext(2).$implicit;
+    const log_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(log_r7.parsedDetails == null ? null : log_r7.parsedDetails.errorMessage);
+    i0.ɵɵtextInterpolate(log_r4.parsedDetails == null ? null : log_r4.parsedDetails.errorMessage);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "span", 96);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73)(1, "span", 74);
     i0.ɵɵtext(2, "User Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 100);
+    i0.ɵɵelementStart(3, "span", 78);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext(2).$implicit;
+    const log_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(log_r7.parsedDetails == null ? null : log_r7.parsedDetails.userAgent);
+    i0.ɵɵtextInterpolate(log_r4.parsedDetails == null ? null : log_r4.parsedDetails.userAgent);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93);
-    i0.ɵɵconditionalCreate(2, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_2_Template, 5, 1, "div", 94);
-    i0.ɵɵconditionalCreate(3, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_3_Template, 5, 1, "div", 94);
-    i0.ɵɵconditionalCreate(4, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_4_Template, 5, 1, "div", 94);
-    i0.ɵɵconditionalCreate(5, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_5_Template, 5, 1, "div", 95);
-    i0.ɵɵconditionalCreate(6, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Conditional_6_Template, 5, 1, "div", 95);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 71);
+    i0.ɵɵconditionalCreate(2, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_2_Template, 5, 1, "div", 72);
+    i0.ɵɵconditionalCreate(3, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_3_Template, 5, 1, "div", 72);
+    i0.ɵɵconditionalCreate(4, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_4_Template, 5, 1, "div", 72);
+    i0.ɵɵconditionalCreate(5, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_5_Template, 5, 1, "div", 73);
+    i0.ɵɵconditionalCreate(6, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Conditional_6_Template, 5, 1, "div", 73);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const log_r7 = i0.ɵɵnextContext().$implicit;
+    const log_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.ipAddress) ? 2 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.ipAddress) ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.duration) ? 3 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.duration) ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.credentialId) ? 4 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.credentialId) ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.errorMessage) ? 5 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.errorMessage) ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.userAgent) ? 6 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.userAgent) ? 6 : -1);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74)(1, "div", 75);
-    i0.ɵɵelement(2, "div", 76);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 77);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Template_div_click_3_listener() { const log_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleLogExpand(log_r7.ID)); });
-    i0.ɵɵelementStart(4, "div", 78)(5, "div", 79);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
+    i0.ɵɵelement(2, "div", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 55);
+    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Template_div_click_3_listener() { const log_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleLogExpand(log_r4.ID)); });
+    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
     i0.ɵɵelement(6, "i");
-    i0.ɵɵelementStart(7, "span", 80);
+    i0.ɵɵelementStart(7, "span", 58);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 81);
+    i0.ɵɵelementStart(9, "div", 59);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 82)(12, "div", 83);
-    i0.ɵɵelement(13, "i", 84);
+    i0.ɵɵelementStart(11, "div", 60)(12, "div", 61);
+    i0.ɵɵelement(13, "i", 62);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_15_Template, 2, 1, "div", 85);
-    i0.ɵɵelementStart(16, "div", 86)(17, "span", 87);
+    i0.ɵɵconditionalCreate(15, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_15_Template, 2, 1, "div", 63);
+    i0.ɵɵelementStart(16, "div", 64)(17, "span", 65);
     i0.ɵɵelement(18, "i");
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_20_Template, 2, 1, "span", 88);
-    i0.ɵɵconditionalCreate(21, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_21_Template, 3, 1, "span", 89);
+    i0.ɵɵconditionalCreate(20, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_20_Template, 2, 1, "span", 66);
+    i0.ɵɵconditionalCreate(21, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_21_Template, 3, 1, "span", 67);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(22, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Conditional_22_Template, 7, 5, "div", 90);
-    i0.ɵɵelementStart(23, "button", 91);
+    i0.ɵɵconditionalCreate(22, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Conditional_22_Template, 7, 5, "div", 68);
+    i0.ɵɵelementStart(23, "button", 69);
     i0.ɵɵelement(24, "i");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const log_r7 = ctx.$implicit;
+    const log_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedLogId === log_r7.ID)("failed", log_r7.Status === "Failed");
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedLogId === log_r4.ID)("failed", log_r4.Status === "Failed");
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r7)));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r4)));
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.getOperationIcon(ctx_r1.getOperationType(log_r7)));
-    i0.ɵɵstyleProp("color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r7)));
+    i0.ɵɵclassMap(ctx_r1.getOperationIcon(ctx_r1.getOperationType(log_r4)));
+    i0.ɵɵstyleProp("color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r4)));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getOperationType(log_r7));
+    i0.ɵɵtextInterpolate(ctx_r1.getOperationType(log_r4));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatTime(log_r7.__mj_CreatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTime(log_r4.__mj_CreatedAt));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", log_r7.User || "Unknown", " ");
+    i0.ɵɵtextInterpolate1(" ", log_r4.User || "Unknown", " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(log_r7.Description ? 15 : -1);
+    i0.ɵɵconditional(log_r4.Description ? 15 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(log_r7.Status));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(log_r4.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(log_r7.Status === "Success" ? "fa-solid fa-check" : "fa-solid fa-times");
+    i0.ɵɵclassMap(log_r4.Status === "Success" ? "fa-solid fa-check" : "fa-solid fa-times");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", log_r7.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", log_r4.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.getSubsystem(log_r7) ? 20 : -1);
+    i0.ɵɵconditional(ctx_r1.getSubsystem(log_r4) ? 20 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((log_r7.parsedDetails == null ? null : log_r7.parsedDetails.credentialType) ? 21 : -1);
+    i0.ɵɵconditional((log_r4.parsedDetails == null ? null : log_r4.parsedDetails.credentialType) ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.expandedLogId === log_r7.ID ? 22 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedLogId === log_r4.ID ? 22 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.expandedLogId === log_r7.ID ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
+    i0.ɵɵclassMap(ctx_r1.expandedLogId === log_r4.ID ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69)(2, "span", 70);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47)(2, "span", 48);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 71);
+    i0.ɵɵelementStart(4, "span", 49);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 72);
-    i0.ɵɵrepeaterCreate(7, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_For_8_Template, 25, 23, "div", 73, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(6, "div", 50);
+    i0.ɵɵrepeaterCreate(7, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_For_8_Template, 25, 23, "div", 51, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const group_r8 = ctx.$implicit;
+    const group_r5 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(group_r8.displayDate);
+    i0.ɵɵtextInterpolate(group_r5.displayDate);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", group_r8.logs.length, " events");
+    i0.ɵɵtextInterpolate1("", group_r5.logs.length, " events");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(group_r8.logs);
+    i0.ɵɵrepeater(group_r5.logs);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_84_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵrepeaterCreate(1, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_For_2_Template, 9, 2, "div", 68, i0.ɵɵrepeaterTrackByIdentity);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵrepeaterCreate(1, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_For_2_Template, 9, 2, "div", 46, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.timelineGroups);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_85_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 103);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_37_For_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 81);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 104);
+    i0.ɵɵelementStart(3, "td", 82);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 105)(6, "span", 106);
+    i0.ɵɵelementStart(5, "td", 83)(6, "span", 84);
     i0.ɵɵelement(7, "i");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 107);
+    i0.ɵɵelementStart(9, "td", 85);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "td", 108);
+    i0.ɵɵelementStart(11, "td", 86);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "td", 109)(14, "span", 87);
+    i0.ɵɵelementStart(13, "td", 87)(14, "span", 65);
     i0.ɵɵelement(15, "i");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const log_r9 = ctx.$implicit;
+    const log_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("failed-row", log_r9.Status === "Failed");
+    i0.ɵɵclassProp("failed-row", log_r6.Status === "Failed");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(log_r9.__mj_CreatedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(log_r6.__mj_CreatedAt));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(log_r9.User || "Unknown");
+    i0.ɵɵtextInterpolate(log_r6.User || "Unknown");
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r9)) + "20")("color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r9)));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r6)) + "20")("color", ctx_r1.getOperationColor(ctx_r1.getOperationType(log_r6)));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getOperationIcon(ctx_r1.getOperationType(log_r9)));
+    i0.ɵɵclassMap(ctx_r1.getOperationIcon(ctx_r1.getOperationType(log_r6)));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getOperationType(log_r9), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getOperationType(log_r6), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(log_r9.Description || "-");
+    i0.ɵɵtextInterpolate(log_r6.Description || "-");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getSubsystem(log_r9) || "-");
+    i0.ɵɵtextInterpolate(ctx_r1.getSubsystem(log_r6) || "-");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(log_r9.Status));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(log_r6.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(log_r9.Status === "Success" ? "fa-solid fa-check" : "fa-solid fa-times");
+    i0.ɵɵclassMap(log_r6.Status === "Success" ? "fa-solid fa-check" : "fa-solid fa-times");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", log_r9.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", log_r6.Status, " ");
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_85_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "table", 101)(2, "thead")(3, "tr")(4, "th");
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "table", 79)(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Timestamp");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -339,36 +322,36 @@ function CredentialsAuditResourceComponent_Conditional_2_Conditional_85_Template
     i0.ɵɵtext(15, "Status");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(16, "tbody");
-    i0.ɵɵrepeaterCreate(17, CredentialsAuditResourceComponent_Conditional_2_Conditional_85_For_18_Template, 17, 17, "tr", 102, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(17, CredentialsAuditResourceComponent_Conditional_16_Conditional_37_For_18_Template, 17, 17, "tr", 80, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(17);
     i0.ɵɵrepeater(ctx_r1.filteredLogs);
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " No events match your current filters. ");
-    i0.ɵɵelementStart(2, "button", 111);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.searchText = ""; ctx_r1.selectedStatus = ""; ctx_r1.selectedOperation = ""; return i0.ɵɵresetView(ctx_r1.applyFilters()); });
+    i0.ɵɵelementStart(2, "button", 89);
+    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.searchText = ""; ctx_r1.selectedStatus = ""; ctx_r1.selectedOperation = ""; return i0.ɵɵresetView(ctx_r1.applyFilters()); });
     i0.ɵɵtext(3, "Clear filters");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " No credential access events in the selected time range. ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 110);
-    i0.ɵɵelement(2, "i", 14);
+function CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 88);
+    i0.ɵɵelement(2, "i", 16);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Audit Logs");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Conditional_5_Template, 4, 0, "p");
-    i0.ɵɵconditionalCreate(6, CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Conditional_6_Template, 2, 0, "p");
+    i0.ɵɵconditionalCreate(5, CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Conditional_5_Template, 4, 0, "p");
+    i0.ɵɵconditionalCreate(6, CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Conditional_6_Template, 2, 0, "p");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -377,120 +360,53 @@ function CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Template
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.searchText && !ctx_r1.selectedStatus && !ctx_r1.selectedOperation ? 6 : -1);
 } }
-function CredentialsAuditResourceComponent_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, "Audit Trail");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 5);
-    i0.ɵɵtext(5, "Credential access and modification history");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 6)(7, "button", 7);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.exportToCSV()); });
-    i0.ɵɵelement(8, "i", 8);
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10, "Export");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "button", 9);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
-    i0.ɵɵelement(12, "i", 10);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 11)(14, "div", 12)(15, "div", 13);
-    i0.ɵɵelement(16, "i", 14);
+function CredentialsAuditResourceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 14)(2, "div", 15);
+    i0.ɵɵelement(3, "i", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 15)(18, "div", 16);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(4, "div", 17)(5, "div", 18);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 17);
-    i0.ɵɵtext(21, "Total Events");
+    i0.ɵɵelementStart(7, "div", 19);
+    i0.ɵɵtext(8, "Total Events");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 12)(23, "div", 18);
-    i0.ɵɵelement(24, "i", 19);
+    i0.ɵɵelementStart(9, "div", 14)(10, "div", 20);
+    i0.ɵɵelement(11, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 15)(26, "div", 20);
-    i0.ɵɵtext(27);
+    i0.ɵɵelementStart(12, "div", 17)(13, "div", 22);
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 17);
-    i0.ɵɵtext(29, "Successful");
+    i0.ɵɵelementStart(15, "div", 19);
+    i0.ɵɵtext(16, "Successful");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 21);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(17, "div", 23);
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 12)(33, "div", 22);
-    i0.ɵɵelement(34, "i", 23);
+    i0.ɵɵelementStart(19, "div", 14)(20, "div", 24);
+    i0.ɵɵelement(21, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "div", 15)(36, "div", 24);
-    i0.ɵɵtext(37);
+    i0.ɵɵelementStart(22, "div", 17)(23, "div", 26);
+    i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 17);
-    i0.ɵɵtext(39, "Failed");
+    i0.ɵɵelementStart(25, "div", 19);
+    i0.ɵɵtext(26, "Failed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(40, "div", 12)(41, "div", 25);
-    i0.ɵɵelement(42, "i", 26);
+    i0.ɵɵelementStart(27, "div", 14)(28, "div", 27);
+    i0.ɵɵelement(29, "i", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "div", 15)(44, "div", 16);
-    i0.ɵɵtext(45);
+    i0.ɵɵelementStart(30, "div", 17)(31, "div", 18);
+    i0.ɵɵtext(32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "div", 17);
-    i0.ɵɵtext(47, "Unique Users");
+    i0.ɵɵelementStart(33, "div", 19);
+    i0.ɵɵtext(34, "Unique Users");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(48, CredentialsAuditResourceComponent_Conditional_2_Conditional_48_Template, 16, 0, "div", 27);
-    i0.ɵɵelementStart(49, "div", 28)(50, "div", 29)(51, "div", 30);
-    i0.ɵɵelement(52, "i", 31);
-    i0.ɵɵelementStart(53, "input", 32);
-    i0.ɵɵlistener("input", function CredentialsAuditResourceComponent_Conditional_2_Template_input_input_53_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event.target.value)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(54, CredentialsAuditResourceComponent_Conditional_2_Conditional_54_Template, 2, 0, "button", 33);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(55, "select", 34);
-    i0.ɵɵlistener("change", function CredentialsAuditResourceComponent_Conditional_2_Template_select_change_55_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStatusFilterChange($event.target.value)); });
-    i0.ɵɵelementStart(56, "option", 35);
-    i0.ɵɵtext(57, "All Statuses");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "option", 36);
-    i0.ɵɵtext(59, "Success");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "option", 37);
-    i0.ɵɵtext(61, "Failed");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(62, "select", 34);
-    i0.ɵɵlistener("change", function CredentialsAuditResourceComponent_Conditional_2_Template_select_change_62_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOperationFilterChange($event.target.value)); });
-    i0.ɵɵelementStart(63, "option", 35);
-    i0.ɵɵtext(64, "All Operations");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(65, CredentialsAuditResourceComponent_Conditional_2_For_66_Template, 2, 2, "option", 38, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "select", 34);
-    i0.ɵɵlistener("change", function CredentialsAuditResourceComponent_Conditional_2_Template_select_change_67_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDateRangeChange($event.target.value)); });
-    i0.ɵɵelementStart(68, "option", 39);
-    i0.ɵɵtext(69, "Last 24 hours");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(70, "option", 40);
-    i0.ɵɵtext(71, "Last 7 days");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "option", 41);
-    i0.ɵɵtext(73, "Last 30 days");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(74, "option", 42);
-    i0.ɵɵtext(75, "Last 90 days");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(76, "div", 43)(77, "div", 44);
-    i0.ɵɵtext(78);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(79, "div", 45)(80, "button", 46);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Template_button_click_80_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setViewMode("timeline")); });
-    i0.ɵɵelement(81, "i", 47);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(82, "button", 48);
-    i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Conditional_2_Template_button_click_82_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setViewMode("table")); });
-    i0.ɵɵelement(83, "i", 49);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(84, CredentialsAuditResourceComponent_Conditional_2_Conditional_84_Template, 3, 0, "div", 50);
-    i0.ɵɵconditionalCreate(85, CredentialsAuditResourceComponent_Conditional_2_Conditional_85_Template, 19, 0, "div", 51);
-    i0.ɵɵconditionalCreate(86, CredentialsAuditResourceComponent_Conditional_2_Conditional_86_Template, 7, 2, "div", 52);
+    i0.ɵɵconditionalCreate(35, CredentialsAuditResourceComponent_Conditional_16_Conditional_35_Template, 16, 0, "div", 29);
+    i0.ɵɵconditionalCreate(36, CredentialsAuditResourceComponent_Conditional_16_Conditional_36_Template, 3, 0, "div", 30);
+    i0.ɵɵconditionalCreate(37, CredentialsAuditResourceComponent_Conditional_16_Conditional_37_Template, 19, 0, "div", 31);
+    i0.ɵɵconditionalCreate(38, CredentialsAuditResourceComponent_Conditional_16_Conditional_38_Template, 7, 2, "div", 32);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(19);
+    i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.auditLogs.length);
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.getSuccessCount());
@@ -501,31 +417,13 @@ function CredentialsAuditResourceComponent_Conditional_2_Template(rf, ctx) { if
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.getUniqueUserCount());
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.hourlyData.length > 0 ? 48 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r1.searchText);
+    i0.ɵɵconditional(ctx_r1.hourlyData.length > 0 ? 35 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.searchText ? 54 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.selectedStatus);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("value", ctx_r1.selectedOperation);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.getOperationList());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", ctx_r1.dateRange);
-    i0.ɵɵadvance(11);
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredLogs.length, " of ", ctx_r1.auditLogs.length, " events ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.viewMode === "timeline");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.viewMode === "table");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.viewMode === "timeline" && ctx_r1.timelineGroups.length > 0 ? 84 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "timeline" && ctx_r1.timelineGroups.length > 0 ? 36 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.viewMode === "table" && ctx_r1.filteredLogs.length > 0 ? 85 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "table" && ctx_r1.filteredLogs.length > 0 ? 37 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.filteredLogs.length === 0 ? 86 : -1);
+    i0.ɵɵconditional(ctx_r1.filteredLogs.length === 0 ? 38 : -1);
 } }
 // The Credential Access AuditLogType ID from metadata
 const CREDENTIAL_ACCESS_AUDIT_LOG_TYPE_ID = 'E8D4D100-E785-42D3-997F-ECFF3B0BCFC0';
@@ -544,6 +442,87 @@ let CredentialsAuditResourceComponent = class CredentialsAuditResourceComponent
     // Chart data
     hourlyData = [];
     operationCounts = new Map();
+    viewOptions = [
+        { key: 'timeline', icon: 'fa-solid fa-timeline', title: 'Timeline view' },
+        { key: 'table', icon: 'fa-solid fa-table', title: 'Table view' }
+    ];
+    get FilterFields() {
+        return [
+            {
+                key: 'status',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-circle-info',
+                placeholder: 'All Statuses',
+                options: [
+                    { text: 'All Statuses', value: '' },
+                    { text: 'Success', value: 'Success' },
+                    { text: 'Failed', value: 'Failed' }
+                ]
+            },
+            {
+                key: 'operation',
+                type: 'dropdown',
+                label: 'Operation',
+                icon: 'fa-solid fa-bolt',
+                placeholder: 'All Operations',
+                filterable: true,
+                options: [
+                    { text: 'All Operations', value: '' },
+                    ...this.getOperationList().map(op => ({ text: op, value: op }))
+                ]
+            },
+            {
+                key: 'dateRange',
+                type: 'dropdown',
+                label: 'Time range',
+                icon: 'fa-solid fa-clock',
+                options: [
+                    { text: 'Last 24 hours', value: '1' },
+                    { text: 'Last 7 days', value: '7' },
+                    { text: 'Last 30 days', value: '30' },
+                    { text: 'Last 90 days', value: '90' }
+                ]
+            }
+        ];
+    }
+    get FilterValues() {
+        return {
+            status: this.selectedStatus,
+            operation: this.selectedOperation,
+            dateRange: this.dateRange
+        };
+    }
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedStatus)
+            n++;
+        if (this.selectedOperation)
+            n++;
+        if (this.dateRange && this.dateRange !== '7')
+            n++; // 7-day is the default; don't count it
+        return n;
+    }
+    onFilterValuesChange(v) {
+        const next = (v ?? {});
+        if ((next.status ?? '') !== this.selectedStatus) {
+            this.onStatusFilterChange(next.status ?? '');
+        }
+        if ((next.operation ?? '') !== this.selectedOperation) {
+            this.onOperationFilterChange(next.operation ?? '');
+        }
+        if ((next.dateRange ?? '7') !== this.dateRange) {
+            this.onDateRangeChange(next.dateRange ?? '7');
+        }
+    }
+    resetFilters() {
+        if (this.selectedStatus)
+            this.onStatusFilterChange('');
+        if (this.selectedOperation)
+            this.onOperationFilterChange('');
+        if (this.dateRange !== '7')
+            this.onDateRangeChange('7');
+    }
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -846,17 +825,51 @@ let CredentialsAuditResourceComponent = class CredentialsAuditResourceComponent
         link.click();
     }
     static ɵfac = function CredentialsAuditResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CredentialsAuditResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsAuditResourceComponent, selectors: [["mj-credentials-audit-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[1, "audit-container"], ["text", "Loading audit logs..."], [1, "audit-header"], [1, "header-info"], [1, "audit-title"], [1, "audit-subtitle"], [1, "header-actions"], ["title", "Export to CSV", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "stats-grid"], [1, "stat-card"], [1, "stat-icon", "total"], [1, "fa-solid", "fa-clipboard-list"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "success"], [1, "fa-solid", "fa-check-circle"], [1, "stat-value", "success"], [1, "stat-rate"], [1, "stat-icon", "failed"], [1, "fa-solid", "fa-times-circle"], [1, "stat-value", "failed"], [1, "stat-icon", "users"], [1, "fa-solid", "fa-users"], [1, "activity-chart"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search logs...", 3, "input", "value"], [1, "search-clear"], [1, "filter-select", 3, "change", "value"], ["value", ""], ["value", "Success"], ["value", "Failed"], [3, "value"], ["value", "1"], ["value", "7"], ["value", "30"], ["value", "90"], [1, "toolbar-right"], [1, "results-info"], [1, "view-toggle"], ["title", "Timeline View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-timeline"], ["title", "Table View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-table"], [1, "timeline-container"], [1, "audit-table-container"], [1, "empty-state"], [1, "chart-header"], [1, "fa-solid", "fa-chart-bar"], [1, "chart-container"], [1, "chart-bars"], [1, "chart-bar-wrapper", 3, "title"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "chart-bar"], [1, "bar-segment", "success"], [1, "bar-segment", "failed"], [1, "chart-label"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "timeline-group"], [1, "timeline-date"], [1, "date-label"], [1, "date-count"], [1, "timeline-items"], [1, "timeline-item", 3, "expanded", "failed"], [1, "timeline-item"], [1, "timeline-line"], [1, "timeline-dot"], [1, "timeline-content", 3, "click"], [1, "timeline-header"], [1, "timeline-operation"], [1, "operation-name"], [1, "timeline-time"], [1, "timeline-body"], [1, "timeline-user"], [1, "fa-solid", "fa-user"], [1, "timeline-description"], [1, "timeline-badges"], [1, "status-badge", 3, "ngClass"], [1, "subsystem-badge"], [1, "type-badge"], [1, "timeline-details"], [1, "expand-btn"], [1, "fa-solid", "fa-key"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-item", "full-width"], [1, "detail-label"], [1, "detail-value"], [1, "detail-value", "mono"], [1, "detail-value", "error"], [1, "detail-value", "mono", "small"], [1, "audit-table"], [3, "failed-row"], [1, "timestamp"], [1, "user"], [1, "operation"], [1, "operation-badge"], [1, "description"], [1, "subsystem"], [1, "status"], [1, "empty-icon"], [1, "btn-link", 3, "click"]], template: function CredentialsAuditResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, CredentialsAuditResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
-            i0.ɵɵconditionalCreate(2, CredentialsAuditResourceComponent_Conditional_2_Template, 87, 20);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsAuditResourceComponent, selectors: [["mj-credentials-audit-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 12, consts: [["Title", "Audit Trail", "Icon", "fa-solid fa-clipboard-list", "Subtitle", "Credential access and modification history"], ["meta", ""], ["Label", "events", 3, "Count", "Total"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Export to CSV", 3, "click"], [1, "fa-solid", "fa-download"], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search logs...", 3, "ValueChange", "Value"], ["text", "Loading audit logs..."], [1, "stats-grid"], [1, "stat-card"], [1, "stat-icon", "total"], [1, "fa-solid", "fa-clipboard-list"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "success"], [1, "fa-solid", "fa-check-circle"], [1, "stat-value", "success"], [1, "stat-rate"], [1, "stat-icon", "failed"], [1, "fa-solid", "fa-times-circle"], [1, "stat-value", "failed"], [1, "stat-icon", "users"], [1, "fa-solid", "fa-users"], [1, "activity-chart"], [1, "timeline-container"], [1, "audit-table-container"], [1, "empty-state"], [1, "chart-header"], [1, "fa-solid", "fa-chart-bar"], [1, "chart-container"], [1, "chart-bars"], [1, "chart-bar-wrapper", 3, "title"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "chart-bar"], [1, "bar-segment", "success"], [1, "bar-segment", "failed"], [1, "chart-label"], [1, "timeline-group"], [1, "timeline-date"], [1, "date-label"], [1, "date-count"], [1, "timeline-items"], [1, "timeline-item", 3, "expanded", "failed"], [1, "timeline-item"], [1, "timeline-line"], [1, "timeline-dot"], [1, "timeline-content", 3, "click"], [1, "timeline-header"], [1, "timeline-operation"], [1, "operation-name"], [1, "timeline-time"], [1, "timeline-body"], [1, "timeline-user"], [1, "fa-solid", "fa-user"], [1, "timeline-description"], [1, "timeline-badges"], [1, "status-badge", 3, "ngClass"], [1, "subsystem-badge"], [1, "type-badge"], [1, "timeline-details"], [1, "expand-btn"], [1, "fa-solid", "fa-key"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-item", "full-width"], [1, "detail-label"], [1, "detail-value"], [1, "detail-value", "mono"], [1, "detail-value", "error"], [1, "detail-value", "mono", "small"], [1, "audit-table"], [3, "failed-row"], [1, "timestamp"], [1, "user"], [1, "operation"], [1, "operation-badge"], [1, "description"], [1, "subsystem"], [1, "status"], [1, "empty-icon"], [1, "btn-link", 3, "click"]], template: function CredentialsAuditResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵelement(3, "mj-stat-badge", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-filter-popover", 4);
+            i0.ɵɵlistener("ClearAllRequested", function CredentialsAuditResourceComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementStart(6, "mj-filter-panel", 5);
+            i0.ɵɵlistener("ValuesChange", function CredentialsAuditResourceComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function CredentialsAuditResourceComponent_Template_mj_filter_panel_Reset_6_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "mj-view-toggle", 6);
+            i0.ɵɵlistener("KeyChange", function CredentialsAuditResourceComponent_Template_mj_view_toggle_KeyChange_7_listener($event) { return ctx.setViewMode($event); });
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 7);
+            i0.ɵɵlistener("click", function CredentialsAuditResourceComponent_Template_button_click_8_listener() { return ctx.exportToCSV(); });
+            i0.ɵɵelement(9, "i", 8);
+            i0.ɵɵtext(10, " Export ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "mj-refresh-button", 9);
+            i0.ɵɵlistener("Clicked", function CredentialsAuditResourceComponent_Template_mj_refresh_button_Clicked_11_listener() { return ctx.refresh(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 10)(13, "mj-page-search", 11);
+            i0.ɵɵlistener("ValueChange", function CredentialsAuditResourceComponent_Template_mj_page_search_ValueChange_13_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(14, "mj-page-body");
+            i0.ɵɵconditionalCreate(15, CredentialsAuditResourceComponent_Conditional_15_Template, 1, 0, "mj-loading", 12);
+            i0.ɵɵconditionalCreate(16, CredentialsAuditResourceComponent_Conditional_16_Template, 39, 9);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.filteredLogs.length)("Total", ctx.auditLogs.length);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
+            i0.ɵɵproperty("Options", ctx.viewOptions)("ActiveKey", ctx.viewMode);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("Loading", ctx.isLoading);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Value", ctx.searchText);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 2 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.LoadingComponent], styles: [".audit-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n\n\n\n.audit-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.audit-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.audit-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: 8px;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n}\n\n\n\n.stats-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    position: relative;\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.stat-icon.total[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n}\n\n.stat-icon.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n    color: var(--mj-status-error);\n}\n\n.stat-icon.users[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.stat-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.stat-value.success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.stat-value.failed[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.stat-rate[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    right: 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    padding: 4px 8px;\n    border-radius: 8px;\n}\n\n\n\n.activity-chart[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.chart-header[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    height: 120px;\n    padding: 0 4px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    height: 100%;\n    gap: 2px;\n}\n\n.chart-bar-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n}\n\n.chart-bar[_ngcontent-%COMP%] {\n    flex: 1;\n    width: 100%;\n    max-width: 24px;\n    display: flex;\n    flex-direction: column-reverse;\n    border-radius: 4px 4px 0 0;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.bar-segment[_ngcontent-%COMP%] {\n    width: 100%;\n    transition: height 0.3s ease;\n}\n\n.bar-segment.success[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.bar-segment.failed[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n.chart-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.success[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.legend-color.failed[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n    position: relative;\n    min-width: 200px;\n}\n\n.search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface-card);\n    transition: all 0.2s ease;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-border-default);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 10px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-disabled);\n    color: var(--mj-text-inverse);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface-card);\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.filter-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n.results-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    padding: 4px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.timeline-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.timeline-date[_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-bg-surface-sunken);\n}\n\n.date-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.date-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-border-default);\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.timeline-items[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    padding: 12px 20px;\n    transition: background 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.timeline-item.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.timeline-item.failed[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timeline-line[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.timeline-dot[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n    position: relative;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.operation-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-body[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.timeline-user[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.timeline-user[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.timeline-badges[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-badge.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.unknown[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.subsystem-badge[_ngcontent-%COMP%], \n.type-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.timeline-details[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.mono[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.detail-value.small[_ngcontent-%COMP%] {\n    font-size: 11px;\n    word-break: break-all;\n}\n\n.detail-value.error[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.audit-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.audit-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.audit-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.audit-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.audit-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr.failed-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr.failed-row[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timestamp[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.user[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.operation-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.operation-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.description[_ngcontent-%COMP%] {\n    max-width: 300px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.subsystem[_ngcontent-%COMP%] {\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: 64px 24px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--mj-border-strong);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n\n\n@media (max-width: 1200px) {\n    .stats-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .audit-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .audit-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .stats-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .filter-select[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: space-between;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .chart-label[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .chart-label[_ngcontent-%COMP%]:nth-child(4n+1) {\n        display: block;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.isLoading ? 16 : -1);
+        } }, dependencies: [i1.NgClass, i2.MJButtonDirective, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageBodyComponent, i2.MJPageSearchComponent, i2.MJFilterPopoverComponent, i2.MJFilterPanelComponent, i2.MJViewToggleComponent, i2.MJStatBadgeComponent, i2.MJRefreshButtonComponent, i3.LoadingComponent], styles: ["\n\n.stats-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    position: relative;\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.stat-icon.total[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n}\n\n.stat-icon.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n    color: var(--mj-status-error);\n}\n\n.stat-icon.users[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.stat-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.stat-value.success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.stat-value.failed[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.stat-rate[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    right: 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    padding: 4px 8px;\n    border-radius: 8px;\n}\n\n\n\n.activity-chart[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.chart-header[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.chart-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    height: 120px;\n    padding: 0 4px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    height: 100%;\n    gap: 2px;\n}\n\n.chart-bar-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n}\n\n.chart-bar[_ngcontent-%COMP%] {\n    flex: 1;\n    width: 100%;\n    max-width: 24px;\n    display: flex;\n    flex-direction: column-reverse;\n    border-radius: 4px 4px 0 0;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.bar-segment[_ngcontent-%COMP%] {\n    width: 100%;\n    transition: height 0.3s ease;\n}\n\n.bar-segment.success[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.bar-segment.failed[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n.chart-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.success[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.legend-color.failed[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.timeline-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.timeline-date[_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-bg-surface-sunken);\n}\n\n.date-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.date-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-border-default);\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.timeline-items[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    padding: 12px 20px;\n    transition: background 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.timeline-item.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.timeline-item.failed[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timeline-line[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.timeline-dot[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n    position: relative;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-operation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.operation-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-body[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.timeline-user[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.timeline-user[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.timeline-badges[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-badge.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.unknown[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.subsystem-badge[_ngcontent-%COMP%], \n.type-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.timeline-details[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.mono[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.detail-value.small[_ngcontent-%COMP%] {\n    font-size: 11px;\n    word-break: break-all;\n}\n\n.detail-value.error[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.audit-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.audit-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.audit-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.audit-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.audit-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr.failed-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.audit-table[_ngcontent-%COMP%]   tr.failed-row[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timestamp[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.user[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.operation-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.operation-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.description[_ngcontent-%COMP%] {\n    max-width: 300px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.subsystem[_ngcontent-%COMP%] {\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: 64px 24px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--mj-border-strong);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n\n\n@media (max-width: 1200px) {\n    .stats-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .audit-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .audit-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .stats-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .filter-select[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: space-between;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .chart-label[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .chart-label[_ngcontent-%COMP%]:nth-child(4n+1) {\n        display: block;\n    }\n}"], changeDetection: 0 });
 };
 CredentialsAuditResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CredentialsAuditResource')
@@ -864,7 +877,7 @@ CredentialsAuditResourceComponent = __decorate([
 export { CredentialsAuditResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsAuditResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-credentials-audit-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audit-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading audit logs...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header -->\n    <div class=\"audit-header\">\n      <div class=\"header-info\">\n        <h2 class=\"audit-title\">Audit Trail</h2>\n        <p class=\"audit-subtitle\">Credential access and modification history</p>\n      </div>\n      <div class=\"header-actions\">\n        <button class=\"btn-secondary\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n          <i class=\"fa-solid fa-download\"></i>\n          <span>Export</span>\n        </button>\n        <button class=\"btn-icon\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Stats Cards -->\n    <div class=\"stats-grid\">\n      <div class=\"stat-card\">\n        <div class=\"stat-icon total\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{auditLogs.length}}</div>\n          <div class=\"stat-label\">Total Events</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon success\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value success\">{{getSuccessCount()}}</div>\n          <div class=\"stat-label\">Successful</div>\n        </div>\n        <div class=\"stat-rate\">{{getSuccessRate()}}%</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon failed\">\n          <i class=\"fa-solid fa-times-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value failed\">{{getFailedCount()}}</div>\n          <div class=\"stat-label\">Failed</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon users\">\n          <i class=\"fa-solid fa-users\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{getUniqueUserCount()}}</div>\n          <div class=\"stat-label\">Unique Users</div>\n        </div>\n      </div>\n    </div>\n    <!-- Activity Chart -->\n    @if (hourlyData.length > 0) {\n      <div class=\"activity-chart\">\n        <div class=\"chart-header\">\n          <h3>\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Today's Activity\n          </h3>\n        </div>\n        <div class=\"chart-container\">\n          <div class=\"chart-bars\">\n            @for (data of hourlyData; track data) {\n              <div\n                class=\"chart-bar-wrapper\"\n                [title]=\"data.hour + ': ' + (data.success + data.failed) + ' events'\"\n                >\n                <div class=\"chart-bar\">\n                  <div\n                    class=\"bar-segment success\"\n                    [style.height.%]=\"(data.success / getMaxHourlyCount()) * 100\"\n                  ></div>\n                  <div\n                    class=\"bar-segment failed\"\n                    [style.height.%]=\"(data.failed / getMaxHourlyCount()) * 100\"\n                  ></div>\n                </div>\n                <span class=\"chart-label\">{{data.hour.split(':')[0]}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"chart-legend\">\n          <span class=\"legend-item\">\n            <span class=\"legend-color success\"></span>\n            Success\n          </span>\n          <span class=\"legend-item\">\n            <span class=\"legend-color failed\"></span>\n            Failed\n          </span>\n        </div>\n      </div>\n    }\n    <!-- Toolbar -->\n    <div class=\"toolbar\">\n      <div class=\"toolbar-left\">\n        <div class=\"search-container\">\n          <i class=\"fa-solid fa-search\"></i>\n          <input\n            type=\"text\"\n            placeholder=\"Search logs...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            />\n          @if (searchText) {\n            <button class=\"search-clear\" (click)=\"clearSearch()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedStatus\"\n          (change)=\"onStatusFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Statuses</option>\n          <option value=\"Success\">Success</option>\n          <option value=\"Failed\">Failed</option>\n        </select>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedOperation\"\n          (change)=\"onOperationFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Operations</option>\n          @for (op of getOperationList(); track op) {\n            <option [value]=\"op\">{{op}}</option>\n          }\n        </select>\n        <select\n          class=\"filter-select\"\n          [value]=\"dateRange\"\n          (change)=\"onDateRangeChange($any($event.target).value)\"\n          >\n          <option value=\"1\">Last 24 hours</option>\n          <option value=\"7\">Last 7 days</option>\n          <option value=\"30\">Last 30 days</option>\n          <option value=\"90\">Last 90 days</option>\n        </select>\n      </div>\n      <div class=\"toolbar-right\">\n        <div class=\"results-info\">\n          {{filteredLogs.length}} of {{auditLogs.length}} events\n        </div>\n        <div class=\"view-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"viewMode === 'timeline'\"\n            (click)=\"setViewMode('timeline')\"\n            title=\"Timeline View\"\n            >\n            <i class=\"fa-solid fa-timeline\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"viewMode === 'table'\"\n            (click)=\"setViewMode('table')\"\n            title=\"Table View\"\n            >\n            <i class=\"fa-solid fa-table\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- Timeline View -->\n    @if (viewMode === 'timeline' && timelineGroups.length > 0) {\n      <div class=\"timeline-container\">\n        @for (group of timelineGroups; track group) {\n          <div class=\"timeline-group\">\n            <div class=\"timeline-date\">\n              <span class=\"date-label\">{{group.displayDate}}</span>\n              <span class=\"date-count\">{{group.logs.length}} events</span>\n            </div>\n            <div class=\"timeline-items\">\n              @for (log of group.logs; track log) {\n                <div\n                  class=\"timeline-item\"\n                  [class.expanded]=\"expandedLogId === log.ID\"\n                  [class.failed]=\"log.Status === 'Failed'\"\n                  >\n                  <div class=\"timeline-line\">\n                    <div\n                      class=\"timeline-dot\"\n                      [style.backgroundColor]=\"getOperationColor(getOperationType(log))\"\n                    ></div>\n                  </div>\n                  <div class=\"timeline-content\" (click)=\"toggleLogExpand(log.ID)\">\n                    <div class=\"timeline-header\">\n                      <div class=\"timeline-operation\">\n                        <i [class]=\"getOperationIcon(getOperationType(log))\" [style.color]=\"getOperationColor(getOperationType(log))\"></i>\n                        <span class=\"operation-name\">{{getOperationType(log)}}</span>\n                      </div>\n                      <div class=\"timeline-time\">{{formatTime(log.__mj_CreatedAt)}}</div>\n                    </div>\n                    <div class=\"timeline-body\">\n                      <div class=\"timeline-user\">\n                        <i class=\"fa-solid fa-user\"></i>\n                        {{log.User || 'Unknown'}}\n                      </div>\n                      @if (log.Description) {\n                        <div class=\"timeline-description\">\n                          {{log.Description}}\n                        </div>\n                      }\n                      <div class=\"timeline-badges\">\n                        <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                          <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                          {{log.Status}}\n                        </span>\n                        @if (getSubsystem(log)) {\n                          <span class=\"subsystem-badge\">\n                            {{getSubsystem(log)}}\n                          </span>\n                        }\n                        @if (log.parsedDetails?.credentialType) {\n                          <span class=\"type-badge\">\n                            <i class=\"fa-solid fa-key\"></i>\n                            {{log.parsedDetails?.credentialType}}\n                          </span>\n                        }\n                      </div>\n                    </div>\n                    @if (expandedLogId === log.ID) {\n                      <div class=\"timeline-details\">\n                        <div class=\"detail-grid\">\n                          @if (log.parsedDetails?.ipAddress) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">IP Address</span>\n                              <span class=\"detail-value\">{{log.parsedDetails?.ipAddress}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.duration) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Duration</span>\n                              <span class=\"detail-value\">{{formatDuration(log.parsedDetails?.duration)}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.credentialId) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Credential ID</span>\n                              <span class=\"detail-value mono\">{{log.parsedDetails?.credentialId}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.errorMessage) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">Error Message</span>\n                              <span class=\"detail-value error\">{{log.parsedDetails?.errorMessage}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.userAgent) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">User Agent</span>\n                              <span class=\"detail-value mono small\">{{log.parsedDetails?.userAgent}}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    <button class=\"expand-btn\">\n                      <i [class]=\"expandedLogId === log.ID ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- Table View -->\n    @if (viewMode === 'table' && filteredLogs.length > 0) {\n      <div class=\"audit-table-container\">\n        <table class=\"audit-table\">\n          <thead>\n            <tr>\n              <th>Timestamp</th>\n              <th>User</th>\n              <th>Operation</th>\n              <th>Description</th>\n              <th>Subsystem</th>\n              <th>Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (log of filteredLogs; track log) {\n              <tr [class.failed-row]=\"log.Status === 'Failed'\">\n                <td class=\"timestamp\">{{formatDate(log.__mj_CreatedAt)}}</td>\n                <td class=\"user\">{{log.User || 'Unknown'}}</td>\n                <td class=\"operation\">\n                  <span class=\"operation-badge\" [style.backgroundColor]=\"getOperationColor(getOperationType(log)) + '20'\" [style.color]=\"getOperationColor(getOperationType(log))\">\n                    <i [class]=\"getOperationIcon(getOperationType(log))\"></i>\n                    {{getOperationType(log)}}\n                  </span>\n                </td>\n                <td class=\"description\">{{log.Description || '-'}}</td>\n                <td class=\"subsystem\">{{getSubsystem(log) || '-'}}</td>\n                <td class=\"status\">\n                  <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                    <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                    {{log.Status}}\n                  </span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- Empty State -->\n    @if (filteredLogs.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <h3>No Audit Logs</h3>\n        @if (searchText || selectedStatus || selectedOperation) {\n          <p>\n            No events match your current filters.\n            <button class=\"btn-link\" (click)=\"searchText = ''; selectedStatus = ''; selectedOperation = ''; applyFilters()\">Clear filters</button>\n          </p>\n        }\n        @if (!searchText && !selectedStatus && !selectedOperation) {\n          <p>\n            No credential access events in the selected time range.\n          </p>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".audit-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n\n/* Header */\n.audit-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.audit-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.audit-subtitle {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.btn-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n}\n\n/* Stats Grid */\n.stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    position: relative;\n}\n\n.stat-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.stat-icon.total {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon.success {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n}\n\n.stat-icon.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n    color: var(--mj-status-error);\n}\n\n.stat-icon.users {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon i {\n    font-size: 20px;\n}\n\n.stat-content {\n    flex: 1;\n}\n\n.stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.stat-value.success {\n    color: var(--mj-status-success);\n}\n\n.stat-value.failed {\n    color: var(--mj-status-error);\n}\n\n.stat-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.stat-rate {\n    position: absolute;\n    top: 12px;\n    right: 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    padding: 4px 8px;\n    border-radius: 8px;\n}\n\n/* Activity Chart */\n.activity-chart {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.chart-header {\n    margin-bottom: 16px;\n}\n\n.chart-header h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.chart-header h3 i {\n    color: var(--mj-brand-primary);\n}\n\n.chart-container {\n    height: 120px;\n    padding: 0 4px;\n}\n\n.chart-bars {\n    display: flex;\n    align-items: flex-end;\n    height: 100%;\n    gap: 2px;\n}\n\n.chart-bar-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n}\n\n.chart-bar {\n    flex: 1;\n    width: 100%;\n    max-width: 24px;\n    display: flex;\n    flex-direction: column-reverse;\n    border-radius: 4px 4px 0 0;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.bar-segment {\n    width: 100%;\n    transition: height 0.3s ease;\n}\n\n.bar-segment.success {\n    background: var(--mj-status-success);\n}\n\n.bar-segment.failed {\n    background: var(--mj-status-error);\n}\n\n.chart-label {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.chart-legend {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.success {\n    background: var(--mj-status-success);\n}\n\n.legend-color.failed {\n    background: var(--mj-status-error);\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n/* Search */\n.search-container {\n    position: relative;\n    min-width: 200px;\n}\n\n.search-container i.fa-search {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.search-container input {\n    width: 100%;\n    padding: 8px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface-card);\n    transition: all 0.2s ease;\n}\n\n.search-container input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-border-default);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--mj-text-disabled);\n    color: var(--mj-text-inverse);\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface-card);\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.filter-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    padding: 4px;\n}\n\n.toggle-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toggle-btn:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline View */\n.timeline-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.timeline-group {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.timeline-date {\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-bg-surface-sunken);\n}\n\n.date-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.date-count {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-border-default);\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.timeline-items {\n    padding: 8px 0;\n}\n\n.timeline-item {\n    display: flex;\n    padding: 12px 20px;\n    transition: background 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.timeline-item.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.timeline-item.failed:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timeline-line {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.timeline-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n    position: relative;\n}\n\n.timeline-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.timeline-operation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-operation i {\n    font-size: 14px;\n}\n\n.operation-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.timeline-time {\n    font-size: 12px;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-body {\n    margin-bottom: 8px;\n}\n\n.timeline-user {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.timeline-user i {\n    font-size: 11px;\n}\n\n.timeline-description {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.timeline-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-badge.success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.unknown {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge i {\n    font-size: 10px;\n}\n\n.subsystem-badge,\n.type-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.type-badge {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.type-badge i {\n    font-size: 10px;\n}\n\n/* Timeline Details */\n.timeline-details {\n    margin-top: 12px;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item.full-width {\n    grid-column: 1 / -1;\n}\n\n.detail-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.mono {\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.detail-value.small {\n    font-size: 11px;\n    word-break: break-all;\n}\n\n.detail-value.error {\n    color: var(--mj-status-error);\n}\n\n.expand-btn {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.expand-btn:hover {\n    color: var(--mj-brand-primary);\n}\n\n.expand-btn i {\n    font-size: 10px;\n}\n\n/* Table View */\n.audit-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.audit-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.audit-table th {\n    padding: 14px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.audit-table td {\n    padding: 14px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.audit-table tr:last-child td {\n    border-bottom: none;\n}\n\n.audit-table tr:hover td {\n    background: var(--mj-bg-surface-card);\n}\n\n.audit-table tr.failed-row td {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.audit-table tr.failed-row:hover td {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timestamp {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.user {\n    font-weight: 500;\n}\n\n.operation-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.operation-badge i {\n    font-size: 10px;\n}\n\n.description {\n    max-width: 300px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.subsystem {\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: 64px 24px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--mj-border-strong);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n    .stats-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .audit-container {\n        padding: 16px;\n    }\n\n    .audit-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .stats-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left {\n        flex-direction: column;\n    }\n\n    .search-container {\n        width: 100%;\n    }\n\n    .filter-select {\n        width: 100%;\n    }\n\n    .toolbar-right {\n        justify-content: space-between;\n    }\n\n    .detail-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .chart-label {\n        display: none;\n    }\n\n    .chart-label:nth-child(4n+1) {\n        display: block;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-credentials-audit-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Audit Trail\"\n    Icon=\"fa-solid fa-clipboard-list\"\n    Subtitle=\"Credential access and modification history\">\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"filteredLogs.length\"\n        [Total]=\"auditLogs.length\"\n        Label=\"events\">\n      </mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"FilterFields\"\n          [Values]=\"FilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n      <mj-view-toggle\n        [Options]=\"viewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n        <i class=\"fa-solid fa-download\"></i> Export\n      </button>\n      <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refresh()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search logs...\"\n        [Value]=\"searchText\"\n        (ValueChange)=\"onSearchChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n  @if (isLoading) {\n    <mj-loading text=\"Loading audit logs...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Stats Cards -->\n    <div class=\"stats-grid\">\n      <div class=\"stat-card\">\n        <div class=\"stat-icon total\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{auditLogs.length}}</div>\n          <div class=\"stat-label\">Total Events</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon success\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value success\">{{getSuccessCount()}}</div>\n          <div class=\"stat-label\">Successful</div>\n        </div>\n        <div class=\"stat-rate\">{{getSuccessRate()}}%</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon failed\">\n          <i class=\"fa-solid fa-times-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value failed\">{{getFailedCount()}}</div>\n          <div class=\"stat-label\">Failed</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon users\">\n          <i class=\"fa-solid fa-users\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{getUniqueUserCount()}}</div>\n          <div class=\"stat-label\">Unique Users</div>\n        </div>\n      </div>\n    </div>\n    <!-- Activity Chart -->\n    @if (hourlyData.length > 0) {\n      <div class=\"activity-chart\">\n        <div class=\"chart-header\">\n          <h3>\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Today's Activity\n          </h3>\n        </div>\n        <div class=\"chart-container\">\n          <div class=\"chart-bars\">\n            @for (data of hourlyData; track data) {\n              <div\n                class=\"chart-bar-wrapper\"\n                [title]=\"data.hour + ': ' + (data.success + data.failed) + ' events'\"\n                >\n                <div class=\"chart-bar\">\n                  <div\n                    class=\"bar-segment success\"\n                    [style.height.%]=\"(data.success / getMaxHourlyCount()) * 100\"\n                  ></div>\n                  <div\n                    class=\"bar-segment failed\"\n                    [style.height.%]=\"(data.failed / getMaxHourlyCount()) * 100\"\n                  ></div>\n                </div>\n                <span class=\"chart-label\">{{data.hour.split(':')[0]}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"chart-legend\">\n          <span class=\"legend-item\">\n            <span class=\"legend-color success\"></span>\n            Success\n          </span>\n          <span class=\"legend-item\">\n            <span class=\"legend-color failed\"></span>\n            Failed\n          </span>\n        </div>\n      </div>\n    }\n    <!-- Timeline View -->\n    @if (viewMode === 'timeline' && timelineGroups.length > 0) {\n      <div class=\"timeline-container\">\n        @for (group of timelineGroups; track group) {\n          <div class=\"timeline-group\">\n            <div class=\"timeline-date\">\n              <span class=\"date-label\">{{group.displayDate}}</span>\n              <span class=\"date-count\">{{group.logs.length}} events</span>\n            </div>\n            <div class=\"timeline-items\">\n              @for (log of group.logs; track log) {\n                <div\n                  class=\"timeline-item\"\n                  [class.expanded]=\"expandedLogId === log.ID\"\n                  [class.failed]=\"log.Status === 'Failed'\"\n                  >\n                  <div class=\"timeline-line\">\n                    <div\n                      class=\"timeline-dot\"\n                      [style.backgroundColor]=\"getOperationColor(getOperationType(log))\"\n                    ></div>\n                  </div>\n                  <div class=\"timeline-content\" (click)=\"toggleLogExpand(log.ID)\">\n                    <div class=\"timeline-header\">\n                      <div class=\"timeline-operation\">\n                        <i [class]=\"getOperationIcon(getOperationType(log))\" [style.color]=\"getOperationColor(getOperationType(log))\"></i>\n                        <span class=\"operation-name\">{{getOperationType(log)}}</span>\n                      </div>\n                      <div class=\"timeline-time\">{{formatTime(log.__mj_CreatedAt)}}</div>\n                    </div>\n                    <div class=\"timeline-body\">\n                      <div class=\"timeline-user\">\n                        <i class=\"fa-solid fa-user\"></i>\n                        {{log.User || 'Unknown'}}\n                      </div>\n                      @if (log.Description) {\n                        <div class=\"timeline-description\">\n                          {{log.Description}}\n                        </div>\n                      }\n                      <div class=\"timeline-badges\">\n                        <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                          <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                          {{log.Status}}\n                        </span>\n                        @if (getSubsystem(log)) {\n                          <span class=\"subsystem-badge\">\n                            {{getSubsystem(log)}}\n                          </span>\n                        }\n                        @if (log.parsedDetails?.credentialType) {\n                          <span class=\"type-badge\">\n                            <i class=\"fa-solid fa-key\"></i>\n                            {{log.parsedDetails?.credentialType}}\n                          </span>\n                        }\n                      </div>\n                    </div>\n                    @if (expandedLogId === log.ID) {\n                      <div class=\"timeline-details\">\n                        <div class=\"detail-grid\">\n                          @if (log.parsedDetails?.ipAddress) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">IP Address</span>\n                              <span class=\"detail-value\">{{log.parsedDetails?.ipAddress}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.duration) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Duration</span>\n                              <span class=\"detail-value\">{{formatDuration(log.parsedDetails?.duration)}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.credentialId) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Credential ID</span>\n                              <span class=\"detail-value mono\">{{log.parsedDetails?.credentialId}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.errorMessage) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">Error Message</span>\n                              <span class=\"detail-value error\">{{log.parsedDetails?.errorMessage}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.userAgent) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">User Agent</span>\n                              <span class=\"detail-value mono small\">{{log.parsedDetails?.userAgent}}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    <button class=\"expand-btn\">\n                      <i [class]=\"expandedLogId === log.ID ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- Table View -->\n    @if (viewMode === 'table' && filteredLogs.length > 0) {\n      <div class=\"audit-table-container\">\n        <table class=\"audit-table\">\n          <thead>\n            <tr>\n              <th>Timestamp</th>\n              <th>User</th>\n              <th>Operation</th>\n              <th>Description</th>\n              <th>Subsystem</th>\n              <th>Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (log of filteredLogs; track log) {\n              <tr [class.failed-row]=\"log.Status === 'Failed'\">\n                <td class=\"timestamp\">{{formatDate(log.__mj_CreatedAt)}}</td>\n                <td class=\"user\">{{log.User || 'Unknown'}}</td>\n                <td class=\"operation\">\n                  <span class=\"operation-badge\" [style.backgroundColor]=\"getOperationColor(getOperationType(log)) + '20'\" [style.color]=\"getOperationColor(getOperationType(log))\">\n                    <i [class]=\"getOperationIcon(getOperationType(log))\"></i>\n                    {{getOperationType(log)}}\n                  </span>\n                </td>\n                <td class=\"description\">{{log.Description || '-'}}</td>\n                <td class=\"subsystem\">{{getSubsystem(log) || '-'}}</td>\n                <td class=\"status\">\n                  <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                    <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                    {{log.Status}}\n                  </span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- Empty State -->\n    @if (filteredLogs.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <h3>No Audit Logs</h3>\n        @if (searchText || selectedStatus || selectedOperation) {\n          <p>\n            No events match your current filters.\n            <button class=\"btn-link\" (click)=\"searchText = ''; selectedStatus = ''; selectedOperation = ''; applyFilters()\">Clear filters</button>\n          </p>\n        }\n        @if (!searchText && !selectedStatus && !selectedOperation) {\n          <p>\n            No credential access events in the selected time range.\n          </p>\n        }\n      </div>\n    }\n  }\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Stats Grid */\n.stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    position: relative;\n}\n\n.stat-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.stat-icon.total {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon.success {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n}\n\n.stat-icon.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n    color: var(--mj-status-error);\n}\n\n.stat-icon.users {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.stat-icon i {\n    font-size: 20px;\n}\n\n.stat-content {\n    flex: 1;\n}\n\n.stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.stat-value.success {\n    color: var(--mj-status-success);\n}\n\n.stat-value.failed {\n    color: var(--mj-status-error);\n}\n\n.stat-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.stat-rate {\n    position: absolute;\n    top: 12px;\n    right: 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    padding: 4px 8px;\n    border-radius: 8px;\n}\n\n/* Activity Chart */\n.activity-chart {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.chart-header {\n    margin-bottom: 16px;\n}\n\n.chart-header h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0;\n}\n\n.chart-header h3 i {\n    color: var(--mj-brand-primary);\n}\n\n.chart-container {\n    height: 120px;\n    padding: 0 4px;\n}\n\n.chart-bars {\n    display: flex;\n    align-items: flex-end;\n    height: 100%;\n    gap: 2px;\n}\n\n.chart-bar-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n}\n\n.chart-bar {\n    flex: 1;\n    width: 100%;\n    max-width: 24px;\n    display: flex;\n    flex-direction: column-reverse;\n    border-radius: 4px 4px 0 0;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.bar-segment {\n    width: 100%;\n    transition: height 0.3s ease;\n}\n\n.bar-segment.success {\n    background: var(--mj-status-success);\n}\n\n.bar-segment.failed {\n    background: var(--mj-status-error);\n}\n\n.chart-label {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.chart-legend {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.success {\n    background: var(--mj-status-success);\n}\n\n.legend-color.failed {\n    background: var(--mj-status-error);\n}\n\n/* Timeline View */\n.timeline-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.timeline-group {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.timeline-date {\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-bg-surface-sunken);\n}\n\n.date-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.date-count {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-border-default);\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.timeline-items {\n    padding: 8px 0;\n}\n\n.timeline-item {\n    display: flex;\n    padding: 12px 20px;\n    transition: background 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.timeline-item.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.timeline-item.failed:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timeline-line {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.timeline-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n    position: relative;\n}\n\n.timeline-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.timeline-operation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-operation i {\n    font-size: 14px;\n}\n\n.operation-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.timeline-time {\n    font-size: 12px;\n    font-family: monospace;\n    color: var(--mj-text-secondary);\n}\n\n.timeline-body {\n    margin-bottom: 8px;\n}\n\n.timeline-user {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.timeline-user i {\n    font-size: 11px;\n}\n\n.timeline-description {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n}\n\n.timeline-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-badge.success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.failed {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.unknown {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge i {\n    font-size: 10px;\n}\n\n.subsystem-badge,\n.type-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 12px;\n    font-size: 11px;\n    color: var(--mj-text-secondary);\n}\n\n.type-badge {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.type-badge i {\n    font-size: 10px;\n}\n\n/* Timeline Details */\n.timeline-details {\n    margin-top: 12px;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item.full-width {\n    grid-column: 1 / -1;\n}\n\n.detail-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.detail-value.mono {\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.detail-value.small {\n    font-size: 11px;\n    word-break: break-all;\n}\n\n.detail-value.error {\n    color: var(--mj-status-error);\n}\n\n.expand-btn {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.expand-btn:hover {\n    color: var(--mj-brand-primary);\n}\n\n.expand-btn i {\n    font-size: 10px;\n}\n\n/* Table View */\n.audit-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.audit-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.audit-table th {\n    padding: 14px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.audit-table td {\n    padding: 14px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.audit-table tr:last-child td {\n    border-bottom: none;\n}\n\n.audit-table tr:hover td {\n    background: var(--mj-bg-surface-card);\n}\n\n.audit-table tr.failed-row td {\n    background: color-mix(in srgb, var(--mj-status-error) 2%, transparent);\n}\n\n.audit-table tr.failed-row:hover td {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.timestamp {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.user {\n    font-weight: 500;\n}\n\n.operation-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.operation-badge i {\n    font-size: 10px;\n}\n\n.description {\n    max-width: 300px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.subsystem {\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: 64px 24px;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--mj-border-strong);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n    .stats-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .audit-container {\n        padding: 16px;\n    }\n\n    .audit-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .stats-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left {\n        flex-direction: column;\n    }\n\n    .search-container {\n        width: 100%;\n    }\n\n    .filter-select {\n        width: 100%;\n    }\n\n    .toolbar-right {\n        justify-content: space-between;\n    }\n\n    .detail-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .chart-label {\n        display: none;\n    }\n\n    .chart-label:nth-child(4n+1) {\n        display: block;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsAuditResourceComponent, { className: "CredentialsAuditResourceComponent", filePath: "src/Credentials/components/credentials-audit-resource.component.ts", lineNumber: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsAuditResourceComponent, { className: "CredentialsAuditResourceComponent", filePath: "src/Credentials/components/credentials-audit-resource.component.ts", lineNumber: 39 }); })();
 //# sourceMappingURL=credentials-audit-resource.component.js.map