@memberjunction/ng-entity-viewer 4.3.1 → 5.0.0

package/dist/lib/view-config-panel/view-config-panel.component.js

@@ -5,12 +5,13 @@ import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "../aggregate-setup-dialog/aggregate-setup-dialog.component";
+import * as i3 from "../confirm-dialog/confirm-dialog.component";
 const _forTrack0 = ($index, $item) => $item.fieldId;
 const _forTrack1 = ($index, $item) => $item.ID;
 const _forTrack2 = ($index, $item) => $item.id;
 function ViewConfigPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
     i0.ɵɵelementEnd();
 } }
@@ -52,141 +53,155 @@ function ViewConfigPanelComponent_Conditional_25_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.enabledAggregatesCount);
 } }
-function ViewConfigPanelComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function ViewConfigPanelComponent_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Settings");
     i0.ɵɵelementEnd();
 } }
-function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 37);
+function ViewConfigPanelComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("settings")); });
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵconditionalCreate(2, ViewConfigPanelComponent_Conditional_26_Conditional_2_Template, 2, 0, "span");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === "settings");
+    i0.ɵɵproperty("title", ctx_r1.isIconOnlyMode ? "Settings" : "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.isIconOnlyMode ? 2 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 42);
+function ViewConfigPanelComponent_Conditional_28_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 40);
+} }
+function ViewConfigPanelComponent_Conditional_28_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
 } if (rf & 2) {
-    const column_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Custom name: ", column_r4.userDisplayName));
+    const column_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Custom name: ", column_r5.userDisplayName));
 } }
-function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 43);
+function ViewConfigPanelComponent_Conditional_28_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
 } }
-function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 37);
+function ViewConfigPanelComponent_Conditional_28_For_10_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 40);
 } }
-function ViewConfigPanelComponent_Conditional_30_For_10_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_0_Template, 1, 0, "div", 37);
-    i0.ɵɵelementStart(1, "div", 38);
-    i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragstart_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragStart($event, column_r4)); })("dragover", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragover_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragOver($event, column_r4)); })("dragleave", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_drop_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDrop($event, column_r4)); })("dragend", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragEnd($event)); });
-    i0.ɵɵelementStart(2, "div", 39);
-    i0.ɵɵelement(3, "i", 40);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 41);
+function ViewConfigPanelComponent_Conditional_28_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ViewConfigPanelComponent_Conditional_28_For_10_Conditional_0_Template, 1, 0, "div", 40);
+    i0.ɵɵelementStart(1, "div", 41);
+    i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_28_For_10_Template_div_dragstart_1_listener($event) { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragStart($event, column_r5)); })("dragover", function ViewConfigPanelComponent_Conditional_28_For_10_Template_div_dragover_1_listener($event) { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragOver($event, column_r5)); })("dragleave", function ViewConfigPanelComponent_Conditional_28_For_10_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_28_For_10_Template_div_drop_1_listener($event) { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDrop($event, column_r5)); })("dragend", function ViewConfigPanelComponent_Conditional_28_For_10_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragEnd($event)); });
+    i0.ɵɵelementStart(2, "div", 42);
+    i0.ɵɵelement(3, "i", 43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 44);
     i0.ɵɵtext(5);
-    i0.ɵɵconditionalCreate(6, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_6_Template, 1, 2, "i", 42);
-    i0.ɵɵconditionalCreate(7, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_7_Template, 1, 0, "i", 43);
+    i0.ɵɵconditionalCreate(6, ViewConfigPanelComponent_Conditional_28_For_10_Conditional_6_Template, 1, 2, "i", 45);
+    i0.ɵɵconditionalCreate(7, ViewConfigPanelComponent_Conditional_28_For_10_Conditional_7_Template, 1, 0, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 44)(9, "button", 45);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_9_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFormatEditor(column_r4)); });
-    i0.ɵɵelement(10, "i", 46);
+    i0.ɵɵelementStart(8, "div", 47)(9, "button", 48);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_28_For_10_Template_button_click_9_listener() { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFormatEditor(column_r5)); });
+    i0.ɵɵelement(10, "i", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 47);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_11_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnUp(column_r4)); });
-    i0.ɵɵelement(12, "i", 48);
+    i0.ɵɵelementStart(11, "button", 50);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_28_For_10_Template_button_click_11_listener() { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnUp(column_r5)); });
+    i0.ɵɵelement(12, "i", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 49);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_13_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnDown(column_r4)); });
-    i0.ɵɵelement(14, "i", 50);
+    i0.ɵɵelementStart(13, "button", 52);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_28_For_10_Template_button_click_13_listener() { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnDown(column_r5)); });
+    i0.ɵɵelement(14, "i", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 51);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_15_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r4)); });
-    i0.ɵɵelement(16, "i", 33);
+    i0.ɵɵelementStart(15, "button", 54);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_28_For_10_Template_button_click_15_listener() { const column_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r5)); });
+    i0.ɵɵelement(16, "i", 36);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(17, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_17_Template, 1, 0, "div", 37);
+    i0.ɵɵconditionalCreate(17, ViewConfigPanelComponent_Conditional_28_For_10_Conditional_17_Template, 1, 0, "div", 40);
 } if (rf & 2) {
-    const column_r4 = ctx.$implicit;
-    const ɵ$index_92_r5 = ctx.$index;
+    const column_r5 = ctx.$implicit;
+    const ɵ$index_93_r6 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.isDropBefore(column_r4) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.isDropBefore(column_r5) ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("dragging", ctx_r1.draggedColumn === column_r4)("drop-target", ctx_r1.dropTargetColumn === column_r4);
+    i0.ɵɵclassProp("dragging", ctx_r1.draggedColumn === column_r5)("drop-target", ctx_r1.dropTargetColumn === column_r5);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", column_r4.userDisplayName || column_r4.displayName, " ");
+    i0.ɵɵtextInterpolate1(" ", column_r5.userDisplayName || column_r5.displayName, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(column_r4.userDisplayName ? 6 : -1);
+    i0.ɵɵconditional(column_r5.userDisplayName ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasCustomFormat(column_r4) ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.hasCustomFormat(column_r5) ? 7 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", ɵ$index_92_r5 === 0);
+    i0.ɵɵproperty("disabled", ɵ$index_93_r6 === 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_92_r5 === ctx_r1.visibleColumns.length - 1);
+    i0.ɵɵproperty("disabled", ɵ$index_93_r6 === ctx_r1.visibleColumns.length - 1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.isDropAfter(column_r4) && ɵ$index_92_r5 === ctx_r1.visibleColumns.length - 1 ? 17 : -1);
+    i0.ɵɵconditional(ctx_r1.isDropAfter(column_r5) && ɵ$index_93_r6 === ctx_r1.visibleColumns.length - 1 ? 17 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_30_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 52);
+function ViewConfigPanelComponent_Conditional_28_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No columns visible. Add columns from below.");
     i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_30_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "i", 53);
-    i0.ɵɵelementStart(2, "input", 54);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_30_Conditional_19_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.columnSearchText, $event) || (ctx_r1.columnSearchText = $event); return i0.ɵɵresetView($event); });
+function ViewConfigPanelComponent_Conditional_28_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(2, "input", 57);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_28_Conditional_19_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.columnSearchText, $event) || (ctx_r1.columnSearchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.columnSearchText);
 } }
-function ViewConfigPanelComponent_Conditional_30_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "span", 41);
+function ViewConfigPanelComponent_Conditional_28_For_22_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "span", 44);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 55);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_22_Template_button_click_3_listener() { const column_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r8)); });
-    i0.ɵɵelement(4, "i", 56);
+    i0.ɵɵelementStart(3, "button", 58);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_28_For_22_Template_button_click_3_listener() { const column_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r9)); });
+    i0.ɵɵelement(4, "i", 59);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const column_r8 = ctx.$implicit;
+    const column_r9 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(column_r8.displayName);
+    i0.ɵɵtextInterpolate(column_r9.displayName);
 } }
-function ViewConfigPanelComponent_Conditional_30_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 57);
+function ViewConfigPanelComponent_Conditional_28_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "All columns are visible");
     i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 27)(2, "div", 28);
-    i0.ɵɵelement(3, "i", 29);
+function ViewConfigPanelComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 30)(2, "div", 31);
+    i0.ɵɵelement(3, "i", 32);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Visible Columns");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 30);
+    i0.ɵɵelementStart(6, "span", 33);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 31);
-    i0.ɵɵrepeaterCreate(9, ViewConfigPanelComponent_Conditional_30_For_10_Template, 18, 11, null, null, _forTrack0);
-    i0.ɵɵconditionalCreate(11, ViewConfigPanelComponent_Conditional_30_Conditional_11_Template, 4, 0, "div", 32);
+    i0.ɵɵelementStart(8, "div", 34);
+    i0.ɵɵrepeaterCreate(9, ViewConfigPanelComponent_Conditional_28_For_10_Template, 18, 11, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(11, ViewConfigPanelComponent_Conditional_28_Conditional_11_Template, 4, 0, "div", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 27)(13, "div", 28);
-    i0.ɵɵelement(14, "i", 33);
+    i0.ɵɵelementStart(12, "div", 30)(13, "div", 31);
+    i0.ɵɵelement(14, "i", 36);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Hidden Columns");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 30);
+    i0.ɵɵelementStart(17, "span", 33);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(19, ViewConfigPanelComponent_Conditional_30_Conditional_19_Template, 3, 1, "div", 34);
-    i0.ɵɵelementStart(20, "div", 35);
-    i0.ɵɵrepeaterCreate(21, ViewConfigPanelComponent_Conditional_30_For_22_Template, 5, 1, "div", 36, _forTrack0);
-    i0.ɵɵconditionalCreate(23, ViewConfigPanelComponent_Conditional_30_Conditional_23_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(19, ViewConfigPanelComponent_Conditional_28_Conditional_19_Template, 3, 1, "div", 37);
+    i0.ɵɵelementStart(20, "div", 38);
+    i0.ɵɵrepeaterCreate(21, ViewConfigPanelComponent_Conditional_28_For_22_Template, 5, 1, "div", 39, _forTrack0);
+    i0.ɵɵconditionalCreate(23, ViewConfigPanelComponent_Conditional_28_Conditional_23_Template, 4, 0, "div", 35);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -205,13 +220,13 @@ function ViewConfigPanelComponent_Conditional_30_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.hiddenColumns.length === 0 ? 23 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_31_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67)(1, "small", 103);
+function ViewConfigPanelComponent_Conditional_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 70)(1, "small", 106);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 104);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.userDisplayName = undefined); });
+    i0.ɵɵelementStart(3, "button", 107);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.userDisplayName = undefined); });
     i0.ɵɵelement(4, "i", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -219,40 +234,40 @@ function ViewConfigPanelComponent_Conditional_31_Conditional_16_Template(rf, ctx
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("Original: ", ctx_r1.formatEditingColumn.displayName);
 } }
-function ViewConfigPanelComponent_Conditional_31_For_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105);
+function ViewConfigPanelComponent_Conditional_29_For_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 108);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const value_r11 = ctx.$implicit;
+    const value_r12 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("text-align", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.align) || "left")("font-weight", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.bold) ? "bold" : "normal")("font-style", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.italic) ? "italic" : "normal")("text-decoration", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.underline) ? "underline" : "none")("color", ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.color)("background-color", ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.backgroundColor);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPreviewValue(value_r11, ctx_r1.formatEditingColumn.format), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPreviewValue(value_r12, ctx_r1.formatEditingColumn.format), " ");
 } }
-function ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65)(1, "label");
+function ViewConfigPanelComponent_Conditional_29_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68)(1, "label");
     i0.ɵɵtext(2, "Currency");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.currencyCode, $event) || (ctx_r1.formatEditingColumn.format.currencyCode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(4, "option", 109);
+    i0.ɵɵelementStart(3, "select", 77);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_49_Conditional_9_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.currencyCode, $event) || (ctx_r1.formatEditingColumn.format.currencyCode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "option", 112);
     i0.ɵɵtext(5, "USD ($)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "option", 110);
+    i0.ɵɵelementStart(6, "option", 113);
     i0.ɵɵtext(7, "EUR (\u20AC)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "option", 111);
+    i0.ɵɵelementStart(8, "option", 114);
     i0.ɵɵtext(9, "GBP (\u00A3)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "option", 112);
+    i0.ɵɵelementStart(10, "option", 115);
     i0.ɵɵtext(11, "JPY (\u00A5)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "option", 113);
+    i0.ɵɵelementStart(12, "option", 116);
     i0.ɵɵtext(13, "CAD ($)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "option", 114);
+    i0.ɵɵelementStart(14, "option", 117);
     i0.ɵɵtext(15, "AUD ($)");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -260,25 +275,25 @@ function ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Te
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.currencyCode);
 } }
-function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵelement(2, "i", 106);
+function ViewConfigPanelComponent_Conditional_29_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
+    i0.ɵɵelement(2, "i", 109);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Number Options");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 65)(6, "label");
+    i0.ɵɵelementStart(5, "div", 68)(6, "label");
     i0.ɵɵtext(7, "Decimal Places");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 107);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.decimals, $event) || (ctx_r1.formatEditingColumn.format.decimals = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "input", 110);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_49_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.decimals, $event) || (ctx_r1.formatEditingColumn.format.decimals = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template, 16, 1, "div", 65);
-    i0.ɵɵelementStart(10, "div", 65)(11, "label");
+    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_29_Conditional_49_Conditional_9_Template, 16, 1, "div", 68);
+    i0.ɵɵelementStart(10, "div", 68)(11, "label");
     i0.ɵɵtext(12, "Thousands Separator");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "input", 108);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.thousandsSeparator, $event) || (ctx_r1.formatEditingColumn.format.thousandsSeparator = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "input", 111);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_49_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.thousandsSeparator, $event) || (ctx_r1.formatEditingColumn.format.thousandsSeparator = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -289,34 +304,34 @@ function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template(rf, ctx
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.thousandsSeparator);
 } }
-function ViewConfigPanelComponent_Conditional_31_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵelement(2, "i", 115);
+function ViewConfigPanelComponent_Conditional_29_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
+    i0.ɵɵelement(2, "i", 118);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Date Options");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 65)(6, "label");
+    i0.ɵɵelementStart(5, "div", 68)(6, "label");
     i0.ɵɵtext(7, "Format");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "select", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_50_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.dateFormat, $event) || (ctx_r1.formatEditingColumn.format.dateFormat = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(9, "option", 116);
+    i0.ɵɵelementStart(8, "select", 77);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_50_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.dateFormat, $event) || (ctx_r1.formatEditingColumn.format.dateFormat = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(9, "option", 119);
     i0.ɵɵtext(10, "Short (1/15/25)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "option", 117);
+    i0.ɵɵelementStart(11, "option", 120);
     i0.ɵɵtext(12, "Short + Day (Wed, 1/15/25)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "option", 118);
+    i0.ɵɵelementStart(13, "option", 121);
     i0.ɵɵtext(14, "Medium (Jan 15, 2025)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "option", 119);
+    i0.ɵɵelementStart(15, "option", 122);
     i0.ɵɵtext(16, "Medium + Day (Wed, Jan 15, 2025)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "option", 120);
+    i0.ɵɵelementStart(17, "option", 123);
     i0.ɵɵtext(18, "Long (January 15, 2025)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "option", 121);
+    i0.ɵɵelementStart(19, "option", 124);
     i0.ɵɵtext(20, "Long + Day (Wednesday, January 15, 2025)");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -324,37 +339,37 @@ function ViewConfigPanelComponent_Conditional_31_Conditional_50_Template(rf, ctx
     i0.ɵɵadvance(8);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.dateFormat);
 } }
-function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵelement(2, "i", 122);
+function ViewConfigPanelComponent_Conditional_29_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
+    i0.ɵɵelement(2, "i", 125);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Boolean Options");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 65)(6, "label");
+    i0.ɵɵelementStart(5, "div", 68)(6, "label");
     i0.ɵɵtext(7, "True Label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 123);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.trueLabel, $event) || (ctx_r1.formatEditingColumn.format.trueLabel = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "input", 126);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_51_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.trueLabel, $event) || (ctx_r1.formatEditingColumn.format.trueLabel = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 65)(10, "label");
+    i0.ɵɵelementStart(9, "div", 68)(10, "label");
     i0.ɵɵtext(11, "False Label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 124);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.falseLabel, $event) || (ctx_r1.formatEditingColumn.format.falseLabel = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(12, "input", 127);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_51_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.falseLabel, $event) || (ctx_r1.formatEditingColumn.format.falseLabel = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 65)(14, "label");
+    i0.ɵɵelementStart(13, "div", 68)(14, "label");
     i0.ɵɵtext(15, "Display As");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "select", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.booleanDisplay, $event) || (ctx_r1.formatEditingColumn.format.booleanDisplay = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(17, "option", 76);
+    i0.ɵɵelementStart(16, "select", 77);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Conditional_51_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.booleanDisplay, $event) || (ctx_r1.formatEditingColumn.format.booleanDisplay = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(17, "option", 79);
     i0.ɵɵtext(18, "Text");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "option", 125);
+    i0.ɵɵelementStart(19, "option", 128);
     i0.ɵɵtext(20, "Checkbox");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "option", 126);
+    i0.ɵɵelementStart(21, "option", 129);
     i0.ɵɵtext(22, "Icon");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -366,150 +381,150 @@ function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template(rf, ctx
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.booleanDisplay);
 } }
-function ViewConfigPanelComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "button", 59);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
-    i0.ɵɵelement(3, "i", 60);
+function ViewConfigPanelComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 61)(2, "button", 62);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
+    i0.ɵɵelement(3, "i", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 61)(5, "span");
+    i0.ɵɵelementStart(4, "div", 64)(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 62)(8, "div", 63);
-    i0.ɵɵelement(9, "i", 64);
+    i0.ɵɵelementStart(7, "div", 65)(8, "div", 66);
+    i0.ɵɵelement(9, "i", 67);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11, "Column Name");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 65)(13, "label");
+    i0.ɵɵelementStart(12, "div", 68)(13, "label");
     i0.ɵɵtext(14, "Display As");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "input", 66);
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_15_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateUserDisplayName($event.target.value)); });
+    i0.ɵɵelementStart(15, "input", 69);
+    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_29_Template_input_input_15_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateUserDisplayName($event.target.value)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(16, ViewConfigPanelComponent_Conditional_31_Conditional_16_Template, 5, 1, "div", 67);
+    i0.ɵɵconditionalCreate(16, ViewConfigPanelComponent_Conditional_29_Conditional_16_Template, 5, 1, "div", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 68)(18, "div", 69);
-    i0.ɵɵelement(19, "i", 29);
+    i0.ɵɵelementStart(17, "div", 71)(18, "div", 72);
+    i0.ɵɵelement(19, "i", 32);
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21, "Preview");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 70)(23, "div", 71);
+    i0.ɵɵelementStart(22, "div", 73)(23, "div", 74);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(25, ViewConfigPanelComponent_Conditional_31_For_26_Template, 2, 13, "div", 72, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(25, ViewConfigPanelComponent_Conditional_29_For_26_Template, 2, 13, "div", 75, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 62)(28, "div", 63);
-    i0.ɵɵelement(29, "i", 73);
+    i0.ɵɵelementStart(27, "div", 65)(28, "div", 66);
+    i0.ɵɵelement(29, "i", 76);
     i0.ɵɵelementStart(30, "span");
     i0.ɵɵtext(31, "Format Type");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "select", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Template_select_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.type, $event) || (ctx_r1.formatEditingColumn.format.type = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(33, "option", 75);
+    i0.ɵɵelementStart(32, "select", 77);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_29_Template_select_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.type, $event) || (ctx_r1.formatEditingColumn.format.type = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(33, "option", 78);
     i0.ɵɵtext(34, "Auto (Smart Default)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "option", 76);
+    i0.ɵɵelementStart(35, "option", 79);
     i0.ɵɵtext(36, "Text");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "option", 77);
+    i0.ɵɵelementStart(37, "option", 80);
     i0.ɵɵtext(38, "Number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "option", 78);
+    i0.ɵɵelementStart(39, "option", 81);
     i0.ɵɵtext(40, "Currency");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "option", 79);
+    i0.ɵɵelementStart(41, "option", 82);
     i0.ɵɵtext(42, "Percent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "option", 80);
+    i0.ɵɵelementStart(43, "option", 83);
     i0.ɵɵtext(44, "Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "option", 81);
+    i0.ɵɵelementStart(45, "option", 84);
     i0.ɵɵtext(46, "Date & Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "option", 82);
+    i0.ɵɵelementStart(47, "option", 85);
     i0.ɵɵtext(48, "Boolean");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(49, ViewConfigPanelComponent_Conditional_31_Conditional_49_Template, 14, 3, "div", 62);
-    i0.ɵɵconditionalCreate(50, ViewConfigPanelComponent_Conditional_31_Conditional_50_Template, 21, 1, "div", 62);
-    i0.ɵɵconditionalCreate(51, ViewConfigPanelComponent_Conditional_31_Conditional_51_Template, 23, 3, "div", 62);
-    i0.ɵɵelementStart(52, "div", 62)(53, "div", 63);
-    i0.ɵɵelement(54, "i", 83);
+    i0.ɵɵconditionalCreate(49, ViewConfigPanelComponent_Conditional_29_Conditional_49_Template, 14, 3, "div", 65);
+    i0.ɵɵconditionalCreate(50, ViewConfigPanelComponent_Conditional_29_Conditional_50_Template, 21, 1, "div", 65);
+    i0.ɵɵconditionalCreate(51, ViewConfigPanelComponent_Conditional_29_Conditional_51_Template, 23, 3, "div", 65);
+    i0.ɵɵelementStart(52, "div", 65)(53, "div", 66);
+    i0.ɵɵelement(54, "i", 86);
     i0.ɵɵelementStart(55, "span");
     i0.ɵɵtext(56, "Alignment");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(57, "div", 84)(58, "button", 85);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "left"); });
-    i0.ɵɵelement(59, "i", 83);
+    i0.ɵɵelementStart(57, "div", 87)(58, "button", 88);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "left"); });
+    i0.ɵɵelement(59, "i", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "button", 86);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_60_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "center"); });
-    i0.ɵɵelement(61, "i", 87);
+    i0.ɵɵelementStart(60, "button", 89);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_60_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "center"); });
+    i0.ɵɵelement(61, "i", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "button", 88);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_62_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "right"); });
-    i0.ɵɵelement(63, "i", 89);
+    i0.ɵɵelementStart(62, "button", 91);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_62_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "right"); });
+    i0.ɵɵelement(63, "i", 92);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(64, "div", 62)(65, "div", 63);
-    i0.ɵɵelement(66, "i", 90);
+    i0.ɵɵelementStart(64, "div", 65)(65, "div", 66);
+    i0.ɵɵelement(66, "i", 93);
     i0.ɵɵelementStart(67, "span");
     i0.ɵɵtext(68, "Header Style");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(69, "div", 91)(70, "button", 92);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_70_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("bold")); });
-    i0.ɵɵelement(71, "i", 93);
+    i0.ɵɵelementStart(69, "div", 94)(70, "button", 95);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_70_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("bold")); });
+    i0.ɵɵelement(71, "i", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "button", 94);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_72_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("italic")); });
-    i0.ɵɵelement(73, "i", 95);
+    i0.ɵɵelementStart(72, "button", 97);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_72_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("italic")); });
+    i0.ɵɵelement(73, "i", 98);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(74, "button", 96);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_74_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("underline")); });
-    i0.ɵɵelement(75, "i", 97);
+    i0.ɵɵelementStart(74, "button", 99);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_74_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("underline")); });
+    i0.ɵɵelement(75, "i", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(76, "div", 65)(77, "label");
+    i0.ɵɵelementStart(76, "div", 68)(77, "label");
     i0.ɵɵtext(78, "Text Color");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(79, "input", 98);
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_79_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("color", $event.target.value)); });
+    i0.ɵɵelementStart(79, "input", 101);
+    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_29_Template_input_input_79_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("color", $event.target.value)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(80, "div", 65)(81, "label");
+    i0.ɵɵelementStart(80, "div", 68)(81, "label");
     i0.ɵɵtext(82, "Background");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(83, "input", 98);
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_83_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("backgroundColor", $event.target.value)); });
+    i0.ɵɵelementStart(83, "input", 101);
+    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_29_Template_input_input_83_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("backgroundColor", $event.target.value)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(84, "div", 62)(85, "div", 63);
-    i0.ɵɵelement(86, "i", 99);
+    i0.ɵɵelementStart(84, "div", 65)(85, "div", 66);
+    i0.ɵɵelement(86, "i", 102);
     i0.ɵɵelementStart(87, "span");
     i0.ɵɵtext(88, "Cell Style");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(89, "div", 91)(90, "button", 92);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_90_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("bold")); });
-    i0.ɵɵelement(91, "i", 93);
+    i0.ɵɵelementStart(89, "div", 94)(90, "button", 95);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_90_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("bold")); });
+    i0.ɵɵelement(91, "i", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(92, "button", 94);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_92_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("italic")); });
-    i0.ɵɵelement(93, "i", 95);
+    i0.ɵɵelementStart(92, "button", 97);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_92_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("italic")); });
+    i0.ɵɵelement(93, "i", 98);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(94, "button", 96);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_94_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("underline")); });
-    i0.ɵɵelement(95, "i", 97);
+    i0.ɵɵelementStart(94, "button", 99);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_94_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("underline")); });
+    i0.ɵɵelement(95, "i", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(96, "div", 65)(97, "label");
+    i0.ɵɵelementStart(96, "div", 68)(97, "label");
     i0.ɵɵtext(98, "Text Color");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(99, "input", 98);
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_99_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("color", $event.target.value)); });
+    i0.ɵɵelementStart(99, "input", 101);
+    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_29_Template_input_input_99_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("color", $event.target.value)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(100, "div", 65)(101, "label");
+    i0.ɵɵelementStart(100, "div", 68)(101, "label");
     i0.ɵɵtext(102, "Background");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(103, "input", 98);
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_103_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("backgroundColor", $event.target.value)); });
+    i0.ɵɵelementStart(103, "input", 101);
+    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_29_Template_input_input_103_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("backgroundColor", $event.target.value)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(104, "div", 100)(105, "button", 101);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_105_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearColumnFormat(ctx_r1.formatEditingColumn); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
-    i0.ɵɵelement(106, "i", 102);
+    i0.ɵɵelementStart(104, "div", 103)(105, "button", 104);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_29_Template_button_click_105_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearColumnFormat(ctx_r1.formatEditingColumn); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
+    i0.ɵɵelement(106, "i", 105);
     i0.ɵɵtext(107, " Clear Formatting ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -561,88 +576,88 @@ function ViewConfigPanelComponent_Conditional_31_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.backgroundColor) || "#ffffff");
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 134);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 137);
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 139);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 142);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r19 = ctx.$implicit;
-    i0.ɵɵproperty("value", field_r19.Name);
+    const field_r20 = ctx.$implicit;
+    i0.ɵɵproperty("value", field_r20.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(field_r19.DisplayNameOrName);
+    i0.ɵɵtextInterpolate(field_r20.DisplayNameOrName);
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 134);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 137);
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_0_Template, 1, 0, "div", 134);
-    i0.ɵɵelementStart(1, "div", 135);
-    i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragstart_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragStart($event, sortItem_r18)); })("dragover", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragover_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragOver($event, sortItem_r18)); })("dragleave", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_drop_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDrop($event, sortItem_r18)); })("dragend", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragEnd($event)); });
-    i0.ɵɵelementStart(2, "div", 136);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Conditional_0_Template, 1, 0, "div", 137);
+    i0.ɵɵelementStart(1, "div", 138);
+    i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_div_dragstart_1_listener($event) { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragStart($event, sortItem_r19)); })("dragover", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_div_dragover_1_listener($event) { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragOver($event, sortItem_r19)); })("dragleave", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_div_drop_1_listener($event) { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDrop($event, sortItem_r19)); })("dragend", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragEnd($event)); });
+    i0.ɵɵelementStart(2, "div", 139);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 137);
-    i0.ɵɵelement(5, "i", 40);
+    i0.ɵɵelementStart(4, "div", 140);
+    i0.ɵɵelement(5, "i", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "select", 138);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; i0.ɵɵtwoWayBindingSet(sortItem_r18.field, $event) || (sortItem_r18.field = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortFieldChange(sortItem_r18, $event)); });
-    i0.ɵɵrepeaterCreate(7, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_For_8_Template, 2, 2, "option", 139, _forTrack1);
+    i0.ɵɵelementStart(6, "select", 141);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; i0.ɵɵtwoWayBindingSet(sortItem_r19.field, $event) || (sortItem_r19.field = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortFieldChange(sortItem_r19, $event)); });
+    i0.ɵɵrepeaterCreate(7, ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_For_8_Template, 2, 2, "option", 142, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 140)(10, "button", 141);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_10_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r18, "asc")); });
-    i0.ɵɵelement(11, "i", 142);
+    i0.ɵɵelementStart(9, "div", 143)(10, "button", 144);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_button_click_10_listener() { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r19, "asc")); });
+    i0.ɵɵelement(11, "i", 145);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 143);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_12_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r18, "desc")); });
-    i0.ɵɵelement(13, "i", 144);
+    i0.ɵɵelementStart(12, "button", 146);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_button_click_12_listener() { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r19, "desc")); });
+    i0.ɵɵelement(13, "i", 147);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 145);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_14_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSortLevel(sortItem_r18)); });
+    i0.ɵɵelementStart(14, "button", 148);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template_button_click_14_listener() { const sortItem_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSortLevel(sortItem_r19)); });
     i0.ɵɵelement(15, "i", 8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(16, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_16_Template, 1, 0, "div", 134);
+    i0.ɵɵconditionalCreate(16, ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Conditional_16_Template, 1, 0, "div", 137);
 } if (rf & 2) {
-    const sortItem_r18 = ctx.$implicit;
-    const ɵ$index_521_r20 = ctx.$index;
+    const sortItem_r19 = ctx.$implicit;
+    const ɵ$index_522_r21 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵconditional(ctx_r1.isSortDropBefore(sortItem_r18) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.isSortDropBefore(sortItem_r19) ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("dragging", ctx_r1.draggedSortItem === sortItem_r18)("drop-target", ctx_r1.dropTargetSortItem === sortItem_r18);
+    i0.ɵɵclassProp("dragging", ctx_r1.draggedSortItem === sortItem_r19)("drop-target", ctx_r1.dropTargetSortItem === sortItem_r19);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ɵ$index_521_r20 + 1);
+    i0.ɵɵtextInterpolate(ɵ$index_522_r21 + 1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", sortItem_r18.field);
+    i0.ɵɵtwoWayProperty("ngModel", sortItem_r19.field);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.sortableFields);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", sortItem_r18.direction === "asc");
+    i0.ɵɵclassProp("active", sortItem_r19.direction === "asc");
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", sortItem_r18.direction === "desc");
+    i0.ɵɵclassProp("active", sortItem_r19.direction === "desc");
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isSortDropAfter(sortItem_r18) && ɵ$index_521_r20 === ctx_r1.sortItems.length - 1 ? 16 : -1);
+    i0.ɵɵconditional(ctx_r1.isSortDropAfter(sortItem_r19) && ɵ$index_522_r21 === ctx_r1.sortItems.length - 1 ? 16 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵelement(1, "i", 52);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 136);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Drag items to change priority. Records sort by first level, then second, etc.");
     i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 132);
-    i0.ɵɵrepeaterCreate(1, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template, 17, 16, null, null, i0.ɵɵrepeaterTrackByIndex);
+function ViewConfigPanelComponent_Conditional_30_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 135);
+    i0.ɵɵrepeaterCreate(1, ViewConfigPanelComponent_Conditional_30_Conditional_9_For_2_Template, 17, 16, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ViewConfigPanelComponent_Conditional_32_Conditional_9_Conditional_3_Template, 4, 0, "div", 133);
+    i0.ɵɵconditionalCreate(3, ViewConfigPanelComponent_Conditional_30_Conditional_9_Conditional_3_Template, 4, 0, "div", 136);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -650,28 +665,28 @@ function ViewConfigPanelComponent_Conditional_32_Conditional_9_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.sortItems.length > 1 ? 3 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_32_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 131);
+function ViewConfigPanelComponent_Conditional_30_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 134);
     i0.ɵɵelement(1, "i", 12);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No sorting configured");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 146);
+    i0.ɵɵelementStart(4, "p", 149);
     i0.ɵɵtext(5, "Click \"Add Sort Level\" to define how records should be ordered");
     i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 127)(2, "div", 128)(3, "p", 129);
+function ViewConfigPanelComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 130)(2, "div", 131)(3, "p", 132);
     i0.ɵɵtext(4, " Define how records should be ordered. Add multiple levels to sort by secondary fields when values are equal. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 130);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addSortLevel()); });
-    i0.ɵɵelement(6, "i", 56);
+    i0.ɵɵelementStart(5, "button", 133);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addSortLevel()); });
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Add Sort Level");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_32_Conditional_9_Template, 4, 1)(10, ViewConfigPanelComponent_Conditional_32_Conditional_10_Template, 6, 0, "div", 131);
+    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_30_Conditional_9_Template, 4, 1)(10, ViewConfigPanelComponent_Conditional_30_Conditional_10_Template, 6, 0, "div", 134);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -680,15 +695,15 @@ function ViewConfigPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.sortItems.length > 0 ? 9 : 10);
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 154);
+function ViewConfigPanelComponent_Conditional_31_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 157);
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 154);
+function ViewConfigPanelComponent_Conditional_31_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 157);
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 160);
-    i0.ɵɵelement(1, "i", 171);
+function ViewConfigPanelComponent_Conditional_31_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 163);
+    i0.ɵɵelement(1, "i", 174);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -697,42 +712,42 @@ function ViewConfigPanelComponent_Conditional_33_Conditional_20_Conditional_5_Te
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.smartFilterExplanation);
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 155)(1, "div", 157)(2, "div", 158);
-    i0.ɵɵelement(3, "i", 150);
+function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 158)(1, "div", 160)(2, "div", 161);
+    i0.ɵɵelement(3, "i", 153);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "textarea", 159);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.smartFilterPrompt, $event) || (ctx_r1.smartFilterPrompt = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "textarea", 162);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.smartFilterPrompt, $event) || (ctx_r1.smartFilterPrompt = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, ViewConfigPanelComponent_Conditional_33_Conditional_20_Conditional_5_Template, 4, 1, "div", 160);
-    i0.ɵɵelementStart(6, "div", 161)(7, "div", 162);
-    i0.ɵɵelement(8, "i", 163);
+    i0.ɵɵconditionalCreate(5, ViewConfigPanelComponent_Conditional_31_Conditional_20_Conditional_5_Template, 4, 1, "div", 163);
+    i0.ɵɵelementStart(6, "div", 164)(7, "div", 165);
+    i0.ɵɵelement(8, "i", 166);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Try these examples:");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 164)(12, "button", 165);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Show records created in the last 30 days")); });
-    i0.ɵɵelement(13, "i", 166);
+    i0.ɵɵelementStart(11, "div", 167)(12, "button", 168);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Show records created in the last 30 days")); });
+    i0.ɵɵelement(13, "i", 169);
     i0.ɵɵtext(14, " Last 30 days ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 165);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Active records only")); });
-    i0.ɵɵelement(16, "i", 167);
+    i0.ɵɵelementStart(15, "button", 168);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Active records only")); });
+    i0.ɵɵelement(16, "i", 170);
     i0.ɵɵtext(17, " Active only ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 165);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records with high priority")); });
-    i0.ɵɵelement(19, "i", 168);
+    i0.ɵɵelementStart(18, "button", 168);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records with high priority")); });
+    i0.ɵɵelement(19, "i", 171);
     i0.ɵɵtext(20, " High priority ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 165);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records modified this week")); });
-    i0.ɵɵelement(22, "i", 169);
+    i0.ɵɵelementStart(21, "button", 168);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_20_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records modified this week")); });
+    i0.ɵɵelement(22, "i", 172);
     i0.ɵɵtext(23, " Modified this week ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 170);
-    i0.ɵɵelement(25, "i", 52);
+    i0.ɵɵelementStart(24, "div", 173);
+    i0.ɵɵelement(25, "i", 55);
     i0.ɵɵelementStart(26, "span");
     i0.ɵɵtext(27, "The AI will interpret your description and create the appropriate filter when you save the view.");
     i0.ɵɵelementEnd()()();
@@ -752,11 +767,11 @@ function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template(rf, ctx
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 181);
+function ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 184);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 182);
+    i0.ɵɵelementStart(2, "span", 185);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -766,33 +781,33 @@ function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_4_Te
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.getFilterSummary());
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 175);
+function ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 178);
     i0.ɵɵtext(1, "No filters configured");
     i0.ɵɵelementEnd();
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 183);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
+function ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 186);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
     i0.ɵɵelement(1, "i", 8);
     i0.ɵɵtext(2, " Clear ");
     i0.ɵɵelementEnd();
 } }
-function ViewConfigPanelComponent_Conditional_33_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 156)(1, "div", 172)(2, "div", 173)(3, "div", 174);
-    i0.ɵɵconditionalCreate(4, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_4_Template, 4, 2)(5, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_5_Template, 2, 0, "span", 175);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 176);
-    i0.ɵɵconditionalCreate(7, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template, 3, 0, "button", 177);
-    i0.ɵɵelementStart(8, "button", 178);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_21_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFilterDialog()); });
-    i0.ɵɵelement(9, "i", 179);
+function ViewConfigPanelComponent_Conditional_31_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 159)(1, "div", 175)(2, "div", 176)(3, "div", 177);
+    i0.ɵɵconditionalCreate(4, ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_4_Template, 4, 2)(5, ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_5_Template, 2, 0, "span", 178);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 179);
+    i0.ɵɵconditionalCreate(7, ViewConfigPanelComponent_Conditional_31_Conditional_21_Conditional_7_Template, 3, 0, "button", 180);
+    i0.ɵɵelementStart(8, "button", 181);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_21_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFilterDialog()); });
+    i0.ɵɵelement(9, "i", 182);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(11, "div", 180);
-    i0.ɵɵelement(12, "i", 52);
+    i0.ɵɵelementStart(11, "div", 183);
+    i0.ɵɵelement(12, "i", 55);
     i0.ɵɵelementStart(13, "span");
     i0.ɵɵtext(14, "Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.");
     i0.ɵɵelementEnd()()();
@@ -807,36 +822,36 @@ function ViewConfigPanelComponent_Conditional_33_Conditional_21_Template(rf, ctx
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getFilterCount() > 0 ? "Edit Filters" : "Add Filters", " ");
 } }
-function ViewConfigPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 147)(2, "button", 148);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("smart")); });
-    i0.ɵɵelementStart(3, "div", 149);
-    i0.ɵɵelement(4, "i", 150);
+function ViewConfigPanelComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 150)(2, "button", 151);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("smart")); });
+    i0.ɵɵelementStart(3, "div", 152);
+    i0.ɵɵelement(4, "i", 153);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 151)(6, "span", 152);
+    i0.ɵɵelementStart(5, "div", 154)(6, "span", 155);
     i0.ɵɵtext(7, "Smart Filter");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 153);
+    i0.ɵɵelementStart(8, "span", 156);
     i0.ɵɵtext(9, "Use AI to filter with natural language");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, ViewConfigPanelComponent_Conditional_33_Conditional_10_Template, 1, 0, "i", 154);
+    i0.ɵɵconditionalCreate(10, ViewConfigPanelComponent_Conditional_31_Conditional_10_Template, 1, 0, "i", 157);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 148);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("traditional")); });
-    i0.ɵɵelementStart(12, "div", 149);
-    i0.ɵɵelement(13, "i", 106);
+    i0.ɵɵelementStart(11, "button", 151);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("traditional")); });
+    i0.ɵɵelementStart(12, "div", 152);
+    i0.ɵɵelement(13, "i", 109);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 151)(15, "span", 152);
+    i0.ɵɵelementStart(14, "div", 154)(15, "span", 155);
     i0.ɵɵtext(16, "Traditional Filter");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 153);
+    i0.ɵɵelementStart(17, "span", 156);
     i0.ɵɵtext(18, "Build filters with field/operator/value");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(19, ViewConfigPanelComponent_Conditional_33_Conditional_19_Template, 1, 0, "i", 154);
+    i0.ɵɵconditionalCreate(19, ViewConfigPanelComponent_Conditional_31_Conditional_19_Template, 1, 0, "i", 157);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, ViewConfigPanelComponent_Conditional_33_Conditional_20_Template, 28, 7, "div", 155);
-    i0.ɵɵconditionalCreate(21, ViewConfigPanelComponent_Conditional_33_Conditional_21_Template, 15, 4, "div", 156);
+    i0.ɵɵconditionalCreate(20, ViewConfigPanelComponent_Conditional_31_Conditional_20_Template, 28, 7, "div", 158);
+    i0.ɵɵconditionalCreate(21, ViewConfigPanelComponent_Conditional_31_Conditional_21_Template, 15, 4, "div", 159);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -855,85 +870,85 @@ function ViewConfigPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.filterMode === "traditional" ? 21 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 202);
-    i0.ɵɵelement(1, "i", 150);
+function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 205);
+    i0.ɵɵelement(1, "i", 153);
     i0.ɵɵelementEnd();
 } }
-function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 196)(1, "div", 197);
+function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 199)(1, "div", 200);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 198)(4, "div", 199);
+    i0.ɵɵelementStart(3, "div", 201)(4, "div", 202);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 200)(7, "span", 201);
+    i0.ɵɵelementStart(6, "div", 203)(7, "span", 204);
     i0.ɵɵelement(8, "i");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Conditional_10_Template, 2, 0, "span", 202);
+    i0.ɵɵconditionalCreate(10, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_10_Template, 2, 0, "span", 205);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 203)(12, "button", 204);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template_button_click_12_listener() { const agg_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveAggregateUp(agg_r27)); });
-    i0.ɵɵelement(13, "i", 48);
+    i0.ɵɵelementStart(11, "div", 206)(12, "button", 207);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_12_listener() { const agg_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveAggregateUp(agg_r28)); });
+    i0.ɵɵelement(13, "i", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 205);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template_button_click_14_listener() { const agg_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveAggregateDown(agg_r27)); });
-    i0.ɵɵelement(15, "i", 50);
+    i0.ɵɵelementStart(14, "button", 208);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_14_listener() { const agg_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveAggregateDown(agg_r28)); });
+    i0.ɵɵelement(15, "i", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 206);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template_button_click_16_listener($event) { const agg_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleAggregateEnabled(agg_r27, $event)); });
+    i0.ɵɵelementStart(16, "button", 209);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_16_listener($event) { const agg_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleAggregateEnabled(agg_r28, $event)); });
     i0.ɵɵelement(17, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 207);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template_button_click_18_listener() { const agg_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editAggregate(agg_r27)); });
-    i0.ɵɵelement(19, "i", 179);
+    i0.ɵɵelementStart(18, "button", 210);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_18_listener() { const agg_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editAggregate(agg_r28)); });
+    i0.ɵɵelement(19, "i", 182);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 208);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template_button_click_20_listener() { const agg_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeAggregate(agg_r27)); });
-    i0.ɵɵelement(21, "i", 209);
+    i0.ɵɵelementStart(20, "button", 211);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_20_listener() { const agg_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeAggregate(agg_r28)); });
+    i0.ɵɵelement(21, "i", 212);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const agg_r27 = ctx.$implicit;
-    const ɵ$index_732_r28 = ctx.$index;
+    const agg_r28 = ctx.$implicit;
+    const ɵ$index_733_r29 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("disabled", agg_r27.enabled === false);
+    i0.ɵɵclassProp("disabled", agg_r28.enabled === false);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(agg_r27.icon || "fa-solid fa-chart-simple");
+    i0.ɵɵclassMap(agg_r28.icon || "fa-solid fa-chart-simple");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(agg_r27.label);
+    i0.ɵɵtextInterpolate(agg_r28.label);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(agg_r27.displayType === "card" ? "fa-solid fa-id-card" : "fa-solid fa-table-columns");
+    i0.ɵɵclassMap(agg_r28.displayType === "card" ? "fa-solid fa-id-card" : "fa-solid fa-table-columns");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", agg_r27.displayType === "card" ? "Card" : "Column Footer", " ");
+    i0.ɵɵtextInterpolate1(" ", agg_r28.displayType === "card" ? "Card" : "Column Footer", " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agg_r27.smartPrompt ? 10 : -1);
+    i0.ɵɵconditional(agg_r28.smartPrompt ? 10 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_732_r28 === 0 || !ctx_r1.canEdit);
+    i0.ɵɵproperty("disabled", ɵ$index_733_r29 === 0 || !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_732_r28 === ctx_r1.aggregates.length - 1 || !ctx_r1.canEdit);
+    i0.ɵɵproperty("disabled", ɵ$index_733_r29 === ctx_r1.aggregates.length - 1 || !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("enabled", agg_r27.enabled !== false);
-    i0.ɵɵproperty("disabled", !ctx_r1.canEdit)("title", agg_r27.enabled !== false ? "Disable" : "Enable");
+    i0.ɵɵclassProp("enabled", agg_r28.enabled !== false);
+    i0.ɵɵproperty("disabled", !ctx_r1.canEdit)("title", agg_r28.enabled !== false ? "Disable" : "Enable");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(agg_r27.enabled !== false ? "fa-solid fa-eye" : "fa-solid fa-eye-slash");
+    i0.ɵɵclassMap(agg_r28.enabled !== false ? "fa-solid fa-eye" : "fa-solid fa-eye-slash");
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
 } }
-function ViewConfigPanelComponent_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 190);
-    i0.ɵɵrepeaterCreate(1, ViewConfigPanelComponent_Conditional_34_Conditional_9_For_2_Template, 22, 19, "div", 191, _forTrack2);
+function ViewConfigPanelComponent_Conditional_32_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 193);
+    i0.ɵɵrepeaterCreate(1, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template, 22, 19, "div", 194, _forTrack2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 192)(4, "div", 193);
-    i0.ɵɵelement(5, "i", 194);
+    i0.ɵɵelementStart(3, "div", 195)(4, "div", 196);
+    i0.ɵɵelement(5, "i", 197);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 193);
-    i0.ɵɵelement(9, "i", 195);
+    i0.ɵɵelementStart(8, "div", 196);
+    i0.ɵɵelement(9, "i", 198);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
@@ -946,30 +961,30 @@ function ViewConfigPanelComponent_Conditional_34_Conditional_9_Template(rf, ctx)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", ctx_r1.columnAggregates.length, " column footer", ctx_r1.columnAggregates.length !== 1 ? "s" : "");
 } }
-function ViewConfigPanelComponent_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 188);
+function ViewConfigPanelComponent_Conditional_32_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 191);
     i0.ɵɵelement(1, "i", 15);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No aggregates configured");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 210);
+    i0.ɵɵelementStart(4, "p", 213);
     i0.ɵɵtext(5, "Click \"Add Aggregate\" to create summary calculations");
     i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 184)(2, "div", 185)(3, "p", 186);
+function ViewConfigPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 187)(2, "div", 188)(3, "p", 189);
     i0.ɵɵtext(4, " Add summary calculations like totals, averages, and counts. Display them in cards or as column footers. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 187);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAddAggregateDialog()); });
-    i0.ɵɵelement(6, "i", 56);
+    i0.ɵɵelementStart(5, "button", 190);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAddAggregateDialog()); });
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Add Aggregate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_34_Conditional_9_Template, 12, 4)(10, ViewConfigPanelComponent_Conditional_34_Conditional_10_Template, 6, 0, "div", 188);
-    i0.ɵɵelementStart(11, "div", 189);
-    i0.ɵɵelement(12, "i", 52);
+    i0.ɵɵconditionalCreate(9, ViewConfigPanelComponent_Conditional_32_Conditional_9_Template, 12, 4)(10, ViewConfigPanelComponent_Conditional_32_Conditional_10_Template, 6, 0, "div", 191);
+    i0.ɵɵelementStart(11, "div", 192);
+    i0.ɵɵelement(12, "i", 55);
     i0.ɵɵelementStart(13, "span");
     i0.ɵɵtext(14, "Aggregates are calculated server-side for accuracy with filtered/paginated data.");
     i0.ɵɵelementEnd()()()();
@@ -980,60 +995,70 @@ function ViewConfigPanelComponent_Conditional_34_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.aggregates.length > 0 ? 9 : 10);
 } }
-function ViewConfigPanelComponent_Conditional_35_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 220)(1, "div", 28);
-    i0.ɵɵelement(2, "i", 221);
+function ViewConfigPanelComponent_Conditional_33_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 217);
+    i0.ɵɵtext(1, "View name is required");
+    i0.ɵɵelementEnd();
+} }
+function ViewConfigPanelComponent_Conditional_33_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 224)(1, "div", 31);
+    i0.ɵɵelement(2, "i", 225);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Danger Zone");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 222);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_35_Conditional_26_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDelete()); });
-    i0.ɵɵelement(6, "i", 209);
+    i0.ɵɵelementStart(5, "button", 226);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_27_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDelete()); });
+    i0.ɵɵelement(6, "i", 212);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Delete View");
     i0.ɵɵelementEnd()()();
 } }
-function ViewConfigPanelComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 27)(2, "div", 28);
-    i0.ɵɵelement(3, "i", 52);
+function ViewConfigPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 30)(2, "div", 31);
+    i0.ɵɵelement(3, "i", 55);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "View Details");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 211)(7, "label", 212);
+    i0.ɵɵelementStart(6, "div", 214)(7, "label", 215);
     i0.ɵɵtext(8, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "input", 213);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_35_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewName, $event) || (ctx_r1.viewName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 211)(11, "label", 214);
-    i0.ɵɵtext(12, "Description");
+    i0.ɵɵelementStart(9, "input", 216);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_33_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewName, $event) || (ctx_r1.viewName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "textarea", 215);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_35_Template_textarea_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewDescription, $event) || (ctx_r1.viewDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵconditionalCreate(10, ViewConfigPanelComponent_Conditional_33_Conditional_10_Template, 2, 0, "span", 217);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 214)(12, "label", 218);
+    i0.ɵɵtext(13, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "textarea", 219);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_33_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewDescription, $event) || (ctx_r1.viewDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 27)(15, "div", 28);
-    i0.ɵɵelement(16, "i", 216);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Sharing");
+    i0.ɵɵelementStart(15, "div", 30)(16, "div", 31);
+    i0.ɵɵelement(17, "i", 220);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Sharing");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "label", 217)(20, "input", 218);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_35_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.isShared, $event) || (ctx_r1.isShared = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(20, "label", 221)(21, "input", 222);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_33_Template_input_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.isShared, $event) || (ctx_r1.isShared = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 219)(22, "strong");
-    i0.ɵɵtext(23, "Share with others");
+    i0.ɵɵelementStart(22, "span", 223)(23, "strong");
+    i0.ɵɵtext(24, "Share with others");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "small");
-    i0.ɵɵtext(25, "Allow other users to use this view");
+    i0.ɵɵelementStart(25, "small");
+    i0.ɵɵtext(26, "Allow other users to use this view");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(26, ViewConfigPanelComponent_Conditional_35_Conditional_26_Template, 9, 0, "div", 220);
+    i0.ɵɵconditionalCreate(27, ViewConfigPanelComponent_Conditional_33_Conditional_27_Template, 9, 0, "div", 224);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(9);
+    i0.ɵɵclassProp("invalid", !ctx_r1.viewName || !ctx_r1.viewName.trim());
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.viewName);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.viewName || !ctx_r1.viewName.trim() ? 10 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.viewDescription);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
@@ -1041,85 +1066,56 @@ function ViewConfigPanelComponent_Conditional_35_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.isShared);
     i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.viewEntity && ctx_r1.canDelete ? 26 : -1);
-} }
-function ViewConfigPanelComponent_Conditional_38_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 224);
+    i0.ɵɵconditional(ctx_r1.viewEntity && ctx_r1.canDelete ? 27 : -1);
 } }
-function ViewConfigPanelComponent_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 225);
-} }
-function ViewConfigPanelComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 223);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_38_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
-    i0.ɵɵconditionalCreate(1, ViewConfigPanelComponent_Conditional_38_Conditional_1_Template, 1, 0, "i", 224)(2, ViewConfigPanelComponent_Conditional_38_Conditional_2_Template, 1, 0, "i", 225);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.viewName);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSaving ? 1 : 2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
-} }
-function ViewConfigPanelComponent_Conditional_39_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 224);
-} }
-function ViewConfigPanelComponent_Conditional_39_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 225);
+function ViewConfigPanelComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 225);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "At least one column must be visible");
+    i0.ɵɵelementEnd()();
 } }
-function ViewConfigPanelComponent_Conditional_39_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 224);
+function ViewConfigPanelComponent_Conditional_37_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 228);
 } }
-function ViewConfigPanelComponent_Conditional_39_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 56);
+function ViewConfigPanelComponent_Conditional_37_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 229);
 } }
-function ViewConfigPanelComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function ViewConfigPanelComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 223);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_39_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveDefaults()); });
-    i0.ɵɵconditionalCreate(1, ViewConfigPanelComponent_Conditional_39_Conditional_1_Template, 1, 0, "i", 224)(2, ViewConfigPanelComponent_Conditional_39_Conditional_2_Template, 1, 0, "i", 225);
+    i0.ɵɵelementStart(0, "button", 227);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
+    i0.ɵɵconditionalCreate(1, ViewConfigPanelComponent_Conditional_37_Conditional_1_Template, 1, 0, "i", 228)(2, ViewConfigPanelComponent_Conditional_37_Conditional_2_Template, 1, 0, "i", 229);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 226);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_39_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAsNew()); });
-    i0.ɵɵconditionalCreate(5, ViewConfigPanelComponent_Conditional_39_Conditional_5_Template, 1, 0, "i", 224)(6, ViewConfigPanelComponent_Conditional_39_Conditional_6_Template, 1, 0, "i", 56);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.IsValid);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isSaving ? 1 : 2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.viewName);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSaving ? 5 : 6);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Creating..." : "Save As New", " ");
 } }
-function ViewConfigPanelComponent_Conditional_40_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 224);
+function ViewConfigPanelComponent_Conditional_38_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 228);
 } }
-function ViewConfigPanelComponent_Conditional_40_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 56);
+function ViewConfigPanelComponent_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 229);
 } }
-function ViewConfigPanelComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+function ViewConfigPanelComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 226);
-    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_40_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAsNew()); });
-    i0.ɵɵconditionalCreate(1, ViewConfigPanelComponent_Conditional_40_Conditional_1_Template, 1, 0, "i", 224)(2, ViewConfigPanelComponent_Conditional_40_Conditional_2_Template, 1, 0, "i", 56);
-    i0.ɵɵtext(3, " Save As New ");
+    i0.ɵɵelementStart(0, "button", 227);
+    i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_38_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveDefaults()); });
+    i0.ɵɵconditionalCreate(1, ViewConfigPanelComponent_Conditional_38_Conditional_1_Template, 1, 0, "i", 228)(2, ViewConfigPanelComponent_Conditional_38_Conditional_2_Template, 1, 0, "i", 229);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("disabled", ctx_r1.isSaving);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isSaving ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
 } }
 /**
  * ViewConfigPanelComponent - Sliding panel for configuring view settings
@@ -1180,6 +1176,14 @@ export class ViewConfigPanelComponent {
      * Filter state from external dialog (set by parent after dialog closes)
      */
     externalFilterState = null;
+    /**
+     * When true, auto-focus on Settings tab when panel opens (BUG-011: forward saveAsNew intent)
+     */
+    DefaultSaveAsNew = false;
+    /**
+     * Emitted when user wants to duplicate the current view (F-005)
+     */
+    duplicate = new EventEmitter();
     // Form state
     viewName = '';
     viewDescription = '';
@@ -1213,6 +1217,14 @@ export class ViewConfigPanelComponent {
     aggregates = [];
     showAggregateDialog = false;
     editingAggregate = null;
+    // Saved filter state for mode switching (BUG-006: preserve both modes' data)
+    savedSmartFilterPrompt = '';
+    savedTraditionalFilter = createEmptyFilter();
+    // Filter mode switch confirmation (BUG-006)
+    showFilterModeSwitchConfirm = false;
+    pendingFilterModeSwitch = null;
+    // Local saving guard (BUG-003: race condition on double-click)
+    _localSaving = false;
     // UI state
     activeTab = 'columns';
     isSaving = false;
@@ -1335,15 +1347,24 @@ export class ViewConfigPanelComponent {
     ngOnChanges(changes) {
         // Reset to first tab and clear search when panel opens
         if (changes['isOpen'] && this.isOpen) {
-            this.activeTab = 'columns';
+            // BUG-011: If DefaultSaveAsNew is set, open on Settings tab with name focused
+            this.activeTab = this.DefaultSaveAsNew ? 'settings' : 'columns';
             this.columnSearchText = '';
             this.formatEditingColumn = null;
+            this._localSaving = false;
             // Also close any open aggregate dialog
             this.showAggregateDialog = false;
             this.editingAggregate = null;
+            // Close filter mode switch confirm
+            this.showFilterModeSwitchConfirm = false;
+            this.pendingFilterModeSwitch = null;
             // Re-initialize from entity to get fresh state
             this.initializeFromEntity();
         }
+        // BUG-003: Reset local saving guard when isSaving transitions from true to false
+        if (changes['isSaving'] && !this.isSaving && changes['isSaving'].previousValue === true) {
+            this._localSaving = false;
+        }
         if (changes['entity'] || changes['viewEntity'] || changes['currentGridState']) {
             this.initializeFromEntity();
         }
@@ -2221,13 +2242,58 @@ export class ViewConfigPanelComponent {
     hasActiveFilters() {
         return this.filterState?.filters?.length > 0;
     }
+    // ========================================
+    // VALIDATION (BUG-004)
+    // ========================================
+    /**
+     * Get validation errors for the current form state
+     */
+    get ValidationErrors() {
+        const errors = [];
+        if (!this.viewName || !this.viewName.trim()) {
+            errors.push('View name is required');
+        }
+        if (this.visibleColumns.length === 0) {
+            errors.push('At least one column must be visible');
+        }
+        return errors;
+    }
+    /**
+     * Whether the form is valid for saving
+     */
+    get IsValid() {
+        return this.ValidationErrors.length === 0;
+    }
+    /**
+     * Whether the form is valid for save-as-new (name can default to 'New View')
+     */
+    get IsValidForSaveAsNew() {
+        return this.visibleColumns.length > 0;
+    }
+    /**
+     * Build a ViewConfigSummary for quick-save preview (F-003)
+     */
+    BuildSummary() {
+        return {
+            ColumnCount: this.visibleColumns.length,
+            FilterCount: this.filterMode === 'traditional' ? this.getFilterCount() : 0,
+            SortCount: this.sortItems.length,
+            SmartFilterActive: this.smartFilterEnabled && !!this.smartFilterPrompt.trim(),
+            SmartFilterPrompt: this.smartFilterPrompt,
+            AggregateCount: this.aggregates.filter(a => a.enabled !== false).length
+        };
+    }
     /**
      * Save the view
      */
     onSave() {
-        // Guard against double-clicks or rapid repeated calls
-        if (this.isSaving)
+        // BUG-003: Guard against double-clicks with local flag
+        if (this.isSaving || this._localSaving)
+            return;
+        // BUG-004: Validate before saving
+        if (!this.IsValid)
             return;
+        this._localSaving = true;
         this.save.emit({
             name: this.viewName,
             description: this.viewDescription,
@@ -2247,9 +2313,13 @@ export class ViewConfigPanelComponent {
      * Save as a new view
      */
     onSaveAsNew() {
-        // Guard against double-clicks or rapid repeated calls
-        if (this.isSaving)
+        // BUG-003: Guard against double-clicks with local flag
+        if (this.isSaving || this._localSaving)
+            return;
+        // BUG-004: Validate (name defaults to 'New View' if empty)
+        if (!this.IsValidForSaveAsNew)
             return;
+        this._localSaving = true;
         this.save.emit({
             name: this.viewName || 'New View',
             description: this.viewDescription,
@@ -2270,9 +2340,10 @@ export class ViewConfigPanelComponent {
      * Used for dynamic/default views that don't have a stored view entity
      */
     onSaveDefaults() {
-        // Guard against double-clicks or rapid repeated calls
-        if (this.isSaving)
+        // BUG-003: Guard against double-clicks with local flag
+        if (this.isSaving || this._localSaving)
             return;
+        this._localSaving = true;
         this.saveDefaults.emit({
             name: 'Default',
             description: '',
@@ -2288,13 +2359,34 @@ export class ViewConfigPanelComponent {
             aggregatesConfig: this.buildAggregatesConfig()
         });
     }
+    // Delete confirmation state
+    showDeleteConfirm = false;
     /**
-     * Delete the view
+     * Delete the view - shows confirmation dialog
      */
     onDelete() {
-        if (confirm('Are you sure you want to delete this view?')) {
-            this.delete.emit();
-        }
+        this.showDeleteConfirm = true;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Confirmed delete from dialog
+     */
+    OnDeleteConfirmed() {
+        this.showDeleteConfirm = false;
+        this.delete.emit();
+    }
+    /**
+     * Cancelled delete from dialog
+     */
+    OnDeleteCancelled() {
+        this.showDeleteConfirm = false;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Duplicate the current view (F-005)
+     */
+    OnDuplicate() {
+        this.duplicate.emit();
     }
     /**
      * Set the active tab
@@ -2306,22 +2398,73 @@ export class ViewConfigPanelComponent {
     }
     /**
      * Set the filter mode (smart or traditional)
-     * When switching modes, clear the other mode's settings
+     * BUG-006: Shows confirmation when switching if active mode has data
      */
     setFilterMode(mode) {
         if (this.filterMode === mode)
             return;
+        // Check if current mode has data that would be lost
+        const currentModeHasData = this.currentFilterModeHasData();
+        if (currentModeHasData) {
+            // Show confirmation dialog before switching
+            this.pendingFilterModeSwitch = mode;
+            this.showFilterModeSwitchConfirm = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        this.applyFilterModeSwitch(mode);
+    }
+    /**
+     * Check if the current filter mode has user-entered data
+     */
+    currentFilterModeHasData() {
+        if (this.filterMode === 'smart') {
+            return !!this.smartFilterPrompt.trim();
+        }
+        else {
+            return this.getFilterCount() > 0;
+        }
+    }
+    /**
+     * Confirm the filter mode switch (called from ConfirmDialog)
+     */
+    OnFilterModeSwitchConfirmed() {
+        if (this.pendingFilterModeSwitch) {
+            this.applyFilterModeSwitch(this.pendingFilterModeSwitch);
+        }
+        this.showFilterModeSwitchConfirm = false;
+        this.pendingFilterModeSwitch = null;
+    }
+    /**
+     * Cancel the filter mode switch (called from ConfirmDialog)
+     */
+    OnFilterModeSwitchCancelled() {
+        this.showFilterModeSwitchConfirm = false;
+        this.pendingFilterModeSwitch = null;
+    }
+    /**
+     * Apply the filter mode switch - saves current mode data and restores target mode data
+     */
+    applyFilterModeSwitch(mode) {
+        // Save current mode's data before switching
+        if (this.filterMode === 'smart') {
+            this.savedSmartFilterPrompt = this.smartFilterPrompt;
+        }
+        else {
+            this.savedTraditionalFilter = this.filterState;
+        }
         this.filterMode = mode;
-        // When switching to smart mode, clear traditional filters and enable smart filter
+        // Restore target mode's saved data or clear
         if (mode === 'smart') {
             this.smartFilterEnabled = true;
+            this.smartFilterPrompt = this.savedSmartFilterPrompt;
             this.filterState = createEmptyFilter();
         }
-        // When switching to traditional mode, disable smart filter and clear its prompt
         else {
             this.smartFilterEnabled = false;
             this.smartFilterPrompt = '';
             this.smartFilterExplanation = '';
+            this.filterState = this.savedTraditionalFilter;
         }
         this.cdr.detectChanges();
     }
@@ -2457,7 +2600,7 @@ export class ViewConfigPanelComponent {
         }
     }
     /**
-     * Toggle aggregate enabled state
+     * Toggle aggregate enabled state (BUG-012: immutable update, no excessive logging)
      */
     toggleAggregateEnabled(aggregate, event) {
         // Stop event propagation to prevent any parent handlers
@@ -2465,44 +2608,28 @@ export class ViewConfigPanelComponent {
             event.preventDefault();
             event.stopPropagation();
         }
-        console.log('[ViewConfigPanel] toggleAggregateEnabled called:', {
-            aggregateId: aggregate.id,
-            aggregateLabel: aggregate.label,
-            currentEnabled: aggregate.enabled,
-            allAggregates: this.aggregates.map(a => ({ id: a.id, label: a.label, enabled: a.enabled }))
-        });
-        // Try to find by ID first, fall back to object reference if ID is missing
+        // Find by ID first, fall back to object reference or label
         let index = -1;
         if (aggregate.id) {
             index = this.aggregates.findIndex(a => a.id === aggregate.id);
         }
-        // Fallback: find by object reference or label
         if (index < 0) {
             index = this.aggregates.indexOf(aggregate);
         }
         if (index < 0 && aggregate.label) {
             index = this.aggregates.findIndex(a => a.label === aggregate.label && a.expression === aggregate.expression);
         }
-        console.log('[ViewConfigPanel] Found index:', index, 'in array of length:', this.aggregates.length);
         if (index >= 0) {
-            // Create a new object with toggled enabled state to ensure change detection
-            const currentEnabled = this.aggregates[index].enabled;
-            const newEnabledState = currentEnabled === false ? true : false;
-            console.log('[ViewConfigPanel] Toggling from', currentEnabled, 'to', newEnabledState);
             const updatedAggregate = {
                 ...this.aggregates[index],
-                enabled: newEnabledState
+                enabled: this.aggregates[index].enabled === false
             };
             // Replace entire array to trigger change detection
             const newAggregates = [...this.aggregates];
             newAggregates[index] = updatedAggregate;
             this.aggregates = newAggregates;
-            console.log('[ViewConfigPanel] After toggle, aggregates:', this.aggregates.map(a => ({ id: a.id, label: a.label, enabled: a.enabled })));
             this.cdr.detectChanges();
         }
-        else {
-            console.error('[ViewConfigPanel] Could not find aggregate in array:', aggregate);
-        }
     }
     /**
      * Move aggregate up in order
@@ -2562,7 +2689,7 @@ export class ViewConfigPanelComponent {
     static ɵfac = function ViewConfigPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ViewConfigPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewConfigPanelComponent, selectors: [["mj-view-config-panel"]], hostBindings: function ViewConfigPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function ViewConfigPanelComponent_keydown_escape_HostBindingHandler() { return ctx.handleEscape(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { entity: "entity", viewEntity: "viewEntity", isOpen: "isOpen", currentGridState: "currentGridState", sampleData: "sampleData", externalFilterState: "externalFilterState", isSaving: "isSaving" }, outputs: { close: "close", save: "save", saveDefaults: "saveDefaults", delete: "delete", openFilterDialogRequest: "openFilterDialogRequest" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 44, vars: 44, consts: [[1, "panel-backdrop"], [1, "config-panel"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "panel-header"], [1, "header-title"], [1, "fa-solid", "fa-sliders-h"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tab-nav"], [1, "tab-btn", 3, "click", "title"], [1, "fa-solid", "fa-columns"], [1, "fa-solid", "fa-arrow-up-wide-short"], [1, "tab-badge"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-chart-simple"], [1, "fa-solid", "fa-cog"], [1, "panel-content"], [1, "tab-content"], [1, "format-editor"], [1, "panel-footer"], [1, "footer-left"], [1, "footer-btn", "save-btn", "primary", 3, "disabled"], [1, "footer-btn", "save-as-btn", 3, "disabled"], [1, "footer-btn", "cancel-btn", 3, "click"], [3, "Close", "Save", "Entity", "Aggregate", "IsOpen"], [1, "panel-backdrop", 3, "click"], [1, "config-section"], [1, "section-header"], [1, "fa-solid", "fa-eye"], [1, "column-count"], [1, "column-list", "visible-columns"], [1, "empty-list"], [1, "fa-solid", "fa-eye-slash"], [1, "column-search"], [1, "column-list", "hidden-columns"], [1, "column-item", "hidden"], [1, "drop-indicator"], ["draggable", "true", 1, "column-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "column-name"], [1, "fa-solid", "fa-pen-nib", "alias-indicator", 3, "title"], ["title", "Custom formatting applied", 1, "fa-solid", "fa-paintbrush", "format-indicator"], [1, "column-actions"], ["title", "Format column", 1, "action-btn", "format-btn", 3, "click"], [1, "fa-solid", "fa-paintbrush"], ["title", "Move up", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["title", "Hide column", 1, "action-btn", "hide-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search columns...", 3, "ngModelChange", "ngModel"], ["title", "Show column", 1, "action-btn", "show-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-check-circle"], [1, "format-editor-header"], [1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "format-editor-title"], [1, "format-section"], [1, "format-section-header"], [1, "fa-solid", "fa-pen-nib"], [1, "format-row"], ["type", "text", 1, "format-input", 3, "input", "value", "placeholder"], [1, "format-row", "alias-info"], [1, "format-preview-section"], [1, "preview-header"], [1, "preview-table"], [1, "preview-header-cell"], [1, "preview-cell", 3, "text-align", "font-weight", "font-style", "text-decoration", "color", "background-color"], [1, "fa-solid", "fa-hashtag"], [1, "format-select", 3, "ngModelChange", "ngModel"], ["value", "auto"], ["value", "text"], ["value", "number"], ["value", "currency"], ["value", "percent"], ["value", "date"], ["value", "datetime"], ["value", "boolean"], [1, "fa-solid", "fa-align-left"], [1, "alignment-toggle"], ["title", "Left", 1, "align-btn", 3, "click"], ["title", "Center", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-center"], ["title", "Right", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-right"], [1, "fa-solid", "fa-heading"], [1, "style-buttons"], ["title", "Bold", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-bold"], ["title", "Italic", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-italic"], ["title", "Underline", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-underline"], ["type", "color", 1, "color-input", 3, "input", "value"], [1, "fa-solid", "fa-table-cells"], [1, "format-actions"], [1, "clear-format-btn", 3, "click"], [1, "fa-solid", "fa-eraser"], [1, "muted-text"], ["title", "Clear alias", 1, "clear-alias-btn", 3, "click"], [1, "preview-cell"], [1, "fa-solid", "fa-sliders"], ["type", "number", "min", "0", "max", "10", 1, "format-input", "small", 3, "ngModelChange", "ngModel"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], ["value", "USD"], ["value", "EUR"], ["value", "GBP"], ["value", "JPY"], ["value", "CAD"], ["value", "AUD"], [1, "fa-solid", "fa-calendar"], ["value", "short"], ["value", "short-weekday"], ["value", "medium"], ["value", "medium-weekday"], ["value", "long"], ["value", "long-weekday"], [1, "fa-solid", "fa-toggle-on"], ["type", "text", "placeholder", "Yes", 1, "format-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "No", 1, "format-input", 3, "ngModelChange", "ngModel"], ["value", "checkbox"], ["value", "icon"], [1, "config-section", "sorting-section"], [1, "sorting-header"], [1, "sorting-description"], ["title", "Add another sort level", 1, "add-sort-btn", 3, "click", "disabled"], [1, "sort-empty-state"], [1, "sort-items-list"], [1, "sort-hint"], [1, "sort-drop-indicator"], ["draggable", "true", 1, "sort-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "sort-priority-badge"], ["title", "Drag to reorder", 1, "sort-drag-handle"], [1, "sort-field-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], [1, "sort-direction-toggle"], ["title", "Ascending (A-Z, 1-9)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Descending (Z-A, 9-1)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-down"], ["title", "Remove sort level", 1, "sort-remove-btn", 3, "click", "disabled"], [1, "sort-empty-hint"], [1, "filter-mode-selector"], [1, "filter-mode-btn", 3, "click", "disabled"], [1, "mode-icon"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "mode-content"], [1, "mode-title"], [1, "mode-subtitle"], [1, "fa-solid", "fa-check", "mode-check"], [1, "config-section", "smart-filter-section"], [1, "config-section", "traditional-filter-section"], [1, "smart-filter-input-container"], [1, "smart-filter-icon"], ["id", "smartFilterPrompt", "placeholder", "Describe what you're looking for...", "rows", "3", 1, "smart-filter-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "smart-filter-explanation"], [1, "smart-filter-examples"], [1, "examples-header"], [1, "fa-solid", "fa-lightbulb"], [1, "example-chips"], [1, "example-chip", 3, "click", "disabled"], [1, "fa-regular", "fa-calendar"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "smart-filter-tip"], [1, "fa-solid", "fa-robot"], [1, "filter-summary-container"], [1, "filter-summary"], [1, "summary-info"], [1, "summary-text", "no-filters"], [1, "summary-actions"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn"], ["title", "Edit filters", 1, "summary-btn", "edit-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-pen"], [1, "traditional-filter-tip"], [1, "filter-badge"], [1, "summary-text"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn", 3, "click"], [1, "config-section", "aggregates-section"], [1, "aggregates-header"], [1, "aggregates-description"], ["title", "Add a new aggregate", 1, "add-aggregate-btn", 3, "click", "disabled"], [1, "aggregates-empty-state"], [1, "aggregates-tip"], [1, "aggregates-list"], [1, "aggregate-item", 3, "disabled"], [1, "aggregates-summary"], [1, "summary-item"], [1, "fa-solid", "fa-id-card"], [1, "fa-solid", "fa-table-columns"], [1, "aggregate-item"], [1, "agg-icon"], [1, "agg-content"], [1, "agg-label"], [1, "agg-details"], [1, "agg-type"], ["title", "AI-generated", 1, "agg-smart-badge"], [1, "agg-actions"], ["title", "Move up", 1, "agg-action-btn", 3, "click", "disabled"], ["title", "Move down", 1, "agg-action-btn", 3, "click", "disabled"], [1, "agg-action-btn", "toggle-btn", 3, "click", "disabled", "title"], ["title", "Edit", 1, "agg-action-btn", "edit-btn", 3, "click", "disabled"], ["title", "Remove", 1, "agg-action-btn", "remove-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], [1, "empty-hint"], [1, "form-group"], ["for", "viewName"], ["id", "viewName", "type", "text", "placeholder", "Enter view name...", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["for", "viewDescription"], ["id", "viewDescription", "placeholder", "Describe this view...", "rows", "3", 1, "form-input", "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "fa-solid", "fa-share-alt"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], [1, "checkbox-text"], [1, "config-section", "danger-zone"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "delete-btn", 3, "click"], [1, "footer-btn", "save-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"], [1, "footer-btn", "save-as-btn", 3, "click", "disabled"]], template: function ViewConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { entity: "entity", viewEntity: "viewEntity", isOpen: "isOpen", currentGridState: "currentGridState", sampleData: "sampleData", externalFilterState: "externalFilterState", DefaultSaveAsNew: "DefaultSaveAsNew", isSaving: "isSaving" }, outputs: { close: "close", save: "save", saveDefaults: "saveDefaults", delete: "delete", openFilterDialogRequest: "openFilterDialogRequest", duplicate: "duplicate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 44, vars: 45, consts: [[1, "panel-backdrop"], [1, "config-panel"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "panel-header"], [1, "header-title"], [1, "fa-solid", "fa-sliders-h"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tab-nav"], [1, "tab-btn", 3, "click", "title"], [1, "fa-solid", "fa-columns"], [1, "fa-solid", "fa-arrow-up-wide-short"], [1, "tab-badge"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-chart-simple"], [1, "tab-btn", 3, "active", "title"], [1, "panel-content"], [1, "tab-content"], [1, "format-editor"], [1, "validation-banner"], [1, "panel-footer"], [1, "footer-left"], [1, "footer-btn", "save-btn", "primary", 3, "disabled"], [1, "footer-btn", "cancel-btn", 3, "click"], [3, "Close", "Save", "Entity", "Aggregate", "IsOpen"], ["Title", "Delete View", "DetailMessage", "This action cannot be undone. All users who have access to this view will lose it.", "ConfirmText", "Delete", "ConfirmStyle", "danger", "Icon", "fa-solid fa-trash", 3, "Confirmed", "Cancelled", "IsOpen", "Message"], ["Title", "Switch Filter Mode", "DetailMessage", "You can switch back later, but the current filter data will be lost.", "ConfirmText", "Switch", "ConfirmStyle", "primary", "Icon", "fa-solid fa-exchange-alt", 3, "Confirmed", "Cancelled", "IsOpen", "Message"], [1, "panel-backdrop", 3, "click"], [1, "fa-solid", "fa-cog"], [1, "config-section"], [1, "section-header"], [1, "fa-solid", "fa-eye"], [1, "column-count"], [1, "column-list", "visible-columns"], [1, "empty-list"], [1, "fa-solid", "fa-eye-slash"], [1, "column-search"], [1, "column-list", "hidden-columns"], [1, "column-item", "hidden"], [1, "drop-indicator"], ["draggable", "true", 1, "column-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "column-name"], [1, "fa-solid", "fa-pen-nib", "alias-indicator", 3, "title"], ["title", "Custom formatting applied", 1, "fa-solid", "fa-paintbrush", "format-indicator"], [1, "column-actions"], ["title", "Format column", 1, "action-btn", "format-btn", 3, "click"], [1, "fa-solid", "fa-paintbrush"], ["title", "Move up", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["title", "Hide column", 1, "action-btn", "hide-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search columns...", 3, "ngModelChange", "ngModel"], ["title", "Show column", 1, "action-btn", "show-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-check-circle"], [1, "format-editor-header"], [1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "format-editor-title"], [1, "format-section"], [1, "format-section-header"], [1, "fa-solid", "fa-pen-nib"], [1, "format-row"], ["type", "text", 1, "format-input", 3, "input", "value", "placeholder"], [1, "format-row", "alias-info"], [1, "format-preview-section"], [1, "preview-header"], [1, "preview-table"], [1, "preview-header-cell"], [1, "preview-cell", 3, "text-align", "font-weight", "font-style", "text-decoration", "color", "background-color"], [1, "fa-solid", "fa-hashtag"], [1, "format-select", 3, "ngModelChange", "ngModel"], ["value", "auto"], ["value", "text"], ["value", "number"], ["value", "currency"], ["value", "percent"], ["value", "date"], ["value", "datetime"], ["value", "boolean"], [1, "fa-solid", "fa-align-left"], [1, "alignment-toggle"], ["title", "Left", 1, "align-btn", 3, "click"], ["title", "Center", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-center"], ["title", "Right", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-right"], [1, "fa-solid", "fa-heading"], [1, "style-buttons"], ["title", "Bold", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-bold"], ["title", "Italic", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-italic"], ["title", "Underline", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-underline"], ["type", "color", 1, "color-input", 3, "input", "value"], [1, "fa-solid", "fa-table-cells"], [1, "format-actions"], [1, "clear-format-btn", 3, "click"], [1, "fa-solid", "fa-eraser"], [1, "muted-text"], ["title", "Clear alias", 1, "clear-alias-btn", 3, "click"], [1, "preview-cell"], [1, "fa-solid", "fa-sliders"], ["type", "number", "min", "0", "max", "10", 1, "format-input", "small", 3, "ngModelChange", "ngModel"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], ["value", "USD"], ["value", "EUR"], ["value", "GBP"], ["value", "JPY"], ["value", "CAD"], ["value", "AUD"], [1, "fa-solid", "fa-calendar"], ["value", "short"], ["value", "short-weekday"], ["value", "medium"], ["value", "medium-weekday"], ["value", "long"], ["value", "long-weekday"], [1, "fa-solid", "fa-toggle-on"], ["type", "text", "placeholder", "Yes", 1, "format-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "No", 1, "format-input", 3, "ngModelChange", "ngModel"], ["value", "checkbox"], ["value", "icon"], [1, "config-section", "sorting-section"], [1, "sorting-header"], [1, "sorting-description"], ["title", "Add another sort level", 1, "add-sort-btn", 3, "click", "disabled"], [1, "sort-empty-state"], [1, "sort-items-list"], [1, "sort-hint"], [1, "sort-drop-indicator"], ["draggable", "true", 1, "sort-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "sort-priority-badge"], ["title", "Drag to reorder", 1, "sort-drag-handle"], [1, "sort-field-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], [1, "sort-direction-toggle"], ["title", "Ascending (A-Z, 1-9)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Descending (Z-A, 9-1)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-down"], ["title", "Remove sort level", 1, "sort-remove-btn", 3, "click", "disabled"], [1, "sort-empty-hint"], [1, "filter-mode-selector"], [1, "filter-mode-btn", 3, "click", "disabled"], [1, "mode-icon"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "mode-content"], [1, "mode-title"], [1, "mode-subtitle"], [1, "fa-solid", "fa-check", "mode-check"], [1, "config-section", "smart-filter-section"], [1, "config-section", "traditional-filter-section"], [1, "smart-filter-input-container"], [1, "smart-filter-icon"], ["id", "smartFilterPrompt", "placeholder", "Describe what you're looking for...", "rows", "3", 1, "smart-filter-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "smart-filter-explanation"], [1, "smart-filter-examples"], [1, "examples-header"], [1, "fa-solid", "fa-lightbulb"], [1, "example-chips"], [1, "example-chip", 3, "click", "disabled"], [1, "fa-regular", "fa-calendar"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "smart-filter-tip"], [1, "fa-solid", "fa-robot"], [1, "filter-summary-container"], [1, "filter-summary"], [1, "summary-info"], [1, "summary-text", "no-filters"], [1, "summary-actions"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn"], ["title", "Edit filters", 1, "summary-btn", "edit-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-pen"], [1, "traditional-filter-tip"], [1, "filter-badge"], [1, "summary-text"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn", 3, "click"], [1, "config-section", "aggregates-section"], [1, "aggregates-header"], [1, "aggregates-description"], ["title", "Add a new aggregate", 1, "add-aggregate-btn", 3, "click", "disabled"], [1, "aggregates-empty-state"], [1, "aggregates-tip"], [1, "aggregates-list"], [1, "aggregate-item", 3, "disabled"], [1, "aggregates-summary"], [1, "summary-item"], [1, "fa-solid", "fa-id-card"], [1, "fa-solid", "fa-table-columns"], [1, "aggregate-item"], [1, "agg-icon"], [1, "agg-content"], [1, "agg-label"], [1, "agg-details"], [1, "agg-type"], ["title", "AI-generated", 1, "agg-smart-badge"], [1, "agg-actions"], ["title", "Move up", 1, "agg-action-btn", 3, "click", "disabled"], ["title", "Move down", 1, "agg-action-btn", 3, "click", "disabled"], [1, "agg-action-btn", "toggle-btn", 3, "click", "disabled", "title"], ["title", "Edit", 1, "agg-action-btn", "edit-btn", 3, "click", "disabled"], ["title", "Remove", 1, "agg-action-btn", "remove-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], [1, "empty-hint"], [1, "form-group"], ["for", "viewName"], ["id", "viewName", "type", "text", "placeholder", "Enter view name...", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], [1, "validation-error"], ["for", "viewDescription"], ["id", "viewDescription", "placeholder", "Describe this view...", "rows", "3", 1, "form-input", "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "fa-solid", "fa-share-alt"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], [1, "checkbox-text"], [1, "config-section", "danger-zone"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "delete-btn", 3, "click"], [1, "footer-btn", "save-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function ViewConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ViewConfigPanelComponent_Conditional_0_Template, 1, 0, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
             i0.ɵɵlistener("mousedown", function ViewConfigPanelComponent_Template_div_mousedown_2_listener($event) { return ctx.onResizeStart($event); });
@@ -2599,30 +2726,33 @@ export class ViewConfigPanelComponent {
             i0.ɵɵconditionalCreate(24, ViewConfigPanelComponent_Conditional_24_Template, 2, 0, "span");
             i0.ɵɵconditionalCreate(25, ViewConfigPanelComponent_Conditional_25_Template, 2, 1, "span", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(26, "button", 10);
-            i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_26_listener() { return ctx.setActiveTab("settings"); });
-            i0.ɵɵelement(27, "i", 16);
-            i0.ɵɵconditionalCreate(28, ViewConfigPanelComponent_Conditional_28_Template, 2, 0, "span");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 17);
-            i0.ɵɵconditionalCreate(30, ViewConfigPanelComponent_Conditional_30_Template, 24, 5, "div", 18);
-            i0.ɵɵconditionalCreate(31, ViewConfigPanelComponent_Conditional_31_Template, 108, 41, "div", 19);
-            i0.ɵɵconditionalCreate(32, ViewConfigPanelComponent_Conditional_32_Template, 11, 2, "div", 18);
-            i0.ɵɵconditionalCreate(33, ViewConfigPanelComponent_Conditional_33_Template, 22, 10, "div", 18);
-            i0.ɵɵconditionalCreate(34, ViewConfigPanelComponent_Conditional_34_Template, 15, 2, "div", 18);
-            i0.ɵɵconditionalCreate(35, ViewConfigPanelComponent_Conditional_35_Template, 27, 7, "div", 18);
+            i0.ɵɵconditionalCreate(26, ViewConfigPanelComponent_Conditional_26_Template, 3, 4, "button", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "div", 20)(37, "div", 21);
-            i0.ɵɵconditionalCreate(38, ViewConfigPanelComponent_Conditional_38_Template, 4, 3, "button", 22);
-            i0.ɵɵconditionalCreate(39, ViewConfigPanelComponent_Conditional_39_Template, 8, 6);
-            i0.ɵɵconditionalCreate(40, ViewConfigPanelComponent_Conditional_40_Template, 4, 2, "button", 23);
+            i0.ɵɵelementStart(27, "div", 17);
+            i0.ɵɵconditionalCreate(28, ViewConfigPanelComponent_Conditional_28_Template, 24, 5, "div", 18);
+            i0.ɵɵconditionalCreate(29, ViewConfigPanelComponent_Conditional_29_Template, 108, 41, "div", 19);
+            i0.ɵɵconditionalCreate(30, ViewConfigPanelComponent_Conditional_30_Template, 11, 2, "div", 18);
+            i0.ɵɵconditionalCreate(31, ViewConfigPanelComponent_Conditional_31_Template, 22, 10, "div", 18);
+            i0.ɵɵconditionalCreate(32, ViewConfigPanelComponent_Conditional_32_Template, 15, 2, "div", 18);
+            i0.ɵɵconditionalCreate(33, ViewConfigPanelComponent_Conditional_33_Template, 28, 10, "div", 18);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "button", 24);
-            i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_41_listener() { return ctx.onClose(); });
-            i0.ɵɵtext(42, " Cancel ");
+            i0.ɵɵconditionalCreate(34, ViewConfigPanelComponent_Conditional_34_Template, 4, 0, "div", 20);
+            i0.ɵɵelementStart(35, "div", 21)(36, "div", 22);
+            i0.ɵɵconditionalCreate(37, ViewConfigPanelComponent_Conditional_37_Template, 4, 3, "button", 23);
+            i0.ɵɵconditionalCreate(38, ViewConfigPanelComponent_Conditional_38_Template, 4, 3, "button", 23);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "button", 24);
+            i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_39_listener() { return ctx.onClose(); });
+            i0.ɵɵtext(40, " Cancel ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(43, "mj-aggregate-setup-dialog", 25);
-            i0.ɵɵlistener("Close", function ViewConfigPanelComponent_Template_mj_aggregate_setup_dialog_Close_43_listener() { return ctx.closeAggregateDialog(); })("Save", function ViewConfigPanelComponent_Template_mj_aggregate_setup_dialog_Save_43_listener($event) { return ctx.onAggregateSave($event); });
+            i0.ɵɵelementStart(41, "mj-aggregate-setup-dialog", 25);
+            i0.ɵɵlistener("Close", function ViewConfigPanelComponent_Template_mj_aggregate_setup_dialog_Close_41_listener() { return ctx.closeAggregateDialog(); })("Save", function ViewConfigPanelComponent_Template_mj_aggregate_setup_dialog_Save_41_listener($event) { return ctx.onAggregateSave($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "mj-ev-confirm-dialog", 26);
+            i0.ɵɵlistener("Confirmed", function ViewConfigPanelComponent_Template_mj_ev_confirm_dialog_Confirmed_42_listener() { return ctx.OnDeleteConfirmed(); })("Cancelled", function ViewConfigPanelComponent_Template_mj_ev_confirm_dialog_Cancelled_42_listener() { return ctx.OnDeleteCancelled(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(43, "mj-ev-confirm-dialog", 27);
+            i0.ɵɵlistener("Confirmed", function ViewConfigPanelComponent_Template_mj_ev_confirm_dialog_Confirmed_43_listener() { return ctx.OnFilterModeSwitchConfirmed(); })("Cancelled", function ViewConfigPanelComponent_Template_mj_ev_confirm_dialog_Cancelled_43_listener() { return ctx.OnFilterModeSwitchCancelled(); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
@@ -2658,35 +2788,36 @@ export class ViewConfigPanelComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.enabledAggregatesCount > 0 ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("active", ctx.activeTab === "settings");
-            i0.ɵɵproperty("title", ctx.isIconOnlyMode ? "Settings" : "");
+            i0.ɵɵconditional(ctx.viewEntity ? 26 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.isIconOnlyMode ? 28 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.activeTab === "columns" && !ctx.formatEditingColumn ? 30 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "columns" && !ctx.formatEditingColumn ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "columns" && ctx.formatEditingColumn ? 31 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "columns" && ctx.formatEditingColumn ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "sorting" ? 32 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "sorting" ? 30 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "filters" ? 33 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "filters" ? 31 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "aggregates" ? 34 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "aggregates" ? 32 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "settings" ? 35 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ? 38 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "settings" ? 33 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.viewEntity ? 39 : -1);
+            i0.ɵɵconditional(ctx.ValidationErrors.length > 0 && ctx.visibleColumns.length === 0 ? 34 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ? 37 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ? 40 : -1);
+            i0.ɵɵconditional(!ctx.viewEntity ? 38 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("Entity", ctx.entity)("Aggregate", ctx.editingAggregate)("IsOpen", ctx.showAggregateDialog);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel, i2.AggregateSetupDialogComponent], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: 100%;\n  background: white;\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n  transition: none;\n  user-select: none;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n  width: 3px;\n  height: 40px;\n  background: #cbd5e1;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-grip[_ngcontent-%COMP%] {\n  opacity: 1;\n  background: #1976d2;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n\n\n.tab-nav[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 2px solid transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1976d2;\n  border-bottom-color: #1976d2;\n  background: transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: 4px;\n}\n\n\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  padding: 12px 8px;\n  gap: 4px;\n}\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  margin-left: 0;\n  padding: 2px 4px;\n  font-size: 9px;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: #e3f2fd;\n  color: #1976d2;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n}\n\n\n\n.sort-config[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.sort-field-select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n\n\n\n.add-sort-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.sort-items-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n\n\n.sort-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: #e3f2fd;\n  border-color: #1976d2;\n}\n\n.sort-item.drop-target[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n}\n\n\n\n.sort-priority-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  height: 24px;\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 700;\n  color: white;\n  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n}\n\n\n\n.sort-drag-handle[_ngcontent-%COMP%] {\n  color: #bdbdbd;\n  cursor: grab;\n  padding: 4px;\n  transition: color 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sort-drag-handle[_ngcontent-%COMP%]:hover {\n  color: #757575;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%]   .sort-drag-handle[_ngcontent-%COMP%] {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n\n\n.sort-field-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 120px;\n  padding: 8px 10px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 13px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:disabled {\n  background: #f5f5f5;\n  color: #999;\n  cursor: not-allowed;\n}\n\n\n\n.sort-remove-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #bdbdbd;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n.sort-drop-indicator[_ngcontent-%COMP%] {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: _ngcontent-%COMP%_sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_sortDropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.sort-hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 10px 12px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.sort-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n.sorting-section[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n.sorting-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.sorting-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n\n\n.sort-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.sort-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.sort-empty-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n\n\n.column-list[_ngcontent-%COMP%] {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.column-list.visible-columns[_ngcontent-%COMP%] {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.column-list.hidden-columns[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%]:last-child {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  margin-bottom: 0;\n}\n\n.column-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border-bottom: 1px solid #f0f0f0;\n  transition: background 0.1s ease;\n  position: relative;\n}\n\n.column-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n  background: #fafafa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n}\n\n\n\n\n\n\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: _ngcontent-%COMP%_dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_dropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.column-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: #e3f2fd;\n}\n\n\n\n.column-item.drag-over[_ngcontent-%COMP%] {\n  background: #f5f7fa;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  cursor: grab;\n  color: #999;\n  padding: 4px;\n  transition: color 0.15s ease;\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n  color: #666;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n.column-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.column-name[_ngcontent-%COMP%]   .format-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #1976d2;\n  opacity: 0.7;\n}\n\n.column-name[_ngcontent-%COMP%]   .alias-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #7b1fa2;\n  opacity: 0.8;\n}\n\n.column-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.action-btn.format-btn.has-format[_ngcontent-%COMP%] {\n  color: #1976d2;\n  background: #e3f2fd;\n}\n\n.empty-list[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 13px;\n}\n\n\n\n.column-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #999;\n  font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 14px;\n}\n\n\n\n\n\n\n.format-editor-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: white;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideInFromRight 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.format-back-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.format-header-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-child {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:last-child {\n  font-size: 12px;\n  color: #666;\n}\n\n.format-editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.preview-samples[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.preview-sample[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #94a3b8;\n  min-width: 60px;\n}\n\n.preview-value[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  font-family: 'SF Mono', 'Monaco', monospace;\n  color: #1e293b;\n}\n\n\n\n.format-type-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.format-type-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-type-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n\n.format-type-btn[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 8px;\n  border: 2px solid #e5e7eb;\n  border-radius: 10px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-type-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.format-type-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.format-type-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: #1d4ed8;\n}\n\n\n\n.format-options-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.format-options-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.format-option-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.format-option-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.format-option-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.format-option-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-option-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n}\n\n.format-option-row[_ngcontent-%COMP%]   .format-option-group[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.format-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n\n\n.alignment-options[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.align-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.style-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.style-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.style-toggle-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.color-picker-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.color-picker-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.color-picker-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #64748b;\n  min-width: 80px;\n}\n\n.color-picker-group[_ngcontent-%COMP%]   input[type=\"color\"][_ngcontent-%COMP%] {\n  width: 40px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.color-clear-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.color-clear-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #666;\n}\n\n\n\n.format-editor-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%] {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%] {\n  color: #c62828;\n  border-color: #c62828;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #c62828;\n  color: white;\n}\n\n\n\n.filter-summary-container[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: #f5f7fa;\n  border-radius: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  min-width: 20px;\n  text-align: center;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n  color: #999;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: #c62828;\n  border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #c62828;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n\n\n\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #d1d5db;\n  background: #f9fafb;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background: #f3f4f6;\n  color: #6b7280;\n  font-size: 16px;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  background: #3b82f6;\n  color: white;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-subtitle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6b7280;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-title[_ngcontent-%COMP%] {\n  color: #1d4ed8;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-check[_ngcontent-%COMP%] {\n  color: #3b82f6;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n  border: 1px solid #bae6fd;\n  border-radius: 12px;\n  margin-bottom: 16px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n  border-radius: 10px;\n  color: white;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  background: white;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 14px;\n  line-height: 1.5;\n  resize: none;\n  min-height: 60px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 12px;\n  background: #e3f2fd;\n  border-radius: 6px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  color: #1565c0;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 14px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n}\n\n.examples-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f59e0b;\n}\n\n.example-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  color: #4b5563;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #1d4ed8;\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #9ca3af;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.smart-filter-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.smart-filter-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n  margin-top: 12px;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%] {\n  background: #3b82f6;\n  color: white;\n  border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n  background: #f5f5f5;\n  color: #999;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 80px;\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n  padding-top: 16px;\n  border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  color: #c62828;\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #c62828;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #c62828;\n  background: transparent;\n  border-radius: 6px;\n  color: #c62828;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n  background: #c62828;\n  color: white;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.footer-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.format-editor[_ngcontent-%COMP%] {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.format-editor[_ngcontent-%COMP%]   .format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0 16px 0;\n  border-bottom: 1px solid #e0e0e0;\n  margin-bottom: 16px;\n}\n\n.format-editor[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.format-editor[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%]   .format-editor-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n\n\n.format-editor[_ngcontent-%COMP%]   .preview-table[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 12px;\n}\n\n.format-editor[_ngcontent-%COMP%]   .preview-header-cell[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  background: #f1f5f9;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%]   .preview-cell[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #333;\n}\n\n\n\n.format-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n\n\n.format-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n\n.format-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.format-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #555;\n  flex-shrink: 0;\n}\n\n\n\n.format-select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n  min-width: 120px;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n  width: 80px;\n}\n\n\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n  gap: 8px;\n}\n\n.format-row.alias-info[_ngcontent-%COMP%]   .muted-text[_ngcontent-%COMP%] {\n  color: #888;\n  font-size: 12px;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: #f0f0f0;\n  border-radius: 50%;\n  color: #888;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #c62828;\n}\n\n\n\n.color-input[_ngcontent-%COMP%] {\n  width: 50px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  background: white;\n}\n\n.color-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.align-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n\n\n.style-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.style-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.style-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n\n\n.format-section-collapsible[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  list-style: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::-webkit-details-marker {\n  display: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n  content: '\\f054';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  color: #999;\n  transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open][_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n  transform: rotate(90deg);\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.format-section-content[_ngcontent-%COMP%] {\n  padding: 14px;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n}\n\n\n\n.format-actions[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n  background: #fff5f5;\n  border-color: #f87171;\n  color: #dc2626;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.aggregates-section[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n.aggregates-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.aggregates-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n\n\n.add-aggregate-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 16px;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.aggregates-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n\n\n.aggregate-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  background: #f5f5f5;\n}\n\n\n\n.agg-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n  border-radius: 8px;\n  color: #1976d2;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%]   .agg-icon[_ngcontent-%COMP%] {\n  background: #f0f0f0;\n  color: #999;\n}\n\n\n\n.agg-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%]   .agg-label[_ngcontent-%COMP%] {\n  color: #888;\n}\n\n.agg-details[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #888;\n}\n\n.agg-type[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.agg-type[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.agg-smart-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n  border-radius: 4px;\n  color: #3b82f6;\n  font-size: 10px;\n}\n\n\n\n.agg-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.agg-action-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled[_ngcontent-%COMP%] {\n  color: #2e7d32;\n}\n\n.agg-action-btn.toggle-btn[_ngcontent-%COMP%]:not(.enabled) {\n  color: #bdbdbd;\n}\n\n.agg-action-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.agg-action-btn.remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n\n\n.aggregates-summary[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 14px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.summary-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 11px;\n}\n\n\n\n.aggregates-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.aggregates-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n\n\n.aggregates-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.aggregates-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n  .config-panel[_ngcontent-%COMP%] {\n    width: 100% !important;\n    max-width: 100vw !important;\n  }\n\n  \n\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 14px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .format-type-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n\n\n@media (min-width: 769px) and (max-width: 1200px) {\n  .config-panel[_ngcontent-%COMP%] {\n    max-width: min(600px, 80vw);\n  }\n}"] });
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("IsOpen", ctx.showDeleteConfirm)("Message", "Are you sure you want to delete '" + ctx.viewName + "'?");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("IsOpen", ctx.showFilterModeSwitchConfirm)("Message", ctx.filterMode === "smart" ? "Switching to Traditional mode will clear your smart filter prompt." : "Switching to Smart mode will clear your traditional filter rules.");
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel, i2.AggregateSetupDialogComponent, i3.ConfirmDialogComponent], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: 100%;\n  background: white;\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n  transition: none;\n  user-select: none;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n  background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n  width: 3px;\n  height: 40px;\n  background: #cbd5e1;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-grip[_ngcontent-%COMP%] {\n  opacity: 1;\n  background: #1976d2;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n\n\n.tab-nav[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 2px solid transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1976d2;\n  border-bottom-color: #1976d2;\n  background: transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: 4px;\n}\n\n\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  padding: 12px 8px;\n  gap: 4px;\n}\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  margin-left: 0;\n  padding: 2px 4px;\n  font-size: 9px;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: #e3f2fd;\n  color: #1976d2;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n}\n\n\n\n.sort-config[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.sort-field-select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n\n\n\n.add-sort-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.sort-items-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n\n\n.sort-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: #e3f2fd;\n  border-color: #1976d2;\n}\n\n.sort-item.drop-target[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n}\n\n\n\n.sort-priority-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  height: 24px;\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 700;\n  color: white;\n  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n}\n\n\n\n.sort-drag-handle[_ngcontent-%COMP%] {\n  color: #bdbdbd;\n  cursor: grab;\n  padding: 4px;\n  transition: color 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sort-drag-handle[_ngcontent-%COMP%]:hover {\n  color: #757575;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%]   .sort-drag-handle[_ngcontent-%COMP%] {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n\n\n.sort-field-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 120px;\n  padding: 8px 10px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 13px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:disabled {\n  background: #f5f5f5;\n  color: #999;\n  cursor: not-allowed;\n}\n\n\n\n.sort-remove-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #bdbdbd;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n.sort-drop-indicator[_ngcontent-%COMP%] {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: _ngcontent-%COMP%_sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_sortDropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.sort-hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 10px 12px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.sort-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n.sorting-section[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n.sorting-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.sorting-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n\n\n.sort-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.sort-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.sort-empty-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n\n\n.column-list[_ngcontent-%COMP%] {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.column-list.visible-columns[_ngcontent-%COMP%] {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.column-list.hidden-columns[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%]:last-child {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  margin-bottom: 0;\n}\n\n.column-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border-bottom: 1px solid #f0f0f0;\n  transition: background 0.1s ease;\n  position: relative;\n}\n\n.column-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n  background: #fafafa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n}\n\n\n\n\n\n\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: _ngcontent-%COMP%_dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_dropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.column-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: #e3f2fd;\n}\n\n\n\n.column-item.drag-over[_ngcontent-%COMP%] {\n  background: #f5f7fa;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n  cursor: grab;\n  color: #999;\n  padding: 4px;\n  transition: color 0.15s ease;\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n  color: #666;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n.column-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.column-name[_ngcontent-%COMP%]   .format-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #1976d2;\n  opacity: 0.7;\n}\n\n.column-name[_ngcontent-%COMP%]   .alias-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #7b1fa2;\n  opacity: 0.8;\n}\n\n.column-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.action-btn.format-btn.has-format[_ngcontent-%COMP%] {\n  color: #1976d2;\n  background: #e3f2fd;\n}\n\n.empty-list[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 13px;\n}\n\n\n\n.column-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #999;\n  font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 14px;\n}\n\n\n\n\n\n\n.format-editor-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: white;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideInFromRight 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.format-back-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.format-header-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-child {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:last-child {\n  font-size: 12px;\n  color: #666;\n}\n\n.format-editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.preview-samples[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.preview-sample[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #94a3b8;\n  min-width: 60px;\n}\n\n.preview-value[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  font-family: 'SF Mono', 'Monaco', monospace;\n  color: #1e293b;\n}\n\n\n\n.format-type-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.format-type-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-type-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n\n.format-type-btn[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 8px;\n  border: 2px solid #e5e7eb;\n  border-radius: 10px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-type-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.format-type-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.format-type-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: #1d4ed8;\n}\n\n\n\n.format-options-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.format-options-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.format-option-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.format-option-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.format-option-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.format-option-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-option-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n}\n\n.format-option-row[_ngcontent-%COMP%]   .format-option-group[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.format-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n\n\n.alignment-options[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.align-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.style-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.style-section[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.style-toggle-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n.color-picker-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.color-picker-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.color-picker-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #64748b;\n  min-width: 80px;\n}\n\n.color-picker-group[_ngcontent-%COMP%]   input[type=\"color\"][_ngcontent-%COMP%] {\n  width: 40px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.color-clear-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.color-clear-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #666;\n}\n\n\n\n.format-editor-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%] {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%] {\n  color: #c62828;\n  border-color: #c62828;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #c62828;\n  color: white;\n}\n\n\n\n.filter-summary-container[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: #f5f7fa;\n  border-radius: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  min-width: 20px;\n  text-align: center;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n  color: #999;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: #c62828;\n  border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #c62828;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n\n\n\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #d1d5db;\n  background: #f9fafb;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n  border-color: #3b82f6;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background: #f3f4f6;\n  color: #6b7280;\n  font-size: 16px;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  background: #3b82f6;\n  color: white;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-subtitle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6b7280;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-title[_ngcontent-%COMP%] {\n  color: #1d4ed8;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]   .mode-check[_ngcontent-%COMP%] {\n  color: #3b82f6;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n  border: 1px solid #bae6fd;\n  border-radius: 12px;\n  margin-bottom: 16px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n  border-radius: 10px;\n  color: white;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  background: white;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 14px;\n  line-height: 1.5;\n  resize: none;\n  min-height: 60px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%]   .smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 12px;\n  background: #e3f2fd;\n  border-radius: 6px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  color: #1565c0;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 14px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n}\n\n.examples-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #f59e0b;\n}\n\n.example-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  color: #4b5563;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #1d4ed8;\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #9ca3af;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled)   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.smart-filter-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.smart-filter-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n  margin-top: 12px;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%] {\n  background: #3b82f6;\n  color: white;\n  border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n  background: #f5f5f5;\n  color: #999;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 80px;\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n  padding-top: 16px;\n  border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  color: #c62828;\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #c62828;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #c62828;\n  background: transparent;\n  border-radius: 6px;\n  color: #c62828;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n  background: #c62828;\n  color: white;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.footer-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.format-editor[_ngcontent-%COMP%] {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.format-editor[_ngcontent-%COMP%]   .format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0 16px 0;\n  border-bottom: 1px solid #e0e0e0;\n  margin-bottom: 16px;\n}\n\n.format-editor[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.format-editor[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%]   .format-editor-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n\n\n.format-editor[_ngcontent-%COMP%]   .preview-table[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 12px;\n}\n\n.format-editor[_ngcontent-%COMP%]   .preview-header-cell[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  background: #f1f5f9;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%]   .preview-cell[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #333;\n}\n\n\n\n.format-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n\n\n.format-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n\n.format-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.format-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #555;\n  flex-shrink: 0;\n}\n\n\n\n.format-select[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n  min-width: 120px;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n  width: 80px;\n}\n\n\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n  gap: 8px;\n}\n\n.format-row.alias-info[_ngcontent-%COMP%]   .muted-text[_ngcontent-%COMP%] {\n  color: #888;\n  font-size: 12px;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: #f0f0f0;\n  border-radius: 50%;\n  color: #888;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #c62828;\n}\n\n\n\n.color-input[_ngcontent-%COMP%] {\n  width: 50px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  background: white;\n}\n\n.color-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.align-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n\n\n.style-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.style-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.style-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n\n\n.format-section-collapsible[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  list-style: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::-webkit-details-marker {\n  display: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n  content: '\\f054';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  color: #999;\n  transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open][_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]::before {\n  transform: rotate(90deg);\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.format-section-content[_ngcontent-%COMP%] {\n  padding: 14px;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n}\n\n\n\n.format-actions[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n  background: #fff5f5;\n  border-color: #f87171;\n  color: #dc2626;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n.aggregates-section[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n.aggregates-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.aggregates-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n\n\n.add-aggregate-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 16px;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-aggregate-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.aggregates-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n\n\n.aggregate-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  background: #f5f5f5;\n}\n\n\n\n.agg-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n  border-radius: 8px;\n  color: #1976d2;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%]   .agg-icon[_ngcontent-%COMP%] {\n  background: #f0f0f0;\n  color: #999;\n}\n\n\n\n.agg-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%]   .agg-label[_ngcontent-%COMP%] {\n  color: #888;\n}\n\n.agg-details[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #888;\n}\n\n.agg-type[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.agg-type[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.agg-smart-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n  border-radius: 4px;\n  color: #3b82f6;\n  font-size: 10px;\n}\n\n\n\n.agg-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.agg-action-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled[_ngcontent-%COMP%] {\n  color: #2e7d32;\n}\n\n.agg-action-btn.toggle-btn[_ngcontent-%COMP%]:not(.enabled) {\n  color: #bdbdbd;\n}\n\n.agg-action-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.agg-action-btn.remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n\n\n.aggregates-summary[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 14px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.summary-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 11px;\n}\n\n\n\n.aggregates-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.aggregates-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n\n\n.aggregates-tip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.aggregates-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n  .config-panel[_ngcontent-%COMP%] {\n    width: 100% !important;\n    max-width: 100vw !important;\n  }\n\n  \n\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 14px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .format-type-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n\n\n@media (min-width: 769px) and (max-width: 1200px) {\n  .config-panel[_ngcontent-%COMP%] {\n    max-width: min(600px, 80vw);\n  }\n}\n\n\n\n.form-input.invalid[_ngcontent-%COMP%] {\n  border-color: #ef4444;\n}\n\n.validation-error[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  color: #ef4444;\n  margin-top: 4px;\n}\n\n.validation-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  background: #fef2f2;\n  border-top: 1px solid #fecaca;\n  color: #dc2626;\n  font-size: 13px;\n}\n\n.validation-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n.footer-btn.duplicate-btn[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  color: #374151;\n  border: 1px solid #d1d5db;\n}\n\n.footer-btn.duplicate-btn[_ngcontent-%COMP%]:hover {\n  background: #e5e7eb;\n  border-color: #9ca3af;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewConfigPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-view-config-panel', template: "<!-- Backdrop -->\n@if (isOpen) {\n  <div class=\"panel-backdrop\" (click)=\"onClose()\"></div>\n}\n\n<!-- Sliding Panel -->\n<div class=\"config-panel\"\n     [class.open]=\"isOpen\"\n     [class.resizing]=\"isResizing\"\n     [style.width.px]=\"panelWidth\">\n  <!-- Resize Handle -->\n  <div class=\"resize-handle\"\n       (mousedown)=\"onResizeStart($event)\"\n       title=\"Drag to resize\">\n    <div class=\"resize-grip\"></div>\n  </div>\n\n  <!-- Panel Header -->\n  <div class=\"panel-header\">\n    <div class=\"header-title\">\n      <i class=\"fa-solid fa-sliders-h\"></i>\n      <span>{{ viewEntity ? 'Edit View' : 'Configure View' }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Tab Navigation -->\n  <div class=\"tab-nav\" [class.icon-only]=\"isIconOnlyMode\">\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'columns'\"\n      (click)=\"setActiveTab('columns')\"\n      [title]=\"isIconOnlyMode ? 'Columns' : ''\">\n      <i class=\"fa-solid fa-columns\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Columns</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'sorting'\"\n      (click)=\"setActiveTab('sorting')\"\n      [title]=\"isIconOnlyMode ? 'Sorting' + (sortItems.length > 0 ? ' (' + sortItems.length + ')' : '') : ''\">\n      <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Sorting</span>\n      }\n      @if (sortItems.length > 0) {\n        <span class=\"tab-badge\">{{ sortItems.length }}</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'filters'\"\n      (click)=\"setActiveTab('filters')\"\n      [title]=\"isIconOnlyMode ? 'Filters' : ''\">\n      <i class=\"fa-solid fa-filter\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Filters</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'aggregates'\"\n      (click)=\"setActiveTab('aggregates')\"\n      [title]=\"isIconOnlyMode ? 'Aggregates' + (enabledAggregatesCount > 0 ? ' (' + enabledAggregatesCount + ')' : '') : ''\">\n      <i class=\"fa-solid fa-chart-simple\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Aggregates</span>\n      }\n      @if (enabledAggregatesCount > 0) {\n        <span class=\"tab-badge\">{{ enabledAggregatesCount }}</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'settings'\"\n      (click)=\"setActiveTab('settings')\"\n      [title]=\"isIconOnlyMode ? 'Settings' : ''\">\n      <i class=\"fa-solid fa-cog\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Settings</span>\n      }\n    </button>\n  </div>\n\n  <!-- Panel Content -->\n  <div class=\"panel-content\">\n    <!-- Columns Tab -->\n    @if (activeTab === 'columns' && !formatEditingColumn) {\n      <div class=\"tab-content\">\n        <!-- Visible Columns -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Visible Columns</span>\n            <span class=\"column-count\">{{ visibleColumns.length }}</span>\n          </div>\n          <div class=\"column-list visible-columns\">\n            @for (column of visibleColumns; track column.fieldId; let i = $index) {\n              <!-- Drop indicator before -->\n              @if (isDropBefore(column)) {\n                <div class=\"drop-indicator\"></div>\n              }\n              <div\n                class=\"column-item\"\n                [class.dragging]=\"draggedColumn === column\"\n                [class.drop-target]=\"dropTargetColumn === column\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, column)\"\n                (dragover)=\"onDragOver($event, column)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, column)\"\n                (dragend)=\"onDragEnd($event)\">\n                <div class=\"drag-handle\">\n                  <i class=\"fa-solid fa-grip-vertical\"></i>\n                </div>\n                <span class=\"column-name\">\n                  {{ column.userDisplayName || column.displayName }}\n                  @if (column.userDisplayName) {\n                    <i class=\"fa-solid fa-pen-nib alias-indicator\" title=\"Custom name: {{ column.userDisplayName }}\"></i>\n                  }\n                  @if (hasCustomFormat(column)) {\n                    <i class=\"fa-solid fa-paintbrush format-indicator\" title=\"Custom formatting applied\"></i>\n                  }\n                </span>\n                <div class=\"column-actions\">\n                  <button\n                    class=\"action-btn format-btn\"\n                    (click)=\"openFormatEditor(column)\"\n                    title=\"Format column\">\n                    <i class=\"fa-solid fa-paintbrush\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn\"\n                    [disabled]=\"i === 0\"\n                    (click)=\"moveColumnUp(column)\"\n                    title=\"Move up\">\n                    <i class=\"fa-solid fa-chevron-up\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn\"\n                    [disabled]=\"i === visibleColumns.length - 1\"\n                    (click)=\"moveColumnDown(column)\"\n                    title=\"Move down\">\n                    <i class=\"fa-solid fa-chevron-down\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn hide-btn\"\n                    (click)=\"toggleColumnVisibility(column)\"\n                    title=\"Hide column\">\n                    <i class=\"fa-solid fa-eye-slash\"></i>\n                  </button>\n                </div>\n              </div>\n              <!-- Drop indicator after (only for last item) -->\n              @if (isDropAfter(column) && i === visibleColumns.length - 1) {\n                <div class=\"drop-indicator\"></div>\n              }\n            }\n            @if (visibleColumns.length === 0) {\n              <div class=\"empty-list\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                <span>No columns visible. Add columns from below.</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Hidden Columns -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-eye-slash\"></i>\n            <span>Hidden Columns</span>\n            <span class=\"column-count\">{{ hiddenColumns.length }}</span>\n          </div>\n          @if (hiddenColumns.length > 5) {\n            <div class=\"column-search\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search columns...\"\n                [(ngModel)]=\"columnSearchText\"\n              />\n            </div>\n          }\n          <div class=\"column-list hidden-columns\">\n            @for (column of filteredHiddenColumns; track column.fieldId) {\n              <div class=\"column-item hidden\">\n                <span class=\"column-name\">{{ column.displayName }}</span>\n                <button\n                  class=\"action-btn show-btn\"\n                  (click)=\"toggleColumnVisibility(column)\"\n                  title=\"Show column\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n              </div>\n            }\n            @if (hiddenColumns.length === 0) {\n              <div class=\"empty-list\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n                <span>All columns are visible</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Column Format Editor Sub-Panel -->\n    @if (activeTab === 'columns' && formatEditingColumn) {\n      <div class=\"format-editor\">\n        <!-- Format Editor Header -->\n        <div class=\"format-editor-header\">\n          <button class=\"back-btn\" (click)=\"closeFormatEditor()\">\n            <i class=\"fa-solid fa-arrow-left\"></i>\n          </button>\n          <div class=\"format-editor-title\">\n            <span>Format: {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}</span>\n          </div>\n        </div>\n\n        <!-- Column Alias Section -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-pen-nib\"></i>\n            <span>Column Name</span>\n          </div>\n          <div class=\"format-row\">\n            <label>Display As</label>\n            <input type=\"text\" class=\"format-input\"\n                   [value]=\"formatEditingColumn.userDisplayName || ''\"\n                   (input)=\"updateUserDisplayName($any($event.target).value)\"\n                   [placeholder]=\"formatEditingColumn.displayName\" />\n          </div>\n          @if (formatEditingColumn.userDisplayName) {\n            <div class=\"format-row alias-info\">\n              <small class=\"muted-text\">Original: {{ formatEditingColumn.displayName }}</small>\n              <button class=\"clear-alias-btn\" (click)=\"formatEditingColumn.userDisplayName = undefined\" title=\"Clear alias\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n        <!-- Preview Section -->\n        <div class=\"format-preview-section\">\n          <div class=\"preview-header\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Preview</span>\n          </div>\n          <div class=\"preview-table\">\n            <div class=\"preview-header-cell\"\n                 [style.font-weight]=\"formatEditingColumn.format?.headerStyle?.bold ? 'bold' : 'normal'\"\n                 [style.font-style]=\"formatEditingColumn.format?.headerStyle?.italic ? 'italic' : 'normal'\"\n                 [style.text-decoration]=\"formatEditingColumn.format?.headerStyle?.underline ? 'underline' : 'none'\"\n                 [style.color]=\"formatEditingColumn.format?.headerStyle?.color\"\n                 [style.background-color]=\"formatEditingColumn.format?.headerStyle?.backgroundColor\">\n              {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}\n            </div>\n            @for (value of getSampleValues(formatEditingColumn); track $index) {\n              <div class=\"preview-cell\"\n                   [style.text-align]=\"formatEditingColumn.format?.align || 'left'\"\n                   [style.font-weight]=\"formatEditingColumn.format?.cellStyle?.bold ? 'bold' : 'normal'\"\n                   [style.font-style]=\"formatEditingColumn.format?.cellStyle?.italic ? 'italic' : 'normal'\"\n                   [style.text-decoration]=\"formatEditingColumn.format?.cellStyle?.underline ? 'underline' : 'none'\"\n                   [style.color]=\"formatEditingColumn.format?.cellStyle?.color\"\n                   [style.background-color]=\"formatEditingColumn.format?.cellStyle?.backgroundColor\">\n                {{ formatPreviewValue(value, formatEditingColumn.format) }}\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Format Type -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-hashtag\"></i>\n            <span>Format Type</span>\n          </div>\n          <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.type\">\n            <option value=\"auto\">Auto (Smart Default)</option>\n            <option value=\"text\">Text</option>\n            <option value=\"number\">Number</option>\n            <option value=\"currency\">Currency</option>\n            <option value=\"percent\">Percent</option>\n            <option value=\"date\">Date</option>\n            <option value=\"datetime\">Date & Time</option>\n            <option value=\"boolean\">Boolean</option>\n          </select>\n        </div>\n\n        <!-- Type-Specific Options -->\n        @if (formatEditingColumn.format?.type === 'number' || formatEditingColumn.format?.type === 'currency' || formatEditingColumn.format?.type === 'percent') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-sliders\"></i>\n              <span>Number Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>Decimal Places</label>\n              <input type=\"number\" class=\"format-input small\" min=\"0\" max=\"10\"\n                     [(ngModel)]=\"formatEditingColumn.format!.decimals\" />\n            </div>\n            @if (formatEditingColumn.format?.type === 'currency') {\n              <div class=\"format-row\">\n                <label>Currency</label>\n                <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.currencyCode\">\n                  <option value=\"USD\">USD ($)</option>\n                  <option value=\"EUR\">EUR (\u20AC)</option>\n                  <option value=\"GBP\">GBP (\u00A3)</option>\n                  <option value=\"JPY\">JPY (\u00A5)</option>\n                  <option value=\"CAD\">CAD ($)</option>\n                  <option value=\"AUD\">AUD ($)</option>\n                </select>\n              </div>\n            }\n            <div class=\"format-row\">\n              <label>Thousands Separator</label>\n              <input type=\"checkbox\" [(ngModel)]=\"formatEditingColumn.format!.thousandsSeparator\" />\n            </div>\n          </div>\n        }\n\n        @if (formatEditingColumn.format?.type === 'date' || formatEditingColumn.format?.type === 'datetime') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-calendar\"></i>\n              <span>Date Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>Format</label>\n              <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.dateFormat\">\n                <option value=\"short\">Short (1/15/25)</option>\n                <option value=\"short-weekday\">Short + Day (Wed, 1/15/25)</option>\n                <option value=\"medium\">Medium (Jan 15, 2025)</option>\n                <option value=\"medium-weekday\">Medium + Day (Wed, Jan 15, 2025)</option>\n                <option value=\"long\">Long (January 15, 2025)</option>\n                <option value=\"long-weekday\">Long + Day (Wednesday, January 15, 2025)</option>\n              </select>\n            </div>\n          </div>\n        }\n\n        @if (formatEditingColumn.format?.type === 'boolean') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              <span>Boolean Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>True Label</label>\n              <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.trueLabel\" placeholder=\"Yes\" />\n            </div>\n            <div class=\"format-row\">\n              <label>False Label</label>\n              <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.falseLabel\" placeholder=\"No\" />\n            </div>\n            <div class=\"format-row\">\n              <label>Display As</label>\n              <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.booleanDisplay\">\n                <option value=\"text\">Text</option>\n                <option value=\"checkbox\">Checkbox</option>\n                <option value=\"icon\">Icon</option>\n              </select>\n            </div>\n          </div>\n        }\n\n        <!-- Alignment -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-align-left\"></i>\n            <span>Alignment</span>\n          </div>\n          <div class=\"alignment-toggle\">\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'left' || !formatEditingColumn.format?.align\"\n                    (click)=\"formatEditingColumn.format!.align = 'left'\" title=\"Left\">\n              <i class=\"fa-solid fa-align-left\"></i>\n            </button>\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'center'\"\n                    (click)=\"formatEditingColumn.format!.align = 'center'\" title=\"Center\">\n              <i class=\"fa-solid fa-align-center\"></i>\n            </button>\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'right'\"\n                    (click)=\"formatEditingColumn.format!.align = 'right'\" title=\"Right\">\n              <i class=\"fa-solid fa-align-right\"></i>\n            </button>\n          </div>\n        </div>\n\n        <!-- Header Style -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-heading\"></i>\n            <span>Header Style</span>\n          </div>\n          <div class=\"style-buttons\">\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.bold\"\n                    (click)=\"toggleHeaderStyle('bold')\"\n                    title=\"Bold\">\n              <i class=\"fa-solid fa-bold\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.italic\"\n                    (click)=\"toggleHeaderStyle('italic')\"\n                    title=\"Italic\">\n              <i class=\"fa-solid fa-italic\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.underline\"\n                    (click)=\"toggleHeaderStyle('underline')\"\n                    title=\"Underline\">\n              <i class=\"fa-solid fa-underline\"></i>\n            </button>\n          </div>\n          <div class=\"format-row\">\n            <label>Text Color</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.headerStyle?.color || '#000000'\"\n                   (input)=\"updateHeaderColor('color', $any($event.target).value)\" />\n          </div>\n          <div class=\"format-row\">\n            <label>Background</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.headerStyle?.backgroundColor || '#ffffff'\"\n                   (input)=\"updateHeaderColor('backgroundColor', $any($event.target).value)\" />\n          </div>\n        </div>\n\n        <!-- Cell Style -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-table-cells\"></i>\n            <span>Cell Style</span>\n          </div>\n          <div class=\"style-buttons\">\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.bold\"\n                    (click)=\"toggleCellStyle('bold')\"\n                    title=\"Bold\">\n              <i class=\"fa-solid fa-bold\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.italic\"\n                    (click)=\"toggleCellStyle('italic')\"\n                    title=\"Italic\">\n              <i class=\"fa-solid fa-italic\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.underline\"\n                    (click)=\"toggleCellStyle('underline')\"\n                    title=\"Underline\">\n              <i class=\"fa-solid fa-underline\"></i>\n            </button>\n          </div>\n          <div class=\"format-row\">\n            <label>Text Color</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.cellStyle?.color || '#000000'\"\n                   (input)=\"updateCellColor('color', $any($event.target).value)\" />\n          </div>\n          <div class=\"format-row\">\n            <label>Background</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.cellStyle?.backgroundColor || '#ffffff'\"\n                   (input)=\"updateCellColor('backgroundColor', $any($event.target).value)\" />\n          </div>\n        </div>\n\n        <!-- Clear Format Button -->\n        <div class=\"format-actions\">\n          <button class=\"clear-format-btn\" (click)=\"clearColumnFormat(formatEditingColumn); closeFormatEditor()\">\n            <i class=\"fa-solid fa-eraser\"></i>\n            Clear Formatting\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Sorting Tab -->\n    @if (activeTab === 'sorting') {\n      <div class=\"tab-content\">\n        <div class=\"config-section sorting-section\">\n          <div class=\"sorting-header\">\n            <p class=\"sorting-description\">\n              Define how records should be ordered. Add multiple levels to sort by secondary fields when values are equal.\n            </p>\n          </div>\n\n          <!-- Add Sort Button -->\n          <button\n            class=\"add-sort-btn\"\n            (click)=\"addSortLevel()\"\n            [disabled]=\"!canEdit || sortItems.length >= sortableFields.length\"\n            title=\"Add another sort level\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Sort Level</span>\n          </button>\n\n          <!-- Sort Items List -->\n          @if (sortItems.length > 0) {\n            <div class=\"sort-items-list\">\n              @for (sortItem of sortItems; track $index; let i = $index) {\n                <!-- Drop indicator before -->\n                @if (isSortDropBefore(sortItem)) {\n                  <div class=\"sort-drop-indicator\"></div>\n                }\n                <div\n                  class=\"sort-item\"\n                  [class.dragging]=\"draggedSortItem === sortItem\"\n                  [class.drop-target]=\"dropTargetSortItem === sortItem\"\n                  draggable=\"true\"\n                  (dragstart)=\"onSortDragStart($event, sortItem)\"\n                  (dragover)=\"onSortDragOver($event, sortItem)\"\n                  (dragleave)=\"onSortDragLeave($event)\"\n                  (drop)=\"onSortDrop($event, sortItem)\"\n                  (dragend)=\"onSortDragEnd($event)\">\n                  <!-- Priority Badge -->\n                  <div class=\"sort-priority-badge\">{{ i + 1 }}</div>\n                  <!-- Drag Handle -->\n                  <div class=\"sort-drag-handle\" title=\"Drag to reorder\">\n                    <i class=\"fa-solid fa-grip-vertical\"></i>\n                  </div>\n                  <!-- Field Dropdown -->\n                  <select\n                    class=\"sort-field-dropdown\"\n                    [(ngModel)]=\"sortItem.field\"\n                    (ngModelChange)=\"onSortFieldChange(sortItem, $event)\"\n                    [disabled]=\"!canEdit\">\n                    @for (field of sortableFields; track field.ID) {\n                      <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n                    }\n                  </select>\n                  <!-- Direction Toggle -->\n                  <div class=\"sort-direction-toggle\">\n                    <button\n                      class=\"direction-btn\"\n                      [class.active]=\"sortItem.direction === 'asc'\"\n                      (click)=\"onSortDirectionChange(sortItem, 'asc')\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Ascending (A-Z, 1-9)\">\n                      <i class=\"fa-solid fa-arrow-up\"></i>\n                    </button>\n                    <button\n                      class=\"direction-btn\"\n                      [class.active]=\"sortItem.direction === 'desc'\"\n                      (click)=\"onSortDirectionChange(sortItem, 'desc')\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Descending (Z-A, 9-1)\">\n                      <i class=\"fa-solid fa-arrow-down\"></i>\n                    </button>\n                  </div>\n                  <!-- Remove Button -->\n                  <button\n                    class=\"sort-remove-btn\"\n                    (click)=\"removeSortLevel(sortItem)\"\n                    [disabled]=\"!canEdit\"\n                    title=\"Remove sort level\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                <!-- Drop indicator after (only for last item) -->\n                @if (isSortDropAfter(sortItem) && i === sortItems.length - 1) {\n                  <div class=\"sort-drop-indicator\"></div>\n                }\n              }\n            </div>\n            <!-- Multi-sort hint -->\n            @if (sortItems.length > 1) {\n              <div class=\"sort-hint\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                <span>Drag items to change priority. Records sort by first level, then second, etc.</span>\n              </div>\n            }\n          } @else {\n            <div class=\"sort-empty-state\">\n              <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n              <span>No sorting configured</span>\n              <p class=\"sort-empty-hint\">Click \"Add Sort Level\" to define how records should be ordered</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Filters Tab -->\n    @if (activeTab === 'filters') {\n      <div class=\"tab-content\">\n        <!-- Filter Mode Selection -->\n        <div class=\"filter-mode-selector\">\n          <button\n            class=\"filter-mode-btn\"\n            [class.active]=\"filterMode === 'smart'\"\n            (click)=\"setFilterMode('smart')\"\n            [disabled]=\"!canEdit\">\n            <div class=\"mode-icon\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n            </div>\n            <div class=\"mode-content\">\n              <span class=\"mode-title\">Smart Filter</span>\n              <span class=\"mode-subtitle\">Use AI to filter with natural language</span>\n            </div>\n            @if (filterMode === 'smart') {\n              <i class=\"fa-solid fa-check mode-check\"></i>\n            }\n          </button>\n          <button\n            class=\"filter-mode-btn\"\n            [class.active]=\"filterMode === 'traditional'\"\n            (click)=\"setFilterMode('traditional')\"\n            [disabled]=\"!canEdit\">\n            <div class=\"mode-icon\">\n              <i class=\"fa-solid fa-sliders\"></i>\n            </div>\n            <div class=\"mode-content\">\n              <span class=\"mode-title\">Traditional Filter</span>\n              <span class=\"mode-subtitle\">Build filters with field/operator/value</span>\n            </div>\n            @if (filterMode === 'traditional') {\n              <i class=\"fa-solid fa-check mode-check\"></i>\n            }\n          </button>\n        </div>\n\n        <!-- Smart Filter Section -->\n        @if (filterMode === 'smart') {\n          <div class=\"config-section smart-filter-section\">\n            <div class=\"smart-filter-input-container\">\n              <div class=\"smart-filter-icon\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              </div>\n              <textarea\n                id=\"smartFilterPrompt\"\n                class=\"smart-filter-textarea\"\n                placeholder=\"Describe what you're looking for...\"\n                [(ngModel)]=\"smartFilterPrompt\"\n                [disabled]=\"!canEdit\"\n                rows=\"3\"\n              ></textarea>\n            </div>\n\n            @if (smartFilterExplanation) {\n              <div class=\"smart-filter-explanation\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <span>{{ smartFilterExplanation }}</span>\n              </div>\n            }\n\n            <!-- Example Prompts -->\n            <div class=\"smart-filter-examples\">\n              <div class=\"examples-header\">\n                <i class=\"fa-solid fa-lightbulb\"></i>\n                <span>Try these examples:</span>\n              </div>\n              <div class=\"example-chips\">\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Show records created in the last 30 days')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-regular fa-calendar\"></i>\n                  Last 30 days\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Active records only')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-circle-check\"></i>\n                  Active only\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Records with high priority')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-star\"></i>\n                  High priority\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Records modified this week')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Modified this week\n                </button>\n              </div>\n            </div>\n\n            <div class=\"smart-filter-tip\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <span>The AI will interpret your description and create the appropriate filter when you save the view.</span>\n            </div>\n          </div>\n        }\n\n        <!-- Traditional Filter Section -->\n        @if (filterMode === 'traditional') {\n          <div class=\"config-section traditional-filter-section\">\n            <div class=\"filter-summary-container\">\n              <div class=\"filter-summary\">\n                <div class=\"summary-info\">\n                  @if (getFilterCount() > 0) {\n                    <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n                    <span class=\"summary-text\">{{ getFilterSummary() }}</span>\n                  } @else {\n                    <span class=\"summary-text no-filters\">No filters configured</span>\n                  }\n                </div>\n                <div class=\"summary-actions\">\n                  @if (getFilterCount() > 0 && canEdit) {\n                    <button\n                      class=\"summary-btn clear-btn\"\n                      (click)=\"clearFilters()\"\n                      title=\"Clear all filters\">\n                      <i class=\"fa-solid fa-times\"></i>\n                      Clear\n                    </button>\n                  }\n                  <button\n                    class=\"summary-btn edit-btn primary\"\n                    (click)=\"openFilterDialog()\"\n                    [disabled]=\"!canEdit && getFilterCount() === 0\"\n                    title=\"Edit filters\">\n                    <i class=\"fa-solid fa-pen\"></i>\n                    {{ getFilterCount() > 0 ? 'Edit Filters' : 'Add Filters' }}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"traditional-filter-tip\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <span>Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Aggregates Tab -->\n    @if (activeTab === 'aggregates') {\n      <div class=\"tab-content\">\n        <div class=\"config-section aggregates-section\">\n          <div class=\"aggregates-header\">\n            <p class=\"aggregates-description\">\n              Add summary calculations like totals, averages, and counts. Display them in cards or as column footers.\n            </p>\n          </div>\n\n          <!-- Add Aggregate Button -->\n          <button\n            class=\"add-aggregate-btn\"\n            (click)=\"openAddAggregateDialog()\"\n            [disabled]=\"!canEdit\"\n            title=\"Add a new aggregate\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Aggregate</span>\n          </button>\n\n          <!-- Aggregates List -->\n          @if (aggregates.length > 0) {\n            <div class=\"aggregates-list\">\n              @for (agg of aggregates; track agg.id; let i = $index) {\n                <div class=\"aggregate-item\" [class.disabled]=\"agg.enabled === false\">\n                  <!-- Icon -->\n                  <div class=\"agg-icon\">\n                    <i [class]=\"agg.icon || 'fa-solid fa-chart-simple'\"></i>\n                  </div>\n\n                  <!-- Content -->\n                  <div class=\"agg-content\">\n                    <div class=\"agg-label\">{{ agg.label }}</div>\n                    <div class=\"agg-details\">\n                      <span class=\"agg-type\">\n                        <i [class]=\"agg.displayType === 'card' ? 'fa-solid fa-id-card' : 'fa-solid fa-table-columns'\"></i>\n                        {{ agg.displayType === 'card' ? 'Card' : 'Column Footer' }}\n                      </span>\n                      @if (agg.smartPrompt) {\n                        <span class=\"agg-smart-badge\" title=\"AI-generated\">\n                          <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- Actions -->\n                  <div class=\"agg-actions\">\n                    <button\n                      class=\"agg-action-btn\"\n                      [disabled]=\"i === 0 || !canEdit\"\n                      (click)=\"moveAggregateUp(agg)\"\n                      title=\"Move up\">\n                      <i class=\"fa-solid fa-chevron-up\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn\"\n                      [disabled]=\"i === aggregates.length - 1 || !canEdit\"\n                      (click)=\"moveAggregateDown(agg)\"\n                      title=\"Move down\">\n                      <i class=\"fa-solid fa-chevron-down\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn toggle-btn\"\n                      [class.enabled]=\"agg.enabled !== false\"\n                      (click)=\"toggleAggregateEnabled(agg, $event)\"\n                      [disabled]=\"!canEdit\"\n                      [title]=\"agg.enabled !== false ? 'Disable' : 'Enable'\">\n                      <i [class]=\"agg.enabled !== false ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn edit-btn\"\n                      (click)=\"editAggregate(agg)\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Edit\">\n                      <i class=\"fa-solid fa-pen\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn remove-btn\"\n                      (click)=\"removeAggregate(agg)\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Remove\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Summary -->\n            <div class=\"aggregates-summary\">\n              <div class=\"summary-item\">\n                <i class=\"fa-solid fa-id-card\"></i>\n                <span>{{ cardAggregates.length }} card{{ cardAggregates.length !== 1 ? 's' : '' }}</span>\n              </div>\n              <div class=\"summary-item\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                <span>{{ columnAggregates.length }} column footer{{ columnAggregates.length !== 1 ? 's' : '' }}</span>\n              </div>\n            </div>\n          } @else {\n            <div class=\"aggregates-empty-state\">\n              <i class=\"fa-solid fa-chart-simple\"></i>\n              <span>No aggregates configured</span>\n              <p class=\"empty-hint\">Click \"Add Aggregate\" to create summary calculations</p>\n            </div>\n          }\n\n          <!-- Info Tip -->\n          <div class=\"aggregates-tip\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Aggregates are calculated server-side for accuracy with filtered/paginated data.</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Settings Tab -->\n    @if (activeTab === 'settings') {\n      <div class=\"tab-content\">\n        <!-- View Name & Description -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>View Details</span>\n          </div>\n          <div class=\"form-group\">\n            <label for=\"viewName\">Name</label>\n            <input\n              id=\"viewName\"\n              type=\"text\"\n              class=\"form-input\"\n              placeholder=\"Enter view name...\"\n              [(ngModel)]=\"viewName\"\n              [disabled]=\"!canEdit\"\n            />\n          </div>\n          <div class=\"form-group\">\n            <label for=\"viewDescription\">Description</label>\n            <textarea\n              id=\"viewDescription\"\n              class=\"form-input form-textarea\"\n              placeholder=\"Describe this view...\"\n              [(ngModel)]=\"viewDescription\"\n              [disabled]=\"!canEdit\"\n              rows=\"3\"\n            ></textarea>\n          </div>\n        </div>\n\n        <!-- Sharing -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-share-alt\"></i>\n            <span>Sharing</span>\n          </div>\n          <label class=\"checkbox-label\">\n            <input\n              type=\"checkbox\"\n              [(ngModel)]=\"isShared\"\n              [disabled]=\"!canEdit\"\n            />\n            <span class=\"checkbox-text\">\n              <strong>Share with others</strong>\n              <small>Allow other users to use this view</small>\n            </span>\n          </label>\n        </div>\n\n        <!-- Danger Zone -->\n        @if (viewEntity && canDelete) {\n          <div class=\"config-section danger-zone\">\n            <div class=\"section-header\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              <span>Danger Zone</span>\n            </div>\n            <button class=\"delete-btn\" (click)=\"onDelete()\">\n              <i class=\"fa-solid fa-trash\"></i>\n              <span>Delete View</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Panel Footer -->\n  <div class=\"panel-footer\">\n    <!-- Action buttons on LEFT -->\n    <div class=\"footer-left\">\n      @if (viewEntity && canEdit) {\n        <!-- Editing an existing saved view -->\n        <button\n          class=\"footer-btn save-btn primary\"\n          (click)=\"onSave()\"\n          [disabled]=\"isSaving || !viewName\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-save\"></i>\n          }\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n      }\n      @if (!viewEntity) {\n        <!-- Default/Dynamic view - Save to user settings -->\n        <button\n          class=\"footer-btn save-btn primary\"\n          (click)=\"onSaveDefaults()\"\n          [disabled]=\"isSaving\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-save\"></i>\n          }\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n        <!-- Save As New - creates a named view -->\n        <button\n          class=\"footer-btn save-as-btn\"\n          (click)=\"onSaveAsNew()\"\n          [disabled]=\"isSaving || !viewName\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-plus\"></i>\n          }\n          {{ isSaving ? 'Creating...' : 'Save As New' }}\n        </button>\n      }\n      @if (viewEntity && canEdit) {\n        <!-- Save As New for existing view -->\n        <button\n          class=\"footer-btn save-as-btn\"\n          (click)=\"onSaveAsNew()\"\n          [disabled]=\"isSaving\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-plus\"></i>\n          }\n          Save As New\n        </button>\n      }\n    </div>\n    <!-- Cancel button on RIGHT -->\n    <button class=\"footer-btn cancel-btn\" (click)=\"onClose()\">\n      Cancel\n    </button>\n  </div>\n</div>\n\n<!-- Aggregate Setup Dialog -->\n<mj-aggregate-setup-dialog\n  [Entity]=\"entity\"\n  [Aggregate]=\"editingAggregate\"\n  [IsOpen]=\"showAggregateDialog\"\n  (Close)=\"closeAggregateDialog()\"\n  (Save)=\"onAggregateSave($event)\">\n</mj-aggregate-setup-dialog>\n", styles: ["/* Backdrop */\n.panel-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* Sliding Panel */\n.config-panel {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: 100%;\n  background: white;\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open {\n  transform: translateX(0);\n}\n\n.config-panel.resizing {\n  transition: none;\n  user-select: none;\n}\n\n/* Resize Handle */\n.resize-handle {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle:hover,\n.config-panel.resizing .resize-handle {\n  background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip {\n  width: 3px;\n  height: 40px;\n  background: #cbd5e1;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.config-panel.resizing .resize-grip {\n  opacity: 1;\n  background: #1976d2;\n}\n\n/* Panel Header */\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n.header-title i {\n  color: #1976d2;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n/* Tab Navigation */\n.tab-nav {\n  display: flex;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.tab-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 2px solid transparent;\n}\n\n.tab-btn:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.tab-btn.active {\n  color: #1976d2;\n  border-bottom-color: #1976d2;\n  background: transparent;\n}\n\n.tab-btn i {\n  font-size: 12px;\n}\n\n.tab-badge {\n  background: #1976d2;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: 4px;\n}\n\n/* Icon-only mode for narrow panels */\n.tab-nav.icon-only .tab-btn {\n  padding: 12px 8px;\n  gap: 4px;\n}\n\n.tab-nav.icon-only .tab-btn i {\n  font-size: 14px;\n}\n\n.tab-nav.icon-only .tab-badge {\n  margin-left: 0;\n  padding: 2px 4px;\n  font-size: 9px;\n}\n\n/* Panel Content */\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Config Sections */\n.config-section {\n  margin-bottom: 24px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.column-count {\n  margin-left: auto;\n  background: #e3f2fd;\n  color: #1976d2;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n}\n\n/* Sort Configuration */\n.sort-config {\n  display: flex;\n  gap: 8px;\n}\n\n.sort-field-select {\n  flex: 1;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-direction-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.direction-btn {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.direction-btn:hover {\n  color: #333;\n}\n\n.direction-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ========================================\n   MULTI-SORT CONFIGURATION\n   ======================================== */\n\n.add-sort-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-sort-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-sort-btn i {\n  font-size: 12px;\n}\n\n/* Sort Items List */\n.sort-items-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n/* Sort Item */\n.sort-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.sort-item:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.sort-item.dragging {\n  opacity: 0.5;\n  background: #e3f2fd;\n  border-color: #1976d2;\n}\n\n.sort-item.drop-target {\n  border-color: #1976d2;\n}\n\n/* Priority Badge */\n.sort-priority-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  height: 24px;\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 700;\n  color: white;\n  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n}\n\n/* Drag Handle */\n.sort-drag-handle {\n  color: #bdbdbd;\n  cursor: grab;\n  padding: 4px;\n  transition: color 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sort-drag-handle:hover {\n  color: #757575;\n}\n\n.sort-item.dragging .sort-drag-handle {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n/* Sort Field Dropdown */\n.sort-field-dropdown {\n  flex: 1;\n  min-width: 120px;\n  padding: 8px 10px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 13px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-dropdown:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-field-dropdown:disabled {\n  background: #f5f5f5;\n  color: #999;\n  cursor: not-allowed;\n}\n\n/* Sort Remove Button */\n.sort-remove-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #bdbdbd;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sort-remove-btn:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.sort-remove-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n/* Sort Drop Indicator */\n.sort-drop-indicator {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes sortDropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Sort Hint */\n.sort-hint {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 10px 12px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.sort-hint i {\n  color: #1976d2;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* Sorting Section Styles */\n.sorting-section {\n  padding-top: 0;\n}\n\n.sorting-header {\n  margin-bottom: 16px;\n}\n\n.sorting-description {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n/* Sort Empty State */\n.sort-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.sort-empty-state i {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.sort-empty-hint {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n/* Column Lists */\n.column-list {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.column-list.visible-columns {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.column-list.hidden-columns {\n  flex: 1;\n  min-height: 100px;\n  overflow-y: auto;\n}\n\n/* Hidden columns section should expand to fill available space */\n.config-section:last-child {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  margin-bottom: 0;\n}\n\n.column-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border-bottom: 1px solid #f0f0f0;\n  transition: background 0.1s ease;\n  position: relative;\n}\n\n.column-item:last-child {\n  border-bottom: none;\n}\n\n.column-item:hover {\n  background: #f5f7fa;\n}\n\n.column-item.hidden {\n  background: #fafafa;\n}\n\n.column-item.hidden:hover {\n  background: #f0f0f0;\n}\n\n/* ========================================\n   DRAG & DROP INDICATOR STYLES\n   ======================================== */\n\n/* Drop indicator line element - shows where the column will be placed */\n.drop-indicator {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes dropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Highlight the column being dragged */\n.column-item.dragging {\n  opacity: 0.5;\n  background: #e3f2fd;\n}\n\n/* Visual feedback during drag over */\n.column-item.drag-over {\n  background: #f5f7fa;\n}\n\n.drag-handle {\n  cursor: grab;\n  color: #999;\n  padding: 4px;\n  transition: color 0.15s ease;\n}\n\n.drag-handle:hover {\n  color: #666;\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n.column-name {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.column-name .format-indicator {\n  font-size: 10px;\n  color: #1976d2;\n  opacity: 0.7;\n}\n\n.column-name .alias-indicator {\n  font-size: 10px;\n  color: #7b1fa2;\n  opacity: 0.8;\n}\n\n.column-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.action-btn:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.action-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn:hover {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.action-btn.show-btn:hover {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.action-btn.format-btn:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.action-btn.format-btn.has-format {\n  color: #1976d2;\n  background: #e3f2fd;\n}\n\n.empty-list {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 13px;\n}\n\n/* Column Search */\n.column-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 8px;\n}\n\n.column-search i {\n  color: #999;\n  font-size: 12px;\n}\n\n.column-search input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 14px;\n}\n\n/* ========================================\n   COLUMN FORMAT EDITOR SUB-PANEL\n   ======================================== */\n\n.format-editor-panel {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: white;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  animation: slideInFromRight 0.2s ease;\n}\n\n@keyframes slideInFromRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n.format-editor-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-back-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.format-back-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-header-title {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.format-header-title span:first-child {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-header-title span:last-child {\n  font-size: 12px;\n  color: #666;\n}\n\n.format-editor-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Format Preview Section */\n.format-preview-section {\n  margin-bottom: 24px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.preview-header i {\n  color: #3b82f6;\n}\n\n.preview-samples {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.preview-sample {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label {\n  font-size: 12px;\n  color: #94a3b8;\n  min-width: 60px;\n}\n\n.preview-value {\n  flex: 1;\n  font-size: 14px;\n  font-family: 'SF Mono', 'Monaco', monospace;\n  color: #1e293b;\n}\n\n/* Format Type Selection */\n.format-type-section {\n  margin-bottom: 24px;\n}\n\n.format-type-section .section-label {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-type-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n\n.format-type-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 8px;\n  border: 2px solid #e5e7eb;\n  border-radius: 10px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-type-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.format-type-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.format-type-btn i {\n  font-size: 18px;\n  color: #64748b;\n}\n\n.format-type-btn.active i {\n  color: #3b82f6;\n}\n\n.format-type-btn span {\n  font-size: 11px;\n  font-weight: 500;\n  color: #64748b;\n}\n\n.format-type-btn.active span {\n  color: #1d4ed8;\n}\n\n/* Format Options Section */\n.format-options-section {\n  margin-bottom: 24px;\n}\n\n.format-options-section .section-label {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-option-group {\n  margin-bottom: 16px;\n}\n\n.format-option-group label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.format-option-group input,\n.format-option-group select {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.format-option-group input:focus,\n.format-option-group select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-option-row {\n  display: flex;\n  gap: 12px;\n}\n\n.format-option-row .format-option-group {\n  flex: 1;\n}\n\n.format-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.format-checkbox input[type=\"checkbox\"] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.format-checkbox span {\n  font-size: 14px;\n  color: #333;\n}\n\n/* Alignment Options */\n.alignment-options {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.align-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.align-btn i {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.align-btn.active i {\n  color: #3b82f6;\n}\n\n/* Style Section */\n.style-section {\n  margin-bottom: 24px;\n}\n\n.style-section .section-label {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.style-toggle-group {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-toggle-btn {\n  width: 40px;\n  height: 40px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-toggle-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-toggle-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.style-toggle-btn i {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.style-toggle-btn.active i {\n  color: #3b82f6;\n}\n\n.color-picker-row {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.color-picker-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.color-picker-group label {\n  font-size: 13px;\n  color: #64748b;\n  min-width: 80px;\n}\n\n.color-picker-group input[type=\"color\"] {\n  width: 40px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.color-clear-btn {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.color-clear-btn:hover {\n  background: #f5f5f5;\n  color: #666;\n}\n\n/* Format Editor Footer */\n.format-editor-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-footer-left {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-footer-btn:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.format-footer-btn.primary {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.format-footer-btn.primary:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.format-footer-btn.danger {\n  color: #c62828;\n  border-color: #c62828;\n}\n\n.format-footer-btn.danger:hover:not(:disabled) {\n  background: #c62828;\n  color: white;\n}\n\n/* Filter Summary Container */\n.filter-summary-container {\n  padding: 4px 0;\n}\n\n.filter-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: #f5f7fa;\n  border-radius: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.summary-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge {\n  background: #1976d2;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  min-width: 20px;\n  text-align: center;\n}\n\n.summary-text {\n  font-size: 14px;\n  color: #333;\n}\n\n.summary-text.no-filters {\n  color: #999;\n}\n\n.summary-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.summary-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn i {\n  font-size: 11px;\n}\n\n.summary-btn.clear-btn {\n  background: transparent;\n  color: #c62828;\n  border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #c62828;\n}\n\n.summary-btn.edit-btn {\n  background: #1976d2;\n  color: white;\n}\n\n.summary-btn.edit-btn:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n/* ========================================\n   FILTER MODE SELECTOR\n   ======================================== */\n\n.filter-mode-selector {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.filter-mode-btn:hover:not(:disabled) {\n  border-color: #d1d5db;\n  background: #f9fafb;\n}\n\n.filter-mode-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.filter-mode-btn.active {\n  border-color: #3b82f6;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn .mode-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background: #f3f4f6;\n  color: #6b7280;\n  font-size: 16px;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active .mode-icon {\n  background: #3b82f6;\n  color: white;\n}\n\n.filter-mode-btn .mode-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.filter-mode-btn .mode-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.filter-mode-btn .mode-subtitle {\n  font-size: 12px;\n  color: #6b7280;\n}\n\n.filter-mode-btn.active .mode-title {\n  color: #1d4ed8;\n}\n\n.filter-mode-btn .mode-check {\n  color: #3b82f6;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n/* ========================================\n   SMART FILTER SECTION\n   ======================================== */\n\n.smart-filter-section {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.smart-filter-input-container {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n  border: 1px solid #bae6fd;\n  border-radius: 12px;\n  margin-bottom: 16px;\n}\n\n.smart-filter-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n  border-radius: 10px;\n  color: white;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.smart-filter-input-container .smart-filter-textarea {\n  flex: 1;\n  border: none;\n  background: white;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 14px;\n  line-height: 1.5;\n  resize: none;\n  min-height: 60px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea::placeholder {\n  color: #9ca3af;\n}\n\n.smart-filter-explanation {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 12px;\n  background: #e3f2fd;\n  border-radius: 6px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  color: #1565c0;\n}\n\n.smart-filter-explanation i {\n  color: #1976d2;\n  font-size: 14px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n/* Smart Filter Examples */\n.smart-filter-examples {\n  margin-bottom: 16px;\n}\n\n.examples-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n}\n\n.examples-header i {\n  color: #f59e0b;\n}\n\n.example-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.example-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  color: #4b5563;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.example-chip:hover:not(:disabled) {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #1d4ed8;\n}\n\n.example-chip:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip i {\n  font-size: 11px;\n  color: #9ca3af;\n}\n\n.example-chip:hover:not(:disabled) i {\n  color: #3b82f6;\n}\n\n/* Smart Filter Tip */\n.smart-filter-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.smart-filter-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* ========================================\n   TRADITIONAL FILTER SECTION\n   ======================================== */\n\n.traditional-filter-section {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.traditional-filter-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n  margin-top: 12px;\n}\n\n.traditional-filter-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary {\n  background: #3b82f6;\n  color: white;\n  border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary:hover:not(:disabled) {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n\n/* Form Elements */\n.form-group {\n  margin-bottom: 16px;\n}\n\n.form-group label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.form-input:disabled {\n  background: #f5f5f5;\n  color: #999;\n}\n\n.form-textarea {\n  resize: vertical;\n  min-height: 80px;\n}\n\n/* Checkbox */\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n\n.checkbox-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text strong {\n  font-size: 14px;\n  color: #333;\n}\n\n.checkbox-text small {\n  font-size: 12px;\n  color: #666;\n}\n\n/* Danger Zone */\n.danger-zone {\n  padding-top: 16px;\n  border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone .section-header {\n  color: #c62828;\n}\n\n.danger-zone .section-header i {\n  color: #c62828;\n}\n\n.delete-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #c62828;\n  background: transparent;\n  border-radius: 6px;\n  color: #c62828;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.delete-btn:hover {\n  background: #c62828;\n  color: white;\n}\n\n/* Panel Footer */\n.panel-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.footer-left {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.footer-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.footer-btn.primary:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.footer-btn i {\n  font-size: 12px;\n}\n\n/* ========================================\n   FORMAT EDITOR INLINE STYLES\n   ======================================== */\n\n.format-editor {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.format-editor .format-editor-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0 16px 0;\n  border-bottom: 1px solid #e0e0e0;\n  margin-bottom: 16px;\n}\n\n.format-editor .back-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.format-editor .back-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-editor .format-editor-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n/* Preview Table */\n.format-editor .preview-table {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 12px;\n}\n\n.format-editor .preview-header-cell {\n  padding: 10px 14px;\n  background: #f1f5f9;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.format-editor .preview-cell {\n  padding: 8px 14px;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #333;\n}\n\n/* Format Section */\n.format-section {\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section:last-child {\n  border-bottom: none;\n}\n\n.format-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-section-header i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n/* Format Row */\n.format-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n\n.format-row:last-child {\n  margin-bottom: 0;\n}\n\n.format-row label {\n  font-size: 13px;\n  color: #555;\n  flex-shrink: 0;\n}\n\n/* Format Inputs */\n.format-select {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n  min-width: 120px;\n}\n\n.format-select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input {\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n}\n\n.format-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input.small {\n  width: 80px;\n}\n\n/* Alias Info Row */\n.format-row.alias-info {\n  justify-content: flex-start;\n  gap: 8px;\n}\n\n.format-row.alias-info .muted-text {\n  color: #888;\n  font-size: 12px;\n}\n\n.clear-alias-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: #f0f0f0;\n  border-radius: 50%;\n  color: #888;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn:hover {\n  background: #e0e0e0;\n  color: #c62828;\n}\n\n/* Color Input */\n.color-input {\n  width: 50px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  background: white;\n}\n\n.color-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n/* Alignment Toggle */\n.alignment-toggle {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn {\n  width: 40px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.align-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.align-btn i {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.align-btn.active i {\n  color: #1976d2;\n}\n\n/* Style Buttons */\n.style-buttons {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-btn {\n  width: 36px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-btn.active {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.style-btn i {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.style-btn.active i {\n  color: #1976d2;\n}\n\n/* Collapsible Format Sections */\n.format-section-collapsible {\n  margin-bottom: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.format-section-collapsible summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  list-style: none;\n}\n\n.format-section-collapsible summary::-webkit-details-marker {\n  display: none;\n}\n\n.format-section-collapsible summary::before {\n  content: '\\f054';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  color: #999;\n  transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.format-section-collapsible summary i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.format-section-collapsible summary span {\n  flex: 1;\n}\n\n.format-section-content {\n  padding: 14px;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n}\n\n/* Format Actions */\n.format-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn:hover {\n  background: #fff5f5;\n  border-color: #f87171;\n  color: #dc2626;\n}\n\n.clear-format-btn i {\n  font-size: 12px;\n}\n\n/* ========================================\n   AGGREGATES TAB STYLES\n   ======================================== */\n\n.aggregates-section {\n  padding-top: 0;\n}\n\n.aggregates-header {\n  margin-bottom: 16px;\n}\n\n.aggregates-description {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n/* Add Aggregate Button */\n.add-aggregate-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 16px;\n}\n\n.add-aggregate-btn:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-aggregate-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-aggregate-btn i {\n  font-size: 12px;\n}\n\n/* Aggregates List */\n.aggregates-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n/* Aggregate Item */\n.aggregate-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.aggregate-item.disabled {\n  opacity: 0.6;\n  background: #f5f5f5;\n}\n\n/* Aggregate Icon */\n.agg-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n  border-radius: 8px;\n  color: #1976d2;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.aggregate-item.disabled .agg-icon {\n  background: #f0f0f0;\n  color: #999;\n}\n\n/* Aggregate Content */\n.agg-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n\n.aggregate-item.disabled .agg-label {\n  color: #888;\n}\n\n.agg-details {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #888;\n}\n\n.agg-type {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.agg-type i {\n  font-size: 10px;\n}\n\n.agg-smart-badge {\n  display: flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n  border-radius: 4px;\n  color: #3b82f6;\n  font-size: 10px;\n}\n\n/* Aggregate Actions */\n.agg-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.agg-action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.agg-action-btn:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.agg-action-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled {\n  color: #2e7d32;\n}\n\n.agg-action-btn.toggle-btn:not(.enabled) {\n  color: #bdbdbd;\n}\n\n.agg-action-btn.edit-btn:hover:not(:disabled) {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.agg-action-btn.remove-btn:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n/* Aggregates Summary */\n.aggregates-summary {\n  display: flex;\n  gap: 16px;\n  padding: 12px 14px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\n.summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.summary-item i {\n  color: #1976d2;\n  font-size: 11px;\n}\n\n/* Aggregates Empty State */\n.aggregates-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.aggregates-empty-state i {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.empty-hint {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n/* Aggregates Tip */\n.aggregates-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.aggregates-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .config-panel {\n    width: 100% !important;\n    max-width: 100vw !important;\n  }\n\n  /* Hide resize handle on mobile - panel is full width */\n  .resize-handle {\n    display: none;\n  }\n\n  .tab-btn span {\n    display: none;\n  }\n\n  .tab-btn {\n    padding: 14px;\n  }\n\n  .tab-btn i {\n    font-size: 16px;\n  }\n\n  .format-type-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n/* Medium screens - limit max resize width */\n@media (min-width: 769px) and (max-width: 1200px) {\n  .config-panel {\n    max-width: min(600px, 80vw);\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-view-config-panel', template: "<!-- Backdrop -->\n@if (isOpen) {\n  <div class=\"panel-backdrop\" (click)=\"onClose()\"></div>\n}\n\n<!-- Sliding Panel -->\n<div class=\"config-panel\"\n     [class.open]=\"isOpen\"\n     [class.resizing]=\"isResizing\"\n     [style.width.px]=\"panelWidth\">\n  <!-- Resize Handle -->\n  <div class=\"resize-handle\"\n       (mousedown)=\"onResizeStart($event)\"\n       title=\"Drag to resize\">\n    <div class=\"resize-grip\"></div>\n  </div>\n\n  <!-- Panel Header -->\n  <div class=\"panel-header\">\n    <div class=\"header-title\">\n      <i class=\"fa-solid fa-sliders-h\"></i>\n      <span>{{ viewEntity ? 'Edit View' : 'Configure View' }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Tab Navigation -->\n  <div class=\"tab-nav\" [class.icon-only]=\"isIconOnlyMode\">\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'columns'\"\n      (click)=\"setActiveTab('columns')\"\n      [title]=\"isIconOnlyMode ? 'Columns' : ''\">\n      <i class=\"fa-solid fa-columns\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Columns</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'sorting'\"\n      (click)=\"setActiveTab('sorting')\"\n      [title]=\"isIconOnlyMode ? 'Sorting' + (sortItems.length > 0 ? ' (' + sortItems.length + ')' : '') : ''\">\n      <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Sorting</span>\n      }\n      @if (sortItems.length > 0) {\n        <span class=\"tab-badge\">{{ sortItems.length }}</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'filters'\"\n      (click)=\"setActiveTab('filters')\"\n      [title]=\"isIconOnlyMode ? 'Filters' : ''\">\n      <i class=\"fa-solid fa-filter\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Filters</span>\n      }\n    </button>\n    <button\n      class=\"tab-btn\"\n      [class.active]=\"activeTab === 'aggregates'\"\n      (click)=\"setActiveTab('aggregates')\"\n      [title]=\"isIconOnlyMode ? 'Aggregates' + (enabledAggregatesCount > 0 ? ' (' + enabledAggregatesCount + ')' : '') : ''\">\n      <i class=\"fa-solid fa-chart-simple\"></i>\n      @if (!isIconOnlyMode) {\n        <span>Aggregates</span>\n      }\n      @if (enabledAggregatesCount > 0) {\n        <span class=\"tab-badge\">{{ enabledAggregatesCount }}</span>\n      }\n    </button>\n    @if (viewEntity) {\n      <button\n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'settings'\"\n        (click)=\"setActiveTab('settings')\"\n        [title]=\"isIconOnlyMode ? 'Settings' : ''\">\n        <i class=\"fa-solid fa-cog\"></i>\n        @if (!isIconOnlyMode) {\n          <span>Settings</span>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Panel Content -->\n  <div class=\"panel-content\">\n    <!-- Columns Tab -->\n    @if (activeTab === 'columns' && !formatEditingColumn) {\n      <div class=\"tab-content\">\n        <!-- Visible Columns -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Visible Columns</span>\n            <span class=\"column-count\">{{ visibleColumns.length }}</span>\n          </div>\n          <div class=\"column-list visible-columns\">\n            @for (column of visibleColumns; track column.fieldId; let i = $index) {\n              <!-- Drop indicator before -->\n              @if (isDropBefore(column)) {\n                <div class=\"drop-indicator\"></div>\n              }\n              <div\n                class=\"column-item\"\n                [class.dragging]=\"draggedColumn === column\"\n                [class.drop-target]=\"dropTargetColumn === column\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, column)\"\n                (dragover)=\"onDragOver($event, column)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, column)\"\n                (dragend)=\"onDragEnd($event)\">\n                <div class=\"drag-handle\">\n                  <i class=\"fa-solid fa-grip-vertical\"></i>\n                </div>\n                <span class=\"column-name\">\n                  {{ column.userDisplayName || column.displayName }}\n                  @if (column.userDisplayName) {\n                    <i class=\"fa-solid fa-pen-nib alias-indicator\" title=\"Custom name: {{ column.userDisplayName }}\"></i>\n                  }\n                  @if (hasCustomFormat(column)) {\n                    <i class=\"fa-solid fa-paintbrush format-indicator\" title=\"Custom formatting applied\"></i>\n                  }\n                </span>\n                <div class=\"column-actions\">\n                  <button\n                    class=\"action-btn format-btn\"\n                    (click)=\"openFormatEditor(column)\"\n                    title=\"Format column\">\n                    <i class=\"fa-solid fa-paintbrush\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn\"\n                    [disabled]=\"i === 0\"\n                    (click)=\"moveColumnUp(column)\"\n                    title=\"Move up\">\n                    <i class=\"fa-solid fa-chevron-up\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn\"\n                    [disabled]=\"i === visibleColumns.length - 1\"\n                    (click)=\"moveColumnDown(column)\"\n                    title=\"Move down\">\n                    <i class=\"fa-solid fa-chevron-down\"></i>\n                  </button>\n                  <button\n                    class=\"action-btn hide-btn\"\n                    (click)=\"toggleColumnVisibility(column)\"\n                    title=\"Hide column\">\n                    <i class=\"fa-solid fa-eye-slash\"></i>\n                  </button>\n                </div>\n              </div>\n              <!-- Drop indicator after (only for last item) -->\n              @if (isDropAfter(column) && i === visibleColumns.length - 1) {\n                <div class=\"drop-indicator\"></div>\n              }\n            }\n            @if (visibleColumns.length === 0) {\n              <div class=\"empty-list\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                <span>No columns visible. Add columns from below.</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Hidden Columns -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-eye-slash\"></i>\n            <span>Hidden Columns</span>\n            <span class=\"column-count\">{{ hiddenColumns.length }}</span>\n          </div>\n          @if (hiddenColumns.length > 5) {\n            <div class=\"column-search\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search columns...\"\n                [(ngModel)]=\"columnSearchText\"\n              />\n            </div>\n          }\n          <div class=\"column-list hidden-columns\">\n            @for (column of filteredHiddenColumns; track column.fieldId) {\n              <div class=\"column-item hidden\">\n                <span class=\"column-name\">{{ column.displayName }}</span>\n                <button\n                  class=\"action-btn show-btn\"\n                  (click)=\"toggleColumnVisibility(column)\"\n                  title=\"Show column\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n              </div>\n            }\n            @if (hiddenColumns.length === 0) {\n              <div class=\"empty-list\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n                <span>All columns are visible</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Column Format Editor Sub-Panel -->\n    @if (activeTab === 'columns' && formatEditingColumn) {\n      <div class=\"format-editor\">\n        <!-- Format Editor Header -->\n        <div class=\"format-editor-header\">\n          <button class=\"back-btn\" (click)=\"closeFormatEditor()\">\n            <i class=\"fa-solid fa-arrow-left\"></i>\n          </button>\n          <div class=\"format-editor-title\">\n            <span>Format: {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}</span>\n          </div>\n        </div>\n\n        <!-- Column Alias Section -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-pen-nib\"></i>\n            <span>Column Name</span>\n          </div>\n          <div class=\"format-row\">\n            <label>Display As</label>\n            <input type=\"text\" class=\"format-input\"\n                   [value]=\"formatEditingColumn.userDisplayName || ''\"\n                   (input)=\"updateUserDisplayName($any($event.target).value)\"\n                   [placeholder]=\"formatEditingColumn.displayName\" />\n          </div>\n          @if (formatEditingColumn.userDisplayName) {\n            <div class=\"format-row alias-info\">\n              <small class=\"muted-text\">Original: {{ formatEditingColumn.displayName }}</small>\n              <button class=\"clear-alias-btn\" (click)=\"formatEditingColumn.userDisplayName = undefined\" title=\"Clear alias\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          }\n        </div>\n\n        <!-- Preview Section -->\n        <div class=\"format-preview-section\">\n          <div class=\"preview-header\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Preview</span>\n          </div>\n          <div class=\"preview-table\">\n            <div class=\"preview-header-cell\"\n                 [style.font-weight]=\"formatEditingColumn.format?.headerStyle?.bold ? 'bold' : 'normal'\"\n                 [style.font-style]=\"formatEditingColumn.format?.headerStyle?.italic ? 'italic' : 'normal'\"\n                 [style.text-decoration]=\"formatEditingColumn.format?.headerStyle?.underline ? 'underline' : 'none'\"\n                 [style.color]=\"formatEditingColumn.format?.headerStyle?.color\"\n                 [style.background-color]=\"formatEditingColumn.format?.headerStyle?.backgroundColor\">\n              {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}\n            </div>\n            @for (value of getSampleValues(formatEditingColumn); track $index) {\n              <div class=\"preview-cell\"\n                   [style.text-align]=\"formatEditingColumn.format?.align || 'left'\"\n                   [style.font-weight]=\"formatEditingColumn.format?.cellStyle?.bold ? 'bold' : 'normal'\"\n                   [style.font-style]=\"formatEditingColumn.format?.cellStyle?.italic ? 'italic' : 'normal'\"\n                   [style.text-decoration]=\"formatEditingColumn.format?.cellStyle?.underline ? 'underline' : 'none'\"\n                   [style.color]=\"formatEditingColumn.format?.cellStyle?.color\"\n                   [style.background-color]=\"formatEditingColumn.format?.cellStyle?.backgroundColor\">\n                {{ formatPreviewValue(value, formatEditingColumn.format) }}\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Format Type -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-hashtag\"></i>\n            <span>Format Type</span>\n          </div>\n          <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.type\">\n            <option value=\"auto\">Auto (Smart Default)</option>\n            <option value=\"text\">Text</option>\n            <option value=\"number\">Number</option>\n            <option value=\"currency\">Currency</option>\n            <option value=\"percent\">Percent</option>\n            <option value=\"date\">Date</option>\n            <option value=\"datetime\">Date & Time</option>\n            <option value=\"boolean\">Boolean</option>\n          </select>\n        </div>\n\n        <!-- Type-Specific Options -->\n        @if (formatEditingColumn.format?.type === 'number' || formatEditingColumn.format?.type === 'currency' || formatEditingColumn.format?.type === 'percent') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-sliders\"></i>\n              <span>Number Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>Decimal Places</label>\n              <input type=\"number\" class=\"format-input small\" min=\"0\" max=\"10\"\n                     [(ngModel)]=\"formatEditingColumn.format!.decimals\" />\n            </div>\n            @if (formatEditingColumn.format?.type === 'currency') {\n              <div class=\"format-row\">\n                <label>Currency</label>\n                <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.currencyCode\">\n                  <option value=\"USD\">USD ($)</option>\n                  <option value=\"EUR\">EUR (\u20AC)</option>\n                  <option value=\"GBP\">GBP (\u00A3)</option>\n                  <option value=\"JPY\">JPY (\u00A5)</option>\n                  <option value=\"CAD\">CAD ($)</option>\n                  <option value=\"AUD\">AUD ($)</option>\n                </select>\n              </div>\n            }\n            <div class=\"format-row\">\n              <label>Thousands Separator</label>\n              <input type=\"checkbox\" [(ngModel)]=\"formatEditingColumn.format!.thousandsSeparator\" />\n            </div>\n          </div>\n        }\n\n        @if (formatEditingColumn.format?.type === 'date' || formatEditingColumn.format?.type === 'datetime') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-calendar\"></i>\n              <span>Date Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>Format</label>\n              <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.dateFormat\">\n                <option value=\"short\">Short (1/15/25)</option>\n                <option value=\"short-weekday\">Short + Day (Wed, 1/15/25)</option>\n                <option value=\"medium\">Medium (Jan 15, 2025)</option>\n                <option value=\"medium-weekday\">Medium + Day (Wed, Jan 15, 2025)</option>\n                <option value=\"long\">Long (January 15, 2025)</option>\n                <option value=\"long-weekday\">Long + Day (Wednesday, January 15, 2025)</option>\n              </select>\n            </div>\n          </div>\n        }\n\n        @if (formatEditingColumn.format?.type === 'boolean') {\n          <div class=\"format-section\">\n            <div class=\"format-section-header\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              <span>Boolean Options</span>\n            </div>\n            <div class=\"format-row\">\n              <label>True Label</label>\n              <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.trueLabel\" placeholder=\"Yes\" />\n            </div>\n            <div class=\"format-row\">\n              <label>False Label</label>\n              <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.falseLabel\" placeholder=\"No\" />\n            </div>\n            <div class=\"format-row\">\n              <label>Display As</label>\n              <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.booleanDisplay\">\n                <option value=\"text\">Text</option>\n                <option value=\"checkbox\">Checkbox</option>\n                <option value=\"icon\">Icon</option>\n              </select>\n            </div>\n          </div>\n        }\n\n        <!-- Alignment -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-align-left\"></i>\n            <span>Alignment</span>\n          </div>\n          <div class=\"alignment-toggle\">\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'left' || !formatEditingColumn.format?.align\"\n                    (click)=\"formatEditingColumn.format!.align = 'left'\" title=\"Left\">\n              <i class=\"fa-solid fa-align-left\"></i>\n            </button>\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'center'\"\n                    (click)=\"formatEditingColumn.format!.align = 'center'\" title=\"Center\">\n              <i class=\"fa-solid fa-align-center\"></i>\n            </button>\n            <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'right'\"\n                    (click)=\"formatEditingColumn.format!.align = 'right'\" title=\"Right\">\n              <i class=\"fa-solid fa-align-right\"></i>\n            </button>\n          </div>\n        </div>\n\n        <!-- Header Style -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-heading\"></i>\n            <span>Header Style</span>\n          </div>\n          <div class=\"style-buttons\">\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.bold\"\n                    (click)=\"toggleHeaderStyle('bold')\"\n                    title=\"Bold\">\n              <i class=\"fa-solid fa-bold\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.italic\"\n                    (click)=\"toggleHeaderStyle('italic')\"\n                    title=\"Italic\">\n              <i class=\"fa-solid fa-italic\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.underline\"\n                    (click)=\"toggleHeaderStyle('underline')\"\n                    title=\"Underline\">\n              <i class=\"fa-solid fa-underline\"></i>\n            </button>\n          </div>\n          <div class=\"format-row\">\n            <label>Text Color</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.headerStyle?.color || '#000000'\"\n                   (input)=\"updateHeaderColor('color', $any($event.target).value)\" />\n          </div>\n          <div class=\"format-row\">\n            <label>Background</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.headerStyle?.backgroundColor || '#ffffff'\"\n                   (input)=\"updateHeaderColor('backgroundColor', $any($event.target).value)\" />\n          </div>\n        </div>\n\n        <!-- Cell Style -->\n        <div class=\"format-section\">\n          <div class=\"format-section-header\">\n            <i class=\"fa-solid fa-table-cells\"></i>\n            <span>Cell Style</span>\n          </div>\n          <div class=\"style-buttons\">\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.bold\"\n                    (click)=\"toggleCellStyle('bold')\"\n                    title=\"Bold\">\n              <i class=\"fa-solid fa-bold\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.italic\"\n                    (click)=\"toggleCellStyle('italic')\"\n                    title=\"Italic\">\n              <i class=\"fa-solid fa-italic\"></i>\n            </button>\n            <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.underline\"\n                    (click)=\"toggleCellStyle('underline')\"\n                    title=\"Underline\">\n              <i class=\"fa-solid fa-underline\"></i>\n            </button>\n          </div>\n          <div class=\"format-row\">\n            <label>Text Color</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.cellStyle?.color || '#000000'\"\n                   (input)=\"updateCellColor('color', $any($event.target).value)\" />\n          </div>\n          <div class=\"format-row\">\n            <label>Background</label>\n            <input type=\"color\" class=\"color-input\"\n                   [value]=\"formatEditingColumn.format?.cellStyle?.backgroundColor || '#ffffff'\"\n                   (input)=\"updateCellColor('backgroundColor', $any($event.target).value)\" />\n          </div>\n        </div>\n\n        <!-- Clear Format Button -->\n        <div class=\"format-actions\">\n          <button class=\"clear-format-btn\" (click)=\"clearColumnFormat(formatEditingColumn); closeFormatEditor()\">\n            <i class=\"fa-solid fa-eraser\"></i>\n            Clear Formatting\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Sorting Tab -->\n    @if (activeTab === 'sorting') {\n      <div class=\"tab-content\">\n        <div class=\"config-section sorting-section\">\n          <div class=\"sorting-header\">\n            <p class=\"sorting-description\">\n              Define how records should be ordered. Add multiple levels to sort by secondary fields when values are equal.\n            </p>\n          </div>\n\n          <!-- Add Sort Button -->\n          <button\n            class=\"add-sort-btn\"\n            (click)=\"addSortLevel()\"\n            [disabled]=\"!canEdit || sortItems.length >= sortableFields.length\"\n            title=\"Add another sort level\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Sort Level</span>\n          </button>\n\n          <!-- Sort Items List -->\n          @if (sortItems.length > 0) {\n            <div class=\"sort-items-list\">\n              @for (sortItem of sortItems; track $index; let i = $index) {\n                <!-- Drop indicator before -->\n                @if (isSortDropBefore(sortItem)) {\n                  <div class=\"sort-drop-indicator\"></div>\n                }\n                <div\n                  class=\"sort-item\"\n                  [class.dragging]=\"draggedSortItem === sortItem\"\n                  [class.drop-target]=\"dropTargetSortItem === sortItem\"\n                  draggable=\"true\"\n                  (dragstart)=\"onSortDragStart($event, sortItem)\"\n                  (dragover)=\"onSortDragOver($event, sortItem)\"\n                  (dragleave)=\"onSortDragLeave($event)\"\n                  (drop)=\"onSortDrop($event, sortItem)\"\n                  (dragend)=\"onSortDragEnd($event)\">\n                  <!-- Priority Badge -->\n                  <div class=\"sort-priority-badge\">{{ i + 1 }}</div>\n                  <!-- Drag Handle -->\n                  <div class=\"sort-drag-handle\" title=\"Drag to reorder\">\n                    <i class=\"fa-solid fa-grip-vertical\"></i>\n                  </div>\n                  <!-- Field Dropdown -->\n                  <select\n                    class=\"sort-field-dropdown\"\n                    [(ngModel)]=\"sortItem.field\"\n                    (ngModelChange)=\"onSortFieldChange(sortItem, $event)\"\n                    [disabled]=\"!canEdit\">\n                    @for (field of sortableFields; track field.ID) {\n                      <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n                    }\n                  </select>\n                  <!-- Direction Toggle -->\n                  <div class=\"sort-direction-toggle\">\n                    <button\n                      class=\"direction-btn\"\n                      [class.active]=\"sortItem.direction === 'asc'\"\n                      (click)=\"onSortDirectionChange(sortItem, 'asc')\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Ascending (A-Z, 1-9)\">\n                      <i class=\"fa-solid fa-arrow-up\"></i>\n                    </button>\n                    <button\n                      class=\"direction-btn\"\n                      [class.active]=\"sortItem.direction === 'desc'\"\n                      (click)=\"onSortDirectionChange(sortItem, 'desc')\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Descending (Z-A, 9-1)\">\n                      <i class=\"fa-solid fa-arrow-down\"></i>\n                    </button>\n                  </div>\n                  <!-- Remove Button -->\n                  <button\n                    class=\"sort-remove-btn\"\n                    (click)=\"removeSortLevel(sortItem)\"\n                    [disabled]=\"!canEdit\"\n                    title=\"Remove sort level\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                <!-- Drop indicator after (only for last item) -->\n                @if (isSortDropAfter(sortItem) && i === sortItems.length - 1) {\n                  <div class=\"sort-drop-indicator\"></div>\n                }\n              }\n            </div>\n            <!-- Multi-sort hint -->\n            @if (sortItems.length > 1) {\n              <div class=\"sort-hint\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                <span>Drag items to change priority. Records sort by first level, then second, etc.</span>\n              </div>\n            }\n          } @else {\n            <div class=\"sort-empty-state\">\n              <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n              <span>No sorting configured</span>\n              <p class=\"sort-empty-hint\">Click \"Add Sort Level\" to define how records should be ordered</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Filters Tab -->\n    @if (activeTab === 'filters') {\n      <div class=\"tab-content\">\n        <!-- Filter Mode Selection -->\n        <div class=\"filter-mode-selector\">\n          <button\n            class=\"filter-mode-btn\"\n            [class.active]=\"filterMode === 'smart'\"\n            (click)=\"setFilterMode('smart')\"\n            [disabled]=\"!canEdit\">\n            <div class=\"mode-icon\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n            </div>\n            <div class=\"mode-content\">\n              <span class=\"mode-title\">Smart Filter</span>\n              <span class=\"mode-subtitle\">Use AI to filter with natural language</span>\n            </div>\n            @if (filterMode === 'smart') {\n              <i class=\"fa-solid fa-check mode-check\"></i>\n            }\n          </button>\n          <button\n            class=\"filter-mode-btn\"\n            [class.active]=\"filterMode === 'traditional'\"\n            (click)=\"setFilterMode('traditional')\"\n            [disabled]=\"!canEdit\">\n            <div class=\"mode-icon\">\n              <i class=\"fa-solid fa-sliders\"></i>\n            </div>\n            <div class=\"mode-content\">\n              <span class=\"mode-title\">Traditional Filter</span>\n              <span class=\"mode-subtitle\">Build filters with field/operator/value</span>\n            </div>\n            @if (filterMode === 'traditional') {\n              <i class=\"fa-solid fa-check mode-check\"></i>\n            }\n          </button>\n        </div>\n\n        <!-- Smart Filter Section -->\n        @if (filterMode === 'smart') {\n          <div class=\"config-section smart-filter-section\">\n            <div class=\"smart-filter-input-container\">\n              <div class=\"smart-filter-icon\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              </div>\n              <textarea\n                id=\"smartFilterPrompt\"\n                class=\"smart-filter-textarea\"\n                placeholder=\"Describe what you're looking for...\"\n                [(ngModel)]=\"smartFilterPrompt\"\n                [disabled]=\"!canEdit\"\n                rows=\"3\"\n              ></textarea>\n            </div>\n\n            @if (smartFilterExplanation) {\n              <div class=\"smart-filter-explanation\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <span>{{ smartFilterExplanation }}</span>\n              </div>\n            }\n\n            <!-- Example Prompts -->\n            <div class=\"smart-filter-examples\">\n              <div class=\"examples-header\">\n                <i class=\"fa-solid fa-lightbulb\"></i>\n                <span>Try these examples:</span>\n              </div>\n              <div class=\"example-chips\">\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Show records created in the last 30 days')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-regular fa-calendar\"></i>\n                  Last 30 days\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Active records only')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-circle-check\"></i>\n                  Active only\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Records with high priority')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-star\"></i>\n                  High priority\n                </button>\n                <button\n                  class=\"example-chip\"\n                  (click)=\"applySmartFilterExample('Records modified this week')\"\n                  [disabled]=\"!canEdit\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Modified this week\n                </button>\n              </div>\n            </div>\n\n            <div class=\"smart-filter-tip\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <span>The AI will interpret your description and create the appropriate filter when you save the view.</span>\n            </div>\n          </div>\n        }\n\n        <!-- Traditional Filter Section -->\n        @if (filterMode === 'traditional') {\n          <div class=\"config-section traditional-filter-section\">\n            <div class=\"filter-summary-container\">\n              <div class=\"filter-summary\">\n                <div class=\"summary-info\">\n                  @if (getFilterCount() > 0) {\n                    <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n                    <span class=\"summary-text\">{{ getFilterSummary() }}</span>\n                  } @else {\n                    <span class=\"summary-text no-filters\">No filters configured</span>\n                  }\n                </div>\n                <div class=\"summary-actions\">\n                  @if (getFilterCount() > 0 && canEdit) {\n                    <button\n                      class=\"summary-btn clear-btn\"\n                      (click)=\"clearFilters()\"\n                      title=\"Clear all filters\">\n                      <i class=\"fa-solid fa-times\"></i>\n                      Clear\n                    </button>\n                  }\n                  <button\n                    class=\"summary-btn edit-btn primary\"\n                    (click)=\"openFilterDialog()\"\n                    [disabled]=\"!canEdit && getFilterCount() === 0\"\n                    title=\"Edit filters\">\n                    <i class=\"fa-solid fa-pen\"></i>\n                    {{ getFilterCount() > 0 ? 'Edit Filters' : 'Add Filters' }}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"traditional-filter-tip\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <span>Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Aggregates Tab -->\n    @if (activeTab === 'aggregates') {\n      <div class=\"tab-content\">\n        <div class=\"config-section aggregates-section\">\n          <div class=\"aggregates-header\">\n            <p class=\"aggregates-description\">\n              Add summary calculations like totals, averages, and counts. Display them in cards or as column footers.\n            </p>\n          </div>\n\n          <!-- Add Aggregate Button -->\n          <button\n            class=\"add-aggregate-btn\"\n            (click)=\"openAddAggregateDialog()\"\n            [disabled]=\"!canEdit\"\n            title=\"Add a new aggregate\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>Add Aggregate</span>\n          </button>\n\n          <!-- Aggregates List -->\n          @if (aggregates.length > 0) {\n            <div class=\"aggregates-list\">\n              @for (agg of aggregates; track agg.id; let i = $index) {\n                <div class=\"aggregate-item\" [class.disabled]=\"agg.enabled === false\">\n                  <!-- Icon -->\n                  <div class=\"agg-icon\">\n                    <i [class]=\"agg.icon || 'fa-solid fa-chart-simple'\"></i>\n                  </div>\n\n                  <!-- Content -->\n                  <div class=\"agg-content\">\n                    <div class=\"agg-label\">{{ agg.label }}</div>\n                    <div class=\"agg-details\">\n                      <span class=\"agg-type\">\n                        <i [class]=\"agg.displayType === 'card' ? 'fa-solid fa-id-card' : 'fa-solid fa-table-columns'\"></i>\n                        {{ agg.displayType === 'card' ? 'Card' : 'Column Footer' }}\n                      </span>\n                      @if (agg.smartPrompt) {\n                        <span class=\"agg-smart-badge\" title=\"AI-generated\">\n                          <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- Actions -->\n                  <div class=\"agg-actions\">\n                    <button\n                      class=\"agg-action-btn\"\n                      [disabled]=\"i === 0 || !canEdit\"\n                      (click)=\"moveAggregateUp(agg)\"\n                      title=\"Move up\">\n                      <i class=\"fa-solid fa-chevron-up\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn\"\n                      [disabled]=\"i === aggregates.length - 1 || !canEdit\"\n                      (click)=\"moveAggregateDown(agg)\"\n                      title=\"Move down\">\n                      <i class=\"fa-solid fa-chevron-down\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn toggle-btn\"\n                      [class.enabled]=\"agg.enabled !== false\"\n                      (click)=\"toggleAggregateEnabled(agg, $event)\"\n                      [disabled]=\"!canEdit\"\n                      [title]=\"agg.enabled !== false ? 'Disable' : 'Enable'\">\n                      <i [class]=\"agg.enabled !== false ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn edit-btn\"\n                      (click)=\"editAggregate(agg)\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Edit\">\n                      <i class=\"fa-solid fa-pen\"></i>\n                    </button>\n                    <button\n                      class=\"agg-action-btn remove-btn\"\n                      (click)=\"removeAggregate(agg)\"\n                      [disabled]=\"!canEdit\"\n                      title=\"Remove\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Summary -->\n            <div class=\"aggregates-summary\">\n              <div class=\"summary-item\">\n                <i class=\"fa-solid fa-id-card\"></i>\n                <span>{{ cardAggregates.length }} card{{ cardAggregates.length !== 1 ? 's' : '' }}</span>\n              </div>\n              <div class=\"summary-item\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                <span>{{ columnAggregates.length }} column footer{{ columnAggregates.length !== 1 ? 's' : '' }}</span>\n              </div>\n            </div>\n          } @else {\n            <div class=\"aggregates-empty-state\">\n              <i class=\"fa-solid fa-chart-simple\"></i>\n              <span>No aggregates configured</span>\n              <p class=\"empty-hint\">Click \"Add Aggregate\" to create summary calculations</p>\n            </div>\n          }\n\n          <!-- Info Tip -->\n          <div class=\"aggregates-tip\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Aggregates are calculated server-side for accuracy with filtered/paginated data.</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Settings Tab -->\n    @if (activeTab === 'settings') {\n      <div class=\"tab-content\">\n        <!-- View Name & Description -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>View Details</span>\n          </div>\n          <div class=\"form-group\">\n            <label for=\"viewName\">Name</label>\n            <input\n              id=\"viewName\"\n              type=\"text\"\n              class=\"form-input\"\n              [class.invalid]=\"!viewName || !viewName.trim()\"\n              placeholder=\"Enter view name...\"\n              [(ngModel)]=\"viewName\"\n              [disabled]=\"!canEdit\"\n            />\n            @if (!viewName || !viewName.trim()) {\n              <span class=\"validation-error\">View name is required</span>\n            }\n          </div>\n          <div class=\"form-group\">\n            <label for=\"viewDescription\">Description</label>\n            <textarea\n              id=\"viewDescription\"\n              class=\"form-input form-textarea\"\n              placeholder=\"Describe this view...\"\n              [(ngModel)]=\"viewDescription\"\n              [disabled]=\"!canEdit\"\n              rows=\"3\"\n            ></textarea>\n          </div>\n        </div>\n\n        <!-- Sharing -->\n        <div class=\"config-section\">\n          <div class=\"section-header\">\n            <i class=\"fa-solid fa-share-alt\"></i>\n            <span>Sharing</span>\n          </div>\n          <label class=\"checkbox-label\">\n            <input\n              type=\"checkbox\"\n              [(ngModel)]=\"isShared\"\n              [disabled]=\"!canEdit\"\n            />\n            <span class=\"checkbox-text\">\n              <strong>Share with others</strong>\n              <small>Allow other users to use this view</small>\n            </span>\n          </label>\n        </div>\n\n        <!-- Danger Zone -->\n        @if (viewEntity && canDelete) {\n          <div class=\"config-section danger-zone\">\n            <div class=\"section-header\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              <span>Danger Zone</span>\n            </div>\n            <button class=\"delete-btn\" (click)=\"onDelete()\">\n              <i class=\"fa-solid fa-trash\"></i>\n              <span>Delete View</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Validation Errors Banner -->\n  @if (ValidationErrors.length > 0 && visibleColumns.length === 0) {\n    <div class=\"validation-banner\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>At least one column must be visible</span>\n    </div>\n  }\n\n  <!-- Panel Footer -->\n  <div class=\"panel-footer\">\n    <!-- Action buttons on LEFT -->\n    <div class=\"footer-left\">\n      @if (viewEntity && canEdit) {\n        <!-- Editing an existing saved view -->\n        <button\n          class=\"footer-btn save-btn primary\"\n          (click)=\"onSave()\"\n          [disabled]=\"isSaving || !IsValid\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-save\"></i>\n          }\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n      }\n      @if (!viewEntity) {\n        <!-- Default/Dynamic view - Save to user settings -->\n        <button\n          class=\"footer-btn save-btn primary\"\n          (click)=\"onSaveDefaults()\"\n          [disabled]=\"isSaving\">\n          @if (isSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          } @else {\n            <i class=\"fa-solid fa-save\"></i>\n          }\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n      }\n    </div>\n    <!-- Cancel button on RIGHT -->\n    <button class=\"footer-btn cancel-btn\" (click)=\"onClose()\">\n      Cancel\n    </button>\n  </div>\n</div>\n\n<!-- Aggregate Setup Dialog -->\n<mj-aggregate-setup-dialog\n  [Entity]=\"entity\"\n  [Aggregate]=\"editingAggregate\"\n  [IsOpen]=\"showAggregateDialog\"\n  (Close)=\"closeAggregateDialog()\"\n  (Save)=\"onAggregateSave($event)\">\n</mj-aggregate-setup-dialog>\n\n<!-- Delete Confirmation Dialog -->\n<mj-ev-confirm-dialog\n  [IsOpen]=\"showDeleteConfirm\"\n  Title=\"Delete View\"\n  [Message]=\"'Are you sure you want to delete \\'' + viewName + '\\'?'\"\n  DetailMessage=\"This action cannot be undone. All users who have access to this view will lose it.\"\n  ConfirmText=\"Delete\"\n  ConfirmStyle=\"danger\"\n  Icon=\"fa-solid fa-trash\"\n  (Confirmed)=\"OnDeleteConfirmed()\"\n  (Cancelled)=\"OnDeleteCancelled()\">\n</mj-ev-confirm-dialog>\n\n<!-- Filter Mode Switch Confirmation Dialog (BUG-006) -->\n<mj-ev-confirm-dialog\n  [IsOpen]=\"showFilterModeSwitchConfirm\"\n  Title=\"Switch Filter Mode\"\n  [Message]=\"filterMode === 'smart' ? 'Switching to Traditional mode will clear your smart filter prompt.' : 'Switching to Smart mode will clear your traditional filter rules.'\"\n  DetailMessage=\"You can switch back later, but the current filter data will be lost.\"\n  ConfirmText=\"Switch\"\n  ConfirmStyle=\"primary\"\n  Icon=\"fa-solid fa-exchange-alt\"\n  (Confirmed)=\"OnFilterModeSwitchConfirmed()\"\n  (Cancelled)=\"OnFilterModeSwitchCancelled()\">\n</mj-ev-confirm-dialog>\n", styles: ["/* Backdrop */\n.panel-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* Sliding Panel */\n.config-panel {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: 100%;\n  background: white;\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open {\n  transform: translateX(0);\n}\n\n.config-panel.resizing {\n  transition: none;\n  user-select: none;\n}\n\n/* Resize Handle */\n.resize-handle {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle:hover,\n.config-panel.resizing .resize-handle {\n  background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip {\n  width: 3px;\n  height: 40px;\n  background: #cbd5e1;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.config-panel.resizing .resize-grip {\n  opacity: 1;\n  background: #1976d2;\n}\n\n/* Panel Header */\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n.header-title i {\n  color: #1976d2;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n/* Tab Navigation */\n.tab-nav {\n  display: flex;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.tab-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 2px solid transparent;\n}\n\n.tab-btn:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.tab-btn.active {\n  color: #1976d2;\n  border-bottom-color: #1976d2;\n  background: transparent;\n}\n\n.tab-btn i {\n  font-size: 12px;\n}\n\n.tab-badge {\n  background: #1976d2;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 8px;\n  margin-left: 4px;\n}\n\n/* Icon-only mode for narrow panels */\n.tab-nav.icon-only .tab-btn {\n  padding: 12px 8px;\n  gap: 4px;\n}\n\n.tab-nav.icon-only .tab-btn i {\n  font-size: 14px;\n}\n\n.tab-nav.icon-only .tab-badge {\n  margin-left: 0;\n  padding: 2px 4px;\n  font-size: 9px;\n}\n\n/* Panel Content */\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 16px 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.tab-content {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Config Sections */\n.config-section {\n  margin-bottom: 24px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.column-count {\n  margin-left: auto;\n  background: #e3f2fd;\n  color: #1976d2;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n}\n\n/* Sort Configuration */\n.sort-config {\n  display: flex;\n  gap: 8px;\n}\n\n.sort-field-select {\n  flex: 1;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-direction-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.direction-btn {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.direction-btn:hover {\n  color: #333;\n}\n\n.direction-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ========================================\n   MULTI-SORT CONFIGURATION\n   ======================================== */\n\n.add-sort-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-sort-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-sort-btn i {\n  font-size: 12px;\n}\n\n/* Sort Items List */\n.sort-items-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n/* Sort Item */\n.sort-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.sort-item:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.sort-item.dragging {\n  opacity: 0.5;\n  background: #e3f2fd;\n  border-color: #1976d2;\n}\n\n.sort-item.drop-target {\n  border-color: #1976d2;\n}\n\n/* Priority Badge */\n.sort-priority-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  height: 24px;\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 700;\n  color: white;\n  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n}\n\n/* Drag Handle */\n.sort-drag-handle {\n  color: #bdbdbd;\n  cursor: grab;\n  padding: 4px;\n  transition: color 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sort-drag-handle:hover {\n  color: #757575;\n}\n\n.sort-item.dragging .sort-drag-handle {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n/* Sort Field Dropdown */\n.sort-field-dropdown {\n  flex: 1;\n  min-width: 120px;\n  padding: 8px 10px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 13px;\n  background: white;\n  cursor: pointer;\n}\n\n.sort-field-dropdown:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.sort-field-dropdown:disabled {\n  background: #f5f5f5;\n  color: #999;\n  cursor: not-allowed;\n}\n\n/* Sort Remove Button */\n.sort-remove-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #bdbdbd;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sort-remove-btn:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.sort-remove-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n/* Sort Drop Indicator */\n.sort-drop-indicator {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes sortDropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Sort Hint */\n.sort-hint {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 10px 12px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.sort-hint i {\n  color: #1976d2;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* Sorting Section Styles */\n.sorting-section {\n  padding-top: 0;\n}\n\n.sorting-header {\n  margin-bottom: 16px;\n}\n\n.sorting-description {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n/* Sort Empty State */\n.sort-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.sort-empty-state i {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.sort-empty-hint {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n/* Column Lists */\n.column-list {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.column-list.visible-columns {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.column-list.hidden-columns {\n  flex: 1;\n  min-height: 100px;\n  overflow-y: auto;\n}\n\n/* Hidden columns section should expand to fill available space */\n.config-section:last-child {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  margin-bottom: 0;\n}\n\n.column-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: white;\n  border-bottom: 1px solid #f0f0f0;\n  transition: background 0.1s ease;\n  position: relative;\n}\n\n.column-item:last-child {\n  border-bottom: none;\n}\n\n.column-item:hover {\n  background: #f5f7fa;\n}\n\n.column-item.hidden {\n  background: #fafafa;\n}\n\n.column-item.hidden:hover {\n  background: #f0f0f0;\n}\n\n/* ========================================\n   DRAG & DROP INDICATOR STYLES\n   ======================================== */\n\n/* Drop indicator line element - shows where the column will be placed */\n.drop-indicator {\n  height: 3px;\n  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n  border-radius: 2px;\n  margin: 0 12px;\n  box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n  animation: dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes dropIndicatorPulse {\n  0%, 100% { opacity: 1; transform: scaleX(1); }\n  50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Highlight the column being dragged */\n.column-item.dragging {\n  opacity: 0.5;\n  background: #e3f2fd;\n}\n\n/* Visual feedback during drag over */\n.column-item.drag-over {\n  background: #f5f7fa;\n}\n\n.drag-handle {\n  cursor: grab;\n  color: #999;\n  padding: 4px;\n  transition: color 0.15s ease;\n}\n\n.drag-handle:hover {\n  color: #666;\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n  color: #1976d2;\n}\n\n.column-name {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.column-name .format-indicator {\n  font-size: 10px;\n  color: #1976d2;\n  opacity: 0.7;\n}\n\n.column-name .alias-indicator {\n  font-size: 10px;\n  color: #7b1fa2;\n  opacity: 0.8;\n}\n\n.column-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.action-btn:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.action-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn:hover {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.action-btn.show-btn:hover {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.action-btn.format-btn:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.action-btn.format-btn.has-format {\n  color: #1976d2;\n  background: #e3f2fd;\n}\n\n.empty-list {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 13px;\n}\n\n/* Column Search */\n.column-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 8px;\n}\n\n.column-search i {\n  color: #999;\n  font-size: 12px;\n}\n\n.column-search input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 14px;\n}\n\n/* ========================================\n   COLUMN FORMAT EDITOR SUB-PANEL\n   ======================================== */\n\n.format-editor-panel {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: white;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  animation: slideInFromRight 0.2s ease;\n}\n\n@keyframes slideInFromRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n.format-editor-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-back-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n}\n\n.format-back-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-header-title {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.format-header-title span:first-child {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-header-title span:last-child {\n  font-size: 12px;\n  color: #666;\n}\n\n.format-editor-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Format Preview Section */\n.format-preview-section {\n  margin-bottom: 24px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.preview-header i {\n  color: #3b82f6;\n}\n\n.preview-samples {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.preview-sample {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label {\n  font-size: 12px;\n  color: #94a3b8;\n  min-width: 60px;\n}\n\n.preview-value {\n  flex: 1;\n  font-size: 14px;\n  font-family: 'SF Mono', 'Monaco', monospace;\n  color: #1e293b;\n}\n\n/* Format Type Selection */\n.format-type-section {\n  margin-bottom: 24px;\n}\n\n.format-type-section .section-label {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-type-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n\n.format-type-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 8px;\n  border: 2px solid #e5e7eb;\n  border-radius: 10px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-type-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.format-type-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.format-type-btn i {\n  font-size: 18px;\n  color: #64748b;\n}\n\n.format-type-btn.active i {\n  color: #3b82f6;\n}\n\n.format-type-btn span {\n  font-size: 11px;\n  font-weight: 500;\n  color: #64748b;\n}\n\n.format-type-btn.active span {\n  color: #1d4ed8;\n}\n\n/* Format Options Section */\n.format-options-section {\n  margin-bottom: 24px;\n}\n\n.format-options-section .section-label {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-option-group {\n  margin-bottom: 16px;\n}\n\n.format-option-group label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.format-option-group input,\n.format-option-group select {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.format-option-group input:focus,\n.format-option-group select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-option-row {\n  display: flex;\n  gap: 12px;\n}\n\n.format-option-row .format-option-group {\n  flex: 1;\n}\n\n.format-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.format-checkbox input[type=\"checkbox\"] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.format-checkbox span {\n  font-size: 14px;\n  color: #333;\n}\n\n/* Alignment Options */\n.alignment-options {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.align-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.align-btn i {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.align-btn.active i {\n  color: #3b82f6;\n}\n\n/* Style Section */\n.style-section {\n  margin-bottom: 24px;\n}\n\n.style-section .section-label {\n  display: block;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.style-toggle-group {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-toggle-btn {\n  width: 40px;\n  height: 40px;\n  border: 2px solid #e5e7eb;\n  border-radius: 8px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-toggle-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-toggle-btn.active {\n  border-color: #3b82f6;\n  background: #eff6ff;\n}\n\n.style-toggle-btn i {\n  font-size: 16px;\n  color: #64748b;\n}\n\n.style-toggle-btn.active i {\n  color: #3b82f6;\n}\n\n.color-picker-row {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.color-picker-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.color-picker-group label {\n  font-size: 13px;\n  color: #64748b;\n  min-width: 80px;\n}\n\n.color-picker-group input[type=\"color\"] {\n  width: 40px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.color-clear-btn {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n}\n\n.color-clear-btn:hover {\n  background: #f5f5f5;\n  color: #666;\n}\n\n/* Format Editor Footer */\n.format-editor-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.format-footer-left {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.format-footer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.format-footer-btn:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.format-footer-btn.primary {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.format-footer-btn.primary:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.format-footer-btn.danger {\n  color: #c62828;\n  border-color: #c62828;\n}\n\n.format-footer-btn.danger:hover:not(:disabled) {\n  background: #c62828;\n  color: white;\n}\n\n/* Filter Summary Container */\n.filter-summary-container {\n  padding: 4px 0;\n}\n\n.filter-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: #f5f7fa;\n  border-radius: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.summary-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge {\n  background: #1976d2;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  min-width: 20px;\n  text-align: center;\n}\n\n.summary-text {\n  font-size: 14px;\n  color: #333;\n}\n\n.summary-text.no-filters {\n  color: #999;\n}\n\n.summary-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.summary-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn i {\n  font-size: 11px;\n}\n\n.summary-btn.clear-btn {\n  background: transparent;\n  color: #c62828;\n  border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn:hover:not(:disabled) {\n  background: #ffebee;\n  border-color: #c62828;\n}\n\n.summary-btn.edit-btn {\n  background: #1976d2;\n  color: white;\n}\n\n.summary-btn.edit-btn:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n/* ========================================\n   FILTER MODE SELECTOR\n   ======================================== */\n\n.filter-mode-selector {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid #e5e7eb;\n  border-radius: 12px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.filter-mode-btn:hover:not(:disabled) {\n  border-color: #d1d5db;\n  background: #f9fafb;\n}\n\n.filter-mode-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.filter-mode-btn.active {\n  border-color: #3b82f6;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn .mode-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background: #f3f4f6;\n  color: #6b7280;\n  font-size: 16px;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active .mode-icon {\n  background: #3b82f6;\n  color: white;\n}\n\n.filter-mode-btn .mode-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.filter-mode-btn .mode-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.filter-mode-btn .mode-subtitle {\n  font-size: 12px;\n  color: #6b7280;\n}\n\n.filter-mode-btn.active .mode-title {\n  color: #1d4ed8;\n}\n\n.filter-mode-btn .mode-check {\n  color: #3b82f6;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n/* ========================================\n   SMART FILTER SECTION\n   ======================================== */\n\n.smart-filter-section {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.smart-filter-input-container {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n  border: 1px solid #bae6fd;\n  border-radius: 12px;\n  margin-bottom: 16px;\n}\n\n.smart-filter-icon {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n  border-radius: 10px;\n  color: white;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.smart-filter-input-container .smart-filter-textarea {\n  flex: 1;\n  border: none;\n  background: white;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 14px;\n  line-height: 1.5;\n  resize: none;\n  min-height: 60px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea::placeholder {\n  color: #9ca3af;\n}\n\n.smart-filter-explanation {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 12px;\n  background: #e3f2fd;\n  border-radius: 6px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  color: #1565c0;\n}\n\n.smart-filter-explanation i {\n  color: #1976d2;\n  font-size: 14px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n/* Smart Filter Examples */\n.smart-filter-examples {\n  margin-bottom: 16px;\n}\n\n.examples-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n}\n\n.examples-header i {\n  color: #f59e0b;\n}\n\n.example-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.example-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  color: #4b5563;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.example-chip:hover:not(:disabled) {\n  border-color: #3b82f6;\n  background: #eff6ff;\n  color: #1d4ed8;\n}\n\n.example-chip:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip i {\n  font-size: 11px;\n  color: #9ca3af;\n}\n\n.example-chip:hover:not(:disabled) i {\n  color: #3b82f6;\n}\n\n/* Smart Filter Tip */\n.smart-filter-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.smart-filter-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* ========================================\n   TRADITIONAL FILTER SECTION\n   ======================================== */\n\n.traditional-filter-section {\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n\n.traditional-filter-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n  margin-top: 12px;\n}\n\n.traditional-filter-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary {\n  background: #3b82f6;\n  color: white;\n  border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary:hover:not(:disabled) {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n\n/* Form Elements */\n.form-group {\n  margin-bottom: 16px;\n}\n\n.form-group label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n}\n\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.form-input:disabled {\n  background: #f5f5f5;\n  color: #999;\n}\n\n.form-textarea {\n  resize: vertical;\n  min-height: 80px;\n}\n\n/* Checkbox */\n.checkbox-label {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n\n.checkbox-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text strong {\n  font-size: 14px;\n  color: #333;\n}\n\n.checkbox-text small {\n  font-size: 12px;\n  color: #666;\n}\n\n/* Danger Zone */\n.danger-zone {\n  padding-top: 16px;\n  border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone .section-header {\n  color: #c62828;\n}\n\n.danger-zone .section-header i {\n  color: #c62828;\n}\n\n.delete-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #c62828;\n  background: transparent;\n  border-radius: 6px;\n  color: #c62828;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.delete-btn:hover {\n  background: #c62828;\n  color: white;\n}\n\n/* Panel Footer */\n.panel-footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  background: #fafafa;\n  flex-shrink: 0;\n}\n\n.footer-left {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn:hover:not(:disabled) {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n\n.footer-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary {\n  background: #1976d2;\n  border-color: #1976d2;\n  color: white;\n}\n\n.footer-btn.primary:hover:not(:disabled) {\n  background: #1565c0;\n  border-color: #1565c0;\n}\n\n.footer-btn i {\n  font-size: 12px;\n}\n\n/* ========================================\n   FORMAT EDITOR INLINE STYLES\n   ======================================== */\n\n.format-editor {\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.format-editor .format-editor-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0 16px 0;\n  border-bottom: 1px solid #e0e0e0;\n  margin-bottom: 16px;\n}\n\n.format-editor .back-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: #666;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.format-editor .back-btn:hover {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.format-editor .format-editor-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n/* Preview Table */\n.format-editor .preview-table {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 12px;\n}\n\n.format-editor .preview-header-cell {\n  padding: 10px 14px;\n  background: #f1f5f9;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #333;\n}\n\n.format-editor .preview-cell {\n  padding: 8px 14px;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-radius: 4px;\n  font-size: 14px;\n  color: #333;\n}\n\n/* Format Section */\n.format-section {\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section:last-child {\n  border-bottom: none;\n}\n\n.format-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #333;\n}\n\n.format-section-header i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n/* Format Row */\n.format-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n\n.format-row:last-child {\n  margin-bottom: 0;\n}\n\n.format-row label {\n  font-size: 13px;\n  color: #555;\n  flex-shrink: 0;\n}\n\n/* Format Inputs */\n.format-select {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n  cursor: pointer;\n  min-width: 120px;\n}\n\n.format-select:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input {\n  padding: 8px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 14px;\n  background: white;\n}\n\n.format-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n.format-input.small {\n  width: 80px;\n}\n\n/* Alias Info Row */\n.format-row.alias-info {\n  justify-content: flex-start;\n  gap: 8px;\n}\n\n.format-row.alias-info .muted-text {\n  color: #888;\n  font-size: 12px;\n}\n\n.clear-alias-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: #f0f0f0;\n  border-radius: 50%;\n  color: #888;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn:hover {\n  background: #e0e0e0;\n  color: #c62828;\n}\n\n/* Color Input */\n.color-input {\n  width: 50px;\n  height: 32px;\n  padding: 2px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  background: white;\n}\n\n.color-input:focus {\n  outline: none;\n  border-color: #1976d2;\n}\n\n/* Alignment Toggle */\n.alignment-toggle {\n  display: flex;\n  gap: 8px;\n}\n\n.align-btn {\n  width: 40px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.align-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.align-btn.active {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.align-btn i {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.align-btn.active i {\n  color: #1976d2;\n}\n\n/* Style Buttons */\n.style-buttons {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.style-btn {\n  width: 36px;\n  height: 36px;\n  border: 2px solid #e5e7eb;\n  border-radius: 6px;\n  background: white;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.style-btn:hover {\n  border-color: #cbd5e1;\n  background: #f8fafc;\n}\n\n.style-btn.active {\n  border-color: #1976d2;\n  background: #e3f2fd;\n}\n\n.style-btn i {\n  font-size: 14px;\n  color: #64748b;\n}\n\n.style-btn.active i {\n  color: #1976d2;\n}\n\n/* Collapsible Format Sections */\n.format-section-collapsible {\n  margin-bottom: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.format-section-collapsible summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  list-style: none;\n}\n\n.format-section-collapsible summary::-webkit-details-marker {\n  display: none;\n}\n\n.format-section-collapsible summary::before {\n  content: '\\f054';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  color: #999;\n  transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open] summary::before {\n  transform: rotate(90deg);\n}\n\n.format-section-collapsible summary i {\n  color: #1976d2;\n  font-size: 12px;\n}\n\n.format-section-collapsible summary span {\n  flex: 1;\n}\n\n.format-section-content {\n  padding: 14px;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n}\n\n/* Format Actions */\n.format-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 16px;\n  border: 1px solid #e0e0e0;\n  background: white;\n  border-radius: 6px;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn:hover {\n  background: #fff5f5;\n  border-color: #f87171;\n  color: #dc2626;\n}\n\n.clear-format-btn i {\n  font-size: 12px;\n}\n\n/* ========================================\n   AGGREGATES TAB STYLES\n   ======================================== */\n\n.aggregates-section {\n  padding-top: 0;\n}\n\n.aggregates-header {\n  margin-bottom: 16px;\n}\n\n.aggregates-description {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n}\n\n/* Add Aggregate Button */\n.add-aggregate-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: 1px dashed #ccc;\n  border-radius: 8px;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  width: 100%;\n  justify-content: center;\n  margin-bottom: 16px;\n}\n\n.add-aggregate-btn:hover:not(:disabled) {\n  border-color: #1976d2;\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.add-aggregate-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.add-aggregate-btn i {\n  font-size: 12px;\n}\n\n/* Aggregates List */\n.aggregates-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n/* Aggregate Item */\n.aggregate-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item:hover {\n  border-color: #bdbdbd;\n  background: #fafafa;\n}\n\n.aggregate-item.disabled {\n  opacity: 0.6;\n  background: #f5f5f5;\n}\n\n/* Aggregate Icon */\n.agg-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n  border-radius: 8px;\n  color: #1976d2;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.aggregate-item.disabled .agg-icon {\n  background: #f0f0f0;\n  color: #999;\n}\n\n/* Aggregate Content */\n.agg-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n\n.aggregate-item.disabled .agg-label {\n  color: #888;\n}\n\n.agg-details {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #888;\n}\n\n.agg-type {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.agg-type i {\n  font-size: 10px;\n}\n\n.agg-smart-badge {\n  display: flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n  border-radius: 4px;\n  color: #3b82f6;\n  font-size: 10px;\n}\n\n/* Aggregate Actions */\n.agg-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.agg-action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: #999;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.agg-action-btn:hover:not(:disabled) {\n  background: #e0e0e0;\n  color: #333;\n}\n\n.agg-action-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled {\n  color: #2e7d32;\n}\n\n.agg-action-btn.toggle-btn:not(.enabled) {\n  color: #bdbdbd;\n}\n\n.agg-action-btn.edit-btn:hover:not(:disabled) {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.agg-action-btn.remove-btn:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n/* Aggregates Summary */\n.aggregates-summary {\n  display: flex;\n  gap: 16px;\n  padding: 12px 14px;\n  background: #f5f7fa;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\n.summary-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n\n.summary-item i {\n  color: #1976d2;\n  font-size: 11px;\n}\n\n/* Aggregates Empty State */\n.aggregates-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n  text-align: center;\n}\n\n.aggregates-empty-state i {\n  font-size: 48px;\n  opacity: 0.4;\n  margin-bottom: 8px;\n}\n\n.empty-hint {\n  font-size: 12px;\n  color: #bbb;\n  margin: 0;\n}\n\n/* Aggregates Tip */\n.aggregates-tip {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #64748b;\n  line-height: 1.5;\n}\n\n.aggregates-tip i {\n  color: #94a3b8;\n  margin-top: 1px;\n  flex-shrink: 0;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .config-panel {\n    width: 100% !important;\n    max-width: 100vw !important;\n  }\n\n  /* Hide resize handle on mobile - panel is full width */\n  .resize-handle {\n    display: none;\n  }\n\n  .tab-btn span {\n    display: none;\n  }\n\n  .tab-btn {\n    padding: 14px;\n  }\n\n  .tab-btn i {\n    font-size: 16px;\n  }\n\n  .format-type-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n/* Medium screens - limit max resize width */\n@media (min-width: 769px) and (max-width: 1200px) {\n  .config-panel {\n    max-width: min(600px, 80vw);\n  }\n}\n\n/* Validation Styles (BUG-004) */\n.form-input.invalid {\n  border-color: #ef4444;\n}\n\n.validation-error {\n  display: block;\n  font-size: 12px;\n  color: #ef4444;\n  margin-top: 4px;\n}\n\n.validation-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  background: #fef2f2;\n  border-top: 1px solid #fecaca;\n  color: #dc2626;\n  font-size: 13px;\n}\n\n.validation-banner i {\n  flex-shrink: 0;\n}\n\n/* Duplicate Button (F-005) */\n.footer-btn.duplicate-btn {\n  background: #f3f4f6;\n  color: #374151;\n  border: 1px solid #d1d5db;\n}\n\n.footer-btn.duplicate-btn:hover {\n  background: #e5e7eb;\n  border-color: #9ca3af;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
             type: Input
         }], viewEntity: [{
@@ -2709,11 +2840,15 @@ export class ViewConfigPanelComponent {
             type: Output
         }], externalFilterState: [{
             type: Input
+        }], DefaultSaveAsNew: [{
+            type: Input
+        }], duplicate: [{
+            type: Output
         }], isSaving: [{
             type: Input
         }], handleEscape: [{
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewConfigPanelComponent, { className: "ViewConfigPanelComponent", filePath: "src/lib/view-config-panel/view-config-panel.component.ts", lineNumber: 89 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewConfigPanelComponent, { className: "ViewConfigPanelComponent", filePath: "src/lib/view-config-panel/view-config-panel.component.ts", lineNumber: 90 }); })();
 //# sourceMappingURL=view-config-panel.component.js.map