npm - @memberjunction/ng-explorer-settings - Versions diffs - 3.3.0 → 4.0.0 - Mend

@memberjunction/ng-explorer-settings 3.3.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/lib/role-management/role-management.component.js CHANGED Viewed

@@ -136,7 +136,7 @@ function RoleManagementComponent_Conditional_67_For_3_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(18, "button", 64);
     i0.ɵɵelement(19, "i", 65);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(20, RoleManagementComponent_Conditional_67_For_3_Conditional_20_Template, 40, 15, "div", 66);
+    i0.ɵɵconditionalCreate(20, RoleManagementComponent_Conditional_67_For_3_Conditional_20_Template, 40, 15, "div", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const role_r4 = ctx.$implicit;
@@ -177,7 +177,7 @@ function RoleManagementComponent_Conditional_67_Conditional_4_Template(rf, ctx)
 function RoleManagementComponent_Conditional_67_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38)(1, "div", 47);
     i0.ɵɵrepeaterCreate(2, RoleManagementComponent_Conditional_67_For_3_Template, 21, 16, "div", 48, _forTrack0);
-    i0.ɵɵtemplate(4, RoleManagementComponent_Conditional_67_Conditional_4_Template, 6, 0, "div", 49);
+    i0.ɵɵconditionalCreate(4, RoleManagementComponent_Conditional_67_Conditional_4_Template, 6, 0, "div", 49);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -221,7 +221,7 @@ function RoleManagementComponent_Conditional_69_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(17, "div", 93)(18, "button", 94);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_69_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteRole()); });
-    i0.ɵɵtemplate(19, RoleManagementComponent_Conditional_69_Conditional_19_Template, 2, 0)(20, RoleManagementComponent_Conditional_69_Conditional_20_Template, 2, 0);
+    i0.ɵɵconditionalCreate(19, RoleManagementComponent_Conditional_69_Conditional_19_Template, 2, 0)(20, RoleManagementComponent_Conditional_69_Conditional_20_Template, 2, 0);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(21, "button", 95);
     i0.ɵɵlistener("click", function RoleManagementComponent_Conditional_69_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
@@ -497,7 +497,7 @@ let RoleManagementComponent = class RoleManagementComponent extends BaseDashboar
         }
     }
     static ɵfac = function RoleManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RoleManagementComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoleManagementComponent, selectors: [["mj-role-management"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 71, vars: 24, consts: [[1, "role-management-container"], [1, "sticky-header"], ["role", "toolbar", "aria-label", "Role management actions", 1, "action-buttons"], ["aria-label", "Refresh role list", 1, "mj-btn", "mj-btn-secondary", "mj-btn-icon-mobile", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "btn-text"], ["aria-label", "Add new role", 1, "mj-btn", "mj-btn-primary", "mj-btn-icon-mobile", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["role", "region", "aria-label", "Role statistics", 1, "mj-grid-4"], [1, "mj-card"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-user-tag"], [1, "stat-content"], ["aria-label", "Total roles count", 1, "stat-value"], [1, "stat-label"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-system"], [1, "fa-solid", "fa-shield-halved"], ["aria-label", "System roles count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-custom"], ["aria-label", "Custom roles count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], ["aria-label", "Active roles count", 1, "stat-value"], ["role", "search", "aria-label", "Filter roles", 1, "filters-section"], [1, "filters-row"], [1, "mobile-search-container"], [1, "mj-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search roles by name or description...", "aria-label", "Search roles by name or description", 1, "mj-search-input", 3, "input", "value"], ["aria-label", "Open filters", 1, "filter-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "mj-filter-group"], ["id", "type-filter-label", 1, "mj-filter-label"], ["role", "group", "aria-labelledby", "type-filter-label", 1, "mj-filter-buttons"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "scrollable-content"], ["role", "status", "aria-live", "polite", "aria-busy", "true", 1, "loading-container"], ["role", "alert", "aria-live", "assertive", 1, "error-container"], [1, "content-area"], [3, "result", "data", "visible"], ["role", "presentation", 1, "modal-backdrop"], ["role", "presentation", 1, "filter-modal-backdrop"], ["text", "Loading roles...", "size", "medium"], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["aria-label", "Retry loading roles", 1, "mj-btn", "mj-btn-primary", 3, "click"], ["role", "list", "aria-label", "Roles list", 1, "roles-list"], ["role", "listitem", 1, "role-card", 3, "expanded"], ["role", "status", 1, "empty-state"], ["role", "listitem", 1, "role-card"], ["tabindex", "0", "role", "button", 1, "role-header", 3, "click", "keydown.enter", "keydown.space"], [1, "role-info"], ["aria-hidden", "true", 1, "role-icon-wrapper"], [1, "role-details"], [1, "role-name"], [1, "role-description"], [1, "role-meta"], [1, "role-type-badge"], [1, "role-actions", 3, "click"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "role-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "role-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-users"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "permissions-preview"], [1, "section-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-key"], [1, "permissions-note"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-tag", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["id", "delete-dialog-desc", 1, "modal-body"], [1, "text-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "mj-btn", "mj-btn-danger", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["role", "presentation", 1, "filter-modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "filter-modal-title", 1, "filter-modal", 3, "click"], [1, "filter-modal-header"], ["id", "filter-modal-title", 1, "filter-modal-title"], ["aria-label", "Close filters", 1, "filter-modal-close", 3, "click"], [1, "filter-modal-body"], [1, "filter-options-container"], [1, "filter-group"], [1, "filter-group-label"], [1, "filter-group-options"], [1, "filter-option"], ["type", "radio", "name", "type", "value", "all", 3, "change", "checked"], [1, "filter-option-label"], ["type", "radio", "name", "type", "value", "system", 3, "change", "checked"], ["type", "radio", "name", "type", "value", "custom", 3, "change", "checked"], [1, "filter-modal-footer"], [1, "mj-btn", "mj-btn-primary", 3, "click"]], template: function RoleManagementComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoleManagementComponent, selectors: [["mj-role-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 71, vars: 24, consts: [[1, "role-management-container"], [1, "sticky-header"], ["role", "toolbar", "aria-label", "Role management actions", 1, "action-buttons"], ["aria-label", "Refresh role list", 1, "mj-btn", "mj-btn-secondary", "mj-btn-icon-mobile", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "btn-text"], ["aria-label", "Add new role", 1, "mj-btn", "mj-btn-primary", "mj-btn-icon-mobile", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["role", "region", "aria-label", "Role statistics", 1, "mj-grid-4"], [1, "mj-card"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-user-tag"], [1, "stat-content"], ["aria-label", "Total roles count", 1, "stat-value"], [1, "stat-label"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-system"], [1, "fa-solid", "fa-shield-halved"], ["aria-label", "System roles count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-custom"], ["aria-label", "Custom roles count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], ["aria-label", "Active roles count", 1, "stat-value"], ["role", "search", "aria-label", "Filter roles", 1, "filters-section"], [1, "filters-row"], [1, "mobile-search-container"], [1, "mj-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search roles by name or description...", "aria-label", "Search roles by name or description", 1, "mj-search-input", 3, "input", "value"], ["aria-label", "Open filters", 1, "filter-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "mj-filter-group"], ["id", "type-filter-label", 1, "mj-filter-label"], ["role", "group", "aria-labelledby", "type-filter-label", 1, "mj-filter-buttons"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "scrollable-content"], ["role", "status", "aria-live", "polite", "aria-busy", "true", 1, "loading-container"], ["role", "alert", "aria-live", "assertive", 1, "error-container"], [1, "content-area"], [3, "result", "data", "visible"], ["role", "presentation", 1, "modal-backdrop"], ["role", "presentation", 1, "filter-modal-backdrop"], ["text", "Loading roles...", "size", "medium"], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["aria-label", "Retry loading roles", 1, "mj-btn", "mj-btn-primary", 3, "click"], ["role", "list", "aria-label", "Roles list", 1, "roles-list"], ["role", "listitem", 1, "role-card", 3, "expanded"], ["role", "status", 1, "empty-state"], ["role", "listitem", 1, "role-card"], ["tabindex", "0", "role", "button", 1, "role-header", 3, "click", "keydown.enter", "keydown.space"], [1, "role-info"], ["aria-hidden", "true", 1, "role-icon-wrapper"], [1, "role-details"], [1, "role-name"], [1, "role-description"], [1, "role-meta"], [1, "role-type-badge"], [1, "role-actions", 3, "click"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "role-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "role-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-users"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "permissions-preview"], [1, "section-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-key"], [1, "permissions-note"], ["aria-hidden", "true", 1, "fa-solid", "fa-user-tag", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-desc", 1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["id", "delete-dialog-desc", 1, "modal-body"], [1, "text-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "mj-btn", "mj-btn-danger", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["role", "presentation", 1, "filter-modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "filter-modal-title", 1, "filter-modal", 3, "click"], [1, "filter-modal-header"], ["id", "filter-modal-title", 1, "filter-modal-title"], ["aria-label", "Close filters", 1, "filter-modal-close", 3, "click"], [1, "filter-modal-body"], [1, "filter-options-container"], [1, "filter-group"], [1, "filter-group-label"], [1, "filter-group-options"], [1, "filter-option"], ["type", "radio", "name", "type", "value", "all", 3, "change", "checked"], [1, "filter-option-label"], ["type", "radio", "name", "type", "value", "system", 3, "change", "checked"], ["type", "radio", "name", "type", "value", "custom", 3, "change", "checked"], [1, "filter-modal-footer"], [1, "mj-btn", "mj-btn-primary", 3, "click"]], template: function RoleManagementComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
             i0.ɵɵlistener("click", function RoleManagementComponent_Template_button_click_3_listener() { return ctx.refreshData(); });
             i0.ɵɵelement(4, "i", 4);
@@ -573,12 +573,15 @@ let RoleManagementComponent = class RoleManagementComponent extends BaseDashboar
             i0.ɵɵtext(63, " Custom ");
             i0.ɵɵelementEnd()()()()()();
             i0.ɵɵelementStart(64, "div", 35);
-            i0.ɵɵtemplate(65, RoleManagementComponent_Conditional_65_Template, 2, 0, "div", 36)(66, RoleManagementComponent_Conditional_66_Template, 8, 1, "div", 37)(67, RoleManagementComponent_Conditional_67_Template, 5, 1, "div", 38);
+            i0.ɵɵconditionalCreate(65, RoleManagementComponent_Conditional_65_Template, 2, 0, "div", 36);
+            i0.ɵɵconditionalCreate(66, RoleManagementComponent_Conditional_66_Template, 8, 1, "div", 37);
+            i0.ɵɵconditionalCreate(67, RoleManagementComponent_Conditional_67_Template, 5, 1, "div", 38);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(68, "mj-role-dialog", 39);
             i0.ɵɵlistener("result", function RoleManagementComponent_Template_mj_role_dialog_result_68_listener($event) { return ctx.onRoleDialogResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(69, RoleManagementComponent_Conditional_69_Template, 23, 3, "div", 40)(70, RoleManagementComponent_Conditional_70_Template, 31, 9, "div", 41);
+            i0.ɵɵconditionalCreate(69, RoleManagementComponent_Conditional_69_Template, 23, 3, "div", 40);
+            i0.ɵɵconditionalCreate(70, RoleManagementComponent_Conditional_70_Template, 31, 9, "div", 41);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -624,7 +627,7 @@ RoleManagementComponent = __decorate([
 export { RoleManagementComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RoleManagementComponent, [{
         type: Component,
-        args: [{ selector: 'mj-role-management', template: "<div class=\"role-management-container\">\n  <!-- Sticky Header Section -->\n  <div class=\"sticky-header\">\n    <!-- Action Buttons -->\n    <div class=\"action-buttons\" role=\"toolbar\" aria-label=\"Role management actions\">\n      <button\n        class=\"mj-btn mj-btn-secondary mj-btn-icon-mobile\"\n        (click)=\"refreshData()\"\n        [disabled]=\"isLoading\"\n        aria-label=\"Refresh role list\"\n      >\n        <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\" aria-hidden=\"true\"></i>\n        <span class=\"btn-text\">Refresh</span>\n      </button>\n      <button\n        class=\"mj-btn mj-btn-primary mj-btn-icon-mobile\"\n        (click)=\"createNewRole()\"\n        aria-label=\"Add new role\"\n      >\n        <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n        <span class=\"btn-text\">Add Role</span>\n      </button>\n    </div>\n\n    <!-- Stats Cards -->\n    <div class=\"mj-grid-4\" role=\"region\" aria-label=\"Role statistics\">\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-total\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-user-tag\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Total roles count\">{{ stats.totalRoles }}</div>\n          <div class=\"stat-label\">Total Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-system\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"System roles count\">{{ stats.systemRoles }}</div>\n          <div class=\"stat-label\">System Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-custom\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-user-tag\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Custom roles count\">{{ stats.customRoles }}</div>\n          <div class=\"stat-label\">Custom Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-active\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Active roles count\">{{ stats.activeRoles }}</div>\n          <div class=\"stat-label\">Active Roles</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Filters Section -->\n    <div class=\"filters-section\" role=\"search\" aria-label=\"Filter roles\">\n      <div class=\"filters-row\">\n        <!-- Mobile: Search + Filter Button Container -->\n        <div class=\"mobile-search-container\">\n          <!-- Search - Enhanced prominent search box -->\n          <div class=\"mj-search\">\n            <i class=\"fa-solid fa-search mj-search-icon\" aria-hidden=\"true\"></i>\n            <input\n              type=\"text\"\n              class=\"mj-search-input\"\n              placeholder=\"Search roles by name or description...\"\n              (input)=\"onSearchChange($event)\"\n              [value]=\"filters$.value.search\"\n              aria-label=\"Search roles by name or description\"\n            />\n          </div>\n\n          <!-- Filter Button (Mobile Only) -->\n          <button\n            class=\"filter-button\"\n            (click)=\"showMobileFilters = true\"\n            aria-label=\"Open filters\"\n          >\n            <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n            <span>Filters</span>\n          </button>\n        </div>\n\n        <!-- Type Filter (Desktop) -->\n        <div class=\"mj-filter-group\">\n          <label class=\"mj-filter-label\" id=\"type-filter-label\">Type</label>\n          <div class=\"mj-filter-buttons\" role=\"group\" aria-labelledby=\"type-filter-label\">\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'all'\"\n              (click)=\"onTypeFilterChange('all')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'all'\"\n            >\n              All\n            </button>\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'system'\"\n              (click)=\"onTypeFilterChange('system')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'system'\"\n            >\n              System\n            </button>\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'custom'\"\n              (click)=\"onTypeFilterChange('custom')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'custom'\"\n            >\n              Custom\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div><!-- End Sticky Header -->\n\n  <!-- Scrollable Content Section -->\n  <div class=\"scrollable-content\">\n    <!-- Loading State -->\n    @if (isLoading) {\n      <div class=\"loading-container\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n        <mj-loading text=\"Loading roles...\" 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=\"mj-btn mj-btn-primary\" (click)=\"loadInitialData()\" aria-label=\"Retry loading roles\">\n            <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n            Try Again\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Content Area -->\n    @if (!isLoading && !error) {\n      <div class=\"content-area\">\n        <div class=\"roles-list\" role=\"list\" aria-label=\"Roles list\">\n          @for (role of filteredRoles; track role.ID) {\n            <div\n              class=\"role-card\"\n              [class.expanded]=\"isRoleExpanded(role.ID)\"\n              role=\"listitem\"\n              [attr.aria-expanded]=\"isRoleExpanded(role.ID)\"\n            >\n              <div\n                class=\"role-header\"\n                (click)=\"toggleRoleExpansion(role.ID)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"toggleRoleExpansion(role.ID)\"\n                (keydown.space)=\"toggleRoleExpansion(role.ID); $event.preventDefault()\"\n                role=\"button\"\n                [attr.aria-label]=\"'Toggle details for ' + role.Name\"\n              >\n                <div class=\"role-info\">\n                  <div class=\"role-icon-wrapper\" aria-hidden=\"true\">\n                    <i [class]=\"'fa-solid ' + getRoleIcon(role)\"></i>\n                  </div>\n                  <div class=\"role-details\">\n                    <h3 class=\"role-name\">{{ role.Name }}</h3>\n                    <p class=\"role-description\">{{ role.Description || 'No description available' }}</p>\n                  </div>\n                </div>\n\n                <div class=\"role-meta\">\n                  <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                    {{ getRoleTypeLabel(role) }}\n                  </span>\n                  <div class=\"role-actions\" (click)=\"$event.stopPropagation()\">\n                    <button\n                      class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                      (click)=\"editRole(role)\"\n                      title=\"Edit\"\n                      [attr.aria-label]=\"'Edit ' + role.Name\"\n                      [disabled]=\"isSystemRole(role)\"\n                    >\n                      <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                      (click)=\"confirmDeleteRole(role)\"\n                      title=\"Delete\"\n                      [attr.aria-label]=\"'Delete ' + role.Name\"\n                      [disabled]=\"isSystemRole(role)\"\n                    >\n                      <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                  <button class=\"expand-btn\" aria-label=\"Toggle details\">\n                    <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n\n              @if (isRoleExpanded(role.ID)) {\n                <div class=\"role-content\">\n                  <!-- Mobile-only actions bar -->\n                  <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                      {{ getRoleTypeLabel(role) }}\n                    </span>\n                    <div class=\"mobile-action-buttons\">\n                      <button\n                        class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                        (click)=\"editRole(role)\"\n                        title=\"Edit\"\n                        [attr.aria-label]=\"'Edit ' + role.Name\"\n                        [disabled]=\"isSystemRole(role)\"\n                      >\n                        <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Edit</span>\n                      </button>\n                      <button\n                        class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                        (click)=\"confirmDeleteRole(role)\"\n                        title=\"Delete\"\n                        [attr.aria-label]=\"'Delete ' + role.Name\"\n                        [disabled]=\"isSystemRole(role)\"\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                  <div class=\"role-stats\">\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-users\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Users:</span>\n                      <span class=\"stat-value\">0</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\">{{ role.__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\">{{ role.__mj_UpdatedAt | date:'short' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"permissions-preview\">\n                    <h4 class=\"section-title\">\n                      <i class=\"fa-solid fa-key\" aria-hidden=\"true\"></i>\n                      Permissions Preview\n                    </h4>\n                    <p class=\"permissions-note\">Full permission management available in the Permissions tab</p>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredRoles.length === 0) {\n            <div class=\"empty-state\" role=\"status\">\n              <i class=\"fa-solid fa-user-tag empty-icon\" aria-hidden=\"true\"></i>\n              <p class=\"empty-text\">No roles found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or create a new role</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div><!-- End Scrollable Content -->\n\n  <!-- Role Create/Edit Dialog -->\n  <mj-role-dialog\n    [data]=\"roleDialogData\"\n    [visible]=\"showRoleDialog\"\n    (result)=\"onRoleDialogResult($event)\">\n  </mj-role-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedRole) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"showDeleteConfirm = false\"\n      role=\"presentation\"\n    >\n      <div\n        class=\"modal-dialog\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"delete-dialog-title\"\n        aria-describedby=\"delete-dialog-desc\"\n      >\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 the role <strong>{{ selectedRole.Name }}</strong>?</p>\n          <p class=\"text-warning\">\n            <i class=\"fa-solid fa-warning\" aria-hidden=\"true\"></i>\n            This will affect all users assigned to this role.\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n          <button class=\"mj-btn mj-btn-danger\" (click)=\"deleteRole()\" [disabled]=\"isLoading\">\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Deleting...\n            } @else {\n              <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n              Delete Role\n            }\n          </button>\n          <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Mobile Filter Modal -->\n  @if (showMobileFilters) {\n    <div\n      class=\"filter-modal-backdrop\"\n      (click)=\"showMobileFilters = false\"\n      role=\"presentation\"\n    >\n      <div\n        class=\"filter-modal\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"filter-modal-title\"\n      >\n        <div class=\"filter-modal-header\">\n          <h3 class=\"filter-modal-title\" id=\"filter-modal-title\">\n            <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n            Filters\n          </h3>\n          <button\n            class=\"filter-modal-close\"\n            (click)=\"showMobileFilters = false\"\n            aria-label=\"Close filters\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n\n        <div class=\"filter-modal-body\">\n          <div class=\"filter-options-container\">\n            <!-- Type Filter -->\n            <div class=\"filter-group\">\n              <h4 class=\"filter-group-label\">Type</h4>\n              <div class=\"filter-group-options\">\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'all'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"all\"\n                    [checked]=\"filters$.value.type === 'all'\"\n                    (change)=\"onTypeFilterChange('all')\"\n                  />\n                  <span class=\"filter-option-label\">All Roles</span>\n                </label>\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'system'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"system\"\n                    [checked]=\"filters$.value.type === 'system'\"\n                    (change)=\"onTypeFilterChange('system')\"\n                  />\n                  <span class=\"filter-option-label\">System Roles</span>\n                </label>\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'custom'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"custom\"\n                    [checked]=\"filters$.value.type === 'custom'\"\n                    (change)=\"onTypeFilterChange('custom')\"\n                  />\n                  <span class=\"filter-option-label\">Custom Roles</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"filter-modal-footer\">\n          <button\n            class=\"mj-btn mj-btn-primary\"\n            (click)=\"showMobileFilters = false\"\n          >\n            Apply Filters\n          </button>\n          <button\n            class=\"mj-btn mj-btn-secondary\"\n            (click)=\"showMobileFilters = false\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* =============================================================================\n   Role Management Component - Material Design 3\n   Custom Color Palette Implementation\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Custom Color Palette - MD3 Color Roles\n   ----------------------------------------------------------------------------- */\n:host {\n  /* Primary - Deep Blue */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  /* Secondary - Light Orange */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  /* Tertiary - Light Green */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  /* Error - Red */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  /* Surface Colors */\n  --md-surface: #FAFCFF;\n  --md-surface-dim: #D9DADE;\n  --md-surface-bright: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  /* Elevation Shadows */\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* Corner Radii */\n  --md-corner-none: 0;\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\n\n  /* State Layers */\n  --md-state-hover: 0.08;\n  --md-state-focus: 0.12;\n  --md-state-pressed: 0.12;\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Container & Layout\n   ----------------------------------------------------------------------------- */\n.role-management-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  background: var(--md-surface);\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--md-surface);\n  border-bottom: 1px solid var(--md-outline-variant);\n  box-shadow: var(--md-elevation-1);\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(--md-surface-container-lowest);\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\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(--md-surface);\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\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.75rem;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--md-surface);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1.25rem 1.5rem;\n    gap: 1rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1.25rem;\n  }\n}\n\n.mj-card {\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-medium);\n  padding: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--md-outline-variant);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1.125rem 1.25rem;\n  }\n}\n\n/* Stat Icon Styles */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-corner-medium);\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/* Total Roles - Primary */\n.stat-icon-total {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\n\n/* System Roles - Secondary (Orange) */\n.stat-icon-system {\n  background: var(--md-secondary-container);\n  color: #B5751A;\n}\n\n/* Custom Roles - Tertiary (Green) */\n.stat-icon-custom {\n  background: var(--md-tertiary-container);\n  color: var(--md-tertiary);\n}\n\n/* Active Roles - Primary */\n.stat-icon-active {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\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(--md-on-surface);\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(--md-on-surface-variant);\n  margin-top: 0.25rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\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(--md-surface-container-low);\n  margin: 0 1rem 1rem 1rem;\n  padding: 1rem;\n  border-radius: var(--md-corner-medium);\n  border: 1px solid var(--md-outline-variant);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1.25rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.25rem;\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/* Mobile Search Container */\n.mobile-search-container {\n  display: flex;\n  gap: 0.75rem;\n  align-items: center;\n  flex: 1;\n  min-width: 200px;\n}\n\n/* Search Input */\n.mj-search {\n  flex: 1;\n  min-width: 200px;\n  position: relative;\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(--md-on-surface-variant);\n  font-size: 1rem;\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(--md-outline-variant);\n  border-radius: var(--md-corner-full);\n  font-size: 1rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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(--md-on-surface-variant);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-lowest);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--md-surface);\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input:focus {\n    box-shadow: var(--md-elevation-1), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  }\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--md-primary);\n}\n\n/* Filter Group */\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-group .mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--md-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-group .mj-filter-buttons {\n  display: flex;\n  background: var(--md-surface-container);\n  border-radius: var(--md-corner-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n.mj-filter-buttons .mj-btn-ghost {\n  border-radius: var(--md-corner-full);\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all 0.2s ease;\n}\n\n.mj-filter-buttons .mj-btn-ghost:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.mj-filter-buttons .mj-btn-primary {\n  background-color: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-filter-buttons .mj-btn-primary:hover:not(:disabled) {\n  background-color: #3395C8;\n}\n\n/* -----------------------------------------------------------------------------\n   Button System\n   ----------------------------------------------------------------------------- */\n.mj-btn {\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  letter-spacing: 0.02em;\n  border: none;\n  border-radius: var(--md-corner-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n}\n\n.mj-btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n/* Primary Button - Dark to Light on hover */\n.mj-btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.98);\n  box-shadow: var(--md-elevation-1);\n}\n\n/* Secondary Button - Light to Dark on hover */\n.mj-btn-secondary {\n  background: var(--md-surface);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\n}\n\n/* Ghost Button - Light to Dark on hover */\n.mj-btn-ghost {\n  background: transparent;\n  color: var(--md-on-surface-variant);\n}\n\n.mj-btn-ghost:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.mj-btn-ghost:active:not(:disabled) {\n  background: #005A8C;\n}\n\n/* Danger Button - Dark to Light on hover */\n.mj-btn-danger {\n  background: var(--md-error);\n  color: var(--md-on-error);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-danger:hover:not(:disabled) {\n  background: #E57373;\n  box-shadow: var(--md-elevation-2);\n}\n\n.mj-btn-danger:active:not(:disabled) {\n  background: #EF9A9A;\n  transform: scale(0.98);\n}\n\n/* Small Button */\n.mj-btn-sm {\n  padding: 0.5rem 0.875rem;\n  font-size: 0.8125rem;\n  min-height: 36px;\n}\n\n/* Icon-only Button */\n.mj-btn-icon-only {\n  padding: 0.625rem;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n/* Mobile Icon Button */\n.mj-btn-icon-mobile {\n  gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile .btn-text {\n  display: inline;\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--md-surface);\n  border-radius: var(--md-corner-large);\n  box-shadow: var(--md-elevation-1);\n  padding: 1.25rem;\n  border: 1px solid var(--md-outline-variant);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Roles List\n   ----------------------------------------------------------------------------- */\n.roles-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Role Card\n   ----------------------------------------------------------------------------- */\n.role-card {\n  background: var(--md-surface);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-large);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.role-card:hover {\n  box-shadow: var(--md-elevation-2);\n  border-color: var(--md-primary);\n}\n\n.role-card.expanded {\n  box-shadow: var(--md-elevation-3);\n  border-color: var(--md-primary);\n}\n\n.role-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n.role-header {\n  padding: 1.25rem 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: var(--md-surface-container-lowest);\n  transition: background-color 0.2s ease;\n}\n\n.role-header:hover {\n  background: var(--md-surface-container-low);\n}\n\n.role-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.role-icon-wrapper {\n  width: 52px;\n  height: 52px;\n  border-radius: var(--md-corner-medium);\n  background: var(--md-primary-container);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--md-primary);\n  font-size: 1.375rem;\n  flex-shrink: 0;\n}\n\n.role-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-details .role-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.25rem 0;\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n.role-details .role-description {\n  font-size: 0.875rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n  .role-details .role-description {\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n  }\n}\n\n.role-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Role Type Badge\n   ----------------------------------------------------------------------------- */\n.role-type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--md-corner-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* System Badge - Orange (Secondary) */\n.role-type-badge.badge-system {\n  background: var(--md-secondary-container);\n  color: #7A4D0C;\n  border: 1px solid var(--md-secondary);\n}\n\n/* Custom Badge - Green (Tertiary) */\n.role-type-badge.badge-custom {\n  background: var(--md-tertiary-container);\n  color: #1B5E20;\n  border: 1px solid var(--md-tertiary);\n}\n\n/* -----------------------------------------------------------------------------\n   Role Actions\n   ----------------------------------------------------------------------------- */\n.role-actions {\n  display: flex;\n  gap: 0.375rem;\n}\n\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--md-corner-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.expand-btn:hover {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Role Content (Expanded)\n   ----------------------------------------------------------------------------- */\n.role-content {\n  padding: 1.5rem;\n  background: var(--md-surface-container-lowest);\n  border-top: 1px solid var(--md-outline-variant);\n  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-actions-bar {\n  display: none;\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.role-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.role-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.9375rem;\n  padding: 0.5rem 1rem;\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-small);\n}\n\n.role-stats .stat-item i {\n  color: var(--md-primary);\n  font-size: 1rem;\n}\n\n.role-stats .stat-item .stat-label {\n  color: var(--md-on-surface-variant);\n}\n\n.role-stats .stat-item .stat-value {\n  color: var(--md-on-surface);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Permissions Preview\n   ----------------------------------------------------------------------------- */\n.permissions-preview {\n  padding: 1.25rem;\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-medium);\n  border: 1px solid var(--md-outline-variant);\n}\n\n.permissions-preview .section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.5rem 0;\n}\n\n.permissions-preview .section-title i {\n  color: var(--md-primary);\n  font-size: 1.125rem;\n}\n\n.permissions-preview .permissions-note {\n  font-size: 0.9375rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\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(--md-outline-variant);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--md-on-surface-variant);\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(--md-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--md-on-surface);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.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: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 1rem;\n}\n\n.modal-dialog {\n  background: var(--md-surface);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0.4, 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(--md-outline-variant);\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(--md-on-surface);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-corner-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(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--md-on-surface);\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-body .text-warning {\n  color: var(--md-secondary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: var(--md-secondary-container);\n  border-radius: var(--md-corner-small);\n  font-weight: 500;\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(--md-outline-variant);\n  background: var(--md-surface-container-low);\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--md-error);\n}\n\n.text-warning {\n  color: var(--md-secondary);\n}\n\n/* -----------------------------------------------------------------------------\n   Large Desktop (1440px+)\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .role-management-container {\n    max-width: 1920px;\n    margin: 0 auto;\n  }\n\n  .action-buttons {\n    padding: 1rem 2rem;\n  }\n\n  .mj-grid-4 {\n    padding: 0 2rem 1.25rem 2rem;\n    gap: 1.5rem;\n  }\n\n  .filters-section {\n    margin: 0 2rem 1.25rem 2rem;\n    padding: 1.25rem 1.5rem;\n  }\n\n  .content-area {\n    padding: 2rem;\n  }\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/* -----------------------------------------------------------------------------\n   Focus Indicators (Accessibility)\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible,\n.mj-btn:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\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(--md-outline-variant);\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  border-radius: var(--md-corner-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(--md-primary);\n  background: var(--md-surface-container-lowest);\n}\n\n.filter-button:active {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile)\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(--md-surface);\n  border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n  box-shadow: var(--md-elevation-5);\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(--md-outline-variant);\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(--md-on-surface);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--md-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(--md-on-surface-variant);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-corner-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(--md-primary);\n  color: var(--md-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(--md-outline-variant);\n  background: var(--md-surface-container-low);\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(--md-on-surface);\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(--md-surface-container-low);\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\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(--md-primary);\n  background: var(--md-surface-container);\n}\n\n.filter-option.selected {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  color: var(--md-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(--md-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(--md-on-surface);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--md-primary);\n  font-weight: 600;\n}\n\n/* Animations */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\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   Reduced Motion (Accessibility)\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/* -----------------------------------------------------------------------------\n   Mobile (< 640px)\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  .sticky-header {\n    padding: 0;\n  }\n\n  .action-buttons {\n    padding: 0.5rem 0.75rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .mj-btn-icon-mobile {\n    padding: 0.5rem 0.75rem;\n    min-height: 40px;\n    gap: 0;\n  }\n\n  .mj-btn-icon-mobile .btn-text {\n    display: none;\n  }\n\n  .mj-btn-icon-mobile i {\n    font-size: 1.125rem;\n  }\n\n  .mj-grid-4 {\n    display: none !important;\n  }\n\n  .filters-section {\n    margin: 0 0.5rem 0.5rem 0.5rem;\n    padding: 0.75rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .filters-row {\n    gap: 0.75rem;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  /* Mobile search container */\n  .mobile-search-container {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    width: 100%;\n  }\n\n  .mj-search {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .mj-search .mj-search-input {\n    padding: 0.75rem 1rem 0.75rem 2.5rem;\n    min-height: 44px;\n    font-size: 1rem;\n    border-width: 1.5px;\n  }\n\n  .mj-search .mj-search-icon {\n    left: 0.875rem;\n    font-size: 1rem;\n  }\n\n  /* Hide filter groups on mobile - they go in modal */\n  .mj-filter-group {\n    display: none !important;\n  }\n\n  /* Show filter button on mobile */\n  .filter-button {\n    display: inline-flex !important;\n    flex-shrink: 0;\n  }\n\n  .scrollable-content {\n    padding: 0.75rem;\n  }\n\n  .content-area {\n    padding: 0.75rem;\n    border-radius: var(--md-corner-medium);\n  }\n\n  .modal-backdrop {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog {\n    border-radius: var(--md-corner-large);\n    max-height: 95vh;\n  }\n\n  .modal-footer {\n    flex-direction: column;\n  }\n\n  .modal-footer .mj-btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .roles-list {\n    gap: 0.75rem;\n  }\n\n  .role-card {\n    border-radius: var(--md-corner-medium);\n    overflow: hidden;\n  }\n\n  .role-header {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 1rem;\n  }\n\n  .role-info {\n    flex: 1;\n    min-width: 0;\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 0.875rem;\n  }\n\n  .role-icon-wrapper {\n    width: 40px;\n    height: 40px;\n    font-size: 1rem;\n    flex-shrink: 0;\n  }\n\n  .role-details {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .role-details .role-name {\n    font-size: 1rem;\n    line-height: 1.3;\n    margin-bottom: 0.125rem;\n  }\n\n  .role-details .role-description {\n    font-size: 0.8125rem;\n    -webkit-line-clamp: 1;\n    line-clamp: 1;\n  }\n\n  .role-meta {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding-top: 0;\n    border-top: none;\n    width: auto;\n  }\n\n  .role-meta .role-type-badge {\n    display: none;\n  }\n\n  .role-meta .role-actions {\n    display: none;\n  }\n\n  .expand-btn {\n    flex-shrink: 0;\n    min-width: 40px;\n    min-height: 40px;\n    padding: 0.5rem;\n  }\n\n  .expand-btn i {\n    font-size: 1rem;\n  }\n\n  .mobile-actions-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 0.875rem;\n    background: var(--md-surface-container-low);\n    border-radius: var(--md-corner-medium);\n    margin-bottom: 1rem;\n  }\n\n  .mobile-actions-bar .role-type-badge {\n    padding: 0.375rem 0.75rem;\n    font-size: 0.6875rem;\n  }\n\n  .mobile-action-buttons {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .mobile-action-buttons .mj-btn-sm {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.5rem 0.875rem;\n    min-height: 36px;\n  }\n\n  .mobile-action-buttons .mj-btn-sm i {\n    font-size: 0.875rem;\n  }\n\n  .mobile-action-buttons .btn-label {\n    font-size: 0.8125rem;\n    font-weight: 500;\n  }\n\n  .role-stats {\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .role-content {\n    padding: 1rem;\n  }\n\n  .permissions-preview {\n    padding: 1rem;\n  }\n\n  .empty-state {\n    padding: 3rem 1.5rem;\n  }\n\n  .empty-state .empty-icon {\n    font-size: 3rem;\n  }\n\n  .loading-container {\n    padding: 3rem 1.5rem;\n  }\n}\n\n/* Small Mobile (< 375px) */\n@media (max-width: 374px) {\n  .action-buttons {\n    padding: 0.375rem 0.5rem;\n  }\n\n  .filters-section {\n    margin: 0 0.375rem 0.375rem 0.375rem;\n    padding: 0.5rem;\n  }\n\n  .mobile-search-container {\n    gap: 0.375rem;\n  }\n\n  .filter-button {\n    padding: 0.625rem;\n    min-width: 40px;\n  }\n\n  .filter-button span {\n    display: none;\n  }\n\n  .filter-modal-header {\n    padding: 1rem 1.25rem;\n  }\n\n  .filter-modal-body {\n    padding: 1.25rem;\n  }\n\n  .filter-modal-footer {\n    padding: 1rem 1.25rem;\n  }\n\n  .scrollable-content {\n    padding: 0.5rem;\n  }\n\n  .content-area {\n    padding: 0.5rem;\n  }\n\n  .role-header {\n    padding: 0.75rem;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-role-management', template: "<div class=\"role-management-container\">\n  <!-- Sticky Header Section -->\n  <div class=\"sticky-header\">\n    <!-- Action Buttons -->\n    <div class=\"action-buttons\" role=\"toolbar\" aria-label=\"Role management actions\">\n      <button\n        class=\"mj-btn mj-btn-secondary mj-btn-icon-mobile\"\n        (click)=\"refreshData()\"\n        [disabled]=\"isLoading\"\n        aria-label=\"Refresh role list\"\n      >\n        <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\" aria-hidden=\"true\"></i>\n        <span class=\"btn-text\">Refresh</span>\n      </button>\n      <button\n        class=\"mj-btn mj-btn-primary mj-btn-icon-mobile\"\n        (click)=\"createNewRole()\"\n        aria-label=\"Add new role\"\n      >\n        <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n        <span class=\"btn-text\">Add Role</span>\n      </button>\n    </div>\n\n    <!-- Stats Cards -->\n    <div class=\"mj-grid-4\" role=\"region\" aria-label=\"Role statistics\">\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-total\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-user-tag\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Total roles count\">{{ stats.totalRoles }}</div>\n          <div class=\"stat-label\">Total Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-system\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"System roles count\">{{ stats.systemRoles }}</div>\n          <div class=\"stat-label\">System Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-custom\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-user-tag\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Custom roles count\">{{ stats.customRoles }}</div>\n          <div class=\"stat-label\">Custom Roles</div>\n        </div>\n      </div>\n\n      <div class=\"mj-card\">\n        <div class=\"stat-icon stat-icon-active\" aria-hidden=\"true\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\" aria-label=\"Active roles count\">{{ stats.activeRoles }}</div>\n          <div class=\"stat-label\">Active Roles</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Filters Section -->\n    <div class=\"filters-section\" role=\"search\" aria-label=\"Filter roles\">\n      <div class=\"filters-row\">\n        <!-- Mobile: Search + Filter Button Container -->\n        <div class=\"mobile-search-container\">\n          <!-- Search - Enhanced prominent search box -->\n          <div class=\"mj-search\">\n            <i class=\"fa-solid fa-search mj-search-icon\" aria-hidden=\"true\"></i>\n            <input\n              type=\"text\"\n              class=\"mj-search-input\"\n              placeholder=\"Search roles by name or description...\"\n              (input)=\"onSearchChange($event)\"\n              [value]=\"filters$.value.search\"\n              aria-label=\"Search roles by name or description\"\n            />\n          </div>\n\n          <!-- Filter Button (Mobile Only) -->\n          <button\n            class=\"filter-button\"\n            (click)=\"showMobileFilters = true\"\n            aria-label=\"Open filters\"\n          >\n            <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n            <span>Filters</span>\n          </button>\n        </div>\n\n        <!-- Type Filter (Desktop) -->\n        <div class=\"mj-filter-group\">\n          <label class=\"mj-filter-label\" id=\"type-filter-label\">Type</label>\n          <div class=\"mj-filter-buttons\" role=\"group\" aria-labelledby=\"type-filter-label\">\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'all'\"\n              (click)=\"onTypeFilterChange('all')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'all'\"\n            >\n              All\n            </button>\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'system'\"\n              (click)=\"onTypeFilterChange('system')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'system'\"\n            >\n              System\n            </button>\n            <button\n              class=\"mj-btn mj-btn-ghost\"\n              [class.mj-btn-primary]=\"filters$.value.type === 'custom'\"\n              (click)=\"onTypeFilterChange('custom')\"\n              [attr.aria-pressed]=\"filters$.value.type === 'custom'\"\n            >\n              Custom\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div><!-- End Sticky Header -->\n\n  <!-- Scrollable Content Section -->\n  <div class=\"scrollable-content\">\n    <!-- Loading State -->\n    @if (isLoading) {\n      <div class=\"loading-container\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n        <mj-loading text=\"Loading roles...\" 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=\"mj-btn mj-btn-primary\" (click)=\"loadInitialData()\" aria-label=\"Retry loading roles\">\n            <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n            Try Again\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Content Area -->\n    @if (!isLoading && !error) {\n      <div class=\"content-area\">\n        <div class=\"roles-list\" role=\"list\" aria-label=\"Roles list\">\n          @for (role of filteredRoles; track role.ID) {\n            <div\n              class=\"role-card\"\n              [class.expanded]=\"isRoleExpanded(role.ID)\"\n              role=\"listitem\"\n              [attr.aria-expanded]=\"isRoleExpanded(role.ID)\"\n            >\n              <div\n                class=\"role-header\"\n                (click)=\"toggleRoleExpansion(role.ID)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"toggleRoleExpansion(role.ID)\"\n                (keydown.space)=\"toggleRoleExpansion(role.ID); $event.preventDefault()\"\n                role=\"button\"\n                [attr.aria-label]=\"'Toggle details for ' + role.Name\"\n              >\n                <div class=\"role-info\">\n                  <div class=\"role-icon-wrapper\" aria-hidden=\"true\">\n                    <i [class]=\"'fa-solid ' + getRoleIcon(role)\"></i>\n                  </div>\n                  <div class=\"role-details\">\n                    <h3 class=\"role-name\">{{ role.Name }}</h3>\n                    <p class=\"role-description\">{{ role.Description || 'No description available' }}</p>\n                  </div>\n                </div>\n\n                <div class=\"role-meta\">\n                  <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                    {{ getRoleTypeLabel(role) }}\n                  </span>\n                  <div class=\"role-actions\" (click)=\"$event.stopPropagation()\">\n                    <button\n                      class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                      (click)=\"editRole(role)\"\n                      title=\"Edit\"\n                      [attr.aria-label]=\"'Edit ' + role.Name\"\n                      [disabled]=\"isSystemRole(role)\"\n                    >\n                      <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                    </button>\n                    <button\n                      class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                      (click)=\"confirmDeleteRole(role)\"\n                      title=\"Delete\"\n                      [attr.aria-label]=\"'Delete ' + role.Name\"\n                      [disabled]=\"isSystemRole(role)\"\n                    >\n                      <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                  <button class=\"expand-btn\" aria-label=\"Toggle details\">\n                    <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n\n              @if (isRoleExpanded(role.ID)) {\n                <div class=\"role-content\">\n                  <!-- Mobile-only actions bar -->\n                  <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"role-type-badge\" [class]=\"getRoleTypeClass(role)\">\n                      {{ getRoleTypeLabel(role) }}\n                    </span>\n                    <div class=\"mobile-action-buttons\">\n                      <button\n                        class=\"mj-btn mj-btn-ghost mj-btn-sm\"\n                        (click)=\"editRole(role)\"\n                        title=\"Edit\"\n                        [attr.aria-label]=\"'Edit ' + role.Name\"\n                        [disabled]=\"isSystemRole(role)\"\n                      >\n                        <i class=\"fa-solid fa-edit\" aria-hidden=\"true\"></i>\n                        <span class=\"btn-label\">Edit</span>\n                      </button>\n                      <button\n                        class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\n                        (click)=\"confirmDeleteRole(role)\"\n                        title=\"Delete\"\n                        [attr.aria-label]=\"'Delete ' + role.Name\"\n                        [disabled]=\"isSystemRole(role)\"\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                  <div class=\"role-stats\">\n                    <div class=\"stat-item\">\n                      <i class=\"fa-solid fa-users\" aria-hidden=\"true\"></i>\n                      <span class=\"stat-label\">Users:</span>\n                      <span class=\"stat-value\">0</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\">{{ role.__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\">{{ role.__mj_UpdatedAt | date:'short' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"permissions-preview\">\n                    <h4 class=\"section-title\">\n                      <i class=\"fa-solid fa-key\" aria-hidden=\"true\"></i>\n                      Permissions Preview\n                    </h4>\n                    <p class=\"permissions-note\">Full permission management available in the Permissions tab</p>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredRoles.length === 0) {\n            <div class=\"empty-state\" role=\"status\">\n              <i class=\"fa-solid fa-user-tag empty-icon\" aria-hidden=\"true\"></i>\n              <p class=\"empty-text\">No roles found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or create a new role</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div><!-- End Scrollable Content -->\n\n  <!-- Role Create/Edit Dialog -->\n  <mj-role-dialog\n    [data]=\"roleDialogData\"\n    [visible]=\"showRoleDialog\"\n    (result)=\"onRoleDialogResult($event)\">\n  </mj-role-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedRole) {\n    <div\n      class=\"modal-backdrop\"\n      (click)=\"showDeleteConfirm = false\"\n      role=\"presentation\"\n    >\n      <div\n        class=\"modal-dialog\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"delete-dialog-title\"\n        aria-describedby=\"delete-dialog-desc\"\n      >\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 the role <strong>{{ selectedRole.Name }}</strong>?</p>\n          <p class=\"text-warning\">\n            <i class=\"fa-solid fa-warning\" aria-hidden=\"true\"></i>\n            This will affect all users assigned to this role.\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n          <button class=\"mj-btn mj-btn-danger\" (click)=\"deleteRole()\" [disabled]=\"isLoading\">\n            @if (isLoading) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n              Deleting...\n            } @else {\n              <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n              Delete Role\n            }\n          </button>\n          <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Mobile Filter Modal -->\n  @if (showMobileFilters) {\n    <div\n      class=\"filter-modal-backdrop\"\n      (click)=\"showMobileFilters = false\"\n      role=\"presentation\"\n    >\n      <div\n        class=\"filter-modal\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"filter-modal-title\"\n      >\n        <div class=\"filter-modal-header\">\n          <h3 class=\"filter-modal-title\" id=\"filter-modal-title\">\n            <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n            Filters\n          </h3>\n          <button\n            class=\"filter-modal-close\"\n            (click)=\"showMobileFilters = false\"\n            aria-label=\"Close filters\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n\n        <div class=\"filter-modal-body\">\n          <div class=\"filter-options-container\">\n            <!-- Type Filter -->\n            <div class=\"filter-group\">\n              <h4 class=\"filter-group-label\">Type</h4>\n              <div class=\"filter-group-options\">\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'all'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"all\"\n                    [checked]=\"filters$.value.type === 'all'\"\n                    (change)=\"onTypeFilterChange('all')\"\n                  />\n                  <span class=\"filter-option-label\">All Roles</span>\n                </label>\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'system'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"system\"\n                    [checked]=\"filters$.value.type === 'system'\"\n                    (change)=\"onTypeFilterChange('system')\"\n                  />\n                  <span class=\"filter-option-label\">System Roles</span>\n                </label>\n                <label\n                  class=\"filter-option\"\n                  [class.selected]=\"filters$.value.type === 'custom'\"\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"type\"\n                    value=\"custom\"\n                    [checked]=\"filters$.value.type === 'custom'\"\n                    (change)=\"onTypeFilterChange('custom')\"\n                  />\n                  <span class=\"filter-option-label\">Custom Roles</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"filter-modal-footer\">\n          <button\n            class=\"mj-btn mj-btn-primary\"\n            (click)=\"showMobileFilters = false\"\n          >\n            Apply Filters\n          </button>\n          <button\n            class=\"mj-btn mj-btn-secondary\"\n            (click)=\"showMobileFilters = false\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* =============================================================================\n   Role Management Component - Material Design 3\n   Custom Color Palette Implementation\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Custom Color Palette - MD3 Color Roles\n   ----------------------------------------------------------------------------- */\n:host {\n  /* Primary - Deep Blue */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  /* Secondary - Light Orange */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  /* Tertiary - Light Green */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  /* Error - Red */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  /* Surface Colors */\n  --md-surface: #FAFCFF;\n  --md-surface-dim: #D9DADE;\n  --md-surface-bright: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  /* Elevation Shadows */\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* Corner Radii */\n  --md-corner-none: 0;\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\n\n  /* State Layers */\n  --md-state-hover: 0.08;\n  --md-state-focus: 0.12;\n  --md-state-pressed: 0.12;\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Container & Layout\n   ----------------------------------------------------------------------------- */\n.role-management-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  background: var(--md-surface);\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--md-surface);\n  border-bottom: 1px solid var(--md-outline-variant);\n  box-shadow: var(--md-elevation-1);\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(--md-surface-container-lowest);\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\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(--md-surface);\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\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.75rem;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--md-surface);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1.25rem 1.5rem;\n    gap: 1rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1.25rem;\n  }\n}\n\n.mj-card {\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-medium);\n  padding: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--md-outline-variant);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1.125rem 1.25rem;\n  }\n}\n\n/* Stat Icon Styles */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-corner-medium);\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/* Total Roles - Primary */\n.stat-icon-total {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\n\n/* System Roles - Secondary (Orange) */\n.stat-icon-system {\n  background: var(--md-secondary-container);\n  color: #B5751A;\n}\n\n/* Custom Roles - Tertiary (Green) */\n.stat-icon-custom {\n  background: var(--md-tertiary-container);\n  color: var(--md-tertiary);\n}\n\n/* Active Roles - Primary */\n.stat-icon-active {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\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(--md-on-surface);\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(--md-on-surface-variant);\n  margin-top: 0.25rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\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(--md-surface-container-low);\n  margin: 0 1rem 1rem 1rem;\n  padding: 1rem;\n  border-radius: var(--md-corner-medium);\n  border: 1px solid var(--md-outline-variant);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1.25rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.25rem;\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/* Mobile Search Container */\n.mobile-search-container {\n  display: flex;\n  gap: 0.75rem;\n  align-items: center;\n  flex: 1;\n  min-width: 200px;\n}\n\n/* Search Input */\n.mj-search {\n  flex: 1;\n  min-width: 200px;\n  position: relative;\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(--md-on-surface-variant);\n  font-size: 1rem;\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(--md-outline-variant);\n  border-radius: var(--md-corner-full);\n  font-size: 1rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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(--md-on-surface-variant);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-lowest);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--md-surface);\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input:focus {\n    box-shadow: var(--md-elevation-1), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  }\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--md-primary);\n}\n\n/* Filter Group */\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-group .mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--md-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-group .mj-filter-buttons {\n  display: flex;\n  background: var(--md-surface-container);\n  border-radius: var(--md-corner-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n.mj-filter-buttons .mj-btn-ghost {\n  border-radius: var(--md-corner-full);\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all 0.2s ease;\n}\n\n.mj-filter-buttons .mj-btn-ghost:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.mj-filter-buttons .mj-btn-primary {\n  background-color: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-filter-buttons .mj-btn-primary:hover:not(:disabled) {\n  background-color: #3395C8;\n}\n\n/* -----------------------------------------------------------------------------\n   Button System\n   ----------------------------------------------------------------------------- */\n.mj-btn {\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  letter-spacing: 0.02em;\n  border: none;\n  border-radius: var(--md-corner-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n}\n\n.mj-btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n/* Primary Button - Dark to Light on hover */\n.mj-btn-primary {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.98);\n  box-shadow: var(--md-elevation-1);\n}\n\n/* Secondary Button - Light to Dark on hover */\n.mj-btn-secondary {\n  background: var(--md-surface);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\n}\n\n/* Ghost Button - Light to Dark on hover */\n.mj-btn-ghost {\n  background: transparent;\n  color: var(--md-on-surface-variant);\n}\n\n.mj-btn-ghost:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.mj-btn-ghost:active:not(:disabled) {\n  background: #005A8C;\n}\n\n/* Danger Button - Dark to Light on hover */\n.mj-btn-danger {\n  background: var(--md-error);\n  color: var(--md-on-error);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-danger:hover:not(:disabled) {\n  background: #E57373;\n  box-shadow: var(--md-elevation-2);\n}\n\n.mj-btn-danger:active:not(:disabled) {\n  background: #EF9A9A;\n  transform: scale(0.98);\n}\n\n/* Small Button */\n.mj-btn-sm {\n  padding: 0.5rem 0.875rem;\n  font-size: 0.8125rem;\n  min-height: 36px;\n}\n\n/* Icon-only Button */\n.mj-btn-icon-only {\n  padding: 0.625rem;\n  min-width: 44px;\n  min-height: 44px;\n}\n\n/* Mobile Icon Button */\n.mj-btn-icon-mobile {\n  gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile .btn-text {\n  display: inline;\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--md-surface);\n  border-radius: var(--md-corner-large);\n  box-shadow: var(--md-elevation-1);\n  padding: 1.25rem;\n  border: 1px solid var(--md-outline-variant);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Roles List\n   ----------------------------------------------------------------------------- */\n.roles-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Role Card\n   ----------------------------------------------------------------------------- */\n.role-card {\n  background: var(--md-surface);\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-large);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.role-card:hover {\n  box-shadow: var(--md-elevation-2);\n  border-color: var(--md-primary);\n}\n\n.role-card.expanded {\n  box-shadow: var(--md-elevation-3);\n  border-color: var(--md-primary);\n}\n\n.role-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n.role-header {\n  padding: 1.25rem 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  background: var(--md-surface-container-lowest);\n  transition: background-color 0.2s ease;\n}\n\n.role-header:hover {\n  background: var(--md-surface-container-low);\n}\n\n.role-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.role-icon-wrapper {\n  width: 52px;\n  height: 52px;\n  border-radius: var(--md-corner-medium);\n  background: var(--md-primary-container);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--md-primary);\n  font-size: 1.375rem;\n  flex-shrink: 0;\n}\n\n.role-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.role-details .role-name {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.25rem 0;\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n.role-details .role-description {\n  font-size: 0.875rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n  .role-details .role-description {\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n  }\n}\n\n.role-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Role Type Badge\n   ----------------------------------------------------------------------------- */\n.role-type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--md-corner-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n/* System Badge - Orange (Secondary) */\n.role-type-badge.badge-system {\n  background: var(--md-secondary-container);\n  color: #7A4D0C;\n  border: 1px solid var(--md-secondary);\n}\n\n/* Custom Badge - Green (Tertiary) */\n.role-type-badge.badge-custom {\n  background: var(--md-tertiary-container);\n  color: #1B5E20;\n  border: 1px solid var(--md-tertiary);\n}\n\n/* -----------------------------------------------------------------------------\n   Role Actions\n   ----------------------------------------------------------------------------- */\n.role-actions {\n  display: flex;\n  gap: 0.375rem;\n}\n\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--md-corner-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.expand-btn:hover {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Role Content (Expanded)\n   ----------------------------------------------------------------------------- */\n.role-content {\n  padding: 1.5rem;\n  background: var(--md-surface-container-lowest);\n  border-top: 1px solid var(--md-outline-variant);\n  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-actions-bar {\n  display: none;\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.role-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.role-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.9375rem;\n  padding: 0.5rem 1rem;\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-small);\n}\n\n.role-stats .stat-item i {\n  color: var(--md-primary);\n  font-size: 1rem;\n}\n\n.role-stats .stat-item .stat-label {\n  color: var(--md-on-surface-variant);\n}\n\n.role-stats .stat-item .stat-value {\n  color: var(--md-on-surface);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Permissions Preview\n   ----------------------------------------------------------------------------- */\n.permissions-preview {\n  padding: 1.25rem;\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-medium);\n  border: 1px solid var(--md-outline-variant);\n}\n\n.permissions-preview .section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.5rem 0;\n}\n\n.permissions-preview .section-title i {\n  color: var(--md-primary);\n  font-size: 1.125rem;\n}\n\n.permissions-preview .permissions-note {\n  font-size: 0.9375rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\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(--md-outline-variant);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--md-on-surface-variant);\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(--md-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--md-on-surface);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.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: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 1rem;\n}\n\n.modal-dialog {\n  background: var(--md-surface);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0.4, 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(--md-outline-variant);\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(--md-on-surface);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-corner-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(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--md-on-surface);\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-body .text-warning {\n  color: var(--md-secondary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: var(--md-secondary-container);\n  border-radius: var(--md-corner-small);\n  font-weight: 500;\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(--md-outline-variant);\n  background: var(--md-surface-container-low);\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--md-error);\n}\n\n.text-warning {\n  color: var(--md-secondary);\n}\n\n/* -----------------------------------------------------------------------------\n   Large Desktop (1440px+)\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .role-management-container {\n    max-width: 1920px;\n    margin: 0 auto;\n  }\n\n  .action-buttons {\n    padding: 1rem 2rem;\n  }\n\n  .mj-grid-4 {\n    padding: 0 2rem 1.25rem 2rem;\n    gap: 1.5rem;\n  }\n\n  .filters-section {\n    margin: 0 2rem 1.25rem 2rem;\n    padding: 1.25rem 1.5rem;\n  }\n\n  .content-area {\n    padding: 2rem;\n  }\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/* -----------------------------------------------------------------------------\n   Focus Indicators (Accessibility)\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible,\n.mj-btn:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\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(--md-outline-variant);\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  border-radius: var(--md-corner-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(--md-primary);\n  background: var(--md-surface-container-lowest);\n}\n\n.filter-button:active {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile)\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(--md-surface);\n  border-radius: var(--md-corner-extra-large) var(--md-corner-extra-large) 0 0;\n  box-shadow: var(--md-elevation-5);\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(--md-outline-variant);\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(--md-on-surface);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--md-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(--md-on-surface-variant);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-corner-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(--md-primary);\n  color: var(--md-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(--md-outline-variant);\n  background: var(--md-surface-container-low);\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(--md-on-surface);\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(--md-surface-container-low);\n  border: 2px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-medium);\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(--md-primary);\n  background: var(--md-surface-container);\n}\n\n.filter-option.selected {\n  background: var(--md-primary-container);\n  border-color: var(--md-primary);\n  color: var(--md-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(--md-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(--md-on-surface);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--md-primary);\n  font-weight: 600;\n}\n\n/* Animations */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\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   Reduced Motion (Accessibility)\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/* -----------------------------------------------------------------------------\n   Mobile (< 640px)\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  .sticky-header {\n    padding: 0;\n  }\n\n  .action-buttons {\n    padding: 0.5rem 0.75rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .mj-btn-icon-mobile {\n    padding: 0.5rem 0.75rem;\n    min-height: 40px;\n    gap: 0;\n  }\n\n  .mj-btn-icon-mobile .btn-text {\n    display: none;\n  }\n\n  .mj-btn-icon-mobile i {\n    font-size: 1.125rem;\n  }\n\n  .mj-grid-4 {\n    display: none !important;\n  }\n\n  .filters-section {\n    margin: 0 0.5rem 0.5rem 0.5rem;\n    padding: 0.75rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .filters-row {\n    gap: 0.75rem;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  /* Mobile search container */\n  .mobile-search-container {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    width: 100%;\n  }\n\n  .mj-search {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .mj-search .mj-search-input {\n    padding: 0.75rem 1rem 0.75rem 2.5rem;\n    min-height: 44px;\n    font-size: 1rem;\n    border-width: 1.5px;\n  }\n\n  .mj-search .mj-search-icon {\n    left: 0.875rem;\n    font-size: 1rem;\n  }\n\n  /* Hide filter groups on mobile - they go in modal */\n  .mj-filter-group {\n    display: none !important;\n  }\n\n  /* Show filter button on mobile */\n  .filter-button {\n    display: inline-flex !important;\n    flex-shrink: 0;\n  }\n\n  .scrollable-content {\n    padding: 0.75rem;\n  }\n\n  .content-area {\n    padding: 0.75rem;\n    border-radius: var(--md-corner-medium);\n  }\n\n  .modal-backdrop {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog {\n    border-radius: var(--md-corner-large);\n    max-height: 95vh;\n  }\n\n  .modal-footer {\n    flex-direction: column;\n  }\n\n  .modal-footer .mj-btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .roles-list {\n    gap: 0.75rem;\n  }\n\n  .role-card {\n    border-radius: var(--md-corner-medium);\n    overflow: hidden;\n  }\n\n  .role-header {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 1rem;\n  }\n\n  .role-info {\n    flex: 1;\n    min-width: 0;\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 0.875rem;\n  }\n\n  .role-icon-wrapper {\n    width: 40px;\n    height: 40px;\n    font-size: 1rem;\n    flex-shrink: 0;\n  }\n\n  .role-details {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .role-details .role-name {\n    font-size: 1rem;\n    line-height: 1.3;\n    margin-bottom: 0.125rem;\n  }\n\n  .role-details .role-description {\n    font-size: 0.8125rem;\n    -webkit-line-clamp: 1;\n    line-clamp: 1;\n  }\n\n  .role-meta {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding-top: 0;\n    border-top: none;\n    width: auto;\n  }\n\n  .role-meta .role-type-badge {\n    display: none;\n  }\n\n  .role-meta .role-actions {\n    display: none;\n  }\n\n  .expand-btn {\n    flex-shrink: 0;\n    min-width: 40px;\n    min-height: 40px;\n    padding: 0.5rem;\n  }\n\n  .expand-btn i {\n    font-size: 1rem;\n  }\n\n  .mobile-actions-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 0.875rem;\n    background: var(--md-surface-container-low);\n    border-radius: var(--md-corner-medium);\n    margin-bottom: 1rem;\n  }\n\n  .mobile-actions-bar .role-type-badge {\n    padding: 0.375rem 0.75rem;\n    font-size: 0.6875rem;\n  }\n\n  .mobile-action-buttons {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .mobile-action-buttons .mj-btn-sm {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.5rem 0.875rem;\n    min-height: 36px;\n  }\n\n  .mobile-action-buttons .mj-btn-sm i {\n    font-size: 0.875rem;\n  }\n\n  .mobile-action-buttons .btn-label {\n    font-size: 0.8125rem;\n    font-weight: 500;\n  }\n\n  .role-stats {\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .role-content {\n    padding: 1rem;\n  }\n\n  .permissions-preview {\n    padding: 1rem;\n  }\n\n  .empty-state {\n    padding: 3rem 1.5rem;\n  }\n\n  .empty-state .empty-icon {\n    font-size: 3rem;\n  }\n\n  .loading-container {\n    padding: 3rem 1.5rem;\n  }\n}\n\n/* Small Mobile (< 375px) */\n@media (max-width: 374px) {\n  .action-buttons {\n    padding: 0.375rem 0.5rem;\n  }\n\n  .filters-section {\n    margin: 0 0.375rem 0.375rem 0.375rem;\n    padding: 0.5rem;\n  }\n\n  .mobile-search-container {\n    gap: 0.375rem;\n  }\n\n  .filter-button {\n    padding: 0.625rem;\n    min-width: 40px;\n  }\n\n  .filter-button span {\n    display: none;\n  }\n\n  .filter-modal-header {\n    padding: 1rem 1.25rem;\n  }\n\n  .filter-modal-body {\n    padding: 1.25rem;\n  }\n\n  .filter-modal-footer {\n    padding: 1rem 1.25rem;\n  }\n\n  .scrollable-content {\n    padding: 0.5rem;\n  }\n\n  .content-area {\n    padding: 0.5rem;\n  }\n\n  .role-header {\n    padding: 0.75rem;\n  }\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleManagementComponent, { className: "RoleManagementComponent", filePath: "src/lib/role-management/role-management.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoleManagementComponent, { className: "RoleManagementComponent", filePath: "src/lib/role-management/role-management.component.ts", lineNumber: 29 }); })();
 //# sourceMappingURL=role-management.component.js.map

package/dist/lib/role-management/role-management.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-management.component.js","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts","../../../src/lib/role-management/role-management.component.html"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"role-management.component.js","sourceRoot":"","sources":["../../../src/lib/role-management/role-management.component.ts","../../../src/lib/role-management/role-management.component.html"],"names":[],"mappings":"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"}

package/dist/lib/settings/settings.component.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export interface SettingsTab {
     component?: unknown;
     badgeCount?: number;
     badgeColor?: 'primary' | 'danger' | 'warning' | 'success';
+    disabled?: boolean;
+    description?: string;
 }
 export interface SettingsComponentState {
     activeTab: string;
@@ -28,7 +30,6 @@ export declare class SettingsComponent extends BaseNavigationComponent implement
     private location;
     stateChange: EventEmitter<SettingsComponentState>;
     activeTab: string;
-    advancedActiveTab: string;
     searchTerm$: BehaviorSubject<string>;
     isLoading: boolean;
     error: string | null;
@@ -52,15 +53,12 @@ export declare class SettingsComponent extends BaseNavigationComponent implement
     onSearchChange(event: Event): void;
     toggleSection(sectionId: string): void;
     isSectionExpanded(sectionId: string): boolean;
-    setAdvancedTab(tabId: string): void;
     /**
      * Filters searchable content based on search term
-     * Matches against labels, keywords, and descriptions
      */
     private filterContent;
     /**
      * Navigates to a search result
-     * Switches to the correct tab and expands the relevant section
      */
     navigateToSearchResult(result: SearchableItem): void;
     /**
@@ -68,7 +66,7 @@ export declare class SettingsComponent extends BaseNavigationComponent implement
      */
     clearSearch(): void;
     /**
-     * Toggles the mobile navigation rail open/closed
+     * Toggles the mobile navigation rail
      */
     toggleMobileNav(): void;
     /**
@@ -80,22 +78,15 @@ export declare class SettingsComponent extends BaseNavigationComponent implement
      */
     closeSettings(): void;
     /**
-     * Handles tab change on mobile and closes the nav rail
+     * Handles tab change on mobile
      */
     onMobileTabChange(tabId: string): void;
     private handleResize;
     private emitStateChange;
     loadUserState(state: Partial<SettingsComponentState>): void;
-    /**
-     * Gets the icon for a tab by its ID
-     */
-    getTabIconById(tabId: string): string;
-    /**
-     * Gets the label for a tab by its ID
-     */
-    getTabLabelById(tabId: string): string;
     getTabIcon(tab: SettingsTab): string;
     getTabClass(tab: SettingsTab): string;
+    isTabDisabled(tab: SettingsTab): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SettingsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SettingsComponent, "mj-settings", never, {}, { "stateChange": "stateChange"; }, never, never, false, never>;
 }

package/dist/lib/settings/settings.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAW,eAAe,EAAE,MAAM,MAAM,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAEpE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;~~CAC3D~~;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,~~qBAMa~~,iBAAkB,SAAQ,uBAAwB,YAAW,MAAM,EAAE,SAAS;~~IAgK7E~~,OAAO,CAAC,QAAQ;~~IA/JlB~~,WAAW,uCAA8C;IAG5D,SAAS,SAAa;IACtB,~~iBAAiB,SAAiB;IAClC,~~WAAW,0BAAmC;IAC9C,SAAS,UAAS;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5B,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,aAAa,EAAE,cAAc,EAAE,CAAM;IACrC,WAAW,UAAS;IACpB,iBAAiB,UAAS;IAG1B,IAAI,EAAE,WAAW,EAAE,~~CA4CxB~~;IAGF,OAAO,CAAC,eAAe,~~CAqFrB~~;IAGK,gBAAgB,EAAE,MAAM,EAAE,~~CAA8B~~;~~IAGxD~~,QAAQ,UAA2B;IACnC,eAAe,UAAS;IAE/B,OAAO,CAAC,QAAQ,CAAuB;gBAEnB,QAAQ,EAAE,QAAQ;~~IAMtC~~,QAAQ,IAAI,IAAI;~~IAOhB~~,WAAW,IAAI,IAAI;IAMnB,OAAO,CAAC,iBAAiB;IAaZ,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;~~YAY~~/B,gBAAgB;IAIvB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;~~IAKhC~~,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKlC,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAUtC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;~~IAI7C,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI~~;~~IAI1C;;;OAGG;~~IACH,OAAO,CAAC,aAAa;IA2BrB~~;;;OAGG~~;IACI,sBAAsB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;~~IAkB3D~~;;OAEG;IACI,WAAW,IAAI,IAAI;IAO1B;;OAEG;IACI,eAAe,IAAI,IAAI;IAI9B;;OAEG;IACI,cAAc,IAAI,IAAI;IAI7B;;OAEG;IACI,aAAa,IAAI,IAAI;IAI5B;;OAEG;IACI,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7C,OAAO,CAAC,YAAY;~~IAQpB~~,OAAO,CAAC,eAAe;IAShB,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAAG,IAAI;~~IAYlE;;OAEG;IACI~~,~~cAAc~~,CAAC,~~KAAK,EAAE,MAAM,~~GAAG,~~MAAM;IAK5C;;OAEG;IACI,eAAe,CAAC,KAAK,~~EAAE,~~MAAM~~,GAAG,MAAM;~~IAKtC~~,~~UAAU~~,CAAC,GAAG,EAAE,WAAW,GAAG,MAAM;~~IAIpC~~,~~WAAW~~,CAAC,GAAG,EAAE,WAAW,GAAG,~~MAAM~~;~~yCAzXjC~~,iBAAiB;2CAAjB,iBAAiB;~~CAmY7B~~"}
1	+ {"version":3,"file":"settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/settings.component.ts"],"names":[],"mappings":"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"}