@memberjunction/ng-explorer-settings 6.1.4 → 6.2.0-edge.1

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

@@ -9,8 +9,9 @@ import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 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 { NormalizeUUID, RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { ServerRefusalReasons } from './transaction-group-refusals';
+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";
@@ -513,49 +514,177 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     cdr;
     ngZone;
     // State management
-    users = [];
-    filteredUsers = [];
-    roles = [];
-    selectedUser = null;
+    Users = [];
+    /** @deprecated Use {@link Users}. */
+    get users() {
+        return this.Users;
+    }
+    /** @deprecated Use {@link Users}. */
+    set users(value) {
+        this.Users = value;
+    }
+    FilteredUsers = [];
+    /** @deprecated Use {@link FilteredUsers}. */
+    get filteredUsers() {
+        return this.FilteredUsers;
+    }
+    /** @deprecated Use {@link FilteredUsers}. */
+    set filteredUsers(value) {
+        this.FilteredUsers = value;
+    }
+    Roles = [];
+    /** @deprecated Use {@link Roles}. */
+    get roles() {
+        return this.Roles;
+    }
+    /** @deprecated Use {@link Roles}. */
+    set roles(value) {
+        this.Roles = value;
+    }
+    SelectedUser = null;
+    /** @deprecated Use {@link SelectedUser}. */
+    get selectedUser() {
+        return this.SelectedUser;
+    }
+    /** @deprecated Use {@link SelectedUser}. */
+    set selectedUser(value) {
+        this.SelectedUser = value;
+    }
     isLoading = false;
     error = null;
     // Selection state for bulk actions
-    selectedUserIds = new Set();
+    SelectedUserIds = new Set();
+    /** @deprecated Use {@link SelectedUserIds}. */
+    get selectedUserIds() {
+        return this.SelectedUserIds;
+    }
+    /** @deprecated Use {@link SelectedUserIds}. */
+    set selectedUserIds(value) {
+        this.SelectedUserIds = value;
+    }
     // Dialog state
-    showUserDialog = false;
-    userDialogData = null;
+    ShowUserDialog = false;
+    /** @deprecated Use {@link ShowUserDialog}. */
+    get showUserDialog() {
+        return this.ShowUserDialog;
+    }
+    /** @deprecated Use {@link ShowUserDialog}. */
+    set showUserDialog(value) {
+        this.ShowUserDialog = value;
+    }
+    UserDialogData = null;
+    /** @deprecated Use {@link UserDialogData}. */
+    get userDialogData() {
+        return this.UserDialogData;
+    }
+    /** @deprecated Use {@link UserDialogData}. */
+    set userDialogData(value) {
+        this.UserDialogData = value;
+    }
     // Bulk action dialog state
-    showBulkActionConfirm = false;
-    bulkActionType = null;
-    showBulkRoleAssign = false;
-    bulkRoleId = '';
+    ShowBulkActionConfirm = false;
+    /** @deprecated Use {@link ShowBulkActionConfirm}. */
+    get showBulkActionConfirm() {
+        return this.ShowBulkActionConfirm;
+    }
+    /** @deprecated Use {@link ShowBulkActionConfirm}. */
+    set showBulkActionConfirm(value) {
+        this.ShowBulkActionConfirm = value;
+    }
+    BulkActionType = null;
+    /** @deprecated Use {@link BulkActionType}. */
+    get bulkActionType() {
+        return this.BulkActionType;
+    }
+    /** @deprecated Use {@link BulkActionType}. */
+    set bulkActionType(value) {
+        this.BulkActionType = value;
+    }
+    ShowBulkRoleAssign = false;
+    /** @deprecated Use {@link ShowBulkRoleAssign}. */
+    get showBulkRoleAssign() {
+        return this.ShowBulkRoleAssign;
+    }
+    /** @deprecated Use {@link ShowBulkRoleAssign}. */
+    set showBulkRoleAssign(value) {
+        this.ShowBulkRoleAssign = value;
+    }
+    BulkRoleId = '';
+    /** @deprecated Use {@link BulkRoleId}. */
+    get bulkRoleId() {
+        return this.BulkRoleId;
+    }
+    /** @deprecated Use {@link BulkRoleId}. */
+    set bulkRoleId(value) {
+        this.BulkRoleId = value;
+    }
     // Stats
-    stats = {
+    Stats = {
         totalUsers: 0,
         activeUsers: 0,
         inactiveUsers: 0,
         adminUsers: 0 // This will be based on roles, not Type
     };
+    /** @deprecated Use {@link Stats}. */
+    get stats() {
+        return this.Stats;
+    }
+    /** @deprecated Use {@link Stats}. */
+    set stats(value) {
+        this.Stats = value;
+    }
     // Filters
-    filters$ = new BehaviorSubject({
+    Filters$ = new BehaviorSubject({
         status: 'all',
         role: '',
         search: ''
     });
+    /** @deprecated Use {@link Filters$}. */
+    get filters$() {
+        return this.Filters$;
+    }
+    /** @deprecated Use {@link Filters$}. */
+    set filters$(value) {
+        this.Filters$ = value;
+    }
     // UI State
     showCreateDialog = false;
-    showEditDialog = false;
-    showDeleteConfirm = false;
+    ShowEditDialog = false;
+    /** @deprecated Use {@link ShowEditDialog}. */
+    get showEditDialog() {
+        return this.ShowEditDialog;
+    }
+    /** @deprecated Use {@link ShowEditDialog}. */
+    set showEditDialog(value) {
+        this.ShowEditDialog = value;
+    }
+    ShowDeleteConfirm = false;
+    /** @deprecated Use {@link ShowDeleteConfirm}. */
+    get showDeleteConfirm() {
+        return this.ShowDeleteConfirm;
+    }
+    /** @deprecated Use {@link ShowDeleteConfirm}. */
+    set showDeleteConfirm(value) {
+        this.ShowDeleteConfirm = value;
+    }
     // Mobile expansion state
     expandedUserIds = new Set();
     // User-Role mapping
     userRoleMap = new Map(); // userId -> roleIds[]
     // Grid configuration
-    gridConfig = {
+    GridConfig = {
         pageSize: 20,
         sortField: 'Name',
         sortDirection: 'asc'
     };
+    /** @deprecated Use {@link GridConfig}. */
+    get gridConfig() {
+        return this.GridConfig;
+    }
+    /** @deprecated Use {@link GridConfig}. */
+    set gridConfig(value) {
+        this.GridConfig = value;
+    }
     destroy$ = new Subject();
     get metadata() { return this.ProviderToUse; }
     constructor(cdr, ngZone) {
@@ -571,7 +700,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         this.registerAgentClientTools();
     }
     loadData() {
-        this.loadInitialData();
+        this.LoadInitialData();
     }
     // ================================================================
     // AI Agent Context & Client Tools
@@ -598,25 +727,25 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
      * {@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 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,
+            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 !== ''),
+            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));
+        this.navigationService.SetAgentContext(this, BuildUserManagementAgentContext(input));
     }
     /**
      * Register the read-only / navigational client tools the agent may invoke.
@@ -683,10 +812,10 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     }
     handleSwitchStatusFilterTool(params) {
         const status = params?.['status'];
-        if (!isValidUserStatusFilter(status)) {
+        if (!IsValidUserStatusFilter(status)) {
             return { Success: false, ErrorMessage: `Invalid status "${String(status)}". Expected one of: all, active, inactive.` };
         }
-        this.onStatusFilterChange(status);
+        this.OnStatusFilterChange(status);
         this.publishAgentContext();
         return { Success: true };
     }
@@ -694,15 +823,15 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         const raw = String(params?.['role'] ?? '');
         if (!raw.trim()) {
             // Empty string explicitly clears the role filter.
-            this.updateFilter({ role: '' });
+            this.UpdateFilter({ role: '' });
             this.publishAgentContext();
             return { Success: true };
         }
-        const resolved = resolveRoleByIDOrName(raw, this.roles.map(r => ({ ID: r.ID, Name: r.Name ?? '' })));
+        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.UpdateFilter({ role: resolved.match.ID });
         this.publishAgentContext();
         return { Success: true };
     }
@@ -711,20 +840,20 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         if (typeof searchText !== 'string') {
             return { Success: false, ErrorMessage: 'searchText must be a string.' };
         }
-        this.updateFilter({ search: searchText });
+        this.UpdateFilter({ search: searchText });
         this.publishAgentContext();
         return { Success: true };
     }
     handleSelectUserTool(params) {
         const raw = String(params?.['user'] ?? '');
-        const resolved = resolveUserByIDOrName(raw, this.users.map(u => ({
+        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;
+        const match = this.Users.find(u => UUIDsEqual(u.ID, resolved.match.ID)) ?? null;
+        this.SelectedUser = match;
         this.cdr.markForCheck();
         this.publishAgentContext();
         return { Success: true };
@@ -745,7 +874,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     }
     handleNavigateToUserRecordTool(params) {
         const raw = String(params?.['user'] ?? '');
-        const resolved = resolveUserByIDOrName(raw, this.users.map(u => ({
+        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) {
@@ -758,7 +887,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
     applySortToVisibleUsers() {
         const dir = this.agentSortDirection === 'desc' ? -1 : 1;
         const field = this.agentSortField;
-        this.filteredUsers = [...this.filteredUsers].sort((a, b) => {
+        this.FilteredUsers = [...this.FilteredUsers].sort((a, b) => {
             const av = this.sortKeyForUser(a, field);
             const bv = this.sortKeyForUser(b, field);
             return av.localeCompare(bv) * dir;
@@ -774,13 +903,13 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         }
     }
     handleClearFiltersTool() {
-        this.resetAllFiltersAndSearch();
+        this.ResetAllFiltersAndSearch();
         this.publishAgentContext();
         return { Success: true };
     }
     async handleRefreshTool() {
         try {
-            await this.loadInitialData();
+            await this.LoadInitialData();
             this.publishAgentContext();
             return { Success: true };
         }
@@ -789,10 +918,10 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         }
     }
     handleExportTool() {
-        if (this.filteredUsers.length === 0) {
+        if (this.FilteredUsers.length === 0) {
             return { Success: false, ErrorMessage: 'No users to export.' };
         }
-        this.exportUsers();
+        this.ExportUsers();
         return { Success: true };
     }
     ngOnDestroy() {
@@ -800,7 +929,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         this.destroy$.complete();
         super.ngOnDestroy();
     }
-    async loadInitialData() {
+    async LoadInitialData() {
         try {
             this.isLoading = true;
             this.error = null;
@@ -810,8 +939,8 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 this.loadRoles(),
                 this.loadUserRoles()
             ]);
-            this.users = users;
-            this.roles = roles;
+            this.Users = users;
+            this.Roles = roles;
             // Build user-role mapping
             this.buildUserRoleMapping(userRoles);
             this.calculateStats();
@@ -829,6 +958,10 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             });
         }
     }
+    /** @deprecated Use {@link LoadInitialData}. */
+    async loadInitialData() {
+        return this.LoadInitialData();
+    }
     async loadUsers() {
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
         const result = await rv.RunView({
@@ -866,7 +999,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         });
     }
     setupFilterSubscription() {
-        this.filters$
+        this.Filters$
             .pipe(debounceTime(300), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.destroy$))
             .subscribe(() => {
             this.applyFilters();
@@ -874,8 +1007,8 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         });
     }
     applyFilters() {
-        const filters = this.filters$.value;
-        let filtered = [...this.users];
+        const filters = this.Filters$.value;
+        let filtered = [...this.Users];
         // Apply status filter
         if (filters.status !== 'all') {
             filtered = filtered.filter(user => filters.status === 'active' ? user.IsActive : !user.IsActive);
@@ -895,25 +1028,29 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 user.FirstName?.toLowerCase().includes(searchLower) ||
                 user.LastName?.toLowerCase().includes(searchLower));
         }
-        this.filteredUsers = filtered;
+        this.FilteredUsers = filtered;
         // Preserve any agent-requested sort across filter changes (read-only display ordering).
         this.applySortToVisibleUsers();
     }
     calculateStats() {
-        this.stats = {
-            totalUsers: this.users.length,
-            activeUsers: this.users.filter(u => u.IsActive).length,
-            inactiveUsers: this.users.filter(u => !u.IsActive).length,
-            adminUsers: this.users.filter(u => u.Type === 'Owner').length // Using Owner as admin type
+        this.Stats = {
+            totalUsers: this.Users.length,
+            activeUsers: this.Users.filter(u => u.IsActive).length,
+            inactiveUsers: this.Users.filter(u => !u.IsActive).length,
+            adminUsers: this.Users.filter(u => u.Type === 'Owner').length // Using Owner as admin type
         };
     }
     // Public methods for template
+    OnStatusFilterChange(status) {
+        this.UpdateFilter({ status });
+    }
+    /** @deprecated Use {@link OnStatusFilterChange}. */
     onStatusFilterChange(status) {
-        this.updateFilter({ status });
+        return this.OnStatusFilterChange(status);
     }
-    updateFilter(partial) {
-        this.filters$.next({
-            ...this.filters$.value,
+    UpdateFilter(partial) {
+        this.Filters$.next({
+            ...this.Filters$.value,
             ...partial
         });
         // Discrete changes (chips, popover dropdowns) apply immediately. Text search
@@ -924,42 +1061,58 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link UpdateFilter}. */
+    updateFilter(partial) {
+        return this.UpdateFilter(partial);
+    }
+    SelectUser(user) {
+        this.SelectedUser = user;
+        this.ShowEditDialog = true;
+    }
+    /** @deprecated Use {@link SelectUser}. */
     selectUser(user) {
-        this.selectedUser = user;
-        this.showEditDialog = true;
+        return this.SelectUser(user);
     }
     createNewUser() {
-        this.userDialogData = {
+        this.UserDialogData = {
             mode: 'create',
-            availableRoles: this.roles
+            availableRoles: this.Roles
         };
-        this.showUserDialog = true;
+        this.ShowUserDialog = true;
     }
-    editUser(user) {
-        this.userDialogData = {
+    EditUser(user) {
+        this.UserDialogData = {
             user: user,
             mode: 'edit',
-            availableRoles: this.roles
+            availableRoles: this.Roles
         };
-        this.showUserDialog = true;
+        this.ShowUserDialog = true;
+    }
+    /** @deprecated Use {@link EditUser}. */
+    editUser(user) {
+        return this.EditUser(user);
+    }
+    ConfirmDeleteUser(user) {
+        this.SelectedUser = user;
+        this.ShowDeleteConfirm = true;
     }
+    /** @deprecated Use {@link ConfirmDeleteUser}. */
     confirmDeleteUser(user) {
-        this.selectedUser = user;
-        this.showDeleteConfirm = true;
+        return this.ConfirmDeleteUser(user);
     }
-    async deleteUser() {
-        if (!this.selectedUser)
+    async DeleteUser() {
+        if (!this.SelectedUser)
             return;
         try {
             // Load user entity to delete
             const user = await this.metadata.GetEntityObject('MJ: Users');
-            const loadResult = await user.Load(this.selectedUser.ID);
+            const loadResult = await user.Load(this.SelectedUser.ID);
             if (loadResult) {
                 const deleteResult = await user.Delete();
                 if (deleteResult) {
-                    this.showDeleteConfirm = false;
-                    this.selectedUser = null;
-                    await this.loadInitialData();
+                    this.ShowDeleteConfirm = false;
+                    this.SelectedUser = null;
+                    await this.LoadInitialData();
                 }
                 else {
                     throw new Error(user.LatestResult?.Message || 'Failed to delete user');
@@ -977,7 +1130,11 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             });
         }
     }
-    async toggleUserStatus(user) {
+    /** @deprecated Use {@link DeleteUser}. */
+    async deleteUser() {
+        return this.DeleteUser();
+    }
+    async ToggleUserStatus(user) {
         try {
             user.IsActive = !user.IsActive;
             // BaseEntity.Save() returns false on a validation failure — it does NOT throw. Discarding
@@ -1008,8 +1165,12 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             });
         }
     }
-    exportUsers() {
-        if (this.filteredUsers.length === 0) {
+    /** @deprecated Use {@link ToggleUserStatus}. */
+    async toggleUserStatus(user) {
+        return this.ToggleUserStatus(user);
+    }
+    ExportUsers() {
+        if (this.FilteredUsers.length === 0) {
             this.error = 'No users to export';
             return;
         }
@@ -1018,7 +1179,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             const headers = ['Name', 'First Name', 'Last Name', 'Email', 'Type', 'Status', 'Created', 'Updated'];
             const csvRows = [headers.join(',')];
             // Add user data
-            this.filteredUsers.forEach(user => {
+            this.FilteredUsers.forEach(user => {
                 const row = [
                     this.escapeCSV(user.Name || ''),
                     this.escapeCSV(user.FirstName || ''),
@@ -1050,22 +1211,38 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             this.error = 'Failed to export users';
         }
     }
+    /** @deprecated Use {@link ExportUsers}. */
+    exportUsers() {
+        return this.ExportUsers();
+    }
     escapeCSV(value) {
         if (value.includes(',') || value.includes('"') || value.includes('\n')) {
             return `"${value.replace(/"/g, '""')}"`;
         }
         return value;
     }
+    RefreshData() {
+        this.LoadInitialData();
+    }
+    /** @deprecated Use {@link RefreshData}. */
     refreshData() {
-        this.loadInitialData();
+        return this.RefreshData();
     }
-    getStatusIcon(user) {
+    GetStatusIcon(user) {
         return user.IsActive ? 'fa-check-circle' : 'fa-times-circle';
     }
-    getStatusClass(user) {
+    /** @deprecated Use {@link GetStatusIcon}. */
+    getStatusIcon(user) {
+        return this.GetStatusIcon(user);
+    }
+    GetStatusClass(user) {
         return user.IsActive ? 'status-active' : 'status-inactive';
     }
-    getUserTypeIcon(user) {
+    /** @deprecated Use {@link GetStatusClass}. */
+    getStatusClass(user) {
+        return this.GetStatusClass(user);
+    }
+    GetUserTypeIcon(user) {
         switch (user.Type) {
             case 'Owner':
                 return 'fa-shield-halved';
@@ -1075,56 +1252,96 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 return 'fa-user';
         }
     }
-    getUserInitials(user) {
+    /** @deprecated Use {@link GetUserTypeIcon}. */
+    getUserTypeIcon(user) {
+        return this.GetUserTypeIcon(user);
+    }
+    GetUserInitials(user) {
         const first = user.FirstName?.charAt(0) || '';
         const last = user.LastName?.charAt(0) || '';
         return (first + last).toUpperCase() || user.Name?.charAt(0).toUpperCase() || 'U';
     }
-    onUserDialogResult(result) {
-        this.showUserDialog = false;
-        this.userDialogData = null;
+    /** @deprecated Use {@link GetUserInitials}. */
+    getUserInitials(user) {
+        return this.GetUserInitials(user);
+    }
+    OnUserDialogResult(result) {
+        this.ShowUserDialog = false;
+        this.UserDialogData = null;
         if (result.action === 'save') {
             // Refresh the user list to show changes
-            this.loadInitialData();
+            this.LoadInitialData();
         }
     }
+    /** @deprecated Use {@link OnUserDialogResult}. */
+    onUserDialogResult(result) {
+        return this.OnUserDialogResult(result);
+    }
     // Selection methods for bulk actions
+    get IsAllSelected() {
+        return this.FilteredUsers.length > 0 &&
+            this.FilteredUsers.every(user => this.SelectedUserIds.has(user.ID));
+    }
+    /** @deprecated Use {@link IsAllSelected}. */
     get isAllSelected() {
-        return this.filteredUsers.length > 0 &&
-            this.filteredUsers.every(user => this.selectedUserIds.has(user.ID));
+        return this.IsAllSelected;
     }
+    get IsIndeterminate() {
+        const selectedCount = this.FilteredUsers.filter(user => this.SelectedUserIds.has(user.ID)).length;
+        return selectedCount > 0 && selectedCount < this.FilteredUsers.length;
+    }
+    /** @deprecated Use {@link IsIndeterminate}. */
     get isIndeterminate() {
-        const selectedCount = this.filteredUsers.filter(user => this.selectedUserIds.has(user.ID)).length;
-        return selectedCount > 0 && selectedCount < this.filteredUsers.length;
+        return this.IsIndeterminate;
+    }
+    get HasSelection() {
+        return this.SelectedUserIds.size > 0;
     }
+    /** @deprecated Use {@link HasSelection}. */
     get hasSelection() {
-        return this.selectedUserIds.size > 0;
+        return this.HasSelection;
+    }
+    get SelectedCount() {
+        return this.SelectedUserIds.size;
     }
+    /** @deprecated Use {@link SelectedCount}. */
     get selectedCount() {
-        return this.selectedUserIds.size;
+        return this.SelectedCount;
     }
-    get hasActiveFilters() {
-        const filters = this.filters$.value;
+    get HasActiveFilters() {
+        const filters = this.Filters$.value;
         return filters.status !== 'all' || filters.role !== '';
     }
-    get activeFilterCount() {
+    /** @deprecated Use {@link HasActiveFilters}. */
+    get hasActiveFilters() {
+        return this.HasActiveFilters;
+    }
+    get ActiveFilterCount() {
         let count = 0;
-        const filters = this.filters$.value;
+        const filters = this.Filters$.value;
         if (filters.status !== 'all')
             count++;
         if (filters.role !== '')
             count++;
         return count;
     }
-    clearFilters() {
-        this.filters$.next({
-            ...this.filters$.value,
+    /** @deprecated Use {@link ActiveFilterCount}. */
+    get activeFilterCount() {
+        return this.ActiveFilterCount;
+    }
+    ClearFilters() {
+        this.Filters$.next({
+            ...this.Filters$.value,
             status: 'all',
             role: ''
         });
         this.applyFilters();
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ClearFilters}. */
+    clearFilters() {
+        return this.ClearFilters();
+    }
     // -- Filter panel binding (mj-filter-panel inside the popover) -------------
     //
     // Only Role lives inside the popover — Status is exposed as visible chips
@@ -1136,7 +1353,7 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
      * FilterFieldConfig[] describing the popover's Role field. Driven off
      * `roles[]` so the dropdown stays in sync as roles load.
      */
-    get filterFields() {
+    get FilterFields() {
         return [
             {
                 key: 'status',
@@ -1154,25 +1371,33 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 label: 'Role',
                 icon: 'fa-solid fa-user-shield',
                 placeholder: 'All Roles',
-                filterable: this.roles.length > 10,
+                filterable: this.Roles.length > 10,
                 options: [
                     { text: 'All Roles', value: '' },
-                    ...this.roles.map(r => ({ text: r.Name ?? '', value: r.ID }))
+                    ...this.Roles.map(r => ({ text: r.Name ?? '', value: r.ID }))
                 ]
             }
         ];
     }
+    /** @deprecated Use {@link FilterFields}. */
+    get filterFields() {
+        return this.FilterFields;
+    }
     /** Current popover field values keyed by FilterFieldConfig.key. */
+    get FilterValues() {
+        return { status: this.Filters$.value.status, role: this.Filters$.value.role };
+    }
+    /** @deprecated Use {@link FilterValues}. */
     get filterValues() {
-        return { status: this.filters$.value.status, role: this.filters$.value.role };
+        return this.FilterValues;
     }
     /** Total active filters (Status + Role) — drives the Filter button badge. */
     get TotalActiveFilterCount() {
-        const f = this.filters$.value;
+        const f = this.Filters$.value;
         return (f.status !== 'all' ? 1 : 0) + (f.role !== '' ? 1 : 0);
     }
     /** Apply a value change from <mj-filter-panel>. */
-    onFilterPanelChange(values) {
+    OnFilterPanelChange(values) {
         const partial = {};
         if ('status' in values) {
             partial.status = values['status'] || 'all';
@@ -1180,70 +1405,106 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         if ('role' in values) {
             partial.role = values['role'] ?? '';
         }
-        this.updateFilter(partial);
+        this.UpdateFilter(partial);
+    }
+    /** @deprecated Use {@link OnFilterPanelChange}. */
+    onFilterPanelChange(values) {
+        return this.OnFilterPanelChange(values);
     }
     /** Clear all filters (Status + Role); search persists. */
+    ClearAllAppliedFilters() {
+        this.UpdateFilter({ status: 'all', role: '' });
+    }
+    /** @deprecated Use {@link ClearAllAppliedFilters}. */
     clearAllAppliedFilters() {
-        this.updateFilter({ status: 'all', role: '' });
+        return this.ClearAllAppliedFilters();
     }
     /** 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;
+        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: '' });
+    ResetAllFiltersAndSearch() {
+        this.Filters$.next({ status: 'all', role: '', search: '' });
         this.applyFilters();
         this.cdr.markForCheck();
     }
-    toggleSelectAll() {
-        if (this.isAllSelected) {
+    /** @deprecated Use {@link ResetAllFiltersAndSearch}. */
+    resetAllFiltersAndSearch() {
+        return this.ResetAllFiltersAndSearch();
+    }
+    ToggleSelectAll() {
+        if (this.IsAllSelected) {
             // Deselect all filtered users
-            this.filteredUsers.forEach(user => this.selectedUserIds.delete(user.ID));
+            this.FilteredUsers.forEach(user => this.SelectedUserIds.delete(user.ID));
         }
         else {
             // Select all filtered users
-            this.filteredUsers.forEach(user => this.selectedUserIds.add(user.ID));
+            this.FilteredUsers.forEach(user => this.SelectedUserIds.add(user.ID));
         }
     }
-    toggleUserSelection(userId, event) {
+    /** @deprecated Use {@link ToggleSelectAll}. */
+    toggleSelectAll() {
+        return this.ToggleSelectAll();
+    }
+    ToggleUserSelection(userId, event) {
         if (event) {
             event.stopPropagation();
         }
-        if (this.selectedUserIds.has(userId)) {
-            this.selectedUserIds.delete(userId);
+        if (this.SelectedUserIds.has(userId)) {
+            this.SelectedUserIds.delete(userId);
         }
         else {
-            this.selectedUserIds.add(userId);
+            this.SelectedUserIds.add(userId);
         }
     }
+    /** @deprecated Use {@link ToggleUserSelection}. */
+    toggleUserSelection(userId, event) {
+        return this.ToggleUserSelection(userId, event);
+    }
+    IsUserSelected(userId) {
+        return this.SelectedUserIds.has(userId);
+    }
+    /** @deprecated Use {@link IsUserSelected}. */
     isUserSelected(userId) {
-        return this.selectedUserIds.has(userId);
+        return this.IsUserSelected(userId);
     }
+    ClearSelection() {
+        this.SelectedUserIds.clear();
+    }
+    /** @deprecated Use {@link ClearSelection}. */
     clearSelection() {
-        this.selectedUserIds.clear();
+        return this.ClearSelection();
     }
     // Bulk action methods
-    confirmBulkAction(action) {
-        if (!this.hasSelection)
+    ConfirmBulkAction(action) {
+        if (!this.HasSelection)
             return;
-        this.bulkActionType = action;
-        this.showBulkActionConfirm = true;
+        this.BulkActionType = action;
+        this.ShowBulkActionConfirm = true;
     }
+    /** @deprecated Use {@link ConfirmBulkAction}. */
+    confirmBulkAction(action) {
+        return this.ConfirmBulkAction(action);
+    }
+    CancelBulkAction() {
+        this.ShowBulkActionConfirm = false;
+        this.BulkActionType = null;
+    }
+    /** @deprecated Use {@link CancelBulkAction}. */
     cancelBulkAction() {
-        this.showBulkActionConfirm = false;
-        this.bulkActionType = null;
+        return this.CancelBulkAction();
     }
-    async executeBulkAction() {
-        if (!this.bulkActionType || !this.hasSelection)
+    async ExecuteBulkAction() {
+        if (!this.BulkActionType || !this.HasSelection)
             return;
         try {
             this.isLoading = true;
-            const selectedUsers = this.users.filter(user => this.selectedUserIds.has(user.ID));
-            switch (this.bulkActionType) {
+            const selectedUsers = this.Users.filter(user => this.SelectedUserIds.has(user.ID));
+            switch (this.BulkActionType) {
                 case 'enable':
                     await this.bulkSetUserStatus(selectedUsers, true);
                     break;
@@ -1254,10 +1515,10 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                     await this.bulkDeleteUsers(selectedUsers);
                     break;
             }
-            this.clearSelection();
-            this.showBulkActionConfirm = false;
-            this.bulkActionType = null;
-            await this.loadInitialData();
+            this.ClearSelection();
+            this.ShowBulkActionConfirm = false;
+            this.BulkActionType = null;
+            await this.LoadInitialData();
         }
         catch (error) {
             console.error('Bulk action failed:', error);
@@ -1273,6 +1534,10 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             });
         }
     }
+    /** @deprecated Use {@link ExecuteBulkAction}. */
+    async executeBulkAction() {
+        return this.ExecuteBulkAction();
+    }
     async bulkSetUserStatus(users, isActive) {
         if (users.length === 0)
             return;
@@ -1305,26 +1570,34 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
         }
     }
     // Bulk role assignment
-    openBulkRoleAssign() {
-        if (!this.hasSelection)
+    OpenBulkRoleAssign() {
+        if (!this.HasSelection)
             return;
-        this.bulkRoleId = '';
-        this.showBulkRoleAssign = true;
+        this.BulkRoleId = '';
+        this.ShowBulkRoleAssign = true;
+    }
+    /** @deprecated Use {@link OpenBulkRoleAssign}. */
+    openBulkRoleAssign() {
+        return this.OpenBulkRoleAssign();
     }
+    CancelBulkRoleAssign() {
+        this.ShowBulkRoleAssign = false;
+        this.BulkRoleId = '';
+    }
+    /** @deprecated Use {@link CancelBulkRoleAssign}. */
     cancelBulkRoleAssign() {
-        this.showBulkRoleAssign = false;
-        this.bulkRoleId = '';
+        return this.CancelBulkRoleAssign();
     }
-    async executeBulkRoleAssign() {
-        if (!this.bulkRoleId || !this.hasSelection)
+    async ExecuteBulkRoleAssign() {
+        if (!this.BulkRoleId || !this.HasSelection)
             return;
         try {
             this.isLoading = true;
-            const selectedUserIds = Array.from(this.selectedUserIds);
+            const selectedUserIds = Array.from(this.SelectedUserIds);
             // Collect only the users that don't already have the role
             const usersNeedingRole = selectedUserIds.filter(userId => {
                 const existingRoles = this.userRoleMap.get(userId) || [];
-                return !existingRoles.includes(this.bulkRoleId);
+                return !existingRoles.includes(this.BulkRoleId);
             });
             if (usersNeedingRole.length > 0) {
                 const tg = await this.metadata.CreateTransactionGroup();
@@ -1337,13 +1610,15 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 // (issue #4282) lives in `@memberjunction/core-entities-server`, which no browser package
                 // depends on, so it never registers here — it refuses on the server, during Submit().
                 //
-                // And today that refusal reaches the user NOWHERE. `ExecuteTransactionGroup` discards the
-                // refused row's `Save()` return, so the row never enrols in the SERVER's group either; an
-                // all-refused batch submits an empty group, whose `Submit()` returns true for having
-                // nothing to do, and the screen closes with no message at all. Verified end to end against
-                // a live server: a non-Owner assigning a role they do not hold is correctly refused (no row
-                // is written) and is reported as success. Tracked as issue #4309 — fixing it belongs in the
-                // resolver, which is the only layer that still knows which row was refused and why.
+                // That server refusal used to reach the user NOWHERE: `ExecuteTransactionGroup` discarded
+                // the refused row's `Save()` return, so the row never enrolled in the SERVER's group
+                // either; an all-refused batch submitted an empty group, whose `Submit()` returns true for
+                // having nothing to do, and the screen closed reporting success having written nothing.
+                // Issue #4309 fixed that in the resolver — the only layer that still knows which row was
+                // refused and why. It now reports the refusal, `Submit()` returns FALSE, and
+                // `GraphQLTransactionGroup.recordServerFailure` copies the server's reason onto each
+                // item's `BaseEntity.LatestResult`. The `!await tg.Submit()` branch below reads it back;
+                // that is the only place a server-side refusal surfaces on this screen.
                 //
                 // What this check DOES catch is a CLIENT-side refusal — a CheckPermissions denial or a
                 // field-rule failure — which really does return false here, leaving that row unenrolled.
@@ -1351,15 +1626,22 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 // Submit() returns true for having nothing to do, so the screen reported success having
                 // assigned nothing. That is the failure this guards; keep it.
                 const refusals = [];
+                const enrolled = [];
                 for (const userId of usersNeedingRole) {
                     const userRole = await this.metadata.GetEntityObject('MJ: User Roles');
                     userRole.NewRecord();
                     userRole.UserID = userId;
-                    userRole.RoleID = this.bulkRoleId;
+                    userRole.RoleID = this.BulkRoleId;
                     userRole.TransactionGroup = tg;
                     if (!await userRole.Save()) {
                         refusals.push(`${this.describeUser(userId)}: ${userRole.LatestResult?.CompleteMessage ?? 'unknown error'}`);
                     }
+                    else {
+                        // Kept so the SERVER's reason can be read back off it below. Without this the entity
+                        // goes out of scope at the end of the iteration and the reason #4309 puts on
+                        // LatestResult has nobody left to read it.
+                        enrolled.push({ Label: this.describeUser(userId), Entity: userRole });
+                    }
                 }
                 if (refusals.length > 0) {
                     // Nothing was written: the refused rows never enrolled, and the rest are still only
@@ -1367,13 +1649,18 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                     throw new Error(`Failed to assign roles — nothing was changed.\n${refusals.join('\n')}`);
                 }
                 if (!await tg.Submit()) {
-                    throw new Error('Failed to assign roles — all changes have been rolled back');
+                    // Every row enrolled, so this is a SERVER-side refusal (or a rollback). Since #4309 the
+                    // server says which row and why, and that reason is now on each entity's LatestResult.
+                    const reasons = ServerRefusalReasons(enrolled);
+                    throw new Error(reasons.length > 0
+                        ? `Failed to assign roles — all changes have been rolled back.\n${reasons.join('\n')}`
+                        : 'Failed to assign roles — all changes have been rolled back');
                 }
             }
-            this.clearSelection();
-            this.showBulkRoleAssign = false;
-            this.bulkRoleId = '';
-            await this.loadInitialData();
+            this.ClearSelection();
+            this.ShowBulkRoleAssign = false;
+            this.BulkRoleId = '';
+            await this.LoadInitialData();
         }
         catch (error) {
             console.error('Bulk role assignment failed:', error);
@@ -1389,9 +1676,13 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             });
         }
     }
-    getBulkActionMessage() {
-        const count = this.selectedCount;
-        switch (this.bulkActionType) {
+    /** @deprecated Use {@link ExecuteBulkRoleAssign}. */
+    async executeBulkRoleAssign() {
+        return this.ExecuteBulkRoleAssign();
+    }
+    GetBulkActionMessage() {
+        const count = this.SelectedCount;
+        switch (this.BulkActionType) {
             case 'enable':
                 return `Are you sure you want to enable ${count} user${count > 1 ? 's' : ''}?`;
             case 'disable':
@@ -1402,8 +1693,12 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 return '';
         }
     }
-    getBulkActionTitle() {
-        switch (this.bulkActionType) {
+    /** @deprecated Use {@link GetBulkActionMessage}. */
+    getBulkActionMessage() {
+        return this.GetBulkActionMessage();
+    }
+    GetBulkActionTitle() {
+        switch (this.BulkActionType) {
             case 'enable':
                 return 'Enable Users';
             case 'disable':
@@ -1414,9 +1709,13 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 return 'Confirm Action';
         }
     }
-    getBulkActionButtonText() {
-        const count = this.selectedCount;
-        switch (this.bulkActionType) {
+    /** @deprecated Use {@link GetBulkActionTitle}. */
+    getBulkActionTitle() {
+        return this.GetBulkActionTitle();
+    }
+    GetBulkActionButtonText() {
+        const count = this.SelectedCount;
+        switch (this.BulkActionType) {
             case 'enable':
                 return `Enable ${count} User${count > 1 ? 's' : ''}`;
             case 'disable':
@@ -1427,8 +1726,12 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
                 return 'Confirm';
         }
     }
+    /** @deprecated Use {@link GetBulkActionButtonText}. */
+    getBulkActionButtonText() {
+        return this.GetBulkActionButtonText();
+    }
     // Expansion methods
-    toggleUserExpansion(userId) {
+    ToggleUserExpansion(userId) {
         if (this.expandedUserIds.has(userId)) {
             this.expandedUserIds.delete(userId);
         }
@@ -1436,20 +1739,41 @@ let UserManagementComponent = class UserManagementComponent extends BaseDashboar
             this.expandedUserIds.add(userId);
         }
     }
-    isUserExpanded(userId) {
+    /** @deprecated Use {@link ToggleUserExpansion}. */
+    toggleUserExpansion(userId) {
+        return this.ToggleUserExpansion(userId);
+    }
+    IsUserExpanded(userId) {
         return this.expandedUserIds.has(userId);
     }
+    /** @deprecated Use {@link IsUserExpanded}. */
+    isUserExpanded(userId) {
+        return this.IsUserExpanded(userId);
+    }
     // Get roles for a specific user
+    GetUserRoles(userId) {
+        const roleIds = this.userRoleMap.get(userId);
+        if (!roleIds || roleIds.length === 0) {
+            return [];
+        }
+        // Normalize the user's role IDs into a Set rather than running a nested `.some(UUIDsEqual(...))`
+        // per role: UUIDsEqual's `===` fast path misses whenever the IDs differ, so every miss allocated
+        // two lowercased strings and the nested scan paid that roles x userRoles times. The template
+        // calls this TWICE per user row (the @if and the @for), on every change-detection pass. Filtering
+        // `this.Roles` still drives the result, so the rendered order is unchanged.
+        const assignedIds = new Set(roleIds.map(id => NormalizeUUID(id)));
+        return this.Roles.filter(role => assignedIds.has(NormalizeUUID(role.ID)));
+    }
+    /** @deprecated Use {@link GetUserRoles}. */
     getUserRoles(userId) {
-        const roleIds = this.userRoleMap.get(userId) || [];
-        return this.roles.filter(role => roleIds.some(id => UUIDsEqual(id, role.ID)));
+        return this.GetUserRoles(userId);
     }
     /**
      * Names a user for an error message. Falls back to the raw ID rather than to a placeholder so a
      * refusal for a user who has dropped out of the loaded page is still traceable.
      */
     describeUser(userId) {
-        const user = this.users.find(u => UUIDsEqual(u.ID, userId));
+        const user = this.Users.find(u => UUIDsEqual(u.ID, userId));
         return user?.Email ?? user?.Name ?? userId;
     }
     static ɵfac = function UserManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserManagementComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
@@ -1529,5 +1853,5 @@ export { 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            <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: 42 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserManagementComponent, { className: "UserManagementComponent", filePath: "src/lib/user-management/user-management.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=user-management.component.js.map