@coreui/data-grid 0.1.0-rc.0 → 0.2.0-rc.0

package/README.md

@@ -1,7 +1,9 @@
 # @coreui/data-grid
 
-High-performance vanilla JavaScript data grid for CoreUI, built on
-`@tanstack/table-core` and `@tanstack/virtual-core` (bundled, no extra setup).
+High-performance vanilla JavaScript data grid for CoreUI — sorting, filtering,
+selection, pagination, column resizing/reordering/pinning, inline editing, CSV
+export, and server-side data, virtualized to 100,000 rows in ~48 KB gzip with no
+runtime dependencies to install.
 
 Requires the CoreUI stylesheet (`@coreui/coreui` or `@coreui/coreui-pro` ≥ 5)
 for the base `.table` styles.
@@ -33,5 +35,4 @@ Or with the UMD bundle: `new coreui.DataGrid(element, options)`.
 
 ## License
 
-Commercial — see [LICENSE](LICENSE). Bundles TanStack Table and TanStack
-Virtual (MIT).
+Commercial — see [LICENSE](LICENSE).

package/dist/css/data-grid.css

@@ -1,12 +1,18 @@
 /*!
- * CoreUI PRO data-grid.scss v0.1.0
+ * CoreUI PRO data-grid.scss v0.2.0
  * License (https://coreui.io/pro/license/)
  */
 .data-grid {
   position: relative;
+  display: flex;
+  flex-direction: column;
   --cui-data-grid-viewport-max-height: 30rem;
   --cui-data-grid-header-bg: var(--cui-body-bg, #fff);
   --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);
+  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), .12);
+  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);
+  --cui-data-grid-cell-selected-border-width: 1px;
+  --cui-data-grid-row-handle-width: 2rem;
   --cui-data-grid-select-cell-width: 2.5rem;
   --cui-data-grid-sorter-margin: .25rem;
   --cui-data-grid-sorter-opacity: .3;
@@ -18,6 +24,7 @@
   --cui-data-grid-pinned-border-width: var(--cui-border-width);
   --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);
   --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);
+  --cui-data-grid-drag-transition: .15s ease;
   --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);
   --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);
   --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
@@ -43,11 +50,12 @@
   align-items: center;
 }
 .data-grid .data-grid-toolbar-search {
-  -webkit-margin-start: auto;
   margin-inline-start: auto;
 }
 .data-grid .data-grid-viewport {
   position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
   max-height: var(--cui-data-grid-viewport-max-height);
   overflow-y: auto;
   overflow-anchor: none;
@@ -73,7 +81,6 @@
   outline: 0;
 }
 .data-grid .data-grid-header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -89,7 +96,6 @@
   font-weight: normal;
 }
 .data-grid .data-grid-header th[data-coreui-draggable] {
-  cursor: -webkit-grab;
   cursor: grab;
 }
 .data-grid .data-grid-header-cell {
@@ -107,7 +113,6 @@
   --cui-btn-line-height: 1;
 }
 .data-grid .data-grid-menu-button {
-  -webkit-margin-start: auto;
   margin-inline-start: auto;
 }
 .data-grid .data-grid-menu {
@@ -218,11 +223,9 @@
 }
 .data-grid .data-grid-filter-button {
   position: relative;
-  -webkit-margin-start: auto;
   margin-inline-start: auto;
 }
 .data-grid .data-grid-filter-button ~ .data-grid-menu-button {
-  -webkit-margin-start: 0;
   margin-inline-start: 0;
 }
 .data-grid .data-grid-filter-button-filtered::after {
@@ -248,11 +251,92 @@
   margin: 0.25rem 0;
   background-color: var(--cui-data-grid-menu-border-color);
 }
-.data-grid .data-grid-header .data-grid-dragging {
+.data-grid .data-grid-dragging {
   opacity: 0.5;
 }
-.data-grid .data-grid-header .data-grid-drop-target {
-  box-shadow: inset 0.125rem 0 0 var(--cui-data-grid-drop-indicator);
+.data-grid.data-grid-drag-active {
+  cursor: grabbing;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.data-grid .data-grid-drag-ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  display: flex;
+  align-items: center;
+  max-width: 16rem;
+  padding: 0 var(--cui-data-grid-cell-padding-x, 0.5rem);
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  background-color: var(--cui-data-grid-pinned-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  transform: translate(-9999px, -9999px);
+  opacity: 0.9;
+}
+.data-grid .data-grid-drag-ghost-settle {
+  transition: transform var(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);
+}
+.data-grid .data-grid-drop-indicator {
+  position: fixed;
+  z-index: 1080;
+  pointer-events: none;
+  background-color: var(--cui-data-grid-drop-indicator);
+  transition: top var(--cui-data-grid-drag-transition), left var(--cui-data-grid-drag-transition);
+}
+.data-grid .data-grid-drag-preview {
+  transition: transform var(--cui-data-grid-drag-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .data-grid :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {
+    transition: none;
+  }
+}
+.data-grid .data-grid-drop-indicator-x {
+  width: 0.125rem;
+}
+.data-grid .data-grid-drop-indicator-y {
+  height: 0.125rem;
+}
+.data-grid .data-grid-cell-selected {
+  position: relative;
+  background-color: var(--cui-data-grid-cell-selected-bg);
+}
+.data-grid .data-grid-cell-selected::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: 0 solid var(--cui-data-grid-cell-selected-border-color);
+}
+.data-grid .data-grid-cell-selected-top::after {
+  border-top-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-right::after {
+  border-right-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-bottom::after {
+  border-bottom-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-left::after {
+  border-left-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-row-handle-cell {
+  width: var(--cui-data-grid-row-handle-width);
+  padding-inline: 0;
+  text-align: center;
+}
+.data-grid .data-grid-row-handle {
+  display: inline-flex;
+  color: var(--cui-data-grid-resizer-grip-color-hover);
+  cursor: grab;
+  touch-action: none;
 }
 .data-grid .data-grid-select-cell {
   width: var(--cui-data-grid-select-cell-width);
@@ -267,7 +351,6 @@
   color: inherit;
   cursor: pointer;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   background: none;
   border: 0;
@@ -294,7 +377,7 @@
   margin-bottom: 0;
   table-layout: fixed;
 }
-.data-grid .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+.data-grid:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -303,36 +386,32 @@
   overflow-x: auto;
 }
 .data-grid.data-grid-resizable .table, .data-grid.data-grid-pinned .table {
-  width: -webkit-max-content;
-  width: -moz-max-content;
   width: max-content;
   min-width: 100%;
 }
-.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {
+.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
   position: relative;
 }
 .data-grid.data-grid-pinned .table {
   border-collapse: separate;
   border-spacing: 0;
 }
-.data-grid .data-grid-cell-pinned-left,
-.data-grid .data-grid-cell-pinned-right {
-  position: -webkit-sticky;
+.data-grid .data-grid-cell-pinned-start,
+.data-grid .data-grid-cell-pinned-end {
   position: sticky;
   z-index: 1;
   background-color: var(--cui-data-grid-pinned-bg);
 }
-.data-grid .data-grid-header .data-grid-cell-pinned-left,
-.data-grid .data-grid-header .data-grid-cell-pinned-right {
+.data-grid .data-grid-header .data-grid-cell-pinned-start,
+.data-grid .data-grid-header .data-grid-cell-pinned-end {
   z-index: 3;
 }
-.data-grid .data-grid-cell-pinned-left-last,
-.data-grid .data-grid-cell-pinned-right-first {
-  position: -webkit-sticky;
+.data-grid .data-grid-cell-pinned-start-last,
+.data-grid .data-grid-cell-pinned-end-first {
   position: sticky;
 }
-.data-grid .data-grid-cell-pinned-left-last::after,
-.data-grid .data-grid-cell-pinned-right-first::after {
+.data-grid .data-grid-cell-pinned-start-last::after,
+.data-grid .data-grid-cell-pinned-end-first::after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -340,12 +419,12 @@
   pointer-events: none;
   content: "";
 }
-.data-grid .data-grid-cell-pinned-left-last::after {
-  right: 0;
+.data-grid .data-grid-cell-pinned-start-last::after {
+  inset-inline-end: 0;
   background: var(--cui-data-grid-pinned-border-color);
 }
-.data-grid .data-grid-cell-pinned-right-first::after {
-  left: 0;
+.data-grid .data-grid-cell-pinned-end-first::after {
+  inset-inline-start: 0;
   background: var(--cui-data-grid-pinned-border-color);
 }
 .data-grid .data-grid-resizer {
@@ -361,7 +440,6 @@
   cursor: col-resize;
   touch-action: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
 }
 .data-grid .data-grid-resizer::after {
@@ -398,6 +476,16 @@
   justify-content: center;
   background-color: var(--cui-data-grid-loading-bg);
 }
+.data-grid .data-grid-loading-more {
+  position: sticky;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  padding: var(--cui-data-grid-spacing);
+  background-color: var(--cui-data-grid-loading-bg);
+}
 .data-grid .data-grid-tooltip {
   position: fixed;
   z-index: 1080;
@@ -433,7 +521,6 @@
   margin-bottom: 0;
 }
 .data-grid .data-grid-pagination .data-grid-pagination-info {
-  -webkit-margin-start: auto;
   margin-inline-start: auto;
   color: var(--cui-secondary-color, #6c757d);
 }
@@ -441,4 +528,35 @@
   width: auto;
 }
 
+@media print {
+  .data-grid-print-root {
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: 2000;
+    background-color: #fff;
+  }
+  .data-grid-print-root h1 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+  }
+  .data-grid-print-root table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  .data-grid-print-root :is(th, td) {
+    padding: 0.25rem 0.5rem;
+    text-align: start;
+    border: 1px solid #000;
+  }
+  .data-grid-print-root thead {
+    display: table-header-group;
+  }
+  .data-grid-print-root tr {
+    break-inside: avoid;
+  }
+  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {
+    display: none !important;
+  }
+}
+
 /*# sourceMappingURL=data-grid.css.map */

package/dist/css/data-grid.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../scss/data-grid.scss","data-grid.css"],"names":[],"mappings":"AAAA;;;EAAA;AAKA;EAGE,kBAAA;EAIA,0CAAA;EACA,mDAAA;EACA,iHAAA;EACA,yCAAA;EACA,qCAAA;EACA,kCAAA;EACA,8BAAA;EACA,sCAAA;EACA,wCAAA;EACA,oEAAA;EACA,6EAAA;EACA,4DAAA;EACA,qEAAA;EACA,2DAAA;EACA,iDAAA;EACA,mEAAA;EACA,mFAAA;EACA,qCAAA;EACA,mEAAA;EACA,2EAAA;EACA,mDAAA;EACA,qCAAA;EACA,6DAAA;ACLF;ADOE;EACE,aAAA;EACA,eAAA;EACA,iCAAA;EACA,mBAAA;EACA,gBAAA;EACA,qCAAA;EACA,kFAAA;ACLJ;ADQE;EACE,aAAA;EACA,YAAA;EACA,mBAAA;ACNJ;ADSE;EACE,0BAAA;EAAA,yBAAA;ACPJ;ADUE;EACE,kBAAA;EACA,oDAAA;EACA,gBAAA;EAIA,qBAAA;ACXJ;ADgBE;EACE,WAAA;EACA,eAAA;ACdJ;ADiBE;EACE,kBAAA;EACA,UAAA;EACA,gBAAA;EACA,8CAAA;EACA,iFAAA;EACA,iDAAA;EACA,4CAAA;ACfJ;ADoBE;EACE,0FAAA;EACA,gEAAA;AClBJ;ADqBE;EACE,UAAA;ACnBJ;ADsBE;EACE,wBAAA;EAAA,gBAAA;EACA,MAAA;EACA,UAAA;EACA,gDAAA;EACA,8CAAA;ACpBJ;ADyBE;EACE,YAAA;EACA,sBAAA;ACvBJ;AD0BE;EACE,cAAA;EACA,mBAAA;ACxBJ;AD2BE;EACE,oBAAA;EAAA,YAAA;ACzBJ;AD4BE;EACE,aAAA;EACA,mBAAA;EACA,YAAA;AC1BJ;AD6BE;EACE,gBAAA;EACA,uBAAA;EACA,mBAAA;AC3BJ;ADiCE;EACE,6CAAA;EACA,wBAAA;AC/BJ;ADkCE;EACE,0BAAA;EAAA,yBAAA;AChCJ;ADmCE;EACE,kBAAA;EACA,UAAA;EACA,8CAAA;EACA,kBAAA;EACA,8CAAA;EACA,iFAAA;EACA,iDAAA;EACA,4CAAA;ACjCJ;ADoCE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;EACA,WAAA;EACA,wBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;EACA,SAAA;AClCJ;ADoCI;EAEE,yDAAA;ACnCN;ADwCI;EACE,0CAAA;EACA,eAAA;EACA,gBAAA;ACtCN;AD0CE;EACE,kBAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,8CAAA;EACA,gBAAA;EACA,gBAAA;EACA,8CAAA;EACA,iFAAA;EACA,iDAAA;EACA,4CAAA;ACxCJ;AD0CI;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACxCN;AD4CE;EACE,aAAA;EACA,sBAAA;EACA,YAAA;AC1CJ;AD6CE;EACE,aAAA;EACA,SAAA;AC3CJ;AD6CI;EACE,aAAA;EACA,aAAA;EACA,mBAAA;AC3CN;AD+CE;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,iBAAA;EACA,gBAAA;AC7CJ;ADgDE;EACE,aAAA;EACA,WAAA;EACA,yBAAA;AC9CJ;ADiDE;EACE,kBAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,8CAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,8CAAA;EACA,iFAAA;EACA,iDAAA;EACA,4CAAA;AC/CJ;ADkDE;EACE,aAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;AChDJ;ADmDE;EACE,aAAA;EACA,WAAA;EACA,yBAAA;EACA,oBAAA;EACA,mBAAA;EACA,qFAAA;ACjDJ;ADoDE;EACE,kBAAA;EAIA,0BAAA;EAAA,yBAAA;ACrDJ;ADuDI;EACE,uBAAA;EAAA,sBAAA;ACrDN;AD0DE;EACE,kBAAA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,6CAAA;EACA,kBAAA;ACxDJ;AD2DE;EACE,oBAAA;EACA,aAAA;ACzDJ;AD2DI;EACE,UAAA;EACA,WAAA;ACzDN;AD6DE;EACE,oCAAA;EACA,iBAAA;EACA,wDAAA;AC3DJ;AD8DE;EACE,YAAA;AC5DJ;AD+DE;EACE,kEAAA;AC7DJ;ADgEE;EACE,6CAAA;EACA,kBAAA;AC9DJ;ADiEE;EACE,oBAAA;EACA,mBAAA;EACA,uCAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,eAAA;EACA,yBAAA;EAAA,sBAAA;EAAA,iBAAA;EACA,gBAAA;EACA,SAAA;AC/DJ;ADkEE;EACE,oBAAA;EACA,kBAAA;EACA,UAAA;AChEJ;ADkEI;EACE,UAAA;EACA,WAAA;AChEN;ADuEE;EACE,UAAA;ACrEJ;ADwEE;EACE,4CAAA;ACtEJ;ADyEE;EAEE,4CAAA;ACxEJ;AD2EE;EACE,gBAAA;EACA,mBAAA;ACzEJ;ADmFE;EACE,gBAAA;EACA,uBAAA;EACA,mBAAA;ACjFJ;AD0FI;EACE,gBAAA;ACxFN;AD2FI;EACE,0BAAA;EAAA,uBAAA;EAAA,kBAAA;EACA,eAAA;ACzFN;AD+FE;EACE,kBAAA;AC7FJ;ADgGE;EAGE,yBAAA;EACA,iBAAA;AChGJ;ADmGE;;EAEE,wBAAA;EAAA,gBAAA;EACA,UAAA;EACA,gDAAA;ACjGJ;ADoGE;;EAEE,UAAA;AClGJ;ADuGE;;EAEE,wBAAA;EAAA,gBAAA;ACrGJ;ADuGI;;EACE,kBAAA;EACA,MAAA;EACA,SAAA;EACA,+CAAA;EACA,oBAAA;EACA,WAAA;ACpGN;ADwGE;EACE,QAAA;EACA,oDAAA;ACtGJ;ADyGE;EACE,OAAA;EACA,oDAAA;ACvGJ;AD0GE;EACE,kBAAA;EACA,MAAA;EACA,sDAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,yCAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,yBAAA;EAAA,sBAAA;EAAA,iBAAA;ACxGJ;AD4GI;EACE,UAAA;EACA,gDAAA;EACA,WAAA;EACA,yDAAA;EACA,uCAAA;AC1GN;AD6GI;EAEE,+DAAA;AC5GN;ADgHE;EACE,UAAA;EACA,SAAA;AC9GJ;ADmHE;EACE,+BAAA;EACA,4BAAA;ACjHJ;ADoHE;EACE,sDAAA;EACA,gDAAA;AClHJ;ADuHE;EACE,sBAAA;ACrHJ;ADwHE;EACE,kBAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,iDAAA;ACtHJ;AD2HE;EACE,eAAA;EACA,aAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;EACA,gBAAA;EACA,+BAAA;EACA,kBAAA;EACA,oBAAA;EACA,iDAAA;EACA,iDAAA;ACzHJ;AD4HE;EACE,kBAAA;EACA,0CAAA;EACA,kBAAA;AC1HJ;AD6HE;EACE,aAAA;EAIA,eAAA;EACA,iCAAA;EACA,mBAAA;EACA,gBAAA;EACA,qCAAA;EACA,+EAAA;AC9HJ;ADgII;EACE,aAAA;EACA,kFAAA;AC9HN;ADiII;EACE,gBAAA;AC/HN;ADkII;EACE,0BAAA;EAAA,yBAAA;EACA,0CAAA;AChIN;ADmII;EACE,WAAA;ACjIN","file":"data-grid.css","sourcesContent":["/*!\n * CoreUI PRO data-grid.scss v0.1.0\n * License (https://coreui.io/pro/license/)\n */\n\n.data-grid {\n  // The column menu is positioned against the grid root (it must escape the\n  // viewport's overflow while staying inside the token scope).\n  position: relative;\n\n  // Component tokens. Everything resolves through CoreUI semantic variables,\n  // so light/dark theming via [data-coreui-theme] works with no extra rules.\n  --cui-data-grid-viewport-max-height: 30rem;\n  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);\n  --cui-data-grid-select-cell-width: 2.5rem;\n  --cui-data-grid-sorter-margin: .25rem;\n  --cui-data-grid-sorter-opacity: .3;\n  --cui-data-grid-spacing: .5rem;\n  --cui-data-grid-resizer-width: .625rem;\n  --cui-data-grid-resizer-grip-height: 60%;\n  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);\n  --cui-data-grid-pinned-border-width: var(--cui-border-width);\n  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);\n  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));\n  --cui-data-grid-menu-min-width: 10rem;\n  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);\n  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);\n  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-focus-ring-width: 2px;\n  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);\n\n  .data-grid-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--cui-data-grid-spacing);\n    align-items: center;\n    min-height: 48px;\n    padding: var(--cui-data-grid-spacing);\n    border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n  }\n\n  .data-grid-toolbar-actions {\n    display: flex;\n    gap: .25rem;\n    align-items: center;\n  }\n\n  .data-grid-toolbar-search {\n    margin-inline-start: auto;\n  }\n\n  .data-grid-viewport {\n    position: relative;\n    max-height: var(--cui-data-grid-viewport-max-height);\n    overflow-y: auto;\n    // Windowed rendering resizes the spacer rows and recycles row elements on\n    // every frame; browser scroll anchoring chases those mutations and keeps\n    // adjusting scrollTop, which turns wheel scrolling into a feedback loop.\n    overflow-anchor: none;\n  }\n\n  // Inline editing: the in-cell editor fills the cell; the popup layer hosts\n  // rich editors (date pickers, selects) anchored over the cell.\n  .data-grid-cell-editor {\n    width: 100%;\n    min-width: 4rem;\n  }\n\n  .data-grid-editor-popup {\n    position: absolute;\n    z-index: 4;\n    padding: .25rem;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  // cellNavigation: the roving-tabindex active cell. The ring is inset so the\n  // sticky header and pinned columns don't clip it.\n  [role=\"grid\"] :is(td, th):focus-visible {\n    outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);\n    outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));\n  }\n\n  .data-grid-viewport:focus-visible {\n    outline: 0;\n  }\n\n  .data-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background-color: var(--cui-data-grid-header-bg);\n    box-shadow: var(--cui-data-grid-header-shadow);\n  }\n\n  // Header label row: fixed 48px with vertically centered content (height on a\n  // table cell acts as a min; min-height is ignored on table-cell).\n  .data-grid-header tr:not(.data-grid-filter-row) > th {\n    height: 48px;\n    vertical-align: middle;\n  }\n\n  .data-grid-filter-row > th {\n    padding-top: 0;\n    font-weight: normal;\n  }\n\n  .data-grid-header th[data-coreui-draggable] {\n    cursor: grab;\n  }\n\n  .data-grid-header-cell {\n    display: flex;\n    align-items: center;\n    gap: .25rem;\n  }\n\n  .data-grid-header-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  // Icon-only ghost buttons: square them by matching horizontal padding to\n  // vertical (follows .btn / .btn-sm automatically) and collapsing the text\n  // line-height so height follows the icon, not a 1.5em text line.\n  .btn-ghost {\n    --cui-btn-padding-x: var(--cui-btn-padding-y);\n    --cui-btn-line-height: 1;\n  }\n\n  .data-grid-menu-button {\n    margin-inline-start: auto;\n  }\n\n  .data-grid-menu {\n    position: absolute;\n    z-index: 4;\n    min-width: var(--cui-data-grid-menu-min-width);\n    padding: .25rem 0;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  .data-grid-menu-item {\n    display: flex;\n    align-items: center;\n    gap: .5rem;\n    width: 100%;\n    padding: .25rem .75rem;\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--cui-data-grid-menu-item-hover-bg);\n    }\n\n    // Disabled items stay focusable (aria-disabled, APG menu pattern) so the\n    // roving arrow cycle can reach them.\n    &[aria-disabled=\"true\"] {\n      color: var(--cui-secondary-color, #6c757d);\n      cursor: default;\n      background: none;\n    }\n  }\n\n  .data-grid-filter-menu {\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    gap: .5rem;\n    min-width: var(--cui-data-grid-menu-min-width);\n    max-width: 18rem;\n    padding: .75rem;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n\n    > div {\n      display: flex;\n      flex-direction: column;\n      gap: .5rem;\n    }\n  }\n\n  .data-grid-filter-menu-condition {\n    display: flex;\n    flex-direction: column;\n    gap: .25rem;\n  }\n\n  .data-grid-filter-menu-join {\n    display: flex;\n    gap: 1rem;\n\n    label {\n      display: flex;\n      gap: .375rem;\n      align-items: center;\n    }\n  }\n\n  .data-grid-filter-menu-values {\n    display: flex;\n    flex-direction: column;\n    gap: .25rem;\n    max-height: 14rem;\n    overflow-y: auto;\n  }\n\n  .data-grid-filter-menu-footer {\n    display: flex;\n    gap: .5rem;\n    justify-content: flex-end;\n  }\n\n  .data-grid-column-chooser {\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    gap: .5rem;\n    min-width: var(--cui-data-grid-menu-min-width);\n    max-width: 18rem;\n    max-height: 20rem;\n    padding: .75rem;\n    overflow-y: auto;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  .data-grid-column-chooser-option {\n    display: flex;\n    gap: .375rem;\n    align-items: center;\n    margin-bottom: 0;\n  }\n\n  .data-grid-column-chooser-footer {\n    display: flex;\n    gap: .5rem;\n    justify-content: flex-end;\n    padding-top: .25rem;\n    margin-top: .25rem;\n    border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  }\n\n  .data-grid-filter-button {\n    position: relative;\n    // Right-align the trailing controls as a group: the filter button takes the\n    // auto margin (menu drops its own below) so filter and menu sit together at\n    // the end, matching a menu-only header.\n    margin-inline-start: auto;\n\n    ~ .data-grid-menu-button {\n      margin-inline-start: 0;\n    }\n  }\n\n  // Active-filter indicator dot on the filter button.\n  .data-grid-filter-button-filtered::after {\n    position: absolute;\n    inset-block-start: .125rem;\n    inset-inline-end: .125rem;\n    width: .375rem;\n    height: .375rem;\n    content: \"\";\n    background-color: var(--cui-primary, #321fdb);\n    border-radius: 50%;\n  }\n\n  .data-grid-menu-item-icon {\n    display: inline-flex;\n    opacity: .75;\n\n    svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  .data-grid-menu-divider {\n    height: var(--cui-border-width, 1px);\n    margin: .25rem 0;\n    background-color: var(--cui-data-grid-menu-border-color);\n  }\n\n  .data-grid-header .data-grid-dragging {\n    opacity: .5;\n  }\n\n  .data-grid-header .data-grid-drop-target {\n    box-shadow: inset .125rem 0 0 var(--cui-data-grid-drop-indicator);\n  }\n\n  .data-grid-select-cell {\n    width: var(--cui-data-grid-select-cell-width);\n    text-align: center;\n  }\n\n  .data-grid-sort-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cui-data-grid-sorter-margin);\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: 0;\n  }\n\n  .data-grid-sort-icon {\n    display: inline-flex;\n    font-size: .875em;\n    opacity: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  // The active sort direction is always visible; the neutral (unsorted) icon is\n  // hidden unless `sorterVisibility` opts it in (steadily via \"always\", or on\n  // header hover/focus via \"hover\").\n  .data-grid-sortable[aria-sort] .data-grid-sort-icon {\n    opacity: 1;\n  }\n\n  &[data-coreui-sorter-visibility=\"always\"] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {\n    opacity: var(--cui-data-grid-sorter-opacity);\n  }\n\n  &[data-coreui-sorter-visibility=\"hover\"] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon,\n  &[data-coreui-sorter-visibility=\"hover\"] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {\n    opacity: var(--cui-data-grid-sorter-opacity);\n  }\n\n  .data-grid-viewport > .table {\n    margin-bottom: 0;\n    table-layout: fixed;\n  }\n\n  // Body cells render on a single line and truncate with an ellipsis instead of\n  // spilling their content across the fixed-layout column boundary onto the next\n  // column. Matches the default of AG Grid / MUI X Data Grid and TanStack's\n  // virtualized-table guidance, and keeps every row a uniform height for the\n  // fixed-height virtualizer (wrapping would desync `estimateSize`). Pinned cells\n  // are excluded so their shadow pseudo-element (painted outside the box via a\n  // translate) isn't clipped; the select cell holds only a checkbox.\n  .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  // Widths applied to each header cell drive the column layout; letting the\n  // table grow to its content (min-width keeps it filling a wide viewport)\n  // turns a resize or a pin into horizontal scroll rather than squeezing\n  // neighbours. Both features share this layout mode.\n  &.data-grid-resizable,\n  &.data-grid-pinned {\n    .data-grid-viewport {\n      overflow-x: auto;\n    }\n\n    .table {\n      width: max-content;\n      min-width: 100%;\n    }\n  }\n\n  // A pinned th is already sticky (a positioned containing block for the\n  // resizer), so only non-pinned header cells need explicit relative here.\n  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {\n    position: relative;\n  }\n\n  &.data-grid-pinned .table {\n    // position: sticky is unreliable on collapsed-border tables; the grid opts\n    // into separate borders so pinned cells stay put on horizontal scroll.\n    border-collapse: separate;\n    border-spacing: 0;\n  }\n\n  .data-grid-cell-pinned-left,\n  .data-grid-cell-pinned-right {\n    position: sticky;\n    z-index: 1;\n    background-color: var(--cui-data-grid-pinned-bg);\n  }\n\n  .data-grid-header .data-grid-cell-pinned-left,\n  .data-grid-header .data-grid-cell-pinned-right {\n    z-index: 3;\n  }\n\n  // Edge cells cast a shadow over the scrolling content. A pseudo-element is\n  // used because the cell's own box-shadow carries the table striping accent.\n  .data-grid-cell-pinned-left-last,\n  .data-grid-cell-pinned-right-first {\n    position: sticky;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: var(--cui-data-grid-pinned-border-width);\n      pointer-events: none;\n      content: \"\";\n    }\n  }\n\n  .data-grid-cell-pinned-left-last::after {\n    right: 0;\n    background: var(--cui-data-grid-pinned-border-color);\n  }\n\n  .data-grid-cell-pinned-right-first::after {\n    left: 0;\n    background: var(--cui-data-grid-pinned-border-color);\n  }\n\n  .data-grid-resizer {\n    position: absolute;\n    top: 0;\n    right: calc(-.5 * var(--cui-data-grid-resizer-width));\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--cui-data-grid-resizer-width);\n    height: 100%;\n    cursor: col-resize;\n    touch-action: none;\n    user-select: none;\n\n    // Always-visible grip so the resizable edge is discoverable, not just a\n    // bare hover target.\n    &::after {\n      width: 2px;\n      height: var(--cui-data-grid-resizer-grip-height);\n      content: \"\";\n      background-color: var(--cui-data-grid-resizer-grip-color);\n      transition: background-color .15s ease;\n    }\n\n    &:hover::after,\n    &.data-grid-resizer-active::after {\n      background-color: var(--cui-data-grid-resizer-grip-color-hover);\n    }\n  }\n\n  .data-grid-spacer > td {\n    padding: 0;\n    border: 0;\n  }\n\n  // Spacer rows break `nth-of-type` striping, so striping inside the grid is\n  // driven by the absolute row index (.data-grid-row-odd) instead.\n  .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {\n    --cui-table-color-type: initial;\n    --cui-table-bg-type: initial;\n  }\n\n  .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {\n    --cui-table-color-type: var(--cui-table-striped-color);\n    --cui-table-bg-type: var(--cui-table-striped-bg);\n  }\n\n  // The last row closes on the viewport edge (or the pagination border), so it\n  // doesn't need its own separator line.\n  .data-grid-viewport > .table > tbody > tr:last-child > * {\n    border-bottom-width: 0;\n  }\n\n  .data-grid-loading {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--cui-data-grid-loading-bg);\n  }\n\n  // Shared icon-button tooltip. position: fixed (set in JS) so it escapes the\n  // viewport overflow; theme-inverted like CoreUI's own tooltip.\n  .data-grid-tooltip {\n    position: fixed;\n    z-index: 1080;\n    max-width: 12rem;\n    padding: .25rem .5rem;\n    font-size: .875rem;\n    line-height: 1.4;\n    color: var(--cui-body-bg, #fff);\n    text-align: center;\n    pointer-events: none;\n    background-color: var(--cui-emphasis-color, #000);\n    border-radius: var(--cui-border-radius, .375rem);\n  }\n\n  .data-grid-empty > td {\n    padding: 2rem 1rem;\n    color: var(--cui-secondary-color, #6c757d);\n    text-align: center;\n  }\n\n  .data-grid-pagination {\n    display: flex;\n    // Wrap the page controls, count and page-size select onto multiple rows on\n    // narrow viewports; without this the fixed row overflows and scrolls the page\n    // instead of staying inside the grid.\n    flex-wrap: wrap;\n    gap: var(--cui-data-grid-spacing);\n    align-items: center;\n    min-height: 48px;\n    padding: var(--cui-data-grid-spacing);\n    border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n\n    &.data-grid-pagination-top {\n      border-top: 0;\n      border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n    }\n\n    .pagination {\n      margin-bottom: 0;\n    }\n\n    .data-grid-pagination-info {\n      margin-inline-start: auto;\n      color: var(--cui-secondary-color, #6c757d);\n    }\n\n    .form-select {\n      width: auto;\n    }\n  }\n}\n","/*!\n * CoreUI PRO data-grid.scss v0.1.0\n * License (https://coreui.io/pro/license/)\n */\n.data-grid {\n  position: relative;\n  --cui-data-grid-viewport-max-height: 30rem;\n  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);\n  --cui-data-grid-select-cell-width: 2.5rem;\n  --cui-data-grid-sorter-margin: .25rem;\n  --cui-data-grid-sorter-opacity: .3;\n  --cui-data-grid-spacing: .5rem;\n  --cui-data-grid-resizer-width: .625rem;\n  --cui-data-grid-resizer-grip-height: 60%;\n  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);\n  --cui-data-grid-pinned-border-width: var(--cui-border-width);\n  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);\n  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));\n  --cui-data-grid-menu-min-width: 10rem;\n  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);\n  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);\n  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-focus-ring-width: 2px;\n  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);\n}\n.data-grid .data-grid-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--cui-data-grid-spacing);\n  align-items: center;\n  min-height: 48px;\n  padding: var(--cui-data-grid-spacing);\n  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-toolbar-actions {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}\n.data-grid .data-grid-toolbar-search {\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-viewport {\n  position: relative;\n  max-height: var(--cui-data-grid-viewport-max-height);\n  overflow-y: auto;\n  overflow-anchor: none;\n}\n.data-grid .data-grid-cell-editor {\n  width: 100%;\n  min-width: 4rem;\n}\n.data-grid .data-grid-editor-popup {\n  position: absolute;\n  z-index: 4;\n  padding: 0.25rem;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid [role=grid] :is(td, th):focus-visible {\n  outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);\n  outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));\n}\n.data-grid .data-grid-viewport:focus-visible {\n  outline: 0;\n}\n.data-grid .data-grid-header {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background-color: var(--cui-data-grid-header-bg);\n  box-shadow: var(--cui-data-grid-header-shadow);\n}\n.data-grid .data-grid-header tr:not(.data-grid-filter-row) > th {\n  height: 48px;\n  vertical-align: middle;\n}\n.data-grid .data-grid-filter-row > th {\n  padding-top: 0;\n  font-weight: normal;\n}\n.data-grid .data-grid-header th[data-coreui-draggable] {\n  cursor: grab;\n}\n.data-grid .data-grid-header-cell {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.data-grid .data-grid-header-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.data-grid .btn-ghost {\n  --cui-btn-padding-x: var(--cui-btn-padding-y);\n  --cui-btn-line-height: 1;\n}\n.data-grid .data-grid-menu-button {\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-menu {\n  position: absolute;\n  z-index: 4;\n  min-width: var(--cui-data-grid-menu-min-width);\n  padding: 0.25rem 0;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.25rem 0.75rem;\n  font: inherit;\n  color: inherit;\n  text-align: start;\n  cursor: pointer;\n  background: none;\n  border: 0;\n}\n.data-grid .data-grid-menu-item:hover, .data-grid .data-grid-menu-item:focus-visible {\n  background-color: var(--cui-data-grid-menu-item-hover-bg);\n}\n.data-grid .data-grid-menu-item[aria-disabled=true] {\n  color: var(--cui-secondary-color, #6c757d);\n  cursor: default;\n  background: none;\n}\n.data-grid .data-grid-filter-menu {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  min-width: var(--cui-data-grid-menu-min-width);\n  max-width: 18rem;\n  padding: 0.75rem;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-filter-menu > div {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.data-grid .data-grid-filter-menu-condition {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.data-grid .data-grid-filter-menu-join {\n  display: flex;\n  gap: 1rem;\n}\n.data-grid .data-grid-filter-menu-join label {\n  display: flex;\n  gap: 0.375rem;\n  align-items: center;\n}\n.data-grid .data-grid-filter-menu-values {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  max-height: 14rem;\n  overflow-y: auto;\n}\n.data-grid .data-grid-filter-menu-footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n.data-grid .data-grid-column-chooser {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  min-width: var(--cui-data-grid-menu-min-width);\n  max-width: 18rem;\n  max-height: 20rem;\n  padding: 0.75rem;\n  overflow-y: auto;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-column-chooser-option {\n  display: flex;\n  gap: 0.375rem;\n  align-items: center;\n  margin-bottom: 0;\n}\n.data-grid .data-grid-column-chooser-footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  padding-top: 0.25rem;\n  margin-top: 0.25rem;\n  border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n}\n.data-grid .data-grid-filter-button {\n  position: relative;\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-filter-button ~ .data-grid-menu-button {\n  margin-inline-start: 0;\n}\n.data-grid .data-grid-filter-button-filtered::after {\n  position: absolute;\n  inset-block-start: 0.125rem;\n  inset-inline-end: 0.125rem;\n  width: 0.375rem;\n  height: 0.375rem;\n  content: \"\";\n  background-color: var(--cui-primary, #321fdb);\n  border-radius: 50%;\n}\n.data-grid .data-grid-menu-item-icon {\n  display: inline-flex;\n  opacity: 0.75;\n}\n.data-grid .data-grid-menu-item-icon svg {\n  width: 1em;\n  height: 1em;\n}\n.data-grid .data-grid-menu-divider {\n  height: var(--cui-border-width, 1px);\n  margin: 0.25rem 0;\n  background-color: var(--cui-data-grid-menu-border-color);\n}\n.data-grid .data-grid-header .data-grid-dragging {\n  opacity: 0.5;\n}\n.data-grid .data-grid-header .data-grid-drop-target {\n  box-shadow: inset 0.125rem 0 0 var(--cui-data-grid-drop-indicator);\n}\n.data-grid .data-grid-select-cell {\n  width: var(--cui-data-grid-select-cell-width);\n  text-align: center;\n}\n.data-grid .data-grid-sort-button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cui-data-grid-sorter-margin);\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  user-select: none;\n  background: none;\n  border: 0;\n}\n.data-grid .data-grid-sort-icon {\n  display: inline-flex;\n  font-size: 0.875em;\n  opacity: 0;\n}\n.data-grid .data-grid-sort-icon svg {\n  width: 1em;\n  height: 1em;\n}\n.data-grid .data-grid-sortable[aria-sort] .data-grid-sort-icon {\n  opacity: 1;\n}\n.data-grid[data-coreui-sorter-visibility=always] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {\n  opacity: var(--cui-data-grid-sorter-opacity);\n}\n.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon, .data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {\n  opacity: var(--cui-data-grid-sorter-opacity);\n}\n.data-grid .data-grid-viewport > .table {\n  margin-bottom: 0;\n  table-layout: fixed;\n}\n.data-grid .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.data-grid.data-grid-resizable .data-grid-viewport, .data-grid.data-grid-pinned .data-grid-viewport {\n  overflow-x: auto;\n}\n.data-grid.data-grid-resizable .table, .data-grid.data-grid-pinned .table {\n  width: max-content;\n  min-width: 100%;\n}\n.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right) {\n  position: relative;\n}\n.data-grid.data-grid-pinned .table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.data-grid .data-grid-cell-pinned-left,\n.data-grid .data-grid-cell-pinned-right {\n  position: sticky;\n  z-index: 1;\n  background-color: var(--cui-data-grid-pinned-bg);\n}\n.data-grid .data-grid-header .data-grid-cell-pinned-left,\n.data-grid .data-grid-header .data-grid-cell-pinned-right {\n  z-index: 3;\n}\n.data-grid .data-grid-cell-pinned-left-last,\n.data-grid .data-grid-cell-pinned-right-first {\n  position: sticky;\n}\n.data-grid .data-grid-cell-pinned-left-last::after,\n.data-grid .data-grid-cell-pinned-right-first::after {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--cui-data-grid-pinned-border-width);\n  pointer-events: none;\n  content: \"\";\n}\n.data-grid .data-grid-cell-pinned-left-last::after {\n  right: 0;\n  background: var(--cui-data-grid-pinned-border-color);\n}\n.data-grid .data-grid-cell-pinned-right-first::after {\n  left: 0;\n  background: var(--cui-data-grid-pinned-border-color);\n}\n.data-grid .data-grid-resizer {\n  position: absolute;\n  top: 0;\n  right: calc(-0.5 * var(--cui-data-grid-resizer-width));\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--cui-data-grid-resizer-width);\n  height: 100%;\n  cursor: col-resize;\n  touch-action: none;\n  user-select: none;\n}\n.data-grid .data-grid-resizer::after {\n  width: 2px;\n  height: var(--cui-data-grid-resizer-grip-height);\n  content: \"\";\n  background-color: var(--cui-data-grid-resizer-grip-color);\n  transition: background-color 0.15s ease;\n}\n.data-grid .data-grid-resizer:hover::after, .data-grid .data-grid-resizer.data-grid-resizer-active::after {\n  background-color: var(--cui-data-grid-resizer-grip-color-hover);\n}\n.data-grid .data-grid-spacer > td {\n  padding: 0;\n  border: 0;\n}\n.data-grid .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {\n  --cui-table-color-type: initial;\n  --cui-table-bg-type: initial;\n}\n.data-grid .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {\n  --cui-table-color-type: var(--cui-table-striped-color);\n  --cui-table-bg-type: var(--cui-table-striped-bg);\n}\n.data-grid .data-grid-viewport > .table > tbody > tr:last-child > * {\n  border-bottom-width: 0;\n}\n.data-grid .data-grid-loading {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--cui-data-grid-loading-bg);\n}\n.data-grid .data-grid-tooltip {\n  position: fixed;\n  z-index: 1080;\n  max-width: 12rem;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--cui-body-bg, #fff);\n  text-align: center;\n  pointer-events: none;\n  background-color: var(--cui-emphasis-color, #000);\n  border-radius: var(--cui-border-radius, 0.375rem);\n}\n.data-grid .data-grid-empty > td {\n  padding: 2rem 1rem;\n  color: var(--cui-secondary-color, #6c757d);\n  text-align: center;\n}\n.data-grid .data-grid-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--cui-data-grid-spacing);\n  align-items: center;\n  min-height: 48px;\n  padding: var(--cui-data-grid-spacing);\n  border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-pagination.data-grid-pagination-top {\n  border-top: 0;\n  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-pagination .pagination {\n  margin-bottom: 0;\n}\n.data-grid .data-grid-pagination .data-grid-pagination-info {\n  margin-inline-start: auto;\n  color: var(--cui-secondary-color, #6c757d);\n}\n.data-grid .data-grid-pagination .form-select {\n  width: auto;\n}\n\n/*# sourceMappingURL=data-grid.css.map */\n"]}
+{"version":3,"sources":["../../scss/data-grid.scss","data-grid.css"],"names":[],"mappings":"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","file":"data-grid.css","sourcesContent":["/*!\n * CoreUI PRO data-grid.scss v0.2.0\n * License (https://coreui.io/pro/license/)\n */\n\n.data-grid {\n  // The column menu is positioned against the grid root (it must escape the\n  // viewport's overflow while staying inside the token scope).\n  position: relative;\n  // A column so that a root given an explicit height actually constrains the\n  // scroller: the viewport takes what the toolbar and pagination leave, and\n  // min-height: 0 lets it shrink below its content instead of overflowing the\n  // root. With no height set, this changes nothing — the viewport is sized by\n  // its content up to the max-height token.\n  display: flex;\n  flex-direction: column;\n\n  // Component tokens. Everything resolves through CoreUI semantic variables,\n  // so light/dark theming via [data-coreui-theme] works with no extra rules.\n  --cui-data-grid-viewport-max-height: 30rem;\n  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);\n  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), .12);\n  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);\n  --cui-data-grid-cell-selected-border-width: 1px;\n  --cui-data-grid-row-handle-width: 2rem;\n  --cui-data-grid-select-cell-width: 2.5rem;\n  --cui-data-grid-sorter-margin: .25rem;\n  --cui-data-grid-sorter-opacity: .3;\n  --cui-data-grid-spacing: .5rem;\n  --cui-data-grid-resizer-width: .625rem;\n  --cui-data-grid-resizer-grip-height: 60%;\n  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);\n  --cui-data-grid-pinned-border-width: var(--cui-border-width);\n  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);\n  --cui-data-grid-drag-transition: .15s ease;\n  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));\n  --cui-data-grid-menu-min-width: 10rem;\n  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);\n  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);\n  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-focus-ring-width: 2px;\n  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);\n\n  .data-grid-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--cui-data-grid-spacing);\n    align-items: center;\n    min-height: 48px;\n    padding: var(--cui-data-grid-spacing);\n    border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n  }\n\n  .data-grid-toolbar-actions {\n    display: flex;\n    gap: .25rem;\n    align-items: center;\n  }\n\n  .data-grid-toolbar-search {\n    margin-inline-start: auto;\n  }\n\n  .data-grid-viewport {\n    position: relative;\n    flex: 1 1 auto;\n    min-height: 0;\n    max-height: var(--cui-data-grid-viewport-max-height);\n    overflow-y: auto;\n    // Windowed rendering resizes the spacer rows and recycles row elements on\n    // every frame; browser scroll anchoring chases those mutations and keeps\n    // adjusting scrollTop, which turns wheel scrolling into a feedback loop.\n    overflow-anchor: none;\n  }\n\n  // Inline editing: the in-cell editor fills the cell; the popup layer hosts\n  // rich editors (date pickers, selects) anchored over the cell.\n  .data-grid-cell-editor {\n    width: 100%;\n    min-width: 4rem;\n  }\n\n  .data-grid-editor-popup {\n    position: absolute;\n    z-index: 4;\n    padding: .25rem;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  // cellNavigation: the roving-tabindex active cell. The ring is inset so the\n  // sticky header and pinned columns don't clip it.\n  [role=\"grid\"] :is(td, th):focus-visible {\n    outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);\n    outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));\n  }\n\n  .data-grid-viewport:focus-visible {\n    outline: 0;\n  }\n\n  .data-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background-color: var(--cui-data-grid-header-bg);\n    box-shadow: var(--cui-data-grid-header-shadow);\n  }\n\n  // Header label row: fixed 48px with vertically centered content (height on a\n  // table cell acts as a min; min-height is ignored on table-cell).\n  .data-grid-header tr:not(.data-grid-filter-row) > th {\n    height: 48px;\n    vertical-align: middle;\n  }\n\n  .data-grid-filter-row > th {\n    padding-top: 0;\n    font-weight: normal;\n  }\n\n  .data-grid-header th[data-coreui-draggable] {\n    cursor: grab;\n  }\n\n  .data-grid-header-cell {\n    display: flex;\n    align-items: center;\n    gap: .25rem;\n  }\n\n  .data-grid-header-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  // Icon-only ghost buttons: square them by matching horizontal padding to\n  // vertical (follows .btn / .btn-sm automatically) and collapsing the text\n  // line-height so height follows the icon, not a 1.5em text line.\n  .btn-ghost {\n    --cui-btn-padding-x: var(--cui-btn-padding-y);\n    --cui-btn-line-height: 1;\n  }\n\n  .data-grid-menu-button {\n    margin-inline-start: auto;\n  }\n\n  .data-grid-menu {\n    position: absolute;\n    z-index: 4;\n    min-width: var(--cui-data-grid-menu-min-width);\n    padding: .25rem 0;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  .data-grid-menu-item {\n    display: flex;\n    align-items: center;\n    gap: .5rem;\n    width: 100%;\n    padding: .25rem .75rem;\n    font: inherit;\n    color: inherit;\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--cui-data-grid-menu-item-hover-bg);\n    }\n\n    // Disabled items stay focusable (aria-disabled, APG menu pattern) so the\n    // roving arrow cycle can reach them.\n    &[aria-disabled=\"true\"] {\n      color: var(--cui-secondary-color, #6c757d);\n      cursor: default;\n      background: none;\n    }\n  }\n\n  .data-grid-filter-menu {\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    gap: .5rem;\n    min-width: var(--cui-data-grid-menu-min-width);\n    max-width: 18rem;\n    padding: .75rem;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n\n    > div {\n      display: flex;\n      flex-direction: column;\n      gap: .5rem;\n    }\n  }\n\n  .data-grid-filter-menu-condition {\n    display: flex;\n    flex-direction: column;\n    gap: .25rem;\n  }\n\n  .data-grid-filter-menu-join {\n    display: flex;\n    gap: 1rem;\n\n    label {\n      display: flex;\n      gap: .375rem;\n      align-items: center;\n    }\n  }\n\n  .data-grid-filter-menu-values {\n    display: flex;\n    flex-direction: column;\n    gap: .25rem;\n    max-height: 14rem;\n    overflow-y: auto;\n  }\n\n  .data-grid-filter-menu-footer {\n    display: flex;\n    gap: .5rem;\n    justify-content: flex-end;\n  }\n\n  .data-grid-column-chooser {\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    gap: .5rem;\n    min-width: var(--cui-data-grid-menu-min-width);\n    max-width: 18rem;\n    max-height: 20rem;\n    padding: .75rem;\n    overflow-y: auto;\n    background-color: var(--cui-data-grid-menu-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: var(--cui-data-grid-menu-shadow);\n  }\n\n  .data-grid-column-chooser-option {\n    display: flex;\n    gap: .375rem;\n    align-items: center;\n    margin-bottom: 0;\n  }\n\n  .data-grid-column-chooser-footer {\n    display: flex;\n    gap: .5rem;\n    justify-content: flex-end;\n    padding-top: .25rem;\n    margin-top: .25rem;\n    border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  }\n\n  .data-grid-filter-button {\n    position: relative;\n    // Right-align the trailing controls as a group: the filter button takes the\n    // auto margin (menu drops its own below) so filter and menu sit together at\n    // the end, matching a menu-only header.\n    margin-inline-start: auto;\n\n    ~ .data-grid-menu-button {\n      margin-inline-start: 0;\n    }\n  }\n\n  // Active-filter indicator dot on the filter button.\n  .data-grid-filter-button-filtered::after {\n    position: absolute;\n    inset-block-start: .125rem;\n    inset-inline-end: .125rem;\n    width: .375rem;\n    height: .375rem;\n    content: \"\";\n    background-color: var(--cui-primary, #321fdb);\n    border-radius: 50%;\n  }\n\n  .data-grid-menu-item-icon {\n    display: inline-flex;\n    opacity: .75;\n\n    svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  .data-grid-menu-divider {\n    height: var(--cui-border-width, 1px);\n    margin: .25rem 0;\n    background-color: var(--cui-data-grid-menu-border-color);\n  }\n\n  .data-grid-dragging {\n    opacity: .5;\n  }\n\n  // While a drag is live the whole grid keeps the grabbing cursor and stops\n  // painting a text selection under the pointer.\n  &.data-grid-drag-active {\n    cursor: grabbing;\n    user-select: none;\n  }\n\n  // Both overlays are position: fixed (placed from viewport coordinates in JS)\n  // so they escape the viewport's overflow, like the tooltip.\n  .data-grid-drag-ghost {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 1080;\n    display: flex;\n    align-items: center;\n    max-width: 16rem;\n    padding: 0 var(--cui-data-grid-cell-padding-x, .5rem);\n    overflow: hidden;\n    font-weight: 600;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n    background-color: var(--cui-data-grid-pinned-bg);\n    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);\n    border-radius: var(--cui-border-radius, .375rem);\n    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);\n    transform: translate(-9999px, -9999px);\n    opacity: .9;\n  }\n\n  // The settling ghost: on release it flies from the pointer to the slot the\n  // item landed in (or back home on cancel) and fades out there.\n  .data-grid-drag-ghost-settle {\n    transition: transform var(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);\n  }\n\n  .data-grid-drop-indicator {\n    position: fixed;\n    z-index: 1080;\n    pointer-events: none;\n    background-color: var(--cui-data-grid-drop-indicator);\n    transition: top var(--cui-data-grid-drag-transition), left var(--cui-data-grid-drag-transition);\n  }\n\n  // The live reorder preview: cells slide to the layout the drop will produce.\n  // Transform only, so nothing reflows and the real order still changes once.\n  .data-grid-drag-preview {\n    transition: transform var(--cui-data-grid-drag-transition);\n  }\n\n  // Someone who asked the OS to stop moving things still gets the preview —\n  // it snaps to the final layout instead of gliding there.\n  @media (prefers-reduced-motion: reduce) {\n    :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {\n      transition: none;\n    }\n  }\n\n  // The line is 2px across its short axis and spans the grid along the other;\n  // JS sets the spanning size, the axis class sets the thickness.\n  .data-grid-drop-indicator-x {\n    width: .125rem;\n  }\n\n  .data-grid-drop-indicator-y {\n    height: .125rem;\n  }\n\n  // Cell selection: a tinted fill on every selected cell, plus an outline\n  // drawn only on the sides that sit on the selection's boundary — so a\n  // rectangle reads as one region instead of a grid of boxes. The outline is\n  // an overlay rather than a border: a border on a table cell would shift the\n  // whole row's layout the moment a range is selected.\n  .data-grid-cell-selected {\n    position: relative;\n    background-color: var(--cui-data-grid-cell-selected-bg);\n  }\n\n  .data-grid-cell-selected::after {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    content: \"\";\n    border: 0 solid var(--cui-data-grid-cell-selected-border-color);\n  }\n\n  .data-grid-cell-selected-top::after {\n    border-top-width: var(--cui-data-grid-cell-selected-border-width);\n  }\n\n  .data-grid-cell-selected-right::after {\n    border-right-width: var(--cui-data-grid-cell-selected-border-width);\n  }\n\n  .data-grid-cell-selected-bottom::after {\n    border-bottom-width: var(--cui-data-grid-cell-selected-border-width);\n  }\n\n  .data-grid-cell-selected-left::after {\n    border-left-width: var(--cui-data-grid-cell-selected-border-width);\n  }\n\n  // The reorder column: as narrow as the grip, and the grip itself is the only\n  // thing that starts a row drag (a row is full of interactive content that a\n  // whole-row handle would swallow).\n  .data-grid-row-handle-cell {\n    width: var(--cui-data-grid-row-handle-width);\n    padding-inline: 0;\n    text-align: center;\n  }\n\n  .data-grid-row-handle {\n    display: inline-flex;\n    color: var(--cui-data-grid-resizer-grip-color-hover);\n    cursor: grab;\n    touch-action: none;\n  }\n\n  .data-grid-select-cell {\n    width: var(--cui-data-grid-select-cell-width);\n    text-align: center;\n  }\n\n  .data-grid-sort-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cui-data-grid-sorter-margin);\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: 0;\n  }\n\n  .data-grid-sort-icon {\n    display: inline-flex;\n    font-size: .875em;\n    opacity: 0;\n\n    svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  // The active sort direction is always visible; the neutral (unsorted) icon is\n  // hidden unless `sorterVisibility` opts it in (steadily via \"always\", or on\n  // header hover/focus via \"hover\").\n  .data-grid-sortable[aria-sort] .data-grid-sort-icon {\n    opacity: 1;\n  }\n\n  &[data-coreui-sorter-visibility=\"always\"] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {\n    opacity: var(--cui-data-grid-sorter-opacity);\n  }\n\n  &[data-coreui-sorter-visibility=\"hover\"] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon,\n  &[data-coreui-sorter-visibility=\"hover\"] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {\n    opacity: var(--cui-data-grid-sorter-opacity);\n  }\n\n  .data-grid-viewport > .table {\n    margin-bottom: 0;\n    table-layout: fixed;\n  }\n\n  // Body cells render on a single line and truncate with an ellipsis instead of\n  // spilling their content across the fixed-layout column boundary onto the next\n  // column. Matches the default of AG Grid / MUI X Data Grid and TanStack's\n  // virtualized-table guidance, and keeps every row a uniform height for the\n  // fixed-height virtualizer (wrapping would desync `estimateSize`). Pinned cells\n  // are excluded so their shadow pseudo-element (painted outside the box via a\n  // translate) isn't clipped; the select cell holds only a checkbox.\n  //\n  // Auto row height is the deliberate exception: there the virtualizer measures\n  // each row, so cells are free to wrap. Scoping the rule out is what keeps the\n  // two modes from fighting over specificity.\n  &:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  // Widths applied to each header cell drive the column layout; letting the\n  // table grow to its content (min-width keeps it filling a wide viewport)\n  // turns a resize or a pin into horizontal scroll rather than squeezing\n  // neighbours. Both features share this layout mode.\n  &.data-grid-resizable,\n  &.data-grid-pinned {\n    .data-grid-viewport {\n      overflow-x: auto;\n    }\n\n    .table {\n      width: max-content;\n      min-width: 100%;\n    }\n  }\n\n  // A pinned th is already sticky (a positioned containing block for the\n  // resizer), so only non-pinned header cells need explicit relative here.\n  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {\n    position: relative;\n  }\n\n  &.data-grid-pinned .table {\n    // position: sticky is unreliable on collapsed-border tables; the grid opts\n    // into separate borders so pinned cells stay put on horizontal scroll.\n    border-collapse: separate;\n    border-spacing: 0;\n  }\n\n  .data-grid-cell-pinned-start,\n  .data-grid-cell-pinned-end {\n    position: sticky;\n    z-index: 1;\n    background-color: var(--cui-data-grid-pinned-bg);\n  }\n\n  .data-grid-header .data-grid-cell-pinned-start,\n  .data-grid-header .data-grid-cell-pinned-end {\n    z-index: 3;\n  }\n\n  // Edge cells cast a shadow over the scrolling content. A pseudo-element is\n  // used because the cell's own box-shadow carries the table striping accent.\n  .data-grid-cell-pinned-start-last,\n  .data-grid-cell-pinned-end-first {\n    position: sticky;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: var(--cui-data-grid-pinned-border-width);\n      pointer-events: none;\n      content: \"\";\n    }\n  }\n\n  .data-grid-cell-pinned-start-last::after {\n    inset-inline-end: 0;\n    background: var(--cui-data-grid-pinned-border-color);\n  }\n\n  .data-grid-cell-pinned-end-first::after {\n    inset-inline-start: 0;\n    background: var(--cui-data-grid-pinned-border-color);\n  }\n\n  .data-grid-resizer {\n    position: absolute;\n    top: 0;\n    right: calc(-.5 * var(--cui-data-grid-resizer-width));\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--cui-data-grid-resizer-width);\n    height: 100%;\n    cursor: col-resize;\n    touch-action: none;\n    user-select: none;\n\n    // Always-visible grip so the resizable edge is discoverable, not just a\n    // bare hover target.\n    &::after {\n      width: 2px;\n      height: var(--cui-data-grid-resizer-grip-height);\n      content: \"\";\n      background-color: var(--cui-data-grid-resizer-grip-color);\n      transition: background-color .15s ease;\n    }\n\n    &:hover::after,\n    &.data-grid-resizer-active::after {\n      background-color: var(--cui-data-grid-resizer-grip-color-hover);\n    }\n  }\n\n  .data-grid-spacer > td {\n    padding: 0;\n    border: 0;\n  }\n\n  // Spacer rows break `nth-of-type` striping, so striping inside the grid is\n  // driven by the absolute row index (.data-grid-row-odd) instead.\n  .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {\n    --cui-table-color-type: initial;\n    --cui-table-bg-type: initial;\n  }\n\n  .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {\n    --cui-table-color-type: var(--cui-table-striped-color);\n    --cui-table-bg-type: var(--cui-table-striped-bg);\n  }\n\n  // The last row closes on the viewport edge (or the pagination border), so it\n  // doesn't need its own separator line.\n  .data-grid-viewport > .table > tbody > tr:last-child > * {\n    border-bottom-width: 0;\n  }\n\n  .data-grid-loading {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--cui-data-grid-loading-bg);\n  }\n\n  // Infinite scroll's \"next page arriving\" strip. Sticky, not an overlay: the\n  // rows already loaded stay readable while the grid appends to them.\n  .data-grid-loading-more {\n    position: sticky;\n    inset-inline: 0;\n    bottom: 0;\n    z-index: 3;\n    display: flex;\n    justify-content: center;\n    padding: var(--cui-data-grid-spacing);\n    background-color: var(--cui-data-grid-loading-bg);\n  }\n\n  // Shared icon-button tooltip. position: fixed (set in JS) so it escapes the\n  // viewport overflow; theme-inverted like CoreUI's own tooltip.\n  .data-grid-tooltip {\n    position: fixed;\n    z-index: 1080;\n    max-width: 12rem;\n    padding: .25rem .5rem;\n    font-size: .875rem;\n    line-height: 1.4;\n    color: var(--cui-body-bg, #fff);\n    text-align: center;\n    pointer-events: none;\n    background-color: var(--cui-emphasis-color, #000);\n    border-radius: var(--cui-border-radius, .375rem);\n  }\n\n  .data-grid-empty > td {\n    padding: 2rem 1rem;\n    color: var(--cui-secondary-color, #6c757d);\n    text-align: center;\n  }\n\n  .data-grid-pagination {\n    display: flex;\n    // Wrap the page controls, count and page-size select onto multiple rows on\n    // narrow viewports; without this the fixed row overflows and scrolls the page\n    // instead of staying inside the grid.\n    flex-wrap: wrap;\n    gap: var(--cui-data-grid-spacing);\n    align-items: center;\n    min-height: 48px;\n    padding: var(--cui-data-grid-spacing);\n    border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n\n    &.data-grid-pagination-top {\n      border-top: 0;\n      border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n    }\n\n    .pagination {\n      margin-bottom: 0;\n    }\n\n    .data-grid-pagination-info {\n      margin-inline-start: auto;\n      color: var(--cui-secondary-color, #6c757d);\n    }\n\n    .form-select {\n      width: auto;\n    }\n  }\n}\n\n// Print: the grid renders a plain, complete table into the document (see\n// util/print.ts) and hides everything else, so a virtualized grid prints all\n// its rows instead of the twenty in the window.\n@media print {\n  .data-grid-print-root {\n    position: absolute;\n    inset: 0 0 auto;\n    z-index: 2000;\n    background-color: #fff;\n\n    h1 {\n      margin-bottom: 1rem;\n      font-size: 1.25rem;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    :is(th, td) {\n      padding: .25rem .5rem;\n      text-align: start;\n      border: 1px solid #000;\n    }\n\n    thead {\n      display: table-header-group;\n    }\n\n    tr {\n      break-inside: avoid;\n    }\n  }\n\n  // :has() is inside the browser floor (.browserslistrc), and scoping to the\n  // body's own children keeps the clone's ancestors from being hidden.\n  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {\n    display: none !important;\n  }\n}\n","/*!\n * CoreUI PRO data-grid.scss v0.2.0\n * License (https://coreui.io/pro/license/)\n */\n.data-grid {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  --cui-data-grid-viewport-max-height: 30rem;\n  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);\n  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), .12);\n  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);\n  --cui-data-grid-cell-selected-border-width: 1px;\n  --cui-data-grid-row-handle-width: 2rem;\n  --cui-data-grid-select-cell-width: 2.5rem;\n  --cui-data-grid-sorter-margin: .25rem;\n  --cui-data-grid-sorter-opacity: .3;\n  --cui-data-grid-spacing: .5rem;\n  --cui-data-grid-resizer-width: .625rem;\n  --cui-data-grid-resizer-grip-height: 60%;\n  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);\n  --cui-data-grid-pinned-border-width: var(--cui-border-width);\n  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);\n  --cui-data-grid-drag-transition: .15s ease;\n  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);\n  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));\n  --cui-data-grid-menu-min-width: 10rem;\n  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);\n  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);\n  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);\n  --cui-data-grid-focus-ring-width: 2px;\n  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);\n}\n.data-grid .data-grid-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--cui-data-grid-spacing);\n  align-items: center;\n  min-height: 48px;\n  padding: var(--cui-data-grid-spacing);\n  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-toolbar-actions {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}\n.data-grid .data-grid-toolbar-search {\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-viewport {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: var(--cui-data-grid-viewport-max-height);\n  overflow-y: auto;\n  overflow-anchor: none;\n}\n.data-grid .data-grid-cell-editor {\n  width: 100%;\n  min-width: 4rem;\n}\n.data-grid .data-grid-editor-popup {\n  position: absolute;\n  z-index: 4;\n  padding: 0.25rem;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid [role=grid] :is(td, th):focus-visible {\n  outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);\n  outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));\n}\n.data-grid .data-grid-viewport:focus-visible {\n  outline: 0;\n}\n.data-grid .data-grid-header {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background-color: var(--cui-data-grid-header-bg);\n  box-shadow: var(--cui-data-grid-header-shadow);\n}\n.data-grid .data-grid-header tr:not(.data-grid-filter-row) > th {\n  height: 48px;\n  vertical-align: middle;\n}\n.data-grid .data-grid-filter-row > th {\n  padding-top: 0;\n  font-weight: normal;\n}\n.data-grid .data-grid-header th[data-coreui-draggable] {\n  cursor: grab;\n}\n.data-grid .data-grid-header-cell {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.data-grid .data-grid-header-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.data-grid .btn-ghost {\n  --cui-btn-padding-x: var(--cui-btn-padding-y);\n  --cui-btn-line-height: 1;\n}\n.data-grid .data-grid-menu-button {\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-menu {\n  position: absolute;\n  z-index: 4;\n  min-width: var(--cui-data-grid-menu-min-width);\n  padding: 0.25rem 0;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.25rem 0.75rem;\n  font: inherit;\n  color: inherit;\n  text-align: start;\n  cursor: pointer;\n  background: none;\n  border: 0;\n}\n.data-grid .data-grid-menu-item:hover, .data-grid .data-grid-menu-item:focus-visible {\n  background-color: var(--cui-data-grid-menu-item-hover-bg);\n}\n.data-grid .data-grid-menu-item[aria-disabled=true] {\n  color: var(--cui-secondary-color, #6c757d);\n  cursor: default;\n  background: none;\n}\n.data-grid .data-grid-filter-menu {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  min-width: var(--cui-data-grid-menu-min-width);\n  max-width: 18rem;\n  padding: 0.75rem;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-filter-menu > div {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.data-grid .data-grid-filter-menu-condition {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.data-grid .data-grid-filter-menu-join {\n  display: flex;\n  gap: 1rem;\n}\n.data-grid .data-grid-filter-menu-join label {\n  display: flex;\n  gap: 0.375rem;\n  align-items: center;\n}\n.data-grid .data-grid-filter-menu-values {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  max-height: 14rem;\n  overflow-y: auto;\n}\n.data-grid .data-grid-filter-menu-footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n.data-grid .data-grid-column-chooser {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  min-width: var(--cui-data-grid-menu-min-width);\n  max-width: 18rem;\n  max-height: 20rem;\n  padding: 0.75rem;\n  overflow-y: auto;\n  background-color: var(--cui-data-grid-menu-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: var(--cui-data-grid-menu-shadow);\n}\n.data-grid .data-grid-column-chooser-option {\n  display: flex;\n  gap: 0.375rem;\n  align-items: center;\n  margin-bottom: 0;\n}\n.data-grid .data-grid-column-chooser-footer {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  padding-top: 0.25rem;\n  margin-top: 0.25rem;\n  border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);\n}\n.data-grid .data-grid-filter-button {\n  position: relative;\n  margin-inline-start: auto;\n}\n.data-grid .data-grid-filter-button ~ .data-grid-menu-button {\n  margin-inline-start: 0;\n}\n.data-grid .data-grid-filter-button-filtered::after {\n  position: absolute;\n  inset-block-start: 0.125rem;\n  inset-inline-end: 0.125rem;\n  width: 0.375rem;\n  height: 0.375rem;\n  content: \"\";\n  background-color: var(--cui-primary, #321fdb);\n  border-radius: 50%;\n}\n.data-grid .data-grid-menu-item-icon {\n  display: inline-flex;\n  opacity: 0.75;\n}\n.data-grid .data-grid-menu-item-icon svg {\n  width: 1em;\n  height: 1em;\n}\n.data-grid .data-grid-menu-divider {\n  height: var(--cui-border-width, 1px);\n  margin: 0.25rem 0;\n  background-color: var(--cui-data-grid-menu-border-color);\n}\n.data-grid .data-grid-dragging {\n  opacity: 0.5;\n}\n.data-grid.data-grid-drag-active {\n  cursor: grabbing;\n  user-select: none;\n}\n.data-grid .data-grid-drag-ghost {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1080;\n  display: flex;\n  align-items: center;\n  max-width: 16rem;\n  padding: 0 var(--cui-data-grid-cell-padding-x, 0.5rem);\n  overflow: hidden;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  background-color: var(--cui-data-grid-pinned-bg);\n  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);\n  border-radius: var(--cui-border-radius, 0.375rem);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  transform: translate(-9999px, -9999px);\n  opacity: 0.9;\n}\n.data-grid .data-grid-drag-ghost-settle {\n  transition: transform var(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);\n}\n.data-grid .data-grid-drop-indicator {\n  position: fixed;\n  z-index: 1080;\n  pointer-events: none;\n  background-color: var(--cui-data-grid-drop-indicator);\n  transition: top var(--cui-data-grid-drag-transition), left var(--cui-data-grid-drag-transition);\n}\n.data-grid .data-grid-drag-preview {\n  transition: transform var(--cui-data-grid-drag-transition);\n}\n@media (prefers-reduced-motion: reduce) {\n  .data-grid :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {\n    transition: none;\n  }\n}\n.data-grid .data-grid-drop-indicator-x {\n  width: 0.125rem;\n}\n.data-grid .data-grid-drop-indicator-y {\n  height: 0.125rem;\n}\n.data-grid .data-grid-cell-selected {\n  position: relative;\n  background-color: var(--cui-data-grid-cell-selected-bg);\n}\n.data-grid .data-grid-cell-selected::after {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: \"\";\n  border: 0 solid var(--cui-data-grid-cell-selected-border-color);\n}\n.data-grid .data-grid-cell-selected-top::after {\n  border-top-width: var(--cui-data-grid-cell-selected-border-width);\n}\n.data-grid .data-grid-cell-selected-right::after {\n  border-right-width: var(--cui-data-grid-cell-selected-border-width);\n}\n.data-grid .data-grid-cell-selected-bottom::after {\n  border-bottom-width: var(--cui-data-grid-cell-selected-border-width);\n}\n.data-grid .data-grid-cell-selected-left::after {\n  border-left-width: var(--cui-data-grid-cell-selected-border-width);\n}\n.data-grid .data-grid-row-handle-cell {\n  width: var(--cui-data-grid-row-handle-width);\n  padding-inline: 0;\n  text-align: center;\n}\n.data-grid .data-grid-row-handle {\n  display: inline-flex;\n  color: var(--cui-data-grid-resizer-grip-color-hover);\n  cursor: grab;\n  touch-action: none;\n}\n.data-grid .data-grid-select-cell {\n  width: var(--cui-data-grid-select-cell-width);\n  text-align: center;\n}\n.data-grid .data-grid-sort-button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cui-data-grid-sorter-margin);\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  user-select: none;\n  background: none;\n  border: 0;\n}\n.data-grid .data-grid-sort-icon {\n  display: inline-flex;\n  font-size: 0.875em;\n  opacity: 0;\n}\n.data-grid .data-grid-sort-icon svg {\n  width: 1em;\n  height: 1em;\n}\n.data-grid .data-grid-sortable[aria-sort] .data-grid-sort-icon {\n  opacity: 1;\n}\n.data-grid[data-coreui-sorter-visibility=always] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {\n  opacity: var(--cui-data-grid-sorter-opacity);\n}\n.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon, .data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {\n  opacity: var(--cui-data-grid-sorter-opacity);\n}\n.data-grid .data-grid-viewport > .table {\n  margin-bottom: 0;\n  table-layout: fixed;\n}\n.data-grid:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.data-grid.data-grid-resizable .data-grid-viewport, .data-grid.data-grid-pinned .data-grid-viewport {\n  overflow-x: auto;\n}\n.data-grid.data-grid-resizable .table, .data-grid.data-grid-pinned .table {\n  width: max-content;\n  min-width: 100%;\n}\n.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {\n  position: relative;\n}\n.data-grid.data-grid-pinned .table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.data-grid .data-grid-cell-pinned-start,\n.data-grid .data-grid-cell-pinned-end {\n  position: sticky;\n  z-index: 1;\n  background-color: var(--cui-data-grid-pinned-bg);\n}\n.data-grid .data-grid-header .data-grid-cell-pinned-start,\n.data-grid .data-grid-header .data-grid-cell-pinned-end {\n  z-index: 3;\n}\n.data-grid .data-grid-cell-pinned-start-last,\n.data-grid .data-grid-cell-pinned-end-first {\n  position: sticky;\n}\n.data-grid .data-grid-cell-pinned-start-last::after,\n.data-grid .data-grid-cell-pinned-end-first::after {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--cui-data-grid-pinned-border-width);\n  pointer-events: none;\n  content: \"\";\n}\n.data-grid .data-grid-cell-pinned-start-last::after {\n  inset-inline-end: 0;\n  background: var(--cui-data-grid-pinned-border-color);\n}\n.data-grid .data-grid-cell-pinned-end-first::after {\n  inset-inline-start: 0;\n  background: var(--cui-data-grid-pinned-border-color);\n}\n.data-grid .data-grid-resizer {\n  position: absolute;\n  top: 0;\n  right: calc(-0.5 * var(--cui-data-grid-resizer-width));\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--cui-data-grid-resizer-width);\n  height: 100%;\n  cursor: col-resize;\n  touch-action: none;\n  user-select: none;\n}\n.data-grid .data-grid-resizer::after {\n  width: 2px;\n  height: var(--cui-data-grid-resizer-grip-height);\n  content: \"\";\n  background-color: var(--cui-data-grid-resizer-grip-color);\n  transition: background-color 0.15s ease;\n}\n.data-grid .data-grid-resizer:hover::after, .data-grid .data-grid-resizer.data-grid-resizer-active::after {\n  background-color: var(--cui-data-grid-resizer-grip-color-hover);\n}\n.data-grid .data-grid-spacer > td {\n  padding: 0;\n  border: 0;\n}\n.data-grid .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {\n  --cui-table-color-type: initial;\n  --cui-table-bg-type: initial;\n}\n.data-grid .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {\n  --cui-table-color-type: var(--cui-table-striped-color);\n  --cui-table-bg-type: var(--cui-table-striped-bg);\n}\n.data-grid .data-grid-viewport > .table > tbody > tr:last-child > * {\n  border-bottom-width: 0;\n}\n.data-grid .data-grid-loading {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--cui-data-grid-loading-bg);\n}\n.data-grid .data-grid-loading-more {\n  position: sticky;\n  inset-inline: 0;\n  bottom: 0;\n  z-index: 3;\n  display: flex;\n  justify-content: center;\n  padding: var(--cui-data-grid-spacing);\n  background-color: var(--cui-data-grid-loading-bg);\n}\n.data-grid .data-grid-tooltip {\n  position: fixed;\n  z-index: 1080;\n  max-width: 12rem;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  color: var(--cui-body-bg, #fff);\n  text-align: center;\n  pointer-events: none;\n  background-color: var(--cui-emphasis-color, #000);\n  border-radius: var(--cui-border-radius, 0.375rem);\n}\n.data-grid .data-grid-empty > td {\n  padding: 2rem 1rem;\n  color: var(--cui-secondary-color, #6c757d);\n  text-align: center;\n}\n.data-grid .data-grid-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--cui-data-grid-spacing);\n  align-items: center;\n  min-height: 48px;\n  padding: var(--cui-data-grid-spacing);\n  border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-pagination.data-grid-pagination-top {\n  border-top: 0;\n  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);\n}\n.data-grid .data-grid-pagination .pagination {\n  margin-bottom: 0;\n}\n.data-grid .data-grid-pagination .data-grid-pagination-info {\n  margin-inline-start: auto;\n  color: var(--cui-secondary-color, #6c757d);\n}\n.data-grid .data-grid-pagination .form-select {\n  width: auto;\n}\n\n@media print {\n  .data-grid-print-root {\n    position: absolute;\n    inset: 0 0 auto;\n    z-index: 2000;\n    background-color: #fff;\n  }\n  .data-grid-print-root h1 {\n    margin-bottom: 1rem;\n    font-size: 1.25rem;\n  }\n  .data-grid-print-root table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  .data-grid-print-root :is(th, td) {\n    padding: 0.25rem 0.5rem;\n    text-align: start;\n    border: 1px solid #000;\n  }\n  .data-grid-print-root thead {\n    display: table-header-group;\n  }\n  .data-grid-print-root tr {\n    break-inside: avoid;\n  }\n  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {\n    display: none !important;\n  }\n}\n\n/*# sourceMappingURL=data-grid.css.map */\n"]}

package/dist/css/data-grid.min.css

@@ -1,5 +1,5 @@
 /*!
- * CoreUI PRO data-grid.scss v0.1.0
+ * CoreUI PRO data-grid.scss v0.2.0
  * License (https://coreui.io/pro/license/)
- */.data-grid{position:relative;--cui-data-grid-viewport-max-height:30rem;--cui-data-grid-header-bg:var(--cui-body-bg, #fff);--cui-data-grid-header-shadow:inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);--cui-data-grid-select-cell-width:2.5rem;--cui-data-grid-sorter-margin:.25rem;--cui-data-grid-sorter-opacity:.3;--cui-data-grid-spacing:.5rem;--cui-data-grid-resizer-width:.625rem;--cui-data-grid-resizer-grip-height:60%;--cui-data-grid-resizer-grip-color:var(--cui-border-color, #dee2e6);--cui-data-grid-resizer-grip-color-hover:var(--cui-secondary-color, #6c757d);--cui-data-grid-pinned-border-width:var(--cui-border-width);--cui-data-grid-pinned-border-color:var(--cui-border-color, #dee2e6);--cui-data-grid-drop-indicator:var(--cui-primary, #321fdb);--cui-data-grid-menu-bg:var(--cui-body-bg, #fff);--cui-data-grid-menu-border-color:var(--cui-border-color, #dee2e6);--cui-data-grid-menu-shadow:var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--cui-data-grid-menu-min-width:10rem;--cui-data-grid-menu-item-hover-bg:var(--cui-tertiary-bg, #f8f9fa);--cui-data-grid-loading-bg:rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);--cui-data-grid-pinned-bg:var(--cui-body-bg, #fff);--cui-data-grid-focus-ring-width:2px;--cui-data-grid-focus-ring-color:var(--cui-primary, #321fdb)}.data-grid .data-grid-toolbar{display:flex;flex-wrap:wrap;gap:var(--cui-data-grid-spacing);align-items:center;min-height:48px;padding:var(--cui-data-grid-spacing);border-bottom:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-toolbar-actions{display:flex;gap:.25rem;align-items:center}.data-grid .data-grid-toolbar-search{-webkit-margin-start:auto;margin-inline-start:auto}.data-grid .data-grid-viewport{position:relative;max-height:var(--cui-data-grid-viewport-max-height);overflow-y:auto;overflow-anchor:none}.data-grid .data-grid-cell-editor{width:100%;min-width:4rem}.data-grid .data-grid-editor-popup{position:absolute;z-index:4;padding:.25rem;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid [role=grid] :is(td,th):focus-visible{outline:var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);outline-offset:calc(-1 * var(--cui-data-grid-focus-ring-width))}.data-grid .data-grid-viewport:focus-visible{outline:0}.data-grid .data-grid-header{position:-webkit-sticky;position:sticky;top:0;z-index:2;background-color:var(--cui-data-grid-header-bg);box-shadow:var(--cui-data-grid-header-shadow)}.data-grid .data-grid-header tr:not(.data-grid-filter-row)>th{height:48px;vertical-align:middle}.data-grid .data-grid-filter-row>th{padding-top:0;font-weight:400}.data-grid .data-grid-header th[data-coreui-draggable]{cursor:-webkit-grab;cursor:grab}.data-grid .data-grid-header-cell{display:flex;align-items:center;gap:.25rem}.data-grid .data-grid-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-grid .btn-ghost{--cui-btn-padding-x:var(--cui-btn-padding-y);--cui-btn-line-height:1}.data-grid .data-grid-menu-button{-webkit-margin-start:auto;margin-inline-start:auto}.data-grid .data-grid-menu{position:absolute;z-index:4;min-width:var(--cui-data-grid-menu-min-width);padding:.25rem 0;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem .75rem;font:inherit;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0}.data-grid .data-grid-menu-item:focus-visible,.data-grid .data-grid-menu-item:hover{background-color:var(--cui-data-grid-menu-item-hover-bg)}.data-grid .data-grid-menu-item[aria-disabled=true]{color:var(--cui-secondary-color,#6c757d);cursor:default;background:0 0}.data-grid .data-grid-filter-menu{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.5rem;min-width:var(--cui-data-grid-menu-min-width);max-width:18rem;padding:.75rem;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-filter-menu>div{display:flex;flex-direction:column;gap:.5rem}.data-grid .data-grid-filter-menu-condition{display:flex;flex-direction:column;gap:.25rem}.data-grid .data-grid-filter-menu-join{display:flex;gap:1rem}.data-grid .data-grid-filter-menu-join label{display:flex;gap:.375rem;align-items:center}.data-grid .data-grid-filter-menu-values{display:flex;flex-direction:column;gap:.25rem;max-height:14rem;overflow-y:auto}.data-grid .data-grid-filter-menu-footer{display:flex;gap:.5rem;justify-content:flex-end}.data-grid .data-grid-column-chooser{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.5rem;min-width:var(--cui-data-grid-menu-min-width);max-width:18rem;max-height:20rem;padding:.75rem;overflow-y:auto;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-column-chooser-option{display:flex;gap:.375rem;align-items:center;margin-bottom:0}.data-grid .data-grid-column-chooser-footer{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.25rem;margin-top:.25rem;border-top:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color)}.data-grid .data-grid-filter-button{position:relative;-webkit-margin-start:auto;margin-inline-start:auto}.data-grid .data-grid-filter-button~.data-grid-menu-button{-webkit-margin-start:0;margin-inline-start:0}.data-grid .data-grid-filter-button-filtered::after{position:absolute;inset-block-start:0.125rem;inset-inline-end:0.125rem;width:.375rem;height:.375rem;content:"";background-color:var(--cui-primary,#321fdb);border-radius:50%}.data-grid .data-grid-menu-item-icon{display:inline-flex;opacity:.75}.data-grid .data-grid-menu-item-icon svg{width:1em;height:1em}.data-grid .data-grid-menu-divider{height:var(--cui-border-width,1px);margin:.25rem 0;background-color:var(--cui-data-grid-menu-border-color)}.data-grid .data-grid-header .data-grid-dragging{opacity:.5}.data-grid .data-grid-header .data-grid-drop-target{box-shadow:inset .125rem 0 0 var(--cui-data-grid-drop-indicator)}.data-grid .data-grid-select-cell{width:var(--cui-data-grid-select-cell-width);text-align:center}.data-grid .data-grid-sort-button{display:inline-flex;align-items:center;gap:var(--cui-data-grid-sorter-margin);padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:0 0;border:0}.data-grid .data-grid-sort-icon{display:inline-flex;font-size:.875em;opacity:0}.data-grid .data-grid-sort-icon svg{width:1em;height:1em}.data-grid .data-grid-sortable[aria-sort] .data-grid-sort-icon{opacity:1}.data-grid[data-coreui-sorter-visibility=always] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon{opacity:var(--cui-data-grid-sorter-opacity)}.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon,.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon{opacity:var(--cui-data-grid-sorter-opacity)}.data-grid .data-grid-viewport>.table{margin-bottom:0;table-layout:fixed}.data-grid .data-grid-viewport>.table>tbody>tr:not(.data-grid-empty)>td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-grid.data-grid-pinned .data-grid-viewport,.data-grid.data-grid-resizable .data-grid-viewport{overflow-x:auto}.data-grid.data-grid-pinned .table,.data-grid.data-grid-resizable .table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%}.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-left):not(.data-grid-cell-pinned-right){position:relative}.data-grid.data-grid-pinned .table{border-collapse:separate;border-spacing:0}.data-grid .data-grid-cell-pinned-left,.data-grid .data-grid-cell-pinned-right{position:-webkit-sticky;position:sticky;z-index:1;background-color:var(--cui-data-grid-pinned-bg)}.data-grid .data-grid-header .data-grid-cell-pinned-left,.data-grid .data-grid-header .data-grid-cell-pinned-right{z-index:3}.data-grid .data-grid-cell-pinned-left-last,.data-grid .data-grid-cell-pinned-right-first{position:-webkit-sticky;position:sticky}.data-grid .data-grid-cell-pinned-left-last::after,.data-grid .data-grid-cell-pinned-right-first::after{position:absolute;top:0;bottom:0;width:var(--cui-data-grid-pinned-border-width);pointer-events:none;content:""}.data-grid .data-grid-cell-pinned-left-last::after{right:0;background:var(--cui-data-grid-pinned-border-color)}.data-grid .data-grid-cell-pinned-right-first::after{left:0;background:var(--cui-data-grid-pinned-border-color)}.data-grid .data-grid-resizer{position:absolute;top:0;right:calc(-.5 * var(--cui-data-grid-resizer-width));z-index:1;display:flex;align-items:center;justify-content:center;width:var(--cui-data-grid-resizer-width);height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.data-grid .data-grid-resizer::after{width:2px;height:var(--cui-data-grid-resizer-grip-height);content:"";background-color:var(--cui-data-grid-resizer-grip-color);transition:background-color .15s ease}.data-grid .data-grid-resizer.data-grid-resizer-active::after,.data-grid .data-grid-resizer:hover::after{background-color:var(--cui-data-grid-resizer-grip-color-hover)}.data-grid .data-grid-spacer>td{padding:0;border:0}.data-grid .data-grid-viewport>.table-striped>tbody>tr:nth-of-type(odd)>*{--cui-table-color-type:initial;--cui-table-bg-type:initial}.data-grid .data-grid-viewport>.table-striped>tbody>tr.data-grid-row-odd>*{--cui-table-color-type:var(--cui-table-striped-color);--cui-table-bg-type:var(--cui-table-striped-bg)}.data-grid .data-grid-viewport>.table>tbody>tr:last-child>*{border-bottom-width:0}.data-grid .data-grid-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background-color:var(--cui-data-grid-loading-bg)}.data-grid .data-grid-tooltip{position:fixed;z-index:1080;max-width:12rem;padding:.25rem .5rem;font-size:.875rem;line-height:1.4;color:var(--cui-body-bg,#fff);text-align:center;pointer-events:none;background-color:var(--cui-emphasis-color,#000);border-radius:var(--cui-border-radius,.375rem)}.data-grid .data-grid-empty>td{padding:2rem 1rem;color:var(--cui-secondary-color,#6c757d);text-align:center}.data-grid .data-grid-pagination{display:flex;flex-wrap:wrap;gap:var(--cui-data-grid-spacing);align-items:center;min-height:48px;padding:var(--cui-data-grid-spacing);border-top:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-pagination.data-grid-pagination-top{border-top:0;border-bottom:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-pagination .pagination{margin-bottom:0}.data-grid .data-grid-pagination .data-grid-pagination-info{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--cui-secondary-color,#6c757d)}.data-grid .data-grid-pagination .form-select{width:auto}
+ */.data-grid{position:relative;display:flex;flex-direction:column;--cui-data-grid-viewport-max-height:30rem;--cui-data-grid-header-bg:var(--cui-body-bg, #fff);--cui-data-grid-header-shadow:inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);--cui-data-grid-cell-selected-bg:rgba(var(--cui-primary-rgb, 50, 31, 219), .12);--cui-data-grid-cell-selected-border-color:var(--cui-primary, #321fdb);--cui-data-grid-cell-selected-border-width:1px;--cui-data-grid-row-handle-width:2rem;--cui-data-grid-select-cell-width:2.5rem;--cui-data-grid-sorter-margin:.25rem;--cui-data-grid-sorter-opacity:.3;--cui-data-grid-spacing:.5rem;--cui-data-grid-resizer-width:.625rem;--cui-data-grid-resizer-grip-height:60%;--cui-data-grid-resizer-grip-color:var(--cui-border-color, #dee2e6);--cui-data-grid-resizer-grip-color-hover:var(--cui-secondary-color, #6c757d);--cui-data-grid-pinned-border-width:var(--cui-border-width);--cui-data-grid-pinned-border-color:var(--cui-border-color, #dee2e6);--cui-data-grid-drop-indicator:var(--cui-primary, #321fdb);--cui-data-grid-drag-transition:.15s ease;--cui-data-grid-menu-bg:var(--cui-body-bg, #fff);--cui-data-grid-menu-border-color:var(--cui-border-color, #dee2e6);--cui-data-grid-menu-shadow:var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--cui-data-grid-menu-min-width:10rem;--cui-data-grid-menu-item-hover-bg:var(--cui-tertiary-bg, #f8f9fa);--cui-data-grid-loading-bg:rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);--cui-data-grid-pinned-bg:var(--cui-body-bg, #fff);--cui-data-grid-focus-ring-width:2px;--cui-data-grid-focus-ring-color:var(--cui-primary, #321fdb)}.data-grid .data-grid-toolbar{display:flex;flex-wrap:wrap;gap:var(--cui-data-grid-spacing);align-items:center;min-height:48px;padding:var(--cui-data-grid-spacing);border-bottom:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-toolbar-actions{display:flex;gap:.25rem;align-items:center}.data-grid .data-grid-toolbar-search{margin-inline-start:auto}.data-grid .data-grid-viewport{position:relative;flex:1 1 auto;min-height:0;max-height:var(--cui-data-grid-viewport-max-height);overflow-y:auto;overflow-anchor:none}.data-grid .data-grid-cell-editor{width:100%;min-width:4rem}.data-grid .data-grid-editor-popup{position:absolute;z-index:4;padding:.25rem;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid [role=grid] :is(td,th):focus-visible{outline:var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);outline-offset:calc(-1 * var(--cui-data-grid-focus-ring-width))}.data-grid .data-grid-viewport:focus-visible{outline:0}.data-grid .data-grid-header{position:sticky;top:0;z-index:2;background-color:var(--cui-data-grid-header-bg);box-shadow:var(--cui-data-grid-header-shadow)}.data-grid .data-grid-header tr:not(.data-grid-filter-row)>th{height:48px;vertical-align:middle}.data-grid .data-grid-filter-row>th{padding-top:0;font-weight:400}.data-grid .data-grid-header th[data-coreui-draggable]{cursor:grab}.data-grid .data-grid-header-cell{display:flex;align-items:center;gap:.25rem}.data-grid .data-grid-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-grid .btn-ghost{--cui-btn-padding-x:var(--cui-btn-padding-y);--cui-btn-line-height:1}.data-grid .data-grid-menu-button{margin-inline-start:auto}.data-grid .data-grid-menu{position:absolute;z-index:4;min-width:var(--cui-data-grid-menu-min-width);padding:.25rem 0;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem .75rem;font:inherit;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0}.data-grid .data-grid-menu-item:focus-visible,.data-grid .data-grid-menu-item:hover{background-color:var(--cui-data-grid-menu-item-hover-bg)}.data-grid .data-grid-menu-item[aria-disabled=true]{color:var(--cui-secondary-color,#6c757d);cursor:default;background:0 0}.data-grid .data-grid-filter-menu{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.5rem;min-width:var(--cui-data-grid-menu-min-width);max-width:18rem;padding:.75rem;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-filter-menu>div{display:flex;flex-direction:column;gap:.5rem}.data-grid .data-grid-filter-menu-condition{display:flex;flex-direction:column;gap:.25rem}.data-grid .data-grid-filter-menu-join{display:flex;gap:1rem}.data-grid .data-grid-filter-menu-join label{display:flex;gap:.375rem;align-items:center}.data-grid .data-grid-filter-menu-values{display:flex;flex-direction:column;gap:.25rem;max-height:14rem;overflow-y:auto}.data-grid .data-grid-filter-menu-footer{display:flex;gap:.5rem;justify-content:flex-end}.data-grid .data-grid-column-chooser{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.5rem;min-width:var(--cui-data-grid-menu-min-width);max-width:18rem;max-height:20rem;padding:.75rem;overflow-y:auto;background-color:var(--cui-data-grid-menu-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color);border-radius:var(--cui-border-radius,.375rem);box-shadow:var(--cui-data-grid-menu-shadow)}.data-grid .data-grid-column-chooser-option{display:flex;gap:.375rem;align-items:center;margin-bottom:0}.data-grid .data-grid-column-chooser-footer{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.25rem;margin-top:.25rem;border-top:var(--cui-border-width,1px) solid var(--cui-data-grid-menu-border-color)}.data-grid .data-grid-filter-button{position:relative;margin-inline-start:auto}.data-grid .data-grid-filter-button~.data-grid-menu-button{margin-inline-start:0}.data-grid .data-grid-filter-button-filtered::after{position:absolute;inset-block-start:0.125rem;inset-inline-end:0.125rem;width:.375rem;height:.375rem;content:"";background-color:var(--cui-primary,#321fdb);border-radius:50%}.data-grid .data-grid-menu-item-icon{display:inline-flex;opacity:.75}.data-grid .data-grid-menu-item-icon svg{width:1em;height:1em}.data-grid .data-grid-menu-divider{height:var(--cui-border-width,1px);margin:.25rem 0;background-color:var(--cui-data-grid-menu-border-color)}.data-grid .data-grid-dragging{opacity:.5}.data-grid.data-grid-drag-active{cursor:grabbing;-webkit-user-select:none;user-select:none}.data-grid .data-grid-drag-ghost{position:fixed;top:0;left:0;z-index:1080;display:flex;align-items:center;max-width:16rem;padding:0 var(--cui-data-grid-cell-padding-x,.5rem);overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;background-color:var(--cui-data-grid-pinned-bg);border:var(--cui-border-width,1px) solid var(--cui-data-grid-drop-indicator);border-radius:var(--cui-border-radius,.375rem);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);transform:translate(-9999px,-9999px);opacity:.9}.data-grid .data-grid-drag-ghost-settle{transition:transform var(--cui-data-grid-drag-transition),opacity var(--cui-data-grid-drag-transition)}.data-grid .data-grid-drop-indicator{position:fixed;z-index:1080;pointer-events:none;background-color:var(--cui-data-grid-drop-indicator);transition:top var(--cui-data-grid-drag-transition),left var(--cui-data-grid-drag-transition)}.data-grid .data-grid-drag-preview{transition:transform var(--cui-data-grid-drag-transition)}@media (prefers-reduced-motion:reduce){.data-grid :is(.data-grid-drop-indicator,.data-grid-drag-preview,.data-grid-drag-ghost-settle){transition:none}}.data-grid .data-grid-drop-indicator-x{width:.125rem}.data-grid .data-grid-drop-indicator-y{height:.125rem}.data-grid .data-grid-cell-selected{position:relative;background-color:var(--cui-data-grid-cell-selected-bg)}.data-grid .data-grid-cell-selected::after{position:absolute;inset:0;pointer-events:none;content:"";border:0 solid var(--cui-data-grid-cell-selected-border-color)}.data-grid .data-grid-cell-selected-top::after{border-top-width:var(--cui-data-grid-cell-selected-border-width)}.data-grid .data-grid-cell-selected-right::after{border-right-width:var(--cui-data-grid-cell-selected-border-width)}.data-grid .data-grid-cell-selected-bottom::after{border-bottom-width:var(--cui-data-grid-cell-selected-border-width)}.data-grid .data-grid-cell-selected-left::after{border-left-width:var(--cui-data-grid-cell-selected-border-width)}.data-grid .data-grid-row-handle-cell{width:var(--cui-data-grid-row-handle-width);padding-inline:0;text-align:center}.data-grid .data-grid-row-handle{display:inline-flex;color:var(--cui-data-grid-resizer-grip-color-hover);cursor:grab;touch-action:none}.data-grid .data-grid-select-cell{width:var(--cui-data-grid-select-cell-width);text-align:center}.data-grid .data-grid-sort-button{display:inline-flex;align-items:center;gap:var(--cui-data-grid-sorter-margin);padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:0}.data-grid .data-grid-sort-icon{display:inline-flex;font-size:.875em;opacity:0}.data-grid .data-grid-sort-icon svg{width:1em;height:1em}.data-grid .data-grid-sortable[aria-sort] .data-grid-sort-icon{opacity:1}.data-grid[data-coreui-sorter-visibility=always] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon{opacity:var(--cui-data-grid-sorter-opacity)}.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon,.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon{opacity:var(--cui-data-grid-sorter-opacity)}.data-grid .data-grid-viewport>.table{margin-bottom:0;table-layout:fixed}.data-grid:not(.data-grid-auto-row-height) .data-grid-viewport>.table>tbody>tr:not(.data-grid-empty)>td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-grid.data-grid-pinned .data-grid-viewport,.data-grid.data-grid-resizable .data-grid-viewport{overflow-x:auto}.data-grid.data-grid-pinned .table,.data-grid.data-grid-resizable .table{width:max-content;min-width:100%}.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end){position:relative}.data-grid.data-grid-pinned .table{border-collapse:separate;border-spacing:0}.data-grid .data-grid-cell-pinned-end,.data-grid .data-grid-cell-pinned-start{position:sticky;z-index:1;background-color:var(--cui-data-grid-pinned-bg)}.data-grid .data-grid-header .data-grid-cell-pinned-end,.data-grid .data-grid-header .data-grid-cell-pinned-start{z-index:3}.data-grid .data-grid-cell-pinned-end-first,.data-grid .data-grid-cell-pinned-start-last{position:sticky}.data-grid .data-grid-cell-pinned-end-first::after,.data-grid .data-grid-cell-pinned-start-last::after{position:absolute;top:0;bottom:0;width:var(--cui-data-grid-pinned-border-width);pointer-events:none;content:""}.data-grid .data-grid-cell-pinned-start-last::after{inset-inline-end:0;background:var(--cui-data-grid-pinned-border-color)}.data-grid .data-grid-cell-pinned-end-first::after{inset-inline-start:0;background:var(--cui-data-grid-pinned-border-color)}.data-grid .data-grid-resizer{position:absolute;top:0;right:calc(-.5 * var(--cui-data-grid-resizer-width));z-index:1;display:flex;align-items:center;justify-content:center;width:var(--cui-data-grid-resizer-width);height:100%;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.data-grid .data-grid-resizer::after{width:2px;height:var(--cui-data-grid-resizer-grip-height);content:"";background-color:var(--cui-data-grid-resizer-grip-color);transition:background-color .15s ease}.data-grid .data-grid-resizer.data-grid-resizer-active::after,.data-grid .data-grid-resizer:hover::after{background-color:var(--cui-data-grid-resizer-grip-color-hover)}.data-grid .data-grid-spacer>td{padding:0;border:0}.data-grid .data-grid-viewport>.table-striped>tbody>tr:nth-of-type(odd)>*{--cui-table-color-type:initial;--cui-table-bg-type:initial}.data-grid .data-grid-viewport>.table-striped>tbody>tr.data-grid-row-odd>*{--cui-table-color-type:var(--cui-table-striped-color);--cui-table-bg-type:var(--cui-table-striped-bg)}.data-grid .data-grid-viewport>.table>tbody>tr:last-child>*{border-bottom-width:0}.data-grid .data-grid-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background-color:var(--cui-data-grid-loading-bg)}.data-grid .data-grid-loading-more{position:sticky;inset-inline:0;bottom:0;z-index:3;display:flex;justify-content:center;padding:var(--cui-data-grid-spacing);background-color:var(--cui-data-grid-loading-bg)}.data-grid .data-grid-tooltip{position:fixed;z-index:1080;max-width:12rem;padding:.25rem .5rem;font-size:.875rem;line-height:1.4;color:var(--cui-body-bg,#fff);text-align:center;pointer-events:none;background-color:var(--cui-emphasis-color,#000);border-radius:var(--cui-border-radius,.375rem)}.data-grid .data-grid-empty>td{padding:2rem 1rem;color:var(--cui-secondary-color,#6c757d);text-align:center}.data-grid .data-grid-pagination{display:flex;flex-wrap:wrap;gap:var(--cui-data-grid-spacing);align-items:center;min-height:48px;padding:var(--cui-data-grid-spacing);border-top:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-pagination.data-grid-pagination-top{border-top:0;border-bottom:var(--cui-border-width,1px) solid var(--cui-border-color,#dee2e6)}.data-grid .data-grid-pagination .pagination{margin-bottom:0}.data-grid .data-grid-pagination .data-grid-pagination-info{margin-inline-start:auto;color:var(--cui-secondary-color,#6c757d)}.data-grid .data-grid-pagination .form-select{width:auto}@media print{.data-grid-print-root{position:absolute;inset:0 0 auto;z-index:2000;background-color:#fff}.data-grid-print-root h1{margin-bottom:1rem;font-size:1.25rem}.data-grid-print-root table{width:100%;border-collapse:collapse}.data-grid-print-root :is(th,td){padding:.25rem .5rem;text-align:start;border:1px solid #000}.data-grid-print-root thead{display:table-header-group}.data-grid-print-root tr{break-inside:avoid}body:has(.data-grid-print-root)>:not(.data-grid-print-root){display:none!important}}
 /*# sourceMappingURL=data-grid.min.css.map */