@gp-grid/angular 0.20.0 → 0.22.0

package/dist/styles.css

@@ -1,1115 +1 @@
-
-/* =============================================================================
-   GP Grid - CSS Variables for Theming
-   ============================================================================= */
-
-.gp-grid-container {
-  /* Colors - Light Mode (default) */
-  --gp-grid-bg: #ffffff;
-  --gp-grid-bg-alt: #f8f9fa;
-  --gp-grid-text: #212529;
-  --gp-grid-text-secondary: #6c757d;
-  --gp-grid-text-muted: #adb5bd;
-  --gp-grid-border: #dee2e6;
-  --gp-grid-border-light: #e9ecef;
-
-  /* Header */
-  --gp-grid-header-bg: #f1f3f5;
-  --gp-grid-header-text: #212529;
-  --gp-grid-header-z-index: 10;
-
-  /* Selection */
-  --gp-grid-primary: #228be6;
-  --gp-grid-primary-light: #e7f5ff;
-  --gp-grid-primary-border: #74c0fc;
-  --gp-grid-hover: #f1f3f5;
-
-  /* Filter */
-  --gp-grid-filter-bg: #f8f9fa;
-  --gp-grid-input-bg: #ffffff;
-  --gp-grid-input-border: #ced4da;
-
-  /* Error */
-  --gp-grid-error-bg: #fff5f5;
-  --gp-grid-error-text: #c92a2a;
-
-  /* Loading */
-  --gp-grid-loading-bg: rgba(255, 255, 255, 0.95);
-  --gp-grid-loading-text: #495057;
-
-  /* Scrollbar */
-  --gp-grid-scrollbar-track: #f1f3f5;
-  --gp-grid-scrollbar-thumb: #ced4da;
-  --gp-grid-scrollbar-thumb-hover: #adb5bd;
-}
-
-/* Dark Mode */
-.gp-grid-container--dark {
-  --gp-grid-bg: #1a1b1e;
-  --gp-grid-bg-alt: #25262b;
-  --gp-grid-text: #c1c2c5;
-  --gp-grid-text-secondary: #909296;
-  --gp-grid-text-muted: #5c5f66;
-  --gp-grid-border: #373a40;
-  --gp-grid-border-light: #2c2e33;
-
-  /* Header */
-  --gp-grid-header-bg: #25262b;
-  --gp-grid-header-text: #c1c2c5;
-  --gp-grid-header-z-index: 10;
-
-  /* Selection */
-  --gp-grid-primary: #339af0;
-  --gp-grid-primary-light: #1c3d5a;
-  --gp-grid-primary-border: #1c7ed6;
-  --gp-grid-hover: #2c2e33;
-
-  /* Filter */
-  --gp-grid-filter-bg: #25262b;
-  --gp-grid-input-bg: #1a1b1e;
-  --gp-grid-input-border: #373a40;
-
-  /* Error */
-  --gp-grid-error-bg: #2c1a1a;
-  --gp-grid-error-text: #ff6b6b;
-
-  /* Loading */
-  --gp-grid-loading-bg: rgba(26, 27, 30, 0.95);
-  --gp-grid-loading-text: #c1c2c5;
-
-  /* Scrollbar */
-  --gp-grid-scrollbar-track: #25262b;
-  --gp-grid-scrollbar-thumb: #373a40;
-  --gp-grid-scrollbar-thumb-hover: #4a4d52;
-}
-
-
-/* =============================================================================
-   GP Grid - Clean Flat Design
-   ============================================================================= */
-
-/* Grid Container - structural */
-.gp-grid-container {
-  outline: none;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Visual properties - :where() for zero specificity, consumers can override with a single class */
-:where(.gp-grid-container) {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--gp-grid-text);
-  background-color: var(--gp-grid-bg);
-  border: 1px solid var(--gp-grid-border);
-  border-radius: 6px;
-}
-
-.gp-grid-container:focus {
-  outline: none;
-}
-
-:where(.gp-grid-container:focus) {
-  border-color: var(--gp-grid-primary);
-}
-
-
-/* =============================================================================
-   Header
-   ============================================================================= */
-
-.gp-grid-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  flex-shrink: 0;
-  z-index: 11;
-  overflow: hidden;
-}
-
-:where(.gp-grid-header) {
-  background-color: var(--gp-grid-header-bg);
-  border-bottom: 1px solid var(--gp-grid-border);
-}
-
-.gp-grid-container .gp-grid-header-cell {
-  position: absolute;
-  box-sizing: border-box;
-  user-select: none;
-  display: flex;
-  top: 0;
-  touch-action: none;
-}
-
-:where(.gp-grid-header-cell) {
-  align-items: center;
-  padding: 0 12px;
-  border-right: 1px solid var(--gp-grid-border);
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  color: var(--gp-grid-header-text);
-  cursor: pointer;
-  background-color: transparent;
-  transition: background-color 0.1s ease;
-}
-
-:where(.gp-grid-header-cell:hover) {
-  background-color: var(--gp-grid-hover);
-}
-
-:where(.gp-grid-header-cell:active) {
-  background-color: var(--gp-grid-border-light);
-}
-
-.gp-grid-container .gp-grid-header-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:where(.gp-grid-header-text) {
-  color: var(--gp-grid-header-text);
-}
-
-/* Header icons container */
-.gp-grid-header-icons {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
-}
-
-/* Stacked sort arrows */
-.gp-grid-sort-arrows {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 2px;
-  margin-left: 6px;
-}
-
-.gp-grid-sort-arrows-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-:where(.gp-grid-sort-arrow-up),
-:where(.gp-grid-sort-arrow-down) {
-  opacity: 0.35;
-  transition: opacity 0.15s ease, color 0.15s ease;
-  color: var(--gp-grid-text);
-}
-
-:where(.gp-grid-sort-arrow-up.active),
-:where(.gp-grid-sort-arrow-down.active) {
-  opacity: 1;
-  color: var(--gp-grid-primary);
-}
-
-:where(.gp-grid-sort-index) {
-  font-size: 9px;
-  color: var(--gp-grid-primary);
-  font-weight: 600;
-}
-
-/* Filter icon */
-.gp-grid-filter-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-:where(.gp-grid-filter-icon) {
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--gp-grid-text-secondary);
-  transition: background-color 0.15s ease, color 0.15s ease;
-  margin-left: 2px;
-}
-
-:where(.gp-grid-filter-icon:hover) {
-  background-color: var(--gp-grid-hover);
-  color: var(--gp-grid-primary);
-}
-
-:where(.gp-grid-filter-icon.active) {
-  color: var(--gp-grid-primary);
-  background-color: var(--gp-grid-primary-light);
-}
-
-/* Touch device: larger tap target for filter icon */
-@media (pointer: coarse) and (hover: none) and (max-width: 768px) {
-  .gp-grid-filter-icon {
-    min-width: 44px;
-    min-height: 44px;
-    width: 44px;
-    height: 44px;
-  }
-  :where(.gp-grid-filter-icon) {
-    margin-left: 0;
-  }
-
-  .gp-grid-filter-icon svg {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-/* Disabled header state during data loading */
-.gp-grid-header--loading .gp-grid-header-cell {
-  pointer-events: none;
-}
-
-:where(.gp-grid-header--loading .gp-grid-header-cell) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-/* =============================================================================
-   Column Resize
-   ============================================================================= */
-
-.gp-grid-header-resize-handle {
-  position: absolute;
-  right: -3px;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 10;
-  touch-action: none;
-}
-
-:where(.gp-grid-header-resize-handle:hover),
-:where(.gp-grid-header-resize-handle--active) {
-  background-color: var(--gp-grid-primary);
-  opacity: 0.4;
-}
-
-/* Touch device: wider resize handle hit area */
-@media (pointer: coarse) and (hover: none) and (max-width: 768px) {
-  .gp-grid-header-resize-handle {
-    width: 24px;
-    right: -12px;
-  }
-}
-
-.gp-grid-column-resize-line {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  height: 100%;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-:where(.gp-grid-column-resize-line) {
-  background-color: var(--gp-grid-primary);
-}
-
-/* =============================================================================
-   Column Move
-   ============================================================================= */
-
-.gp-grid-column-move-ghost {
-  position: fixed;
-  pointer-events: none;
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-:where(.gp-grid-column-move-ghost) {
-  opacity: 0.7;
-  background-color: var(--gp-grid-header-bg);
-  border: 2px solid var(--gp-grid-primary);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 0 12px;
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  color: var(--gp-grid-header-text);
-}
-
-.gp-grid-column-drop-indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-:where(.gp-grid-column-drop-indicator) {
-  background-color: var(--gp-grid-primary);
-  border-radius: 2px;
-}
-
-
-/* =============================================================================
-   Data Cells
-   ============================================================================= */
-
-/* Rows wrapper - positions rows with small translateY values for large datasets */
-.gp-grid-rows-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  /* Keep wrapper below the sticky header (z-index: 10) */
-  z-index: 1;
-  will-change: transform; 
-}
-
-.gp-grid-row {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-/* Row background - :where() for zero specificity, so user highlight classes always win */
-:where(.gp-grid-row) {
-  background-color: var(--gp-grid-bg);
-}
-
-/* Structural properties - required for grid layout */
-.gp-grid-cell {
-  position: absolute;
-  top: 0;
-  box-sizing: border-box;
-  display: flex;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Visual properties - :where() for zero specificity, so user highlight classes always win */
-:where(.gp-grid-cell) {
-  align-items: center;
-  padding: 0 12px;
-  cursor: cell;
-  color: var(--gp-grid-text);
-  border-right: 1px solid var(--gp-grid-border-light);
-  border-bottom: 1px solid var(--gp-grid-border-light);
-  background-color: transparent;
-}
-
-/* Active cell (focused) - structural properties stay, visual use :where() */
-.gp-grid-cell--active {
-  outline: none;
-  z-index: 5;
-}
-:where(.gp-grid-cell--active) {
-  background-color: var(--gp-grid-primary-light);
-  border: 2px solid var(--gp-grid-primary);
-  padding: 0 11px;
-}
-
-/* Selected cells (range selection) */
-:where(.gp-grid-cell--selected) {
-  background-color: var(--gp-grid-primary-light);
-}
-
-/* Editing cell - structural properties stay, visual use :where() */
-.gp-grid-cell--editing {
-  z-index: 10;
-}
-:where(.gp-grid-cell--editing) {
-  background-color: var(--gp-grid-bg);
-  border: 2px solid var(--gp-grid-primary);
-  padding: 0;
-}
-
-/* =============================================================================
-   Fill Handle (drag to fill)
-   ============================================================================= */
-
-.gp-grid-fill-handle {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  z-index: 11;
-  pointer-events: auto;
-  box-sizing: border-box;
-  touch-action: none;
-}
-
-:where(.gp-grid-fill-handle) {
-  background-color: var(--gp-grid-primary);
-  border: 2px solid var(--gp-grid-bg);
-  cursor: crosshair;
-  border-radius: 1px;
-}
-
-:where(.gp-grid-fill-handle:hover) {
-  transform: scale(1.2);
-}
-
-@media (pointer: coarse) and (hover: none) and (max-width: 768px) {
-  .gp-grid-fill-handle {
-    width: 24px;
-    height: 24px;
-  }
-  :where(.gp-grid-fill-handle) {
-    border-width: 3px;
-    border-radius: 3px;
-  }
-}
-
-/* Fill preview (cells being filled) */
-:where(.gp-grid-cell.gp-grid-cell--fill-preview) {
-  background-color: var(--gp-grid-primary-light);
-  border: 1px dashed var(--gp-grid-primary);
-}
-
-/* =============================================================================
-   Edit Input
-   ============================================================================= */
-
-.gp-grid-edit-input {
-  width: 100%;
-  height: 100%;
-}
-
-:where(.gp-grid-edit-input) {
-  padding: 0 11px;
-  font-family: inherit;
-  font-size: inherit;
-  color: var(--gp-grid-text);
-  border: none;
-  background-color: transparent;
-}
-
-.gp-grid-edit-input:focus {
-  outline: none;
-}
-
-/* =============================================================================
-   Cell Peek (read-only multi-line overlay on dblclick of non-editable cell)
-   ============================================================================= */
-
-/* Structural: positioned absolutely by the framework wrapper; must sit above
-   selection (z:5), editing (z:10), fill handle (z:11). */
-.gp-grid-cell-peek {
-  position: absolute;
-  z-index: 20;
-  box-sizing: border-box;
-  overflow: auto;
-  max-height: 320px;
-}
-
-:where(.gp-grid-cell-peek) {
-  padding: 8px 11px;
-  background-color: var(--gp-grid-bg);
-  color: var(--gp-grid-text);
-  border: 2px solid var(--gp-grid-primary);
-  border-radius: 3px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1.4;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  cursor: text;
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-
-
-/* =============================================================================
-   Loading & Error States
-   ============================================================================= */
-
-/* Sticky wrapper: stays pinned at viewport top, takes no layout space */
-.gp-grid-loading-anchor {
-  position: sticky;
-  top: 0;
-  left: 0;
-  height: 0;
-  z-index: 900;
-  overflow: visible;
-  pointer-events: none;
-}
-
-/* Semi-transparent overlay covering the visible viewport area */
-.gp-grid-loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-:where(.gp-grid-loading-overlay) {
-  background-color: var(--gp-grid-loading-overlay-bg, rgba(255, 255, 255, 0.4));
-}
-
-:where(.gp-grid-container--dark .gp-grid-loading-overlay) {
-  background-color: var(--gp-grid-loading-overlay-bg, rgba(0, 0, 0, 0.3));
-}
-
-/* Loading indicator centered in the visible viewport */
-.gp-grid-loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-  display: flex;
-  pointer-events: auto;
-}
-
-:where(.gp-grid-loading) {
-  align-items: center;
-  padding: 12px 20px;
-  background-color: var(--gp-grid-loading-bg);
-  color: var(--gp-grid-loading-text);
-  border-radius: 6px;
-  border: 1px solid var(--gp-grid-border);
-  font-weight: 500;
-  font-size: 13px;
-  gap: 10px;
-}
-
-.gp-grid-loading-spinner {
-  width: 16px;
-  height: 16px;
-  animation: gp-grid-spin 0.7s linear infinite;
-}
-
-:where(.gp-grid-loading-spinner) {
-  border: 2px solid var(--gp-grid-border);
-  border-top-color: var(--gp-grid-primary);
-  border-radius: 50%;
-}
-
-@keyframes gp-grid-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.gp-grid-error {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-:where(.gp-grid-error) {
-  padding: 12px 20px;
-  background-color: var(--gp-grid-error-bg);
-  color: var(--gp-grid-error-text);
-  border-radius: 6px;
-  border: 1px solid var(--gp-grid-error-text);
-  font-weight: 500;
-  font-size: 13px;
-  max-width: 80%;
-  text-align: center;
-  cursor: text;
-}
-
-/* =============================================================================
-   Empty State
-   ============================================================================= */
-
-.gp-grid-empty {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-:where(.gp-grid-empty) {
-  color: var(--gp-grid-text-muted);
-  font-size: 14px;
-  text-align: center;
-}
-
-
-/* =============================================================================
-   Scrollbar Styling
-   ============================================================================= */
-
-.gp-grid-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-:where(.gp-grid-container)::-webkit-scrollbar-track {
-  background-color: var(--gp-grid-scrollbar-track);
-}
-
-:where(.gp-grid-container)::-webkit-scrollbar-thumb {
-  background-color: var(--gp-grid-scrollbar-thumb);
-  border-radius: 4px;
-}
-
-:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gp-grid-scrollbar-thumb-hover);
-}
-
-:where(.gp-grid-container)::-webkit-scrollbar-corner {
-  background-color: var(--gp-grid-scrollbar-track);
-}
-
-
-/* =============================================================================
-   Filter Popup
-   ============================================================================= */
-
-.gp-grid-filter-popup {
-  max-height: 400px;
-  max-width: min(360px, calc(100vw - 16px));
-  display: flex;
-  flex-direction: column;
-}
-
-:where(.gp-grid-filter-popup) {
-  background-color: var(--gp-grid-bg);
-  border: 1px solid var(--gp-grid-border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 13px;
-}
-
-:where(.gp-grid-filter-header) {
-  padding: 10px 12px;
-  font-weight: 600;
-  border-bottom: 1px solid var(--gp-grid-border-light);
-  color: var(--gp-grid-header-text);
-}
-
-.gp-grid-filter-content {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-:where(.gp-grid-filter-content) {
-  padding: 10px 12px;
-  gap: 10px;
-}
-
-/* Mode toggle (Values / Condition) */
-.gp-grid-filter-mode-toggle {
-  display: flex;
-}
-
-:where(.gp-grid-filter-mode-toggle) {
-  gap: 4px;
-  background-color: var(--gp-grid-bg-alt);
-  border-radius: 4px;
-  padding: 2px;
-}
-
-.gp-grid-filter-mode-toggle button {
-  flex: 1;
-}
-
-:where(.gp-grid-filter-mode-toggle button) {
-  padding: 6px 10px;
-  font-size: 11px;
-  font-family: inherit;
-  border: none;
-  border-radius: 3px;
-  background-color: transparent;
-  color: var(--gp-grid-text-secondary);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-:where(.gp-grid-filter-mode-toggle button:hover) {
-  color: var(--gp-grid-text);
-}
-
-:where(.gp-grid-filter-mode-toggle button.active) {
-  background-color: var(--gp-grid-bg);
-  color: var(--gp-grid-text);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Info message for too many values */
-:where(.gp-grid-filter-info) {
-  font-size: 11px;
-  color: var(--gp-grid-text-secondary);
-  padding: 6px 8px;
-  background-color: var(--gp-grid-bg-alt);
-  border-radius: 4px;
-}
-
-/* Search input in filter */
-.gp-grid-filter-search {
-  width: 100%;
-  height: 30px;
-  box-sizing: border-box;
-}
-
-:where(.gp-grid-filter-search) {
-  padding: 0 10px;
-  font-family: inherit;
-  font-size: 12px;
-  border: 1px solid var(--gp-grid-input-border);
-  border-radius: 4px;
-  background-color: var(--gp-grid-input-bg);
-  color: var(--gp-grid-text);
-}
-
-:where(.gp-grid-filter-search:focus) {
-  outline: none;
-  border-color: var(--gp-grid-primary);
-}
-
-/* Select All / Deselect All actions */
-.gp-grid-filter-actions {
-  display: flex;
-}
-
-:where(.gp-grid-filter-actions) {
-  gap: 8px;
-}
-
-.gp-grid-filter-actions button {
-  flex: 1;
-}
-
-:where(.gp-grid-filter-actions button) {
-  padding: 4px 8px;
-  font-size: 11px;
-  font-family: inherit;
-  border: 1px solid var(--gp-grid-input-border);
-  border-radius: 3px;
-  background-color: var(--gp-grid-bg);
-  color: var(--gp-grid-text);
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-actions button:hover:not(:disabled)) {
-  background-color: var(--gp-grid-hover);
-}
-
-:where(.gp-grid-filter-actions button:disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Checkbox list */
-.gp-grid-filter-list {
-  max-height: 200px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-:where(.gp-grid-filter-list) {
-  gap: 4px;
-  border: 1px solid var(--gp-grid-border-light);
-  border-radius: 4px;
-  padding: 6px;
-}
-
-.gp-grid-filter-option {
-  display: flex;
-  align-items: center;
-}
-
-:where(.gp-grid-filter-option) {
-  gap: 8px;
-  padding: 4px 6px;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-option:hover) {
-  background-color: var(--gp-grid-hover);
-}
-
-.gp-grid-filter-option input[type="checkbox"] {
-  margin: 0;
-}
-
-:where(.gp-grid-filter-option input[type="checkbox"]) {
-  cursor: pointer;
-}
-
-.gp-grid-filter-option span {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:where(.gp-grid-filter-blank) {
-  font-style: italic;
-  color: var(--gp-grid-text-muted);
-}
-
-/* Filter condition row (for number/date filters) */
-.gp-grid-filter-condition {
-  display: flex;
-  flex-direction: column;
-}
-
-:where(.gp-grid-filter-condition) {
-  gap: 6px;
-}
-
-.gp-grid-filter-row {
-  display: flex;
-  align-items: center;
-}
-
-:where(.gp-grid-filter-row) {
-  gap: 6px;
-}
-
-.gp-grid-filter-row select {
-  height: 30px;
-}
-
-:where(.gp-grid-filter-row select) {
-  padding: 0 6px;
-  font-family: inherit;
-  font-size: 12px;
-  border: 1px solid var(--gp-grid-input-border);
-  border-radius: 4px;
-  background-color: var(--gp-grid-input-bg);
-  color: var(--gp-grid-text);
-  cursor: pointer;
-}
-
-.gp-grid-filter-row input[type="number"],
-.gp-grid-filter-row input[type="date"],
-.gp-grid-filter-row input[type="text"],
-.gp-grid-filter-text-input {
-  flex: 1;
-  height: 30px;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-:where(.gp-grid-filter-row input[type="number"]),
-:where(.gp-grid-filter-row input[type="date"]),
-:where(.gp-grid-filter-row input[type="text"]),
-:where(.gp-grid-filter-text-input) {
-  padding: 0 8px;
-  font-family: inherit;
-  font-size: 12px;
-  border: 1px solid var(--gp-grid-input-border);
-  border-radius: 4px;
-  background-color: var(--gp-grid-input-bg);
-  color: var(--gp-grid-text);
-}
-
-:where(.gp-grid-filter-row input:focus) {
-  outline: none;
-  border-color: var(--gp-grid-primary);
-}
-
-:where(.gp-grid-filter-to) {
-  font-size: 11px;
-  color: var(--gp-grid-text-secondary);
-}
-
-.gp-grid-filter-remove {
-  width: 24px;
-  height: 24px;
-}
-
-:where(.gp-grid-filter-remove) {
-  padding: 0;
-  font-size: 16px;
-  line-height: 1;
-  border: none;
-  border-radius: 3px;
-  background-color: transparent;
-  color: var(--gp-grid-text-muted);
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-remove:hover) {
-  background-color: var(--gp-grid-error-bg);
-  color: var(--gp-grid-error-text);
-}
-
-/* AND/OR combination toggle */
-.gp-grid-filter-combination {
-  display: flex;
-}
-
-:where(.gp-grid-filter-combination) {
-  gap: 4px;
-  margin-bottom: 4px;
-}
-
-.gp-grid-filter-combination button {
-  flex: 1;
-}
-
-:where(.gp-grid-filter-combination button) {
-  padding: 4px 8px;
-  font-size: 10px;
-  font-family: inherit;
-  border: 1px solid var(--gp-grid-input-border);
-  border-radius: 3px;
-  background-color: var(--gp-grid-bg);
-  color: var(--gp-grid-text-secondary);
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-combination button.active) {
-  background-color: var(--gp-grid-primary);
-  border-color: var(--gp-grid-primary);
-  color: #fff;
-}
-
-/* Add condition button */
-.gp-grid-filter-add {
-  width: 100%;
-}
-
-:where(.gp-grid-filter-add) {
-  padding: 6px;
-  font-size: 11px;
-  font-family: inherit;
-  border: 1px dashed var(--gp-grid-border);
-  border-radius: 4px;
-  background-color: transparent;
-  color: var(--gp-grid-text-secondary);
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-add:hover) {
-  background-color: var(--gp-grid-hover);
-  border-color: var(--gp-grid-primary);
-  color: var(--gp-grid-primary);
-}
-
-/* Apply / Clear buttons */
-.gp-grid-filter-buttons {
-  display: flex;
-}
-
-:where(.gp-grid-filter-buttons) {
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--gp-grid-border-light);
-}
-
-.gp-grid-filter-btn-clear,
-.gp-grid-filter-btn-apply {
-  flex: 1;
-}
-
-:where(.gp-grid-filter-btn-clear),
-:where(.gp-grid-filter-btn-apply) {
-  padding: 8px 12px;
-  font-size: 12px;
-  font-family: inherit;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-:where(.gp-grid-filter-btn-clear) {
-  border: 1px solid var(--gp-grid-input-border);
-  background-color: var(--gp-grid-bg);
-  color: var(--gp-grid-text);
-}
-
-:where(.gp-grid-filter-btn-clear:hover) {
-  background-color: var(--gp-grid-hover);
-}
-
-:where(.gp-grid-filter-btn-apply) {
-  border: 1px solid var(--gp-grid-primary);
-  background-color: var(--gp-grid-primary);
-  color: #fff;
-}
-
-:where(.gp-grid-filter-btn-apply:hover) {
-  opacity: 0.9;
-}
-
-
-/* =============================================================================
-   Row Drag
-   ============================================================================= */
-
-.gp-grid-cell--row-drag-handle {
-  touch-action: none;
-}
-
-:where(.gp-grid-cell--row-drag-handle) {
-  cursor: grab;
-}
-
-:where(.gp-grid-cell--row-drag-handle:active) {
-  cursor: grabbing;
-}
-
-.gp-grid-row-drag-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-:where(.gp-grid-row-drag-icon) {
-  color: var(--gp-grid-text-secondary);
-}
-
-.gp-grid-row-drag-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.gp-grid-row-drag-ghost {
-  position: fixed;
-  pointer-events: none;
-  z-index: 2000;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-:where(.gp-grid-row-drag-ghost) {
-  opacity: 0.8;
-  background-color: var(--gp-grid-bg, #fff);
-  border: 2px solid var(--gp-grid-primary);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.gp-grid-row-drop-indicator {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-:where(.gp-grid-row-drop-indicator) {
-  background-color: var(--gp-grid-primary);
-  border-radius: 2px;
-}
+.gp-grid-container{--gp-grid-bg:#fff;--gp-grid-bg-alt:#f8f9fa;--gp-grid-text:#212529;--gp-grid-text-secondary:#6c757d;--gp-grid-text-muted:#adb5bd;--gp-grid-border:#dee2e6;--gp-grid-border-light:#e9ecef;--gp-grid-header-bg:#f1f3f5;--gp-grid-header-text:#212529;--gp-grid-header-z-index:10;--gp-grid-primary:#228be6;--gp-grid-primary-light:#e7f5ff;--gp-grid-primary-border:#74c0fc;--gp-grid-hover:#f1f3f5;--gp-grid-filter-bg:#f8f9fa;--gp-grid-input-bg:#fff;--gp-grid-input-border:#ced4da;--gp-grid-error-bg:#fff5f5;--gp-grid-error-text:#c92a2a;--gp-grid-loading-bg:#fffffff2;--gp-grid-loading-text:#495057;--gp-grid-scrollbar-track:#f1f3f5;--gp-grid-scrollbar-thumb:#ced4da;--gp-grid-scrollbar-thumb-hover:#adb5bd}.gp-grid-container--dark{--gp-grid-bg:#1a1b1e;--gp-grid-bg-alt:#25262b;--gp-grid-text:#c1c2c5;--gp-grid-text-secondary:#909296;--gp-grid-text-muted:#5c5f66;--gp-grid-border:#373a40;--gp-grid-border-light:#2c2e33;--gp-grid-header-bg:#25262b;--gp-grid-header-text:#c1c2c5;--gp-grid-header-z-index:10;--gp-grid-primary:#339af0;--gp-grid-primary-light:#1c3d5a;--gp-grid-primary-border:#1c7ed6;--gp-grid-hover:#2c2e33;--gp-grid-filter-bg:#25262b;--gp-grid-input-bg:#1a1b1e;--gp-grid-input-border:#373a40;--gp-grid-error-bg:#2c1a1a;--gp-grid-error-text:#ff6b6b;--gp-grid-loading-bg:#1a1b1ef2;--gp-grid-loading-text:#c1c2c5;--gp-grid-scrollbar-track:#25262b;--gp-grid-scrollbar-thumb:#373a40;--gp-grid-scrollbar-thumb-hover:#4a4d52}.gp-grid-container{-webkit-user-select:none;user-select:none;outline:none}:where(.gp-grid-container){color:var(--gp-grid-text);background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1.5}.gp-grid-container:focus{outline:none}:where(.gp-grid-container:focus){border-color:var(--gp-grid-primary)}.gp-grid-header{z-index:11;flex-shrink:0;position:sticky;top:0;left:0;overflow:hidden}:where(.gp-grid-header){background-color:var(--gp-grid-header-bg);border-bottom:1px solid var(--gp-grid-border)}.gp-grid-container .gp-grid-header-cell{box-sizing:border-box;user-select:none;touch-action:none;display:flex;position:absolute;top:0}:where(.gp-grid-header-cell){border-right:1px solid var(--gp-grid-border);letter-spacing:.5px;color:var(--gp-grid-header-text);cursor:pointer;background-color:#0000;align-items:center;padding:0 12px;font-size:12px;font-weight:600;transition:background-color .1s}:where(.gp-grid-header-cell:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-header-cell:active){background-color:var(--gp-grid-border-light)}.gp-grid-container .gp-grid-header-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-header-text){color:var(--gp-grid-header-text)}.gp-grid-header-icons{align-items:center;gap:4px;margin-left:auto;display:flex}.gp-grid-sort-arrows{flex-direction:row;align-items:center;gap:2px;margin-left:6px;display:flex}.gp-grid-sort-arrows-stack{flex-direction:column;align-items:center;gap:2px;display:flex}:where(.gp-grid-sort-arrow-up),:where(.gp-grid-sort-arrow-down){opacity:.35;color:var(--gp-grid-text);transition:opacity .15s,color .15s}:where(.gp-grid-sort-arrow-up.active),:where(.gp-grid-sort-arrow-down.active){opacity:1;color:var(--gp-grid-primary)}:where(.gp-grid-sort-index){color:var(--gp-grid-primary);font-size:9px;font-weight:600}.gp-grid-filter-icon{justify-content:center;align-items:center;width:20px;height:20px;display:flex}:where(.gp-grid-filter-icon){cursor:pointer;color:var(--gp-grid-text-secondary);border-radius:4px;margin-left:2px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-icon:hover){background-color:var(--gp-grid-hover);color:var(--gp-grid-primary)}:where(.gp-grid-filter-icon.active){color:var(--gp-grid-primary);background-color:var(--gp-grid-primary-light)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-filter-icon{width:44px;min-width:44px;height:44px;min-height:44px}:where(.gp-grid-filter-icon){margin-left:0}.gp-grid-filter-icon svg{width:20px;height:20px}}.gp-grid-header--loading .gp-grid-header-cell{pointer-events:none}:where(.gp-grid-header--loading .gp-grid-header-cell){opacity:.6;cursor:default}.gp-grid-header-resize-handle{cursor:col-resize;z-index:10;touch-action:none;width:6px;height:100%;position:absolute;top:0;right:-3px}:where(.gp-grid-header-resize-handle:hover),:where(.gp-grid-header-resize-handle--active){background-color:var(--gp-grid-primary);opacity:.4}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-header-resize-handle{width:24px;right:-12px}}.gp-grid-column-resize-line{z-index:1000;pointer-events:none;width:2px;height:100%;position:absolute;top:0}:where(.gp-grid-column-resize-line){background-color:var(--gp-grid-primary)}.gp-grid-column-move-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;align-items:center;display:flex;position:fixed;overflow:hidden}:where(.gp-grid-column-move-ghost){opacity:.7;background-color:var(--gp-grid-header-bg);border:2px solid var(--gp-grid-primary);letter-spacing:.5px;color:var(--gp-grid-header-text);border-radius:4px;padding:0 12px;font-size:12px;font-weight:600;box-shadow:0 4px 12px #00000026}.gp-grid-column-drop-indicator{z-index:1000;pointer-events:none;width:3px;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-column-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}.gp-grid-rows-wrapper{z-index:1;will-change:transform;position:absolute;top:0;left:0}.gp-grid-row{position:absolute;top:0;left:0}:where(.gp-grid-row){background-color:var(--gp-grid-bg)}.gp-grid-cell{box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none;display:flex;position:absolute;top:0;overflow:hidden}.gp-grid-cell-content{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.gp-grid-cell--wrap{align-items:flex-start}.gp-grid-cell--wrap .gp-grid-cell-content{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}:where(.gp-grid-cell){cursor:cell;color:var(--gp-grid-text);border-right:1px solid var(--gp-grid-border-light);border-bottom:1px solid var(--gp-grid-border-light);background-color:#0000;align-items:center;padding:0 12px}.gp-grid-cell--active{z-index:5;outline:none}:where(.gp-grid-cell--active){background-color:var(--gp-grid-primary-light);border:2px solid var(--gp-grid-primary);padding:0 11px}:where(.gp-grid-cell--selected){background-color:var(--gp-grid-primary-light)}.gp-grid-cell--editing{z-index:10}:where(.gp-grid-cell--editing){background-color:var(--gp-grid-bg);border:2px solid var(--gp-grid-primary);padding:0}.gp-grid-fill-handle{z-index:11;pointer-events:auto;box-sizing:border-box;touch-action:none;width:8px;height:8px;position:absolute}:where(.gp-grid-fill-handle){background-color:var(--gp-grid-primary);border:2px solid var(--gp-grid-bg);cursor:crosshair;border-radius:1px}:where(.gp-grid-fill-handle:hover){transform:scale(1.2)}@media (pointer:coarse) and (hover:none) and (width<=768px){.gp-grid-fill-handle{width:24px;height:24px}:where(.gp-grid-fill-handle){border-width:3px;border-radius:3px}}:where(.gp-grid-cell.gp-grid-cell--fill-preview){background-color:var(--gp-grid-primary-light);border:1px dashed var(--gp-grid-primary)}.gp-grid-edit-input{width:100%;height:100%}:where(.gp-grid-edit-input){font-family:inherit;font-size:inherit;color:var(--gp-grid-text);background-color:#0000;border:none;padding:0 11px}.gp-grid-edit-input:focus{outline:none}.gp-grid-cell-peek{z-index:20;box-sizing:border-box;max-height:320px;position:absolute;overflow:auto}:where(.gp-grid-cell-peek){background-color:var(--gp-grid-bg);color:var(--gp-grid-text);border:2px solid var(--gp-grid-primary);font-family:inherit;font-size:inherit;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;-webkit-user-select:text;user-select:text;border-radius:3px;padding:8px 11px;line-height:1.4;box-shadow:0 4px 12px #00000026}.gp-grid-cell-peek .gp-grid-cell-content{white-space:inherit;text-overflow:clip;overflow:visible}.gp-grid-loading-anchor{z-index:900;pointer-events:none;height:0;position:sticky;top:0;left:0;overflow:visible}.gp-grid-loading-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}:where(.gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#fff6)}:where(.gp-grid-container--dark .gp-grid-loading-overlay){background-color:var(--gp-grid-loading-overlay-bg,#0000004d)}.gp-grid-loading{z-index:1000;pointer-events:auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-loading){background-color:var(--gp-grid-loading-bg);color:var(--gp-grid-loading-text);border:1px solid var(--gp-grid-border);border-radius:6px;align-items:center;gap:10px;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-loading-spinner{width:16px;height:16px;animation:.7s linear infinite gp-grid-spin}:where(.gp-grid-loading-spinner){border:2px solid var(--gp-grid-border);border-top-color:var(--gp-grid-primary);border-radius:50%}@keyframes gp-grid-spin{to{transform:rotate(360deg)}}.gp-grid-error{z-index:1000;-webkit-user-select:text;user-select:text;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-error){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text);border:1px solid var(--gp-grid-error-text);text-align:center;cursor:text;border-radius:6px;max-width:80%;padding:12px 20px;font-size:13px;font-weight:500}.gp-grid-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:where(.gp-grid-empty){color:var(--gp-grid-text-muted);text-align:center;font-size:14px}.gp-grid-container::-webkit-scrollbar{width:8px;height:8px}:where(.gp-grid-container)::-webkit-scrollbar-track{background-color:var(--gp-grid-scrollbar-track)}:where(.gp-grid-container)::-webkit-scrollbar-thumb{background-color:var(--gp-grid-scrollbar-thumb);border-radius:4px}:where(.gp-grid-container)::-webkit-scrollbar-thumb:hover{background-color:var(--gp-grid-scrollbar-thumb-hover)}:where(.gp-grid-container)::-webkit-scrollbar-corner{background-color:var(--gp-grid-scrollbar-track)}.gp-grid-filter-popup{flex-direction:column;max-width:min(360px,100vw - 16px);max-height:400px;display:flex}:where(.gp-grid-filter-popup){background-color:var(--gp-grid-bg);border:1px solid var(--gp-grid-border);border-radius:6px;font-size:13px;box-shadow:0 4px 12px #00000026}:where(.gp-grid-filter-header){border-bottom:1px solid var(--gp-grid-border-light);color:var(--gp-grid-header-text);padding:10px 12px;font-weight:600}.gp-grid-filter-content{flex-direction:column;min-height:0;display:flex;overflow-y:auto}:where(.gp-grid-filter-content){gap:10px;padding:10px 12px}.gp-grid-filter-mode-toggle{display:flex}:where(.gp-grid-filter-mode-toggle){background-color:var(--gp-grid-bg-alt);border-radius:4px;gap:4px;padding:2px}.gp-grid-filter-mode-toggle button{flex:1}:where(.gp-grid-filter-mode-toggle button){color:var(--gp-grid-text-secondary);cursor:pointer;background-color:#0000;border:none;border-radius:3px;padding:6px 10px;font-family:inherit;font-size:11px;transition:background-color .15s,color .15s}:where(.gp-grid-filter-mode-toggle button:hover){color:var(--gp-grid-text)}:where(.gp-grid-filter-mode-toggle button.active){background-color:var(--gp-grid-bg);color:var(--gp-grid-text);box-shadow:0 1px 2px #0000001a}:where(.gp-grid-filter-info){color:var(--gp-grid-text-secondary);background-color:var(--gp-grid-bg-alt);border-radius:4px;padding:6px 8px;font-size:11px}.gp-grid-filter-search{box-sizing:border-box;width:100%;height:30px}:where(.gp-grid-filter-search){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 10px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-search:focus){border-color:var(--gp-grid-primary);outline:none}.gp-grid-filter-actions{display:flex}:where(.gp-grid-filter-actions){gap:8px}.gp-grid-filter-actions button{flex:1}:where(.gp-grid-filter-actions button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-actions button:hover:not(:disabled)){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-actions button:disabled){opacity:.5;cursor:not-allowed}.gp-grid-filter-list{flex-direction:column;max-height:200px;display:flex;overflow-y:auto}:where(.gp-grid-filter-list){border:1px solid var(--gp-grid-border-light);border-radius:4px;gap:4px;padding:6px}.gp-grid-filter-option{align-items:center;display:flex}:where(.gp-grid-filter-option){cursor:pointer;border-radius:3px;gap:8px;padding:4px 6px}:where(.gp-grid-filter-option:hover){background-color:var(--gp-grid-hover)}.gp-grid-filter-option input[type=checkbox]{margin:0}:where(.gp-grid-filter-option input[type=checkbox]){cursor:pointer}.gp-grid-filter-option span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:where(.gp-grid-filter-blank){color:var(--gp-grid-text-muted);font-style:italic}.gp-grid-filter-condition{flex-direction:column;display:flex}:where(.gp-grid-filter-condition){gap:6px}.gp-grid-filter-row{align-items:center;display:flex}:where(.gp-grid-filter-row){gap:6px}.gp-grid-filter-row select{height:30px}:where(.gp-grid-filter-row select){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);cursor:pointer;border-radius:4px;padding:0 6px;font-family:inherit;font-size:12px}.gp-grid-filter-row input[type=number],.gp-grid-filter-row input[type=date],.gp-grid-filter-row input[type=text],.gp-grid-filter-text-input{box-sizing:border-box;flex:1;min-width:0;height:30px}:where(.gp-grid-filter-row input[type=number]),:where(.gp-grid-filter-row input[type=date]),:where(.gp-grid-filter-row input[type=text]),:where(.gp-grid-filter-text-input){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-input-bg);color:var(--gp-grid-text);border-radius:4px;padding:0 8px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-row input:focus){border-color:var(--gp-grid-primary);outline:none}:where(.gp-grid-filter-to){color:var(--gp-grid-text-secondary);font-size:11px}.gp-grid-filter-remove{width:24px;height:24px}:where(.gp-grid-filter-remove){color:var(--gp-grid-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3px;padding:0;font-size:16px;line-height:1}:where(.gp-grid-filter-remove:hover){background-color:var(--gp-grid-error-bg);color:var(--gp-grid-error-text)}.gp-grid-filter-combination{display:flex}:where(.gp-grid-filter-combination){gap:4px;margin-bottom:4px}.gp-grid-filter-combination button{flex:1}:where(.gp-grid-filter-combination button){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text-secondary);cursor:pointer;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:10px}:where(.gp-grid-filter-combination button.active){background-color:var(--gp-grid-primary);border-color:var(--gp-grid-primary);color:#fff}.gp-grid-filter-add{width:100%}:where(.gp-grid-filter-add){border:1px dashed var(--gp-grid-border);color:var(--gp-grid-text-secondary);cursor:pointer;background-color:#0000;border-radius:4px;padding:6px;font-family:inherit;font-size:11px}:where(.gp-grid-filter-add:hover){background-color:var(--gp-grid-hover);border-color:var(--gp-grid-primary);color:var(--gp-grid-primary)}.gp-grid-filter-buttons{display:flex}:where(.gp-grid-filter-buttons){border-top:1px solid var(--gp-grid-border-light);gap:8px;padding-top:8px}.gp-grid-filter-btn-clear,.gp-grid-filter-btn-apply{flex:1}:where(.gp-grid-filter-btn-clear),:where(.gp-grid-filter-btn-apply){cursor:pointer;border-radius:4px;padding:8px 12px;font-family:inherit;font-size:12px}:where(.gp-grid-filter-btn-clear){border:1px solid var(--gp-grid-input-border);background-color:var(--gp-grid-bg);color:var(--gp-grid-text)}:where(.gp-grid-filter-btn-clear:hover){background-color:var(--gp-grid-hover)}:where(.gp-grid-filter-btn-apply){border:1px solid var(--gp-grid-primary);background-color:var(--gp-grid-primary);color:#fff}:where(.gp-grid-filter-btn-apply:hover){opacity:.9}.gp-grid-cell--row-drag-handle{touch-action:none}:where(.gp-grid-cell--row-drag-handle){cursor:grab}:where(.gp-grid-cell--row-drag-handle:active){cursor:grabbing}.gp-grid-row-drag-icon{justify-content:center;align-items:center;width:100%;height:100%;display:flex}:where(.gp-grid-row-drag-icon){color:var(--gp-grid-text-secondary)}.gp-grid-row-drag-icon svg{width:16px;height:16px}.gp-grid-row-drag-ghost{pointer-events:none;z-index:2000;box-sizing:border-box;position:fixed;overflow:hidden}:where(.gp-grid-row-drag-ghost){opacity:.8;background-color:var(--gp-grid-bg,#fff);border:2px solid var(--gp-grid-primary);border-radius:4px;box-shadow:0 4px 12px #00000026}.gp-grid-row-drop-indicator{z-index:1000;pointer-events:none;width:100%;height:3px;position:absolute;left:0}:where(.gp-grid-row-drop-indicator){background-color:var(--gp-grid-primary);border-radius:2px}