@memberjunction/ng-entity-viewer 5.11.0 → 5.13.0

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

@@ -15,22 +15,23 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-export-service";
 import * as i2 from "ag-grid-angular";
 import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-pagination";
 const _c0 = ["gridContainer"];
 function EntityDataGridComponent_Conditional_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵelementStart(0, "button", 36);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.FilterText = ""); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 32);
-    i0.ɵɵelementStart(2, "input", 33);
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "input", 34);
     i0.ɵɵlistener("input", function EntityDataGridComponent_Conditional_2_Conditional_2_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.FilterText = $event.target.value); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_2_Conditional_3_Template, 2, 0, "button", 34);
+    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_2_Conditional_3_Template, 2, 0, "button", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -56,9 +57,9 @@ function EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Conditional_2
 } }
 function EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 39);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const button_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onToolbarButtonClick(button_r6)); });
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Conditional_1_Template, 1, 2, "i", 39);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Conditional_1_Template, 1, 2, "i", 40);
     i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Conditional_2_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -72,14 +73,14 @@ function EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Template(rf,
     i0.ɵɵconditional(button_r6.text ? 2 : -1);
 } }
 function EntityDataGridComponent_Conditional_2_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Template, 3, 6, "button", 37);
+    i0.ɵɵconditionalCreate(0, EntityDataGridComponent_Conditional_2_For_4_Conditional_0_Template, 3, 6, "button", 38);
 } if (rf & 2) {
     const button_r6 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(button_r6.position !== "right" && ctx_r2.isButtonVisible(button_r6) ? 0 : -1);
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -88,7 +89,7 @@ function EntityDataGridComponent_Conditional_2_Conditional_6_Template(rf, ctx) {
     i0.ɵɵtextInterpolate2(" ", ctx_r2.totalRowCount, " ", ctx_r2.totalRowCount === 1 ? "row" : "rows", " ");
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -98,19 +99,19 @@ function EntityDataGridComponent_Conditional_2_Conditional_7_Template(rf, ctx) {
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵelementStart(0, "button", 41);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
-    i0.ɵɵelement(1, "i", 41);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵelementStart(0, "button", 44);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
-    i0.ɵɵelement(1, "i", 44);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Refresh");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -121,28 +122,28 @@ function EntityDataGridComponent_Conditional_2_Conditional_10_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵelementStart(0, "button", 46);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
-    i0.ɵɵelement(1, "i", 46);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Export");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 48);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 48);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Delete");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵelementStart(0, "button", 50);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCompareClick()); });
-    i0.ɵɵelement(1, "i", 50);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Compare");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -151,10 +152,10 @@ function EntityDataGridComponent_Conditional_2_Conditional_13_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵelementStart(0, "button", 52);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMergeClick()); });
-    i0.ɵɵelement(1, "i", 52);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 53);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Merge");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -163,10 +164,10 @@ function EntityDataGridComponent_Conditional_2_Conditional_14_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵelementStart(0, "button", 54);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddToListClick()); });
-    i0.ɵɵelement(1, "i", 54);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Add to List");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -175,10 +176,10 @@ function EntityDataGridComponent_Conditional_2_Conditional_15_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵelementStart(0, "button", 56);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDuplicateSearchClick()); });
-    i0.ɵɵelement(1, "i", 56);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Find Duplicates");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -187,10 +188,10 @@ function EntityDataGridComponent_Conditional_2_Conditional_16_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵelementStart(0, "button", 58);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCommunicationClick()); });
-    i0.ɵɵelement(1, "i", 58);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelementStart(2, "span", 43);
     i0.ɵɵtext(3, "Send Message");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -199,16 +200,16 @@ function EntityDataGridComponent_Conditional_2_Conditional_17_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵelementStart(0, "button", 60);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
-    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 60);
+    i0.ɵɵelementStart(0, "button", 61);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
-    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -218,23 +219,23 @@ function EntityDataGridComponent_Conditional_2_Conditional_19_Template(rf, ctx)
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵelementStart(0, "button", 63);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵelementStart(0, "button", 64);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
-    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵelementStart(0, "button", 66);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onColumnChooserClick()); });
-    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -254,9 +255,9 @@ function EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Conditional_
 } }
 function EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 39);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const button_r22 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onToolbarButtonClick(button_r22)); });
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Conditional_1_Template, 1, 2, "i", 39);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Conditional_1_Template, 1, 2, "i", 40);
     i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Conditional_2_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -270,7 +271,7 @@ function EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Template(rf,
     i0.ɵɵconditional(button_r22.text ? 2 : -1);
 } }
 function EntityDataGridComponent_Conditional_2_For_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Template, 3, 6, "button", 37);
+    i0.ɵɵconditionalCreate(0, EntityDataGridComponent_Conditional_2_For_24_Conditional_0_Template, 3, 6, "button", 38);
 } if (rf & 2) {
     const button_r22 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -278,16 +279,16 @@ function EntityDataGridComponent_Conditional_2_For_24_Template(rf, ctx) { if (rf
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵelementStart(0, "button", 74);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.onExportClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Export to Excel");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_For_4_Template_button_click_0_listener() { const action_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.onEntityActionClick(action_r26); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
@@ -303,51 +304,51 @@ function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Cond
     i0.ɵɵtextInterpolate(action_r26.name);
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 72);
-    i0.ɵɵelementStart(1, "div", 74);
+    i0.ɵɵelement(0, "div", 73);
+    i0.ɵɵelementStart(1, "div", 75);
     i0.ɵɵtext(2, "Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_For_4_Template, 4, 4, "button", 75, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_For_4_Template, 4, 4, "button", 76, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r2.EntityActions);
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 72);
+    i0.ɵɵelement(0, "div", 73);
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵelementStart(0, "button", 74);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.onColumnChooserClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
-    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Manage Columns");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵelementStart(0, "button", 74);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.onCommunicationClick(); return i0.ɵɵresetView(ctx_r2.closeOverflowMenu()); });
-    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Send Message");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 72);
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Conditional_1_Template, 4, 0, "button", 71);
+    i0.ɵɵelement(0, "div", 73);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Conditional_1_Template, 4, 0, "button", 72);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.showCommunicationInOverflow ? 1 : -1);
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_1_Template, 4, 0, "button", 71);
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_1_Template, 4, 0, "button", 72);
     i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_2_Template, 5, 0);
-    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_3_Template, 1, 0, "div", 72);
-    i0.ɵɵconditionalCreate(4, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_4_Template, 4, 0, "button", 71);
+    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_3_Template, 1, 0, "div", 73);
+    i0.ɵɵconditionalCreate(4, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_4_Template, 4, 0, "button", 72);
     i0.ɵɵconditionalCreate(5, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Conditional_5_Template, 2, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -366,13 +367,13 @@ function EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Temp
 } }
 function EntityDataGridComponent_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵelementStart(0, "div", 68);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 68);
+    i0.ɵɵelementStart(1, "button", 69);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_2_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleOverflowMenu()); });
-    i0.ɵɵelement(2, "i", 69);
+    i0.ɵɵelement(2, "i", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Template, 6, 6, "div", 70);
+    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_2_Conditional_25_Conditional_3_Template, 6, 6, "div", 71);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -380,31 +381,31 @@ function EntityDataGridComponent_Conditional_2_Conditional_25_Template(rf, ctx)
     i0.ɵɵconditional(ctx_r2.showOverflowMenu ? 3 : -1);
 } }
 function EntityDataGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 11);
-    i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Conditional_2_Template, 4, 3, "div", 12);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 12);
+    i0.ɵɵconditionalCreate(2, EntityDataGridComponent_Conditional_2_Conditional_2_Template, 4, 3, "div", 13);
     i0.ɵɵrepeaterCreate(3, EntityDataGridComponent_Conditional_2_For_4_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 13);
-    i0.ɵɵconditionalCreate(6, EntityDataGridComponent_Conditional_2_Conditional_6_Template, 2, 2, "span", 14);
-    i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_2_Conditional_7_Template, 2, 1, "span", 15);
+    i0.ɵɵelementStart(5, "div", 14);
+    i0.ɵɵconditionalCreate(6, EntityDataGridComponent_Conditional_2_Conditional_6_Template, 2, 2, "span", 15);
+    i0.ɵɵconditionalCreate(7, EntityDataGridComponent_Conditional_2_Conditional_7_Template, 2, 1, "span", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 16);
-    i0.ɵɵconditionalCreate(9, EntityDataGridComponent_Conditional_2_Conditional_9_Template, 4, 0, "button", 17);
-    i0.ɵɵconditionalCreate(10, EntityDataGridComponent_Conditional_2_Conditional_10_Template, 4, 3, "button", 18);
-    i0.ɵɵconditionalCreate(11, EntityDataGridComponent_Conditional_2_Conditional_11_Template, 4, 0, "button", 19);
-    i0.ɵɵconditionalCreate(12, EntityDataGridComponent_Conditional_2_Conditional_12_Template, 4, 0, "button", 20);
-    i0.ɵɵconditionalCreate(13, EntityDataGridComponent_Conditional_2_Conditional_13_Template, 4, 1, "button", 21);
-    i0.ɵɵconditionalCreate(14, EntityDataGridComponent_Conditional_2_Conditional_14_Template, 4, 1, "button", 22);
-    i0.ɵɵconditionalCreate(15, EntityDataGridComponent_Conditional_2_Conditional_15_Template, 4, 1, "button", 23);
-    i0.ɵɵconditionalCreate(16, EntityDataGridComponent_Conditional_2_Conditional_16_Template, 4, 1, "button", 24);
-    i0.ɵɵconditionalCreate(17, EntityDataGridComponent_Conditional_2_Conditional_17_Template, 4, 1, "button", 25);
-    i0.ɵɵconditionalCreate(18, EntityDataGridComponent_Conditional_2_Conditional_18_Template, 2, 0, "button", 26);
-    i0.ɵɵconditionalCreate(19, EntityDataGridComponent_Conditional_2_Conditional_19_Template, 2, 3, "button", 27);
-    i0.ɵɵconditionalCreate(20, EntityDataGridComponent_Conditional_2_Conditional_20_Template, 2, 0, "button", 28);
-    i0.ɵɵconditionalCreate(21, EntityDataGridComponent_Conditional_2_Conditional_21_Template, 2, 0, "button", 29);
-    i0.ɵɵconditionalCreate(22, EntityDataGridComponent_Conditional_2_Conditional_22_Template, 2, 0, "button", 30);
+    i0.ɵɵelementStart(8, "div", 17);
+    i0.ɵɵconditionalCreate(9, EntityDataGridComponent_Conditional_2_Conditional_9_Template, 4, 0, "button", 18);
+    i0.ɵɵconditionalCreate(10, EntityDataGridComponent_Conditional_2_Conditional_10_Template, 4, 3, "button", 19);
+    i0.ɵɵconditionalCreate(11, EntityDataGridComponent_Conditional_2_Conditional_11_Template, 4, 0, "button", 20);
+    i0.ɵɵconditionalCreate(12, EntityDataGridComponent_Conditional_2_Conditional_12_Template, 4, 0, "button", 21);
+    i0.ɵɵconditionalCreate(13, EntityDataGridComponent_Conditional_2_Conditional_13_Template, 4, 1, "button", 22);
+    i0.ɵɵconditionalCreate(14, EntityDataGridComponent_Conditional_2_Conditional_14_Template, 4, 1, "button", 23);
+    i0.ɵɵconditionalCreate(15, EntityDataGridComponent_Conditional_2_Conditional_15_Template, 4, 1, "button", 24);
+    i0.ɵɵconditionalCreate(16, EntityDataGridComponent_Conditional_2_Conditional_16_Template, 4, 1, "button", 25);
+    i0.ɵɵconditionalCreate(17, EntityDataGridComponent_Conditional_2_Conditional_17_Template, 4, 1, "button", 26);
+    i0.ɵɵconditionalCreate(18, EntityDataGridComponent_Conditional_2_Conditional_18_Template, 2, 0, "button", 27);
+    i0.ɵɵconditionalCreate(19, EntityDataGridComponent_Conditional_2_Conditional_19_Template, 2, 3, "button", 28);
+    i0.ɵɵconditionalCreate(20, EntityDataGridComponent_Conditional_2_Conditional_20_Template, 2, 0, "button", 29);
+    i0.ɵɵconditionalCreate(21, EntityDataGridComponent_Conditional_2_Conditional_21_Template, 2, 0, "button", 30);
+    i0.ɵɵconditionalCreate(22, EntityDataGridComponent_Conditional_2_Conditional_22_Template, 2, 0, "button", 31);
     i0.ɵɵrepeaterCreate(23, EntityDataGridComponent_Conditional_2_For_24_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(25, EntityDataGridComponent_Conditional_2_Conditional_25_Template, 4, 1, "div", 31);
+    i0.ɵɵconditionalCreate(25, EntityDataGridComponent_Conditional_2_Conditional_25_Template, 4, 1, "div", 32);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -450,7 +451,7 @@ function EntityDataGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r2.hasOverflowMenuItems ? 25 : -1);
 } }
 function EntityDataGridComponent_Conditional_3_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelementStart(0, "div", 80);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -459,12 +460,12 @@ function EntityDataGridComponent_Conditional_3_For_2_Conditional_1_Template(rf,
     i0.ɵɵclassMap(agg_r29.icon);
 } }
 function EntityDataGridComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_3_For_2_Conditional_1_Template, 2, 2, "div", 79);
-    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_3_For_2_Conditional_1_Template, 2, 2, "div", 80);
+    i0.ɵɵelementStart(2, "div", 81)(3, "span", 82);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 82);
+    i0.ɵɵelementStart(5, "span", 83);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -478,14 +479,14 @@ function EntityDataGridComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate(ctx_r2.getAggregateValue(agg_r29));
 } }
 function EntityDataGridComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, EntityDataGridComponent_Conditional_3_For_2_Template, 7, 3, "div", 77, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_3_Conditional_3_Template, 2, 0, "div", 78);
+    i0.ɵɵrepeaterCreate(1, EntityDataGridComponent_Conditional_3_For_2_Template, 7, 3, "div", 78, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(3, EntityDataGridComponent_Conditional_3_Conditional_3_Template, 2, 0, "div", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -496,17 +497,17 @@ function EntityDataGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
 } }
 function EntityDataGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "mj-loading", 84);
+    i0.ɵɵelement(1, "mj-loading", 85);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 86);
+    i0.ɵɵelementStart(4, "button", 87);
     i0.ɵɵlistener("click", function EntityDataGridComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Refresh()); });
     i0.ɵɵtext(5, "Retry");
     i0.ɵɵelementEnd()();
@@ -517,14 +518,14 @@ function EntityDataGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
 } }
 function EntityDataGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelement(1, "i", 88);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ag-grid-angular", 88);
+    i0.ɵɵelementStart(0, "ag-grid-angular", 89);
     i0.ɵɵlistener("gridReady", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("cellClicked", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_cellClicked_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgCellClicked($event)); })("rowClicked", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowClicked($event)); })("rowDoubleClicked", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowDoubleClicked($event)); })("sortChanged", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSortChanged($event)); })("selectionChanged", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSelectionChanged($event)); })("columnResized", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnResized($event)); })("columnMoved", function EntityDataGridComponent_Conditional_8_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -533,48 +534,57 @@ function EntityDataGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
 } }
 function EntityDataGridComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ag-grid-angular", 89);
+    i0.ɵɵelementStart(0, "ag-grid-angular", 90);
     i0.ɵɵlistener("gridReady", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("cellClicked", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_cellClicked_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgCellClicked($event)); })("rowClicked", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowClicked($event)); })("rowDoubleClicked", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowDoubleClicked($event)); })("sortChanged", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSortChanged($event)); })("selectionChanged", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSelectionChanged($event)); })("columnResized", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnResized($event)); })("columnMoved", function EntityDataGridComponent_Conditional_9_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("theme", ctx_r2.agGridTheme)("columnDefs", ctx_r2.agColumnDefs)("defaultColDef", ctx_r2.defaultColDef)("rowSelection", ctx_r2.agRowSelection)("getRowId", ctx_r2.getRowId)("suppressCellFocus", true)("rowHeight", ctx_r2.RowHeight)("headerHeight", ctx_r2.ShowHeader ? undefined : 0)("rowModelType", "infinite")("cacheBlockSize", ctx_r2.CacheBlockSize)("maxBlocksInCache", ctx_r2.MaxBlocksInCache)("infiniteInitialRowCount", 1)("cacheOverflowSize", 2);
 } }
-function EntityDataGridComponent_Conditional_10_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function EntityDataGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-pagination", 91);
+    i0.ɵɵlistener("PageChange", function EntityDataGridComponent_Conditional_10_Template_mj_pagination_PageChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.PageChange.emit($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TotalRowCount", ctx_r2.totalRowCount)("PageNumber", ctx_r2.PagerPageNumber)("PageSize", ctx_r2.PageSize)("IsLoading", ctx_r2.loading);
+} }
+function EntityDataGridComponent_Conditional_11_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const agg_r33 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(agg_r33.icon);
+    const agg_r34 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(agg_r34.icon);
 } }
-function EntityDataGridComponent_Conditional_10_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_10_For_3_Conditional_1_Template, 1, 2, "i", 39);
-    i0.ɵɵelementStart(2, "span", 93);
+function EntityDataGridComponent_Conditional_11_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵconditionalCreate(1, EntityDataGridComponent_Conditional_11_For_3_Conditional_1_Template, 1, 2, "i", 40);
+    i0.ɵɵelementStart(2, "span", 95);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 94);
+    i0.ɵɵelementStart(4, "span", 96);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const agg_r33 = ctx.$implicit;
+    const agg_r34 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agg_r33.icon ? 1 : -1);
+    i0.ɵɵconditional(agg_r34.icon ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", agg_r33.label, ":");
+    i0.ɵɵtextInterpolate1("", agg_r34.label, ":");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.getAggregateValue(agg_r33));
+    i0.ɵɵtextInterpolate(ctx_r2.getAggregateValue(agg_r34));
 } }
-function EntityDataGridComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
-    i0.ɵɵelement(1, "i", 83);
+function EntityDataGridComponent_Conditional_11_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } }
-function EntityDataGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 90);
-    i0.ɵɵrepeaterCreate(2, EntityDataGridComponent_Conditional_10_For_3_Template, 6, 3, "div", 91, i0.ɵɵrepeaterTrackByIdentity);
+function EntityDataGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 92);
+    i0.ɵɵrepeaterCreate(2, EntityDataGridComponent_Conditional_11_For_3_Template, 6, 3, "div", 93, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, EntityDataGridComponent_Conditional_10_Conditional_4_Template, 2, 0, "div", 92);
+    i0.ɵɵconditionalCreate(4, EntityDataGridComponent_Conditional_11_Conditional_4_Template, 2, 0, "div", 94);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -714,6 +724,30 @@ export class EntityDataGridComponent {
     get MaxBlocksInCache() {
         return this._maxBlocksInCache;
     }
+    /**
+     * Whether to show the shared PaginationComponent below the grid.
+     * When true, displays page-based navigation (first/prev/next/last) using the
+     * TotalRowCount from server responses. The pager auto-hides when there's only one page.
+     */
+    ShowPager = false;
+    /**
+     * Current page number for the shared pager (1-based).
+     * Set by parent when using external data with server-side paging.
+     */
+    PagerPageNumber = 1;
+    /**
+     * Total row count from server for the shared pager.
+     * When using external data ([Data] input), the parent must set this
+     * so the pager knows the total number of rows across all pages.
+     */
+    set TotalRowCount(value) {
+        this.totalRowCount = value;
+    }
+    /**
+     * Emits when the user navigates to a different page via the shared PaginationComponent.
+     * Parent components should handle this by re-fetching data with updated StartRow/MaxRows.
+     */
+    PageChange = new EventEmitter();
     // ========================================
     // External Data Input
     // ========================================
@@ -1482,8 +1516,22 @@ export class EntityDataGridComponent {
     gridApi = null;
     /** AG Grid theme (v34+) with custom selection colors */
     agGridTheme = themeAlpine.withParams({
-        selectedRowBackgroundColor: '#fff3cd', // More visible mellow yellow selection
-        rowHoverColor: '#f5f5f5'
+        backgroundColor: 'var(--mj-bg-surface)',
+        foregroundColor: 'var(--mj-text-primary)',
+        textColor: 'var(--mj-text-primary)',
+        borderColor: 'var(--mj-border-default)',
+        chromeBackgroundColor: 'var(--mj-bg-surface-card)',
+        headerBackgroundColor: 'var(--mj-bg-surface-card)',
+        headerTextColor: 'var(--mj-text-secondary)',
+        cellTextColor: 'var(--mj-text-primary)',
+        subtleTextColor: 'var(--mj-text-muted)',
+        dataBackgroundColor: 'var(--mj-bg-surface)',
+        oddRowBackgroundColor: 'var(--mj-bg-surface-card)',
+        rowHoverColor: 'var(--mj-bg-surface-hover, color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface)))',
+        selectedRowBackgroundColor: 'color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface))',
+        accentColor: 'var(--mj-brand-primary)',
+        borderRadius: 'var(--mj-radius-sm)',
+        browserColorScheme: 'inherit',
     });
     /** AG Grid row selection configuration */
     agRowSelection = { mode: 'singleRow' };
@@ -4253,7 +4301,7 @@ export class EntityDataGridComponent {
         } 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", 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", AggregatesConfig: "AggregatesConfig" }, outputs: { 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", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, decls: 12, vars: 14, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], [1, "mj-grid-error"], [1, "mj-grid-empty"], [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"], [1, "mj-aggregate-summary"], [3, "closed", "visible", "config"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export to Excel", 1, "toolbar-button"], ["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"], ["title", "Add selected records to a list", 1, "toolbar-button", 3, "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"], [1, "search-clear"], [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 to Excel", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-file-excel"], ["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"], ["title", "Add selected records to a list", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-list-check"], ["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, "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..."], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-retry", 3, "click"], [1, "fa-solid", "fa-inbox"], [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"], [1, "aggregate-summary-content"], [1, "aggregate-summary-item"], [1, "aggregate-loading"], [1, "agg-summary-label"], [1, "agg-summary-value"]], 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", 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", 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", NavigationRequested: "NavigationRequested", NewRecordDialogRequested: "NewRecordDialogRequested", NewRecordTabRequested: "NewRecordTabRequested", CompareRecordsRequested: "CompareRecordsRequested", MergeRecordsRequested: "MergeRecordsRequested", CommunicationRequested: "CommunicationRequested", DuplicateSearchRequested: "DuplicateSearchRequested", AddToListRequested: "AddToListRequested", LoadEntityActionsRequested: "LoadEntityActionsRequested", EntityActionRequested: "EntityActionRequested" }, standalone: false, decls: 13, vars: 15, consts: [["gridContainer", ""], [1, "mj-grid-toolbar"], [1, "mj-aggregate-cards"], [1, "mj-grid-content"], [1, "mj-grid-loading-overlay"], [1, "mj-grid-error"], [1, "mj-grid-empty"], [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"], [1, "toolbar-left"], [1, "toolbar-search"], [1, "toolbar-center"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], ["title", "Create new record", 1, "toolbar-button"], ["title", "Refresh data", 1, "toolbar-button", 3, "disabled"], ["title", "Export to Excel", 1, "toolbar-button"], ["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"], ["title", "Add selected records to a list", 1, "toolbar-button", 3, "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"], [1, "search-clear"], [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 to Excel", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-file-excel"], ["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"], ["title", "Add selected records to a list", 1, "toolbar-button", 3, "click", "disabled"], [1, "fa-solid", "fa-list-check"], ["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, "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..."], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-retry", 3, "click"], [1, "fa-solid", "fa-inbox"], [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"]], 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, 26, 18, "div", 1);
@@ -4265,10 +4313,11 @@ export class EntityDataGridComponent {
             i0.ɵɵconditionalCreate(8, EntityDataGridComponent_Conditional_8_Template, 1, 9, "ag-grid-angular", 7);
             i0.ɵɵconditionalCreate(9, EntityDataGridComponent_Conditional_9_Template, 1, 13, "ag-grid-angular", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(10, EntityDataGridComponent_Conditional_10_Template, 5, 1, "div", 9);
+            i0.ɵɵconditionalCreate(10, EntityDataGridComponent_Conditional_10_Template, 1, 4, "mj-pagination", 9);
+            i0.ɵɵconditionalCreate(11, EntityDataGridComponent_Conditional_11_Template, 5, 1, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "mj-export-dialog", 10);
-            i0.ɵɵlistener("closed", function EntityDataGridComponent_Template_mj_export_dialog_closed_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportDialogClosed($event)); });
+            i0.ɵɵelementStart(12, "mj-export-dialog", 11);
+            i0.ɵɵlistener("closed", function EntityDataGridComponent_Template_mj_export_dialog_closed_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportDialogClosed($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.gridContainerClasses.join(" "));
@@ -4288,10 +4337,12 @@ export class EntityDataGridComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.errorMessage && ctx.PaginationMode === "infinite" ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowAggregateSummary ? 10 : -1);
+            i0.ɵɵconditional(ctx.ShowPager ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowAggregateSummary ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("visible", ctx.showExportDialog)("config", ctx.exportDialogConfig);
-        } }, dependencies: [i2.AgGridAngular, i3.LoadingComponent, i1.ExportDialogComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --grid-border-color: #e0e0e0;\n  --grid-border-radius: 0px;\n  --grid-background: #ffffff;\n\n  \n\n  --grid-header-bg: #fafafa;\n  --grid-header-text: #333333;\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: #e0e0e0;\n\n  \n\n  --grid-row-height: 40px;\n  --grid-row-bg: #ffffff;\n  --grid-row-bg-alt: #fafafa;\n  --grid-row-hover-bg: #f5f5f5;\n  --grid-row-selected-bg: #fff9e6;\n  --grid-row-selected-hover-bg: #fff3cc;\n\n  \n\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: #333333;\n  --grid-cell-border-color: #f0f0f0;\n\n  \n\n  --grid-checkbox-color: #2196F3;\n  --grid-selection-indicator-color: #f9a825;\n\n  \n\n  --grid-edit-cell-bg: #ffffff;\n  --grid-edit-cell-border: #2196F3;\n  --grid-edit-cell-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n\n  \n\n  --grid-sort-indicator-color: #2196F3;\n\n  \n\n  --grid-toolbar-bg: #ffffff;\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: #e0e0e0;\n\n  \n\n  --grid-loading-overlay-bg: rgba(255, 255, 255, 0.8);\n\n  \n\n  --grid-empty-text-color: #999999;\n  --grid-empty-icon-color: #cccccc;\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: #666;\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: #999;\n  font-size: 13px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid #ddd;\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 rgba(33, 150, 243, 0.1);\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: #999;\n  font-size: 12px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n  color: #666;\n}\n\n.toolbar-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #eee;\n  border-color: #ccc;\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: #d32f2f;\n}\n\n.toolbar-button-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #ffcdd2;\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.mj-grid-error[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: #d32f2f;\n  gap: 12px;\n}\n\n.mj-grid-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.error-retry[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: #d32f2f;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry[_ngcontent-%COMP%]:hover {\n  background: #c62828;\n}\n\n\n\n\n\n\n.mj-grid-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\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: #fffde7;\n}\n\n.mj-grid-row.grid-row-dirty[_ngcontent-%COMP%] {\n  border-left: 3px solid #ff9800;\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: #999;\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: #ffffff;\n  border: 1px solid #e0e0e0;\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: #333;\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: #f5f5f5;\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: #666;\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: #e0e0e0;\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: #999;\n  letter-spacing: 0.5px;\n}\n\n\n\n.overflow-item.action-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196F3;\n}\n\n\n\n\n\n\n  .highlight-match {\n  background-color: #fff176;\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  .ag-theme-alpine {\n  \n\n  --ag-row-hover-color: var(--grid-row-hover-bg);\n  --ag-selected-row-background-color: var(--grid-row-selected-bg);\n  --ag-header-background-color: var(--grid-header-bg);\n\n  \n\n  --ag-range-selection-background-color: rgba(249, 168, 37, 0.15);\n  --ag-range-selection-border-color: #f9a825;\n\n  \n\n  --ag-borders: none;\n  --ag-row-border-color: var(--grid-cell-border-color);\n}\n\n\n\n  .ag-row-selected {\n  box-shadow: inset 4px 0 0 0 #f9a825;\n}\n\n\n\n  .ag-theme-alpine .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n  .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, #2196F3);\n}\n\n\n\n  .ag-theme-alpine .ag-row:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f0f7ff);\n}\n\n\n\n\n\n\n\n\n.header-style-flat[_ngcontent-%COMP%]     .ag-header {\n  background: var(--grid-header-bg, #fafafa);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\n}\n\n\n\n.header-style-elevated[_ngcontent-%COMP%]     .ag-header {\n  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\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: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\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: linear-gradient(180deg, #37474f 0%, #263238 100%);\n  border-bottom: none;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell-text {\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-icon {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.header-style-bold[_ngcontent-%COMP%]     .ag-header-cell:hover {\n  background: rgba(255, 255, 255, 0.1);\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, #2196F3));\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, #f5f5f5);\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, #f5f5f5);\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, #f5f5f5);\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, #2196F3);\n  border-color: var(--grid-checkbox-color, #2196F3);\n}\n\n.checkbox-style-filled[_ngcontent-%COMP%]     .ag-checkbox-input-wrapper.ag-checked::after {\n  color: #ffffff;\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: #bdbdbd;\n  font-style: normal;\n}\n\n\n\n  .cell-boolean-true {\n  color: #43a047;\n  font-size: 14px;\n}\n\n  .cell-boolean-false {\n  color: #bdbdbd;\n  font-size: 14px;\n}\n\n\n\n  .cell-link {\n  color: var(--grid-accent-color, #2196F3);\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: #1976D2;\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, #1976D2);\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: #1565C0;\n  text-decoration: underline;\n}\n\n  .cell-fk-link:active {\n  color: #0D47A1;\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, #f0f0f0);\n}\n\n.skeleton-cell[_ngcontent-%COMP%] {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0px,\n    #e8e8e8 40px,\n    #f0f0f0 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, #f0f0f0);\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, #2196F3);\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: #f5f5f5;\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n  .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\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, #e0e0e0);\n}\n\n  .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, #e0e0e0);\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: #546e7a;\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, #2196F3);\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: linear-gradient(180deg, rgba(25, 118, 210, 0.15) 0%, rgba(25, 118, 210, 0.08) 100%) !important;\n  position: relative;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc {\n  background: linear-gradient(180deg, rgba(216, 27, 96, 0.15) 0%, rgba(216, 27, 96, 0.08) 100%) !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: #1976d2;\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: #d81b60;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-asc .ag-header-cell-text {\n  color: #1976d2 !important;\n  font-weight: 700 !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-header-cell-text {\n  color: #d81b60 !important;\n  font-weight: 700 !important;\n}\n\n\n\n\n\n[_nghost-%COMP%]     .ag-sort-ascending-icon {\n  color: #1976d2 !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-sort-descending-icon {\n  color: #d81b60 !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: #1976d2 !important;\n}\n\n\n\n[_nghost-%COMP%]     .ag-header-cell-sorted-desc .ag-sort-order {\n  color: #d81b60 !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: #1976d2;\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: linear-gradient(to bottom, #f8fafc, #f1f5f9);\n  border-top: 1px solid #e2e8f0;\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: white;\n  border: 1px solid #e2e8f0;\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: #64748b;\n}\n\n.agg-summary-label[_ngcontent-%COMP%] {\n  color: #64748b;\n  font-weight: 500;\n}\n\n.agg-summary-value[_ngcontent-%COMP%] {\n  color: #1e293b;\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: #94a3b8;\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: linear-gradient(to bottom, #f8fafc, #f1f5f9);\n  border-bottom: 1px solid #e2e8f0;\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: white;\n  border: 1px solid #e2e8f0;\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: #cbd5e1;\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: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\n  border-radius: 10px;\n  color: #0284c7;\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: #64748b;\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: #0f172a;\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: #94a3b8;\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], 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.mj-grid-error[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: var(--mj-status-error);\n  gap: 12px;\n}\n\n.mj-grid-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.error-retry[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-text);\n}\n\n\n\n\n\n\n.mj-grid-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\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: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0, transform: 'translateY(-8px)' }),
@@ -4315,7 +4366,7 @@ export class EntityDataGridComponent {
                             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                <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        <!-- 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 to Excel\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-file-excel\"></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=\"Add selected records to a list\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid fa-list-check\"></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 to Excel</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      <div class=\"mj-grid-error\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage }}</span>\n        <button class=\"error-retry\" (click)=\"Refresh()\">Retry</button>\n      </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <div class=\"mj-grid-empty\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <span>No data to display</span>\n      </div>\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  <!-- 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", styles: ["/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== */\n\n:host {\n  /* Grid container */\n  --grid-border-color: #e0e0e0;\n  --grid-border-radius: 0px;\n  --grid-background: #ffffff;\n\n  /* Header */\n  --grid-header-bg: #fafafa;\n  --grid-header-text: #333333;\n  --grid-header-font-weight: 600;\n  --grid-header-height: 40px;\n  --grid-header-border-color: #e0e0e0;\n\n  /* Rows */\n  --grid-row-height: 40px;\n  --grid-row-bg: #ffffff;\n  --grid-row-bg-alt: #fafafa;\n  --grid-row-hover-bg: #f5f5f5;\n  --grid-row-selected-bg: #fff9e6;\n  --grid-row-selected-hover-bg: #fff3cc;\n\n  /* Cells */\n  --grid-cell-padding: 8px 12px;\n  --grid-cell-text: #333333;\n  --grid-cell-border-color: #f0f0f0;\n\n  /* Selection - mellow yellow to avoid conflict with blue hyperlinks */\n  --grid-checkbox-color: #2196F3;\n  --grid-selection-indicator-color: #f9a825;\n\n  /* Editing */\n  --grid-edit-cell-bg: #ffffff;\n  --grid-edit-cell-border: #2196F3;\n  --grid-edit-cell-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n\n  /* Sorting */\n  --grid-sort-indicator-color: #2196F3;\n\n  /* Toolbar */\n  --grid-toolbar-bg: #ffffff;\n  --grid-toolbar-height: 48px;\n  --grid-toolbar-border-color: #e0e0e0;\n\n  /* Loading */\n  --grid-loading-overlay-bg: rgba(255, 255, 255, 0.8);\n\n  /* Empty state */\n  --grid-empty-text-color: #999999;\n  --grid-empty-icon-color: #cccccc;\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: #666;\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: #999;\n  font-size: 13px;\n}\n\n.search-input {\n  padding: 6px 30px 6px 32px;\n  border: 1px solid #ddd;\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 rgba(33, 150, 243, 0.1);\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: #999;\n  font-size: 12px;\n}\n\n.search-clear:hover {\n  color: #666;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #333;\n  transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-button:hover:not(:disabled) {\n  background: #eee;\n  border-color: #ccc;\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: #d32f2f;\n}\n\n.toolbar-button-danger:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #ffcdd2;\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.mj-grid-error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: #d32f2f;\n  gap: 12px;\n}\n\n.mj-grid-error i {\n  font-size: 32px;\n}\n\n.error-retry {\n  padding: 8px 16px;\n  background: #d32f2f;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry:hover {\n  background: #c62828;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n.mj-grid-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty i {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\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: #fffde7;\n}\n\n.mj-grid-row.grid-row-dirty {\n  border-left: 3px solid #ff9800;\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: #999;\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: #ffffff;\n  border: 1px solid #e0e0e0;\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: #333;\n  text-align: left;\n  gap: 12px;\n  transition: background-color 0.15s;\n}\n\n.overflow-item:hover:not(:disabled) {\n  background: #f5f5f5;\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: #666;\n  text-align: center;\n}\n\n.overflow-item span {\n  flex: 1;\n}\n\n.overflow-divider {\n  height: 1px;\n  background: #e0e0e0;\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: #999;\n  letter-spacing: 0.5px;\n}\n\n/* Entity Actions submenu styling */\n.overflow-item.action-item i {\n  color: #2196F3;\n}\n\n/* ========================================\n   Highlight Matches\n   ======================================== */\n\n::ng-deep .highlight-match {\n  background-color: #fff176;\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::ng-deep .ag-theme-alpine {\n  /* Row colors */\n  --ag-row-hover-color: var(--grid-row-hover-bg);\n  --ag-selected-row-background-color: var(--grid-row-selected-bg);\n  --ag-header-background-color: var(--grid-header-bg);\n\n  /* Selection accent colors - mellow yellow */\n  --ag-range-selection-background-color: rgba(249, 168, 37, 0.15);\n  --ag-range-selection-border-color: #f9a825;\n\n  /* Ensure borders are visible */\n  --ag-borders: none;\n  --ag-row-border-color: var(--grid-cell-border-color);\n}\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 #f9a825;\n}\n\n/* Selection checkbox styling */\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper {\n  width: 18px;\n  height: 18px;\n}\n\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {\n  color: var(--grid-checkbox-color, #2196F3);\n}\n\n/* Row hover effect */\n::ng-deep .ag-theme-alpine .ag-row:hover:not(.ag-row-selected) {\n  background-color: var(--grid-row-hover-bg, #f0f7ff);\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, #fafafa);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\n}\n\n/* Elevated header (default - subtle shadow) */\n.header-style-elevated ::ng-deep .ag-header {\n  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid var(--grid-header-border-color, #e0e0e0);\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: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\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: linear-gradient(180deg, #37474f 0%, #263238 100%);\n  border-bottom: none;\n}\n\n.header-style-bold ::ng-deep .ag-header-cell-text {\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.header-style-bold ::ng-deep .ag-header-icon {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.header-style-bold ::ng-deep .ag-header-cell:hover {\n  background: rgba(255, 255, 255, 0.1);\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, #2196F3));\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, #f5f5f5);\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, #f5f5f5);\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, #f5f5f5);\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, #2196F3);\n  border-color: var(--grid-checkbox-color, #2196F3);\n}\n\n.checkbox-style-filled ::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n  color: #ffffff;\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: #bdbdbd;\n  font-style: normal;\n}\n\n/* Boolean icons */\n::ng-deep .cell-boolean-true {\n  color: #43a047;\n  font-size: 14px;\n}\n\n::ng-deep .cell-boolean-false {\n  color: #bdbdbd;\n  font-size: 14px;\n}\n\n/* Clickable links */\n::ng-deep .cell-link {\n  color: var(--grid-accent-color, #2196F3);\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: #1976D2;\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, #1976D2);\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: #1565C0;\n  text-decoration: underline;\n}\n\n::ng-deep .cell-fk-link:active {\n  color: #0D47A1;\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, #f0f0f0);\n}\n\n.skeleton-cell {\n  height: 16px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 0px,\n    #e8e8e8 40px,\n    #f0f0f0 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, #f0f0f0);\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, #2196F3);\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: #f5f5f5;\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n  background: #c0c0c0;\n  border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n  background: #a0a0a0;\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, #e0e0e0);\n}\n\n::ng-deep .ag-theme-alpine .ag-pinned-right-cols-container {\n  border-left: 2px solid var(--grid-border-color, #e0e0e0);\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: #546e7a;\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, #2196F3);\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: linear-gradient(180deg, rgba(25, 118, 210, 0.15) 0%, rgba(25, 118, 210, 0.08) 100%) !important;\n  position: relative;\n}\n\n/* Descending = pink tint */\n:host ::ng-deep .ag-header-cell-sorted-desc {\n  background: linear-gradient(180deg, rgba(216, 27, 96, 0.15) 0%, rgba(216, 27, 96, 0.08) 100%) !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: #1976d2;\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: #d81b60;\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: #1976d2 !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: #d81b60 !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: #1976d2 !important;\n}\n\n/* Descending = pink/magenta */\n:host ::ng-deep .ag-sort-descending-icon {\n  color: #d81b60 !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: #1976d2 !important;\n}\n\n/* Sort order number - pink for descending */\n:host ::ng-deep .ag-header-cell-sorted-desc .ag-sort-order {\n  color: #d81b60 !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: #1976d2;\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: linear-gradient(to bottom, #f8fafc, #f1f5f9);\n  border-top: 1px solid #e2e8f0;\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: white;\n  border: 1px solid #e2e8f0;\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: #64748b;\n}\n\n.agg-summary-label {\n  color: #64748b;\n  font-weight: 500;\n}\n\n.agg-summary-value {\n  color: #1e293b;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n.aggregate-loading {\n  display: flex;\n  align-items: center;\n  color: #94a3b8;\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: linear-gradient(to bottom, #f8fafc, #f1f5f9);\n  border-bottom: 1px solid #e2e8f0;\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: white;\n  border: 1px solid #e2e8f0;\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: #cbd5e1;\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: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);\n  border-radius: 10px;\n  color: #0284c7;\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: #64748b;\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: #0f172a;\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: #94a3b8;\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                <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        <!-- 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 to Excel\"\n            (click)=\"onExportClick()\">\n            <i class=\"fa-solid fa-file-excel\"></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=\"Add selected records to a list\"\n            [disabled]=\"!HasSelection\"\n            (click)=\"onAddToListClick()\">\n            <i class=\"fa-solid fa-list-check\"></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 to Excel</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      <div class=\"mj-grid-error\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage }}</span>\n        <button class=\"error-retry\" (click)=\"Refresh()\">Retry</button>\n      </div>\n    }\n\n    <!-- Empty State -->\n    @if (!loading && !errorMessage && rowData.length === 0) {\n      <div class=\"mj-grid-empty\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <span>No data to display</span>\n      </div>\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", 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.mj-grid-error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: var(--mj-status-error);\n  gap: 12px;\n}\n\n.mj-grid-error i {\n  font-size: 32px;\n}\n\n.error-retry {\n  padding: 8px 16px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-retry:hover {\n  background: var(--mj-status-error-text);\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n.mj-grid-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--grid-empty-text-color);\n  gap: 12px;\n}\n\n.mj-grid-empty i {\n  font-size: 48px;\n  color: var(--grid-empty-icon-color);\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"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }, { type: i0.NgZone }], { Params: [{
             type: Input
         }], AllowLoad: [{
@@ -4330,6 +4381,14 @@ export class EntityDataGridComponent {
             type: Input
         }], MaxBlocksInCache: [{
             type: Input
+        }], ShowPager: [{
+            type: Input
+        }], PagerPageNumber: [{
+            type: Input
+        }], TotalRowCount: [{
+            type: Input
+        }], PageChange: [{
+            type: Output
         }], Data: [{
             type: Input
         }], Columns: [{
@@ -4544,5 +4603,5 @@ export class EntityDataGridComponent {
             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: 155 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 157 }); })();
 //# sourceMappingURL=entity-data-grid.component.js.map