@memberjunction/ng-entity-viewer 3.1.1 → 3.3.0

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

@@ -17,19 +17,19 @@ import * as i4 from "@memberjunction/ng-shared-generic";
 const _c0 = ["gridContainer"];
 function EntityDataGridComponent_div_2_div_2_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵelementStart(0, "button", 38);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_2_button_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", 37);
+    i0.ɵɵelement(1, "i", 39);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 33);
-    i0.ɵɵelementStart(2, "input", 34);
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(2, "input", 36);
     i0.ɵɵlistener("input", function EntityDataGridComponent_div_2_div_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.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_2_button_3_Template, 2, 0, "button", 35);
+    i0.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_2_button_3_Template, 2, 0, "button", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -55,9 +55,9 @@ function EntityDataGridComponent_div_2_ng_container_3_button_1_span_2_Template(r
 } }
 function EntityDataGridComponent_div_2_ng_container_3_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵelementStart(0, "button", 41);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_ng_container_3_button_1_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.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_i_1_Template, 1, 2, "i", 40)(2, EntityDataGridComponent_div_2_ng_container_3_button_1_span_2_Template, 2, 1, "span", 41);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_i_1_Template, 1, 2, "i", 42)(2, EntityDataGridComponent_div_2_ng_container_3_button_1_span_2_Template, 2, 1, "span", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const button_r6 = i0.ɵɵnextContext().$implicit;
@@ -71,7 +71,7 @@ function EntityDataGridComponent_div_2_ng_container_3_button_1_Template(rf, ctx)
 } }
 function EntityDataGridComponent_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_Template, 3, 6, "button", 38);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_3_button_1_Template, 3, 6, "button", 40);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const button_r6 = ctx.$implicit;
@@ -80,7 +80,7 @@ function EntityDataGridComponent_div_2_ng_container_3_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngIf", button_r6.position !== "right" && ctx_r2.isButtonVisible(button_r6));
 } }
 function EntityDataGridComponent_div_2_span_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelementStart(0, "span", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,7 +89,7 @@ function EntityDataGridComponent_div_2_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate2(" ", ctx_r2.totalRowCount, " ", ctx_r2.totalRowCount === 1 ? "row" : "rows", " ");
 } }
 function EntityDataGridComponent_div_2_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵelementStart(0, "span", 45);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -99,19 +99,19 @@ function EntityDataGridComponent_div_2_span_6_Template(rf, ctx) { if (rf & 1) {
 } }
 function EntityDataGridComponent_div_2_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 46);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
-    i0.ɵɵelement(1, "i", 45);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_button_9_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 49);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
-    i0.ɵɵelement(1, "i", 48);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Refresh");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -122,28 +122,28 @@ function EntityDataGridComponent_div_2_button_9_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵelementStart(0, "button", 51);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
-    i0.ɵɵelement(1, "i", 50);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Export");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_button_11_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵelementStart(0, "button", 53);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 52);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Delete");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_button_12_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵelementStart(0, "button", 55);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCompareClick()); });
-    i0.ɵɵelement(1, "i", 54);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Compare");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -152,10 +152,10 @@ function EntityDataGridComponent_div_2_button_12_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_13_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵelementStart(0, "button", 57);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMergeClick()); });
-    i0.ɵɵelement(1, "i", 56);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Merge");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -164,10 +164,10 @@ function EntityDataGridComponent_div_2_button_13_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_14_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵelementStart(0, "button", 59);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddToListClick()); });
-    i0.ɵɵelement(1, "i", 58);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Add to List");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -176,10 +176,10 @@ function EntityDataGridComponent_div_2_button_14_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_15_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵelementStart(0, "button", 61);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDuplicateSearchClick()); });
-    i0.ɵɵelement(1, "i", 60);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Find Duplicates");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -188,10 +188,10 @@ function EntityDataGridComponent_div_2_button_15_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_16_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵelementStart(0, "button", 63);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCommunicationClick()); });
-    i0.ɵɵelement(1, "i", 62);
-    i0.ɵɵelementStart(2, "span", 46);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(2, "span", 48);
     i0.ɵɵtext(3, "Send Message");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -200,16 +200,16 @@ function EntityDataGridComponent_div_2_button_16_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_17_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵelementStart(0, "button", 65);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddClick()); });
-    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_div_2_button_18_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵelementStart(0, "button", 66);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
-    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -219,23 +219,23 @@ function EntityDataGridComponent_div_2_button_18_Template(rf, ctx) { if (rf & 1)
 } }
 function EntityDataGridComponent_div_2_button_19_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵelementStart(0, "button", 68);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDeleteClick()); });
-    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_div_2_button_20_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵelementStart(0, "button", 69);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
-    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_div_2_button_21_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵelementStart(0, "button", 71);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onColumnChooserClick()); });
-    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementEnd();
 } }
 function EntityDataGridComponent_div_2_ng_container_22_button_1_i_1_Template(rf, ctx) { if (rf & 1) {
@@ -255,9 +255,9 @@ function EntityDataGridComponent_div_2_ng_container_22_button_1_span_2_Template(
 } }
 function EntityDataGridComponent_div_2_ng_container_22_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵelementStart(0, "button", 41);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_ng_container_22_button_1_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.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_i_1_Template, 1, 2, "i", 40)(2, EntityDataGridComponent_div_2_ng_container_22_button_1_span_2_Template, 2, 1, "span", 41);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_i_1_Template, 1, 2, "i", 42)(2, EntityDataGridComponent_div_2_ng_container_22_button_1_span_2_Template, 2, 1, "span", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const button_r22 = i0.ɵɵnextContext().$implicit;
@@ -271,7 +271,7 @@ function EntityDataGridComponent_div_2_ng_container_22_button_1_Template(rf, ctx
 } }
 function EntityDataGridComponent_div_2_ng_container_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_Template, 3, 6, "button", 38);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_ng_container_22_button_1_Template, 3, 6, "button", 40);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const button_r22 = ctx.$implicit;
@@ -281,16 +281,16 @@ function EntityDataGridComponent_div_2_ng_container_22_Template(rf, ctx) { if (r
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵelementStart(0, "button", 80);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_button_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", 50);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Export to Excel");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 82);
+    i0.ɵɵelementStart(0, "button", 84);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_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");
@@ -307,11 +307,11 @@ function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Temp
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "div", 79);
-    i0.ɵɵelementStart(2, "div", 80);
+    i0.ɵɵelement(1, "div", 81);
+    i0.ɵɵelementStart(2, "div", 82);
     i0.ɵɵtext(3, "Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template, 4, 4, "button", 81);
+    i0.ɵɵtemplate(4, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_button_4_Template, 4, 4, "button", 83);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -319,30 +319,30 @@ function EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template(rf,
     i0.ɵɵproperty("ngForOf", ctx_r2.EntityActions);
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 79);
+    i0.ɵɵelement(0, "div", 81);
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵelementStart(0, "button", 80);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_button_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", 70);
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Manage Columns");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵelementStart(0, "button", 80);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_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", 62);
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Send Message");
     i0.ɵɵelementEnd()();
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "div", 79);
-    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template, 4, 0, "button", 76);
+    i0.ɵɵelement(1, "div", 81);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_button_2_Template, 4, 0, "button", 78);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -350,8 +350,8 @@ function EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template(rf,
     i0.ɵɵproperty("ngIf", ctx_r2.showCommunicationInOverflow);
 } }
 function EntityDataGridComponent_div_2_div_23_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_div_23_div_3_button_1_Template, 4, 0, "button", 76)(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template, 5, 1, "ng-container", 41)(3, EntityDataGridComponent_div_2_div_23_div_3_div_3_Template, 1, 0, "div", 77)(4, EntityDataGridComponent_div_2_div_23_div_3_button_4_Template, 4, 0, "button", 76)(5, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template, 3, 1, "ng-container", 41);
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_2_div_23_div_3_button_1_Template, 4, 0, "button", 78)(2, EntityDataGridComponent_div_2_div_23_div_3_ng_container_2_Template, 5, 1, "ng-container", 43)(3, EntityDataGridComponent_div_2_div_23_div_3_div_3_Template, 1, 0, "div", 79)(4, EntityDataGridComponent_div_2_div_23_div_3_button_4_Template, 4, 0, "button", 78)(5, EntityDataGridComponent_div_2_div_23_div_3_ng_container_5_Template, 3, 1, "ng-container", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -369,13 +369,13 @@ function EntityDataGridComponent_div_2_div_23_div_3_Template(rf, ctx) { if (rf &
 } }
 function EntityDataGridComponent_div_2_div_23_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵelementStart(0, "div", 73);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 72);
+    i0.ɵɵelementStart(1, "button", 74);
     i0.ɵɵlistener("click", function EntityDataGridComponent_div_2_div_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleOverflowMenu()); });
-    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵelement(2, "i", 75);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_23_div_3_Template, 6, 6, "div", 74);
+    i0.ɵɵtemplate(3, EntityDataGridComponent_div_2_div_23_div_3_Template, 6, 6, "div", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -383,14 +383,14 @@ function EntityDataGridComponent_div_2_div_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r2.showOverflowMenu);
 } }
 function EntityDataGridComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
-    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_2_Template, 4, 3, "div", 11)(3, EntityDataGridComponent_div_2_ng_container_3_Template, 2, 1, "ng-container", 12);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_div_2_Template, 4, 3, "div", 13)(3, EntityDataGridComponent_div_2_ng_container_3_Template, 2, 1, "ng-container", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 13);
-    i0.ɵɵtemplate(5, EntityDataGridComponent_div_2_span_5_Template, 2, 2, "span", 14)(6, EntityDataGridComponent_div_2_span_6_Template, 2, 1, "span", 15);
+    i0.ɵɵelementStart(4, "div", 15);
+    i0.ɵɵtemplate(5, EntityDataGridComponent_div_2_span_5_Template, 2, 2, "span", 16)(6, EntityDataGridComponent_div_2_span_6_Template, 2, 1, "span", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 16);
-    i0.ɵɵtemplate(8, EntityDataGridComponent_div_2_button_8_Template, 4, 0, "button", 17)(9, EntityDataGridComponent_div_2_button_9_Template, 4, 3, "button", 18)(10, EntityDataGridComponent_div_2_button_10_Template, 4, 0, "button", 19)(11, EntityDataGridComponent_div_2_button_11_Template, 4, 0, "button", 20)(12, EntityDataGridComponent_div_2_button_12_Template, 4, 1, "button", 21)(13, EntityDataGridComponent_div_2_button_13_Template, 4, 1, "button", 22)(14, EntityDataGridComponent_div_2_button_14_Template, 4, 1, "button", 23)(15, EntityDataGridComponent_div_2_button_15_Template, 4, 1, "button", 24)(16, EntityDataGridComponent_div_2_button_16_Template, 4, 1, "button", 25)(17, EntityDataGridComponent_div_2_button_17_Template, 2, 0, "button", 26)(18, EntityDataGridComponent_div_2_button_18_Template, 2, 3, "button", 27)(19, EntityDataGridComponent_div_2_button_19_Template, 2, 0, "button", 28)(20, EntityDataGridComponent_div_2_button_20_Template, 2, 0, "button", 29)(21, EntityDataGridComponent_div_2_button_21_Template, 2, 0, "button", 30)(22, EntityDataGridComponent_div_2_ng_container_22_Template, 2, 1, "ng-container", 12)(23, EntityDataGridComponent_div_2_div_23_Template, 4, 1, "div", 31);
+    i0.ɵɵelementStart(7, "div", 18);
+    i0.ɵɵtemplate(8, EntityDataGridComponent_div_2_button_8_Template, 4, 0, "button", 19)(9, EntityDataGridComponent_div_2_button_9_Template, 4, 3, "button", 20)(10, EntityDataGridComponent_div_2_button_10_Template, 4, 0, "button", 21)(11, EntityDataGridComponent_div_2_button_11_Template, 4, 0, "button", 22)(12, EntityDataGridComponent_div_2_button_12_Template, 4, 1, "button", 23)(13, EntityDataGridComponent_div_2_button_13_Template, 4, 1, "button", 24)(14, EntityDataGridComponent_div_2_button_14_Template, 4, 1, "button", 25)(15, EntityDataGridComponent_div_2_button_15_Template, 4, 1, "button", 26)(16, EntityDataGridComponent_div_2_button_16_Template, 4, 1, "button", 27)(17, EntityDataGridComponent_div_2_button_17_Template, 2, 0, "button", 28)(18, EntityDataGridComponent_div_2_button_18_Template, 2, 3, "button", 29)(19, EntityDataGridComponent_div_2_button_19_Template, 2, 0, "button", 30)(20, EntityDataGridComponent_div_2_button_20_Template, 2, 0, "button", 31)(21, EntityDataGridComponent_div_2_button_21_Template, 2, 0, "button", 32)(22, EntityDataGridComponent_div_2_ng_container_22_Template, 2, 1, "ng-container", 14)(23, EntityDataGridComponent_div_2_div_23_Template, 4, 1, "div", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -435,20 +435,66 @@ function EntityDataGridComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.hasOverflowMenuItems);
 } }
-function EntityDataGridComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵelement(1, "mj-loading", 84);
+function EntityDataGridComponent_div_3_ng_container_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agg_r29 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(agg_r29.icon);
 } }
-function EntityDataGridComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
+function EntityDataGridComponent_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 87);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_3_ng_container_1_div_2_Template, 2, 2, "div", 88);
+    i0.ɵɵelementStart(3, "div", 89)(4, "span", 90);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 91);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const agg_r29 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", agg_r29.icon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(agg_r29.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.getAggregateValue(agg_r29));
+} }
+function EntityDataGridComponent_div_3_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵelement(1, "i", 94);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵtemplate(1, EntityDataGridComponent_div_3_ng_container_1_Template, 8, 3, "ng-container", 14)(2, EntityDataGridComponent_div_3_div_2_Template, 2, 0, "div", 86);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.CardAggregates);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.AggregatesLoading);
+} }
+function EntityDataGridComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵelement(1, "mj-loading", 96);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "i", 98);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 87);
-    i0.ɵɵlistener("click", function EntityDataGridComponent_div_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Refresh()); });
+    i0.ɵɵelementStart(4, "button", 99);
+    i0.ɵɵlistener("click", function EntityDataGridComponent_div_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()();
 } if (rf & 2) {
@@ -456,31 +502,76 @@ function EntityDataGridComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.errorMessage);
 } }
-function EntityDataGridComponent_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 89);
+function EntityDataGridComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelement(1, "i", 101);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd()();
 } }
-function EntityDataGridComponent_ag_grid_angular_7_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ag-grid-angular", 90);
-    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("rowClicked", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowClicked($event)); })("rowDoubleClicked", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgRowDoubleClicked($event)); })("sortChanged", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSortChanged($event)); })("selectionChanged", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_selectionChanged_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgSelectionChanged($event)); })("columnResized", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnResized($event)); })("columnMoved", function EntityDataGridComponent_ag_grid_angular_7_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
+function EntityDataGridComponent_ag_grid_angular_8_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ag-grid-angular", 102);
+    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("theme", ctx_r2.agGridTheme)("columnDefs", ctx_r2.agColumnDefs)("rowData", ctx_r2.rowData)("defaultColDef", ctx_r2.defaultColDef)("rowSelection", ctx_r2.agRowSelection)("getRowId", ctx_r2.getRowId)("suppressCellFocus", true)("rowHeight", ctx_r2.RowHeight)("headerHeight", ctx_r2.ShowHeader ? undefined : 0);
 } }
-function EntityDataGridComponent_ag_grid_angular_8_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ag-grid-angular", 91);
-    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_8_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGridReady($event)); })("rowClicked", function EntityDataGridComponent_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_8_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAgColumnMoved($event)); });
+function EntityDataGridComponent_ag_grid_angular_9_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ag-grid-angular", 103);
+    i0.ɵɵlistener("gridReady", function EntityDataGridComponent_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_ag_grid_angular_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_div_10_ng_container_2_i_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const agg_r33 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(agg_r33.icon);
+} }
+function EntityDataGridComponent_div_10_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 107);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_10_ng_container_2_i_2_Template, 1, 2, "i", 42);
+    i0.ɵɵelementStart(3, "span", 108);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 109);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const agg_r33 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", agg_r33.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", agg_r33.label, ":");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.getAggregateValue(agg_r33));
+} }
+function EntityDataGridComponent_div_10_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵelement(1, "i", 94);
+    i0.ɵɵelementEnd();
+} }
+function EntityDataGridComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104)(1, "div", 105);
+    i0.ɵɵtemplate(2, EntityDataGridComponent_div_10_ng_container_2_Template, 7, 3, "ng-container", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, EntityDataGridComponent_div_10_div_3_Template, 2, 0, "div", 106);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r2.ColumnAggregates);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.AggregatesLoading);
+} }
 // Register AG Grid modules (required for v34+)
 ModuleRegistry.registerModules([AllCommunityModule]);
 /**
@@ -496,7 +587,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
  * - Inline cell and row editing
  * - Column reordering, resizing, and visibility toggle
  * - State persistence to User Settings
- * - Compatible with ViewGridStateConfig from User Views
+ * - Compatible with ViewGridState from User Views
  *
  * @example
  * ```html
@@ -823,6 +914,21 @@ export class EntityDataGridComponent {
     get RowHeight() {
         return this._rowHeight;
     }
+    /**
+     * Enable text wrapping in grid cells
+     * When true, long text will wrap to multiple lines and rows will auto-size
+     * Note: This disables fixed row height and may impact performance with large datasets
+     */
+    _wrapText = false;
+    set WrapText(value) {
+        if (this._wrapText !== value) {
+            this._wrapText = value;
+            this.updateDefaultColDefForWrapping();
+        }
+    }
+    get WrapText() {
+        return this._wrapText;
+    }
     _virtualScroll = true;
     set VirtualScroll(value) {
         this._virtualScroll = value;
@@ -1127,8 +1233,111 @@ export class EntityDataGridComponent {
         return this._entityActions;
     }
     // ========================================
+    // Aggregate Inputs
+    // ========================================
+    /**
+     * Aggregate configuration for the grid.
+     * When provided, aggregate expressions are calculated alongside data and displayed:
+     * - Column-bound aggregates appear in a pinned bottom row
+     * - Card-bound aggregates are exposed via AggregateValues for use with AggregatePanelComponent
+     */
+    set AggregatesConfig(value) {
+        this._aggregatesConfig = value;
+    }
+    get AggregatesConfig() {
+        return this._aggregatesConfig;
+    }
+    /**
+     * Returns the aggregate values map, keyed by expression or id.
+     * Use this to pass values to AggregatePanelComponent.
+     */
+    get AggregateValuesMap() {
+        return this._aggregateValues;
+    }
+    /**
+     * Returns the raw aggregate results from the last RunView call.
+     */
+    get AggregateResultsList() {
+        return this._aggregateResults;
+    }
+    /**
+     * Whether aggregates are currently loading.
+     */
+    get AggregatesLoading() {
+        return this._aggregatesLoading;
+    }
+    /**
+     * Returns the effective aggregates config, preferring _aggregatesConfig but falling back to _gridState.aggregates.
+     * This ensures aggregates work regardless of whether they came from explicit config or from view's GridState.
+     */
+    get EffectiveAggregatesConfig() {
+        return this._aggregatesConfig || this._gridState?.aggregates;
+    }
+    /**
+     * Returns enabled aggregates configured for card display.
+     */
+    get CardAggregates() {
+        const config = this.EffectiveAggregatesConfig;
+        if (!config?.expressions)
+            return [];
+        return config.expressions
+            .filter(a => a.enabled !== false && a.displayType === 'card')
+            .sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+    /**
+     * Returns enabled aggregates configured for column footer display.
+     */
+    get ColumnAggregates() {
+        const config = this.EffectiveAggregatesConfig;
+        if (!config?.expressions)
+            return [];
+        return config.expressions
+            .filter(a => a.enabled !== false && a.displayType === 'column')
+            .sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+    /**
+     * Whether to show aggregate summary row (has column-type aggregates with values).
+     */
+    get ShowAggregateSummary() {
+        const hasColumnAggs = this.ColumnAggregates.length > 0;
+        const hasValues = this._aggregateValues.size > 0;
+        return hasColumnAggs && hasValues;
+    }
+    /**
+     * Whether to show aggregate panel (has card-type aggregates with values).
+     */
+    get ShowAggregatePanel() {
+        return this.CardAggregates.length > 0 && this._aggregateValues.size > 0;
+    }
+    /**
+     * Get formatted aggregate value for display
+     */
+    getAggregateValue(agg) {
+        const key = agg.id || agg.expression;
+        const value = this._aggregateValues.get(key);
+        if (value == null)
+            return '—';
+        // Format based on value type
+        if (typeof value === 'number') {
+            return value.toLocaleString('en-US', {
+                maximumFractionDigits: 2,
+                minimumFractionDigits: 0
+            });
+        }
+        if (value instanceof Date) {
+            return value.toLocaleDateString();
+        }
+        return String(value);
+    }
+    // ========================================
     // Event Outputs
     // ========================================
+    // Aggregate Results
+    /**
+     * Emitted when aggregate results are loaded.
+     * Contains the array of AggregateResult objects and a values map for easy lookup.
+     */
+    AggregatesLoaded = new EventEmitter();
     // Row Selection
     BeforeRowSelect = new EventEmitter();
     AfterRowSelect = new EventEmitter();
@@ -1140,6 +1349,12 @@ export class EntityDataGridComponent {
     AfterRowClick = new EventEmitter();
     BeforeRowDoubleClick = new EventEmitter();
     AfterRowDoubleClick = new EventEmitter();
+    // Foreign Key Link Click
+    /**
+     * Emitted when a foreign key link is clicked in the grid.
+     * Parent components should handle this to navigate to the related record.
+     */
+    ForeignKeyClick = new EventEmitter();
     // Editing
     BeforeCellEdit = new EventEmitter();
     AfterCellEditBegin = new EventEmitter();
@@ -1262,6 +1477,30 @@ export class EntityDataGridComponent {
         resizable: true,
         minWidth: 80
     };
+    /**
+     * Update defaultColDef when text wrapping setting changes
+     * Enables/disables auto row height and cell text wrapping
+     */
+    updateDefaultColDefForWrapping() {
+        if (this._wrapText) {
+            this.defaultColDef = {
+                ...this.defaultColDef,
+                wrapText: true,
+                autoHeight: true,
+                cellClass: 'cell-wrap-text'
+            };
+        }
+        else {
+            // Remove wrapping properties
+            const { wrapText, autoHeight, cellClass, ...rest } = this.defaultColDef;
+            this.defaultColDef = rest;
+        }
+        // Refresh the grid to apply changes
+        if (this.gridApi) {
+            this.gridApi.setGridOption('defaultColDef', this.defaultColDef);
+            this.gridApi.refreshCells({ force: true });
+        }
+    }
     /** Get row ID function for AG Grid */
     getRowId = (params) => params.data['__pk'];
     /** Suppress sort changed events during programmatic updates */
@@ -1284,6 +1523,11 @@ export class EntityDataGridComponent {
     _editingRowKey = null;
     _editingField = null;
     _pendingChanges = [];
+    // Aggregate state
+    _aggregatesConfig = null;
+    _aggregateResults = [];
+    _aggregateValues = new Map();
+    _aggregatesLoading = false;
     // ========================================
     // Public Read-Only Properties
     // ========================================
@@ -1439,6 +1683,13 @@ export class EntityDataGridComponent {
         // carry over column/sort settings from a previous view when switching views
         this._gridState = null;
         this._sortState = [];
+        // Reset aggregates when switching views - don't carry over from previous view
+        this._aggregatesConfig = null;
+        this._aggregateResults = [];
+        this._aggregateValues.clear();
+        // Reset allowLoad to true when params change - this ensures the new view gets to load
+        // (The parent may have set allowLoad=false for the previous view, which shouldn't prevent loading the new view)
+        this._allowLoad = true;
         try {
             // If using a stored view, load the view entity first
             if (this._params.ViewEntity) {
@@ -1578,7 +1829,8 @@ export class EntityDataGridComponent {
                 if (!this._gridState && gridState.columnSettings?.length) {
                     this._gridState = {
                         columnSettings: gridState.columnSettings,
-                        sortSettings: gridState.sortSettings || []
+                        sortSettings: gridState.sortSettings || [],
+                        aggregates: gridState.aggregates
                     };
                 }
                 // Apply sort state if not already set
@@ -1589,6 +1841,10 @@ export class EntityDataGridComponent {
                         index
                     }));
                 }
+                // Apply aggregates from user defaults if present and not already set
+                if (gridState.aggregates && !this._aggregatesConfig) {
+                    this._aggregatesConfig = gridState.aggregates;
+                }
             }
         }
         catch (error) {
@@ -1608,7 +1864,8 @@ export class EntityDataGridComponent {
             const settingKey = `default-view-setting/${this._entityInfo.Name}`;
             const gridStateJson = {
                 columnSettings: state.columnSettings,
-                sortSettings: state.sortSettings
+                sortSettings: state.sortSettings,
+                aggregates: state.aggregates
             };
             await UserInfoEngine.Instance.SetSetting(settingKey, JSON.stringify(gridStateJson));
             // Clear pending state and reset dirty flag after successful save
@@ -1639,9 +1896,14 @@ export class EntityDataGridComponent {
                 if (gridState.columnSettings?.length) {
                     this._gridState = {
                         columnSettings: gridState.columnSettings,
-                        sortSettings: gridState.sortSettings || []
+                        sortSettings: gridState.sortSettings || [],
+                        aggregates: gridState.aggregates
                     };
                 }
+                // Apply aggregates from view's GridState if present
+                if (gridState.aggregates && !this._aggregatesConfig) {
+                    this._aggregatesConfig = gridState.aggregates;
+                }
             }
             catch (e) {
                 console.warn('Failed to parse view GridState:', e);
@@ -1681,6 +1943,76 @@ export class EntityDataGridComponent {
                 }));
                 this.applySortStateToGrid();
             }
+            // Apply aggregates from GridState if present and fetch their values
+            if (this._gridState.aggregates) {
+                this._aggregatesConfig = this._gridState.aggregates;
+                // Fetch aggregate values when gridState aggregates change
+                this.refreshAggregates();
+            }
+        }
+    }
+    /**
+     * Fetch aggregate values without reloading data.
+     * Used when gridState changes and includes new aggregate config.
+     * This runs a RunView with MaxRows=0 to get only aggregate results.
+     */
+    async refreshAggregates() {
+        const effectiveAggConfig = this.EffectiveAggregatesConfig;
+        if (!effectiveAggConfig?.expressions?.length) {
+            this._aggregateResults = [];
+            this._aggregateValues.clear();
+            this._aggregatesLoading = false;
+            this.cdr.detectChanges();
+            return;
+        }
+        // Need entity info to run the query
+        if (!this._entityInfo) {
+            return;
+        }
+        this._aggregatesLoading = true;
+        this.cdr.detectChanges();
+        try {
+            // Build aggregate expressions
+            const aggregateExpressions = effectiveAggConfig.expressions
+                .filter(agg => agg.enabled !== false && agg.expression)
+                .map(agg => ({
+                expression: agg.expression,
+                alias: agg.id || agg.label || agg.expression
+            }));
+            if (aggregateExpressions.length === 0) {
+                this._aggregateResults = [];
+                this._aggregateValues.clear();
+                this._aggregatesLoading = false;
+                this.cdr.detectChanges();
+                return;
+            }
+            const rv = new RunView();
+            // Build the ExtraFilter from params or view entity
+            let extraFilter;
+            if (this._params?.ExtraFilter) {
+                extraFilter = this._params.ExtraFilter;
+            }
+            else if (this._viewEntity?.WhereClause) {
+                extraFilter = this._viewEntity.WhereClause;
+            }
+            const result = await rv.RunView({
+                EntityName: this._entityInfo.Name,
+                MaxRows: 0, // Only get aggregates, no row data
+                ExtraFilter: extraFilter,
+                Aggregates: aggregateExpressions
+            });
+            if (result.Success) {
+                this.processAggregateResults(result.AggregateResults, result.AggregateExecutionTime);
+            }
+            else {
+                this._aggregatesLoading = false;
+                this.cdr.detectChanges();
+            }
+        }
+        catch (error) {
+            console.error('[EntityDataGrid] Error fetching aggregates:', error);
+            this._aggregatesLoading = false;
+            this.cdr.detectChanges();
         }
     }
     onFilterTextChanged() {
@@ -1711,77 +2043,122 @@ export class EntityDataGridComponent {
         this.initializeColumnStates();
         this.buildAgColumnDefs();
     }
+    /**
+     * Determines if a field should be shown by default when no saved view exists.
+     * This logic is aligned with UserViewEntity.SetDefaultsFromEntity() to ensure
+     * consistent column visibility between initial load and saved views.
+     */
     shouldShowField(field) {
+        // Always exclude system fields
         if (field.Name.startsWith('__mj_'))
             return false;
+        // Always exclude UUID primary keys (they're not useful to display)
         if (field.IsPrimaryKey && field.SQLFullType?.toLowerCase() === 'uniqueidentifier') {
             return false;
         }
-        if (field.DefaultInView === true)
-            return true;
-        if (field.Length > 500)
-            return false;
-        return true;
+        // Only show fields explicitly marked as DefaultInView
+        // This aligns with UserViewEntity.SetDefaultsFromEntity() behavior
+        // ensuring users see the same columns before and after saving a view
+        return field.DefaultInView === true;
     }
+    /**
+     * Estimate an appropriate column width based on field metadata.
+     * Takes into account: metadata DefaultColumnWidth, header text length, data type, and field patterns.
+     */
     estimateColumnWidth(field) {
+        // Priority 1: Use metadata-defined width if set
+        if (field.DefaultColumnWidth && field.DefaultColumnWidth > 0) {
+            return field.DefaultColumnWidth;
+        }
+        // Calculate minimum width needed for header text
+        const headerText = field.DisplayName || field.Name;
+        const headerWidth = this.calculateHeaderWidth(headerText);
+        // Calculate estimated data width based on field type
+        const dataWidth = this.calculateDataWidth(field);
+        // Use the larger of header or data width, with bounds
+        const estimatedWidth = Math.max(headerWidth, dataWidth);
+        // Apply min/max bounds: minimum 80px, maximum 350px
+        return Math.max(Math.min(estimatedWidth, 350), 80);
+    }
+    /**
+     * Calculate minimum width needed to display header text without truncation.
+     */
+    calculateHeaderWidth(text) {
+        // Average char width ~7.5px for typical grid font
+        const charWidth = 7.5;
+        // Padding for sort icon and cell padding
+        const sortIconPadding = 24;
+        const cellPadding = 16;
+        return Math.ceil(text.length * charWidth + sortIconPadding + cellPadding);
+    }
+    /**
+     * Calculate estimated data width based on field type and patterns.
+     */
+    calculateDataWidth(field) {
         const fieldNameLower = field.Name.toLowerCase();
-        const displayNameLower = (field.DisplayName || field.Name).toLowerCase();
+        const tsType = field.TSType;
         // Fixed-width types
-        if (field.TSType === 'boolean')
-            return 80;
-        if (field.TSType === 'Date')
-            return 120;
+        if (tsType === 'boolean')
+            return 90;
+        if (tsType === 'Date')
+            return 130;
         // Numeric fields - compact
-        if (field.TSType === 'number') {
+        if (tsType === 'number') {
             if (fieldNameLower.includes('year') || fieldNameLower.includes('age'))
                 return 80;
-            if (fieldNameLower.includes('amount') || fieldNameLower.includes('price') || fieldNameLower.includes('total'))
-                return 120;
+            if (fieldNameLower.includes('amount') || fieldNameLower.includes('price') ||
+                fieldNameLower.includes('cost') || fieldNameLower.includes('total'))
+                return 130;
             return 100;
         }
-        // ID fields - compact
+        // ID fields (typically UUIDs shown truncated or as links)
         if (fieldNameLower.endsWith('id') && field.Length <= 50)
-            return 80;
+            return 100;
         // Email - needs more space
         if (fieldNameLower.includes('email'))
             return 220;
         // Phone numbers
         if (fieldNameLower.includes('phone') || fieldNameLower.includes('mobile') || fieldNameLower.includes('fax'))
-            return 130;
+            return 140;
+        // Description fields - give them adequate room (increased from 150)
+        if (fieldNameLower.includes('description'))
+            return 250;
         // Name fields - medium width
         if (fieldNameLower.includes('name') || fieldNameLower.includes('title')) {
-            if (fieldNameLower === 'firstname' || fieldNameLower === 'lastname' || fieldNameLower === 'first name' || fieldNameLower === 'last name')
-                return 120;
-            return 160;
+            if (fieldNameLower === 'firstname' || fieldNameLower === 'lastname' ||
+                fieldNameLower === 'first name' || fieldNameLower === 'last name')
+                return 130;
+            return 180;
         }
         // Location fields
         if (fieldNameLower.includes('city'))
-            return 120;
+            return 130;
         if (fieldNameLower.includes('state') || fieldNameLower.includes('country'))
-            return 100;
+            return 110;
         if (fieldNameLower.includes('zip') || fieldNameLower.includes('postal'))
-            return 90;
+            return 100;
         if (fieldNameLower.includes('address'))
-            return 200;
+            return 220;
         // Date-like strings
         if (fieldNameLower.includes('date') || fieldNameLower.includes('time'))
-            return 120;
-        // Status/Type fields - usually short values
-        if (fieldNameLower.includes('status') || fieldNameLower.includes('type') || fieldNameLower.includes('category'))
-            return 110;
+            return 130;
+        // Status/Type/Category fields
+        if (fieldNameLower.includes('status') || fieldNameLower.includes('type') ||
+            fieldNameLower.includes('category') || fieldNameLower.includes('mode'))
+            return 130;
         // Code/abbreviation fields
         if (fieldNameLower.includes('code') || fieldNameLower.includes('abbr'))
-            return 100;
-        // Long text fields - limit width, they'll truncate
+            return 110;
+        // Long text fields - give them more room (nvarchar(max) has Length < 0)
+        if (field.Length < 0)
+            return 250; // nvarchar(max)
         if (field.Length > 500)
-            return 150;
+            return 220;
         if (field.Length > 200)
-            return 180;
-        // Default: estimate based on field length but with tighter bounds
-        const estimatedChars = Math.min(field.Length, 50);
-        const charWidth = 7;
-        const padding = 24;
-        return Math.min(Math.max(estimatedChars * charWidth / 2 + padding, 80), 200);
+            return 200;
+        // Default: estimate based on field length with reasonable bounds
+        const estimatedChars = Math.min(field.Length || 50, 40);
+        return Math.max(estimatedChars * 6 + 24, 100);
     }
     mapFieldTypeToGridType(fieldType) {
         switch (fieldType.toLowerCase()) {
@@ -1899,20 +2276,108 @@ export class EntityDataGridComponent {
     }
     generateAgColumnDefs(entity) {
         const cols = [];
-        const visibleFields = entity.Fields.filter(f => this.shouldShowField(f));
+        let visibleFields = entity.Fields.filter(f => this.shouldShowField(f));
+        // Fallback: if no DefaultInView fields are defined, show first 10 non-system fields
+        // sorted by importance to give users a reasonable starting point
+        if (visibleFields.length === 0) {
+            visibleFields = this.getDefaultFieldsFallback(entity);
+        }
+        // Sort fields by importance for better default ordering
+        visibleFields = this.sortFieldsByImportance(visibleFields);
         for (const field of visibleFields) {
             const colDef = {
                 field: field.Name,
                 headerName: field.DisplayNameOrName,
                 width: this.estimateColumnWidth(field),
                 sortable: this._allowSorting,
-                resizable: this._allowColumnResize
+                resizable: this._allowColumnResize,
+                headerTooltip: this.buildHeaderTooltip(field)
             };
             this.applyFieldFormatter(colDef, field);
             cols.push(colDef);
         }
         return cols;
     }
+    /**
+     * When no DefaultInView fields are set, fall back to showing the first 10
+     * non-system, non-PK fields to give users something reasonable to start with.
+     */
+    getDefaultFieldsFallback(entity) {
+        return entity.Fields
+            .filter(f => !f.Name.startsWith('__mj_') &&
+            !(f.IsPrimaryKey && f.SQLFullType?.toLowerCase() === 'uniqueidentifier') &&
+            (f.Length <= 500 || f.Length < 0) // Exclude very long text unless nvarchar(max)
+        )
+            .slice(0, 10);
+    }
+    /**
+     * Sort fields by importance for better default column ordering.
+     * Name fields first, then status/type, then other fields, with system fields last.
+     */
+    sortFieldsByImportance(fields) {
+        return [...fields].sort((a, b) => {
+            const priorityA = this.getFieldPriority(a);
+            const priorityB = this.getFieldPriority(b);
+            return priorityA - priorityB;
+        });
+    }
+    getFieldPriority(field) {
+        const nameLower = field.Name.toLowerCase();
+        // Name fields first
+        if (field.IsNameField)
+            return 0;
+        if (nameLower === 'name' || nameLower === 'title')
+            return 1;
+        // Status and type fields are important
+        if (nameLower === 'status')
+            return 2;
+        if (nameLower === 'type' || nameLower === 'category')
+            return 3;
+        // Other name-like fields
+        if (nameLower.endsWith('name') && !nameLower.endsWith('typename'))
+            return 4;
+        // Description fields
+        if (nameLower.includes('description'))
+            return 5;
+        // Date fields
+        if (field.TSType === 'Date')
+            return 50;
+        // Foreign keys (usually IDs pointing to other entities)
+        if (field.RelatedEntityID)
+            return 60;
+        // Numbers
+        if (field.TSType === 'number')
+            return 70;
+        // Booleans toward the end
+        if (field.TSType === 'boolean')
+            return 80;
+        // Long text fields at the end
+        if ((field.Length > 500 || field.Length < 0))
+            return 90;
+        // System fields last (though they should be filtered out already)
+        if (field.Name.startsWith('__mj_'))
+            return 100;
+        // Default priority
+        return 40;
+    }
+    /**
+     * Build a tooltip for the column header showing field details.
+     */
+    buildHeaderTooltip(field) {
+        const parts = [];
+        // Show internal field name if different from display name
+        if (field.DisplayName && field.DisplayName !== field.Name) {
+            parts.push(`Field: ${field.Name}`);
+        }
+        // Show description if available
+        if (field.Description) {
+            parts.push(field.Description);
+        }
+        // Show type info
+        const typeInfo = field.Type + (field.Length && field.Length > 0 ? `(${field.Length})` : '');
+        parts.push(`Type: ${typeInfo}`);
+        return parts.join('\n');
+    }
     applyFieldFormatter(colDef, field, customFormat) {
         // Store type info for use in cell renderer
         const fieldType = field.TSType;
@@ -1938,6 +2403,22 @@ export class EntityDataGridComponent {
             (!extendedType && (fieldNameLower.includes('phone') ||
                 fieldNameLower.includes('mobile') ||
                 fieldNameLower.includes('fax')));
+        // Check if this is a foreign key field (has a related entity)
+        // Also check if this is a virtual display field that corresponds to an FK field
+        let isForeignKey = !!field.RelatedEntityID;
+        let fkField = field;
+        let relatedEntityName = isForeignKey ? field.RelatedEntity : undefined;
+        // If this field doesn't have RelatedEntityID but is virtual, check for a corresponding FK field
+        // Pattern: for a field named "Category", look for "CategoryID" with RelatedEntityID
+        if (!isForeignKey && field.IsVirtual && this._entityInfo) {
+            const potentialFkFieldName = field.Name + 'ID';
+            const correspondingFkField = this._entityInfo.Fields.find(f => f.Name.toLowerCase() === potentialFkFieldName.toLowerCase() && f.RelatedEntityID);
+            if (correspondingFkField) {
+                isForeignKey = true;
+                fkField = correspondingFkField;
+                relatedEntityName = correspondingFkField.RelatedEntity;
+            }
+        }
         // Apply alignment - use custom format alignment if provided, otherwise default to right for numbers
         const customAlign = customFormat?.align;
         if (customAlign) {
@@ -1962,6 +2443,40 @@ export class EntityDataGridComponent {
             if (params.value === null || params.value === undefined) {
                 return '<span class="cell-empty">—</span>';
             }
+            // Handle foreign key fields - render as clickable links
+            // Only apply FK rendering if no custom format is specified
+            if (isForeignKey && !customFormat && fkField?.RelatedEntityID) {
+                // For virtual display fields, we show the display value but link to the FK value
+                // For direct FK fields, the value IS the FK value
+                const isVirtualDisplay = field.IsVirtual && fkField !== field;
+                const displayValue = String(params.value);
+                // Get the actual FK value - for virtual fields, look it up from row data
+                let fkValue;
+                if (isVirtualDisplay && params.data) {
+                    // Get the FK value from the corresponding FK field in the row data
+                    fkValue = String(params.data[fkField.Name] ?? '');
+                }
+                else {
+                    fkValue = displayValue;
+                }
+                // Skip if we don't have a valid FK value
+                if (!fkValue) {
+                    return `<span>${HighlightUtil.escapeHtml(displayValue)}</span>`;
+                }
+                const escapedDisplayValue = HighlightUtil.escapeHtml(displayValue);
+                const escapedFieldName = HighlightUtil.escapeHtml(fkField.Name);
+                const escapedRelatedEntityId = HighlightUtil.escapeHtml(fkField.RelatedEntityID);
+                const escapedRelatedEntityName = relatedEntityName ? HighlightUtil.escapeHtml(relatedEntityName) : '';
+                // Build data attributes for the click handler
+                const dataAttrs = `data-related-entity-id="${escapedRelatedEntityId}" data-record-id="${fkValue}" data-field-name="${escapedFieldName}"${relatedEntityName ? ` data-related-entity-name="${escapedRelatedEntityName}"` : ''}`;
+                // Apply highlighting if filter text is set
+                const displayText = this._filterText
+                    ? HighlightUtil.highlight(displayValue, this._filterText, true)
+                    : escapedDisplayValue;
+                // NOTE: Do NOT add onclick="event.stopPropagation()" here - it prevents AG Grid's cellClicked from firing
+                const linkHtml = `<a href="javascript:void(0)" class="cell-link cell-fk-link" ${dataAttrs}>${displayText}</a>`;
+                return linkHtml;
+            }
             let displayValue = '';
             let extraClass = '';
             let inlineStyle = '';
@@ -2348,20 +2863,36 @@ export class EntityDataGridComponent {
             }
         }
         this.loading = true;
+        this._aggregatesLoading = true;
         this.errorMessage = '';
         this.cdr.detectChanges();
         const startTime = performance.now();
         try {
+            // Build aggregate expressions from config if present
+            // Use EffectiveAggregatesConfig to check both _aggregatesConfig and _gridState.aggregates
+            const effectiveAggConfig = this.EffectiveAggregatesConfig;
+            let aggregateExpressions;
+            if (effectiveAggConfig?.expressions?.length) {
+                aggregateExpressions = effectiveAggConfig.expressions
+                    .filter(agg => agg.enabled !== false && agg.expression)
+                    .map(agg => ({
+                    expression: agg.expression,
+                    alias: agg.id || agg.label || agg.expression
+                }));
+            }
             const rv = new RunView();
             const result = await rv.RunView({
                 ...runViewParams,
-                ResultType: 'entity_object'
+                ResultType: 'entity_object',
+                Aggregates: aggregateExpressions
             });
             const loadTimeMs = performance.now() - startTime;
             if (result.Success) {
                 this._allData = result.Results || [];
                 this.totalRowCount = result.TotalRowCount || this._allData.length;
                 this.processData();
+                // Process aggregate results
+                this.processAggregateResults(result.AggregateResults, result.AggregateExecutionTime);
                 // Reapply sort state to grid after data load to maintain visual indicators
                 // Use Promise.resolve() to defer until after Angular's change detection cycle
                 // has completed and AG Grid has processed the new row data
@@ -2557,6 +3088,39 @@ export class EntityDataGridComponent {
         });
         this.cdr.detectChanges();
     }
+    /**
+     * Process aggregate results from RunView and emit the AggregatesLoaded event.
+     * Builds the value map for easy lookup by expression or id.
+     */
+    processAggregateResults(results, executionTime) {
+        this._aggregatesLoading = false;
+        if (!results || results.length === 0) {
+            this._aggregateResults = [];
+            this._aggregateValues.clear();
+            return;
+        }
+        this._aggregateResults = results;
+        this._aggregateValues.clear();
+        // Build the values map, keyed by alias (which is set to id or expression)
+        for (const result of results) {
+            if (!result.error) {
+                this._aggregateValues.set(result.alias, result.value);
+            }
+        }
+        // Also map by expression for easy lookup
+        for (const result of results) {
+            if (!result.error && result.expression !== result.alias) {
+                this._aggregateValues.set(result.expression, result.value);
+            }
+        }
+        // Emit the aggregates loaded event
+        this.AggregatesLoaded.emit({
+            results: this._aggregateResults,
+            values: this._aggregateValues,
+            executionTime
+        });
+        this.cdr.detectChanges();
+    }
     getRowKey(entity) {
         // Use composite key if available
         if (entity.PrimaryKey) {
@@ -2658,6 +3222,41 @@ export class EntityDataGridComponent {
             this.emitNavigationRequest(rowData.entity, pkString);
         }
     }
+    /**
+     * Handles cell click events to detect FK link clicks.
+     * When a user clicks on a foreign key link, emits ForeignKeyClick event
+     * for the parent component to handle navigation.
+     */
+    onAgCellClicked(event) {
+        // Check if the click was on an FK link
+        const target = event.event?.target;
+        if (!target) {
+            return;
+        }
+        // Look for the FK link element (may be the target or a parent)
+        const fkLink = target.closest('.cell-fk-link');
+        if (!fkLink) {
+            return;
+        }
+        // Prevent the row click handler from firing
+        event.event?.stopPropagation();
+        // Extract FK data from data attributes
+        const relatedEntityId = fkLink.dataset['relatedEntityId'];
+        const recordId = fkLink.dataset['recordId'];
+        const fieldName = fkLink.dataset['fieldName'];
+        const relatedEntityName = fkLink.dataset['relatedEntityName'];
+        if (relatedEntityId && recordId && fieldName) {
+            this.ForeignKeyClick.emit({
+                relatedEntityId,
+                recordId,
+                fieldName,
+                relatedEntityName
+            });
+        }
+        else {
+            //console.log('[FK Debug] Missing required data attributes, not emitting');
+        }
+    }
     /**
      * Emits a navigation request for the given entity record.
      */
@@ -2829,7 +3428,8 @@ export class EntityDataGridComponent {
             // Build the grid state JSON matching ViewGridState format
             const gridStateJson = {
                 columnSettings: state.columnSettings,
-                sortSettings: state.sortSettings
+                sortSettings: state.sortSettings,
+                aggregates: state.aggregates
             };
             // Update the view entity's GridState
             this._viewEntity.GridState = JSON.stringify(gridStateJson);
@@ -2927,7 +3527,12 @@ export class EntityDataGridComponent {
             field: s.field,
             dir: s.dir
         }));
-        return { columnSettings, sortSettings };
+        // Include current aggregates config in the state
+        return {
+            columnSettings,
+            sortSettings,
+            aggregates: this._aggregatesConfig || this._gridState?.aggregates
+        };
     }
     applySortStateToGrid() {
         if (!this.gridApi || this._sortState.length === 0) {
@@ -3554,21 +4159,25 @@ 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", 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" }, outputs: { BeforeRowSelect: "BeforeRowSelect", AfterRowSelect: "AfterRowSelect", BeforeRowDeselect: "BeforeRowDeselect", AfterRowDeselect: "AfterRowDeselect", SelectionChange: "SelectionChange", BeforeRowClick: "BeforeRowClick", AfterRowClick: "AfterRowClick", BeforeRowDoubleClick: "BeforeRowDoubleClick", AfterRowDoubleClick: "AfterRowDoubleClick", 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" }, decls: 10, vars: 12, consts: [["gridContainer", ""], ["class", "mj-grid-toolbar", 4, "ngIf"], [1, "mj-grid-content"], ["class", "mj-grid-loading-overlay", 4, "ngIf"], ["class", "mj-grid-error", 4, "ngIf"], ["class", "mj-grid-empty", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize", "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], [3, "closed", "visible", "config"], [1, "mj-grid-toolbar"], [1, "toolbar-left"], ["class", "toolbar-search", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "toolbar-center"], ["class", "row-count", 4, "ngIf"], ["class", "selection-count", 4, "ngIf"], [1, "toolbar-right"], ["class", "toolbar-button", "title", "Create new record", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh data", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export to Excel", 3, "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete selected records", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Compare selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Merge selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add selected records to a list", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Search for duplicate records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Send message to selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add New", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete Selected", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Column Chooser", 3, "click", 4, "ngIf"], ["class", "toolbar-overflow", 3, "click", 4, "ngIf"], [1, "toolbar-search"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], ["class", "toolbar-button", 3, "class", "disabled", "title", "click", 4, "ngIf"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class", 4, "ngIf"], [4, "ngIf"], [1, "row-count"], [1, "selection-count"], ["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"], ["class", "overflow-menu", 4, "ngIf"], [1, "overflow-menu"], ["class", "overflow-item", 3, "click", 4, "ngIf"], ["class", "overflow-divider", 4, "ngIf"], [1, "overflow-item", 3, "click"], [1, "overflow-divider"], [1, "overflow-section-label"], ["class", "overflow-item", 3, "disabled", "click", 4, "ngFor", "ngForOf"], [1, "overflow-item", 3, "click", "disabled"], [1, "mj-grid-loading-overlay"], ["text", "Loading..."], [1, "mj-grid-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-retry", 3, "click"], [1, "mj-grid-empty"], [1, "fa-solid", "fa-inbox"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight"], [1, "mj-ag-grid", "ag-theme-alpine", 3, "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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" }, decls: 12, vars: 14, consts: [["gridContainer", ""], ["class", "mj-grid-toolbar", 4, "ngIf"], ["class", "mj-aggregate-cards", 4, "ngIf"], [1, "mj-grid-content"], ["class", "mj-grid-loading-overlay", 4, "ngIf"], ["class", "mj-grid-error", 4, "ngIf"], ["class", "mj-grid-empty", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], ["class", "mj-ag-grid ag-theme-alpine", 3, "theme", "columnDefs", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus", "rowHeight", "headerHeight", "rowModelType", "cacheBlockSize", "maxBlocksInCache", "infiniteInitialRowCount", "cacheOverflowSize", "gridReady", "cellClicked", "rowClicked", "rowDoubleClicked", "sortChanged", "selectionChanged", "columnResized", "columnMoved", 4, "ngIf"], ["class", "mj-aggregate-summary", 4, "ngIf"], [3, "closed", "visible", "config"], [1, "mj-grid-toolbar"], [1, "toolbar-left"], ["class", "toolbar-search", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "toolbar-center"], ["class", "row-count", 4, "ngIf"], ["class", "selection-count", 4, "ngIf"], [1, "toolbar-right"], ["class", "toolbar-button", "title", "Create new record", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh data", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export to Excel", 3, "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete selected records", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Compare selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Merge selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add selected records to a list", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Search for duplicate records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Send message to selected records", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Add New", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Refresh", 3, "disabled", "click", 4, "ngIf"], ["class", "toolbar-button toolbar-button-danger", "title", "Delete Selected", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Export", 3, "click", 4, "ngIf"], ["class", "toolbar-button", "title", "Column Chooser", 3, "click", 4, "ngIf"], ["class", "toolbar-overflow", 3, "click", 4, "ngIf"], [1, "toolbar-search"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "search-input", 3, "input", "placeholder", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], ["class", "toolbar-button", 3, "class", "disabled", "title", "click", 4, "ngIf"], [1, "toolbar-button", 3, "click", "disabled", "title"], [3, "class", 4, "ngIf"], [4, "ngIf"], [1, "row-count"], [1, "selection-count"], ["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"], ["class", "overflow-menu", 4, "ngIf"], [1, "overflow-menu"], ["class", "overflow-item", 3, "click", 4, "ngIf"], ["class", "overflow-divider", 4, "ngIf"], [1, "overflow-item", 3, "click"], [1, "overflow-divider"], [1, "overflow-section-label"], ["class", "overflow-item", 3, "disabled", "click", 4, "ngFor", "ngForOf"], [1, "overflow-item", 3, "click", "disabled"], [1, "mj-aggregate-cards"], ["class", "aggregate-card-loading", 4, "ngIf"], [1, "aggregate-card"], ["class", "aggregate-card-icon", 4, "ngIf"], [1, "aggregate-card-content"], [1, "aggregate-card-label"], [1, "aggregate-card-value"], [1, "aggregate-card-icon"], [1, "aggregate-card-loading"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "mj-grid-loading-overlay"], ["text", "Loading..."], [1, "mj-grid-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-retry", 3, "click"], [1, "mj-grid-empty"], [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, "mj-aggregate-summary"], [1, "aggregate-summary-content"], ["class", "aggregate-loading", 4, "ngIf"], [1, "aggregate-summary-item"], [1, "agg-summary-label"], [1, "agg-summary-value"], [1, "aggregate-loading"]], template: function EntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", null, 0);
-            i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_Template, 24, 20, "div", 1);
-            i0.ɵɵelementStart(3, "div", 2);
-            i0.ɵɵtemplate(4, EntityDataGridComponent_div_4_Template, 2, 0, "div", 3)(5, EntityDataGridComponent_div_5_Template, 6, 1, "div", 4)(6, EntityDataGridComponent_div_6_Template, 4, 0, "div", 5)(7, EntityDataGridComponent_ag_grid_angular_7_Template, 1, 9, "ag-grid-angular", 6)(8, EntityDataGridComponent_ag_grid_angular_8_Template, 1, 13, "ag-grid-angular", 7);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "mj-export-dialog", 8);
-            i0.ɵɵlistener("closed", function EntityDataGridComponent_Template_mj_export_dialog_closed_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onExportDialogClosed($event)); });
+            i0.ɵɵtemplate(2, EntityDataGridComponent_div_2_Template, 24, 20, "div", 1)(3, EntityDataGridComponent_div_3_Template, 3, 2, "div", 2);
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵtemplate(5, EntityDataGridComponent_div_5_Template, 2, 0, "div", 4)(6, EntityDataGridComponent_div_6_Template, 6, 1, "div", 5)(7, EntityDataGridComponent_div_7_Template, 4, 0, "div", 6)(8, EntityDataGridComponent_ag_grid_angular_8_Template, 1, 9, "ag-grid-angular", 7)(9, EntityDataGridComponent_ag_grid_angular_9_Template, 1, 13, "ag-grid-angular", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(10, EntityDataGridComponent_div_10_Template, 4, 2, "div", 9);
+            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.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.gridContainerClasses.join(" "));
             i0.ɵɵstyleProp("height", ctx.gridHeightStyle);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.ShowToolbar);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.ShowAggregatePanel);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.loading && ctx.rowData.length === 0);
             i0.ɵɵadvance();
@@ -3580,8 +4189,10 @@ export class EntityDataGridComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.errorMessage && ctx.PaginationMode === "infinite");
             i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.ShowAggregateSummary);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("visible", ctx.showExportDialog)("config", ctx.exportDialogConfig);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.AgGridAngular, i4.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-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}"], data: { animation: [
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.AgGridAngular, i4.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: [
                 trigger('fadeIn', [
                     transition(':enter', [
                         style({ opacity: 0, transform: 'translateY(-8px)' }),
@@ -3605,7 +4216,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  <div *ngIf=\"ShowToolbar\" class=\"mj-grid-toolbar\">\n    <div class=\"toolbar-left\">\n      <!-- Search -->\n      <div *ngIf=\"ShowSearch\" 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        <button\n          *ngIf=\"FilterText\"\n          class=\"search-clear\"\n          (click)=\"FilterText = ''\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Custom Left Buttons -->\n      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position !== 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <div class=\"toolbar-center\">\n      <!-- Row Count -->\n      <span *ngIf=\"ToolbarConfig.showRowCount !== false\" class=\"row-count\">\n        {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n      </span>\n\n      <!-- Selection Count -->\n      <span *ngIf=\"ToolbarConfig.showSelectionCount && SelectedKeys.length > 0\" class=\"selection-count\">\n        ({{ SelectedKeys.length }} selected)\n      </span>\n    </div>\n\n    <div class=\"toolbar-right\">\n      <!-- New/Add Button (predefined) -->\n      <button\n        *ngIf=\"ShowNewButton\"\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      <button\n        *ngIf=\"ShowRefreshButton\"\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      <button\n        *ngIf=\"ShowExportButton\"\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      <button\n        *ngIf=\"ShowDeleteButton && HasSelection\"\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      <button\n        *ngIf=\"ShowCompareButton\"\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      <button\n        *ngIf=\"ShowMergeButton\"\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      <button\n        *ngIf=\"ShowAddToListButton\"\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      <button\n        *ngIf=\"ShowDuplicateSearchButton\"\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      <button\n        *ngIf=\"ShowCommunicationButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showAdd && AllowAdd && !ShowNewButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showRefresh !== false && !ShowRefreshButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showExport && !ShowExportButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showColumnChooser && AllowColumnToggle\"\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      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position === 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n\n      <!-- Overflow Menu -->\n      <div *ngIf=\"hasOverflowMenuItems\" 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\n        <div *ngIf=\"showOverflowMenu\" class=\"overflow-menu\" [@fadeIn]>\n          <!-- Export (if in overflow) -->\n          <button *ngIf=\"showExportInOverflow\" 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          <ng-container *ngIf=\"ShowEntityActionButtons && EntityActions.length > 0\">\n            <div class=\"overflow-divider\"></div>\n            <div class=\"overflow-section-label\">Actions</div>\n            <button\n              *ngFor=\"let action of EntityActions\"\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          </ng-container>\n\n          <!-- Column Chooser (if in overflow) -->\n          <div *ngIf=\"showColumnChooserInOverflow\" class=\"overflow-divider\"></div>\n          <button *ngIf=\"showColumnChooserInOverflow\" 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          <ng-container *ngIf=\"HasSelection && hasSelectionDependentOverflowActions\">\n            <div class=\"overflow-divider\"></div>\n            <button *ngIf=\"showCommunicationInOverflow\" class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n              <i class=\"fa-solid fa-envelope\"></i>\n              <span>Send Message</span>\n            </button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    <div *ngIf=\"loading && rowData.length === 0\" class=\"mj-grid-loading-overlay\">\n      <mj-loading text=\"Loading...\"></mj-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"errorMessage && !loading\" 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    <!-- Empty State -->\n    <div *ngIf=\"!loading && !errorMessage && rowData.length === 0\" class=\"mj-grid-empty\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <span>No data to display</span>\n    </div>\n\n    <!-- AG Grid (Client-side mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)\"\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      (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    <!-- AG Grid (Infinite Scroll mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'infinite'\"\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      (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  </div>\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/* 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"] }]
+                ], template: "<!-- Grid Container -->\n<div\n  #gridContainer\n  [class]=\"gridContainerClasses.join(' ')\"\n  [style.height]=\"gridHeightStyle\">\n\n  <!-- Toolbar -->\n  <div *ngIf=\"ShowToolbar\" class=\"mj-grid-toolbar\">\n    <div class=\"toolbar-left\">\n      <!-- Search -->\n      <div *ngIf=\"ShowSearch\" 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        <button\n          *ngIf=\"FilterText\"\n          class=\"search-clear\"\n          (click)=\"FilterText = ''\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Custom Left Buttons -->\n      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position !== 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <div class=\"toolbar-center\">\n      <!-- Row Count -->\n      <span *ngIf=\"ToolbarConfig.showRowCount !== false\" class=\"row-count\">\n        {{ totalRowCount }} {{ totalRowCount === 1 ? 'row' : 'rows' }}\n      </span>\n\n      <!-- Selection Count -->\n      <span *ngIf=\"ToolbarConfig.showSelectionCount && SelectedKeys.length > 0\" class=\"selection-count\">\n        ({{ SelectedKeys.length }} selected)\n      </span>\n    </div>\n\n    <div class=\"toolbar-right\">\n      <!-- New/Add Button (predefined) -->\n      <button\n        *ngIf=\"ShowNewButton\"\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      <button\n        *ngIf=\"ShowRefreshButton\"\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      <button\n        *ngIf=\"ShowExportButton\"\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      <button\n        *ngIf=\"ShowDeleteButton && HasSelection\"\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      <button\n        *ngIf=\"ShowCompareButton\"\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      <button\n        *ngIf=\"ShowMergeButton\"\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      <button\n        *ngIf=\"ShowAddToListButton\"\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      <button\n        *ngIf=\"ShowDuplicateSearchButton\"\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      <button\n        *ngIf=\"ShowCommunicationButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showAdd && AllowAdd && !ShowNewButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showRefresh !== false && !ShowRefreshButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showDelete && AllowDelete && HasSelection && !ShowDeleteButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showExport && !ShowExportButton\"\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      <button\n        *ngIf=\"ToolbarConfig.showColumnChooser && AllowColumnToggle\"\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      <ng-container *ngFor=\"let button of ToolbarConfig.customButtons\">\n        <button\n          *ngIf=\"button.position === 'right' && isButtonVisible(button)\"\n          class=\"toolbar-button\"\n          [class]=\"button.cssClass\"\n          [disabled]=\"isButtonDisabled(button)\"\n          [title]=\"button.tooltip || ''\"\n          (click)=\"onToolbarButtonClick(button)\">\n          <i *ngIf=\"button.icon\" [class]=\"button.icon\"></i>\n          <span *ngIf=\"button.text\">{{ button.text }}</span>\n        </button>\n      </ng-container>\n\n      <!-- Overflow Menu -->\n      <div *ngIf=\"hasOverflowMenuItems\" 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\n        <div *ngIf=\"showOverflowMenu\" class=\"overflow-menu\" [@fadeIn]>\n          <!-- Export (if in overflow) -->\n          <button *ngIf=\"showExportInOverflow\" 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          <ng-container *ngIf=\"ShowEntityActionButtons && EntityActions.length > 0\">\n            <div class=\"overflow-divider\"></div>\n            <div class=\"overflow-section-label\">Actions</div>\n            <button\n              *ngFor=\"let action of EntityActions\"\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          </ng-container>\n\n          <!-- Column Chooser (if in overflow) -->\n          <div *ngIf=\"showColumnChooserInOverflow\" class=\"overflow-divider\"></div>\n          <button *ngIf=\"showColumnChooserInOverflow\" 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          <ng-container *ngIf=\"HasSelection && hasSelectionDependentOverflowActions\">\n            <div class=\"overflow-divider\"></div>\n            <button *ngIf=\"showCommunicationInOverflow\" class=\"overflow-item\" (click)=\"onCommunicationClick(); closeOverflowMenu()\">\n              <i class=\"fa-solid fa-envelope\"></i>\n              <span>Send Message</span>\n            </button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Aggregate Cards (displayed as summary cards above the grid) -->\n  <div *ngIf=\"ShowAggregatePanel\" class=\"mj-aggregate-cards\">\n    <ng-container *ngFor=\"let agg of CardAggregates\">\n      <div class=\"aggregate-card\">\n        <div class=\"aggregate-card-icon\" *ngIf=\"agg.icon\">\n          <i [class]=\"agg.icon\"></i>\n        </div>\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    </ng-container>\n    <div *ngIf=\"AggregatesLoading\" class=\"aggregate-card-loading\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n    </div>\n  </div>\n\n  <!-- Grid Content -->\n  <div class=\"mj-grid-content\">\n    <!-- Loading Overlay -->\n    <div *ngIf=\"loading && rowData.length === 0\" class=\"mj-grid-loading-overlay\">\n      <mj-loading text=\"Loading...\"></mj-loading>\n    </div>\n\n    <!-- Error State -->\n    <div *ngIf=\"errorMessage && !loading\" 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    <!-- Empty State -->\n    <div *ngIf=\"!loading && !errorMessage && rowData.length === 0\" class=\"mj-grid-empty\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <span>No data to display</span>\n    </div>\n\n    <!-- AG Grid (Client-side mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'client' && (rowData.length > 0 || loading)\"\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    <!-- AG Grid (Infinite Scroll mode) -->\n    <ag-grid-angular\n      *ngIf=\"!errorMessage && PaginationMode === 'infinite'\"\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  </div>\n\n  <!-- Aggregate Summary Row (outside mj-grid-content so it's always visible) -->\n  <div *ngIf=\"ShowAggregateSummary\" class=\"mj-aggregate-summary\">\n    <div class=\"aggregate-summary-content\">\n      <ng-container *ngFor=\"let agg of ColumnAggregates\">\n        <div class=\"aggregate-summary-item\">\n          <i *ngIf=\"agg.icon\" [class]=\"agg.icon\"></i>\n          <span class=\"agg-summary-label\">{{ agg.label }}:</span>\n          <span class=\"agg-summary-value\">{{ getAggregateValue(agg) }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"AggregatesLoading\" class=\"aggregate-loading\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n    </div>\n  </div>\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"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }], { Params: [{
             type: Input
         }], AllowLoad: [{
@@ -3660,6 +4271,8 @@ export class EntityDataGridComponent {
             type: Input
         }], RowHeight: [{
             type: Input
+        }], WrapText: [{
+            type: Input
         }], VirtualScroll: [{
             type: Input
         }], ShowRowNumbers: [{
@@ -3714,6 +4327,10 @@ export class EntityDataGridComponent {
             type: Input
         }], EntityActions: [{
             type: Input
+        }], AggregatesConfig: [{
+            type: Input
+        }], AggregatesLoaded: [{
+            type: Output
         }], BeforeRowSelect: [{
             type: Output
         }], AfterRowSelect: [{
@@ -3732,6 +4349,8 @@ export class EntityDataGridComponent {
             type: Output
         }], AfterRowDoubleClick: [{
             type: Output
+        }], ForeignKeyClick: [{
+            type: Output
         }], BeforeCellEdit: [{
             type: Output
         }], AfterCellEditBegin: [{
@@ -3826,5 +4445,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: 150 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDataGridComponent, { className: "EntityDataGridComponent", filePath: "src/lib/entity-data-grid/entity-data-grid.component.ts", lineNumber: 151 }); })();
 //# sourceMappingURL=entity-data-grid.component.js.map