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

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

@@ -55,7 +55,7 @@ function ApplicationManagementComponent_Conditional_16_For_2_Conditional_20_Cond
 } if (rf & 2) {
     const appEntity_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx.Name);
+    i0.ɵɵtextInterpolate(ctx.DisplayNameOrName);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(appEntity_r6.DefaultForNewUser ? 4 : -1);
     i0.ɵɵadvance(2);
@@ -282,30 +282,110 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
     cdr;
     ngZone;
     // State management
-    applications = [];
-    filteredApplications = [];
-    selectedApp = null;
+    Applications = [];
+    /** @deprecated Use {@link Applications}. */
+    get applications() {
+        return this.Applications;
+    }
+    /** @deprecated Use {@link Applications}. */
+    set applications(value) {
+        this.Applications = value;
+    }
+    FilteredApplications = [];
+    /** @deprecated Use {@link FilteredApplications}. */
+    get filteredApplications() {
+        return this.FilteredApplications;
+    }
+    /** @deprecated Use {@link FilteredApplications}. */
+    set filteredApplications(value) {
+        this.FilteredApplications = value;
+    }
+    SelectedApp = null;
+    /** @deprecated Use {@link SelectedApp}. */
+    get selectedApp() {
+        return this.SelectedApp;
+    }
+    /** @deprecated Use {@link SelectedApp}. */
+    set selectedApp(value) {
+        this.SelectedApp = value;
+    }
     isLoading = false;
     error = null;
     // Application entities mapping
-    appEntities = new Map();
+    AppEntities = new Map();
+    /** @deprecated Use {@link AppEntities}. */
+    get appEntities() {
+        return this.AppEntities;
+    }
+    /** @deprecated Use {@link AppEntities}. */
+    set appEntities(value) {
+        this.AppEntities = value;
+    }
     // Stats
-    stats = {
+    Stats = {
         totalApplications: 0,
         activeApplications: 0,
         totalEntities: 0,
         publicEntities: 0
     };
+    /** @deprecated Use {@link Stats}. */
+    get stats() {
+        return this.Stats;
+    }
+    /** @deprecated Use {@link Stats}. */
+    set stats(value) {
+        this.Stats = value;
+    }
     // Filters
-    filters$ = new BehaviorSubject({
+    Filters$ = new BehaviorSubject({
         status: 'all',
         search: ''
     });
+    /** @deprecated Use {@link Filters$}. */
+    get filters$() {
+        return this.Filters$;
+    }
+    /** @deprecated Use {@link Filters$}. */
+    set filters$(value) {
+        this.Filters$ = value;
+    }
     // UI State
-    showApplicationDialog = false;
-    applicationDialogData = null;
-    showDeleteConfirm = false;
-    expandedAppId = null;
+    ShowApplicationDialog = false;
+    /** @deprecated Use {@link ShowApplicationDialog}. */
+    get showApplicationDialog() {
+        return this.ShowApplicationDialog;
+    }
+    /** @deprecated Use {@link ShowApplicationDialog}. */
+    set showApplicationDialog(value) {
+        this.ShowApplicationDialog = value;
+    }
+    ApplicationDialogData = null;
+    /** @deprecated Use {@link ApplicationDialogData}. */
+    get applicationDialogData() {
+        return this.ApplicationDialogData;
+    }
+    /** @deprecated Use {@link ApplicationDialogData}. */
+    set applicationDialogData(value) {
+        this.ApplicationDialogData = value;
+    }
+    ShowDeleteConfirm = false;
+    /** @deprecated Use {@link ShowDeleteConfirm}. */
+    get showDeleteConfirm() {
+        return this.ShowDeleteConfirm;
+    }
+    /** @deprecated Use {@link ShowDeleteConfirm}. */
+    set showDeleteConfirm(value) {
+        this.ShowDeleteConfirm = value;
+    }
+    ExpandedAppId = null;
+    /** @deprecated Use {@link ExpandedAppId}. */
+    get expandedAppId() {
+        return this.ExpandedAppId;
+    }
+    /** @deprecated Use {@link ExpandedAppId}. */
+    set expandedAppId(value) {
+        this.ExpandedAppId = value;
+    }
     destroy$ = new Subject();
     get metadata() { return this.ProviderToUse; }
     constructor(cdr, ngZone) {
@@ -320,14 +400,14 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
         this.setupFilterSubscription();
     }
     loadData() {
-        this.loadInitialData();
+        this.LoadInitialData();
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
         super.ngOnDestroy();
     }
-    async loadInitialData() {
+    async LoadInitialData() {
         try {
             this.isLoading = true;
             this.error = null;
@@ -336,7 +416,7 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
                 this.loadApplications(),
                 this.loadApplicationEntities()
             ]);
-            this.applications = apps;
+            this.Applications = apps;
             this.processApplicationEntities(appEntities);
             this.calculateStats();
             this.applyFilters();
@@ -352,6 +432,10 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
             });
         }
     }
+    /** @deprecated Use {@link LoadInitialData}. */
+    async loadInitialData() {
+        return this.LoadInitialData();
+    }
     async loadApplications() {
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
         const result = await rv.RunView({
@@ -371,25 +455,25 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
         return result.Success ? result.Results : [];
     }
     processApplicationEntities(appEntities) {
-        this.appEntities.clear();
+        this.AppEntities.clear();
         for (const appEntity of appEntities) {
             const appId = appEntity.ApplicationID;
-            if (!this.appEntities.has(appId)) {
-                this.appEntities.set(appId, []);
+            if (!this.AppEntities.has(appId)) {
+                this.AppEntities.set(appId, []);
             }
-            this.appEntities.get(appId).push(appEntity);
+            this.AppEntities.get(appId).push(appEntity);
         }
     }
     setupFilterSubscription() {
-        this.filters$
+        this.Filters$
             .pipe(debounceTime(300), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.destroy$))
             .subscribe(() => {
             this.applyFilters();
         });
     }
     applyFilters() {
-        const filters = this.filters$.value;
-        let filtered = [...this.applications];
+        const filters = this.Filters$.value;
+        let filtered = [...this.Applications];
         // Apply status filter - for now, all applications are considered active
         // In the future, we might add an IsActive field to the Applications table
         if (filters.status === 'inactive') {
@@ -402,32 +486,36 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
             filtered = filtered.filter(app => app.Name?.toLowerCase().includes(searchLower) ||
                 app.Description?.toLowerCase().includes(searchLower));
         }
-        this.filteredApplications = filtered;
+        this.FilteredApplications = filtered;
         this.cdr.detectChanges();
     }
     calculateStats() {
         // For now, consider all applications as active
-        const activeApps = this.applications;
+        const activeApps = this.Applications;
         let totalEntities = 0;
         let publicEntities = 0;
-        for (const [, entities] of this.appEntities) {
+        for (const [, entities] of this.AppEntities) {
             totalEntities += entities.length;
             publicEntities += entities.filter(e => e.DefaultForNewUser).length;
         }
-        this.stats = {
-            totalApplications: this.applications.length,
+        this.Stats = {
+            totalApplications: this.Applications.length,
             activeApplications: activeApps.length,
             totalEntities,
             publicEntities
         };
     }
     // Public methods for template
+    OnStatusFilterChange(status) {
+        this.UpdateFilter({ status });
+    }
+    /** @deprecated Use {@link OnStatusFilterChange}. */
     onStatusFilterChange(status) {
-        this.updateFilter({ status });
+        return this.OnStatusFilterChange(status);
     }
-    updateFilter(partial) {
-        this.filters$.next({
-            ...this.filters$.value,
+    UpdateFilter(partial) {
+        this.Filters$.next({
+            ...this.Filters$.value,
             ...partial
         });
         // Discrete changes (chips) apply immediately. Text search still goes
@@ -437,8 +525,12 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link UpdateFilter}. */
+    updateFilter(partial) {
+        return this.UpdateFilter(partial);
+    }
     // -- Concise chrome: one Filter popover (Status) + applied-filter chips -----
-    get filterFields() {
+    get FilterFields() {
         return [
             {
                 key: 'status',
@@ -452,78 +544,126 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
             },
         ];
     }
+    /** @deprecated Use {@link FilterFields}. */
+    get filterFields() {
+        return this.FilterFields;
+    }
+    get FilterValues() {
+        return { status: this.Filters$.value.status };
+    }
+    /** @deprecated Use {@link FilterValues}. */
     get filterValues() {
-        return { status: this.filters$.value.status };
+        return this.FilterValues;
     }
     /** Total active filters (Status) — drives the Filter button badge. */
     get TotalActiveFilterCount() {
-        return this.filters$.value.status !== 'all' ? 1 : 0;
+        return this.Filters$.value.status !== 'all' ? 1 : 0;
     }
-    onFilterPanelChange(values) {
+    OnFilterPanelChange(values) {
         if ('status' in values) {
-            this.updateFilter({ status: values['status'] || 'all' });
+            this.UpdateFilter({ status: values['status'] || 'all' });
         }
     }
+    /** @deprecated Use {@link OnFilterPanelChange}. */
+    onFilterPanelChange(values) {
+        return this.OnFilterPanelChange(values);
+    }
     /** Clear all filters (Status); search persists. */
+    ClearAllAppliedFilters() {
+        this.UpdateFilter({ status: 'all' });
+    }
+    /** @deprecated Use {@link ClearAllAppliedFilters}. */
     clearAllAppliedFilters() {
-        this.updateFilter({ status: 'all' });
+        return this.ClearAllAppliedFilters();
     }
     /** True when search and/or panel filters are narrowing the list — gates the
      *  no-results empty-state "Reset filters" CTA. */
     get IsListNarrowed() {
-        return this.filters$.value.search !== '' || this.TotalActiveFilterCount > 0;
+        return this.Filters$.value.search !== '' || this.TotalActiveFilterCount > 0;
     }
     /** Reset everything narrowing the list (search + Status) and refresh
      *  immediately. Wired to the no-results empty-state CTA. Unlike
      *  clearAllAppliedFilters(), this also clears the search box. */
-    resetAllFiltersAndSearch() {
-        this.filters$.next({ status: 'all', search: '' });
+    ResetAllFiltersAndSearch() {
+        this.Filters$.next({ status: 'all', search: '' });
         this.applyFilters();
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ResetAllFiltersAndSearch}. */
+    resetAllFiltersAndSearch() {
+        return this.ResetAllFiltersAndSearch();
+    }
+    ToggleAppExpansion(appId) {
+        this.ExpandedAppId = this.ExpandedAppId === appId ? null : appId;
+    }
+    /** @deprecated Use {@link ToggleAppExpansion}. */
     toggleAppExpansion(appId) {
-        this.expandedAppId = this.expandedAppId === appId ? null : appId;
+        return this.ToggleAppExpansion(appId);
     }
+    IsAppExpanded(appId) {
+        return this.ExpandedAppId === appId;
+    }
+    /** @deprecated Use {@link IsAppExpanded}. */
     isAppExpanded(appId) {
-        return this.expandedAppId === appId;
+        return this.IsAppExpanded(appId);
+    }
+    GetAppEntities(appId) {
+        return this.AppEntities.get(appId) || [];
     }
+    /** @deprecated Use {@link GetAppEntities}. */
     getAppEntities(appId) {
-        return this.appEntities.get(appId) || [];
+        return this.GetAppEntities(appId);
     }
-    getEntityInfo(entityId) {
+    GetEntityInfo(entityId) {
         return this.metadata.Entities.find(e => UUIDsEqual(e.ID, entityId));
     }
-    createNewApplication() {
-        this.applicationDialogData = {
+    /** @deprecated Use {@link GetEntityInfo}. */
+    getEntityInfo(entityId) {
+        return this.GetEntityInfo(entityId);
+    }
+    CreateNewApplication() {
+        this.ApplicationDialogData = {
             mode: 'create'
         };
-        this.showApplicationDialog = true;
+        this.ShowApplicationDialog = true;
     }
-    editApplication(app) {
-        this.applicationDialogData = {
+    /** @deprecated Use {@link CreateNewApplication}. */
+    createNewApplication() {
+        return this.CreateNewApplication();
+    }
+    EditApplication(app) {
+        this.ApplicationDialogData = {
             application: app,
             mode: 'edit'
         };
-        this.showApplicationDialog = true;
+        this.ShowApplicationDialog = true;
     }
+    /** @deprecated Use {@link EditApplication}. */
+    editApplication(app) {
+        return this.EditApplication(app);
+    }
+    ConfirmDeleteApplication(app) {
+        this.SelectedApp = app;
+        this.ShowDeleteConfirm = true;
+    }
+    /** @deprecated Use {@link ConfirmDeleteApplication}. */
     confirmDeleteApplication(app) {
-        this.selectedApp = app;
-        this.showDeleteConfirm = true;
+        return this.ConfirmDeleteApplication(app);
     }
-    async deleteApplication() {
-        if (!this.selectedApp)
+    async DeleteApplication() {
+        if (!this.SelectedApp)
             return;
         try {
             this.isLoading = true;
             this.error = null;
             // Delete the application
-            const deleteResult = await this.selectedApp.Delete();
+            const deleteResult = await this.SelectedApp.Delete();
             if (!deleteResult) {
-                throw new Error(this.selectedApp.LatestResult?.Message || 'Failed to delete application');
+                throw new Error(this.SelectedApp.LatestResult?.Message || 'Failed to delete application');
             }
-            this.showDeleteConfirm = false;
-            this.selectedApp = null;
-            await this.loadInitialData();
+            this.ShowDeleteConfirm = false;
+            this.SelectedApp = null;
+            await this.LoadInitialData();
         }
         catch (error) {
             console.error('Error deleting application:', error);
@@ -539,15 +679,23 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
             });
         }
     }
-    onApplicationDialogResult(result) {
-        this.showApplicationDialog = false;
-        this.applicationDialogData = null;
+    /** @deprecated Use {@link DeleteApplication}. */
+    async deleteApplication() {
+        return this.DeleteApplication();
+    }
+    OnApplicationDialogResult(result) {
+        this.ShowApplicationDialog = false;
+        this.ApplicationDialogData = null;
         if (result.action === 'save') {
             // Refresh the application list after save
-            this.loadInitialData();
+            this.LoadInitialData();
         }
     }
-    getAppIcon(app) {
+    /** @deprecated Use {@link OnApplicationDialogResult}. */
+    onApplicationDialogResult(result) {
+        return this.OnApplicationDialogResult(result);
+    }
+    GetAppIcon(app) {
         // Map application names to appropriate icons based on their purpose
         const name = (app.Name || '').toLowerCase();
         // Common application type mappings
@@ -596,16 +744,32 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
         // Default icon for applications
         return 'fa-grid-2';
     }
-    getAppStatusClass(app) {
+    /** @deprecated Use {@link GetAppIcon}. */
+    getAppIcon(app) {
+        return this.GetAppIcon(app);
+    }
+    GetAppStatusClass(app) {
         // For now, all apps are considered active
         return 'status-active';
     }
-    getAppStatusLabel(app) {
+    /** @deprecated Use {@link GetAppStatusClass}. */
+    getAppStatusClass(app) {
+        return this.GetAppStatusClass(app);
+    }
+    GetAppStatusLabel(app) {
         // For now, all apps are considered active
         return 'Active';
     }
+    /** @deprecated Use {@link GetAppStatusLabel}. */
+    getAppStatusLabel(app) {
+        return this.GetAppStatusLabel(app);
+    }
+    RefreshData() {
+        this.LoadInitialData();
+    }
+    /** @deprecated Use {@link RefreshData}. */
     refreshData() {
-        this.loadInitialData();
+        return this.RefreshData();
     }
     static ɵfac = function ApplicationManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationManagementComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 14, consts: [["AriaLabel", "Filter applications", "Title", "Applications", "Subtitle", "Configure applications and their entity associations"], ["meta", ""], ["Label", "applications", 3, "Count", "Total"], ["toolbar", ""], ["Placeholder", "Search applications by name or description...", 3, "ValueChange", "Value"], ["Label", "Filters", "Icon", "fa-solid fa-filter", 3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Add new application", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "mj-action-label"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["role", "alert", 1, "error-container"], ["role", "list", 1, "applications-list"], [3, "result", "visible", "data"], ["role", "presentation", 1, "modal-backdrop"], ["text", "Loading applications..."], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-refresh"], ["role", "listitem", 1, "app-card", 3, "expanded"], ["Icon", "fa-solid fa-cubes", "Title", "No applications found", "Message", "Try adjusting your filters or create a new application", "ActionIcon", "fa-solid fa-rotate-left", 3, "Variant", "ActionText"], ["role", "listitem", 1, "app-card"], ["role", "button", 1, "app-header", 3, "click"], [1, "app-info"], [1, "app-icon-wrapper"], ["aria-hidden", "true"], [1, "app-details"], [1, "app-name"], [1, "app-description"], [1, "app-meta"], [1, "status-badge"], [1, "app-actions", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-edit"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "app-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "app-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "stat-label"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "entities-section"], [1, "section-title"], [1, "entities-grid"], [1, "no-entities"], [1, "entity-item"], [1, "entity-name"], [1, "entity-meta"], [1, "entity-badge", "public"], [1, "entity-sequence"], ["Icon", "fa-solid fa-cubes", "Title", "No applications found", "Message", "Try adjusting your filters or create a new application", "ActionIcon", "fa-solid fa-rotate-left", 3, "Action", "Variant", "ActionText"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-description", 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-description", 1, "modal-body"], ["Variant", "warning", "Message", "This will remove all entity associations for this application."], [1, "modal-footer"], ["mjButton", "", "variant", "danger", 3, "click", "disabled"], ["mjButton", "", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"]], template: function ApplicationManagementComponent_Template(rf, ctx) { if (rf & 1) {
@@ -667,7 +831,7 @@ ApplicationManagementComponent = __decorate([
 export { ApplicationManagementComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationManagementComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-application-management', template: "<!--\n  Interior chrome \u2014 see Section 10 of explorer-chrome-conventions.\n-->\n<mj-page-header-interior\n  AriaLabel=\"Filter applications\"\n  Title=\"Applications\"\n  Subtitle=\"Configure applications and their entity associations\">\n  <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72.\n       Partition badges (entities/public) stay dropped \u2014 Active/Inactive\n       chips in [toolbar] handle the partition signal. -->\n  <div meta>\n    <mj-stat-badge\n      [Count]=\"filteredApplications.length\"\n      [Total]=\"applications.length\"\n      Label=\"applications\">\n    </mj-stat-badge>\n  </div>\n  <div toolbar>\n    <!-- Concise-chrome control bar: search \u00B7 Filter. Status lives behind the\n         one Filter button; applied filters show as removable chips below the\n         card. On mobile the popover docks as a bottom sheet. -->\n    <mj-page-search\n      Placeholder=\"Search applications by name or description...\"\n      [Value]=\"filters$.value.search\"\n      (ValueChange)=\"updateFilter({ search: $event })\">\n    </mj-page-search>\n    <mj-filter-popover\n      Label=\"Filters\"\n      Icon=\"fa-solid fa-filter\"\n      [ActiveCount]=\"TotalActiveFilterCount\"\n      [ShowClearAll]=\"TotalActiveFilterCount > 0\"\n      (ClearAllRequested)=\"clearAllAppliedFilters()\">\n      <mj-filter-panel\n        [Fields]=\"filterFields\"\n        [Values]=\"filterValues\"\n        (ValuesChange)=\"onFilterPanelChange($event)\"\n        (Reset)=\"clearAllAppliedFilters()\">\n      </mj-filter-panel>\n    </mj-filter-popover>\n  </div>\n  <div actions>\n    <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refreshData()\"></mj-refresh-button>\n    <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewApplication()\" aria-label=\"Add new application\">\n      <i class=\"fa-solid fa-plus\"></i> <span class=\"mj-action-label\">Add Application</span>\n    </button>\n  </div>\n</mj-page-header-interior>\n\n<!-- Scrollable Content Section \u2014 owned by <mj-page-body-interior>. -->\n<mj-page-body-interior>\n    <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n      <mj-loading text=\"Loading applications...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\" role=\"alert\">\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 mjButton variant=\"primary\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Applications List -->\n  @if (!isLoading && !error) {\n    <div class=\"applications-list\" role=\"list\">\n        @for (app of filteredApplications; track app.ID) {\n          <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\" role=\"listitem\">\n            <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\" role=\"button\" [attr.aria-expanded]=\"isAppExpanded(app.ID)\">\n              <div class=\"app-info\">\n                <div class=\"app-icon-wrapper\">\n                  <i [class]=\"'fa-solid ' + getAppIcon(app)\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"app-details\">\n                  <h3 class=\"app-name\">{{ app.Name }}</h3>\n                  <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n                </div>\n              </div>\n\n              <div class=\"app-meta\">\n                <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n                  {{ getAppStatusLabel(app) }}\n                </span>\n                <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n                  <button\n                    mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"editApplication(app)\"\n                    title=\"Edit\"\n                    [attr.aria-label]=\"'Edit ' + app.Name\"\n                  >\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button\n                    mjButton variant=\"danger\" size=\"sm\"\n                    (click)=\"confirmDeleteApplication(app)\"\n                    title=\"Delete\"\n                    [attr.aria-label]=\"'Delete ' + app.Name\"\n                  >\n                    <i class=\"fa-solid fa-trash\"></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 (isAppExpanded(app.ID)) {\n              <div class=\"app-content\">\n                <!-- Mobile-only actions bar -->\n                <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                  <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n                    {{ getAppStatusLabel(app) }}\n                  </span>\n                  <div class=\"mobile-action-buttons\">\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"editApplication(app)\"\n                      title=\"Edit\"\n                      [attr.aria-label]=\"'Edit ' + app.Name\"\n                    >\n                      <i class=\"fa-solid fa-edit\"></i>\n                      <span class=\"btn-label\">Edit</span>\n                    </button>\n                    <button\n                      mjButton variant=\"danger\" size=\"sm\"\n                      (click)=\"confirmDeleteApplication(app)\"\n                      title=\"Delete\"\n                      [attr.aria-label]=\"'Delete ' + app.Name\"\n                    >\n                      <i class=\"fa-solid fa-trash\"></i>\n                      <span class=\"btn-label\">Delete</span>\n                    </button>\n                  </div>\n                </div>\n\n                <div class=\"app-stats\">\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                    <span class=\"stat-label\">Entities:</span>\n                    <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</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\">{{ app.__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\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n                  </div>\n                </div>\n\n                <div class=\"entities-section\">\n                  <h4 class=\"section-title\">\n                    <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                    Application Entities\n                  </h4>\n\n                  @if (getAppEntities(app.ID).length > 0) {\n                    <div class=\"entities-grid\">\n                      @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n                        @if (getEntityInfo(appEntity.EntityID); as entity) {\n                          <div class=\"entity-item\">\n                            <div class=\"entity-name\">{{ entity.Name }}</div>\n                            <div class=\"entity-meta\">\n                              @if (appEntity.DefaultForNewUser) {\n                                <span class=\"entity-badge public\">Public</span>\n                              }\n                              <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n                            </div>\n                          </div>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <p class=\"no-entities\">No entities configured for this application</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        @if (filteredApplications.length === 0) {\n          <mj-empty-state\n            [Variant]=\"IsListNarrowed ? 'no-results' : 'empty'\"\n            Icon=\"fa-solid fa-cubes\"\n            Title=\"No applications found\"\n            Message=\"Try adjusting your filters or create a new application\"\n            [ActionText]=\"IsListNarrowed ? 'Reset filters' : ''\"\n            ActionIcon=\"fa-solid fa-rotate-left\"\n            (Action)=\"resetAllFiltersAndSearch()\" />\n        }\n    </div>\n  }\n  </mj-page-body-interior>\n\n  <!-- Application Dialog -->\n  <mj-application-dialog\n    [visible]=\"showApplicationDialog\"\n    [data]=\"applicationDialogData\"\n    (result)=\"onApplicationDialogResult($event)\"\n  ></mj-application-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedApp) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\" role=\"presentation\">\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-description\"\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-description\">\n          <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n          <mj-alert Variant=\"warning\" Message=\"This will remove all entity associations for this application.\" />\n        </div>\n        <div class=\"modal-footer\">\n          <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n          <button mjButton variant=\"danger\" (click)=\"deleteApplication()\" [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 Application\n            }\n          </button>\n          <button mjButton (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* =============================================================================\n   Shared Admin Patterns - MJ Design System\n   Common styles shared across all admin settings components.\n   Component-specific CSS files override these values where needed.\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Host & Container\n   ----------------------------------------------------------------------------- */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n   Scrollable Content\n   ----------------------------------------------------------------------------- */\n.scrollable-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content {\n    padding: 2rem 2.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Action Buttons (In Sticky Header)\n   ----------------------------------------------------------------------------- */\n.action-buttons {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Statistics Cards Grid - Static Display (Non-interactive)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1rem;\n  }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1rem 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Containers\n   ----------------------------------------------------------------------------- */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Content Typography\n   ----------------------------------------------------------------------------- */\n.stat-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content .stat-value {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-value {\n    font-size: 2rem;\n  }\n}\n\n.stat-content .stat-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-label {\n    font-size: 0.8125rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Filters Section\n   ----------------------------------------------------------------------------- */\n.filters-section {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Search Input\n   ----------------------------------------------------------------------------- */\n.mj-search {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search .mj-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-icon {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search .mj-search-input {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search .mj-search-input {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search .mj-search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Expand Button\n   ----------------------------------------------------------------------------- */\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Status Badge\n   ----------------------------------------------------------------------------- */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n  font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile Actions Bar\n   ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n  display: none;\n}\n\n.mobile-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Empty State\n   ----------------------------------------------------------------------------- */\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Loading State\n   ----------------------------------------------------------------------------- */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State\n   ----------------------------------------------------------------------------- */\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container .error-icon {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header {\n    padding: 1rem;\n  }\n\n  .modal-header .modal-title {\n    font-size: 1.125rem;\n  }\n\n  .modal-body {\n    padding: 1rem;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n/* The legacy \"MJ Button System\" rule block (.mj-btn / .mj-btn-primary /\n   .mj-btn-secondary / .mj-btn-ghost / .mj-btn-danger / .mj-btn-sm /\n   .mj-btn-icon-only / .mj-btn-icon-mobile) was removed 2026-05-19. These\n   rules pre-dated the mjButton directive standardization (the directive\n   uses BEM modifiers like .mj-btn--primary, single-dash names like\n   .mj-btn-primary don't match it anyway). The base .mj-btn rule WAS active\n   though \u2014 its component-scoped specificity outranked button.scss's global\n   directive styles, so admin sub-page buttons rendered pill-shaped + 44px\n   regardless of the variant/size requested via mjButton inputs. Removing the\n   rule lets every sub-page fall back to the directive's intended look. */\n\n/* -----------------------------------------------------------------------------\n   Filter Button (Mobile Only)\n   ----------------------------------------------------------------------------- */\n.filter-button {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile Bottom Sheet)\n   ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n  flex: 1;\n  margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--mj-status-error);\n}\n\n.text-warning {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success {\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Animations\n   ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Focus Indicators\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Reduced Motion\n   ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n", "/* =============================================================================\n   Application Management Component - Component-Specific Styles\n   Shared patterns are in ../shared/styles/_admin-patterns.css\n   ============================================================================= */\n\n/* :host already provides flex column / 100% height / overflow hidden via\n   _admin-patterns.css. No bespoke container wrapper \u2014 see Section 10 of\n   explorer-chrome-conventions. */\n\n/* Status chip group inside <mj-page-header-interior>'s [toolbar] slot. */\n.status-chips {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Overrides (Component-specific colors)\n   ----------------------------------------------------------------------------- */\n.stat-icon-entities {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Applications List\n   ----------------------------------------------------------------------------- */\n.applications-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Card - Interactive\n   ----------------------------------------------------------------------------- */\n.app-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n\n.app-card:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n.app-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(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.app-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.app-icon-wrapper {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-color-accent-300);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.app-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-details .app-name {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n.app-details .app-description {\n  font-size: 0.9375rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n  .app-details .app-description {\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n  }\n}\n\n.app-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Actions\n   ----------------------------------------------------------------------------- */\n.app-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Content (Expanded)\n   ----------------------------------------------------------------------------- */\n.app-content {\n  padding: 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.app-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.9375rem;\n}\n\n.app-stats .stat-item i {\n  color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-label {\n  color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Entities Section\n   ----------------------------------------------------------------------------- */\n.entities-section {\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n}\n\n.entities-section .section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.entities-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  }\n}\n\n.entity-item {\n  padding: 0.75rem;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item .entity-name {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.entity-item .entity-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n.entity-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.entity-badge.public {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence {\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n.no-entities {\n  color: var(--mj-text-secondary);\n  font-size: 0.9375rem;\n  text-align: center;\n  padding: 1rem;\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Body Override - warning callout\n   ----------------------------------------------------------------------------- */\n.modal-body p {\n  font-size: 1.0625rem;\n}\n\n\n/* -----------------------------------------------------------------------------\n   Desktop (1440px+) - Large Screen Overrides\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .application-management-container {\n    margin: 0 auto;\n  }\n\n  .mj-grid-4 {\n    padding: 0 2rem 1rem 2rem;\n    gap: 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile-specific adjustments (< 640px)\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  /* Hide stats cards on mobile to save space */\n  .mj-grid-4 {\n    display: none !important;\n  }\n\n  /* More compact scrollable content */\n  .scrollable-content {\n    padding: 0.5rem;\n  }\n\n  /* Modal styles */\n  .modal-backdrop {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog {\n    border-radius: var(--mj-radius-2xl);\n    max-height: 95vh;\n  }\n\n  /* App Card Mobile Layout */\n  .applications-list {\n    gap: 0.5rem;\n  }\n\n  .app-card {\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n  }\n\n  .app-header {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.5rem;\n    padding: 0.75rem;\n  }\n\n  .app-info {\n    flex: 1;\n    min-width: 0;\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  .app-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    font-size: 0.875rem;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-md);\n  }\n\n  .app-details {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .app-details .app-name {\n    font-size: 0.9375rem;\n    line-height: 1.3;\n    margin-bottom: 0.125rem;\n  }\n\n  .app-details .app-description {\n    font-size: 0.8125rem;\n    -webkit-line-clamp: 1;\n    line-clamp: 1;\n  }\n\n  /* On mobile: hide status and actions in header, show only expand button */\n  .app-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  .app-meta .status-badge {\n    display: none;\n  }\n\n  .app-meta .app-actions {\n    display: none;\n  }\n\n  .expand-btn {\n    flex-shrink: 0;\n    min-width: 36px;\n    min-height: 36px;\n    padding: 0.5rem;\n    border-radius: var(--mj-radius-full);\n  }\n\n  .expand-btn i {\n    font-size: 1rem;\n  }\n\n  /* Mobile actions bar - visible on mobile only */\n  .mobile-actions-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 0.75rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: var(--mj-radius-md);\n    margin-bottom: 0.75rem;\n  }\n\n  .mobile-actions-bar .status-badge {\n    padding: 0.25rem 0.625rem;\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    border-radius: var(--mj-radius-full);\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  }\n\n  .app-stats {\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .app-content {\n    padding: 0.75rem;\n  }\n\n  /* Entities grid in expanded view */\n  .entities-grid {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n\n  .entity-item {\n    padding: 0.5rem;\n  }\n\n  .entity-item .entity-name {\n    font-size: 0.875rem;\n    word-break: break-word;\n  }\n\n  /* Loading container compact */\n  .loading-container {\n    padding: 2rem 1rem;\n  }\n}\n\n/* Small mobile (< 375px) - Extra compact */\n@media (max-width: 374px) {\n  .scrollable-content {\n    padding: 0.375rem;\n  }\n\n  .app-header {\n    padding: 0.625rem;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-application-management', template: "<!--\n  Interior chrome \u2014 see Section 10 of explorer-chrome-conventions.\n-->\n<mj-page-header-interior\n  AriaLabel=\"Filter applications\"\n  Title=\"Applications\"\n  Subtitle=\"Configure applications and their entity associations\">\n  <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72.\n       Partition badges (entities/public) stay dropped \u2014 Active/Inactive\n       chips in [toolbar] handle the partition signal. -->\n  <div meta>\n    <mj-stat-badge\n      [Count]=\"filteredApplications.length\"\n      [Total]=\"applications.length\"\n      Label=\"applications\">\n    </mj-stat-badge>\n  </div>\n  <div toolbar>\n    <!-- Concise-chrome control bar: search \u00B7 Filter. Status lives behind the\n         one Filter button; applied filters show as removable chips below the\n         card. On mobile the popover docks as a bottom sheet. -->\n    <mj-page-search\n      Placeholder=\"Search applications by name or description...\"\n      [Value]=\"filters$.value.search\"\n      (ValueChange)=\"updateFilter({ search: $event })\">\n    </mj-page-search>\n    <mj-filter-popover\n      Label=\"Filters\"\n      Icon=\"fa-solid fa-filter\"\n      [ActiveCount]=\"TotalActiveFilterCount\"\n      [ShowClearAll]=\"TotalActiveFilterCount > 0\"\n      (ClearAllRequested)=\"clearAllAppliedFilters()\">\n      <mj-filter-panel\n        [Fields]=\"filterFields\"\n        [Values]=\"filterValues\"\n        (ValuesChange)=\"onFilterPanelChange($event)\"\n        (Reset)=\"clearAllAppliedFilters()\">\n      </mj-filter-panel>\n    </mj-filter-popover>\n  </div>\n  <div actions>\n    <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refreshData()\"></mj-refresh-button>\n    <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewApplication()\" aria-label=\"Add new application\">\n      <i class=\"fa-solid fa-plus\"></i> <span class=\"mj-action-label\">Add Application</span>\n    </button>\n  </div>\n</mj-page-header-interior>\n\n<!-- Scrollable Content Section \u2014 owned by <mj-page-body-interior>. -->\n<mj-page-body-interior>\n    <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n      <mj-loading text=\"Loading applications...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\" role=\"alert\">\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 mjButton variant=\"primary\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Applications List -->\n  @if (!isLoading && !error) {\n    <div class=\"applications-list\" role=\"list\">\n        @for (app of filteredApplications; track app.ID) {\n          <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\" role=\"listitem\">\n            <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\" role=\"button\" [attr.aria-expanded]=\"isAppExpanded(app.ID)\">\n              <div class=\"app-info\">\n                <div class=\"app-icon-wrapper\">\n                  <i [class]=\"'fa-solid ' + getAppIcon(app)\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"app-details\">\n                  <h3 class=\"app-name\">{{ app.Name }}</h3>\n                  <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n                </div>\n              </div>\n\n              <div class=\"app-meta\">\n                <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n                  {{ getAppStatusLabel(app) }}\n                </span>\n                <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n                  <button\n                    mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"editApplication(app)\"\n                    title=\"Edit\"\n                    [attr.aria-label]=\"'Edit ' + app.Name\"\n                  >\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button\n                    mjButton variant=\"danger\" size=\"sm\"\n                    (click)=\"confirmDeleteApplication(app)\"\n                    title=\"Delete\"\n                    [attr.aria-label]=\"'Delete ' + app.Name\"\n                  >\n                    <i class=\"fa-solid fa-trash\"></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 (isAppExpanded(app.ID)) {\n              <div class=\"app-content\">\n                <!-- Mobile-only actions bar -->\n                <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n                  <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n                    {{ getAppStatusLabel(app) }}\n                  </span>\n                  <div class=\"mobile-action-buttons\">\n                    <button\n                      mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"editApplication(app)\"\n                      title=\"Edit\"\n                      [attr.aria-label]=\"'Edit ' + app.Name\"\n                    >\n                      <i class=\"fa-solid fa-edit\"></i>\n                      <span class=\"btn-label\">Edit</span>\n                    </button>\n                    <button\n                      mjButton variant=\"danger\" size=\"sm\"\n                      (click)=\"confirmDeleteApplication(app)\"\n                      title=\"Delete\"\n                      [attr.aria-label]=\"'Delete ' + app.Name\"\n                    >\n                      <i class=\"fa-solid fa-trash\"></i>\n                      <span class=\"btn-label\">Delete</span>\n                    </button>\n                  </div>\n                </div>\n\n                <div class=\"app-stats\">\n                  <div class=\"stat-item\">\n                    <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                    <span class=\"stat-label\">Entities:</span>\n                    <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</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\">{{ app.__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\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n                  </div>\n                </div>\n\n                <div class=\"entities-section\">\n                  <h4 class=\"section-title\">\n                    <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                    Application Entities\n                  </h4>\n\n                  @if (getAppEntities(app.ID).length > 0) {\n                    <div class=\"entities-grid\">\n                      @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n                        @if (getEntityInfo(appEntity.EntityID); as entity) {\n                          <div class=\"entity-item\">\n                            <div class=\"entity-name\">{{ entity.DisplayNameOrName }}</div>\n                            <div class=\"entity-meta\">\n                              @if (appEntity.DefaultForNewUser) {\n                                <span class=\"entity-badge public\">Public</span>\n                              }\n                              <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n                            </div>\n                          </div>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <p class=\"no-entities\">No entities configured for this application</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        @if (filteredApplications.length === 0) {\n          <mj-empty-state\n            [Variant]=\"IsListNarrowed ? 'no-results' : 'empty'\"\n            Icon=\"fa-solid fa-cubes\"\n            Title=\"No applications found\"\n            Message=\"Try adjusting your filters or create a new application\"\n            [ActionText]=\"IsListNarrowed ? 'Reset filters' : ''\"\n            ActionIcon=\"fa-solid fa-rotate-left\"\n            (Action)=\"resetAllFiltersAndSearch()\" />\n        }\n    </div>\n  }\n  </mj-page-body-interior>\n\n  <!-- Application Dialog -->\n  <mj-application-dialog\n    [visible]=\"showApplicationDialog\"\n    [data]=\"applicationDialogData\"\n    (result)=\"onApplicationDialogResult($event)\"\n  ></mj-application-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedApp) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\" role=\"presentation\">\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-description\"\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-description\">\n          <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n          <mj-alert Variant=\"warning\" Message=\"This will remove all entity associations for this application.\" />\n        </div>\n        <div class=\"modal-footer\">\n          <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n          <button mjButton variant=\"danger\" (click)=\"deleteApplication()\" [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 Application\n            }\n          </button>\n          <button mjButton (click)=\"showDeleteConfirm = false\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* =============================================================================\n   Shared Admin Patterns - MJ Design System\n   Common styles shared across all admin settings components.\n   Component-specific CSS files override these values where needed.\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   Host & Container\n   ----------------------------------------------------------------------------- */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n   Sticky Header\n   ----------------------------------------------------------------------------- */\n.sticky-header {\n  flex-shrink: 0;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n   Scrollable Content\n   ----------------------------------------------------------------------------- */\n.scrollable-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n  .scrollable-content {\n    padding: 1.5rem 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .scrollable-content {\n    padding: 2rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .scrollable-content {\n    padding: 2rem 2.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Action Buttons (In Sticky Header)\n   ----------------------------------------------------------------------------- */\n.action-buttons {\n  flex-shrink: 0;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .action-buttons {\n    padding: 1rem 1.5rem;\n  }\n}\n\n@media (max-width: 639px) {\n  .action-buttons {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Statistics Cards Grid - Static Display (Non-interactive)\n   ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n  padding: 0 1rem 0.75rem 1rem;\n  background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n  .mj-grid-4 {\n    grid-template-columns: repeat(4, 1fr);\n    padding: 0 1.5rem 1rem 1.5rem;\n    gap: 0.75rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-grid-4 {\n    gap: 1rem;\n  }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  padding: 1rem;\n  box-shadow: var(--mj-shadow-sm);\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  border: 1px solid var(--mj-border-default);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (min-width: 768px) {\n  .mj-card {\n    padding: 1rem 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Containers\n   ----------------------------------------------------------------------------- */\n.stat-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n  .stat-icon {\n    width: 52px;\n    height: 52px;\n    font-size: 1.375rem;\n  }\n}\n\n.stat-icon-total {\n  background: var(--mj-color-accent-300);\n  color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Content Typography\n   ----------------------------------------------------------------------------- */\n.stat-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.stat-content .stat-value {\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1;\n  letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-value {\n    font-size: 2rem;\n  }\n}\n\n.stat-content .stat-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n  .stat-content .stat-label {\n    font-size: 0.8125rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Filters Section\n   ----------------------------------------------------------------------------- */\n.filters-section {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  margin: 0 1rem 0.75rem 1rem;\n  padding: 0.75rem;\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .filters-section {\n    margin: 0 1.5rem 1rem 1.5rem;\n    padding: 1rem 1.25rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n  .filters-row {\n    gap: 1.5rem;\n  }\n}\n\n.mj-filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.mj-filter-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-full);\n  padding: 4px;\n  gap: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Search Input\n   ----------------------------------------------------------------------------- */\n.mj-search {\n  position: relative;\n  flex: 1;\n  min-width: 200px;\n}\n\n@media (min-width: 640px) {\n  .mj-search {\n    min-width: 280px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .mj-search {\n    min-width: 400px;\n    max-width: 600px;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search {\n    min-width: 500px;\n    max-width: 800px;\n  }\n}\n\n.mj-search .mj-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-icon {\n    left: 1.25rem;\n    font-size: 1.125rem;\n  }\n}\n\n.mj-search .mj-search-input {\n  width: 100%;\n  padding: 0.875rem 1rem 0.875rem 2.75rem;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n  .mj-search .mj-search-input {\n    padding: 1rem 1.25rem 1rem 3.25rem;\n    font-size: 1.0625rem;\n  }\n}\n\n@media (min-width: 1440px) {\n  .mj-search .mj-search-input {\n    padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n  }\n}\n\n.mj-search .mj-search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   Content Area\n   ----------------------------------------------------------------------------- */\n.content-area {\n  flex: 1 1 auto;\n  overflow: visible;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-xl);\n  box-shadow: var(--mj-shadow-sm);\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Expand Button\n   ----------------------------------------------------------------------------- */\n.expand-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-radius: var(--mj-radius-full);\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Status Badge\n   ----------------------------------------------------------------------------- */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n  font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile Actions Bar\n   ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n  display: none;\n}\n\n.mobile-action-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Empty State\n   ----------------------------------------------------------------------------- */\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n  font-size: 4rem;\n  color: var(--mj-border-default);\n  margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n  font-size: 1rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Loading State\n   ----------------------------------------------------------------------------- */\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Error State\n   ----------------------------------------------------------------------------- */\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.error-container .error-icon {\n  font-size: 3.5rem;\n  color: var(--mj-status-error);\n  margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n  font-size: 1.0625rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Dialog\n   ----------------------------------------------------------------------------- */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  max-width: 500px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n  padding: 1.5rem;\n}\n\n.modal-body p {\n  font-size: 1rem;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n}\n\n.modal-body p:last-child {\n  margin-bottom: 0;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-start;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n  .modal-dialog {\n    width: 95%;\n    max-height: 85vh;\n  }\n\n  .modal-header {\n    padding: 1rem;\n  }\n\n  .modal-header .modal-title {\n    font-size: 1.125rem;\n  }\n\n  .modal-body {\n    padding: 1rem;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n}\n\n/* The legacy \"MJ Button System\" rule block (.mj-btn / .mj-btn-primary /\n   .mj-btn-secondary / .mj-btn-ghost / .mj-btn-danger / .mj-btn-sm /\n   .mj-btn-icon-only / .mj-btn-icon-mobile) was removed 2026-05-19. These\n   rules pre-dated the mjButton directive standardization (the directive\n   uses BEM modifiers like .mj-btn--primary, single-dash names like\n   .mj-btn-primary don't match it anyway). The base .mj-btn rule WAS active\n   though \u2014 its component-scoped specificity outranked button.scss's global\n   directive styles, so admin sub-page buttons rendered pill-shaped + 44px\n   regardless of the variant/size requested via mjButton inputs. Removing the\n   rule lets every sub-page fall back to the directive's intended look. */\n\n/* -----------------------------------------------------------------------------\n   Filter Button (Mobile Only)\n   ----------------------------------------------------------------------------- */\n.filter-button {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-full);\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.filter-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n  font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Filter Modal (Mobile Bottom Sheet)\n   ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0;\n}\n\n.filter-modal {\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n  box-shadow: var(--mj-shadow-2xl);\n  width: 100%;\n  max-height: 80vh;\n  overflow: hidden;\n  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.filter-modal-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.filter-modal-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.375rem;\n}\n\n.filter-modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-full);\n  transition: all 0.2s ease;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-modal-close:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n  padding: 1.5rem;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n.filter-modal-footer {\n  display: flex;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n  flex: 1;\n  margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.filter-group-label {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin: 0;\n}\n\n.filter-group-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 56px;\n}\n\n.filter-option:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n  background: var(--mj-color-accent-300);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.filter-option-label {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Utility Classes\n   ----------------------------------------------------------------------------- */\n.text-danger {\n  color: var(--mj-status-error);\n}\n\n.text-warning {\n  color: var(--mj-color-warning-500);\n}\n\n.text-success {\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Animations\n   ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUpFromBottom {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Focus Indicators\n   ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Accessibility: Reduced Motion\n   ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n", "/* =============================================================================\n   Application Management Component - Component-Specific Styles\n   Shared patterns are in ../shared/styles/_admin-patterns.css\n   ============================================================================= */\n\n/* :host already provides flex column / 100% height / overflow hidden via\n   _admin-patterns.css. No bespoke container wrapper \u2014 see Section 10 of\n   explorer-chrome-conventions. */\n\n/* Status chip group inside <mj-page-header-interior>'s [toolbar] slot. */\n.status-chips {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Stat Icon Overrides (Component-specific colors)\n   ----------------------------------------------------------------------------- */\n.stat-icon-entities {\n  background: var(--mj-color-warning-50);\n  color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n   Applications List\n   ----------------------------------------------------------------------------- */\n.applications-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Card - Interactive\n   ----------------------------------------------------------------------------- */\n.app-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-xl);\n  overflow: hidden;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n\n.app-card:hover {\n  box-shadow: var(--mj-shadow-md);\n  border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded {\n  box-shadow: var(--mj-shadow-lg);\n  border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded .expand-btn i {\n  transform: rotate(180deg);\n}\n\n.app-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(--mj-bg-surface);\n  transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.app-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.app-icon-wrapper {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-color-accent-300);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-primary);\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.app-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.app-details .app-name {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 0.25rem 0;\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n.app-details .app-description {\n  font-size: 0.9375rem;\n  color: var(--mj-text-secondary);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n  .app-details .app-description {\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n  }\n}\n\n.app-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Actions\n   ----------------------------------------------------------------------------- */\n.app-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Application Content (Expanded)\n   ----------------------------------------------------------------------------- */\n.app-content {\n  padding: 1.5rem;\n  background: var(--mj-bg-page);\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats {\n  display: flex;\n  gap: 2rem;\n  margin-bottom: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.app-stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.9375rem;\n}\n\n.app-stats .stat-item i {\n  color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-label {\n  color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n   Entities Section\n   ----------------------------------------------------------------------------- */\n.entities-section {\n  padding: 1rem;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n}\n\n.entities-section .section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 1.125rem;\n}\n\n.entities-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  }\n}\n\n.entity-item {\n  padding: 0.75rem;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item .entity-name {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.entity-item .entity-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n.entity-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.entity-badge.public {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence {\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n}\n\n.no-entities {\n  color: var(--mj-text-secondary);\n  font-size: 0.9375rem;\n  text-align: center;\n  padding: 1rem;\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Body Override - warning callout\n   ----------------------------------------------------------------------------- */\n.modal-body p {\n  font-size: 1.0625rem;\n}\n\n\n/* -----------------------------------------------------------------------------\n   Desktop (1440px+) - Large Screen Overrides\n   ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n  .application-management-container {\n    margin: 0 auto;\n  }\n\n  .mj-grid-4 {\n    padding: 0 2rem 1rem 2rem;\n    gap: 1.25rem;\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Mobile-specific adjustments (< 640px)\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  /* Hide stats cards on mobile to save space */\n  .mj-grid-4 {\n    display: none !important;\n  }\n\n  /* More compact scrollable content */\n  .scrollable-content {\n    padding: 0.5rem;\n  }\n\n  /* Modal styles */\n  .modal-backdrop {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog {\n    border-radius: var(--mj-radius-2xl);\n    max-height: 95vh;\n  }\n\n  /* App Card Mobile Layout */\n  .applications-list {\n    gap: 0.5rem;\n  }\n\n  .app-card {\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n  }\n\n  .app-header {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.5rem;\n    padding: 0.75rem;\n  }\n\n  .app-info {\n    flex: 1;\n    min-width: 0;\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n\n  .app-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    font-size: 0.875rem;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-md);\n  }\n\n  .app-details {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .app-details .app-name {\n    font-size: 0.9375rem;\n    line-height: 1.3;\n    margin-bottom: 0.125rem;\n  }\n\n  .app-details .app-description {\n    font-size: 0.8125rem;\n    -webkit-line-clamp: 1;\n    line-clamp: 1;\n  }\n\n  /* On mobile: hide status and actions in header, show only expand button */\n  .app-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  .app-meta .status-badge {\n    display: none;\n  }\n\n  .app-meta .app-actions {\n    display: none;\n  }\n\n  .expand-btn {\n    flex-shrink: 0;\n    min-width: 36px;\n    min-height: 36px;\n    padding: 0.5rem;\n    border-radius: var(--mj-radius-full);\n  }\n\n  .expand-btn i {\n    font-size: 1rem;\n  }\n\n  /* Mobile actions bar - visible on mobile only */\n  .mobile-actions-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 0.75rem;\n    padding: 0.75rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: var(--mj-radius-md);\n    margin-bottom: 0.75rem;\n  }\n\n  .mobile-actions-bar .status-badge {\n    padding: 0.25rem 0.625rem;\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    border-radius: var(--mj-radius-full);\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  }\n\n  .app-stats {\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .app-content {\n    padding: 0.75rem;\n  }\n\n  /* Entities grid in expanded view */\n  .entities-grid {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n\n  .entity-item {\n    padding: 0.5rem;\n  }\n\n  .entity-item .entity-name {\n    font-size: 0.875rem;\n    word-break: break-word;\n  }\n\n  /* Loading container compact */\n  .loading-container {\n    padding: 2rem 1rem;\n  }\n}\n\n/* Small mobile (< 375px) - Extra compact */\n@media (max-width: 374px) {\n  .scrollable-content {\n    padding: 0.375rem;\n  }\n\n  .app-header {\n    padding: 0.625rem;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationManagementComponent, { className: "ApplicationManagementComponent", filePath: "src/lib/application-management/application-management.component.ts", lineNumber: 30 }); })();
 //# sourceMappingURL=application-management.component.js.map