cloud-ide-element 1.1.208 → 1.1.211

package/fesm2022/cloud-ide-element.mjs

@@ -10458,7 +10458,7 @@ const DEFAULT_GRID_CONFIG = {
         showQuickJump: true,
         showPageInfo: true,
         showRefresh: true,
-        infiniteScroll: false
+        infiniteScroll: true
     },
     search: {
         enabled: true,
@@ -10599,16 +10599,20 @@ class CideEleDataGridComponent {
         const actionsCol = this.visibleColumns().find(c => c.type === 'actions');
         return actionsCol?.actions || [];
     }
-    // Estimated height of a single mobile card in pixels (including gaps)
-    ESTIMATED_MOBILE_CARD_HEIGHT = 160;
-    getMobileScrollbarSpacerHeight() {
+    // Constants for height estimation
+    DEFAULT_TABLE_ROW_HEIGHT = 48;
+    DEFAULT_MOBILE_CARD_HEIGHT = 160;
+    getInfiniteScrollSpacerHeight() {
         const total = this.totalItems();
         const loaded = this.displayedData.length;
         const remaining = total - loaded;
         if (remaining <= 0 || !this.mergedConfig().pagination.infiniteScroll) {
             return 0;
         }
-        return remaining * this.ESTIMATED_MOBILE_CARD_HEIGHT;
+        const rowHeight = this.isMobileView()
+            ? this.DEFAULT_MOBILE_CARD_HEIGHT
+            : (this.mergedConfig().scroll?.rowHeight || this.DEFAULT_TABLE_ROW_HEIGHT);
+        return remaining * rowHeight;
     }
     ngOnInit() {
         this.initializeGrid();
@@ -10656,18 +10660,21 @@ class CideEleDataGridComponent {
         }
     }
     onContentScroll(event) {
-        const mobileConfig = this.mergedConfig().mobileLayout;
         const paginationConfig = this.mergedConfig().pagination;
-        // Only handle infinite scroll if enabled and in mobile view
-        if (!this.isMobileView() || !paginationConfig.infiniteScroll || !mobileConfig?.enabled) {
+        // Only handle infinite scroll if enabled
+        if (!paginationConfig.infiniteScroll) {
             return;
         }
         const target = event.target;
-        const { scrollTop, scrollHeight, clientHeight } = target;
-        // Use a threshold of 100px before the bottom to trigger next page
-        if (scrollHeight - scrollTop - clientHeight < 100) {
+        const { scrollTop, clientHeight, scrollHeight } = target;
+        // Calculate height of already rendered items
+        // scrollHeight includes the phantom spacer
+        const spacerHeight = this.getInfiniteScrollSpacerHeight();
+        const renderedHeight = scrollHeight - spacerHeight;
+        // Trigger next page when we reach near the end of CURRENTLY LOADED items
+        if (scrollTop + clientHeight > renderedHeight - 100) {
             if (this.hasNextPage() && !this.loading() && !this.pageChangeLoading()) {
-                console.log('🔄 Triggering next page for infinite scroll');
+                console.log('🔄 Triggering next page for infinite scroll (stable scrollbar mode)');
                 this.nextPage();
             }
         }
@@ -10749,28 +10756,31 @@ class CideEleDataGridComponent {
             // Preserve expansion state from current data before transforming
             const currentData = this.internalData();
             const expansionState = this.preserveTreeExpansionState(currentData);
-            processedData = this.transformToTree(data);
-            console.log('processedData', processedData);
+            processedData = this.transformToTree(processedData);
             // Apply preserved expansion state to new tree data
             processedData = this.applyTreeExpansionState(processedData, expansionState);
             console.log('processedData with preserved expansion state', processedData);
         }
-        if (this.isAppendMode && paginationConfig.infiniteScroll && this.isMobileView()) {
+        if (this.isAppendMode && paginationConfig.infiniteScroll) {
             console.log('🔄 DataGrid: Appending data in infinite scroll mode');
+            // For both client and server-side, we want to append to internalData
             this.internalData.set([...this.internalData(), ...processedData]);
             this.isAppendMode = false;
+            // For server-side pagination, we also need to append to filteredData to show combined pages
+            if (this.serverSidePagination) {
+                this.filteredData.set([...this.filteredData(), ...processedData]);
+            }
         }
         else {
             this.internalData.set(processedData);
+            // For server-side pagination, set filtered data directly
+            if (this.serverSidePagination) {
+                this.filteredData.set(processedData);
+            }
         }
         console.log('processedData', processedData);
-        // For server-side pagination, set filtered data directly
-        if (this.serverSidePagination) {
-            console.log('processedData', processedData);
-            this.filteredData.set(processedData);
-        }
-        else {
-            // For client-side pagination, apply filters
+        // For client-side pagination, apply filters if not in append mode
+        if (!this.serverSidePagination && !this.isAppendMode) {
             this.applyFilters();
         }
         // Refresh order tracking when data changes
@@ -11524,7 +11534,7 @@ class CideEleDataGridComponent {
     }
     nextPage() {
         if (this.hasNextPage()) {
-            if (this.mergedConfig().pagination.infiniteScroll && this.isMobileView()) {
+            if (this.mergedConfig().pagination.infiniteScroll) {
                 this.isAppendMode = true;
             }
             this.onPageChange(this.currentPage() + 1);
@@ -12953,7 +12963,7 @@ class CideEleDataGridComponent {
                 return data;
             }
             // If pagination is enabled, slice the data
-            if (this.mergedConfig().pagination.infiniteScroll && this.isMobileView()) {
+            if (this.mergedConfig().pagination.infiniteScroll) {
                 // Infinite scroll: show all pages from 1 to current
                 return data.slice(0, this.currentPage() * this.pageSize());
             }
@@ -13438,7 +13448,7 @@ class CideEleDataGridComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div class=\"tw-flex-1 sm:tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex sm:tw-hidden tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <div class=\"tw-overflow-x-auto tw-relative\" [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled || (isMobileView() && mergedConfig().mobileLayout?.enabled),\n          'tw-max-h-full': (scrollConfig?.enabled || (isMobileView() && mergedConfig().mobileLayout?.enabled))\n        }\" [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table View -->\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n      [class.empty-table]=\"displayedData.length === 0\" [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\" style=\"table-layout: fixed;\">\n\n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0' : ''\n            ]\" [style.z-index]=\"scrollConfig?.enabled && scrollConfig?.stickyHeader ? '10' : null\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n          <th\n            class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n            [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n              <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n                <span class=\"tw-truncate\">{{ column.header }}</span>\n                @if (getColumnSortDirection(column.key) === 'asc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n                }\n                @if (getColumnSortDirection(column.key) === 'desc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n                }\n              </div>\n\n              <!-- Active Filter Indicator -->\n              @if (isColumnFiltered(column.key)) {\n              <div\n                class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                {{ getActiveFilterCount(column.key) }}\n              </div>\n              }\n\n              <!-- Column Menu Trigger (Three Dots Icon) -->\n              @if (mergedConfig().columnMenu?.enabled) {\n              <button type=\"button\"\n                class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n                title=\"Column options\">\n                <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n              </button>\n              }\n            </div>\n\n            <!-- Column Menu Dropdown -->\n            @if (isColumnMenuOpen(column.key)) {\n            <div\n              class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n              <div class=\"tw-py-1\">\n                <!-- Sort Options -->\n                @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                @let sortDirection = getColumnSortDirection(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\" (click)=\"onColumnSort(column, 'asc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                    Ascending\n                  </div>\n                  @if (sortDirection === 'asc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\" (click)=\"onColumnSort(column, 'desc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                    Descending\n                  </div>\n                  @if (sortDirection === 'desc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Filter Option -->\n                @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                <!-- Check if there's a custom filter renderer template -->\n                @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                <div class=\"tw-px-4 tw-py-2\">\n                  <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                  </ng-container>\n                </div>\n                } @else {\n                <!-- Excel-style Filter Button -->\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                    Filter\n                  </div>\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                    {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                  </cide-ele-icon>\n                </button>\n\n                <!-- Excel-style Filter Panel -->\n                @if (isFilterPanelOpen(column.key)) {\n                <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                  <!-- Search box -->\n                  <div class=\"tw-px-2 tw-mb-2\">\n                    <input type=\"text\"\n                      class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                      placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n                  </div>\n\n                  <!-- Select All / Deselect All -->\n                  <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                      Select All\n                    </button>\n                    <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                      Clear\n                    </button>\n                  </div>\n\n                  <!-- Filter values list -->\n                  <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                    @for (item of getUniqueColumnValues(column); track item.value) {\n                    <label\n                      class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                      <input type=\"checkbox\"\n                        class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                        [checked]=\"item.checked\"\n                        (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                        (click)=\"$event.stopPropagation()\">\n                      <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                      <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                    </label>\n                    }\n                  </div>\n                </div>\n                }\n                }\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Autosize Option -->\n                @if (mergedConfig().columnMenu?.showAutosize) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAutosize(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                  Autosize\n                </button>\n                }\n\n                <!-- Group By Column Option -->\n                @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                @let isGrouped = groupedColumns().includes(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n                  [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n                  (click)=\"onColumnGroupBy(column)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                      [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                    Group By Column\n                  </div>\n                  @if (isGrouped) {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                }\n\n                <!-- Manage Columns Option -->\n                @if (mergedConfig().columnMenu?.showManageColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onManageColumns()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                  Manage Columns\n                </button>\n                }\n\n                <!-- Reset Columns Option -->\n                @if (mergedConfig().columnMenu?.showResetColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnReset()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                  Reset Columns\n                </button>\n                }\n\n                <!-- Hide Column Option -->\n                @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnHide(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                  Hide Column\n                </button>\n                }\n\n                <!-- Aggregation Select Option -->\n                @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'sum')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                  Sum\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'avg')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                  Average\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'count')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                  Count\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'min')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                  Min\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'max')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                  Max\n                </button>\n                }\n              </div>\n            </div>\n            }\n          </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n        <!-- Skeleton Loading Rows -->\n        @for (skeletonItem of getSkeletonArray(); track $index) {\n        <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n            <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n          </td>\n          }\n        </tr>\n        }\n        } @else {\n        @for (item of displayedData; track trackByFn($index, item)) {\n        @if (isGroupHeader(item)) {\n        <!-- Group Header Row -->\n        @let groupKey = getGroupKey(item);\n        @let groupLevel = getGroupLevel(item);\n        <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n          [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n          [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n          <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n            <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n                {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n              </cide-ele-icon>\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n              </span>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n                {{ getGroupRowCount(item) }}\n              </span>\n\n              <!-- Group Aggregations -->\n              <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n                @for (agg of getGroupAggregations(item); track agg.key) {\n                <div class=\"tw-flex tw-flex-col tw-items-end\">\n                  <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n                  <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n                </div>\n                }\n              </div>\n            </div>\n          </td>\n        </tr>\n        } @else {\n        <!-- Regular Data Row -->\n        <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\" [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n          [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n          (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n          [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n          [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n          [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n          [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n          [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, $index)\"\n          (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, $index)\"\n          (dragend)=\"onDragEnd($event)\">\n\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n            [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n            <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n            @if (isTreeEnabled() && $index === 0) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <!-- Tree Indentation -->\n              <div class=\"tw-flex tw-items-center\">\n                @if (hasChildren(item)) {\n                <button variant=\"outline\" size=\"xs\" type=\"button\"\n                  (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                  class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                  [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                  [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                    [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n                    chevron_right\n                  </cide-ele-icon>\n                </button>\n                } @else {\n                <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                  <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                </div>\n                }\n              </div>\n\n              <!-- Cell Content -->\n              <div class=\"tw-flex-1 tw-w-full\">\n                @if (column.type === 'text') {\n                <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n                  [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </p>\n                } @else if (column.type === 'number') {\n                <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'date') {\n                <span class=\"tw-text-sm tw-text-gray-600\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'boolean') {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                  {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                </span>\n                } @else if (column.type === 'status' && column.statusConfig) {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                  {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                </span>\n                } @else if (column.type === 'actions' && column.actions) {\n                <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                  @for (action of column.actions; track action.key) {\n                  <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                    (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                    [title]=\"action.tooltip || action.label\" [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                    [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                    @if (action.icon) {\n                    <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M10 12l-5-5h10l-5 5z\" />\n                    </svg>\n                    }\n                    {{ action.label }}\n                  </button>\n                  }\n                </div>\n                } @else if (column.type === 'custom') {\n                <!-- Template Renderer -->\n                @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                  [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                </ng-container>\n                }\n                <!-- Default rendering -->\n                @else {\n                <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                }\n                }\n              </div>\n            </div>\n            } @else {\n            <!-- Regular cell content (non-tree or non-first column) -->\n            @if (column.type === 'text') {\n            <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n              [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </p>\n            } @else if (column.type === 'number') {\n            <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'date') {\n            <span class=\"tw-text-sm tw-text-gray-600\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'boolean') {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n              {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n            </span>\n            } @else if (column.type === 'status' && column.statusConfig) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n              {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n            </span>\n            } @else if (column.type === 'actions' && column.actions) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              @for (action of column.actions; track action.key) {\n              <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n                [disabled]=\"isRefreshing()\"\n                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                @if (action.icon) {\n                <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                  <path d=\"M10 12l-5-5h10l-5 5z\" />\n                </svg>\n                }\n                {{ action.label }}\n              </button>\n              }\n            </div>\n            } @else if (column.type === 'custom') {\n            <!-- Template Renderer -->\n            @if (column.renderer && isTemplateRenderer(column.renderer)) {\n            <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n            </ng-container>\n            }\n            <!-- Default rendering -->\n            @else {\n            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n            }\n            }\n            }\n          </td>\n          }\n        </tr>\n        }\n        }\n\n        <!-- Empty State -->\n        @if (displayedData.length === 0) {\n        <tr class=\"tw-h-full\">\n          <td [attr.colspan]=\"visibleColumns().length\"\n            class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n            <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n              <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n                </path>\n              </svg>\n              <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n              <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                @if (searchQuery()) {\n                No results match your search criteria.\n                } @else {\n                There are no items to display.\n                }\n              </p>\n            </div>\n          </td>\n        </tr>\n        }\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Card View -->\n    <div [id]=\"config.id + '-container'\" class=\"mobile-card-view tw-p-3 tw-space-y-3\" (scroll)=\"onContentScroll($event)\"\n      [ngClass]=\"{'tw-h-full tw-flex tw-flex-col': mergedConfig().fullHeight, 'tw-overflow-auto': !mergedConfig().scroll?.enabled, 'tw-overflow-hidden': mergedConfig().scroll?.enabled}\">\n      @if (loading() || isRefreshing() || pageChangeLoading()) {\n      <!-- Card Skeletons -->\n      @for (skeletonItem of getSkeletonArray(); track $index) {\n      <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n          <div class=\"tw-flex-1\">\n            <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n          </div>\n          <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n        </div>\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      }\n      } @else if (displayedData.length > 0) {\n      @for (item of displayedData; track trackByFn($index, item)) {\n      <div\n        class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n        (click)=\"onRowClick(item)\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n          <div class=\"tw-flex-1 tw-min-w-0\">\n            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n              {{ getMobilePrimaryValue(item) }}\n            </h4>\n            @if (getMobileSecondaryValue(item)) {\n            <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n              {{ getMobileSecondaryValue(item) }}\n            </p>\n            }\n          </div>\n\n          <!-- Card Actions -->\n          @if (getRowActions().length > 0) {\n          <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n            @for (action of getRowActions().slice(0, 2); track action.key) {\n            <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n              class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n              [class.tw-text-blue-600]=\"action.variant === 'primary'\"\n              [class.tw-text-red-600]=\"action.variant === 'danger'\" [title]=\"action.label\">\n              @if (action.icon) {\n              <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n              } @else {\n              <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n              }\n            </button>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Card Details Grid -->\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n          @for (col of getMobileDetailColumns(); track col.key) {\n          <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n            <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n              {{ col.header }}\n            </span>\n            <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n                      'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n                      'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n                    }\"\n              [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                               (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n              {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n              col.statusConfig) :\n              (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n              formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n            </span>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n      <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n          d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n        </path>\n      </svg>\n      <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n      <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n        {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n      </p>\n    </div>\n    }\n    @if (mergedConfig().pagination.infiniteScroll && isMobileView()) {\n    <div class=\"scrollbar-spacer\" [style.height.px]=\"getMobileScrollbarSpacerHeight()\"></div>\n\n    <!-- Infinite Scroll Loading Spinner -->\n    @if (loading() || pageChangeLoading()) {\n    <div class=\"tw-flex tw-justify-center tw-py-4\">\n      <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n      </div>\n    </div>\n    }\n    }\n  </div>\n\n  <!-- Pagination Section -->\n  @if (paginationConfig.enabled && totalItems() > 0 && !(mergedConfig().pagination.infiniteScroll && isMobileView())) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-2 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size (Hidden on mobile) -->\n      <div class=\"tw-hidden sm:tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs sm:tw-text-sm tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[28px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div class=\"tw-flex-1 sm:tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex sm:tw-hidden tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <div class=\"tw-overflow-x-auto tw-relative\" (scroll)=\"onContentScroll($event)\" [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled || mergedConfig().pagination.infiniteScroll || (isMobileView() && mergedConfig().mobileLayout?.enabled),\n          'tw-max-h-full': (scrollConfig?.enabled || mergedConfig().pagination.infiniteScroll || (isMobileView() && mergedConfig().mobileLayout?.enabled))\n        }\" [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table View -->\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n      [class.empty-table]=\"displayedData.length === 0\" [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\" style=\"table-layout: fixed;\">\n\n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0' : ''\n            ]\" [style.z-index]=\"scrollConfig?.enabled && scrollConfig?.stickyHeader ? '10' : null\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n          <th\n            class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n            [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n              <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n                <span class=\"tw-truncate\">{{ column.header }}</span>\n                @if (getColumnSortDirection(column.key) === 'asc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n                }\n                @if (getColumnSortDirection(column.key) === 'desc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n                }\n              </div>\n\n              <!-- Active Filter Indicator -->\n              @if (isColumnFiltered(column.key)) {\n              <div\n                class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                {{ getActiveFilterCount(column.key) }}\n              </div>\n              }\n\n              <!-- Column Menu Trigger (Three Dots Icon) -->\n              @if (mergedConfig().columnMenu?.enabled) {\n              <button type=\"button\"\n                class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n                title=\"Column options\">\n                <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n              </button>\n              }\n            </div>\n\n            <!-- Column Menu Dropdown -->\n            @if (isColumnMenuOpen(column.key)) {\n            <div\n              class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n              <div class=\"tw-py-1\">\n                <!-- Sort Options -->\n                @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                @let sortDirection = getColumnSortDirection(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\" (click)=\"onColumnSort(column, 'asc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                    Ascending\n                  </div>\n                  @if (sortDirection === 'asc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\" (click)=\"onColumnSort(column, 'desc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                    Descending\n                  </div>\n                  @if (sortDirection === 'desc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Filter Option -->\n                @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                <!-- Check if there's a custom filter renderer template -->\n                @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                <div class=\"tw-px-4 tw-py-2\">\n                  <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                  </ng-container>\n                </div>\n                } @else {\n                <!-- Excel-style Filter Button -->\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                    Filter\n                  </div>\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                    {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                  </cide-ele-icon>\n                </button>\n\n                <!-- Excel-style Filter Panel -->\n                @if (isFilterPanelOpen(column.key)) {\n                <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                  <!-- Search box -->\n                  <div class=\"tw-px-2 tw-mb-2\">\n                    <input type=\"text\"\n                      class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                      placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n                  </div>\n\n                  <!-- Select All / Deselect All -->\n                  <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                      Select All\n                    </button>\n                    <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                      Clear\n                    </button>\n                  </div>\n\n                  <!-- Filter values list -->\n                  <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                    @for (item of getUniqueColumnValues(column); track item.value) {\n                    <label\n                      class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                      <input type=\"checkbox\"\n                        class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                        [checked]=\"item.checked\"\n                        (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                        (click)=\"$event.stopPropagation()\">\n                      <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                      <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                    </label>\n                    }\n                  </div>\n                </div>\n                }\n                }\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Autosize Option -->\n                @if (mergedConfig().columnMenu?.showAutosize) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAutosize(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                  Autosize\n                </button>\n                }\n\n                <!-- Group By Column Option -->\n                @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                @let isGrouped = groupedColumns().includes(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n                  [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n                  (click)=\"onColumnGroupBy(column)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                      [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                    Group By Column\n                  </div>\n                  @if (isGrouped) {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                }\n\n                <!-- Manage Columns Option -->\n                @if (mergedConfig().columnMenu?.showManageColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onManageColumns()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                  Manage Columns\n                </button>\n                }\n\n                <!-- Reset Columns Option -->\n                @if (mergedConfig().columnMenu?.showResetColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnReset()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                  Reset Columns\n                </button>\n                }\n\n                <!-- Hide Column Option -->\n                @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnHide(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                  Hide Column\n                </button>\n                }\n\n                <!-- Aggregation Select Option -->\n                @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'sum')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                  Sum\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'avg')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                  Average\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'count')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                  Count\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'min')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                  Min\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'max')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                  Max\n                </button>\n                }\n              </div>\n            </div>\n            }\n          </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n        <!-- Skeleton Loading Rows -->\n        @for (skeletonItem of getSkeletonArray(); track $index) {\n        <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n            <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n          </td>\n          }\n        </tr>\n        }\n        } @else {\n        @for (item of displayedData; track trackByFn($index, item)) {\n        @if (isGroupHeader(item)) {\n        <!-- Group Header Row -->\n        @let groupKey = getGroupKey(item);\n        @let groupLevel = getGroupLevel(item);\n        <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n          [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n          [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n          <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n            <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n                {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n              </cide-ele-icon>\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n              </span>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n                {{ getGroupRowCount(item) }}\n              </span>\n\n              <!-- Group Aggregations -->\n              <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n                @for (agg of getGroupAggregations(item); track agg.key) {\n                <div class=\"tw-flex tw-flex-col tw-items-end\">\n                  <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n                  <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n                </div>\n                }\n              </div>\n            </div>\n          </td>\n        </tr>\n        } @else {\n        <!-- Regular Data Row -->\n        <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\" [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n          [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n          (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n          [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n          [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n          [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n          [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n          [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, $index)\"\n          (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, $index)\"\n          (dragend)=\"onDragEnd($event)\">\n\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n            [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n            <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n            @if (isTreeEnabled() && $index === 0) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <!-- Tree Indentation -->\n              <div class=\"tw-flex tw-items-center\">\n                @if (hasChildren(item)) {\n                <button variant=\"outline\" size=\"xs\" type=\"button\"\n                  (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                  class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                  [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                  [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                    [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n                    chevron_right\n                  </cide-ele-icon>\n                </button>\n                } @else {\n                <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                  <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                </div>\n                }\n              </div>\n\n              <!-- Cell Content -->\n              <div class=\"tw-flex-1 tw-w-full\">\n                @if (column.type === 'text') {\n                <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n                  [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </p>\n                } @else if (column.type === 'number') {\n                <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'date') {\n                <span class=\"tw-text-sm tw-text-gray-600\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'boolean') {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                  {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                </span>\n                } @else if (column.type === 'status' && column.statusConfig) {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                  {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                </span>\n                } @else if (column.type === 'actions' && column.actions) {\n                <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                  @for (action of column.actions; track action.key) {\n                  <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                    (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                    [title]=\"action.tooltip || action.label\" [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                    [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                    @if (action.icon) {\n                    <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M10 12l-5-5h10l-5 5z\" />\n                    </svg>\n                    }\n                    {{ action.label }}\n                  </button>\n                  }\n                </div>\n                } @else if (column.type === 'custom') {\n                <!-- Template Renderer -->\n                @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                  [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                </ng-container>\n                }\n                <!-- Default rendering -->\n                @else {\n                <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                }\n                }\n              </div>\n            </div>\n            } @else {\n            <!-- Regular cell content (non-tree or non-first column) -->\n            @if (column.type === 'text') {\n            <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n              [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </p>\n            } @else if (column.type === 'number') {\n            <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'date') {\n            <span class=\"tw-text-sm tw-text-gray-600\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'boolean') {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n              {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n            </span>\n            } @else if (column.type === 'status' && column.statusConfig) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n              {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n            </span>\n            } @else if (column.type === 'actions' && column.actions) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              @for (action of column.actions; track action.key) {\n              <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n                [disabled]=\"isRefreshing()\"\n                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                @if (action.icon) {\n                <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                  <path d=\"M10 12l-5-5h10l-5 5z\" />\n                </svg>\n                }\n                {{ action.label }}\n              </button>\n              }\n            </div>\n            } @else if (column.type === 'custom') {\n            <!-- Template Renderer -->\n            @if (column.renderer && isTemplateRenderer(column.renderer)) {\n            <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n            </ng-container>\n            }\n            <!-- Default rendering -->\n            @else {\n            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n            }\n            }\n            }\n          </td>\n          }\n        </tr>\n        }\n        }\n\n        <!-- Empty State -->\n        @if (displayedData.length === 0) {\n        <tr class=\"tw-h-full\">\n          <td [attr.colspan]=\"visibleColumns().length\"\n            class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n            <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n              <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n                </path>\n              </svg>\n              <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n              <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                @if (searchQuery()) {\n                No results match your search criteria.\n                } @else {\n                There are no items to display.\n                }\n              </p>\n            </div>\n          </td>\n        </tr>\n        }\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Card View -->\n    <div [id]=\"config.id + '-container'\" class=\"mobile-card-view tw-p-3 tw-space-y-3\"\n      [ngClass]=\"{'tw-h-full tw-flex tw-flex-col': mergedConfig().fullHeight}\">\n      @if (loading() || isRefreshing() || pageChangeLoading()) {\n      <!-- Card Skeletons -->\n      @for (skeletonItem of getSkeletonArray(); track $index) {\n      <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n          <div class=\"tw-flex-1\">\n            <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n          </div>\n          <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n        </div>\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      }\n      } @else if (displayedData.length > 0) {\n      @for (item of displayedData; track trackByFn($index, item)) {\n      <div\n        class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n        (click)=\"onRowClick(item)\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n          <div class=\"tw-flex-1 tw-min-w-0\">\n            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n              {{ getMobilePrimaryValue(item) }}\n            </h4>\n            @if (getMobileSecondaryValue(item)) {\n            <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n              {{ getMobileSecondaryValue(item) }}\n            </p>\n            }\n          </div>\n\n          <!-- Card Actions -->\n          @if (getRowActions().length > 0) {\n          <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n            @for (action of getRowActions().slice(0, 2); track action.key) {\n            <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n              class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n              [class.tw-text-blue-600]=\"action.variant === 'primary'\"\n              [class.tw-text-red-600]=\"action.variant === 'danger'\" [title]=\"action.label\">\n              @if (action.icon) {\n              <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n              } @else {\n              <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n              }\n            </button>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Card Details Grid -->\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n          @for (col of getMobileDetailColumns(); track col.key) {\n          <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n            <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n              {{ col.header }}\n            </span>\n            <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n                      'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n                      'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n                    }\"\n              [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                               (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n              {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n              col.statusConfig) :\n              (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n              formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n            </span>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n      <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n          d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n        </path>\n      </svg>\n      <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n      <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n        {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n      </p>\n    </div>\n    }\n\n    @if (mergedConfig().pagination.infiniteScroll) {\n    <div class=\"scrollbar-spacer\" [style.height.px]=\"getInfiniteScrollSpacerHeight()\"></div>\n\n    <!-- Infinite Scroll Loading Spinner -->\n    @if (loading() || pageChangeLoading()) {\n    <div class=\"tw-flex tw-justify-center tw-py-4\">\n      <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n      </div>\n    </div>\n    }\n    }\n  </div>\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled && totalItems() > 0 && !mergedConfig().pagination.infiniteScroll) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-2 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size (Hidden on mobile) -->\n      <div class=\"tw-hidden sm:tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs sm:tw-text-sm tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[28px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -13450,7 +13460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CideSelectComponent,
                         CideIconComponent,
                         CideEleButtonComponent
-                    ], template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div class=\"tw-flex-1 sm:tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex sm:tw-hidden tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <div class=\"tw-overflow-x-auto tw-relative\" [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled || (isMobileView() && mergedConfig().mobileLayout?.enabled),\n          'tw-max-h-full': (scrollConfig?.enabled || (isMobileView() && mergedConfig().mobileLayout?.enabled))\n        }\" [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table View -->\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n      [class.empty-table]=\"displayedData.length === 0\" [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\" style=\"table-layout: fixed;\">\n\n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0' : ''\n            ]\" [style.z-index]=\"scrollConfig?.enabled && scrollConfig?.stickyHeader ? '10' : null\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n          <th\n            class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n            [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n              <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n                <span class=\"tw-truncate\">{{ column.header }}</span>\n                @if (getColumnSortDirection(column.key) === 'asc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n                }\n                @if (getColumnSortDirection(column.key) === 'desc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n                }\n              </div>\n\n              <!-- Active Filter Indicator -->\n              @if (isColumnFiltered(column.key)) {\n              <div\n                class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                {{ getActiveFilterCount(column.key) }}\n              </div>\n              }\n\n              <!-- Column Menu Trigger (Three Dots Icon) -->\n              @if (mergedConfig().columnMenu?.enabled) {\n              <button type=\"button\"\n                class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n                title=\"Column options\">\n                <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n              </button>\n              }\n            </div>\n\n            <!-- Column Menu Dropdown -->\n            @if (isColumnMenuOpen(column.key)) {\n            <div\n              class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n              <div class=\"tw-py-1\">\n                <!-- Sort Options -->\n                @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                @let sortDirection = getColumnSortDirection(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\" (click)=\"onColumnSort(column, 'asc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                    Ascending\n                  </div>\n                  @if (sortDirection === 'asc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\" (click)=\"onColumnSort(column, 'desc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                    Descending\n                  </div>\n                  @if (sortDirection === 'desc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Filter Option -->\n                @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                <!-- Check if there's a custom filter renderer template -->\n                @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                <div class=\"tw-px-4 tw-py-2\">\n                  <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                  </ng-container>\n                </div>\n                } @else {\n                <!-- Excel-style Filter Button -->\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                    Filter\n                  </div>\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                    {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                  </cide-ele-icon>\n                </button>\n\n                <!-- Excel-style Filter Panel -->\n                @if (isFilterPanelOpen(column.key)) {\n                <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                  <!-- Search box -->\n                  <div class=\"tw-px-2 tw-mb-2\">\n                    <input type=\"text\"\n                      class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                      placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n                  </div>\n\n                  <!-- Select All / Deselect All -->\n                  <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                      Select All\n                    </button>\n                    <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                      Clear\n                    </button>\n                  </div>\n\n                  <!-- Filter values list -->\n                  <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                    @for (item of getUniqueColumnValues(column); track item.value) {\n                    <label\n                      class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                      <input type=\"checkbox\"\n                        class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                        [checked]=\"item.checked\"\n                        (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                        (click)=\"$event.stopPropagation()\">\n                      <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                      <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                    </label>\n                    }\n                  </div>\n                </div>\n                }\n                }\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Autosize Option -->\n                @if (mergedConfig().columnMenu?.showAutosize) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAutosize(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                  Autosize\n                </button>\n                }\n\n                <!-- Group By Column Option -->\n                @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                @let isGrouped = groupedColumns().includes(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n                  [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n                  (click)=\"onColumnGroupBy(column)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                      [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                    Group By Column\n                  </div>\n                  @if (isGrouped) {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                }\n\n                <!-- Manage Columns Option -->\n                @if (mergedConfig().columnMenu?.showManageColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onManageColumns()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                  Manage Columns\n                </button>\n                }\n\n                <!-- Reset Columns Option -->\n                @if (mergedConfig().columnMenu?.showResetColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnReset()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                  Reset Columns\n                </button>\n                }\n\n                <!-- Hide Column Option -->\n                @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnHide(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                  Hide Column\n                </button>\n                }\n\n                <!-- Aggregation Select Option -->\n                @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'sum')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                  Sum\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'avg')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                  Average\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'count')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                  Count\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'min')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                  Min\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'max')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                  Max\n                </button>\n                }\n              </div>\n            </div>\n            }\n          </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n        <!-- Skeleton Loading Rows -->\n        @for (skeletonItem of getSkeletonArray(); track $index) {\n        <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n            <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n          </td>\n          }\n        </tr>\n        }\n        } @else {\n        @for (item of displayedData; track trackByFn($index, item)) {\n        @if (isGroupHeader(item)) {\n        <!-- Group Header Row -->\n        @let groupKey = getGroupKey(item);\n        @let groupLevel = getGroupLevel(item);\n        <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n          [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n          [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n          <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n            <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n                {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n              </cide-ele-icon>\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n              </span>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n                {{ getGroupRowCount(item) }}\n              </span>\n\n              <!-- Group Aggregations -->\n              <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n                @for (agg of getGroupAggregations(item); track agg.key) {\n                <div class=\"tw-flex tw-flex-col tw-items-end\">\n                  <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n                  <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n                </div>\n                }\n              </div>\n            </div>\n          </td>\n        </tr>\n        } @else {\n        <!-- Regular Data Row -->\n        <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\" [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n          [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n          (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n          [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n          [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n          [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n          [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n          [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, $index)\"\n          (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, $index)\"\n          (dragend)=\"onDragEnd($event)\">\n\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n            [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n            <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n            @if (isTreeEnabled() && $index === 0) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <!-- Tree Indentation -->\n              <div class=\"tw-flex tw-items-center\">\n                @if (hasChildren(item)) {\n                <button variant=\"outline\" size=\"xs\" type=\"button\"\n                  (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                  class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                  [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                  [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                    [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n                    chevron_right\n                  </cide-ele-icon>\n                </button>\n                } @else {\n                <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                  <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                </div>\n                }\n              </div>\n\n              <!-- Cell Content -->\n              <div class=\"tw-flex-1 tw-w-full\">\n                @if (column.type === 'text') {\n                <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n                  [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </p>\n                } @else if (column.type === 'number') {\n                <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'date') {\n                <span class=\"tw-text-sm tw-text-gray-600\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'boolean') {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                  {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                </span>\n                } @else if (column.type === 'status' && column.statusConfig) {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                  {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                </span>\n                } @else if (column.type === 'actions' && column.actions) {\n                <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                  @for (action of column.actions; track action.key) {\n                  <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                    (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                    [title]=\"action.tooltip || action.label\" [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                    [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                    @if (action.icon) {\n                    <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M10 12l-5-5h10l-5 5z\" />\n                    </svg>\n                    }\n                    {{ action.label }}\n                  </button>\n                  }\n                </div>\n                } @else if (column.type === 'custom') {\n                <!-- Template Renderer -->\n                @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                  [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                </ng-container>\n                }\n                <!-- Default rendering -->\n                @else {\n                <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                }\n                }\n              </div>\n            </div>\n            } @else {\n            <!-- Regular cell content (non-tree or non-first column) -->\n            @if (column.type === 'text') {\n            <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n              [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </p>\n            } @else if (column.type === 'number') {\n            <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'date') {\n            <span class=\"tw-text-sm tw-text-gray-600\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'boolean') {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n              {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n            </span>\n            } @else if (column.type === 'status' && column.statusConfig) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n              {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n            </span>\n            } @else if (column.type === 'actions' && column.actions) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              @for (action of column.actions; track action.key) {\n              <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n                [disabled]=\"isRefreshing()\"\n                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                @if (action.icon) {\n                <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                  <path d=\"M10 12l-5-5h10l-5 5z\" />\n                </svg>\n                }\n                {{ action.label }}\n              </button>\n              }\n            </div>\n            } @else if (column.type === 'custom') {\n            <!-- Template Renderer -->\n            @if (column.renderer && isTemplateRenderer(column.renderer)) {\n            <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n            </ng-container>\n            }\n            <!-- Default rendering -->\n            @else {\n            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n            }\n            }\n            }\n          </td>\n          }\n        </tr>\n        }\n        }\n\n        <!-- Empty State -->\n        @if (displayedData.length === 0) {\n        <tr class=\"tw-h-full\">\n          <td [attr.colspan]=\"visibleColumns().length\"\n            class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n            <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n              <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n                </path>\n              </svg>\n              <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n              <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                @if (searchQuery()) {\n                No results match your search criteria.\n                } @else {\n                There are no items to display.\n                }\n              </p>\n            </div>\n          </td>\n        </tr>\n        }\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Card View -->\n    <div [id]=\"config.id + '-container'\" class=\"mobile-card-view tw-p-3 tw-space-y-3\" (scroll)=\"onContentScroll($event)\"\n      [ngClass]=\"{'tw-h-full tw-flex tw-flex-col': mergedConfig().fullHeight, 'tw-overflow-auto': !mergedConfig().scroll?.enabled, 'tw-overflow-hidden': mergedConfig().scroll?.enabled}\">\n      @if (loading() || isRefreshing() || pageChangeLoading()) {\n      <!-- Card Skeletons -->\n      @for (skeletonItem of getSkeletonArray(); track $index) {\n      <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n          <div class=\"tw-flex-1\">\n            <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n          </div>\n          <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n        </div>\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      }\n      } @else if (displayedData.length > 0) {\n      @for (item of displayedData; track trackByFn($index, item)) {\n      <div\n        class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n        (click)=\"onRowClick(item)\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n          <div class=\"tw-flex-1 tw-min-w-0\">\n            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n              {{ getMobilePrimaryValue(item) }}\n            </h4>\n            @if (getMobileSecondaryValue(item)) {\n            <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n              {{ getMobileSecondaryValue(item) }}\n            </p>\n            }\n          </div>\n\n          <!-- Card Actions -->\n          @if (getRowActions().length > 0) {\n          <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n            @for (action of getRowActions().slice(0, 2); track action.key) {\n            <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n              class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n              [class.tw-text-blue-600]=\"action.variant === 'primary'\"\n              [class.tw-text-red-600]=\"action.variant === 'danger'\" [title]=\"action.label\">\n              @if (action.icon) {\n              <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n              } @else {\n              <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n              }\n            </button>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Card Details Grid -->\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n          @for (col of getMobileDetailColumns(); track col.key) {\n          <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n            <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n              {{ col.header }}\n            </span>\n            <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n                      'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n                      'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n                    }\"\n              [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                               (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n              {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n              col.statusConfig) :\n              (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n              formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n            </span>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n      <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n          d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n        </path>\n      </svg>\n      <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n      <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n        {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n      </p>\n    </div>\n    }\n    @if (mergedConfig().pagination.infiniteScroll && isMobileView()) {\n    <div class=\"scrollbar-spacer\" [style.height.px]=\"getMobileScrollbarSpacerHeight()\"></div>\n\n    <!-- Infinite Scroll Loading Spinner -->\n    @if (loading() || pageChangeLoading()) {\n    <div class=\"tw-flex tw-justify-center tw-py-4\">\n      <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n      </div>\n    </div>\n    }\n    }\n  </div>\n\n  <!-- Pagination Section -->\n  @if (paginationConfig.enabled && totalItems() > 0 && !(mergedConfig().pagination.infiniteScroll && isMobileView())) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-2 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size (Hidden on mobile) -->\n      <div class=\"tw-hidden sm:tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs sm:tw-text-sm tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[28px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
+                    ], template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div class=\"tw-flex-1 sm:tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex sm:tw-hidden tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <div class=\"tw-overflow-x-auto tw-relative\" (scroll)=\"onContentScroll($event)\" [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled || mergedConfig().pagination.infiniteScroll || (isMobileView() && mergedConfig().mobileLayout?.enabled),\n          'tw-max-h-full': (scrollConfig?.enabled || mergedConfig().pagination.infiniteScroll || (isMobileView() && mergedConfig().mobileLayout?.enabled))\n        }\" [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table View -->\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n      [class.empty-table]=\"displayedData.length === 0\" [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\" style=\"table-layout: fixed;\">\n\n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0' : ''\n            ]\" [style.z-index]=\"scrollConfig?.enabled && scrollConfig?.stickyHeader ? '10' : null\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n          <th\n            class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n            [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n              <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n                <span class=\"tw-truncate\">{{ column.header }}</span>\n                @if (getColumnSortDirection(column.key) === 'asc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n                }\n                @if (getColumnSortDirection(column.key) === 'desc') {\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n                  title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n                }\n              </div>\n\n              <!-- Active Filter Indicator -->\n              @if (isColumnFiltered(column.key)) {\n              <div\n                class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                {{ getActiveFilterCount(column.key) }}\n              </div>\n              }\n\n              <!-- Column Menu Trigger (Three Dots Icon) -->\n              @if (mergedConfig().columnMenu?.enabled) {\n              <button type=\"button\"\n                class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n                title=\"Column options\">\n                <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n              </button>\n              }\n            </div>\n\n            <!-- Column Menu Dropdown -->\n            @if (isColumnMenuOpen(column.key)) {\n            <div\n              class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n              <div class=\"tw-py-1\">\n                <!-- Sort Options -->\n                @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                @let sortDirection = getColumnSortDirection(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\" (click)=\"onColumnSort(column, 'asc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                    Ascending\n                  </div>\n                  @if (sortDirection === 'asc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n                  [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\" (click)=\"onColumnSort(column, 'desc')\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                      [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                    Descending\n                  </div>\n                  @if (sortDirection === 'desc') {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Filter Option -->\n                @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                <!-- Check if there's a custom filter renderer template -->\n                @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                <div class=\"tw-px-4 tw-py-2\">\n                  <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                    [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                  </ng-container>\n                </div>\n                } @else {\n                <!-- Excel-style Filter Button -->\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                    Filter\n                  </div>\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                    {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                  </cide-ele-icon>\n                </button>\n\n                <!-- Excel-style Filter Panel -->\n                @if (isFilterPanelOpen(column.key)) {\n                <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                  <!-- Search box -->\n                  <div class=\"tw-px-2 tw-mb-2\">\n                    <input type=\"text\"\n                      class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                      placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n                  </div>\n\n                  <!-- Select All / Deselect All -->\n                  <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                      Select All\n                    </button>\n                    <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                    <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                      (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                      Clear\n                    </button>\n                  </div>\n\n                  <!-- Filter values list -->\n                  <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                    @for (item of getUniqueColumnValues(column); track item.value) {\n                    <label\n                      class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                      <input type=\"checkbox\"\n                        class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                        [checked]=\"item.checked\"\n                        (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                        (click)=\"$event.stopPropagation()\">\n                      <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                      <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                    </label>\n                    }\n                  </div>\n                </div>\n                }\n                }\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                }\n\n                <!-- Autosize Option -->\n                @if (mergedConfig().columnMenu?.showAutosize) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAutosize(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                  Autosize\n                </button>\n                }\n\n                <!-- Group By Column Option -->\n                @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                @let isGrouped = groupedColumns().includes(column.key);\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n                  [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n                  [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n                  (click)=\"onColumnGroupBy(column)\">\n                  <div class=\"tw-flex tw-items-center\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                      [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                    Group By Column\n                  </div>\n                  @if (isGrouped) {\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n                  }\n                </button>\n                }\n\n                <!-- Manage Columns Option -->\n                @if (mergedConfig().columnMenu?.showManageColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onManageColumns()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                  Manage Columns\n                </button>\n                }\n\n                <!-- Reset Columns Option -->\n                @if (mergedConfig().columnMenu?.showResetColumns) {\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnReset()\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                  Reset Columns\n                </button>\n                }\n\n                <!-- Hide Column Option -->\n                @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnHide(column)\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                  Hide Column\n                </button>\n                }\n\n                <!-- Aggregation Select Option -->\n                @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'sum')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                  Sum\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'avg')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                  Average\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'count')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                  Count\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'min')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                  Min\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                  (click)=\"onColumnAggregation(column, 'max')\">\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                  Max\n                </button>\n                }\n              </div>\n            </div>\n            }\n          </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n        <!-- Skeleton Loading Rows -->\n        @for (skeletonItem of getSkeletonArray(); track $index) {\n        <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n            <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n          </td>\n          }\n        </tr>\n        }\n        } @else {\n        @for (item of displayedData; track trackByFn($index, item)) {\n        @if (isGroupHeader(item)) {\n        <!-- Group Header Row -->\n        @let groupKey = getGroupKey(item);\n        @let groupLevel = getGroupLevel(item);\n        <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n          [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n          [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n          <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n            <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n                {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n              </cide-ele-icon>\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n              </span>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n                {{ getGroupRowCount(item) }}\n              </span>\n\n              <!-- Group Aggregations -->\n              <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n                @for (agg of getGroupAggregations(item); track agg.key) {\n                <div class=\"tw-flex tw-flex-col tw-items-end\">\n                  <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n                  <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n                </div>\n                }\n              </div>\n            </div>\n          </td>\n        </tr>\n        } @else {\n        <!-- Regular Data Row -->\n        <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\" [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n          [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n          (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n          [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n          [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n          [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n          [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n          [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, $index)\"\n          (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, $index)\"\n          (dragend)=\"onDragEnd($event)\">\n\n          @for (column of visibleColumns(); track column.key) {\n          <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n            [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n            [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n            [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n            <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n            @if (isTreeEnabled() && $index === 0) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <!-- Tree Indentation -->\n              <div class=\"tw-flex tw-items-center\">\n                @if (hasChildren(item)) {\n                <button variant=\"outline\" size=\"xs\" type=\"button\"\n                  (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                  class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                  [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                  [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                    [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n                    chevron_right\n                  </cide-ele-icon>\n                </button>\n                } @else {\n                <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                  <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                </div>\n                }\n              </div>\n\n              <!-- Cell Content -->\n              <div class=\"tw-flex-1 tw-w-full\">\n                @if (column.type === 'text') {\n                <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n                  [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </p>\n                } @else if (column.type === 'number') {\n                <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'date') {\n                <span class=\"tw-text-sm tw-text-gray-600\">\n                  {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                </span>\n                } @else if (column.type === 'boolean') {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                  {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                </span>\n                } @else if (column.type === 'status' && column.statusConfig) {\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                  [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                  {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                </span>\n                } @else if (column.type === 'actions' && column.actions) {\n                <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                  @for (action of column.actions; track action.key) {\n                  <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                    (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                    [title]=\"action.tooltip || action.label\" [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                    [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                    @if (action.icon) {\n                    <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M10 12l-5-5h10l-5 5z\" />\n                    </svg>\n                    }\n                    {{ action.label }}\n                  </button>\n                  }\n                </div>\n                } @else if (column.type === 'custom') {\n                <!-- Template Renderer -->\n                @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                  [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                </ng-container>\n                }\n                <!-- Default rendering -->\n                @else {\n                <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                }\n                }\n              </div>\n            </div>\n            } @else {\n            <!-- Regular cell content (non-tree or non-first column) -->\n            @if (column.type === 'text') {\n            <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n              [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </p>\n            } @else if (column.type === 'number') {\n            <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'date') {\n            <span class=\"tw-text-sm tw-text-gray-600\">\n              {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n            </span>\n            } @else if (column.type === 'boolean') {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n              {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n            </span>\n            } @else if (column.type === 'status' && column.statusConfig) {\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n              [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n              {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n            </span>\n            } @else if (column.type === 'actions' && column.actions) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              @for (action of column.actions; track action.key) {\n              <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n                (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n                [disabled]=\"isRefreshing()\"\n                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                @if (action.icon) {\n                <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                  <path d=\"M10 12l-5-5h10l-5 5z\" />\n                </svg>\n                }\n                {{ action.label }}\n              </button>\n              }\n            </div>\n            } @else if (column.type === 'custom') {\n            <!-- Template Renderer -->\n            @if (column.renderer && isTemplateRenderer(column.renderer)) {\n            <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n            </ng-container>\n            }\n            <!-- Default rendering -->\n            @else {\n            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n            }\n            }\n            }\n          </td>\n          }\n        </tr>\n        }\n        }\n\n        <!-- Empty State -->\n        @if (displayedData.length === 0) {\n        <tr class=\"tw-h-full\">\n          <td [attr.colspan]=\"visibleColumns().length\"\n            class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n            <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n              <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n                </path>\n              </svg>\n              <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n              <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                @if (searchQuery()) {\n                No results match your search criteria.\n                } @else {\n                There are no items to display.\n                }\n              </p>\n            </div>\n          </td>\n        </tr>\n        }\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Card View -->\n    <div [id]=\"config.id + '-container'\" class=\"mobile-card-view tw-p-3 tw-space-y-3\"\n      [ngClass]=\"{'tw-h-full tw-flex tw-flex-col': mergedConfig().fullHeight}\">\n      @if (loading() || isRefreshing() || pageChangeLoading()) {\n      <!-- Card Skeletons -->\n      @for (skeletonItem of getSkeletonArray(); track $index) {\n      <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n          <div class=\"tw-flex-1\">\n            <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n          </div>\n          <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n        </div>\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n            <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      }\n      } @else if (displayedData.length > 0) {\n      @for (item of displayedData; track trackByFn($index, item)) {\n      <div\n        class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n        (click)=\"onRowClick(item)\">\n        <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n          <div class=\"tw-flex-1 tw-min-w-0\">\n            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n              {{ getMobilePrimaryValue(item) }}\n            </h4>\n            @if (getMobileSecondaryValue(item)) {\n            <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n              {{ getMobileSecondaryValue(item) }}\n            </p>\n            }\n          </div>\n\n          <!-- Card Actions -->\n          @if (getRowActions().length > 0) {\n          <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n            @for (action of getRowActions().slice(0, 2); track action.key) {\n            <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n              class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n              [class.tw-text-blue-600]=\"action.variant === 'primary'\"\n              [class.tw-text-red-600]=\"action.variant === 'danger'\" [title]=\"action.label\">\n              @if (action.icon) {\n              <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n              } @else {\n              <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n              }\n            </button>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Card Details Grid -->\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n          @for (col of getMobileDetailColumns(); track col.key) {\n          <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n            <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n              {{ col.header }}\n            </span>\n            <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n                      'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n                      'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n                    }\"\n              [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                               (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n              {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n              col.statusConfig) :\n              (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n              formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n            </span>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n      <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n          d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n        </path>\n      </svg>\n      <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n      <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n        {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n      </p>\n    </div>\n    }\n\n    @if (mergedConfig().pagination.infiniteScroll) {\n    <div class=\"scrollbar-spacer\" [style.height.px]=\"getInfiniteScrollSpacerHeight()\"></div>\n\n    <!-- Infinite Scroll Loading Spinner -->\n    @if (loading() || pageChangeLoading()) {\n    <div class=\"tw-flex tw-justify-center tw-py-4\">\n      <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n      </div>\n    </div>\n    }\n    }\n  </div>\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled && totalItems() > 0 && !mergedConfig().pagination.infiniteScroll) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-2 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size (Hidden on mobile) -->\n      <div class=\"tw-hidden sm:tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs sm:tw-text-sm tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[28px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], templateRenderers: [{