@memberjunction/ng-entity-viewer 6.1.0-edge.2 → 6.1.0-edge.3

package/dist/lib/entity-data-grid/entity-data-grid.component.js

@@ -528,10 +528,13 @@ function EntityDataGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Message", ctx_r2.errorMessage);
+    i0.ɵɵproperty("Size", ctx_r2.EmptyStateSize)("Message", ctx_r2.errorMessage);
 } }
 function EntityDataGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 6);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Size", ctx_r2.EmptyStateSize);
 } }
 function EntityDataGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
@@ -1050,6 +1053,10 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     get Height() {
         return this._height;
     }
+    /** Hug-height related grids get a top-aligned inline empty, not a padded hero. */
+    get EmptyStateSize() {
+        return typeof this._height === 'number' ? 'inline' : 'default';
+    }
     _rowHeight = 40;
     set RowHeight(value) {
         this._rowHeight = value;
@@ -4772,15 +4779,15 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.gridContainer = _t.first);
-        } }, inputs: { Params: "Params", AllowLoad: "AllowLoad", AutoRefreshOnParamsChange: "AutoRefreshOnParamsChange", PaginationMode: "PaginationMode", PageSize: "PageSize", CacheBlockSize: "CacheBlockSize", MaxBlocksInCache: "MaxBlocksInCache", ShowPager: "ShowPager", ExportDataProvider: "ExportDataProvider", ShowRecycleBin: "ShowRecycleBin", PagerPageNumber: "PagerPageNumber", TotalRowCount: "TotalRowCount", Data: "Data", Columns: "Columns", GridState: "GridState", AllowColumnReorder: "AllowColumnReorder", AllowColumnResize: "AllowColumnResize", AllowColumnToggle: "AllowColumnToggle", ShowHeader: "ShowHeader", AllowSorting: "AllowSorting", AllowMultiSort: "AllowMultiSort", ServerSideSorting: "ServerSideSorting", AllowColumnFilters: "AllowColumnFilters", ShowSearch: "ShowSearch", SelectionMode: "SelectionMode", SelectedKeys: "SelectedKeys", KeyField: "KeyField", EditMode: "EditMode", AllowAdd: "AllowAdd", AllowDelete: "AllowDelete", Height: "Height", RowHeight: "RowHeight", WrapText: "WrapText", VirtualScroll: "VirtualScroll", ShowRowNumbers: "ShowRowNumbers", FillWidth: "FillWidth", Striped: "Striped", GridLines: "GridLines", VisualConfig: "VisualConfig", ShowToolbar: "ShowToolbar", ToolbarConfig: "ToolbarConfig", StateKey: "StateKey", AutoPersistState: "AutoPersistState", StatePersistDebounce: "StatePersistDebounce", RefreshDebounce: "RefreshDebounce", FilterText: "FilterText", ShowNewButton: "ShowNewButton", ShowRefreshButton: "ShowRefreshButton", ShowExportButton: "ShowExportButton", ShowDeleteButton: "ShowDeleteButton", ShowCompareButton: "ShowCompareButton", ShowMergeButton: "ShowMergeButton", ShowAddToListButton: "ShowAddToListButton", ShowDuplicateSearchButton: "ShowDuplicateSearchButton", ShowCommunicationButton: "ShowCommunicationButton", AutoNavigate: "AutoNavigate", NavigateOnDoubleClick: "NavigateOnDoubleClick", CreateRecordMode: "CreateRecordMode", NewRecordValues: "NewRecordValues", ShowEntityActionButtons: "ShowEntityActionButtons", EntityActions: "EntityActions", AutoLoadEntityActions: "AutoLoadEntityActions", AggregatesConfig: "AggregatesConfig" }, outputs: { PageChange: "PageChange", AggregatesLoaded: "AggregatesLoaded", BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", ForeignKeyClick: "ForeignKeyClick", BeforeCellEdit: "BeforeCellEdit", AfterCellEditBegin: "AfterCellEditBegin", BeforeCellEditCommit: "BeforeCellEditCommit", AfterCellEditCommit: "AfterCellEditCommit", BeforeCellEditCancel: "BeforeCellEditCancel", AfterCellEditCancel: "AfterCellEditCancel", BeforeRowSave: "BeforeRowSave", AfterRowSave: "AfterRowSave", BeforeRowDelete: "BeforeRowDelete", AfterRowDelete: "AfterRowDelete", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeDataRefresh: "BeforeDataRefresh", AfterDataRefresh: "AfterDataRefresh", BeforeSort: "BeforeSort", AfterSort: "AfterSort", BeforeColumnReorder: "BeforeColumnReorder", AfterColumnReorder: "AfterColumnReorder", BeforeColumnResize: "BeforeColumnResize", AfterColumnResize: "AfterColumnResize", BeforeColumnVisibilityChange: "BeforeColumnVisibilityChange", AfterColumnVisibilityChange: "AfterColumnVisibilityChange", GridStateChanged: "GridStateChanged", AddRequested: "AddRequested", DeleteRequested: "DeleteRequested", ExportRequested: "ExportRequested", NewButtonClick: "NewButtonClick", RefreshButtonClick: "RefreshButtonClick", ExportButtonClick: "ExportButtonClick", DeleteButtonClick: "DeleteButtonClick", CompareButtonClick: "CompareButtonClick", MergeButtonClick: "MergeButtonClick", AddToListButtonClick: "AddToListButtonClick", DuplicateSearchButtonClick: "DuplicateSearchButtonClick", CommunicationButtonClick: "CommunicationButtonClick", ManageColumnsRequested: "ManageColumnsRequested", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 16, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Could not load data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Message"], ["Icon", "fa-solid fa-inbox", "Title", "No data to display", 1, "mj-grid-state-fill"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "mj-aggregate-summary"], [3, "closed", "visible", "config"], [3, "DriverClass", "Context"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], [3, "EntityName"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export", 1, "toolbar-button", 3, "disabled"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Compare selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Merge selected records", 1, "toolbar-button", 3, "disabled"], [1, "toolbar-button", 3, "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "disabled"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Add New", 1, "toolbar-button"], ["title", "Refresh", 1, "toolbar-button", 3, "disabled"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Export", 1, "toolbar-button"], ["title", "Column Chooser", 1, "toolbar-button"], [1, "toolbar-overflow"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["aria-label", "Clear search", 1, "search-clear"], ["aria-label", "Clear search", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "toolbar-button", 3, "class", "disabled", "title"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class"], ["title", "Create new record", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "button-text"], ["title", "Refresh data", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["title", "Export", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "Compare selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-compare"], ["title", "Merge selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-merge"], [1, "toolbar-button", 3, "click", "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-envelope"], ["title", "Add New", 1, "toolbar-button", 3, "click"], ["title", "Refresh", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], ["title", "Export", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Column Chooser", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "toolbar-overflow", 3, "click"], ["title", "More actions", 1, "toolbar-button", "overflow-trigger", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "overflow-menu"], [1, "overflow-item"], [1, "overflow-divider"], [1, "overflow-item", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "overflow-section-label"], [1, "overflow-item", 3, "disabled"], [1, "overflow-item", 3, "click", "disabled"], [1, "aggregate-card"], [1, "aggregate-card-loading"], [1, "aggregate-card-icon"], [1, "aggregate-card-content"], [1, "aggregate-card-label"], [1, "aggregate-card-value"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["text", "Loading..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Could not load data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Action", "Message"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "PageChange", "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "aggregate-summary-content"], [1, "aggregate-summary-item"], [1, "aggregate-loading"], [1, "agg-summary-label"], [1, "agg-summary-value"], [3, "Completed", "Cancelled", "DriverClass", "Context"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Params: "Params", AllowLoad: "AllowLoad", AutoRefreshOnParamsChange: "AutoRefreshOnParamsChange", PaginationMode: "PaginationMode", PageSize: "PageSize", CacheBlockSize: "CacheBlockSize", MaxBlocksInCache: "MaxBlocksInCache", ShowPager: "ShowPager", ExportDataProvider: "ExportDataProvider", ShowRecycleBin: "ShowRecycleBin", PagerPageNumber: "PagerPageNumber", TotalRowCount: "TotalRowCount", Data: "Data", Columns: "Columns", GridState: "GridState", AllowColumnReorder: "AllowColumnReorder", AllowColumnResize: "AllowColumnResize", AllowColumnToggle: "AllowColumnToggle", ShowHeader: "ShowHeader", AllowSorting: "AllowSorting", AllowMultiSort: "AllowMultiSort", ServerSideSorting: "ServerSideSorting", AllowColumnFilters: "AllowColumnFilters", ShowSearch: "ShowSearch", SelectionMode: "SelectionMode", SelectedKeys: "SelectedKeys", KeyField: "KeyField", EditMode: "EditMode", AllowAdd: "AllowAdd", AllowDelete: "AllowDelete", Height: "Height", RowHeight: "RowHeight", WrapText: "WrapText", VirtualScroll: "VirtualScroll", ShowRowNumbers: "ShowRowNumbers", FillWidth: "FillWidth", Striped: "Striped", GridLines: "GridLines", VisualConfig: "VisualConfig", ShowToolbar: "ShowToolbar", ToolbarConfig: "ToolbarConfig", StateKey: "StateKey", AutoPersistState: "AutoPersistState", StatePersistDebounce: "StatePersistDebounce", RefreshDebounce: "RefreshDebounce", FilterText: "FilterText", ShowNewButton: "ShowNewButton", ShowRefreshButton: "ShowRefreshButton", ShowExportButton: "ShowExportButton", ShowDeleteButton: "ShowDeleteButton", ShowCompareButton: "ShowCompareButton", ShowMergeButton: "ShowMergeButton", ShowAddToListButton: "ShowAddToListButton", ShowDuplicateSearchButton: "ShowDuplicateSearchButton", ShowCommunicationButton: "ShowCommunicationButton", AutoNavigate: "AutoNavigate", NavigateOnDoubleClick: "NavigateOnDoubleClick", CreateRecordMode: "CreateRecordMode", NewRecordValues: "NewRecordValues", ShowEntityActionButtons: "ShowEntityActionButtons", EntityActions: "EntityActions", AutoLoadEntityActions: "AutoLoadEntityActions", AggregatesConfig: "AggregatesConfig" }, outputs: { PageChange: "PageChange", AggregatesLoaded: "AggregatesLoaded", BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", ForeignKeyClick: "ForeignKeyClick", BeforeCellEdit: "BeforeCellEdit", AfterCellEditBegin: "AfterCellEditBegin", BeforeCellEditCommit: "BeforeCellEditCommit", AfterCellEditCommit: "AfterCellEditCommit", BeforeCellEditCancel: "BeforeCellEditCancel", AfterCellEditCancel: "AfterCellEditCancel", BeforeRowSave: "BeforeRowSave", AfterRowSave: "AfterRowSave", BeforeRowDelete: "BeforeRowDelete", AfterRowDelete: "AfterRowDelete", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeDataRefresh: "BeforeDataRefresh", AfterDataRefresh: "AfterDataRefresh", BeforeSort: "BeforeSort", AfterSort: "AfterSort", BeforeColumnReorder: "BeforeColumnReorder", AfterColumnReorder: "AfterColumnReorder", BeforeColumnResize: "BeforeColumnResize", AfterColumnResize: "AfterColumnResize", BeforeColumnVisibilityChange: "BeforeColumnVisibilityChange", AfterColumnVisibilityChange: "AfterColumnVisibilityChange", GridStateChanged: "GridStateChanged", AddRequested: "AddRequested", DeleteRequested: "DeleteRequested", ExportRequested: "ExportRequested", NewButtonClick: "NewButtonClick", RefreshButtonClick: "RefreshButtonClick", ExportButtonClick: "ExportButtonClick", DeleteButtonClick: "DeleteButtonClick", CompareButtonClick: "CompareButtonClick", MergeButtonClick: "MergeButtonClick", AddToListButtonClick: "AddToListButtonClick", DuplicateSearchButtonClick: "DuplicateSearchButtonClick", CommunicationButtonClick: "CommunicationButtonClick", ManageColumnsRequested: "ManageColumnsRequested", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 16, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Could not load data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Size", "Message"], ["Icon", "fa-solid fa-inbox", "Title", "No data to display", 1, "mj-grid-state-fill", 3, "Size"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "mj-aggregate-summary"], [3, "closed", "visible", "config"], [3, "DriverClass", "Context"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], [3, "EntityName"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export", 1, "toolbar-button", 3, "disabled"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Compare selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Merge selected records", 1, "toolbar-button", 3, "disabled"], [1, "toolbar-button", 3, "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "disabled"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "disabled"], ["title", "Add New", 1, "toolbar-button"], ["title", "Refresh", 1, "toolbar-button", 3, "disabled"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger"], ["title", "Export", 1, "toolbar-button"], ["title", "Column Chooser", 1, "toolbar-button"], [1, "toolbar-overflow"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["aria-label", "Clear search", 1, "search-clear"], ["aria-label", "Clear search", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "toolbar-button", 3, "class", "disabled", "title"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class"], ["title", "Create new record", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "button-text"], ["title", "Refresh data", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["title", "Export", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid"], ["title", "Delete selected records", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "Compare selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-compare"], ["title", "Merge selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-code-merge"], [1, "toolbar-button", 3, "click", "title", "disabled"], ["title", "Search for duplicate records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Send message to selected records", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-envelope"], ["title", "Add New", 1, "toolbar-button", 3, "click"], ["title", "Refresh", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], ["title", "Delete Selected", 1, "toolbar-button", "toolbar-button-danger", 3, "click"], ["title", "Export", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Column Chooser", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "toolbar-overflow", 3, "click"], ["title", "More actions", 1, "toolbar-button", "overflow-trigger", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "overflow-menu"], [1, "overflow-item"], [1, "overflow-divider"], [1, "overflow-item", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "overflow-section-label"], [1, "overflow-item", 3, "disabled"], [1, "overflow-item", 3, "click", "disabled"], [1, "aggregate-card"], [1, "aggregate-card-loading"], [1, "aggregate-card-icon"], [1, "aggregate-card-content"], [1, "aggregate-card-label"], [1, "aggregate-card-value"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["text", "Loading..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Could not load data", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "mj-grid-state-fill", 3, "Action", "Size", "Message"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"], [3, "PageChange", "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "aggregate-summary-content"], [1, "aggregate-summary-item"], [1, "aggregate-loading"], [1, "agg-summary-label"], [1, "agg-summary-value"], [3, "Completed", "Cancelled", "DriverClass", "Context"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", null, 0);
             i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Template, 27, 19, "div", 1);
             i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_3_Template, 4, 1, "div", 2);
             i0.ɵɵelementStart(4, "div", 3);
             i0.ɵɵconditionalCreate(5, EntityDataGridComponent_Conditional_5_Template, 2, 0, "div", 4);
-            i0.ɵɵconditionalCreate(6, EntityDataGridComponent_Conditional_6_Template, 1, 1, "mj-empty-state", 5);
-            i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_7_Template, 1, 0, "mj-empty-state", 6);
+            i0.ɵɵconditionalCreate(6, EntityDataGridComponent_Conditional_6_Template, 1, 2, "mj-empty-state", 5);
+            i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_7_Template, 1, 1, "mj-empty-state", 6);
             i0.ɵɵconditionalCreate(8, EntityDataGridComponent_Conditional_8_Template, 1, 9, "ag-grid-angular", 7);
             i0.ɵɵconditionalCreate(9, EntityDataGridComponent_Conditional_9_Template, 1, 13, "ag-grid-angular", 8);
             i0.ɵɵelementEnd();
@@ -4840,7 +4847,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                             animate('100ms ease-in', style({ opacity: 0, transform: 'translateY(-8px)' }))
                         ])
                     ])
-                ], template: "<!-- Grid Container -->\n<div\n  #gridContainer\n  [class]=\"gridContainerClasses.join(' ')\"\n  [style.height]=\"gridHeightStyle\">\n\n  <!-- Toolbar -->\n  @if (ShowToolbar) {\n    <div class=\"mj-grid-toolbar\">\n      <div class=\"toolbar-left\">\n        <!-- Search -->\n        @if (ShowSearch) {\n          <div class=\"toolbar-search\">\n            <i class=\"fa-solid fa-search search-icon\"></i>\n            <input\n              type=\"text\"\n              class=\"search-input\"\n              [placeholder]=\"ToolbarConfig.searchPlaceholder || 'Search...'\"\n              [value]=\"FilterText\"\n              (input)=\"FilterText = $any($event.target).value\" />\n            @if (FilterText) {\n              <button\n                class=\"search-clear\"\n                (click)=\"FilterText = ''\"\n                aria-label=\"Clear search\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Custom Left Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position !== 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <!-- Row Count -->\n        @if (ToolbarConfig.showRowCount !== false) {\n          <span class=\"row-count\">\n            {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n          </span>\n        }\n        <!-- Selection Count -->\n        @if (ToolbarConfig.showSelectionCount && SelectedKeys.length > 0) {\n          <span class=\"selection-count\">\n            ({{ SelectedKeys.length }} selected)\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Recycle Bin chip \u2014 auto-hides when no deleted records, no tracking,\n             or user lacks Delete permission. -->\n        @if (ShowRecycleBin) {\n          <mj-recycle-bin-chip [EntityName]=\"entityInfoName\"></mj-recycle-bin-chip>\n        }\n        <!-- New/Add Button (predefined) -->\n        @if (ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Create new record\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span class=\"button-text\">New</span>\n          </button>\n        }\n        <!-- Refresh Button (predefined) -->\n        @if (ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh data\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"loading\"></i>\n            <span class=\"button-text\">Refresh</span>\n          </button>\n        }\n        <!-- Export Button (predefined) -->\n        @if (ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            [disabled]=\"IsPreparingExport\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid\" [class.fa-file-excel]=\"!IsPreparingExport\" [class.fa-spinner]=\"IsPreparingExport\" [class.fa-spin]=\"IsPreparingExport\"></i>\n            <span class=\"button-text\">Export</span>\n          </button>\n        }\n        <!-- Delete Button (predefined) -->\n        @if (ShowDeleteButton && HasSelection) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete selected records\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            <span class=\"button-text\">Delete</span>\n          </button>\n        }\n        <!-- Compare Button (predefined) -->\n        @if (ShowCompareButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Compare selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onCompareClick()\">\n            <i class=\"fa-solid fa-code-compare\"></i>\n            <span class=\"button-text\">Compare</span>\n          </button>\n        }\n        <!-- Merge Button (predefined) -->\n        @if (ShowMergeButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Merge selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onMergeClick()\">\n            <i class=\"fa-solid fa-code-merge\"></i>\n            <span class=\"button-text\">Merge</span>\n          </button>\n        }\n        <!-- Add to List Button (predefined) -->\n        @if (ShowAddToListButton) {\n          <button\n            class=\"toolbar-button\"\n            [title]=\"HasSelection ? 'Add selected records to a list' : 'Add all matching records to a list'\"\n            [disabled]=\"(!HasSelection && !ExportDataProvider) || IsPreparingAddToList\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid\" [class.fa-list-check]=\"!IsPreparingAddToList\" [class.fa-spinner]=\"IsPreparingAddToList\" [class.fa-spin]=\"IsPreparingAddToList\"></i>\n            <span class=\"button-text\">Add to List</span>\n          </button>\n        }\n        <!-- Search for Duplicates Button (predefined) -->\n        @if (ShowDuplicateSearchButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Search for duplicate records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onDuplicateSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n            <span class=\"button-text\">Find Duplicates</span>\n          </button>\n        }\n        <!-- Communication Button (predefined) -->\n        @if (ShowCommunicationButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Send message to selected records\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onCommunicationClick()\">\n            <i class=\"fa-solid fa-envelope\"></i>\n            <span class=\"button-text\">Send Message</span>\n          </button>\n        }\n        <!-- Legacy ToolbarConfig buttons -->\n        <!-- Add Button (legacy) -->\n        @if (ToolbarConfig.showAdd && AllowAdd && !ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Add New\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <!-- Refresh Button (legacy) -->\n        @if (ToolbarConfig.showRefresh !== false && !ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"loading\"></i>\n          </button>\n        }\n        <!-- Delete Button (legacy) -->\n        @if (ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete Selected\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n          </button>\n        }\n        <!-- Export Button (legacy) -->\n        @if (ToolbarConfig.showExport && !ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n          </button>\n        }\n        <!-- Column Chooser Button -->\n        @if (ToolbarConfig.showColumnChooser && AllowColumnToggle) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Column Chooser\"\n            (click)=\"onColumnChooserClick()\">\n            <i class=\"fa-solid fa-columns\"></i>\n          </button>\n        }\n        <!-- Custom Right Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position === 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n        <!-- Overflow Menu -->\n        @if (hasOverflowMenuItems) {\n          <div class=\"toolbar-overflow\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"toolbar-button overflow-trigger\"\n              title=\"More actions\"\n              (click)=\"toggleOverflowMenu()\">\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </button>\n            @if (showOverflowMenu) {\n              <div class=\"overflow-menu\" [@fadeIn]>\n                <!-- Export (if in overflow) -->\n                @if (showExportInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onExportClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-file-excel\"></i>\n                    <span>Export</span>\n                  </button>\n                }\n                <!-- Entity Actions -->\n                @if (ShowEntityActionButtons && EntityActions.length > 0) {\n                  <div class=\"overflow-divider\"></div>\n                  <div class=\"overflow-section-label\">Actions</div>\n                  @for (action of EntityActions; track action) {\n                    <button\n                      class=\"overflow-item\"\n                      [disabled]=\"!isEntityActionEnabled(action)\"\n                      (click)=\"onEntityActionClick(action); closeOverflowMenu()\">\n                      <i [class]=\"action.icon || 'fa-solid fa-bolt'\"></i>\n                      <span>{{ action.name }}</span>\n                    </button>\n                  }\n                }\n                <!-- Column Chooser (if in overflow) -->\n                @if (showColumnChooserInOverflow) {\n                  <div class=\"overflow-divider\"></div>\n                }\n                @if (showColumnChooserInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onColumnChooserClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-columns\"></i>\n                    <span>Manage Columns</span>\n                  </button>\n                }\n                <!-- Selection-dependent actions in overflow -->\n                @if (HasSelection && hasSelectionDependentOverflowActions) {\n                  <div class=\"overflow-divider\"></div>\n                  @if (showCommunicationInOverflow) {\n                    <button class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n                      <i class=\"fa-solid fa-envelope\"></i>\n                      <span>Send Message</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Aggregate Cards (displayed as summary cards above the grid) -->\n  @if (ShowAggregatePanel) {\n    <div class=\"mj-aggregate-cards\">\n      @for (agg of CardAggregates; track agg) {\n        <div class=\"aggregate-card\">\n          @if (agg.icon) {\n            <div class=\"aggregate-card-icon\">\n              <i [class]=\"agg.icon\"></i>\n            </div>\n          }\n          <div class=\"aggregate-card-content\">\n            <span class=\"aggregate-card-label\">{{ agg.label }}</span>\n            <span class=\"aggregate-card-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        </div>\n      }\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-card-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    @if (loading && rowData.length === 0) {\n      <div class=\"mj-grid-loading-overlay\">\n        <mj-loading text=\"Loading...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !loading) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        Variant=\"error\"\n        Icon=\"fa-solid fa-triangle-exclamation\"\n        Title=\"Could not load data\"\n        [Message]=\"errorMessage\"\n        ActionText=\"Retry\"\n        ActionIcon=\"fa-solid fa-arrows-rotate\"\n        (Action)=\"Refresh()\" />\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        Icon=\"fa-solid fa-inbox\"\n        Title=\"No data to display\" />\n    }\n\n    <!-- AG Grid (Client-side mode) -->\n    @if (!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)) {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [rowData]=\"rowData\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n    <!-- AG Grid (Infinite Scroll mode) -->\n    @if (!errorMessage && PaginationMode === 'infinite') {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        [rowModelType]=\"'infinite'\"\n        [cacheBlockSize]=\"CacheBlockSize\"\n        [maxBlocksInCache]=\"MaxBlocksInCache\"\n        [infiniteInitialRowCount]=\"1\"\n        [cacheOverflowSize]=\"2\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n  </div>\n\n  <!-- Pagination (opt-in via ShowPager input) -->\n  @if (ShowPager) {\n    <mj-pagination\n      [TotalRowCount]=\"totalRowCount\"\n      [PageNumber]=\"PagerPageNumber\"\n      [PageSize]=\"PageSize\"\n      [IsLoading]=\"loading\"\n      (PageChange)=\"PageChange.emit($event)\">\n    </mj-pagination>\n  }\n\n  <!-- Aggregate Summary Row (outside mj-grid-content so it's always visible) -->\n  @if (ShowAggregateSummary) {\n    <div class=\"mj-aggregate-summary\">\n      <div class=\"aggregate-summary-content\">\n        @for (agg of ColumnAggregates; track agg) {\n          <div class=\"aggregate-summary-item\">\n            @if (agg.icon) {\n              <i [class]=\"agg.icon\"></i>\n            }\n            <span class=\"agg-summary-label\">{{ agg.label }}:</span>\n            <span class=\"agg-summary-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        }\n      </div>\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n  [visible]=\"showExportDialog\"\n  [config]=\"exportDialogConfig\"\n  (closed)=\"onExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Runtime-UX driver for an entity action that names a RuntimeUXDriverClass (e.g. the Record Process\n     bulk-update runner). Mounted in-place over the grid \u2014 no parent wiring required. -->\n@if (ActiveRuntimeDriver) {\n  <mj-entity-action-ux-host\n    [DriverClass]=\"ActiveRuntimeDriver.DriverClass\"\n    [Context]=\"ActiveRuntimeDriver.Context\"\n    (Completed)=\"OnRuntimeDriverCompleted($event)\"\n    (Cancelled)=\"OnRuntimeDriverCancelled()\">\n  </mj-entity-action-ux-host>\n}\n", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  /* Header */\n  --grid-header-bg: var(--mj-bg-surface-card);\n  --grid-header-text: var(--mj-text-primary);\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: var(--mj-border-default);\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: var(--mj-bg-surface);\n  --grid-row-bg-alt: var(--mj-bg-surface-card);\n  --grid-row-hover-bg: var(--mj-bg-surface-hover);\n  --grid-row-selected-bg: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  --grid-row-selected-hover-bg: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: var(--mj-text-primary);\n  --grid-cell-border-color: var(--mj-border-subtle);\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  /* Editing */\n  --grid-edit-cell-bg: var(--mj-bg-surface);\n  --grid-edit-cell-border: var(--mj-brand-primary);\n  --grid-edit-cell-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n\n  /* Sorting */\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  /* Toolbar */\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  /* Loading */\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  /* Empty state */\n  --grid-empty-text-color: var(--mj-text-disabled);\n  --grid-empty-icon-color: var(--mj-border-strong);\n\n  display: block;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ========================================\n   Grid Container\n   ======================================== */\n\n.mj-grid-container {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--grid-border-color);\n  border-radius: var(--grid-border-radius);\n  background: var(--grid-background);\n  overflow: hidden;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.mj-grid-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--grid-toolbar-height);\n  padding: 0 12px;\n  background: var(--grid-toolbar-bg);\n  border-bottom: 1px solid var(--grid-toolbar-border-color);\n  gap: 12px;\n}\n\n.toolbar-left,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.toolbar-search {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  width: 200px;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--grid-selection-indicator-color);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear {\n  position: absolute;\n  right: 6px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button i {\n  font-size: 14px;\n}\n\n.toolbar-button-danger {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count,\n.selection-count {\n  font-weight: 500;\n}\n\n/* ========================================\n   Grid Content\n   ======================================== */\n\n.mj-grid-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container {\n  height: 100%;\n  overflow: auto;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.mj-grid-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--grid-loading-overlay-bg);\n  z-index: 10;\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n/* ========================================\n   Empty / Error State\n   ======================================== */\n\n/* Flex-fill so <mj-empty-state> placeholders occupy the grid content area\n   (the host centers its content but does not grow to fill the parent). */\n.mj-grid-state-fill {\n  flex: 1 1 auto;\n}\n\n/* ========================================\n   Header Row\n   ======================================== */\n\n.mj-grid-header {\n  display: flex;\n  min-height: var(--grid-header-height);\n  background: var(--grid-header-bg);\n  border-bottom: 2px solid var(--grid-header-border-color);\n  position: sticky;\n  top: 0;\n  z-index: 5;\n}\n\n.mj-grid-header-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  font-weight: var(--grid-header-font-weight);\n  color: var(--grid-header-text);\n  font-size: 13px;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right: 1px solid var(--grid-cell-border-color);\n  flex-shrink: 0;\n}\n\n.mj-grid-header-cell:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator i {\n  font-size: 12px;\n}\n\n.sort-index {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n/* ========================================\n   Data Rows\n   ======================================== */\n\n.mj-grid-row {\n  display: flex;\n  align-items: stretch;\n  background: var(--grid-row-bg);\n  transition: background-color 0.15s;\n  cursor: default;\n}\n\n.mj-grid-row:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ========================================\n   Data Cells\n   ======================================== */\n\n.mj-grid-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  color: var(--grid-cell-text);\n  font-size: 13px;\n  overflow: hidden;\n  border-right: 1px solid transparent;\n  flex-shrink: 0;\n}\n\n.mj-grid-cell:last-child {\n  border-right: none;\n}\n\n/* Grid lines modes */\n.grid-lines-horizontal .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n/* Cell alignment */\n.mj-grid-cell.align-left {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right {\n  justify-content: flex-end;\n}\n\n.cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Special cells */\n.row-number-cell {\n  width: 50px;\n  min-width: 50px;\n  max-width: 50px;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  background: var(--grid-header-bg);\n}\n\n.checkbox-cell {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n/* ========================================\n   Virtual Scrolling\n   ======================================== */\n\n.mj-grid-virtual-spacer {\n  flex-shrink: 0;\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input {\n    width: 100%;\n  }\n\n  .toolbar-center {\n    order: 2;\n  }\n\n  /* Hide button text on mobile */\n  .toolbar-button .button-text {\n    display: none;\n  }\n}\n\n/* ========================================\n   Toolbar Button Text\n   ======================================== */\n\n.toolbar-button .button-text {\n  font-size: 13px;\n}\n\n/* ========================================\n   Overflow Menu\n   ======================================== */\n\n.toolbar-overflow {\n  position: relative;\n}\n\n.overflow-trigger {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger i {\n  font-size: 16px;\n}\n\n.overflow-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 220px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.overflow-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item i {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label {\n  padding: 8px 16px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n  padding: 0 1px;\n}\n\n/* ========================================\n   AG Grid Customizations\n   ======================================== */\n\n.mj-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n/* AG Grid v35 uses JS-based theming (colorSchemeVariable) \u2014 no CSS variable overrides needed */\n\n/* Selected row styling - left indicator bar only, background handled by AG Grid theme */\n::ng-deep .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n/* ========================================\n   Visual Config: Header Styles\n   ======================================== */\n\n/* Flat header (minimal) */\n.header-style-flat ::ng-deep .ag-header {\n  background: var(--grid-header-bg, var(--mj-bg-surface-card));\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n.header-style-elevated.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n/* Gradient header (more prominent) */\n.header-style-gradient ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Bold header (high contrast) */\n.header-style-bold ::ng-deep .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n/* Header sort icons enhancement */\n::ng-deep .ag-header-cell-sorted-asc .ag-icon-asc,\n::ng-deep .ag-header-cell-sorted-desc .ag-icon-desc {\n  color: var(--grid-accent-color, var(--grid-sort-indicator-color, var(--mj-brand-primary)));\n}\n\n/* ========================================\n   Visual Config: Zebra Striping\n   ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* ========================================\n   Visual Config: Hover Transitions\n   ======================================== */\n\n.hover-transitions ::ng-deep .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions ::ng-deep .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n/* ========================================\n   Visual Config: Cell Padding\n   ======================================== */\n\n.cell-padding-compact ::ng-deep .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact ::ng-deep .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal ::ng-deep .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal ::ng-deep .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* ========================================\n   Visual Config: Checkbox Styles\n   ======================================== */\n\n/* Rounded checkbox */\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n/* Filled checkbox */\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked {\n  background-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n  border-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n/* ========================================\n   Cell Content Formatting\n   ======================================== */\n\n/* Right-aligned cells (numbers) */\n::ng-deep .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n::ng-deep .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n/* Empty cell placeholder */\n::ng-deep .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  transition: color 0.15s;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n::ng-deep .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n/* Email cells */\n::ng-deep .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n/* Foreign key link cells */\n::ng-deep .cell-fk-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.15s, text-decoration 0.15s;\n}\n\n::ng-deep .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n::ng-deep .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n/* URL cells */\n::ng-deep .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n/* Phone cells */\n::ng-deep .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n/* ========================================\n   Skeleton Loading Animation\n   ======================================== */\n\n@keyframes skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n.skeleton-row {\n  display: flex;\n  height: 40px;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    var(--mj-bg-surface-sunken) 0px,\n    var(--mj-bg-surface-hover) 40px,\n    var(--mj-bg-surface-sunken) 80px\n  );\n  background-size: 200px 100%;\n  animation: skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short {\n  width: 60px;\n}\n\n.skeleton-cell-medium {\n  width: 120px;\n}\n\n.skeleton-cell-long {\n  width: 180px;\n}\n\n/* Selection checkbox column header */\n::ng-deep .ag-header-select-all {\n  margin-right: 0;\n}\n\n/* ========================================\n   Row Border Enhancement\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n::ng-deep .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n/* ========================================\n   Focus States\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:focus {\n  outline: 2px solid var(--grid-accent-color, var(--mj-brand-primary));\n  outline-offset: -2px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Pinned Column Styling\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n/* ========================================\n   Header Cell Enhancements\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-header-cell {\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--mj-text-secondary);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell-sortable:hover .ag-header-cell-label {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n}\n\n/* Sort icon animation */\n::ng-deep .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n/* ========================================\n   Enhanced Multi-Sort Indicators\n   These styles use :host to ensure they're scoped to this component\n   and !important to override AG Grid's built-in styles\n   ======================================== */\n\n/* Highlight sorted column headers with eye-catching background */\n/* Ascending = blue tint */\n:host ::ng-deep .ag-header-cell-sorted-asc {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Descending = pink tint */\n:host ::ng-deep .ag-header-cell-sorted-desc {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Bottom border accent for sorted columns - ascending = blue */\n:host ::ng-deep .ag-header-cell-sorted-asc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-brand-primary);\n}\n\n/* Bottom border accent for sorted columns - descending = pink */\n:host ::ng-deep .ag-header-cell-sorted-desc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-status-error);\n}\n\n/* Sorted column header text - ascending = blue, bold */\n:host ::ng-deep .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n/* Sorted column header text - descending = pink, bold */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n/* Sort icons - larger and more prominent */\n/* Ascending = blue */\n:host ::ng-deep .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Descending = pink/magenta */\n:host ::ng-deep .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n/* Sort order number (1, 2, 3) - show as plain number, no bubble */\n/* This avoids AG Grid bug where .ag-sort-order is always present but empty when unsorted */\n/* The number is only visible when AG Grid populates it (i.e., when column is sorted) */\n/* Default blue for ascending */\n:host ::ng-deep .ag-sort-order {\n  margin-left: 4px;\n  font-size: 11px !important;\n  font-weight: 700 !important;\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Sort order number - pink for descending */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n:host ::ng-deep .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Aggregate Summary Row\n   ======================================== */\n\n.mj-aggregate-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 13px;\n  min-height: 44px;\n}\n\n.aggregate-summary-content {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.aggregate-summary-item i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading i {\n  font-size: 14px;\n}\n\n/* ========================================\n   AGGREGATE CARDS (displayed above grid)\n   ======================================== */\n\n.mj-aggregate-cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.aggregate-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n  min-width: 140px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n}\n\n.aggregate-card-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.aggregate-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aggregate-card-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.aggregate-card-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-card-loading i {\n  font-size: 16px;\n}\n\n/* ========================================\n   Text Wrapping Styles\n   ======================================== */\n\n/* Cell class for wrapped text */\n::ng-deep .cell-wrap-text {\n  white-space: normal !important;\n  word-wrap: break-word;\n  line-height: 1.4;\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* Ensure AG Grid cells allow wrapping */\n::ng-deep .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n/* Maintain minimum row height when wrapping */\n::ng-deep .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}\n\n/* ========================================\n   Width filler column ([FillWidth])\n   ========================================\n   The trailing filler exists so row banding and horizontal rules reach the container's right edge\n   instead of stopping wherever the last real column ends. For that to read as \"the table extends\"\n   rather than \"there is an empty column here\", it must lose every affordance that makes a column\n   look like a column: its own vertical rule, the header hover/menu, and the resize handle. What is\n   left is bare row background \u2014 which is exactly the point. */\n::ng-deep .ag-header-cell.mj-grid-filler-header,\n::ng-deep .ag-cell.mj-grid-filler-cell {\n  border-left: none !important;\n  border-right: none !important;\n  cursor: default;\n}\n\n/* The hover tint is OURS (see \".ag-theme-alpine .ag-header-cell:hover\" above), not AG Grid's, so it\n   has to be switched off here or the filler lights up as though it were interactive. Everything else\n   the filler needs suppressed \u2014 resize grip, header menu, moving, tool-panel entry \u2014 is handled by\n   native colDef flags on the column itself, not by CSS. */\n::ng-deep .ag-header-cell.mj-grid-filler-header:hover {\n  background-color: transparent !important;\n}\n"] }]
+                ], template: "<!-- Grid Container -->\n<div\n  #gridContainer\n  [class]=\"gridContainerClasses.join(' ')\"\n  [style.height]=\"gridHeightStyle\">\n\n  <!-- Toolbar -->\n  @if (ShowToolbar) {\n    <div class=\"mj-grid-toolbar\">\n      <div class=\"toolbar-left\">\n        <!-- Search -->\n        @if (ShowSearch) {\n          <div class=\"toolbar-search\">\n            <i class=\"fa-solid fa-search search-icon\"></i>\n            <input\n              type=\"text\"\n              class=\"search-input\"\n              [placeholder]=\"ToolbarConfig.searchPlaceholder || 'Search...'\"\n              [value]=\"FilterText\"\n              (input)=\"FilterText = $any($event.target).value\" />\n            @if (FilterText) {\n              <button\n                class=\"search-clear\"\n                (click)=\"FilterText = ''\"\n                aria-label=\"Clear search\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n        <!-- Custom Left Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position !== 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        <!-- Row Count -->\n        @if (ToolbarConfig.showRowCount !== false) {\n          <span class=\"row-count\">\n            {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n          </span>\n        }\n        <!-- Selection Count -->\n        @if (ToolbarConfig.showSelectionCount && SelectedKeys.length > 0) {\n          <span class=\"selection-count\">\n            ({{ SelectedKeys.length }} selected)\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Recycle Bin chip \u2014 auto-hides when no deleted records, no tracking,\n             or user lacks Delete permission. -->\n        @if (ShowRecycleBin) {\n          <mj-recycle-bin-chip [EntityName]=\"entityInfoName\"></mj-recycle-bin-chip>\n        }\n        <!-- New/Add Button (predefined) -->\n        @if (ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Create new record\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span class=\"button-text\">New</span>\n          </button>\n        }\n        <!-- Refresh Button (predefined) -->\n        @if (ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh data\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"loading\"></i>\n            <span class=\"button-text\">Refresh</span>\n          </button>\n        }\n        <!-- Export Button (predefined) -->\n        @if (ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            [disabled]=\"IsPreparingExport\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid\" [class.fa-file-excel]=\"!IsPreparingExport\" [class.fa-spinner]=\"IsPreparingExport\" [class.fa-spin]=\"IsPreparingExport\"></i>\n            <span class=\"button-text\">Export</span>\n          </button>\n        }\n        <!-- Delete Button (predefined) -->\n        @if (ShowDeleteButton && HasSelection) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete selected records\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            <span class=\"button-text\">Delete</span>\n          </button>\n        }\n        <!-- Compare Button (predefined) -->\n        @if (ShowCompareButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Compare selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onCompareClick()\">\n            <i class=\"fa-solid fa-code-compare\"></i>\n            <span class=\"button-text\">Compare</span>\n          </button>\n        }\n        <!-- Merge Button (predefined) -->\n        @if (ShowMergeButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Merge selected records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onMergeClick()\">\n            <i class=\"fa-solid fa-code-merge\"></i>\n            <span class=\"button-text\">Merge</span>\n          </button>\n        }\n        <!-- Add to List Button (predefined) -->\n        @if (ShowAddToListButton) {\n          <button\n            class=\"toolbar-button\"\n            [title]=\"HasSelection ? 'Add selected records to a list' : 'Add all matching records to a list'\"\n            [disabled]=\"(!HasSelection && !ExportDataProvider) || IsPreparingAddToList\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid\" [class.fa-list-check]=\"!IsPreparingAddToList\" [class.fa-spinner]=\"IsPreparingAddToList\" [class.fa-spin]=\"IsPreparingAddToList\"></i>\n            <span class=\"button-text\">Add to List</span>\n          </button>\n        }\n        <!-- Search for Duplicates Button (predefined) -->\n        @if (ShowDuplicateSearchButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Search for duplicate records\"\n            [disabled]=\"!HasMultipleSelection\"\n            (click)=\"onDuplicateSearchClick()\">\n            <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n            <span class=\"button-text\">Find Duplicates</span>\n          </button>\n        }\n        <!-- Communication Button (predefined) -->\n        @if (ShowCommunicationButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Send message to selected records\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onCommunicationClick()\">\n            <i class=\"fa-solid fa-envelope\"></i>\n            <span class=\"button-text\">Send Message</span>\n          </button>\n        }\n        <!-- Legacy ToolbarConfig buttons -->\n        <!-- Add Button (legacy) -->\n        @if (ToolbarConfig.showAdd && AllowAdd && !ShowNewButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Add New\"\n            (click)=\"onAddClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <!-- Refresh Button (legacy) -->\n        @if (ToolbarConfig.showRefresh !== false && !ShowRefreshButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Refresh\"\n            [disabled]=\"loading\"\n            (click)=\"onRefreshClick()\">\n            <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"loading\"></i>\n          </button>\n        }\n        <!-- Delete Button (legacy) -->\n        @if (ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton) {\n          <button\n            class=\"toolbar-button toolbar-button-danger\"\n            title=\"Delete Selected\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n          </button>\n        }\n        <!-- Export Button (legacy) -->\n        @if (ToolbarConfig.showExport && !ShowExportButton) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Export\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n          </button>\n        }\n        <!-- Column Chooser Button -->\n        @if (ToolbarConfig.showColumnChooser && AllowColumnToggle) {\n          <button\n            class=\"toolbar-button\"\n            title=\"Column Chooser\"\n            (click)=\"onColumnChooserClick()\">\n            <i class=\"fa-solid fa-columns\"></i>\n          </button>\n        }\n        <!-- Custom Right Buttons -->\n        @for (button of ToolbarConfig.customButtons; track button) {\n          @if (button.position === 'right' && isButtonVisible(button)) {\n            <button\n              class=\"toolbar-button\"\n              [class]=\"button.cssClass\"\n              [disabled]=\"isButtonDisabled(button)\"\n              [title]=\"button.tooltip || ''\"\n              (click)=\"onToolbarButtonClick(button)\">\n              @if (button.icon) {\n                <i [class]=\"button.icon\"></i>\n              }\n              @if (button.text) {\n                <span>{{ button.text }}</span>\n              }\n            </button>\n          }\n        }\n        <!-- Overflow Menu -->\n        @if (hasOverflowMenuItems) {\n          <div class=\"toolbar-overflow\" (click)=\"$event.stopPropagation()\">\n            <button\n              class=\"toolbar-button overflow-trigger\"\n              title=\"More actions\"\n              (click)=\"toggleOverflowMenu()\">\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </button>\n            @if (showOverflowMenu) {\n              <div class=\"overflow-menu\" [@fadeIn]>\n                <!-- Export (if in overflow) -->\n                @if (showExportInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onExportClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-file-excel\"></i>\n                    <span>Export</span>\n                  </button>\n                }\n                <!-- Entity Actions -->\n                @if (ShowEntityActionButtons && EntityActions.length > 0) {\n                  <div class=\"overflow-divider\"></div>\n                  <div class=\"overflow-section-label\">Actions</div>\n                  @for (action of EntityActions; track action) {\n                    <button\n                      class=\"overflow-item\"\n                      [disabled]=\"!isEntityActionEnabled(action)\"\n                      (click)=\"onEntityActionClick(action); closeOverflowMenu()\">\n                      <i [class]=\"action.icon || 'fa-solid fa-bolt'\"></i>\n                      <span>{{ action.name }}</span>\n                    </button>\n                  }\n                }\n                <!-- Column Chooser (if in overflow) -->\n                @if (showColumnChooserInOverflow) {\n                  <div class=\"overflow-divider\"></div>\n                }\n                @if (showColumnChooserInOverflow) {\n                  <button class=\"overflow-item\" (click)=\"onColumnChooserClick(); closeOverflowMenu()\">\n                    <i class=\"fa-solid fa-columns\"></i>\n                    <span>Manage Columns</span>\n                  </button>\n                }\n                <!-- Selection-dependent actions in overflow -->\n                @if (HasSelection && hasSelectionDependentOverflowActions) {\n                  <div class=\"overflow-divider\"></div>\n                  @if (showCommunicationInOverflow) {\n                    <button class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n                      <i class=\"fa-solid fa-envelope\"></i>\n                      <span>Send Message</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Aggregate Cards (displayed as summary cards above the grid) -->\n  @if (ShowAggregatePanel) {\n    <div class=\"mj-aggregate-cards\">\n      @for (agg of CardAggregates; track agg) {\n        <div class=\"aggregate-card\">\n          @if (agg.icon) {\n            <div class=\"aggregate-card-icon\">\n              <i [class]=\"agg.icon\"></i>\n            </div>\n          }\n          <div class=\"aggregate-card-content\">\n            <span class=\"aggregate-card-label\">{{ agg.label }}</span>\n            <span class=\"aggregate-card-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        </div>\n      }\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-card-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    @if (loading && rowData.length === 0) {\n      <div class=\"mj-grid-loading-overlay\">\n        <mj-loading text=\"Loading...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !loading) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Variant=\"error\"\n        Icon=\"fa-solid fa-triangle-exclamation\"\n        Title=\"Could not load data\"\n        [Message]=\"errorMessage\"\n        ActionText=\"Retry\"\n        ActionIcon=\"fa-solid fa-arrows-rotate\"\n        (Action)=\"Refresh()\" />\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <mj-empty-state\n        class=\"mj-grid-state-fill\"\n        [Size]=\"EmptyStateSize\"\n        Icon=\"fa-solid fa-inbox\"\n        Title=\"No data to display\" />\n    }\n\n    <!-- AG Grid (Client-side mode) -->\n    @if (!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)) {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [rowData]=\"rowData\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n    <!-- AG Grid (Infinite Scroll mode) -->\n    @if (!errorMessage && PaginationMode === 'infinite') {\n      <ag-grid-angular\n        class=\"mj-ag-grid ag-theme-alpine\"\n        [theme]=\"agGridTheme\"\n        [columnDefs]=\"agColumnDefs\"\n        [defaultColDef]=\"defaultColDef\"\n        [rowSelection]=\"agRowSelection\"\n        [getRowId]=\"getRowId\"\n        [suppressCellFocus]=\"true\"\n        [rowHeight]=\"RowHeight\"\n        [headerHeight]=\"ShowHeader ? undefined : 0\"\n        [rowModelType]=\"'infinite'\"\n        [cacheBlockSize]=\"CacheBlockSize\"\n        [maxBlocksInCache]=\"MaxBlocksInCache\"\n        [infiniteInitialRowCount]=\"1\"\n        [cacheOverflowSize]=\"2\"\n        (gridReady)=\"onGridReady($event)\"\n        (cellClicked)=\"onAgCellClicked($event)\"\n        (rowClicked)=\"onAgRowClicked($event)\"\n        (rowDoubleClicked)=\"onAgRowDoubleClicked($event)\"\n        (sortChanged)=\"onAgSortChanged($event)\"\n        (selectionChanged)=\"onAgSelectionChanged($event)\"\n        (columnResized)=\"onAgColumnResized($event)\"\n        (columnMoved)=\"onAgColumnMoved($event)\">\n      </ag-grid-angular>\n    }\n\n  </div>\n\n  <!-- Pagination (opt-in via ShowPager input) -->\n  @if (ShowPager) {\n    <mj-pagination\n      [TotalRowCount]=\"totalRowCount\"\n      [PageNumber]=\"PagerPageNumber\"\n      [PageSize]=\"PageSize\"\n      [IsLoading]=\"loading\"\n      (PageChange)=\"PageChange.emit($event)\">\n    </mj-pagination>\n  }\n\n  <!-- Aggregate Summary Row (outside mj-grid-content so it's always visible) -->\n  @if (ShowAggregateSummary) {\n    <div class=\"mj-aggregate-summary\">\n      <div class=\"aggregate-summary-content\">\n        @for (agg of ColumnAggregates; track agg) {\n          <div class=\"aggregate-summary-item\">\n            @if (agg.icon) {\n              <i [class]=\"agg.icon\"></i>\n            }\n            <span class=\"agg-summary-label\">{{ agg.label }}:</span>\n            <span class=\"agg-summary-value\">{{ getAggregateValue(agg) }}</span>\n          </div>\n        }\n      </div>\n      @if (AggregatesLoading) {\n        <div class=\"aggregate-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n  [visible]=\"showExportDialog\"\n  [config]=\"exportDialogConfig\"\n  (closed)=\"onExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Runtime-UX driver for an entity action that names a RuntimeUXDriverClass (e.g. the Record Process\n     bulk-update runner). Mounted in-place over the grid \u2014 no parent wiring required. -->\n@if (ActiveRuntimeDriver) {\n  <mj-entity-action-ux-host\n    [DriverClass]=\"ActiveRuntimeDriver.DriverClass\"\n    [Context]=\"ActiveRuntimeDriver.Context\"\n    (Completed)=\"OnRuntimeDriverCompleted($event)\"\n    (Cancelled)=\"OnRuntimeDriverCancelled()\">\n  </mj-entity-action-ux-host>\n}\n", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  /* Header */\n  --grid-header-bg: var(--mj-bg-surface-card);\n  --grid-header-text: var(--mj-text-primary);\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: var(--mj-border-default);\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: var(--mj-bg-surface);\n  --grid-row-bg-alt: var(--mj-bg-surface-card);\n  --grid-row-hover-bg: var(--mj-bg-surface-hover);\n  --grid-row-selected-bg: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  --grid-row-selected-hover-bg: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: var(--mj-text-primary);\n  --grid-cell-border-color: var(--mj-border-subtle);\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  /* Editing */\n  --grid-edit-cell-bg: var(--mj-bg-surface);\n  --grid-edit-cell-border: var(--mj-brand-primary);\n  --grid-edit-cell-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n\n  /* Sorting */\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  /* Toolbar */\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  /* Loading */\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  /* Empty state */\n  --grid-empty-text-color: var(--mj-text-disabled);\n  --grid-empty-icon-color: var(--mj-border-strong);\n\n  display: block;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ========================================\n   Grid Container\n   ======================================== */\n\n.mj-grid-container {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--grid-border-color);\n  border-radius: var(--grid-border-radius);\n  background: var(--grid-background);\n  overflow: hidden;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.mj-grid-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--grid-toolbar-height);\n  padding: 0 12px;\n  background: var(--grid-toolbar-bg);\n  border-bottom: 1px solid var(--grid-toolbar-border-color);\n  gap: 12px;\n}\n\n.toolbar-left,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.toolbar-search {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  width: 200px;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--grid-selection-indicator-color);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-clear {\n  position: absolute;\n  right: 6px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button i {\n  font-size: 14px;\n}\n\n.toolbar-button-danger {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count,\n.selection-count {\n  font-weight: 500;\n}\n\n/* ========================================\n   Grid Content\n   ======================================== */\n\n.mj-grid-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container {\n  height: 100%;\n  overflow: auto;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.mj-grid-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--grid-loading-overlay-bg);\n  z-index: 10;\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n/* ========================================\n   Empty / Error State\n   ======================================== */\n\n/* Flex-fill so <mj-empty-state> placeholders occupy the grid content area\n   (the host centers its content but does not grow to fill the parent). */\n.mj-grid-state-fill {\n  flex: 1 1 auto;\n}\n\n/* ========================================\n   Header Row\n   ======================================== */\n\n.mj-grid-header {\n  display: flex;\n  min-height: var(--grid-header-height);\n  background: var(--grid-header-bg);\n  border-bottom: 2px solid var(--grid-header-border-color);\n  position: sticky;\n  top: 0;\n  z-index: 5;\n}\n\n.mj-grid-header-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  font-weight: var(--grid-header-font-weight);\n  color: var(--grid-header-text);\n  font-size: 13px;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right: 1px solid var(--grid-cell-border-color);\n  flex-shrink: 0;\n}\n\n.mj-grid-header-cell:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator i {\n  font-size: 12px;\n}\n\n.sort-index {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n/* ========================================\n   Data Rows\n   ======================================== */\n\n.mj-grid-row {\n  display: flex;\n  align-items: stretch;\n  background: var(--grid-row-bg);\n  transition: background-color 0.15s;\n  cursor: default;\n}\n\n.mj-grid-row:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ========================================\n   Data Cells\n   ======================================== */\n\n.mj-grid-cell {\n  display: flex;\n  align-items: center;\n  padding: var(--grid-cell-padding);\n  color: var(--grid-cell-text);\n  font-size: 13px;\n  overflow: hidden;\n  border-right: 1px solid transparent;\n  flex-shrink: 0;\n}\n\n.mj-grid-cell:last-child {\n  border-right: none;\n}\n\n/* Grid lines modes */\n.grid-lines-horizontal .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-row {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both .mj-grid-cell {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n/* Cell alignment */\n.mj-grid-cell.align-left {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right {\n  justify-content: flex-end;\n}\n\n.cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Special cells */\n.row-number-cell {\n  width: 50px;\n  min-width: 50px;\n  max-width: 50px;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  background: var(--grid-header-bg);\n}\n\n.checkbox-cell {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n/* ========================================\n   Virtual Scrolling\n   ======================================== */\n\n.mj-grid-virtual-spacer {\n  flex-shrink: 0;\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input {\n    width: 100%;\n  }\n\n  .toolbar-center {\n    order: 2;\n  }\n\n  /* Hide button text on mobile */\n  .toolbar-button .button-text {\n    display: none;\n  }\n}\n\n/* ========================================\n   Toolbar Button Text\n   ======================================== */\n\n.toolbar-button .button-text {\n  font-size: 13px;\n}\n\n/* ========================================\n   Overflow Menu\n   ======================================== */\n\n.toolbar-overflow {\n  position: relative;\n}\n\n.overflow-trigger {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger i {\n  font-size: 16px;\n}\n\n.overflow-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 220px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.overflow-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 10px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item i {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label {\n  padding: 8px 16px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n  padding: 0 1px;\n}\n\n/* ========================================\n   AG Grid Customizations\n   ======================================== */\n\n.mj-ag-grid {\n  width: 100%;\n  height: 100%;\n}\n\n/* AG Grid v35 uses JS-based theming (colorSchemeVariable) \u2014 no CSS variable overrides needed */\n\n/* Selected row styling - left indicator bar only, background handled by AG Grid theme */\n::ng-deep .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n/* ========================================\n   Visual Config: Header Styles\n   ======================================== */\n\n/* Flat header (minimal) */\n.header-style-flat ::ng-deep .ag-header {\n  background: var(--grid-header-bg, var(--mj-bg-surface-card));\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--grid-header-border-color, var(--mj-border-default));\n}\n\n.header-style-elevated.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n/* Gradient header (more prominent) */\n.header-style-gradient ::ng-deep .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow ::ng-deep .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Bold header (high contrast) */\n.header-style-bold ::ng-deep .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n/* Header sort icons enhancement */\n::ng-deep .ag-header-cell-sorted-asc .ag-icon-asc,\n::ng-deep .ag-header-cell-sorted-desc .ag-icon-desc {\n  color: var(--grid-accent-color, var(--grid-sort-indicator-color, var(--mj-brand-primary)));\n}\n\n/* ========================================\n   Visual Config: Zebra Striping\n   ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, var(--mj-bg-surface-hover));\n}\n\n/* ========================================\n   Visual Config: Hover Transitions\n   ======================================== */\n\n.hover-transitions ::ng-deep .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions ::ng-deep .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n/* ========================================\n   Visual Config: Cell Padding\n   ======================================== */\n\n.cell-padding-compact ::ng-deep .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact ::ng-deep .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal ::ng-deep .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal ::ng-deep .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable ::ng-deep .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* ========================================\n   Visual Config: Checkbox Styles\n   ======================================== */\n\n/* Rounded checkbox */\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded ::ng-deep .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n/* Filled checkbox */\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked {\n  background-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n  border-color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n/* ========================================\n   Cell Content Formatting\n   ======================================== */\n\n/* Right-aligned cells (numbers) */\n::ng-deep .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n::ng-deep .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n/* Empty cell placeholder */\n::ng-deep .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  transition: color 0.15s;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n::ng-deep .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n/* Email cells */\n::ng-deep .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n/* Foreign key link cells */\n::ng-deep .cell-fk-link {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.15s, text-decoration 0.15s;\n}\n\n::ng-deep .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n::ng-deep .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n/* URL cells */\n::ng-deep .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n/* Phone cells */\n::ng-deep .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n/* ========================================\n   Skeleton Loading Animation\n   ======================================== */\n\n@keyframes skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n.skeleton-row {\n  display: flex;\n  height: 40px;\n  align-items: center;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    var(--mj-bg-surface-sunken) 0px,\n    var(--mj-bg-surface-hover) 40px,\n    var(--mj-bg-surface-sunken) 80px\n  );\n  background-size: 200px 100%;\n  animation: skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short {\n  width: 60px;\n}\n\n.skeleton-cell-medium {\n  width: 120px;\n}\n\n.skeleton-cell-long {\n  width: 180px;\n}\n\n/* Selection checkbox column header */\n::ng-deep .ag-header-select-all {\n  margin-right: 0;\n}\n\n/* ========================================\n   Row Border Enhancement\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n::ng-deep .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n/* ========================================\n   Focus States\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:focus {\n  outline: 2px solid var(--grid-accent-color, var(--mj-brand-primary));\n  outline-offset: -2px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Pinned Column Styling\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n/* ========================================\n   Header Cell Enhancements\n   ======================================== */\n\n::ng-deep .ag-theme-alpine .ag-header-cell {\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  color: var(--mj-text-secondary);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell-sortable:hover .ag-header-cell-label {\n  color: var(--grid-accent-color, var(--mj-brand-primary));\n}\n\n/* Sort icon animation */\n::ng-deep .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n/* ========================================\n   Enhanced Multi-Sort Indicators\n   These styles use :host to ensure they're scoped to this component\n   and !important to override AG Grid's built-in styles\n   ======================================== */\n\n/* Highlight sorted column headers with eye-catching background */\n/* Ascending = blue tint */\n:host ::ng-deep .ag-header-cell-sorted-asc {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Descending = pink tint */\n:host ::ng-deep .ag-header-cell-sorted-desc {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface)) !important;\n  position: relative;\n}\n\n/* Bottom border accent for sorted columns - ascending = blue */\n:host ::ng-deep .ag-header-cell-sorted-asc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-brand-primary);\n}\n\n/* Bottom border accent for sorted columns - descending = pink */\n:host ::ng-deep .ag-header-cell-sorted-desc::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--mj-status-error);\n}\n\n/* Sorted column header text - ascending = blue, bold */\n:host ::ng-deep .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n/* Sorted column header text - descending = pink, bold */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n/* Sort icons - larger and more prominent */\n/* Ascending = blue */\n:host ::ng-deep .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Descending = pink/magenta */\n:host ::ng-deep .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n/* Sort order number (1, 2, 3) - show as plain number, no bubble */\n/* This avoids AG Grid bug where .ag-sort-order is always present but empty when unsorted */\n/* The number is only visible when AG Grid populates it (i.e., when column is sorted) */\n/* Default blue for ascending */\n:host ::ng-deep .ag-sort-order {\n  margin-left: 4px;\n  font-size: 11px !important;\n  font-weight: 700 !important;\n  color: var(--mj-brand-primary) !important;\n}\n\n/* Sort order number - pink for descending */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n:host ::ng-deep .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Aggregate Summary Row\n   ======================================== */\n\n.mj-aggregate-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 13px;\n  min-height: 44px;\n}\n\n.aggregate-summary-content {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.aggregate-summary-item i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading i {\n  font-size: 14px;\n}\n\n/* ========================================\n   AGGREGATE CARDS (displayed above grid)\n   ======================================== */\n\n.mj-aggregate-cards {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.aggregate-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n  min-width: 140px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n}\n\n.aggregate-card-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.aggregate-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aggregate-card-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.aggregate-card-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-card-loading i {\n  font-size: 16px;\n}\n\n/* ========================================\n   Text Wrapping Styles\n   ======================================== */\n\n/* Cell class for wrapped text */\n::ng-deep .cell-wrap-text {\n  white-space: normal !important;\n  word-wrap: break-word;\n  line-height: 1.4;\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n/* Ensure AG Grid cells allow wrapping */\n::ng-deep .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n/* Maintain minimum row height when wrapping */\n::ng-deep .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}\n\n/* ========================================\n   Width filler column ([FillWidth])\n   ========================================\n   The trailing filler exists so row banding and horizontal rules reach the container's right edge\n   instead of stopping wherever the last real column ends. For that to read as \"the table extends\"\n   rather than \"there is an empty column here\", it must lose every affordance that makes a column\n   look like a column: its own vertical rule, the header hover/menu, and the resize handle. What is\n   left is bare row background \u2014 which is exactly the point. */\n::ng-deep .ag-header-cell.mj-grid-filler-header,\n::ng-deep .ag-cell.mj-grid-filler-cell {\n  border-left: none !important;\n  border-right: none !important;\n  cursor: default;\n}\n\n/* The hover tint is OURS (see \".ag-theme-alpine .ag-header-cell:hover\" above), not AG Grid's, so it\n   has to be switched off here or the filler lights up as though it were interactive. Everything else\n   the filler needs suppressed \u2014 resize grip, header menu, moving, tool-panel entry \u2014 is handled by\n   native colDef flags on the column itself, not by CSS. */\n::ng-deep .ag-header-cell.mj-grid-filler-header:hover {\n  background-color: transparent !important;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }, { type: i0.NgZone }], { Params: [{
             type: Input
         }], AllowLoad: [{