@memberjunction/ng-explorer-settings 5.38.0 → 5.40.0

package/dist/lib/user-management/user-management.component.js

@@ -17,40 +17,40 @@ import * as i3 from "@memberjunction/ng-ui-components";
 import * as i4 from "./user-dialog/user-dialog.component";
 import * as i5 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.ID;
-function UserManagementComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 25);
-    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 22);
+    i0.ɵɵelement(2, "i", 23);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 27);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_19_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSelection()); });
-    i0.ɵɵelement(6, "i", 28);
+    i0.ɵɵelementStart(5, "button", 24);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSelection()); });
+    i0.ɵɵelement(6, "i", 25);
     i0.ɵɵtext(7, " Clear ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 29)(9, "button", 30);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_19_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("enable")); });
-    i0.ɵɵelement(10, "i", 31);
-    i0.ɵɵelementStart(11, "span", 32);
+    i0.ɵɵelementStart(8, "div", 26)(9, "button", 27);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_17_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("enable")); });
+    i0.ɵɵelement(10, "i", 28);
+    i0.ɵɵelementStart(11, "span", 29);
     i0.ɵɵtext(12, "Enable");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 33);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_19_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("disable")); });
-    i0.ɵɵelement(14, "i", 34);
-    i0.ɵɵelementStart(15, "span", 32);
+    i0.ɵɵelementStart(13, "button", 30);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_17_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("disable")); });
+    i0.ɵɵelement(14, "i", 31);
+    i0.ɵɵelementStart(15, "span", 29);
     i0.ɵɵtext(16, "Disable");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "button", 35);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_19_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openBulkRoleAssign()); });
-    i0.ɵɵelement(18, "i", 36);
-    i0.ɵɵelementStart(19, "span", 32);
+    i0.ɵɵelementStart(17, "button", 32);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_17_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openBulkRoleAssign()); });
+    i0.ɵɵelement(18, "i", 33);
+    i0.ɵɵelementStart(19, "span", 29);
     i0.ɵɵtext(20, "Assign Role");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "button", 37);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_19_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("delete")); });
-    i0.ɵɵelement(22, "i", 38);
-    i0.ɵɵelementStart(23, "span", 32);
+    i0.ɵɵelementStart(21, "button", 34);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_17_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmBulkAction("delete")); });
+    i0.ɵɵelement(22, "i", 35);
+    i0.ɵɵelementStart(23, "span", 29);
     i0.ɵɵtext(24, "Delete");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -58,21 +58,21 @@ function UserManagementComponent_Conditional_19_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", ctx_r1.selectedCount, " user", ctx_r1.selectedCount > 1 ? "s" : "", " selected");
 } }
-function UserManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "mj-loading", 39);
+function UserManagementComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "mj-loading", 36);
     i0.ɵɵelementEnd();
 } }
-function UserManagementComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 40);
-    i0.ɵɵelement(2, "i", 41);
-    i0.ɵɵelementStart(3, "p", 42);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 37);
+    i0.ɵɵelement(2, "i", 38);
+    i0.ɵɵelementStart(3, "p", 39);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 43);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_22_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
-    i0.ɵɵelement(6, "i", 44);
+    i0.ɵɵelementStart(5, "button", 40);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
+    i0.ɵɵelement(6, "i", 41);
     i0.ɵɵtext(7, " Try Again ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -80,8 +80,8 @@ function UserManagementComponent_Conditional_22_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function UserManagementComponent_Conditional_23_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 49);
+function UserManagementComponent_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,9 +89,9 @@ function UserManagementComponent_Conditional_23_Conditional_6_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r1.selectedCount, " selected");
 } }
-function UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_50_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89);
-    i0.ɵɵelement(1, "i", 90);
+function UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_50_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "i", 87);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -99,9 +99,9 @@ function UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", role_r8.Name, " ");
 } }
-function UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_50_For_2_Template, 3, 1, "div", 89, _forTrack0);
+function UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵrepeaterCreate(1, UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_50_For_2_Template, 3, 1, "div", 86, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const user_r6 = i0.ɵɵnextContext(2).$implicit;
@@ -109,77 +109,77 @@ function UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.getUserRoles(user_r6.ID));
 } }
-function UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 88);
+function UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 85);
     i0.ɵɵtext(1, "No roles assigned to this user");
     i0.ɵɵelementEnd();
 } }
-function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_21_For_8_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "span", 62);
-    i0.ɵɵelement(3, "i", 63);
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Conditional_25_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "span", 59);
+    i0.ɵɵelement(3, "i", 60);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 73)(6, "button", 74);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editUser(user_r6)); });
-    i0.ɵɵelement(7, "i", 66);
-    i0.ɵɵelementStart(8, "span", 75);
+    i0.ɵɵelementStart(5, "div", 70)(6, "button", 71);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Conditional_25_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editUser(user_r6)); });
+    i0.ɵɵelement(7, "i", 63);
+    i0.ɵɵelementStart(8, "span", 72);
     i0.ɵɵtext(9, "Edit");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "button", 74);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserStatus(user_r6)); });
-    i0.ɵɵelement(11, "i", 63);
-    i0.ɵɵelementStart(12, "span", 75);
+    i0.ɵɵelementStart(10, "button", 71);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Conditional_25_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserStatus(user_r6)); });
+    i0.ɵɵelement(11, "i", 60);
+    i0.ɵɵelementStart(12, "span", 72);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 76);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteUser(user_r6)); });
-    i0.ɵɵelement(15, "i", 38);
-    i0.ɵɵelementStart(16, "span", 75);
+    i0.ɵɵelementStart(14, "button", 73);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Conditional_25_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r7); const user_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteUser(user_r6)); });
+    i0.ɵɵelement(15, "i", 35);
+    i0.ɵɵelementStart(16, "span", 72);
     i0.ɵɵtext(17, "Delete");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(18, "div", 77)(19, "div", 78);
-    i0.ɵɵelement(20, "i", 36);
-    i0.ɵɵelementStart(21, "span", 79);
+    i0.ɵɵelementStart(18, "div", 74)(19, "div", 75);
+    i0.ɵɵelement(20, "i", 33);
+    i0.ɵɵelementStart(21, "span", 76);
     i0.ɵɵtext(22, "Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 80);
-    i0.ɵɵelement(24, "i", 63);
+    i0.ɵɵelementStart(23, "span", 77);
+    i0.ɵɵelement(24, "i", 60);
     i0.ɵɵtext(25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "div", 78);
-    i0.ɵɵelement(27, "i", 81);
-    i0.ɵɵelementStart(28, "span", 79);
+    i0.ɵɵelementStart(26, "div", 75);
+    i0.ɵɵelement(27, "i", 78);
+    i0.ɵɵelementStart(28, "span", 76);
     i0.ɵɵtext(29, "Full Name:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 80);
+    i0.ɵɵelementStart(30, "span", 77);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 78);
-    i0.ɵɵelement(33, "i", 82);
-    i0.ɵɵelementStart(34, "span", 79);
+    i0.ɵɵelementStart(32, "div", 75);
+    i0.ɵɵelement(33, "i", 79);
+    i0.ɵɵelementStart(34, "span", 76);
     i0.ɵɵtext(35, "Created:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 80);
+    i0.ɵɵelementStart(36, "span", 77);
     i0.ɵɵtext(37);
     i0.ɵɵpipe(38, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 78);
-    i0.ɵɵelement(40, "i", 83);
-    i0.ɵɵelementStart(41, "span", 79);
+    i0.ɵɵelementStart(39, "div", 75);
+    i0.ɵɵelement(40, "i", 80);
+    i0.ɵɵelementStart(41, "span", 76);
     i0.ɵɵtext(42, "Updated:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "span", 80);
+    i0.ɵɵelementStart(43, "span", 77);
     i0.ɵɵtext(44);
     i0.ɵɵpipe(45, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(46, "div", 84)(47, "h4", 85);
-    i0.ɵɵelement(48, "i", 86);
+    i0.ɵɵelementStart(46, "div", 81)(47, "h4", 82);
+    i0.ɵɵelement(48, "i", 83);
     i0.ɵɵtext(49, " Assigned Roles ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(50, UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_50_Template, 3, 0, "div", 87)(51, UserManagementComponent_Conditional_23_For_8_Conditional_25_Conditional_51_Template, 2, 0, "p", 88);
+    i0.ɵɵconditionalCreate(50, UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_50_Template, 3, 0, "div", 84)(51, UserManagementComponent_Conditional_21_For_8_Conditional_25_Conditional_51_Template, 2, 0, "p", 85);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const user_r6 = i0.ɵɵnextContext().$implicit;
@@ -213,46 +213,46 @@ function UserManagementComponent_Conditional_23_For_8_Conditional_25_Template(rf
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r1.getUserRoles(user_r6.ID).length > 0 ? 50 : 51);
 } }
-function UserManagementComponent_Conditional_23_For_8_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_21_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_div_click_1_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserExpansion(user_r6.ID)); })("keydown.enter", function UserManagementComponent_Conditional_23_For_8_Template_div_keydown_enter_1_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserExpansion(user_r6.ID)); });
-    i0.ɵɵelementStart(2, "div", 54);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(3, "input", 55);
-    i0.ɵɵlistener("change", function UserManagementComponent_Conditional_23_For_8_Template_input_change_3_listener($event) { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserSelection(user_r6.ID, $event)); });
+    i0.ɵɵelementStart(0, "div", 49)(1, "div", 50);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_div_click_1_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserExpansion(user_r6.ID)); })("keydown.enter", function UserManagementComponent_Conditional_21_For_8_Template_div_keydown_enter_1_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserExpansion(user_r6.ID)); });
+    i0.ɵɵelementStart(2, "div", 51);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "input", 52);
+    i0.ɵɵlistener("change", function UserManagementComponent_Conditional_21_For_8_Template_input_change_3_listener($event) { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserSelection(user_r6.ID, $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
+    i0.ɵɵelementStart(4, "div", 53)(5, "div", 54);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 58)(8, "h3", 59);
+    i0.ɵɵelementStart(7, "div", 55)(8, "h3", 56);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 60);
+    i0.ɵɵelementStart(10, "p", 57);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 61)(13, "span", 62);
-    i0.ɵɵelement(14, "i", 63);
+    i0.ɵɵelementStart(12, "div", 58)(13, "span", 59);
+    i0.ɵɵelement(14, "i", 60);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 64);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_div_click_16_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(17, "button", 65);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_button_click_17_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editUser(user_r6)); });
-    i0.ɵɵelement(18, "i", 66);
+    i0.ɵɵelementStart(16, "div", 61);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_div_click_16_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(17, "button", 62);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_button_click_17_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editUser(user_r6)); });
+    i0.ɵɵelement(18, "i", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 67);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_button_click_19_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserStatus(user_r6)); });
-    i0.ɵɵelement(20, "i", 63);
+    i0.ɵɵelementStart(19, "button", 64);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_button_click_19_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleUserStatus(user_r6)); });
+    i0.ɵɵelement(20, "i", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 68);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_For_8_Template_button_click_21_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteUser(user_r6)); });
-    i0.ɵɵelement(22, "i", 38);
+    i0.ɵɵelementStart(21, "button", 65);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_21_For_8_Template_button_click_21_listener() { const user_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteUser(user_r6)); });
+    i0.ɵɵelement(22, "i", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "button", 69);
-    i0.ɵɵelement(24, "i", 70);
+    i0.ɵɵelementStart(23, "button", 66);
+    i0.ɵɵelement(24, "i", 67);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, UserManagementComponent_Conditional_23_For_8_Conditional_25_Template, 52, 25, "div", 71);
+    i0.ɵɵconditionalCreate(25, UserManagementComponent_Conditional_21_For_8_Conditional_25_Template, 52, 25, "div", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const user_r6 = ctx.$implicit;
@@ -287,28 +287,28 @@ function UserManagementComponent_Conditional_23_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.isUserExpanded(user_r6.ID) ? 25 : -1);
 } }
-function UserManagementComponent_Conditional_23_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "i", 91);
-    i0.ɵɵelementStart(2, "p", 92);
+function UserManagementComponent_Conditional_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(2, "p", 89);
     i0.ɵɵtext(3, "No users found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 93);
+    i0.ɵɵelementStart(4, "p", 90);
     i0.ɵɵtext(5, "Try adjusting your filters or add a new user");
     i0.ɵɵelementEnd()();
 } }
-function UserManagementComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 45)(2, "label", 46)(3, "input", 47);
-    i0.ɵɵlistener("change", function UserManagementComponent_Conditional_23_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 42)(2, "label", 43)(3, "input", 44);
+    i0.ɵɵlistener("change", function UserManagementComponent_Conditional_21_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 48);
+    i0.ɵɵelementStart(4, "span", 45);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, UserManagementComponent_Conditional_23_Conditional_6_Template, 2, 1, "span", 49);
+    i0.ɵɵconditionalCreate(6, UserManagementComponent_Conditional_21_Conditional_6_Template, 2, 1, "span", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(7, UserManagementComponent_Conditional_23_For_8_Template, 26, 22, "div", 50, _forTrack0);
-    i0.ɵɵconditionalCreate(9, UserManagementComponent_Conditional_23_Conditional_9_Template, 6, 0, "div", 51);
+    i0.ɵɵrepeaterCreate(7, UserManagementComponent_Conditional_21_For_8_Template, 26, 22, "div", 47, _forTrack0);
+    i0.ɵɵconditionalCreate(9, UserManagementComponent_Conditional_21_Conditional_9_Template, 6, 0, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -323,37 +323,37 @@ function UserManagementComponent_Conditional_23_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.filteredUsers.length === 0 ? 9 : -1);
 } }
-function UserManagementComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 94);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
-    i0.ɵɵelementStart(1, "div", 95);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 96)(3, "h3", 97);
-    i0.ɵɵelement(4, "i", 98);
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(1, "div", 92);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r9); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 93)(3, "h3", 94);
+    i0.ɵɵelement(4, "i", 95);
     i0.ɵɵtext(5, " Confirm Delete ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 99);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
-    i0.ɵɵelement(7, "i", 28);
+    i0.ɵɵelementStart(6, "button", 96);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelement(7, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 100)(9, "p");
+    i0.ɵɵelementStart(8, "div", 97)(9, "p");
     i0.ɵɵtext(10, "Are you sure you want to delete user ");
     i0.ɵɵelementStart(11, "strong");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13, "?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "p", 101);
+    i0.ɵɵelementStart(14, "p", 98);
     i0.ɵɵtext(15, "This action cannot be undone.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 102)(17, "button", 103);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteUser()); });
-    i0.ɵɵelement(18, "i", 38);
+    i0.ɵɵelementStart(16, "div", 99)(17, "button", 100);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteUser()); });
+    i0.ɵɵelement(18, "i", 35);
     i0.ɵɵtext(19, " Delete User ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 104);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(20, "button", 101);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
     i0.ɵɵtext(21, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -361,35 +361,35 @@ function UserManagementComponent_Conditional_25_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(12);
     i0.ɵɵtextInterpolate(ctx_r1.selectedUser.Name);
 } }
-function UserManagementComponent_Conditional_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 98);
+function UserManagementComponent_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 95);
 } }
-function UserManagementComponent_Conditional_26_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 107);
+function UserManagementComponent_Conditional_24_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 104);
 } }
-function UserManagementComponent_Conditional_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 108);
+function UserManagementComponent_Conditional_24_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 105);
 } }
-function UserManagementComponent_Conditional_26_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 101);
+function UserManagementComponent_Conditional_24_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 98);
     i0.ɵɵtext(1, "This action cannot be undone.");
     i0.ɵɵelementEnd();
 } }
-function UserManagementComponent_Conditional_26_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 112);
+function UserManagementComponent_Conditional_24_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 109);
     i0.ɵɵtext(1, " Processing... ");
 } }
-function UserManagementComponent_Conditional_26_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function UserManagementComponent_Conditional_24_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
 } }
-function UserManagementComponent_Conditional_26_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 31);
+function UserManagementComponent_Conditional_24_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 28);
 } }
-function UserManagementComponent_Conditional_26_Conditional_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 34);
+function UserManagementComponent_Conditional_24_Conditional_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 31);
 } }
-function UserManagementComponent_Conditional_26_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, UserManagementComponent_Conditional_26_Conditional_17_Conditional_0_Template, 1, 0, "i", 38)(1, UserManagementComponent_Conditional_26_Conditional_17_Conditional_1_Template, 1, 0, "i", 31)(2, UserManagementComponent_Conditional_26_Conditional_17_Conditional_2_Template, 1, 0, "i", 34);
+function UserManagementComponent_Conditional_24_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, UserManagementComponent_Conditional_24_Conditional_17_Conditional_0_Template, 1, 0, "i", 35)(1, UserManagementComponent_Conditional_24_Conditional_17_Conditional_1_Template, 1, 0, "i", 28)(2, UserManagementComponent_Conditional_24_Conditional_17_Conditional_2_Template, 1, 0, "i", 31);
     i0.ɵɵtext(3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -397,31 +397,31 @@ function UserManagementComponent_Conditional_26_Conditional_17_Template(rf, ctx)
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getBulkActionButtonText(), " ");
 } }
-function UserManagementComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
-    i0.ɵɵelementStart(1, "div", 95);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_26_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 96)(3, "h3", 106);
-    i0.ɵɵconditionalCreate(4, UserManagementComponent_Conditional_26_Conditional_4_Template, 1, 0, "i", 98)(5, UserManagementComponent_Conditional_26_Conditional_5_Template, 1, 0, "i", 107)(6, UserManagementComponent_Conditional_26_Conditional_6_Template, 1, 0, "i", 108);
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
+    i0.ɵɵelementStart(1, "div", 92);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 93)(3, "h3", 103);
+    i0.ɵɵconditionalCreate(4, UserManagementComponent_Conditional_24_Conditional_4_Template, 1, 0, "i", 95)(5, UserManagementComponent_Conditional_24_Conditional_5_Template, 1, 0, "i", 104)(6, UserManagementComponent_Conditional_24_Conditional_6_Template, 1, 0, "i", 105);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 99);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_26_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
-    i0.ɵɵelement(9, "i", 28);
+    i0.ɵɵelementStart(8, "button", 96);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
+    i0.ɵɵelement(9, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 109)(11, "p");
+    i0.ɵɵelementStart(10, "div", 106)(11, "p");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, UserManagementComponent_Conditional_26_Conditional_13_Template, 2, 0, "p", 101);
+    i0.ɵɵconditionalCreate(13, UserManagementComponent_Conditional_24_Conditional_13_Template, 2, 0, "p", 98);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 102)(15, "button", 110);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_26_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeBulkAction()); });
-    i0.ɵɵconditionalCreate(16, UserManagementComponent_Conditional_26_Conditional_16_Template, 2, 0)(17, UserManagementComponent_Conditional_26_Conditional_17_Template, 4, 2);
+    i0.ɵɵelementStart(14, "div", 99)(15, "button", 107);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeBulkAction()); });
+    i0.ɵɵconditionalCreate(16, UserManagementComponent_Conditional_24_Conditional_16_Template, 2, 0)(17, UserManagementComponent_Conditional_24_Conditional_17_Template, 4, 2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 111);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_26_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
+    i0.ɵɵelementStart(18, "button", 108);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
     i0.ɵɵtext(19, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -441,8 +441,8 @@ function UserManagementComponent_Conditional_26_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isLoading);
 } }
-function UserManagementComponent_Conditional_27_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 120);
+function UserManagementComponent_Conditional_25_For_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -451,47 +451,47 @@ function UserManagementComponent_Conditional_27_For_18_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(role_r12.Name);
 } }
-function UserManagementComponent_Conditional_27_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 112);
+function UserManagementComponent_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 109);
     i0.ɵɵtext(1, " Assigning... ");
 } }
-function UserManagementComponent_Conditional_27_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 36);
+function UserManagementComponent_Conditional_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
     i0.ɵɵtext(1, " Assign Role ");
 } }
-function UserManagementComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function UserManagementComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_27_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
-    i0.ɵɵelementStart(1, "div", 95);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_27_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 96)(3, "h3", 114);
-    i0.ɵɵelement(4, "i", 36);
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
+    i0.ɵɵelementStart(1, "div", 92);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 93)(3, "h3", 111);
+    i0.ɵɵelement(4, "i", 33);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 99);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_27_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
-    i0.ɵɵelement(7, "i", 28);
+    i0.ɵɵelementStart(6, "button", 96);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
+    i0.ɵɵelement(7, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 115)(9, "p");
+    i0.ɵɵelementStart(8, "div", 112)(9, "p");
     i0.ɵɵtext(10, "Select a role to assign to the selected users:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 116)(12, "label", 117);
+    i0.ɵɵelementStart(11, "div", 113)(12, "label", 114);
     i0.ɵɵtext(13, "Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "select", 118);
-    i0.ɵɵtwoWayListener("ngModelChange", function UserManagementComponent_Conditional_27_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bulkRoleId, $event) || (ctx_r1.bulkRoleId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(15, "option", 119);
+    i0.ɵɵelementStart(14, "select", 115);
+    i0.ɵɵtwoWayListener("ngModelChange", function UserManagementComponent_Conditional_25_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bulkRoleId, $event) || (ctx_r1.bulkRoleId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(15, "option", 116);
     i0.ɵɵtext(16, "Select a role...");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(17, UserManagementComponent_Conditional_27_For_18_Template, 2, 2, "option", 120, _forTrack0);
+    i0.ɵɵrepeaterCreate(17, UserManagementComponent_Conditional_25_For_18_Template, 2, 2, "option", 117, _forTrack0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "div", 102)(20, "button", 121);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_27_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeBulkRoleAssign()); });
-    i0.ɵɵconditionalCreate(21, UserManagementComponent_Conditional_27_Conditional_21_Template, 2, 0)(22, UserManagementComponent_Conditional_27_Conditional_22_Template, 2, 0);
+    i0.ɵɵelementStart(19, "div", 99)(20, "button", 118);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeBulkRoleAssign()); });
+    i0.ɵɵconditionalCreate(21, UserManagementComponent_Conditional_25_Conditional_21_Template, 2, 0)(22, UserManagementComponent_Conditional_25_Conditional_22_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "button", 111);
-    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_27_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
+    i0.ɵɵelementStart(23, "button", 108);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
     i0.ɵɵtext(24, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -897,6 +897,16 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
      */
     get filterFields() {
         return [
+            {
+                key: 'status',
+                type: 'chips',
+                label: 'Status',
+                chipOptions: [
+                    { text: 'All', value: 'all' },
+                    { text: 'Active', value: 'active' },
+                    { text: 'Inactive', value: 'inactive' },
+                ],
+            },
             {
                 key: 'role',
                 type: 'dropdown',
@@ -913,18 +923,27 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     }
     /** Current popover field values keyed by FilterFieldConfig.key. */
     get filterValues() {
-        return { role: this.filters$.value.role };
+        return { status: this.filters$.value.status, role: this.filters$.value.role };
     }
-    /** Number of active filters INSIDE the popover only — drives the popover badge. */
-    get popoverActiveFilterCount() {
-        return this.filters$.value.role !== '' ? 1 : 0;
+    /** Total active filters (Status + Role) — drives the Filter button badge. */
+    get TotalActiveFilterCount() {
+        const f = this.filters$.value;
+        return (f.status !== 'all' ? 1 : 0) + (f.role !== '' ? 1 : 0);
     }
     /** Apply a value change from <mj-filter-panel>. */
     onFilterPanelChange(values) {
-        const role = values['role'] ?? '';
-        this.filters$.next({ ...this.filters$.value, role });
-        this.applyFilters();
-        this.cdr.markForCheck();
+        const partial = {};
+        if ('status' in values) {
+            partial.status = values['status'] || 'all';
+        }
+        if ('role' in values) {
+            partial.role = values['role'] ?? '';
+        }
+        this.updateFilter(partial);
+    }
+    /** Clear all filters (Status + Role); search persists. */
+    clearAllAppliedFilters() {
+        this.updateFilter({ status: 'all', role: '' });
     }
     toggleSelectAll() {
         if (this.isAllSelected) {
@@ -1142,86 +1161,73 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         return this.roles.filter(role => roleIds.some(id => UUIDsEqual(id, role.ID)));
     }
     static ɵfac = function UserManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserManagementComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserManagementComponent, selectors: [["mj-user-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 28, vars: 20, consts: [["AriaLabel", "Filter users", "Title", "Users", "Subtitle", "Manage user accounts, roles, and access"], ["meta", ""], ["Label", "users", 3, "Count", "Total"], ["toolbar", ""], ["Placeholder", "Search users by name or email...", 3, "ValueChange", "Value"], ["role", "group", "aria-label", "Filter by status", 1, "status-chips"], ["Label", "All", 3, "Clicked", "Active"], ["Label", "Active", 3, "Clicked", "Active"], ["Label", "Inactive", 3, "Clicked", "Active"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Export users to file", 3, "click"], [1, "fa-solid", "fa-download"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Add new user", 3, "click"], [1, "fa-solid", "fa-plus"], ["role", "toolbar", "aria-label", "Bulk actions", 1, "bulk-action-toolbar"], ["role", "status", "aria-live", "polite", "aria-busy", "true", 1, "loading-container"], ["role", "alert", "aria-live", "assertive", 1, "error-container"], ["role", "list", "aria-label", "Users list", 1, "users-list"], [3, "result", "data", "visible"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-backdrop"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-action-dialog-title", "aria-describedby", "bulk-action-dialog-desc", 1, "modal-backdrop"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-role-dialog-title", "aria-describedby", "bulk-role-dialog-desc", 1, "modal-backdrop"], [1, "bulk-selection-info"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-square"], ["mjButton", "", "variant", "flat", "size", "sm", "aria-label", "Clear selection", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], [1, "bulk-action-buttons"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Enable selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-on"], [1, "btn-text"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Disable selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-off"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Assign role to selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-tag"], ["mjButton", "", "variant", "danger", "size", "sm", "aria-label", "Delete selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], ["text", "Loading users...", "size", "medium"], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["aria-label", "Retry loading users", 1, "retry-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "list-header"], [1, "select-all-label"], ["type", "checkbox", "aria-label", "Select all users", 1, "checkbox", 3, "change", "checked", "indeterminate"], [1, "select-all-text"], [1, "selection-count"], ["role", "listitem", 1, "user-card", 3, "expanded", "selected"], ["role", "status", 1, "empty-state"], ["role", "listitem", 1, "user-card"], ["role", "button", "tabindex", "0", 1, "user-header", 3, "click", "keydown.enter"], [1, "user-selection", 3, "click"], ["type", "checkbox", 1, "checkbox", 3, "change", "checked"], [1, "user-info"], ["aria-hidden", "true", 1, "user-avatar"], [1, "user-details"], [1, "user-name"], [1, "user-email"], [1, "user-meta"], [1, "status-badge"], ["aria-hidden", "true"], [1, "user-actions", "desktop-only", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-edit"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], ["aria-label", "Toggle user details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "user-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "btn-label"], ["mjButton", "", "variant", "danger", "size", "sm", 3, "click"], [1, "user-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-id-card"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "roles-section"], [1, "section-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-shield"], [1, "roles-grid"], [1, "no-roles"], [1, "role-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-shield"], ["aria-hidden", "true", 1, "fa-solid", "fa-users-slash", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["id", "delete-dialog-desc", 1, "modal-body"], [1, "text-muted"], [1, "modal-footer"], ["mjButton", "", "variant", "danger", 3, "click"], ["mjButton", "", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-action-dialog-title", "aria-describedby", "bulk-action-dialog-desc", 1, "modal-backdrop", 3, "click"], ["id", "bulk-action-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-on", "text-success"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-off", "text-warning"], ["id", "bulk-action-dialog-desc", 1, "modal-body"], ["mjButton", "", 3, "click", "variant", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-role-dialog-title", "aria-describedby", "bulk-role-dialog-desc", 1, "modal-backdrop", 3, "click"], ["id", "bulk-role-dialog-title", 1, "modal-title"], ["id", "bulk-role-dialog-desc", 1, "modal-body"], [1, "form-field"], ["for", "bulk-role-select", 1, "field-label"], ["id", "bulk-role-select", "aria-label", "Select role to assign", 1, "field-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"]], template: function UserManagementComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserManagementComponent, selectors: [["mj-user-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 26, vars: 17, consts: [["AriaLabel", "Filter users", "Title", "Users", "Subtitle", "Manage user accounts, roles, and access"], ["meta", ""], ["Label", "users", 3, "Count", "Total"], ["toolbar", ""], ["Placeholder", "Search users by name or email...", 3, "ValueChange", "Value"], ["Label", "Filters", "Icon", "fa-solid fa-filter", 3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Export users to file", 3, "click"], [1, "fa-solid", "fa-download"], [1, "mj-action-label"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Add new user", 3, "click"], [1, "fa-solid", "fa-plus"], ["role", "toolbar", "aria-label", "Bulk actions", 1, "bulk-action-toolbar"], ["role", "status", "aria-live", "polite", "aria-busy", "true", 1, "loading-container"], ["role", "alert", "aria-live", "assertive", 1, "error-container"], ["role", "list", "aria-label", "Users list", 1, "users-list"], [3, "result", "data", "visible"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-backdrop"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-action-dialog-title", "aria-describedby", "bulk-action-dialog-desc", 1, "modal-backdrop"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-role-dialog-title", "aria-describedby", "bulk-role-dialog-desc", 1, "modal-backdrop"], [1, "bulk-selection-info"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-square"], ["mjButton", "", "variant", "flat", "size", "sm", "aria-label", "Clear selection", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], [1, "bulk-action-buttons"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Enable selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-on"], [1, "btn-text"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Disable selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-off"], ["mjButton", "", "variant", "secondary", "size", "sm", "aria-label", "Assign role to selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-tag"], ["mjButton", "", "variant", "danger", "size", "sm", "aria-label", "Delete selected users", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], ["text", "Loading users...", "size", "medium"], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["aria-label", "Retry loading users", 1, "retry-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "list-header"], [1, "select-all-label"], ["type", "checkbox", "aria-label", "Select all users", 1, "checkbox", 3, "change", "checked", "indeterminate"], [1, "select-all-text"], [1, "selection-count"], ["role", "listitem", 1, "user-card", 3, "expanded", "selected"], ["role", "status", 1, "empty-state"], ["role", "listitem", 1, "user-card"], ["role", "button", "tabindex", "0", 1, "user-header", 3, "click", "keydown.enter"], [1, "user-selection", 3, "click"], ["type", "checkbox", 1, "checkbox", 3, "change", "checked"], [1, "user-info"], ["aria-hidden", "true", 1, "user-avatar"], [1, "user-details"], [1, "user-name"], [1, "user-email"], [1, "user-meta"], [1, "status-badge"], ["aria-hidden", "true"], [1, "user-actions", "desktop-only", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-edit"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], ["aria-label", "Toggle user details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "user-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "btn-label"], ["mjButton", "", "variant", "danger", "size", "sm", 3, "click"], [1, "user-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-id-card"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "roles-section"], [1, "section-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-shield"], [1, "roles-grid"], [1, "no-roles"], [1, "role-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-shield"], ["aria-hidden", "true", 1, "fa-solid", "fa-users-slash", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["id", "delete-dialog-desc", 1, "modal-body"], [1, "text-muted"], [1, "modal-footer"], ["mjButton", "", "variant", "danger", 3, "click"], ["mjButton", "", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-action-dialog-title", "aria-describedby", "bulk-action-dialog-desc", 1, "modal-backdrop", 3, "click"], ["id", "bulk-action-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-on", "text-success"], ["aria-hidden", "true", 1, "fa-solid", "fa-toggle-off", "text-warning"], ["id", "bulk-action-dialog-desc", 1, "modal-body"], ["mjButton", "", 3, "click", "variant", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "bulk-role-dialog-title", "aria-describedby", "bulk-role-dialog-desc", 1, "modal-backdrop", 3, "click"], ["id", "bulk-role-dialog-title", 1, "modal-title"], ["id", "bulk-role-dialog-desc", 1, "modal-body"], [1, "form-field"], ["for", "bulk-role-select", 1, "field-label"], ["id", "bulk-role-select", "aria-label", "Select role to assign", 1, "field-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"]], template: function UserManagementComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-page-header-interior", 0)(1, "div", 1);
             i0.ɵɵelement(2, "mj-stat-badge", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "div", 3)(4, "mj-page-search", 4);
             i0.ɵɵlistener("ValueChange", function UserManagementComponent_Template_mj_page_search_ValueChange_4_listener($event) { return ctx.updateFilter({ search: $event }); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5)(6, "mj-filter-chip", 6);
-            i0.ɵɵlistener("Clicked", function UserManagementComponent_Template_mj_filter_chip_Clicked_6_listener() { return ctx.onStatusFilterChange("all"); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "mj-filter-chip", 7);
-            i0.ɵɵlistener("Clicked", function UserManagementComponent_Template_mj_filter_chip_Clicked_7_listener() { return ctx.onStatusFilterChange("active"); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mj-filter-chip", 8);
-            i0.ɵɵlistener("Clicked", function UserManagementComponent_Template_mj_filter_chip_Clicked_8_listener() { return ctx.onStatusFilterChange("inactive"); });
+            i0.ɵɵelementStart(5, "mj-filter-popover", 5);
+            i0.ɵɵlistener("ClearAllRequested", function UserManagementComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.clearAllAppliedFilters(); });
+            i0.ɵɵelementStart(6, "mj-filter-panel", 6);
+            i0.ɵɵlistener("ValuesChange", function UserManagementComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterPanelChange($event); })("Reset", function UserManagementComponent_Template_mj_filter_panel_Reset_6_listener() { return ctx.clearAllAppliedFilters(); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "div", 9)(10, "mj-filter-popover", 10);
-            i0.ɵɵlistener("ClearAllRequested", function UserManagementComponent_Template_mj_filter_popover_ClearAllRequested_10_listener() { return ctx.onFilterPanelChange({ role: "" }); });
-            i0.ɵɵelementStart(11, "mj-filter-panel", 11);
-            i0.ɵɵlistener("ValuesChange", function UserManagementComponent_Template_mj_filter_panel_ValuesChange_11_listener($event) { return ctx.onFilterPanelChange($event); })("Reset", function UserManagementComponent_Template_mj_filter_panel_Reset_11_listener() { return ctx.onFilterPanelChange({ role: "" }); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "mj-refresh-button", 12);
-            i0.ɵɵlistener("Clicked", function UserManagementComponent_Template_mj_refresh_button_Clicked_12_listener() { return ctx.refreshData(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 13);
-            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_13_listener() { return ctx.exportUsers(); });
-            i0.ɵɵelement(14, "i", 14);
-            i0.ɵɵtext(15, " Export ");
+            i0.ɵɵelementStart(7, "div", 7)(8, "mj-refresh-button", 8);
+            i0.ɵɵlistener("Clicked", function UserManagementComponent_Template_mj_refresh_button_Clicked_8_listener() { return ctx.refreshData(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "button", 15);
-            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_16_listener() { return ctx.createNewUser(); });
-            i0.ɵɵelement(17, "i", 16);
-            i0.ɵɵtext(18, " Add User ");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(19, UserManagementComponent_Conditional_19_Template, 25, 2, "div", 17);
-            i0.ɵɵelementStart(20, "mj-page-body-interior");
-            i0.ɵɵconditionalCreate(21, UserManagementComponent_Conditional_21_Template, 2, 0, "div", 18);
-            i0.ɵɵconditionalCreate(22, UserManagementComponent_Conditional_22_Template, 8, 1, "div", 19);
-            i0.ɵɵconditionalCreate(23, UserManagementComponent_Conditional_23_Template, 10, 5, "div", 20);
+            i0.ɵɵelementStart(9, "button", 9);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_9_listener() { return ctx.exportUsers(); });
+            i0.ɵɵelement(10, "i", 10);
+            i0.ɵɵelementStart(11, "span", 11);
+            i0.ɵɵtext(12, "Export");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "button", 12);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_13_listener() { return ctx.createNewUser(); });
+            i0.ɵɵelement(14, "i", 13);
+            i0.ɵɵelementStart(15, "span", 11);
+            i0.ɵɵtext(16, "Add User");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(17, UserManagementComponent_Conditional_17_Template, 25, 2, "div", 14);
+            i0.ɵɵelementStart(18, "mj-page-body-interior");
+            i0.ɵɵconditionalCreate(19, UserManagementComponent_Conditional_19_Template, 2, 0, "div", 15);
+            i0.ɵɵconditionalCreate(20, UserManagementComponent_Conditional_20_Template, 8, 1, "div", 16);
+            i0.ɵɵconditionalCreate(21, UserManagementComponent_Conditional_21_Template, 10, 5, "div", 17);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "mj-user-dialog", 21);
-            i0.ɵɵlistener("result", function UserManagementComponent_Template_mj_user_dialog_result_24_listener($event) { return ctx.onUserDialogResult($event); });
+            i0.ɵɵelementStart(22, "mj-user-dialog", 18);
+            i0.ɵɵlistener("result", function UserManagementComponent_Template_mj_user_dialog_result_22_listener($event) { return ctx.onUserDialogResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(25, UserManagementComponent_Conditional_25_Template, 22, 1, "div", 22);
-            i0.ɵɵconditionalCreate(26, UserManagementComponent_Conditional_26_Template, 20, 8, "div", 23);
-            i0.ɵɵconditionalCreate(27, UserManagementComponent_Conditional_27_Template, 25, 6, "div", 24);
+            i0.ɵɵconditionalCreate(23, UserManagementComponent_Conditional_23_Template, 22, 1, "div", 19);
+            i0.ɵɵconditionalCreate(24, UserManagementComponent_Conditional_24_Template, 20, 8, "div", 20);
+            i0.ɵɵconditionalCreate(25, UserManagementComponent_Conditional_25_Template, 25, 6, "div", 21);
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("Count", ctx.filteredUsers.length)("Total", ctx.users.length);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("Value", ctx.filters$.value.search);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Active", ctx.filters$.value.status === "all");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("Active", ctx.filters$.value.status === "active");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Active", ctx.filters$.value.status === "inactive");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ActiveCount", ctx.popoverActiveFilterCount)("ShowClearAll", ctx.popoverActiveFilterCount > 0);
+            i0.ɵɵproperty("ActiveCount", ctx.TotalActiveFilterCount)("ShowClearAll", ctx.TotalActiveFilterCount > 0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Fields", ctx.filterFields)("Values", ctx.filterValues);
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("Loading", ctx.isLoading);
-            i0.ɵɵadvance(7);
-            i0.ɵɵconditional(ctx.hasSelection ? 19 : -1);
+            i0.ɵɵadvance(9);
+            i0.ɵɵconditional(ctx.hasSelection ? 17 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 21 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 22 : -1);
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 23 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 21 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("data", ctx.userDialogData)("visible", ctx.showUserDialog);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedUser ? 25 : -1);
+            i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedUser ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showBulkActionConfirm ? 26 : -1);
+            i0.ɵɵconditional(ctx.showBulkActionConfirm ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showBulkRoleAssign ? 27 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.MJButtonDirective, i3.MJPageHeaderInteriorComponent, i3.MJPageBodyInteriorComponent, i3.MJPageSearchComponent, i3.MJFilterPopoverComponent, i3.MJFilterPanelComponent, i3.MJFilterChipComponent, i3.MJRefreshButtonComponent, i3.MJStatBadgeComponent, i4.UserDialogComponent, i5.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem 2.5rem;\n  }\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons[_ngcontent-%COMP%] {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons[_ngcontent-%COMP%] {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    gap: 1rem;\n  }\n}\n\n\n\n.mj-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card[_ngcontent-%COMP%] {\n    padding: 1rem 1.25rem;\n  }\n}\n\n\n\n\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total[_ngcontent-%COMP%] {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 2rem;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n  }\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section[_ngcontent-%COMP%] {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row[_ngcontent-%COMP%] {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-icon[_ngcontent-%COMP%] {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within   .mj-search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n  }\n}\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n}\n\n\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-text[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n\n  .modal-body[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .modal-footer[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.filter-button[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n\n\n\n\n.filter-modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  margin: 0;\n}\n\n\n\n.filter-options-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%], \n.filter-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected[_ngcontent-%COMP%]   .filter-option-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n\n\n.text-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n\n\n\n\n.mj-search-input[_ngcontent-%COMP%]:focus-visible, \nbutton[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n.status-chips[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    display: grid;\n  }\n}\n\n\n\n@media (min-width: 768px) {\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n}\n\n\n\n.stat-icon-total[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.stat-icon-admin[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n\n\n\n\n.bulk-action-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-brand-accent-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  animation: slideDown 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .bulk-action-toolbar[_ngcontent-%COMP%] {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 1.5rem;\n  }\n}\n\n.bulk-selection-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.bulk-selection-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n}\n\n.bulk-action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 639px) {\n  .bulk-action-buttons[_ngcontent-%COMP%]   .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .bulk-action-buttons[_ngcontent-%COMP%]   .mj-btn-sm[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n    min-width: 36px;\n  }\n}\n\n\n\n\n\n.users-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  margin-bottom: 0.5rem;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.select-all-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  padding: 0.25rem 0.75rem;\n  border-radius: var(--mj-radius-full);\n}\n\n.user-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.user-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected[_ngcontent-%COMP%] {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected[_ngcontent-%COMP%]   .user-header[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n.user-card.selected[_ngcontent-%COMP%]:hover   .user-header[_ngcontent-%COMP%] {\n  background: rgba(0, 118, 182, 0.08);\n}\n\n.user-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.user-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .user-header[_ngcontent-%COMP%] {\n    padding: 0.875rem 1rem;\n    gap: 0.625rem;\n  }\n}\n\n.user-selection[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.checkbox[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.user-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-full);\n  background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-light) 100%);\n  color: var(--mj-brand-on-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n@media (max-width: 639px) {\n  .user-avatar[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 0.8125rem;\n  }\n\n  .user-details[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .user-name[_ngcontent-%COMP%] {\n    font-size: 0.9375rem;\n    font-weight: 600;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .user-email[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.user-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.user-name[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-email[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0.125rem 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 767px) {\n  .user-meta[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%], \n   .user-meta[_ngcontent-%COMP%]   .user-actions[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .user-meta[_ngcontent-%COMP%] {\n    gap: 0;\n  }\n}\n\n.desktop-only[_ngcontent-%COMP%] {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .desktop-only[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.25rem;\n  }\n}\n\n.user-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.user-card.expanded[_ngcontent-%COMP%]   .expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n\n\n.user-content[_ngcontent-%COMP%] {\n  padding: 1.25rem 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 1rem;\n  margin-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .mobile-actions-bar[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n  margin-left: 0.375rem;\n}\n\n\n\n.user-stats[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 0.875rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n\n\n.roles-section[_ngcontent-%COMP%] {\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.roles-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.role-item[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.role-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n}\n\n.no-roles[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n  min-height: 44px;\n}\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:active {\n  background: var(--mj-color-brand-400);\n  transform: scale(0.98);\n}\n\n\n\n\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n\n\n.checkbox[_ngcontent-%COMP%]:focus-visible, \n.user-header[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n  .bulk-action-toolbar[_ngcontent-%COMP%] {\n    padding: 1.25rem 2rem;\n  }\n\n  .mj-grid-4[_ngcontent-%COMP%] {\n    gap: 1.5rem;\n    padding: 0 2rem 1rem 2rem;\n  }\n\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n    padding: 0 0.75rem 0.5rem 0.75rem;\n  }\n\n  .mj-card[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n    gap: 0.75rem;\n  }\n\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 1.125rem;\n  }\n\n  .stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  .stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 0.6875rem;\n  }\n\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n  }\n\n  .list-header[_ngcontent-%COMP%] {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 2rem 1rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    font-size: 3rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-text[_ngcontent-%COMP%] {\n    font-size: 1.0625rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}"] });
+            i0.ɵɵconditional(ctx.showBulkRoleAssign ? 25 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.MJButtonDirective, i3.MJPageHeaderInteriorComponent, i3.MJPageBodyInteriorComponent, i3.MJPageSearchComponent, i3.MJFilterPopoverComponent, i3.MJFilterPanelComponent, i3.MJRefreshButtonComponent, i3.MJStatBadgeComponent, i4.UserDialogComponent, i5.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem 2.5rem;\n  }\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons[_ngcontent-%COMP%] {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons[_ngcontent-%COMP%] {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    gap: 1rem;\n  }\n}\n\n\n\n.mj-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card[_ngcontent-%COMP%] {\n    padding: 1rem 1.25rem;\n  }\n}\n\n\n\n\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total[_ngcontent-%COMP%] {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 2rem;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n  }\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section[_ngcontent-%COMP%] {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row[_ngcontent-%COMP%] {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search[_ngcontent-%COMP%] {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-icon[_ngcontent-%COMP%] {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%] {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%]   .mj-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within   .mj-search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n  }\n}\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n}\n\n\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-text[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n\n  .modal-body[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .modal-footer[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.filter-button[_ngcontent-%COMP%] {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n\n\n\n\n.filter-modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  margin: 0;\n}\n\n\n\n.filter-options-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%], \n.filter-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected[_ngcontent-%COMP%]   .filter-option-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n\n\n.text-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n\n\n\n\n.mj-search-input[_ngcontent-%COMP%]:focus-visible, \nbutton[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n.status-chips[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    display: grid;\n  }\n}\n\n\n\n@media (min-width: 768px) {\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n}\n\n\n\n.stat-icon-total[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.stat-icon-admin[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n\n\n\n\n.bulk-action-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-brand-accent-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  animation: slideDown 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .bulk-action-toolbar[_ngcontent-%COMP%] {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 1.5rem;\n  }\n}\n\n.bulk-selection-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.bulk-selection-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n}\n\n.bulk-action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 639px) {\n  .bulk-action-buttons[_ngcontent-%COMP%]   .btn-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .bulk-action-buttons[_ngcontent-%COMP%]   .mj-btn-sm[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n    min-width: 36px;\n  }\n}\n\n\n\n\n\n.users-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  margin-bottom: 0.5rem;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.select-all-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  padding: 0.25rem 0.75rem;\n  border-radius: var(--mj-radius-full);\n}\n\n.user-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.user-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected[_ngcontent-%COMP%] {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected[_ngcontent-%COMP%]   .user-header[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n.user-card.selected[_ngcontent-%COMP%]:hover   .user-header[_ngcontent-%COMP%] {\n  background: rgba(0, 118, 182, 0.08);\n}\n\n.user-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.user-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .user-header[_ngcontent-%COMP%] {\n    padding: 0.875rem 1rem;\n    gap: 0.625rem;\n  }\n}\n\n.user-selection[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.checkbox[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.user-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-full);\n  background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-light) 100%);\n  color: var(--mj-brand-on-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n@media (max-width: 639px) {\n  .user-avatar[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 0.8125rem;\n  }\n\n  .user-details[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .user-name[_ngcontent-%COMP%] {\n    font-size: 0.9375rem;\n    font-weight: 600;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .user-email[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.user-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.user-name[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-email[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0.125rem 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 767px) {\n  .user-meta[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%], \n   .user-meta[_ngcontent-%COMP%]   .user-actions[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .user-meta[_ngcontent-%COMP%] {\n    gap: 0;\n  }\n}\n\n.desktop-only[_ngcontent-%COMP%] {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .desktop-only[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.25rem;\n  }\n}\n\n.user-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.user-card.expanded[_ngcontent-%COMP%]   .expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n\n\n.user-content[_ngcontent-%COMP%] {\n  padding: 1.25rem 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 1rem;\n  margin-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .mobile-actions-bar[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n  margin-left: 0.375rem;\n}\n\n\n\n.user-stats[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 0.875rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.user-stats[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n\n\n.roles-section[_ngcontent-%COMP%] {\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.roles-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.role-item[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.role-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n}\n\n.no-roles[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n  min-height: 44px;\n}\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.error-container[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:active {\n  background: var(--mj-color-brand-400);\n  transform: scale(0.98);\n}\n\n\n\n\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n\n\n.checkbox[_ngcontent-%COMP%]:focus-visible, \n.user-header[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n  .bulk-action-toolbar[_ngcontent-%COMP%] {\n    padding: 1.25rem 2rem;\n  }\n\n  .mj-grid-4[_ngcontent-%COMP%] {\n    gap: 1.5rem;\n    padding: 0 2rem 1rem 2rem;\n  }\n\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 2rem;\n  }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n  .mj-grid-4[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n    padding: 0 0.75rem 0.5rem 0.75rem;\n  }\n\n  .mj-card[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n    gap: 0.75rem;\n  }\n\n  .stat-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 1.125rem;\n  }\n\n  .stat-content[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n  }\n\n  .stat-content[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 0.6875rem;\n  }\n\n  .scrollable-content[_ngcontent-%COMP%] {\n    padding: 0.75rem;\n  }\n\n  .list-header[_ngcontent-%COMP%] {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 2rem 1rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    font-size: 3rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-text[_ngcontent-%COMP%] {\n    font-size: 1.0625rem;\n  }\n\n  .empty-state[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}"] });
 };
 UserManagementComponent = __decorate([
     RegisterClass(BaseDashboard, 'UserManagement')
@@ -1229,7 +1235,7 @@ UserManagementComponent = __decorate([
 export { UserManagementComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserManagementComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-user-management', template: "<!--\n  Interior chrome \u2014 <mj-page-header-interior> is the body-level sibling of\n  <mj-page-header>. Same slot conventions ([toolbar] / [meta] / [actions]);\n  different visual shape (single-row card). See Section 10 of\n  explorer-chrome-conventions.\n-->\n<mj-page-header-interior\n  AriaLabel=\"Filter users\"\n  Title=\"Users\"\n  Subtitle=\"Manage user accounts, roles, and access\">\n  <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72 \u2014\n       tells the user how the search/filter is narrowing the data, signal at\n       any scale. Partition badges (active/inactive/owners) stay dropped \u2014\n       they 1:1 mirror the filter chips in [toolbar] below. -->\n  <div meta>\n    <mj-stat-badge\n      [Count]=\"filteredUsers.length\"\n      [Total]=\"users.length\"\n      Label=\"users\">\n    </mj-stat-badge>\n  </div>\n  <div toolbar>\n    <mj-page-search\n      Placeholder=\"Search users by name or email...\"\n      [Value]=\"filters$.value.search\"\n      (ValueChange)=\"updateFilter({ search: $event })\">\n    </mj-page-search>\n    <div class=\"status-chips\" role=\"group\" aria-label=\"Filter by status\">\n      <mj-filter-chip\n        Label=\"All\"\n        [Active]=\"filters$.value.status === 'all'\"\n        (Clicked)=\"onStatusFilterChange('all')\">\n      </mj-filter-chip>\n      <mj-filter-chip\n        Label=\"Active\"\n        [Active]=\"filters$.value.status === 'active'\"\n        (Clicked)=\"onStatusFilterChange('active')\">\n      </mj-filter-chip>\n      <mj-filter-chip\n        Label=\"Inactive\"\n        [Active]=\"filters$.value.status === 'inactive'\"\n        (Clicked)=\"onStatusFilterChange('inactive')\">\n      </mj-filter-chip>\n    </div>\n  </div>\n  <div actions>\n    <mj-filter-popover\n      [ActiveCount]=\"popoverActiveFilterCount\"\n      [ShowClearAll]=\"popoverActiveFilterCount > 0\"\n      (ClearAllRequested)=\"onFilterPanelChange({ role: '' })\">\n      <mj-filter-panel\n        [Fields]=\"filterFields\"\n        [Values]=\"filterValues\"\n        (ValuesChange)=\"onFilterPanelChange($event)\"\n        (Reset)=\"onFilterPanelChange({ role: '' })\">\n      </mj-filter-panel>\n    </mj-filter-popover>\n    <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refreshData()\"></mj-refresh-button>\n    <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"exportUsers()\" aria-label=\"Export users to file\">\n      <i class=\"fa-solid fa-download\"></i> Export\n    </button>\n    <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewUser()\" aria-label=\"Add new user\">\n      <i class=\"fa-solid fa-plus\"></i> Add User\n    </button>\n  </div>\n</mj-page-header-interior>\n\n  <!-- Bulk Action Toolbar \u2014 contextual band shown above the list when users are selected. -->\n  @if (hasSelection) {\n    <div class=\"bulk-action-toolbar\" role=\"toolbar\" aria-label=\"Bulk actions\">\n      <div class=\"bulk-selection-info\">\n        <i class=\"fa-solid fa-check-square\" aria-hidden=\"true\"></i>\n        <span>{{ selectedCount }} user{{ selectedCount > 1 ? 's' : '' }} selected</span>\n        <button mjButton variant=\"flat\" size=\"sm\" (click)=\"clearSelection()\" aria-label=\"Clear selection\">\n          <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          Clear\n        </button>\n      </div>\n      <div class=\"bulk-action-buttons\">\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"confirmBulkAction('enable')\" aria-label=\"Enable selected users\">\n          <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Enable</span>\n        </button>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"confirmBulkAction('disable')\" aria-label=\"Disable selected users\">\n          <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Disable</span>\n        </button>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"openBulkRoleAssign()\" aria-label=\"Assign role to selected users\">\n          <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Assign Role</span>\n        </button>\n        <button mjButton variant=\"danger\" size=\"sm\" (click)=\"confirmBulkAction('delete')\" aria-label=\"Delete selected users\">\n          <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Delete</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Scrollable Content Section \u2014 owned by <mj-page-body-interior>. -->\n  <mj-page-body-interior>\n    <!-- Loading State -->\n    @if (isLoading) {\n      <div class=\"loading-container\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n        <mj-loading text=\"Loading users...\" size=\"medium\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error && !isLoading) {\n      <div class=\"error-container\" role=\"alert\" aria-live=\"assertive\">\n        <div class=\"error-content\">\n          <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n          <p class=\"error-message\">{{ error }}</p>\n          <button class=\"retry-button\" (click)=\"loadInitialData()\" aria-label=\"Retry loading users\">\n            <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n            Try Again\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Users List -->\n    @if (!isLoading && !error) {\n      <div class=\"users-list\" role=\"list\" aria-label=\"Users list\">\n          <!-- List Header with Select All -->\n          <div class=\"list-header\">\n            <label class=\"select-all-label\">\n              <input\n                type=\"checkbox\"\n                class=\"checkbox\"\n                [checked]=\"isAllSelected\"\n                [indeterminate]=\"isIndeterminate\"\n                (change)=\"toggleSelectAll()\"\n                aria-label=\"Select all users\"\n              />\n              <span class=\"select-all-text\">Select All ({{ filteredUsers.length }})</span>\n            </label>\n            @if (hasSelection) {\n              <span class=\"selection-count\">{{ selectedCount }} selected</span>\n            }\n          </div>\n\n          @for (user of filteredUsers; track user.ID) {\n            <div\n              class=\"user-card\"\n              [class.expanded]=\"isUserExpanded(user.ID)\"\n              [class.selected]=\"isUserSelected(user.ID)\"\n              role=\"listitem\"\n            >\n              <!-- User Card Header - Always Visible -->\n              <div\n                class=\"user-header\"\n                (click)=\"toggleUserExpansion(user.ID)\"\n                role=\"button\"\n                [attr.aria-expanded]=\"isUserExpanded(user.ID)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"toggleUserExpansion(user.ID)\"\n              >\n                <!-- Selection Checkbox -->\n                <div class=\"user-selection\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"checkbox\"\n                    [checked]=\"isUserSelected(user.ID)\"\n                    (change)=\"toggleUserSelection(user.ID, $event)\"\n                    [attr.aria-label]=\"'Select ' + user.Name\"\n                  />\n                </div>\n\n                <!-- User Info -->\n                <div class=\"user-info\">\n                  <div class=\"user-avatar\" aria-hidden=\"true\">\n                    {{ getUserInitials(user) }}\n                  </div>\n                  <div class=\"user-details\">\n                    <h3 class=\"user-name\">{{ user.Name }}</h3>\n                    <p class=\"user-email\">{{ user.Email }}</p>\n                  </div>\n                </div>\n\n                <!-- User Meta -->\n                <div class=\"user-meta\">\n                  <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                    <i [class]=\"'fa-solid ' + getStatusIcon(user)\" aria-hidden=\"true\"></i>\n                    {{ user.IsActive ? 'Active' : 'Inactive' }}\n                  </span>\n                  <div class=\"user-actions desktop-only\" (click)=\"$event.stopPropagation()\">\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"editUser(user)\"\n                      [attr.aria-label]=\"'Edit ' + user.Name\"\n                      title=\"Edit\"\n                    >\n                      <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"toggleUserStatus(user)\"\n                      [attr.aria-label]=\"(user.IsActive ? 'Deactivate ' : 'Activate ') + user.Name\"\n                      [title]=\"user.IsActive ? 'Deactivate' : 'Activate'\"\n                    >\n                      <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      mjButton variant=\"danger\" size=\"sm\"\n                      (click)=\"confirmDeleteUser(user)\"\n                      [attr.aria-label]=\"'Delete ' + user.Name\"\n                      title=\"Delete\"\n                    >\n                      <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                  <button class=\"expand-btn\" aria-label=\"Toggle user details\">\n                    <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n\n              <!-- User Card Content - Expanded -->\n              @if (isUserExpanded(user.ID)) {\n                <div class=\"user-content\">\n                  <!-- Mobile Actions Bar -->\n                  <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                      <i [class]=\"'fa-solid ' + getStatusIcon(user)\" aria-hidden=\"true\"></i>\n                      {{ user.IsActive ? 'Active' : 'Inactive' }}\n                    </span>\n                    <div class=\"mobile-action-buttons\">\n                      <button\n                        mjButton variant=\"flat\" size=\"sm\"\n                        (click)=\"editUser(user)\"\n                        [attr.aria-label]=\"'Edit ' + user.Name\"\n                      >\n                        <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Edit</span>\n                      </button>\n                      <button\n                        mjButton variant=\"flat\" size=\"sm\"\n                        (click)=\"toggleUserStatus(user)\"\n                        [attr.aria-label]=\"(user.IsActive ? 'Deactivate ' : 'Activate ') + user.Name\"\n                      >\n                        <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">{{ user.IsActive ? 'Disable' : 'Enable' }}</span>\n                      </button>\n                      <button\n                        mjButton variant=\"danger\" size=\"sm\"\n                        (click)=\"confirmDeleteUser(user)\"\n                        [attr.aria-label]=\"'Delete ' + user.Name\"\n                      >\n                        <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Delete</span>\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- User Stats -->\n                  <div class=\"user-stats\">\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Type:</span>\n                      <span class=\"stat-value\">\n                        <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\" aria-hidden=\"true\"></i>\n                        {{ user.Type }}\n                      </span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-id-card\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Full Name:</span>\n                      <span class=\"stat-value\">{{ user.FirstName }} {{ user.LastName }}</span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-calendar\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Created:</span>\n                      <span class=\"stat-value\">{{ user.__mj_CreatedAt | date:'short' }}</span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Updated:</span>\n                      <span class=\"stat-value\">{{ user.__mj_UpdatedAt | date:'short' }}</span>\n                    </div>\n                  </div>\n\n                  <!-- User Roles Section -->\n                  <div class=\"roles-section\">\n                    <h4 class=\"section-title\">\n                      <i class=\"fa-solid fa-user-shield\" aria-hidden=\"true\"></i>\n                      Assigned Roles\n                    </h4>\n                    @if (getUserRoles(user.ID).length > 0) {\n                      <div class=\"roles-grid\">\n                        @for (role of getUserRoles(user.ID); track role.ID) {\n                          <div class=\"role-item\">\n                            <i class=\"fa-solid fa-shield\" aria-hidden=\"true\"></i>\n                            {{ role.Name }}\n                          </div>\n                        }\n                      </div>\n                    } @else {\n                      <p class=\"no-roles\">No roles assigned to this user</p>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\" role=\"status\">\n              <i class=\"fa-solid fa-users-slash empty-icon\" aria-hidden=\"true\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n    }\n  </mj-page-body-interior>\n\n  <!-- User Create/Edit Dialog -->\n  <mj-user-dialog\n    [data]=\"userDialogData\"\n    [visible]=\"showUserDialog\"\n    (result)=\"onUserDialogResult($event)\">\n  </mj-user-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedUser) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"showDeleteConfirm = false\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n      aria-describedby=\"delete-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"delete-dialog-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n            Confirm Delete\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"showDeleteConfirm = false\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"delete-dialog-desc\">\n          <p>Are you sure you want to delete user <strong>{{ selectedUser.Name }}</strong>?</p>\n          <p class=\"text-muted\">This action cannot be undone.</p>\n        </div>\n        <div class=\"modal-footer\">\n          <button mjButton variant=\"danger\" (click)=\"deleteUser()\">\n            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n            Delete User\n          </button>\n          <button mjButton (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Bulk Action Confirmation Dialog -->\n  @if (showBulkActionConfirm) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"cancelBulkAction()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"bulk-action-dialog-title\"\n      aria-describedby=\"bulk-action-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"bulk-action-dialog-title\">\n            @if (bulkActionType === 'delete') {\n              <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n            } @else if (bulkActionType === 'enable') {\n              <i class=\"fa-solid fa-toggle-on text-success\" aria-hidden=\"true\"></i>\n            } @else {\n              <i class=\"fa-solid fa-toggle-off text-warning\" aria-hidden=\"true\"></i>\n            }\n            {{ getBulkActionTitle() }}\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"cancelBulkAction()\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"bulk-action-dialog-desc\">\n          <p>{{ getBulkActionMessage() }}</p>\n          @if (bulkActionType === 'delete') {\n            <p class=\"text-muted\">This action cannot be undone.</p>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button mjButton\n            [variant]=\"bulkActionType === 'delete' ? 'danger' : 'primary'\"\n            (click)=\"executeBulkAction()\"\n            [disabled]=\"isLoading\"\n          >\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Processing...\n            } @else {\n              @if (bulkActionType === 'delete') {\n                <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n              } @else if (bulkActionType === 'enable') {\n                <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n              } @else {\n                <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n              }\n              {{ getBulkActionButtonText() }}\n            }\n          </button>\n          <button mjButton (click)=\"cancelBulkAction()\" [disabled]=\"isLoading\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Bulk Role Assignment Dialog -->\n  @if (showBulkRoleAssign) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"cancelBulkRoleAssign()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"bulk-role-dialog-title\"\n      aria-describedby=\"bulk-role-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"bulk-role-dialog-title\">\n            <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n            Assign Role to {{ selectedCount }} User{{ selectedCount > 1 ? 's' : '' }}\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"cancelBulkRoleAssign()\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"bulk-role-dialog-desc\">\n          <p>Select a role to assign to the selected users:</p>\n          <div class=\"form-field\">\n            <label class=\"field-label\" for=\"bulk-role-select\">Role</label>\n            <select\n              id=\"bulk-role-select\"\n              class=\"field-select\"\n              [(ngModel)]=\"bulkRoleId\"\n              aria-label=\"Select role to assign\"\n            >\n              <option value=\"\">Select a role...</option>\n              @for (role of roles; track role.ID) {\n                <option [value]=\"role.ID\">{{ role.Name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button\n            mjButton variant=\"primary\"\n            (click)=\"executeBulkRoleAssign()\"\n            [disabled]=\"!bulkRoleId || isLoading\"\n          >\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Assigning...\n            } @else {\n              <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n              Assign Role\n            }\n          </button>\n          <button mjButton (click)=\"cancelBulkRoleAssign()\" [disabled]=\"isLoading\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* =============================================================================\n   Shared Admin Patterns - MJ Design System\n   Common styles shared across all admin settings components.\n   Component-specific CSS files override these values where needed.\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Host & Container\n   ----------------------------------------------------------------------------- */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n   Scrollable Content\n   ----------------------------------------------------------------------------- */\n.scrollable-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content {\n    padding: 2rem 2.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Action Buttons (In Sticky Header)\n   ----------------------------------------------------------------------------- */\n.action-buttons {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Statistics Cards Grid - Static Display (Non-interactive)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1rem;\n  }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1rem 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Containers\n   ----------------------------------------------------------------------------- */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Content Typography\n   ----------------------------------------------------------------------------- */\n.stat-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content .stat-value {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-value {\n    font-size: 2rem;\n  }\n}\n\n.stat-content .stat-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-label {\n    font-size: 0.8125rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Filters Section\n   ----------------------------------------------------------------------------- */\n.filters-section {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Search Input\n   ----------------------------------------------------------------------------- */\n.mj-search {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search .mj-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-icon {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search .mj-search-input {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search .mj-search-input {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search .mj-search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Expand Button\n   ----------------------------------------------------------------------------- */\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Status Badge\n   ----------------------------------------------------------------------------- */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n  font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile Actions Bar\n   ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n  display: none;\n}\n\n.mobile-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Empty State\n   ----------------------------------------------------------------------------- */\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Loading State\n   ----------------------------------------------------------------------------- */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State\n   ----------------------------------------------------------------------------- */\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container .error-icon {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header {\n    padding: 1rem;\n  }\n\n  .modal-header .modal-title {\n    font-size: 1.125rem;\n  }\n\n  .modal-body {\n    padding: 1rem;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n/* The legacy \"MJ Button System\" rule block (.mj-btn / .mj-btn-primary /\n   .mj-btn-secondary / .mj-btn-ghost / .mj-btn-danger / .mj-btn-sm /\n   .mj-btn-icon-only / .mj-btn-icon-mobile) was removed 2026-05-19. These\n   rules pre-dated the mjButton directive standardization (the directive\n   uses BEM modifiers like .mj-btn--primary, single-dash names like\n   .mj-btn-primary don't match it anyway). The base .mj-btn rule WAS active\n   though \u2014 its component-scoped specificity outranked button.scss's global\n   directive styles, so admin sub-page buttons rendered pill-shaped + 44px\n   regardless of the variant/size requested via mjButton inputs. Removing the\n   rule lets every sub-page fall back to the directive's intended look. */\n\n/* -----------------------------------------------------------------------------\n   Filter Button (Mobile Only)\n   ----------------------------------------------------------------------------- */\n.filter-button {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile Bottom Sheet)\n   ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n  flex: 1;\n  margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--mj-status-error);\n}\n\n.text-warning {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success {\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Animations\n   ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Focus Indicators\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Reduced Motion\n   ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n", "/* =============================================================================\n   User Management Component - Component-Specific Styles\n   Shared patterns are in ../shared/styles/_admin-patterns.css\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Status chip group inside <mj-page-header-interior>'s [toolbar] slot. Sits\n   alongside the search input. Tight spacing distinguishes the chips visually\n   from the [actions] cluster on the right.\n   ----------------------------------------------------------------------------- */\n.status-chips {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n/* No bespoke .mj-btn rules here. Buttons inherit the mjButton directive's\n   global styles from button.scss \u2014 see \"Button Styling\" in packages/Angular/CLAUDE.md. */\n\n/* :host already provides flex column / 100% height / overflow hidden via\n   _admin-patterns.css. No bespoke container wrapper here \u2014 see Section 10 of\n   explorer-chrome-conventions for the standardized sub-page layout contract. */\n\n/* -----------------------------------------------------------------------------\n   Stats Grid Override - Hidden until 768px (unlike other admin components)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    display: grid;\n  }\n}\n\n/* Stat Icon Override - Stays 48px at 768px (others go to 52px) */\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n}\n\n/* Stat Icon Override - color-mix background instead of accent-300 */\n.stat-icon-total {\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.stat-icon-admin {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n/* -----------------------------------------------------------------------------\n   Bulk Action Toolbar (Unique to user-management)\n   ----------------------------------------------------------------------------- */\n.bulk-action-toolbar {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-brand-accent-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  animation: slideDown 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .bulk-action-toolbar {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 1.5rem;\n  }\n}\n\n.bulk-selection-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.bulk-selection-info i {\n  font-size: 1.25rem;\n}\n\n.bulk-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 639px) {\n  .bulk-action-buttons .btn-text {\n    display: none;\n  }\n\n  .bulk-action-buttons .mj-btn-sm {\n    padding: 0.5rem;\n    min-width: 36px;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   User Card - Interactive\n   ----------------------------------------------------------------------------- */\n.users-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.list-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  margin-bottom: 0.5rem;\n}\n\n.select-all-label {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.select-all-text {\n  font-weight: 500;\n}\n\n.selection-count {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  padding: 0.25rem 0.75rem;\n  border-radius: var(--mj-radius-full);\n}\n\n.user-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.user-card:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.expanded {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected .user-header {\n  background: transparent;\n}\n\n.user-card.selected:hover .user-header {\n  background: rgba(0, 118, 182, 0.08);\n}\n\n.user-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.user-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .user-header {\n    padding: 0.875rem 1rem;\n    gap: 0.625rem;\n  }\n}\n\n.user-selection {\n  flex-shrink: 0;\n}\n\n.checkbox {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.user-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.user-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-full);\n  background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-light) 100%);\n  color: var(--mj-brand-on-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n@media (max-width: 639px) {\n  .user-avatar {\n    width: 40px;\n    height: 40px;\n    font-size: 0.8125rem;\n  }\n\n  .user-details {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .user-name {\n    font-size: 0.9375rem;\n    font-weight: 600;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .user-email {\n    font-size: 0.8125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.user-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.user-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-email {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0.125rem 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 767px) {\n  .user-meta .status-badge,\n  .user-meta .user-actions {\n    display: none !important;\n  }\n\n  .user-meta {\n    gap: 0;\n  }\n}\n\n.desktop-only {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .desktop-only {\n    display: flex;\n    gap: 0.25rem;\n  }\n}\n\n.user-actions {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.user-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n/* User Card Content - Expanded */\n.user-content {\n  padding: 1.25rem 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* Mobile Actions Bar - visible on mobile */\n.mobile-actions-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 1rem;\n  margin-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .mobile-actions-bar {\n    display: none;\n  }\n}\n\n.mobile-action-buttons .btn-label {\n  margin-left: 0.375rem;\n}\n\n/* User Stats in Expanded Content */\n.user-stats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1rem;\n}\n\n.user-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.user-stats .stat-item i {\n  color: var(--mj-brand-primary);\n  font-size: 0.875rem;\n}\n\n.user-stats .stat-label {\n  color: var(--mj-text-secondary);\n}\n\n.user-stats .stat-value {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.user-stats .stat-value i {\n  font-size: 0.75rem;\n}\n\n/* Roles Section */\n.roles-section {\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.roles-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.role-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.role-item i {\n  font-size: 0.625rem;\n}\n\n.no-roles {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State Override - includes retry button\n   ----------------------------------------------------------------------------- */\n.error-container .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n  min-height: 44px;\n}\n\n.error-container .retry-button:hover {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.error-container .retry-button:active {\n  background: var(--mj-color-brand-400);\n  transform: scale(0.98);\n}\n\n/* -----------------------------------------------------------------------------\n   Form Field in Modal\n   ----------------------------------------------------------------------------- */\n.form-field {\n  margin-bottom: 1rem;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}\n\n.form-field .field-select {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.form-field .field-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n/* Accessibility override for user-specific elements */\n.checkbox:focus-visible,\n.user-header:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Large Desktop (1440px+)\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .bulk-action-toolbar {\n    padding: 1.25rem 2rem;\n  }\n\n  .mj-grid-4 {\n    gap: 1.5rem;\n    padding: 0 2rem 1rem 2rem;\n  }\n\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile (< 640px) - Compact adjustments\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n    padding: 0 0.75rem 0.5rem 0.75rem;\n  }\n\n  .mj-card {\n    padding: 0.75rem;\n    gap: 0.75rem;\n  }\n\n  .stat-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 1.125rem;\n  }\n\n  .stat-content .stat-value {\n    font-size: 1.5rem;\n  }\n\n  .stat-content .stat-label {\n    font-size: 0.6875rem;\n  }\n\n  .scrollable-content {\n    padding: 0.75rem;\n  }\n\n  .list-header {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .empty-state {\n    padding: 2rem 1rem;\n  }\n\n  .empty-state .empty-icon {\n    font-size: 3rem;\n  }\n\n  .empty-state .empty-text {\n    font-size: 1.0625rem;\n  }\n\n  .empty-state .empty-subtext {\n    font-size: 0.875rem;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-user-management', template: "<!--\n  Interior chrome \u2014 <mj-page-header-interior> is the body-level sibling of\n  <mj-page-header>. Same slot conventions ([toolbar] / [meta] / [actions]);\n  different visual shape (single-row card). See Section 10 of\n  explorer-chrome-conventions.\n-->\n<mj-page-header-interior\n  AriaLabel=\"Filter users\"\n  Title=\"Users\"\n  Subtitle=\"Manage user accounts, roles, and access\">\n  <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72 \u2014\n       tells the user how the search/filter is narrowing the data, signal at\n       any scale. Partition badges (active/inactive/owners) stay dropped \u2014\n       they 1:1 mirror the filter chips in [toolbar] below. -->\n  <div meta>\n    <mj-stat-badge\n      [Count]=\"filteredUsers.length\"\n      [Total]=\"users.length\"\n      Label=\"users\">\n    </mj-stat-badge>\n  </div>\n  <div toolbar>\n    <!-- Concise-chrome control bar: search \u00B7 Filter. Status + Role live behind\n         the one Filter button; applied filters show as removable chips below\n         the card. On mobile the popover docks as a bottom sheet. -->\n    <mj-page-search\n      Placeholder=\"Search users by name or email...\"\n      [Value]=\"filters$.value.search\"\n      (ValueChange)=\"updateFilter({ search: $event })\">\n    </mj-page-search>\n    <mj-filter-popover\n      Label=\"Filters\"\n      Icon=\"fa-solid fa-filter\"\n      [ActiveCount]=\"TotalActiveFilterCount\"\n      [ShowClearAll]=\"TotalActiveFilterCount > 0\"\n      (ClearAllRequested)=\"clearAllAppliedFilters()\">\n      <mj-filter-panel\n        [Fields]=\"filterFields\"\n        [Values]=\"filterValues\"\n        (ValuesChange)=\"onFilterPanelChange($event)\"\n        (Reset)=\"clearAllAppliedFilters()\">\n      </mj-filter-panel>\n    </mj-filter-popover>\n  </div>\n  <div actions>\n    <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refreshData()\"></mj-refresh-button>\n    <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"exportUsers()\" aria-label=\"Export users to file\">\n      <i class=\"fa-solid fa-download\"></i> <span class=\"mj-action-label\">Export</span>\n    </button>\n    <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewUser()\" aria-label=\"Add new user\">\n      <i class=\"fa-solid fa-plus\"></i> <span class=\"mj-action-label\">Add User</span>\n    </button>\n  </div>\n</mj-page-header-interior>\n\n  <!-- Bulk Action Toolbar \u2014 contextual band shown above the list when users are selected. -->\n  @if (hasSelection) {\n    <div class=\"bulk-action-toolbar\" role=\"toolbar\" aria-label=\"Bulk actions\">\n      <div class=\"bulk-selection-info\">\n        <i class=\"fa-solid fa-check-square\" aria-hidden=\"true\"></i>\n        <span>{{ selectedCount }} user{{ selectedCount > 1 ? 's' : '' }} selected</span>\n        <button mjButton variant=\"flat\" size=\"sm\" (click)=\"clearSelection()\" aria-label=\"Clear selection\">\n          <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          Clear\n        </button>\n      </div>\n      <div class=\"bulk-action-buttons\">\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"confirmBulkAction('enable')\" aria-label=\"Enable selected users\">\n          <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Enable</span>\n        </button>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"confirmBulkAction('disable')\" aria-label=\"Disable selected users\">\n          <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Disable</span>\n        </button>\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"openBulkRoleAssign()\" aria-label=\"Assign role to selected users\">\n          <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Assign Role</span>\n        </button>\n        <button mjButton variant=\"danger\" size=\"sm\" (click)=\"confirmBulkAction('delete')\" aria-label=\"Delete selected users\">\n          <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n          <span class=\"btn-text\">Delete</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Scrollable Content Section \u2014 owned by <mj-page-body-interior>. -->\n  <mj-page-body-interior>\n    <!-- Loading State -->\n    @if (isLoading) {\n      <div class=\"loading-container\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n        <mj-loading text=\"Loading users...\" size=\"medium\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error && !isLoading) {\n      <div class=\"error-container\" role=\"alert\" aria-live=\"assertive\">\n        <div class=\"error-content\">\n          <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n          <p class=\"error-message\">{{ error }}</p>\n          <button class=\"retry-button\" (click)=\"loadInitialData()\" aria-label=\"Retry loading users\">\n            <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n            Try Again\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Users List -->\n    @if (!isLoading && !error) {\n      <div class=\"users-list\" role=\"list\" aria-label=\"Users list\">\n          <!-- List Header with Select All -->\n          <div class=\"list-header\">\n            <label class=\"select-all-label\">\n              <input\n                type=\"checkbox\"\n                class=\"checkbox\"\n                [checked]=\"isAllSelected\"\n                [indeterminate]=\"isIndeterminate\"\n                (change)=\"toggleSelectAll()\"\n                aria-label=\"Select all users\"\n              />\n              <span class=\"select-all-text\">Select All ({{ filteredUsers.length }})</span>\n            </label>\n            @if (hasSelection) {\n              <span class=\"selection-count\">{{ selectedCount }} selected</span>\n            }\n          </div>\n\n          @for (user of filteredUsers; track user.ID) {\n            <div\n              class=\"user-card\"\n              [class.expanded]=\"isUserExpanded(user.ID)\"\n              [class.selected]=\"isUserSelected(user.ID)\"\n              role=\"listitem\"\n            >\n              <!-- User Card Header - Always Visible -->\n              <div\n                class=\"user-header\"\n                (click)=\"toggleUserExpansion(user.ID)\"\n                role=\"button\"\n                [attr.aria-expanded]=\"isUserExpanded(user.ID)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"toggleUserExpansion(user.ID)\"\n              >\n                <!-- Selection Checkbox -->\n                <div class=\"user-selection\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"checkbox\"\n                    [checked]=\"isUserSelected(user.ID)\"\n                    (change)=\"toggleUserSelection(user.ID, $event)\"\n                    [attr.aria-label]=\"'Select ' + user.Name\"\n                  />\n                </div>\n\n                <!-- User Info -->\n                <div class=\"user-info\">\n                  <div class=\"user-avatar\" aria-hidden=\"true\">\n                    {{ getUserInitials(user) }}\n                  </div>\n                  <div class=\"user-details\">\n                    <h3 class=\"user-name\">{{ user.Name }}</h3>\n                    <p class=\"user-email\">{{ user.Email }}</p>\n                  </div>\n                </div>\n\n                <!-- User Meta -->\n                <div class=\"user-meta\">\n                  <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                    <i [class]=\"'fa-solid ' + getStatusIcon(user)\" aria-hidden=\"true\"></i>\n                    {{ user.IsActive ? 'Active' : 'Inactive' }}\n                  </span>\n                  <div class=\"user-actions desktop-only\" (click)=\"$event.stopPropagation()\">\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"editUser(user)\"\n                      [attr.aria-label]=\"'Edit ' + user.Name\"\n                      title=\"Edit\"\n                    >\n                      <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"toggleUserStatus(user)\"\n                      [attr.aria-label]=\"(user.IsActive ? 'Deactivate ' : 'Activate ') + user.Name\"\n                      [title]=\"user.IsActive ? 'Deactivate' : 'Activate'\"\n                    >\n                      <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      mjButton variant=\"danger\" size=\"sm\"\n                      (click)=\"confirmDeleteUser(user)\"\n                      [attr.aria-label]=\"'Delete ' + user.Name\"\n                      title=\"Delete\"\n                    >\n                      <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                  <button class=\"expand-btn\" aria-label=\"Toggle user details\">\n                    <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n\n              <!-- User Card Content - Expanded -->\n              @if (isUserExpanded(user.ID)) {\n                <div class=\"user-content\">\n                  <!-- Mobile Actions Bar -->\n                  <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                      <i [class]=\"'fa-solid ' + getStatusIcon(user)\" aria-hidden=\"true\"></i>\n                      {{ user.IsActive ? 'Active' : 'Inactive' }}\n                    </span>\n                    <div class=\"mobile-action-buttons\">\n                      <button\n                        mjButton variant=\"flat\" size=\"sm\"\n                        (click)=\"editUser(user)\"\n                        [attr.aria-label]=\"'Edit ' + user.Name\"\n                      >\n                        <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Edit</span>\n                      </button>\n                      <button\n                        mjButton variant=\"flat\" size=\"sm\"\n                        (click)=\"toggleUserStatus(user)\"\n                        [attr.aria-label]=\"(user.IsActive ? 'Deactivate ' : 'Activate ') + user.Name\"\n                      >\n                        <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">{{ user.IsActive ? 'Disable' : 'Enable' }}</span>\n                      </button>\n                      <button\n                        mjButton variant=\"danger\" size=\"sm\"\n                        (click)=\"confirmDeleteUser(user)\"\n                        [attr.aria-label]=\"'Delete ' + user.Name\"\n                      >\n                        <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Delete</span>\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- User Stats -->\n                  <div class=\"user-stats\">\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Type:</span>\n                      <span class=\"stat-value\">\n                        <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\" aria-hidden=\"true\"></i>\n                        {{ user.Type }}\n                      </span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-id-card\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Full Name:</span>\n                      <span class=\"stat-value\">{{ user.FirstName }} {{ user.LastName }}</span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-calendar\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Created:</span>\n                      <span class=\"stat-value\">{{ user.__mj_CreatedAt | date:'short' }}</span>\n                    </div>\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Updated:</span>\n                      <span class=\"stat-value\">{{ user.__mj_UpdatedAt | date:'short' }}</span>\n                    </div>\n                  </div>\n\n                  <!-- User Roles Section -->\n                  <div class=\"roles-section\">\n                    <h4 class=\"section-title\">\n                      <i class=\"fa-solid fa-user-shield\" aria-hidden=\"true\"></i>\n                      Assigned Roles\n                    </h4>\n                    @if (getUserRoles(user.ID).length > 0) {\n                      <div class=\"roles-grid\">\n                        @for (role of getUserRoles(user.ID); track role.ID) {\n                          <div class=\"role-item\">\n                            <i class=\"fa-solid fa-shield\" aria-hidden=\"true\"></i>\n                            {{ role.Name }}\n                          </div>\n                        }\n                      </div>\n                    } @else {\n                      <p class=\"no-roles\">No roles assigned to this user</p>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\" role=\"status\">\n              <i class=\"fa-solid fa-users-slash empty-icon\" aria-hidden=\"true\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n    }\n  </mj-page-body-interior>\n\n  <!-- User Create/Edit Dialog -->\n  <mj-user-dialog\n    [data]=\"userDialogData\"\n    [visible]=\"showUserDialog\"\n    (result)=\"onUserDialogResult($event)\">\n  </mj-user-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedUser) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"showDeleteConfirm = false\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n      aria-describedby=\"delete-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"delete-dialog-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n            Confirm Delete\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"showDeleteConfirm = false\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"delete-dialog-desc\">\n          <p>Are you sure you want to delete user <strong>{{ selectedUser.Name }}</strong>?</p>\n          <p class=\"text-muted\">This action cannot be undone.</p>\n        </div>\n        <div class=\"modal-footer\">\n          <button mjButton variant=\"danger\" (click)=\"deleteUser()\">\n            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n            Delete User\n          </button>\n          <button mjButton (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Bulk Action Confirmation Dialog -->\n  @if (showBulkActionConfirm) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"cancelBulkAction()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"bulk-action-dialog-title\"\n      aria-describedby=\"bulk-action-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"bulk-action-dialog-title\">\n            @if (bulkActionType === 'delete') {\n              <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n            } @else if (bulkActionType === 'enable') {\n              <i class=\"fa-solid fa-toggle-on text-success\" aria-hidden=\"true\"></i>\n            } @else {\n              <i class=\"fa-solid fa-toggle-off text-warning\" aria-hidden=\"true\"></i>\n            }\n            {{ getBulkActionTitle() }}\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"cancelBulkAction()\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"bulk-action-dialog-desc\">\n          <p>{{ getBulkActionMessage() }}</p>\n          @if (bulkActionType === 'delete') {\n            <p class=\"text-muted\">This action cannot be undone.</p>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button mjButton\n            [variant]=\"bulkActionType === 'delete' ? 'danger' : 'primary'\"\n            (click)=\"executeBulkAction()\"\n            [disabled]=\"isLoading\"\n          >\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Processing...\n            } @else {\n              @if (bulkActionType === 'delete') {\n                <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n              } @else if (bulkActionType === 'enable') {\n                <i class=\"fa-solid fa-toggle-on\" aria-hidden=\"true\"></i>\n              } @else {\n                <i class=\"fa-solid fa-toggle-off\" aria-hidden=\"true\"></i>\n              }\n              {{ getBulkActionButtonText() }}\n            }\n          </button>\n          <button mjButton (click)=\"cancelBulkAction()\" [disabled]=\"isLoading\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Bulk Role Assignment Dialog -->\n  @if (showBulkRoleAssign) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"cancelBulkRoleAssign()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"bulk-role-dialog-title\"\n      aria-describedby=\"bulk-role-dialog-desc\"\n    >\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"bulk-role-dialog-title\">\n            <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n            Assign Role to {{ selectedCount }} User{{ selectedCount > 1 ? 's' : '' }}\n          </h3>\n          <button\n            class=\"modal-close\"\n            (click)=\"cancelBulkRoleAssign()\"\n            aria-label=\"Close dialog\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\" id=\"bulk-role-dialog-desc\">\n          <p>Select a role to assign to the selected users:</p>\n          <div class=\"form-field\">\n            <label class=\"field-label\" for=\"bulk-role-select\">Role</label>\n            <select\n              id=\"bulk-role-select\"\n              class=\"field-select\"\n              [(ngModel)]=\"bulkRoleId\"\n              aria-label=\"Select role to assign\"\n            >\n              <option value=\"\">Select a role...</option>\n              @for (role of roles; track role.ID) {\n                <option [value]=\"role.ID\">{{ role.Name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n        <div class=\"modal-footer\">\n          <button\n            mjButton variant=\"primary\"\n            (click)=\"executeBulkRoleAssign()\"\n            [disabled]=\"!bulkRoleId || isLoading\"\n          >\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Assigning...\n            } @else {\n              <i class=\"fa-solid fa-user-tag\" aria-hidden=\"true\"></i>\n              Assign Role\n            }\n          </button>\n          <button mjButton (click)=\"cancelBulkRoleAssign()\" [disabled]=\"isLoading\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* =============================================================================\n   Shared Admin Patterns - MJ Design System\n   Common styles shared across all admin settings components.\n   Component-specific CSS files override these values where needed.\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Host & Container\n   ----------------------------------------------------------------------------- */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n   Scrollable Content\n   ----------------------------------------------------------------------------- */\n.scrollable-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content {\n    padding: 2rem 2.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Action Buttons (In Sticky Header)\n   ----------------------------------------------------------------------------- */\n.action-buttons {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Statistics Cards Grid - Static Display (Non-interactive)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1rem;\n  }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1rem 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Containers\n   ----------------------------------------------------------------------------- */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Content Typography\n   ----------------------------------------------------------------------------- */\n.stat-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content .stat-value {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-value {\n    font-size: 2rem;\n  }\n}\n\n.stat-content .stat-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-label {\n    font-size: 0.8125rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Filters Section\n   ----------------------------------------------------------------------------- */\n.filters-section {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Search Input\n   ----------------------------------------------------------------------------- */\n.mj-search {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search .mj-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-icon {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search .mj-search-input {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search .mj-search-input {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search .mj-search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Expand Button\n   ----------------------------------------------------------------------------- */\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Status Badge\n   ----------------------------------------------------------------------------- */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n  font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile Actions Bar\n   ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n  display: none;\n}\n\n.mobile-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Empty State\n   ----------------------------------------------------------------------------- */\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Loading State\n   ----------------------------------------------------------------------------- */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State\n   ----------------------------------------------------------------------------- */\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container .error-icon {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header {\n    padding: 1rem;\n  }\n\n  .modal-header .modal-title {\n    font-size: 1.125rem;\n  }\n\n  .modal-body {\n    padding: 1rem;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n/* The legacy \"MJ Button System\" rule block (.mj-btn / .mj-btn-primary /\n   .mj-btn-secondary / .mj-btn-ghost / .mj-btn-danger / .mj-btn-sm /\n   .mj-btn-icon-only / .mj-btn-icon-mobile) was removed 2026-05-19. These\n   rules pre-dated the mjButton directive standardization (the directive\n   uses BEM modifiers like .mj-btn--primary, single-dash names like\n   .mj-btn-primary don't match it anyway). The base .mj-btn rule WAS active\n   though \u2014 its component-scoped specificity outranked button.scss's global\n   directive styles, so admin sub-page buttons rendered pill-shaped + 44px\n   regardless of the variant/size requested via mjButton inputs. Removing the\n   rule lets every sub-page fall back to the directive's intended look. */\n\n/* -----------------------------------------------------------------------------\n   Filter Button (Mobile Only)\n   ----------------------------------------------------------------------------- */\n.filter-button {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile Bottom Sheet)\n   ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n  flex: 1;\n  margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--mj-status-error);\n}\n\n.text-warning {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success {\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Animations\n   ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Focus Indicators\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Reduced Motion\n   ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n", "/* =============================================================================\n   User Management Component - Component-Specific Styles\n   Shared patterns are in ../shared/styles/_admin-patterns.css\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Status chip group inside <mj-page-header-interior>'s [toolbar] slot. Sits\n   alongside the search input. Tight spacing distinguishes the chips visually\n   from the [actions] cluster on the right.\n   ----------------------------------------------------------------------------- */\n.status-chips {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n/* No bespoke .mj-btn rules here. Buttons inherit the mjButton directive's\n   global styles from button.scss \u2014 see \"Button Styling\" in packages/Angular/CLAUDE.md. */\n\n/* :host already provides flex column / 100% height / overflow hidden via\n   _admin-patterns.css. No bespoke container wrapper here \u2014 see Section 10 of\n   explorer-chrome-conventions for the standardized sub-page layout contract. */\n\n/* -----------------------------------------------------------------------------\n   Stats Grid Override - Hidden until 768px (unlike other admin components)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    display: grid;\n  }\n}\n\n/* Stat Icon Override - Stays 48px at 768px (others go to 52px) */\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n}\n\n/* Stat Icon Override - color-mix background instead of accent-300 */\n.stat-icon-total {\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.stat-icon-admin {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n/* -----------------------------------------------------------------------------\n   Bulk Action Toolbar (Unique to user-management)\n   ----------------------------------------------------------------------------- */\n.bulk-action-toolbar {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--mj-brand-accent-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  animation: slideDown 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .bulk-action-toolbar {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 1.5rem;\n  }\n}\n\n.bulk-selection-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.bulk-selection-info i {\n  font-size: 1.25rem;\n}\n\n.bulk-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 639px) {\n  .bulk-action-buttons .btn-text {\n    display: none;\n  }\n\n  .bulk-action-buttons .mj-btn-sm {\n    padding: 0.5rem;\n    min-width: 36px;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   User Card - Interactive\n   ----------------------------------------------------------------------------- */\n.users-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.list-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  margin-bottom: 0.5rem;\n}\n\n.select-all-label {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.select-all-text {\n  font-weight: 500;\n}\n\n.selection-count {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-accent) 25%, transparent);\n  padding: 0.25rem 0.75rem;\n  border-radius: var(--mj-radius-full);\n}\n\n.user-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.user-card:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.expanded {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected {\n  background: var(--mj-brand-accent-subtle);\n  border-color: var(--mj-brand-primary);\n}\n\n.user-card.selected .user-header {\n  background: transparent;\n}\n\n.user-card.selected:hover .user-header {\n  background: rgba(0, 118, 182, 0.08);\n}\n\n.user-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.user-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .user-header {\n    padding: 0.875rem 1rem;\n    gap: 0.625rem;\n  }\n}\n\n.user-selection {\n  flex-shrink: 0;\n}\n\n.checkbox {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.user-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.user-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-full);\n  background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-light) 100%);\n  color: var(--mj-brand-on-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n@media (max-width: 639px) {\n  .user-avatar {\n    width: 40px;\n    height: 40px;\n    font-size: 0.8125rem;\n  }\n\n  .user-details {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .user-name {\n    font-size: 0.9375rem;\n    font-weight: 600;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .user-email {\n    font-size: 0.8125rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.user-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.user-name {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-email {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0.125rem 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.user-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 767px) {\n  .user-meta .status-badge,\n  .user-meta .user-actions {\n    display: none !important;\n  }\n\n  .user-meta {\n    gap: 0;\n  }\n}\n\n.desktop-only {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .desktop-only {\n    display: flex;\n    gap: 0.25rem;\n  }\n}\n\n.user-actions {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.user-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n/* User Card Content - Expanded */\n.user-content {\n  padding: 1.25rem 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* Mobile Actions Bar - visible on mobile */\n.mobile-actions-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 1rem;\n  margin-bottom: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .mobile-actions-bar {\n    display: none;\n  }\n}\n\n.mobile-action-buttons .btn-label {\n  margin-left: 0.375rem;\n}\n\n/* User Stats in Expanded Content */\n.user-stats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-bottom: 1rem;\n}\n\n.user-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n}\n\n.user-stats .stat-item i {\n  color: var(--mj-brand-primary);\n  font-size: 0.875rem;\n}\n\n.user-stats .stat-label {\n  color: var(--mj-text-secondary);\n}\n\n.user-stats .stat-value {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.user-stats .stat-value i {\n  font-size: 0.75rem;\n}\n\n/* Roles Section */\n.roles-section {\n  padding-top: 1rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.75rem 0;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.roles-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.role-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.role-item i {\n  font-size: 0.625rem;\n}\n\n.no-roles {\n  font-size: 0.875rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State Override - includes retry button\n   ----------------------------------------------------------------------------- */\n.error-container .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n  min-height: 44px;\n}\n\n.error-container .retry-button:hover {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.error-container .retry-button:active {\n  background: var(--mj-color-brand-400);\n  transform: scale(0.98);\n}\n\n/* -----------------------------------------------------------------------------\n   Form Field in Modal\n   ----------------------------------------------------------------------------- */\n.form-field {\n  margin-bottom: 1rem;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}\n\n.form-field .field-select {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.form-field .field-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n}\n\n/* Accessibility override for user-specific elements */\n.checkbox:focus-visible,\n.user-header:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Large Desktop (1440px+)\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .bulk-action-toolbar {\n    padding: 1.25rem 2rem;\n  }\n\n  .mj-grid-4 {\n    gap: 1.5rem;\n    padding: 0 2rem 1rem 2rem;\n  }\n\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile (< 640px) - Compact adjustments\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n    padding: 0 0.75rem 0.5rem 0.75rem;\n  }\n\n  .mj-card {\n    padding: 0.75rem;\n    gap: 0.75rem;\n  }\n\n  .stat-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 1.125rem;\n  }\n\n  .stat-content .stat-value {\n    font-size: 1.5rem;\n  }\n\n  .stat-content .stat-label {\n    font-size: 0.6875rem;\n  }\n\n  .scrollable-content {\n    padding: 0.75rem;\n  }\n\n  .list-header {\n    padding: 0.625rem 0.75rem;\n  }\n\n  .empty-state {\n    padding: 2rem 1rem;\n  }\n\n  .empty-state .empty-icon {\n    font-size: 3rem;\n  }\n\n  .empty-state .empty-text {\n    font-size: 1.0625rem;\n  }\n\n  .empty-state .empty-subtext {\n    font-size: 0.875rem;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserManagementComponent, { className: "UserManagementComponent", filePath: "src/lib/user-management/user-management.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=user-management.component.js.map