@memberjunction/ng-explorer-settings 5.42.0 → 5.44.0

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

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component } from '@angular/core';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { RunView } from '@memberjunction/core';
+import { RunView, CompositeKey } from '@memberjunction/core';
 import { BaseDashboard } from '@memberjunction/ng-shared';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { buildUserManagementAgentContext, isValidUserStatusFilter, resolveUserByIDOrName, resolveRoleByIDOrName, } from './user-management-agent-context';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-shared-generic";
@@ -288,14 +289,13 @@ function UserManagementComponent_Conditional_21_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r1.isUserExpanded(user_r6.ID) ? 25 : -1);
 } }
 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");
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 88);
+    i0.ɵɵlistener("Action", function UserManagementComponent_Conditional_21_Conditional_9_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetAllFiltersAndSearch()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 90);
-    i0.ɵɵtext(5, "Try adjusting your filters or add a new user");
-    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Variant", ctx_r1.IsListNarrowed ? "no-results" : "empty")("ActionText", ctx_r1.IsListNarrowed ? "Reset filters" : "");
 } }
 function UserManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -308,7 +308,7 @@ function UserManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditionalCreate(6, UserManagementComponent_Conditional_21_Conditional_6_Template, 2, 1, "span", 46);
     i0.ɵɵelementEnd();
     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.ɵɵconditionalCreate(9, UserManagementComponent_Conditional_21_Conditional_9_Template, 1, 2, "mj-empty-state", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -324,36 +324,36 @@ function UserManagementComponent_Conditional_21_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditional(ctx_r1.filteredUsers.length === 0 ? 9 : -1);
 } }
 function UserManagementComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    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);
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(1, "div", 90);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 91)(3, "h3", 92);
+    i0.ɵɵelement(4, "i", 93);
     i0.ɵɵtext(5, " Confirm Delete ");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(6, "button", 94);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
     i0.ɵɵelement(7, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 97)(9, "p");
+    i0.ɵɵelementStart(8, "div", 95)(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", 98);
+    i0.ɵɵelementStart(14, "p", 96);
     i0.ɵɵtext(15, "This action cannot be undone.");
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(16, "div", 97)(17, "button", 98);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r10); 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", 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.ɵɵelementStart(20, "button", 99);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_23_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
     i0.ɵɵtext(21, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -362,21 +362,21 @@ function UserManagementComponent_Conditional_23_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r1.selectedUser.Name);
 } }
 function UserManagementComponent_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 95);
+    i0.ɵɵelement(0, "i", 93);
 } }
 function UserManagementComponent_Conditional_24_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 104);
+    i0.ɵɵelement(0, "i", 102);
 } }
 function UserManagementComponent_Conditional_24_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 105);
+    i0.ɵɵelement(0, "i", 103);
 } }
 function UserManagementComponent_Conditional_24_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 98);
+    i0.ɵɵelementStart(0, "p", 96);
     i0.ɵɵtext(1, "This action cannot be undone.");
     i0.ɵɵelementEnd();
 } }
 function UserManagementComponent_Conditional_24_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 109);
+    i0.ɵɵelement(0, "i", 107);
     i0.ɵɵtext(1, " Processing... ");
 } }
 function UserManagementComponent_Conditional_24_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -398,30 +398,30 @@ function UserManagementComponent_Conditional_24_Conditional_17_Template(rf, ctx)
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getBulkActionButtonText(), " ");
 } }
 function UserManagementComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    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);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
+    i0.ɵɵelementStart(1, "div", 90);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 91)(3, "h3", 101);
+    i0.ɵɵconditionalCreate(4, UserManagementComponent_Conditional_24_Conditional_4_Template, 1, 0, "i", 93)(5, UserManagementComponent_Conditional_24_Conditional_5_Template, 1, 0, "i", 102)(6, UserManagementComponent_Conditional_24_Conditional_6_Template, 1, 0, "i", 103);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(8, "button", 94);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
     i0.ɵɵelement(9, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 106)(11, "p");
+    i0.ɵɵelementStart(10, "div", 104)(11, "p");
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, UserManagementComponent_Conditional_24_Conditional_13_Template, 2, 0, "p", 98);
+    i0.ɵɵconditionalCreate(13, UserManagementComponent_Conditional_24_Conditional_13_Template, 2, 0, "p", 96);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(14, "div", 97)(15, "button", 105);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r11); 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", 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.ɵɵelementStart(18, "button", 106);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_24_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkAction()); });
     i0.ɵɵtext(19, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -442,17 +442,17 @@ function UserManagementComponent_Conditional_24_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("disabled", ctx_r1.isLoading);
 } }
 function UserManagementComponent_Conditional_25_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 117);
+    i0.ɵɵelementStart(0, "option", 115);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const role_r12 = ctx.$implicit;
-    i0.ɵɵproperty("value", role_r12.ID);
+    const role_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", role_r13.ID);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(role_r12.Name);
+    i0.ɵɵtextInterpolate(role_r13.Name);
 } }
 function UserManagementComponent_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 109);
+    i0.ɵɵelement(0, "i", 107);
     i0.ɵɵtext(1, " Assigning... ");
 } }
 function UserManagementComponent_Conditional_25_Conditional_22_Template(rf, ctx) { if (rf & 1) {
@@ -460,38 +460,38 @@ function UserManagementComponent_Conditional_25_Conditional_22_Template(rf, ctx)
     i0.ɵɵtext(1, " Assign Role ");
 } }
 function UserManagementComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    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);
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
+    i0.ɵɵelementStart(1, "div", 90);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 91)(3, "h3", 109);
     i0.ɵɵelement(4, "i", 33);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(6, "button", 94);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
     i0.ɵɵelement(7, "i", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 112)(9, "p");
+    i0.ɵɵelementStart(8, "div", 110)(9, "p");
     i0.ɵɵtext(10, "Select a role to assign to the selected users:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 113)(12, "label", 114);
+    i0.ɵɵelementStart(11, "div", 111)(12, "label", 112);
     i0.ɵɵtext(13, "Role");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(14, "select", 113);
+    i0.ɵɵtwoWayListener("ngModelChange", function UserManagementComponent_Conditional_25_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bulkRoleId, $event) || (ctx_r1.bulkRoleId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(15, "option", 114);
     i0.ɵɵtext(16, "Select a role...");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(17, UserManagementComponent_Conditional_25_For_18_Template, 2, 2, "option", 117, _forTrack0);
+    i0.ɵɵrepeaterCreate(17, UserManagementComponent_Conditional_25_For_18_Template, 2, 2, "option", 115, _forTrack0);
     i0.ɵɵelementEnd()()();
-    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.ɵɵelementStart(19, "div", 97)(20, "button", 116);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r12); 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", 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.ɵɵelementStart(23, "button", 106);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_25_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelBulkRoleAssign()); });
     i0.ɵɵtext(24, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -568,10 +568,233 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     }
     initDashboard() {
         this.setupFilterSubscription();
+        this.registerAgentClientTools();
     }
     loadData() {
         this.loadInitialData();
     }
+    // ================================================================
+    // AI Agent Context & Client Tools
+    //
+    // 🚨 SAFETY BOUNDARY — READ-ONLY / GOVERNANCE SURFACE 🚨
+    // User Management is a security-sensitive admin surface. The agent context
+    // and client tools registered here are strictly READ-ONLY / navigational:
+    // status/role filters, free-text search, SELECTING a user (view), SORTING the
+    // list, clearing filters, refreshing, CSV export of already-visible rows, and
+    // navigating to a user's record for viewing. The mutating operations on this
+    // component — create/edit/delete users, toggle status, bulk enable/disable/
+    // delete, AND bulk role assignment (a role GRANT) — are DELIBERATELY NOT
+    // exposed to the agent; they remain human-initiated. Context exposes only
+    // counts, active filter selections, and on-screen display names/emails —
+    // NEVER passwords, tokens, or other secrets.
+    // ================================================================
+    /** Active agent-requested sort (defaults to the grid's Name/asc). */
+    agentSortField = 'name';
+    agentSortDirection = 'asc';
+    /**
+     * Publish the current user-management state to the AI agent. Re-invoked on
+     * every meaningful state change (data load, filter, selection, sort) so the
+     * agent sees a fresh, read-only, NON-SENSITIVE snapshot. Shaped by the pure
+     * {@link buildUserManagementAgentContext} helper (unit-tested in isolation).
+     */
+    publishAgentContext() {
+        const filters = this.filters$.value;
+        const roleFilter = filters.role ? this.roles.find(r => UUIDsEqual(r.ID, filters.role)) : null;
+        const input = {
+            TotalUserCount: this.users.length,
+            FilteredUserCount: this.filteredUsers.length,
+            ActiveUserCount: this.stats.activeUsers,
+            InactiveUserCount: this.stats.inactiveUsers,
+            StatusFilter: filters.status,
+            RoleFilterId: filters.role || null,
+            RoleFilterName: roleFilter?.Name ?? null,
+            SearchText: filters.search,
+            SelectedUserId: this.selectedUser?.ID ?? null,
+            SelectedUserName: this.selectedUser?.Name ?? null,
+            VisibleUserNames: this.filteredUsers.map(u => u.Name ?? '').filter(n => n !== ''),
+            VisibleUserEmails: this.filteredUsers.map(u => u.Email ?? '').filter(e => e !== ''),
+            AvailableRoleNames: this.roles.map(r => r.Name ?? '').filter(n => n !== ''),
+            VisibleColumns: ['Name', 'Email', 'Type', 'Status', 'Roles'],
+        };
+        this.navigationService.SetAgentContext(this, buildUserManagementAgentContext(input));
+    }
+    /**
+     * Register the read-only / navigational client tools the agent may invoke.
+     * Every Handler is tolerant: validates input and returns
+     * `{ Success: false, ErrorMessage }` rather than throwing.
+     */
+    registerAgentClientTools() {
+        this.navigationService.SetAgentClientTools(this, [
+            {
+                Name: 'SwitchUserStatusFilter',
+                Description: 'Filter the user list by status. Valid values: all, active, inactive.',
+                ParameterSchema: { type: 'object', properties: { status: { type: 'string', enum: ['all', 'active', 'inactive'] } }, required: ['status'] },
+                Handler: async (params) => this.handleSwitchStatusFilterTool(params),
+            },
+            {
+                Name: 'FilterUsersByRole',
+                Description: 'Filter the user list by role. Accepts a role name OR a role ID; pass an empty string to clear the role filter. Available role names are published in AvailableRoleNames.',
+                ParameterSchema: { type: 'object', properties: { role: { type: 'string' } }, required: ['role'] },
+                Handler: async (params) => this.handleFilterByRoleTool(params),
+            },
+            {
+                Name: 'SearchUsers',
+                Description: 'Free-text search across user name, email, first name, and last name.',
+                ParameterSchema: { type: 'object', properties: { searchText: { type: 'string' } }, required: ['searchText'] },
+                Handler: async (params) => this.handleSearchTool(params),
+            },
+            {
+                Name: 'SelectUser',
+                Description: 'Select a user for VIEWING by ID or name (exact ID → exact name/email → partial match). Read-only — does not edit the user. Updates SelectedUserId/SelectedUserName in context.',
+                ParameterSchema: { type: 'object', properties: { user: { type: 'string' } }, required: ['user'] },
+                Handler: async (params) => this.handleSelectUserTool(params),
+            },
+            {
+                Name: 'SortUsers',
+                Description: 'Sort the visible user list. field: name | email | status | type. direction: asc | desc (default asc).',
+                ParameterSchema: { type: 'object', properties: { field: { type: 'string', enum: ['name', 'email', 'status', 'type'] }, direction: { type: 'string', enum: ['asc', 'desc'] } }, required: ['field'] },
+                Handler: async (params) => this.handleSortUsersTool(params),
+            },
+            {
+                Name: 'NavigateToUserRecord',
+                Description: 'Open the record for a user (by ID or name) in a tab for VIEWING. Read-only navigation — does not edit the user.',
+                ParameterSchema: { type: 'object', properties: { user: { type: 'string' } }, required: ['user'] },
+                Handler: async (params) => this.handleNavigateToUserRecordTool(params),
+            },
+            {
+                Name: 'ClearAllFilters',
+                Description: 'Clear all user filters (status, role, and search) and show the full list.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => this.handleClearFiltersTool(),
+            },
+            {
+                Name: 'RefreshUserList',
+                Description: 'Reload the user list from the server. Read-only — does not mutate any data.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => this.handleRefreshTool(),
+            },
+            {
+                Name: 'ExportUsers',
+                Description: 'Export the currently filtered users as a CSV file.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => this.handleExportTool(),
+            },
+        ]);
+    }
+    handleSwitchStatusFilterTool(params) {
+        const status = params?.['status'];
+        if (!isValidUserStatusFilter(status)) {
+            return { Success: false, ErrorMessage: `Invalid status "${String(status)}". Expected one of: all, active, inactive.` };
+        }
+        this.onStatusFilterChange(status);
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    handleFilterByRoleTool(params) {
+        const raw = String(params?.['role'] ?? '');
+        if (!raw.trim()) {
+            // Empty string explicitly clears the role filter.
+            this.updateFilter({ role: '' });
+            this.publishAgentContext();
+            return { Success: true };
+        }
+        const resolved = resolveRoleByIDOrName(raw, this.roles.map(r => ({ ID: r.ID, Name: r.Name ?? '' })));
+        if (!resolved.ok) {
+            return { Success: false, ErrorMessage: resolved.error };
+        }
+        this.updateFilter({ role: resolved.match.ID });
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    handleSearchTool(params) {
+        const searchText = params?.['searchText'];
+        if (typeof searchText !== 'string') {
+            return { Success: false, ErrorMessage: 'searchText must be a string.' };
+        }
+        this.updateFilter({ search: searchText });
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    handleSelectUserTool(params) {
+        const raw = String(params?.['user'] ?? '');
+        const resolved = resolveUserByIDOrName(raw, this.users.map(u => ({
+            ID: u.ID, Name: u.Name ?? '', Email: u.Email, FirstName: u.FirstName, LastName: u.LastName,
+        })));
+        if (!resolved.ok) {
+            return { Success: false, ErrorMessage: resolved.error };
+        }
+        const match = this.users.find(u => UUIDsEqual(u.ID, resolved.match.ID)) ?? null;
+        this.selectedUser = match;
+        this.cdr.markForCheck();
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    handleSortUsersTool(params) {
+        const field = String(params?.['field'] ?? '');
+        if (field !== 'name' && field !== 'email' && field !== 'status' && field !== 'type') {
+            return { Success: false, ErrorMessage: `Invalid sort field "${field}". Expected one of: name, email, status, type.` };
+        }
+        const dirRaw = params?.['direction'];
+        const direction = dirRaw === 'desc' ? 'desc' : 'asc';
+        this.agentSortField = field;
+        this.agentSortDirection = direction;
+        this.applySortToVisibleUsers();
+        this.cdr.markForCheck();
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    handleNavigateToUserRecordTool(params) {
+        const raw = String(params?.['user'] ?? '');
+        const resolved = resolveUserByIDOrName(raw, this.users.map(u => ({
+            ID: u.ID, Name: u.Name ?? '', Email: u.Email, FirstName: u.FirstName, LastName: u.LastName,
+        })));
+        if (!resolved.ok) {
+            return { Success: false, ErrorMessage: resolved.error };
+        }
+        this.navigationService.OpenEntityRecord('MJ: Users', CompositeKey.FromID(resolved.match.ID));
+        return { Success: true };
+    }
+    /** Sort filteredUsers in place per the active agent-requested sort. Read-only display ordering. */
+    applySortToVisibleUsers() {
+        const dir = this.agentSortDirection === 'desc' ? -1 : 1;
+        const field = this.agentSortField;
+        this.filteredUsers = [...this.filteredUsers].sort((a, b) => {
+            const av = this.sortKeyForUser(a, field);
+            const bv = this.sortKeyForUser(b, field);
+            return av.localeCompare(bv) * dir;
+        });
+    }
+    sortKeyForUser(user, field) {
+        switch (field) {
+            case 'email': return (user.Email ?? '').toLowerCase();
+            case 'status': return user.IsActive ? 'active' : 'inactive';
+            case 'type': return (user.Type ?? '').toLowerCase();
+            case 'name':
+            default: return (user.Name ?? '').toLowerCase();
+        }
+    }
+    handleClearFiltersTool() {
+        this.resetAllFiltersAndSearch();
+        this.publishAgentContext();
+        return { Success: true };
+    }
+    async handleRefreshTool() {
+        try {
+            await this.loadInitialData();
+            this.publishAgentContext();
+            return { Success: true };
+        }
+        catch (e) {
+            return { Success: false, ErrorMessage: e instanceof Error ? e.message : 'Refresh failed.' };
+        }
+    }
+    handleExportTool() {
+        if (this.filteredUsers.length === 0) {
+            return { Success: false, ErrorMessage: 'No users to export.' };
+        }
+        this.exportUsers();
+        return { Success: true };
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -602,6 +825,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             this.ngZone.run(() => {
                 this.isLoading = false;
                 this.cdr.markForCheck();
+                this.publishAgentContext();
             });
         }
     }
@@ -646,6 +870,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             .pipe(debounceTime(300), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.destroy$))
             .subscribe(() => {
             this.applyFilters();
+            this.publishAgentContext();
         });
     }
     applyFilters() {
@@ -671,6 +896,8 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 user.LastName?.toLowerCase().includes(searchLower));
         }
         this.filteredUsers = filtered;
+        // Preserve any agent-requested sort across filter changes (read-only display ordering).
+        this.applySortToVisibleUsers();
     }
     calculateStats() {
         this.stats = {
@@ -945,6 +1172,19 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     clearAllAppliedFilters() {
         this.updateFilter({ status: 'all', role: '' });
     }
+    /** True when search and/or panel filters are narrowing the list — gates the
+     *  no-results empty-state "Reset filters" CTA. */
+    get IsListNarrowed() {
+        return this.filters$.value.search !== '' || this.TotalActiveFilterCount > 0;
+    }
+    /** Reset everything narrowing the list (search + Status + Role) and refresh
+     *  immediately. Wired to the no-results empty-state CTA. Unlike
+     *  clearAllAppliedFilters(), this also clears the search box. */
+    resetAllFiltersAndSearch() {
+        this.filters$.next({ status: 'all', role: '', search: '' });
+        this.applyFilters();
+        this.cdr.markForCheck();
+    }
     toggleSelectAll() {
         if (this.isAllSelected) {
             // Deselect all filtered users
@@ -1161,7 +1401,7 @@ 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: 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) {
+    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"], ["Icon", "fa-solid fa-users-slash", "Title", "No users found", "Message", "Try adjusting your filters or add a new user", "ActionIcon", "fa-solid fa-rotate-left", 3, "Variant", "ActionText"], ["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"], ["Icon", "fa-solid fa-users-slash", "Title", "No users found", "Message", "Try adjusting your filters or add a new user", "ActionIcon", "fa-solid fa-rotate-left", 3, "Action", "Variant", "ActionText"], ["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();
@@ -1227,7 +1467,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             i0.ɵɵconditional(ctx.showBulkActionConfirm ? 24 : -1);
             i0.ɵɵadvance();
             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}"] });
+        } }, 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, i3.MJEmptyStateComponent, 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: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\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}"] });
 };
 UserManagementComponent = __decorate([
     RegisterClass(BaseDashboard, 'UserManagement')
@@ -1235,7 +1475,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    <!-- 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"] }]
+        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            <mj-empty-state\n              [Variant]=\"IsListNarrowed ? 'no-results' : 'empty'\"\n              Icon=\"fa-solid fa-users-slash\"\n              Title=\"No users found\"\n              Message=\"Try adjusting your filters or add a new user\"\n              [ActionText]=\"IsListNarrowed ? 'Reset filters' : ''\"\n              ActionIcon=\"fa-solid fa-rotate-left\"\n              (Action)=\"resetAllFiltersAndSearch()\" />\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: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\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 color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\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"] }]
     }], () => [{ 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserManagementComponent, { className: "UserManagementComponent", filePath: "src/lib/user-management/user-management.component.ts", lineNumber: 42 }); })();
 //# sourceMappingURL=user-management.component.js.map