npm - cloud-ide-element - Versions diffs - 1.1.253 → 1.1.255 - Mend

cloud-ide-element 1.1.253 → 1.1.255

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/cloud-ide-element.mjs +11 -4
package/fesm2022/cloud-ide-element.mjs.map +1 -1
package/index.d.ts +7 -1
package/package.json +1 -1

package/fesm2022/cloud-ide-element.mjs CHANGED Viewed

@@ -7887,7 +7887,7 @@ class CideEleButtonComponent {
     /** @description Button style variant */
     variant = 'primary';
     /** @description Button size */
-    size = 'md';
+    size = 'xs';
     /** @description Button HTML type attribute */
     type = 'button';
     /** @description Button shape */
@@ -9776,6 +9776,13 @@ const OPEN_AI_ASSISTANT_ACTION = new InjectionToken('OPEN_AI_ASSISTANT_ACTION');
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CIDE_AI_DRAWER_COMPONENT = new InjectionToken('CIDE_AI_DRAWER_COMPONENT');
+/**
+ * Injection token for lazy-loading the AI drawer component.
+ * Provide a factory that returns Promise<Type> so layout can lazy-load the chat
+ * and show a skeleton until loaded.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CIDE_AI_DRAWER_LOADER = new InjectionToken('CIDE_AI_DRAWER_LOADER');
 /**
  * Service to open the AI assistant drawer from header/shortcut without navigating.
@@ -13638,7 +13645,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-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.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\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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-border-0\"\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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\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-hidden]=\"mergedConfig().scroll?.virtualScroll\" [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-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"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 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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 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-4 tw-h-4\">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-[24px] 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-6 tw-h-6 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-4 tw-h-4\">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>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (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</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (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\" [attr.data-index]=\"i\" [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 === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#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, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (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()\" [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()\" [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          } @else {\n          <!-- Default rendering -->\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      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\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</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (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'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [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  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\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</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\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</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\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</ng-template>", 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,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.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;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", "name"] }, { 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"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+    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-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.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\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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-border-0\"\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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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=\"xs\" 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=\"sm\" 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=\"xs\" 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=\"sm\" 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  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\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-hidden]=\"mergedConfig().scroll?.virtualScroll\" [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-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"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 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=\"sm\" 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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 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-4 tw-h-4\">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=\"sm\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[24px] 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-6 tw-h-6 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-4 tw-h-4\">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>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (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</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (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\" [attr.data-index]=\"i\" [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 === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#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, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (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()\" [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=\"sm\">\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()\" [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          } @else {\n          <!-- Default rendering -->\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      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\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</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (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'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [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  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\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</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\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</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\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</ng-template>", 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,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.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;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", "name"] }, { 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"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -13651,7 +13658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CideIconComponent,
                         CideEleButtonComponent,
                         ScrollingModule
-                    ], 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-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.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\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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-border-0\"\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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\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-hidden]=\"mergedConfig().scroll?.virtualScroll\" [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-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"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 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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 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-4 tw-h-4\">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-[24px] 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-6 tw-h-6 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-4 tw-h-4\">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>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (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</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (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\" [attr.data-index]=\"i\" [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 === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#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, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (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()\" [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()\" [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          } @else {\n          <!-- Default rendering -->\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      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\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</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (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'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [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  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\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</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\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</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\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</ng-template>", 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,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.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;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-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.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\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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-border-0\"\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-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm: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 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\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=\"xs\" 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=\"sm\" 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=\"xs\" 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=\"sm\" 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  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\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-hidden]=\"mergedConfig().scroll?.virtualScroll\" [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-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"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 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=\"sm\" 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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">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-6 tw-h-6 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-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 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-4 tw-h-4\">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=\"sm\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[24px] 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-6 tw-h-6 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-4 tw-h-4\">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>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (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'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (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</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (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\" [attr.data-index]=\"i\" [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 === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#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, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (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()\" [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=\"sm\">\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()\" [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          } @else {\n          <!-- Default rendering -->\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      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\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</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (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'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [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  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\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</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\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</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\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</ng-template>", 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,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.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;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: [{
@@ -15830,5 +15837,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { AiAssistantTriggerService, CIDE_AI_DRAWER_COMPONENT, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, OPEN_AI_ASSISTANT_ACTION, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, fetchCideIcon, getCideIconSvg, hostManagerRoutesUrl, notificationRoutesUrl };
+export { AiAssistantTriggerService, CIDE_AI_DRAWER_COMPONENT, CIDE_AI_DRAWER_LOADER, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, OPEN_AI_ASSISTANT_ACTION, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, fetchCideIcon, getCideIconSvg, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map