@memberjunction/ng-entity-viewer 5.51.0 → 6.1.0-edge.1

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

@@ -6,7 +6,7 @@ import { debounceTime, takeUntil } from 'rxjs/operators';
 import { RunView, RunViewParams } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
 import { EntityActionEngineBase } from '@memberjunction/actions-base';
-import { buildPkString, computeFieldsList } from '../utils/record.util';
+import { buildPkString, canonicalizeColumnFields, computeFieldsList } from '../utils/record.util';
 import { ViewInfo, UserViewEngine, UserInfoEngine } from '@memberjunction/core-entities';
 import { ModuleRegistry, AllCommunityModule, themeAlpine } from 'ag-grid-community';
 // Use the existing HighlightUtil from entity-viewer package
@@ -640,6 +640,22 @@ ModuleRegistry.registerModules([AllCommunityModule]);
  * </mj-entity-data-grid>
  * ```
  */
+/**
+ * Floor for a column declared `width: 'auto'` (see `mapColumnConfigToColDef`). A flex column with no
+ * `minWidth` collapses toward zero once its fixed siblings claim the row, so the "fill the slack"
+ * column would paradoxically become the narrowest one on a crowded grid. 160px is roughly the width
+ * at which a text cell still reads as a sentence rather than a fragment. Overridable per column via
+ * `GridColumnConfig.minWidth`.
+ */
+const AUTO_WIDTH_COLUMN_MIN_PX = 160;
+/** Column id of the inert width-filler appended when `FillWidth` is on. See `buildFillerColumnDef`. */
+const FILLER_COLUMN_ID = '__mjFill';
+/**
+ * Flex weight given to a `width: 'auto'` column so it outranks the filler when leftover row width is
+ * shared out. Any value that dwarfs the filler's weight of 1 works; the effect is "this column takes
+ * what it needs (up to its maxWidth) and the filler takes the remainder", rather than a 50/50 split.
+ */
+const AUTO_WIDTH_FLEX_WEIGHT = 1000;
 export class EntityDataGridComponent extends BaseAngularComponent {
     cdr;
     elementRef;
@@ -836,11 +852,41 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     // Column Configuration Inputs
     // ========================================
     _columns = [];
+    /**
+     * True when `_columns` holds a list the HOST supplied via `[Columns]`, as opposed to one derived
+     * from a saved view or generated from entity metadata. Both origins share `_columns`, and a
+     * host-supplied list is an explicit instruction that must outlive view/params churn — whereas a
+     * derived one is disposable and should be rebuilt when the view changes.
+     */
+    _columnsFromHost = false;
+    /**
+     * True when `_gridState` was adopted from this user's saved entity-browser default rather than
+     * supplied by the host. Such a state is a convenience, not an instruction, so an explicit
+     * `[Columns]` may discard it; a host-passed `[GridState]` never is.
+     */
+    _gridStateFromUserDefault = false;
     /**
      * Column definitions - if not provided, auto-generates from entity metadata
      */
     set Columns(value) {
         this._columns = value || [];
+        // Remember that THIS list came from the host, not from metadata/a saved view. `_columns` is
+        // shared by both origins, and code that resets it needs to tell them apart — see the reset in
+        // the dynamic-view branch of the params handler.
+        this._columnsFromHost = this._columns.length > 0;
+        // Angular assigns inputs in template order, and `[Params]` is conventionally bound before
+        // `[Columns]`. That means the params handler may already have adopted this user's saved
+        // entity-browser default into `_gridState` while `_columnsFromHost` was still false — and
+        // `buildAgColumnDefs()` prefers `_gridState`, so the host's list would lose despite the guard
+        // there. An explicit `[Columns]` arriving at ANY point supersedes a merely-inherited default,
+        // so drop it. A `_gridState` the host passed deliberately via `[GridState]` is left alone.
+        if (this._columnsFromHost && this._gridStateFromUserDefault) {
+            this._gridState = null;
+            this._gridStateFromUserDefault = false;
+        }
+        // Put the host's field names into the entity's spelling before anything derives from them.
+        // No-op when `[Params]` has not resolved the entity yet — the params handler repeats it.
+        this.canonicalizeHostColumns();
         if (this._columns.length > 0) {
             this.initializeColumnStates();
             this.buildAgColumnDefs();
@@ -1041,6 +1087,26 @@ export class EntityDataGridComponent extends BaseAngularComponent {
     get ShowRowNumbers() {
         return this._showRowNumbers;
     }
+    /**
+     * Append an inert trailing column that soaks up leftover row width, so the row backgrounds, banding
+     * and horizontal rules reach the container's right edge rather than stopping wherever the last real
+     * column happens to end (which reads as a half-drawn table inside its own card).
+     *
+     * Off by default: it is purely cosmetic, it changes the look of EVERY grid it is enabled on, and
+     * existing layouts were built against the current behaviour. Opt in per grid; flipping the default
+     * is a product-wide styling decision, not a per-page one.
+     *
+     * Composes with `width: 'auto'`: give the text column `width: 'auto'` plus a `maxWidth` so it grows
+     * only as far as its content warrants, and the filler takes whatever is left over.
+     */
+    _fillWidth = false;
+    set FillWidth(value) {
+        this._fillWidth = value;
+        this.buildAgColumnDefs();
+    }
+    get FillWidth() {
+        return this._fillWidth;
+    }
     _striped = true;
     set Striped(value) {
         this._striped = value;
@@ -1899,14 +1965,29 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 this._viewEntity = null;
                 const md = this.ProviderToUse;
                 this._entityInfo = md.Entities.find(e => e.Name === this._params.EntityName) || null;
-                // Reset columns to force regeneration from metadata when switching to dynamic view
-                // This ensures we don't carry over column config from a previous saved view
-                this._columns = [];
+                // Reset columns to force regeneration from metadata when switching to dynamic view.
+                // This ensures we don't carry over column config from a previous saved view.
+                //
+                // ...but ONLY when those columns were themselves derived from a view or from metadata. A
+                // list the HOST passed via `[Columns]` must survive: `Params` is re-assigned on every filter
+                // change, so wiping unconditionally meant a page's declared columns were destroyed the first
+                // time the user touched a filter — the grid silently reverted to metadata-generated columns
+                // (entity display names, estimated widths, `width: 'auto'` lost). It presents as "my column
+                // config works on load and then randomly stops", which is near-impossible to trace back here.
+                if (!this._columnsFromHost) {
+                    this._columns = [];
+                }
                 // For dynamic views, try to load user's saved defaults
                 if (this._entityInfo && this._autoPersistState) {
                     this.loadUserDefaultGridState(this._entityInfo.Name);
                 }
             }
+            // The entity is only known now, and `[Columns]` is commonly bound BEFORE `[Params]` — so this
+            // is the first point at which a host's field names can be checked against real metadata.
+            // Idempotent, so the repeat on every params change costs nothing.
+            if (this.canonicalizeHostColumns()) {
+                this.initializeColumnStates();
+            }
             // Generate columns if not already set
             if (this._columns.length === 0 && this._entityInfo) {
                 this.generateColumnsFromMetadata();
@@ -2014,8 +2095,20 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const savedState = UserInfoEngine.Instance.GetSetting(settingKey);
             if (savedState) {
                 const gridState = JSON.parse(savedState);
-                // Only apply if not already set via props (props take precedence)
-                if (!this._gridState && gridState.columnSettings?.length) {
+                // Only apply if not already set via props (props take precedence).
+                //
+                // `Columns` is one of those props. It used to be missed here, and the effect was severe but
+                // silent: this default is saved per USER per ENTITY from the generic entity browser, so the
+                // moment anyone tweaked columns while browsing an entity there, EVERY bespoke page grid over
+                // that same entity silently adopted those columns — overriding the page author's explicit
+                // `[Columns]` titles, widths and order, for that user only. Symptoms look like anything but
+                // the cause: a page's declared column titles never appear, widths edited in code have no
+                // effect, and it reproduces for one user and not another.
+                //
+                // A page that hands the grid an explicit column list has stated exactly what it wants; a
+                // user's entity-browser preference is not an instruction about that page. An explicitly
+                // passed `[GridState]` still wins, as it always did — that is a deliberate act by the host.
+                if (!this._gridState && !this._columnsFromHost && gridState.columnSettings?.length) {
                     // Validate column settings against the current entity's fields to prevent
                     // stale columns from a previously viewed entity leaking into the query.
                     // This can happen when user defaults were saved for a different view of
@@ -2029,6 +2122,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                             sortSettings: gridState.sortSettings || [],
                             aggregates: gridState.aggregates
                         };
+                        this._gridStateFromUserDefault = true;
                     }
                 }
                 // Apply sort state if not already set — validate sort fields exist on current entity
@@ -2480,6 +2574,102 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 valueGetter: (params) => params.node ? params.node.rowIndex + 1 : ''
             });
         }
+        if (this._fillWidth && this.agColumnDefs.length > 0) {
+            this.agColumnDefs.push(this.buildFillerColumnDef());
+        }
+    }
+    /**
+     * An inert trailing column whose only job is to soak up leftover row width so the row backgrounds,
+     * banding and horizontal rules reach the container's edge instead of stopping mid-card.
+     *
+     * Why a filler rather than stretching a real column: a real column that grows to absorb slack is
+     * either a short/numeric one — whose value then sits marooned in a sea of empty cell (or, if
+     * right-aligned, drifts far from its neighbours) — or a text column blown out well past the width
+     * its content needs, which reads as one enormous mostly-empty column. Neither is what "the table
+     * should reach the edge" means. Growing something DELIBERATELY empty moves nothing and stretches
+     * nothing: every real column keeps the width it earned.
+     *
+     * It is styled to disappear as a column (no header text, no left rule, no sort/menu/resize/move
+     * affordances) so it reads as table background, not as an empty field the user should wonder about.
+     */
+    /**
+     * Make a column absorb leftover row width, but only up to the ceiling the page gave it.
+     *
+     * The weighting is the point. Both this column and the filler are flex, and AG Grid splits leftover
+     * space between flex columns in proportion to their weights — so an even 1:1 split would hand this
+     * column only half the slack no matter how much it needed (that was a real bug: a memo column and
+     * the filler each took ~160px of a 320px remainder). A dominant weight makes the real column the
+     * FIRST claimant: it grows until it hits its own `maxWidth`, and only what it cannot use overflows
+     * to the filler. AG Grid enforces `maxWidth` on flex columns, which is what makes the hand-off work.
+     *
+     * `maxWidth` is therefore load-bearing, not decoration — it is what stops "fill the row" from
+     * becoming "one enormous mostly-empty column". It matters most for a RIGHT-ALIGNED column, where an
+     * over-wide column pushes its values away from the columns they are read against; cap such a column
+     * near its widest value and the drift cannot happen. A `width: 'auto'` column with no `maxWidth`
+     * takes all remaining width, which is only the right call for a genuinely long free-text column.
+     */
+    registerAutoWidthColumn(colDef) {
+        colDef.colId ??= colDef.field;
+        colDef.flex = AUTO_WIDTH_FLEX_WEIGHT;
+    }
+    /**
+     * Field names from a host-supplied `[Columns]`, so the query fetches what the host chose to show.
+     * Empty when the columns were generated from metadata or a view — those origins are already
+     * reflected in the grid state / DefaultInView that `computeFieldsList` consults.
+     *
+     * Includes columns declared `visible: false`. Hiding a column is a DISPLAY decision, not a
+     * statement that the data isn't wanted: this grid deliberately keeps hidden columns in its column
+     * model as col defs with `hide: true` rather than omitting them (see `buildAgColumnDefsFromGridState`),
+     * precisely so a saved `[GridState]` that marks one visible can bring it back. A column that
+     * reappears with no data behind it renders every cell empty, which reads as a data bug rather
+     * than a missing SELECT. The cost of the alternative is one column in the query that the host
+     * itself asked for by name.
+     */
+    hostColumnFieldNames() {
+        if (!this._columnsFromHost)
+            return [];
+        return this._columns.map(c => c.field);
+    }
+    /**
+     * Put host-supplied `[Columns]` into the entity's own field spelling — see
+     * {@link canonicalizeColumnFields} for why the spelling is load-bearing rather than cosmetic.
+     * Returns true when something actually changed, so the caller can rebuild derived state.
+     *
+     * Deliberately the ONLY place this normalisation happens. Everything downstream — the colDef's
+     * `field` and hence its `colId`, `_columnStates`, captured grid state, sort settings, the export
+     * column list, the fetched field list — reads `_columns`, so fixing it here keeps all of them
+     * speaking one vocabulary instead of each needing its own case-insensitive comparison.
+     */
+    canonicalizeHostColumns() {
+        if (!this._columnsFromHost || !this._entityInfo || this._columns.length === 0) {
+            return false;
+        }
+        const next = canonicalizeColumnFields(this._entityInfo, this._columns);
+        const changed = next.some((col, i) => col !== this._columns[i]);
+        if (changed) {
+            this._columns = next;
+        }
+        return changed;
+    }
+    buildFillerColumnDef() {
+        return {
+            colId: FILLER_COLUMN_ID,
+            headerName: '',
+            flex: 1,
+            // No floor: this column is the one thing that SHOULD yield when real columns need the room —
+            // it shrinks to nothing and the grid falls back to horizontal scrolling, exactly as before.
+            minWidth: 0,
+            sortable: false,
+            resizable: false,
+            suppressMovable: true,
+            // Never let a filler participate in anything a real column does.
+            suppressHeaderMenuButton: true,
+            suppressColumnsToolPanel: true,
+            lockPosition: 'right',
+            valueGetter: () => '',
+            headerClass: 'mj-grid-filler-header',
+            cellClass: 'mj-grid-filler-cell'
+        };
     }
     buildAgColumnDefsFromGridState(columnSettings) {
         if (!this._entityInfo)
@@ -2490,11 +2680,23 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const field = this._entityInfo.Fields.find(f => f.Name.toLowerCase() === colConfig.Name.toLowerCase());
             if (!field)
                 continue;
+            // A saved grid state carries pixel widths only, so restoring one would otherwise drop the
+            // `width: 'auto'` fill declared by the host page — the dead-space-on-the-right bug would come
+            // back the moment a user resized any column and the state was persisted. Treat 'auto' as a
+            // LAYOUT decision owned by the page author, not a user preference the saved state overrides:
+            // everything else (order, visibility, the other columns' widths) still comes from the state.
+            const declared = this._columns.find(c => c.field.toLowerCase() === colConfig.Name.toLowerCase());
+            const isAutoWidth = declared?.width === 'auto';
             const colDef = {
                 field: field.Name,
                 // Use userDisplayName if set, otherwise fall back to DisplayName or field name
                 headerName: colConfig.userDisplayName || colConfig.DisplayName || field.DisplayNameOrName,
-                width: colConfig.width || this.estimateColumnWidth(field),
+                width: isAutoWidth ? undefined : (colConfig.width || this.estimateColumnWidth(field)),
+                // The declared min/max travel with the 'auto' decision. Dropping them here was a real bug:
+                // the saved state has no notion of either, so the column lost its ceiling and its floor and
+                // sized itself off whatever space happened to be left.
+                minWidth: isAutoWidth ? (declared?.minWidth ?? AUTO_WIDTH_COLUMN_MIN_PX) : undefined,
+                maxWidth: isAutoWidth ? declared?.maxWidth : undefined,
                 sortable: this._allowSorting,
                 resizable: this._allowColumnResize,
                 // Hidden columns are still added as col defs with hide:true rather than omitted
@@ -2505,6 +2707,9 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                 // the field flagged IncludeInUserSearchAPI for the server to return matching rows.)
                 hide: colConfig.hidden === true
             };
+            if (isAutoWidth) {
+                this.registerAutoWidthColumn(colDef);
+            }
             // Add type-specific formatters with optional custom format
             this.applyFieldFormatter(colDef, field, colConfig.format);
             cols.push(colDef);
@@ -2512,17 +2717,35 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         return cols;
     }
     mapColumnConfigToColDef(col) {
+        // `width: 'auto'` means "this column absorbs the leftover row width". It is part of the public
+        // GridColumnConfig contract (`width?: number | 'auto'`) but was previously mapped to `undefined`,
+        // so it silently did nothing and AG Grid fell back to its default width.
+        //
+        // Why it matters, and why this is the RIGHT place to fix it: `autoSizeColumnsSmartly()` below
+        // deliberately declines to stretch when the pane is much wider than the columns (its `maxRatio`
+        // guard), so a narrow `Status` column is never blown up to 400px on a wide monitor. That guard is
+        // correct — but combined with `estimateColumnWidth()`'s hard 350px cap it meant a grid with a few
+        // columns on a wide screen could NEVER fill, leaving permanent dead space to the right while a
+        // text column truncated. `'auto'` is the per-column escape hatch for exactly that case: fixed
+        // columns keep their pixel widths (what the guard protects) and only the column the page author
+        // designated grows. AG Grid's `flex` is the native mechanism, so map straight onto it.
+        const isAutoWidth = col.width === 'auto';
         const colDef = {
             field: col.field,
             headerName: col.title || col.field,
             width: typeof col.width === 'number' ? col.width : undefined,
-            minWidth: col.minWidth,
+            // An auto-width column still needs a floor, or a column whose visible rows are all empty
+            // measures to nothing and the header ends up unreadable.
+            minWidth: col.minWidth ?? (isAutoWidth ? AUTO_WIDTH_COLUMN_MIN_PX : undefined),
             maxWidth: col.maxWidth,
             sortable: col.sortable !== false && this._allowSorting,
             filter: false,
             resizable: col.resizable !== false && this._allowColumnResize,
             hide: col.visible === false
         };
+        if (isAutoWidth) {
+            this.registerAutoWidthColumn(colDef);
+        }
         // Apply field formatter for highlighting and type-specific formatting
         // if we have entity metadata for this field
         if (this._entityInfo) {
@@ -3157,7 +3380,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const result = await rv.RunView({
                 ...runViewParams,
                 ResultType: 'simple',
-                Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState) : undefined,
+                Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined,
                 Aggregates: aggregateExpressions
             });
             const loadTimeMs = performance.now() - startTime;
@@ -3250,7 +3473,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
                     const result = await rv.RunView({
                         ...runViewParams,
                         ResultType: 'simple',
-                        Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState) : undefined
+                        Fields: this._entityInfo ? computeFieldsList(this._entityInfo, this._gridState, this.hostColumnFieldNames()) : undefined
                     });
                     if (result.Success) {
                         const entities = result.Results || [];
@@ -3444,6 +3667,12 @@ export class EntityDataGridComponent extends BaseAngularComponent {
      * while ensuring the grid fills available space appropriately
      */
     autoSizeColumnsSmartly(api) {
+        // With a filler present, leftover width already has a home and it is deliberately an empty one.
+        // The proportional stretch below would fight that: sizeColumnsToFit() assigns explicit widths to
+        // every column, which clears the filler's flex and re-introduces the stretching of real columns
+        // that the filler exists to avoid.
+        if (this.agColumnDefs.some(col => col.flex))
+            return;
         // Get total estimated width from our column definitions
         const totalEstimatedWidth = this.agColumnDefs.reduce((sum, col) => sum + (col.width || 150), 0);
         // Get available width from the grid container
@@ -3774,7 +4003,12 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             const col = columnState[i];
             if (col.colId === '__rowNumber')
                 continue; // Skip row number column
-            const field = this._entityInfo.Fields.find(f => f.Name === col.colId);
+            // Case-insensitive: `colId` originates from a colDef's `field`, which for host-supplied
+            // columns is whatever the page wrote. `canonicalizeHostColumns()` normally settles that
+            // before we get here, but an exact-case miss silently DROPS the column from the captured
+            // state — and that state is what the grid is rebuilt from, so the column would disappear
+            // entirely the first time a user resized anything. Too quiet a failure to leave to one guard.
+            const field = this._entityInfo.Fields.find(f => f.Name.toLowerCase() === col.colId?.toLowerCase());
             if (field) {
                 const keyLower = field.Name.toLowerCase();
                 const colConfig = {
@@ -4154,9 +4388,14 @@ export class EntityDataGridComponent extends BaseAngularComponent {
         return this._columns
             .filter(col => col.visible !== false)
             .map(col => {
-            const field = this._entityInfo?.Fields.find(f => f.Name === col.field);
+            // Case-insensitive, matching how col defs and auto-width resolve a host's field name.
+            // An exact-case match here silently cost the export column its data type.
+            const field = this._entityInfo?.Fields.find(f => f.Name.toLowerCase() === col.field.toLowerCase());
             return {
-                name: col.field,
+                // The entity's spelling, because `name` is the KEY the export engine reads each row by
+                // (`row[col.name]`) and rows are keyed from entity metadata. The host's spelling here
+                // exported a correctly-headed column of blank cells.
+                name: field?.Name ?? col.field,
                 displayName: col.title || field?.DisplayName || col.field,
                 dataType: this.mapFieldTypeToExportType(field?.Type),
                 width: typeof col.width === 'number' ? col.width : undefined
@@ -4533,7 +4772,7 @@ 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", 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, "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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", null, 0);
             i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Template, 27, 19, "div", 1);
@@ -4577,7 +4816,7 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             i0.ɵɵproperty("visible", ctx.showExportDialog)("config", ctx.exportDialogConfig);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ActiveRuntimeDriver ? 13 : -1);
-        } }, dependencies: [i2.AgGridAngular, i3.LoadingComponent, i4.PaginationComponent, i1.ExportDialogComponent, i5.MJEmptyStateComponent, i6.EntityActionUXHostComponent, i7.RecycleBinChipComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  \n\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  \n\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  \n\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  \n\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  \n\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  \n\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  \n\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  \n\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  \n\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\n\n\n\n.mj-grid-container[_ngcontent-%COMP%] {\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\n\n\n\n.mj-grid-toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count[_ngcontent-%COMP%], \n.selection-count[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n\n\n\n.mj-grid-content[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n\n\n\n.mj-grid-loading-overlay[_ngcontent-%COMP%] {\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\n\n\n\n\n\n\n\n\n\n\n\n.mj-grid-state-fill[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n}\n\n\n\n\n\n\n.mj-grid-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.sort-index[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n\n\n\n\n\n.mj-grid-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%] {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%] {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n\n\n\n\n\n.mj-grid-cell[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n\n\n.grid-lines-horizontal[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n\n\n.mj-grid-cell.align-left[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.cell-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.row-number-cell[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n\n\n\n\n\n.mj-grid-virtual-spacer[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search[_ngcontent-%COMP%] {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .toolbar-center[_ngcontent-%COMP%] {\n    order: 2;\n  }\n\n  \n\n  .toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n\n.toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n.toolbar-overflow[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.overflow-trigger[_ngcontent-%COMP%] {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.overflow-menu[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.overflow-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label[_ngcontent-%COMP%] {\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\n\n.overflow-item.action-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n  .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\n\n\n\n.mj-ag-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n  .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n\n\n  .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n\n\n\n\n\n\n\n.header-style-flat[_ngcontent-%COMP%]     .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\n\n.header-style-elevated[_ngcontent-%COMP%]     .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[_ngcontent-%COMP%]     .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\n\n.header-style-gradient[_ngcontent-%COMP%]     .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow[_ngcontent-%COMP%]     .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n\n\n  .ag-header-cell-sorted-asc .ag-icon-asc, \n  .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\n\n\n\n\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .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\n.alternate-rows-medium[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium[_ngcontent-%COMP%]     .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\n.alternate-rows-strong[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong[_ngcontent-%COMP%]     .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\n\n\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n\n\n\n\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n\n\n\n\n\n\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n\n\n.checkbox-style-filled[_ngcontent-%COMP%]     .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[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n\n\n\n\n\n\n\n  .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n  .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n\n\n  .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n\n\n  .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n  .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n\n\n  .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  .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n\n\n  .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n\n\n  .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  .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n  .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n\n\n  .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n\n\n  .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short[_ngcontent-%COMP%] {\n  width: 60px;\n}\n\n.skeleton-cell-medium[_ngcontent-%COMP%] {\n  width: 120px;\n}\n\n.skeleton-cell-long[_ngcontent-%COMP%] {\n  width: 180px;\n}\n\n\n\n  .ag-header-select-all {\n  margin-right: 0;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n  .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n  .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\n\n\n\n  .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n  .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\n\n\n\n  .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  .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n  .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\n\n  .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n  .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n\n\n\n\n[_nghost-%COMP%]     .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n[_nghost-%COMP%]     .ag-sort-ascending-icon .ag-icon, \n[_nghost-%COMP%]     .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n[_nghost-%COMP%]     .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.mj-aggregate-summary[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n\n\n\n.mj-aggregate-cards[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n\n\n\n\n\n\n\n  .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\n\n  .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n\n\n  .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}"], data: { animation: [
+        } }, dependencies: [i2.AgGridAngular, i3.LoadingComponent, i4.PaginationComponent, i1.ExportDialogComponent, i5.MJEmptyStateComponent, i6.EntityActionUXHostComponent, i7.RecycleBinChipComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --grid-border-color: var(--mj-border-default);\n  --grid-border-radius: 0px;\n  --grid-background: var(--mj-bg-surface);\n\n  \n\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  \n\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  \n\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  \n\n  --grid-checkbox-color: var(--mj-brand-primary);\n  --grid-selection-indicator-color: var(--mj-status-warning);\n\n  \n\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  \n\n  --grid-sort-indicator-color: var(--mj-brand-primary);\n\n  \n\n  --grid-toolbar-bg: var(--mj-bg-surface);\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: var(--mj-border-default);\n\n  \n\n  --grid-loading-overlay-bg: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n\n  \n\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\n\n\n\n.mj-grid-container[_ngcontent-%COMP%] {\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\n\n\n\n.mj-grid-toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-center[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n.search-input[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toolbar-button[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.row-count[_ngcontent-%COMP%], \n.selection-count[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n\n\n\n.mj-grid-content[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n}\n\n.mj-grid-scroll-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n\n\n\n.mj-grid-loading-overlay[_ngcontent-%COMP%] {\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\n\n\n\n\n\n\n\n\n\n\n\n.mj-grid-state-fill[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n}\n\n\n\n\n\n\n.mj-grid-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.mj-grid-header-cell.sortable[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.header-text[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sort-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n  color: var(--grid-sort-indicator-color);\n}\n\n.sort-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.sort-index[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-left: 2px;\n  font-weight: normal;\n}\n\n\n\n\n\n\n.mj-grid-row[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%] {\n  background: var(--grid-row-bg-alt);\n}\n\n.mj-grid-row.grid-row-alt[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-hover-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%] {\n  background: var(--grid-row-selected-bg);\n}\n\n.mj-grid-row.grid-row-selected[_ngcontent-%COMP%]:hover {\n  background: var(--grid-row-selected-hover-bg);\n}\n\n.mj-grid-row.grid-row-editing[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n.mj-grid-row.grid-row-dirty[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n\n\n\n\n\n.mj-grid-cell[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n\n\n.grid-lines-horizontal[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-vertical[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--grid-cell-border-color);\n}\n\n.grid-lines-both[_ngcontent-%COMP%]   .mj-grid-cell[_ngcontent-%COMP%] {\n  border-right: 1px solid var(--grid-cell-border-color);\n}\n\n\n\n.mj-grid-cell.align-left[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.mj-grid-cell.align-center[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.mj-grid-cell.align-right[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.cell-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.row-number-cell[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 40px;\n  min-width: 40px;\n  max-width: 40px;\n  justify-content: center;\n}\n\n.checkbox-cell[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--grid-checkbox-color);\n}\n\n\n\n\n\n\n.mj-grid-virtual-spacer[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n  .mj-grid-toolbar[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    padding: 8px;\n  }\n\n  .toolbar-search[_ngcontent-%COMP%] {\n    order: 3;\n    width: 100%;\n    margin-top: 8px;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .toolbar-center[_ngcontent-%COMP%] {\n    order: 2;\n  }\n\n  \n\n  .toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n\n.toolbar-button[_ngcontent-%COMP%]   .button-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n.toolbar-overflow[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.overflow-trigger[_ngcontent-%COMP%] {\n  padding: 6px 8px !important;\n}\n\n.overflow-trigger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.overflow-menu[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-card);\n}\n\n.overflow-item[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.overflow-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  text-align: center;\n}\n\n.overflow-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.overflow-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n.overflow-section-label[_ngcontent-%COMP%] {\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\n\n.overflow-item.action-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n  .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\n\n\n\n.mj-ag-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n\n\n\n\n\n  .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 var(--mj-status-warning);\n}\n\n\n\n  .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, var(--mj-brand-primary));\n}\n\n\n\n\n\n\n\n\n.header-style-flat[_ngcontent-%COMP%]     .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\n\n.header-style-elevated[_ngcontent-%COMP%]     .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[_ngcontent-%COMP%]     .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\n\n.header-style-gradient[_ngcontent-%COMP%]     .ag-header {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: none;\n}\n\n.header-style-gradient.header-shadow[_ngcontent-%COMP%]     .ag-header {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header {\n  background: var(--mj-text-secondary);\n  border-bottom: none;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell-text {\n  color: var(--mj-text-inverse);\n  font-weight: 600;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-icon {\n  color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n\n\n  .ag-header-cell-sorted-asc .ag-icon-asc, \n  .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\n\n\n\n\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle[_ngcontent-%COMP%]     .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\n.alternate-rows-medium[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium[_ngcontent-%COMP%]     .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\n.alternate-rows-strong[_ngcontent-%COMP%]     .ag-row-odd {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong[_ngcontent-%COMP%]     .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\n\n\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-row {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n.hover-transitions[_ngcontent-%COMP%]     .ag-cell {\n  transition: background-color var(--grid-hover-transition, 150ms) ease;\n}\n\n\n\n\n\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-compact[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-normal[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.cell-padding-comfortable[_ngcontent-%COMP%]     .ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n\n\n\n\n\n\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper {\n  border-radius: 4px;\n}\n\n.checkbox-style-rounded[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper::after {\n  border-radius: 3px;\n}\n\n\n\n.checkbox-style-filled[_ngcontent-%COMP%]     .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[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--mj-text-inverse);\n}\n\n\n\n\n\n\n\n\n  .cell-align-right {\n  text-align: right;\n  justify-content: flex-end;\n}\n\n  .header-align-right .ag-header-cell-label {\n  justify-content: flex-end;\n}\n\n\n\n  .cell-empty {\n  color: var(--mj-text-disabled);\n  font-style: normal;\n}\n\n\n\n  .cell-boolean-true {\n  color: var(--mj-status-success);\n  font-size: 14px;\n}\n\n  .cell-boolean-false {\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n\n\n  .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  .cell-link:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n\n\n  .cell-email {\n  font-family: inherit;\n  font-size: 13px;\n}\n\n\n\n  .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  .cell-fk-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n  .cell-fk-link:active {\n  color: var(--mj-brand-primary-active);\n}\n\n\n\n  .cell-url {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  font-size: 13px;\n}\n\n\n\n  .cell-phone {\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.3px;\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-cell-short[_ngcontent-%COMP%] {\n  width: 60px;\n}\n\n.skeleton-cell-medium[_ngcontent-%COMP%] {\n  width: 120px;\n}\n\n.skeleton-cell-long[_ngcontent-%COMP%] {\n  width: 180px;\n}\n\n\n\n  .ag-header-select-all {\n  margin-right: 0;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-row {\n  border-bottom: 1px solid var(--grid-cell-border-color, var(--mj-border-subtle));\n}\n\n  .ag-theme-alpine .ag-row:last-child {\n  border-bottom: none;\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n  .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\n\n\n\n  .ag-body-viewport::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n  .ag-theme-alpine .ag-pinned-left-cols-container {\n  border-right: 2px solid var(--grid-border-color, var(--mj-border-default));\n}\n\n  .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\n\n\n\n  .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  .ag-theme-alpine .ag-header-cell:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n  .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\n\n  .ag-theme-alpine .ag-sort-indicator-icon {\n  transition: transform 0.2s ease;\n}\n\n  .ag-theme-alpine .ag-header-cell:hover .ag-sort-indicator-icon {\n  transform: scale(1.1);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: var(--mj-brand-primary) !important;\n  font-weight: 700 !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: var(--mj-status-error) !important;\n  font-weight: 700 !important;\n}\n\n\n\n\n\n[_nghost-%COMP%]     .ag-sort-ascending-icon {\n  color: var(--mj-brand-primary) !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-sort-descending-icon {\n  color: var(--mj-status-error) !important;\n}\n\n[_nghost-%COMP%]     .ag-sort-ascending-icon .ag-icon, \n[_nghost-%COMP%]     .ag-sort-descending-icon .ag-icon {\n  font-size: 14px !important;\n}\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     .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\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-sort-order {\n  color: var(--mj-status-error) !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sortable:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n[_nghost-%COMP%]     .ag-header-cell-sortable:hover .ag-header-cell-text {\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.mj-aggregate-summary[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  align-items: center;\n}\n\n.aggregate-summary-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.agg-summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.agg-summary-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  color: var(--mj-text-disabled);\n}\n\n.aggregate-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n\n\n\n.mj-aggregate-cards[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.aggregate-card-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n\n\n\n\n\n\n\n  .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\n\n  .ag-cell.cell-wrap-text {\n  overflow: visible;\n  text-overflow: clip;\n}\n\n\n\n  .ag-row[style*=\"auto-height\"] {\n  min-height: 40px;\n}\n\n\n\n\n\n\n\n\n\n\n  .ag-header-cell.mj-grid-filler-header, \n  .ag-cell.mj-grid-filler-cell {\n  border-left: none !important;\n  border-right: none !important;\n  cursor: default;\n}\n\n\n\n\n\n\n  .ag-header-cell.mj-grid-filler-header:hover {\n  background-color: transparent !important;\n}"], data: { animation: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0, transform: 'translateY(-8px)' }),
@@ -4601,7 +4840,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"] }]
+                ], 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"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }, { type: i0.NgZone }], { Params: [{
             type: Input
         }], AllowLoad: [{
@@ -4674,6 +4913,8 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             type: Input
         }], ShowRowNumbers: [{
             type: Input
+        }], FillWidth: [{
+            type: Input
         }], Striped: [{
             type: Input
         }], GridLines: [{
@@ -4846,5 +5087,5 @@ export class EntityDataGridComponent extends BaseAngularComponent {
             type: ViewChild,
             args: ['gridContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 170 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 190 }); })();
 //# sourceMappingURL=entity-data-grid.component.js.map