@highcharts/grid-pro 2.1.1 → 2.2.0

package/css/grid-pro.css

@@ -1,12 +1,15 @@
+
+/* SPDX-License-Identifier: LicenseRef-Highcharts */
+
 /**
- * @license Highcharts Grid Pro v2.1.1
+ * @license Highcharts Grid Lite v2.2.0
  *
  * (c) 2009-2025 Highsoft AS
  *
- * License: www.highcharts.com/license
+ * A commercial license may be required depending on use.
+ * See www.highcharts.com/license
  */
 
-
 /*  ==== Start Grid Color Scheme  ==== */
 .hcg-container,
 .highcharts-light .hcg-container {
@@ -110,7 +113,8 @@
 
 /* ==== Start Grid Variables ==== */
 .hcg-container {
-    /* Fonts */
+    --ig-hover-opacity: var(--hcg-hover-opacity, 100%);
+    --ig-sync-opacity: var(--hcg-sync-opacity, var(--ig-hover-opacity));
 
     /* Global fonts */
     --ig-default-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
@@ -128,14 +132,6 @@
     --ig-link-hovered-text-decoration: var(--hcg-link-hovered-text-decoration, none);
     --ig-link-font-weight: var(--hcg-link-font-weight, inherit);
 
-    /* Header fonts */
-    --ig-header-font-weight: var(--hcg-header-font-weight, var(--ig-font-weight));
-    --ig-header-font-size: var(--hcg-header-font-size, var(--ig-font-size));
-    --ig-header-font-family: var(--hcg-header-font-family, var(--ig-font-family));
-    --ig-header-color: var(--hcg-header-color, var(--ig-color));
-    --ig-header-font: var(--ig-header-font-weight) var(--ig-header-font-size) var(--ig-header-font-family);
-    --ig-header-text-align: var(--hcg-header-text-align, var(--ig-text-align));
-
     /* Caption fonts */
     --ig-caption-font-weight: var(--hcg-caption-font-weight, var(--ig-font-weight));
     --ig-caption-font-size: var(--hcg-caption-font-size, var(--ig-font-size));
@@ -220,119 +216,7 @@
 
     /* Default backgrounds and colors */
     --ig-background: var(--hcg-background, transparent);
-    --ig-row-background: var(--hcg-row-background, transparent);
-    --ig-row-even-background: var(--hcg-row-even-background, var(--ig-row-background));
-    --ig-header-background: var(--hcg-header-background, var(--ig-row-background));
     --ig-pagination-background: var(--hcg-pagination-background, transparent);
-    --ig-row-even-color: var(--hcg-row-even-color, var(--ig-color));
-
-    /* Cell hovered backgrounds and colors */
-    --ig-cell-hovered-background: var(--hcg-cell-hovered-background, var(--hcg-cell-hovered-column-background, var(--ig-cell-hovered-row-background)));
-    --ig-cell-hovered-color: var(--hcg-cell-hovered-color, var(--hcg-cell-hovered-column-color, var(--ig-cell-hovered-row-color, var(--hcg-color))));
-    --ig-cell-even-hovered-background: var(--hcg-cell-hovered-even-background, var(--hcg-cell-hovered-background, var(--hcg-cell-hovered-column-background, var(--ig-cell-hovered-row-even-background))));
-    --ig-cell-even-hovered-color: var(--hcg-cell-even-hovered-color, var(--hcg-cell-hovered-color, var(--hcg-cell-hovered-column-color, var(--ig-cell-hovered-row-even-color))));
-
-    /* Cell hovered horizontal border */
-    --ig-cell-hovered-horizontal-border-width: var(--hcg-cell-hovered-border-width, var(--ig-cell-hovered-column-border-width));
-    --ig-cell-hovered-horizontal-border-style: var(--hcg-cell-hovered-border-style, var(--ig-cell-hovered-column-border-style));
-    --ig-cell-hovered-horizontal-border-color: var(--hcg-cell-hovered-border-color, var(--ig-cell-hovered-column-border-color));
-    --ig-cell-hovered-horizontal-border: var(--ig-cell-hovered-horizontal-border-width) var(--ig-cell-hovered-horizontal-border-style) var(--ig-cell-hovered-horizontal-border-color);
-
-    /* Cell hovered vertical border */
-    --ig-cell-hovered-vertical-border-width: var(--hcg-cell-hovered-border-width, var(--ig-cell-hovered-row-border-width));
-    --ig-cell-hovered-vertical-border-style: var(--hcg-cell-hovered-border-style, var(--ig-cell-hovered-row-border-style));
-    --ig-cell-hovered-vertical-border-color: var(--hcg-cell-hovered-border-color, var(--ig-cell-hovered-row-border-color));
-    --ig-cell-hovered-vertical-border: var(--ig-cell-hovered-vertical-border-width) var(--ig-cell-hovered-vertical-border-style) var(--ig-cell-hovered-vertical-border-color);
-
-    /* Cell hovered row backgrounds and colors */
-    --ig-cell-hovered-row-background: var(--hcg-cell-hovered-row-background, var(--ig-row-background));
-    --ig-cell-hovered-row-color: var(--hcg-cell-hovered-row-color, var(--ig-color));
-    --ig-cell-hovered-row-even-background: var(--hcg-cell-hovered-row-even-background, var(--hcg-cell-hovered-row-background, var(--ig-row-even-background)));
-    --ig-cell-hovered-row-even-color: var(--hcg-cell-hovered-row-even-color, var(--hcg-cell-hovered-row-color, var(--ig-row-even-color)));
-
-    /* Cell hovered row border */
-    --ig-cell-hovered-row-border-width: var(--hcg-cell-hovered-row-border-width, 0);
-    --ig-cell-hovered-row-border-style: var(--hcg-cell-hovered-row-border-style, var(--ig-border-style));
-    --ig-cell-hovered-row-border-color: var(--hcg-cell-hovered-row-border-color, var(--ig-border-color));
-    --ig-cell-hovered-row-border: var(--ig-cell-hovered-row-border-width) var(--ig-cell-hovered-row-border-style) var(--ig-cell-hovered-row-border-color);
-
-    /* Cell hovered column backgrounds and colors */
-    --ig-cell-hovered-column-background: var(--hcg-cell-hovered-column-background, var(--ig-row-background));
-    --ig-cell-hovered-column-color: var(--hcg-cell-hovered-column-color, var(--ig-color));
-    --ig-cell-hovered-column-even-background: var(--hcg-cell-hovered-column-even-background, var(--hcg-cell-hovered-column-background, var(--ig-row-even-background)));
-    --ig-cell-hovered-column-even-color: var(--hcg-cell-hovered-column-even-color, var(--hcg-cell-hovered-column-color, var(--ig-row-even-color)));
-
-    /* Cell hovered column border */
-    --ig-cell-hovered-column-border-width: var(--hcg-cell-hovered-column-border-width, 0);
-    --ig-cell-hovered-column-border-style: var(--hcg-cell-hovered-column-border-style, var(--ig-border-style));
-    --ig-cell-hovered-column-border-color: var(--hcg-cell-hovered-column-border-color, var(--ig-border-color));
-    --ig-cell-hovered-column-border: var(--ig-cell-hovered-column-border-width) var(--ig-cell-hovered-column-border-style) var(--ig-cell-hovered-column-border-color);
-
-    /* Cell hovered header background and color */
-    --ig-cell-hovered-header-background: var(--hcg-cell-hovered-header-background, var(--ig-header-background));
-    --ig-cell-hovered-header-color: var(--hcg-cell-hovered-header-color, var(--ig-header-color));
-
-    /* Cell hovered header border */
-    --ig-cell-hovered-header-border-width: var(--hcg-cell-hovered-header-border-width, 0);
-    --ig-cell-hovered-header-border-style: var(--hcg-cell-hovered-header-border-style, var(--ig-cell-hovered-column-border-style));
-    --ig-cell-hovered-header-border-color: var(--hcg-cell-hovered-header-border-color, var(--ig-cell-hovered-column-border-color));
-    --ig-cell-hovered-header-border: var(--ig-cell-hovered-header-border-width) var(--ig-cell-hovered-header-border-style) var(--ig-cell-hovered-header-border-color);
-
-    /* Header hovered background and color */
-    --ig-header-hovered-background: var(--hcg-header-hovered-background, var(--ig-header-background));
-    --ig-header-hovered-color: var(--hcg-header-hovered-color, var(--ig-header-color));
-
-    /* Cell synced backgrounds and colors */
-    --ig-cell-synced-background: var(--hcg-cell-synced-background, var(--ig-cell-hovered-background));
-    --ig-cell-synced-color: var(--hcg-cell-synced-color, var(--ig-cell-hovered-color));
-    --ig-cell-even-synced-background: var(--hcg-cell-synced-even-background, var(--ig-cell-even-hovered-background));
-    --ig-cell-even-synced-color: var(--hcg-cell-even-synced-color, var(--ig-cell-even-hovered-color));
-
-    /* Cell synced horizontal border */
-    --ig-cell-synced-horizontal-border-width: var(--hcg-cell-synced-border-width, var(--hcg-cell-hovered-border-width, 0));
-    --ig-cell-synced-horizontal-border-style: var(--hcg-cell-synced-border-style, var(--hcg-cell-hovered-border-style, var(--ig-border-style)));
-    --ig-cell-synced-horizontal-border-color: var(--hcg-cell-synced-border-color, var(--hcg-cell-hovered-border-color, var(--ig-border-color)));
-    --ig-cell-synced-horizontal-border: var(--ig-cell-synced-horizontal-border-width) var(--ig-cell-synced-horizontal-border-style) var(--ig-cell-synced-horizontal-border-color);
-
-    /* Cell synced vertical border */
-    --ig-cell-synced-vertical-border-width: var(--hcg-cell-synced-border-width, var(--hcg-cell-hovered-border-width, 0));
-    --ig-cell-synced-vertical-border-style: var(--hcg-cell-synced-border-style, var(--hcg-cell-hovered-border-style, var(--ig-border-style)));
-    --ig-cell-synced-vertical-border-color: var(--hcg-cell-synced-border-color, var(--hcg-cell-hovered-border-color, var(--ig-border-color)));
-    --ig-cell-synced-vertical-border: var(--ig-cell-synced-vertical-border-width) var(--ig-cell-synced-vertical-border-style) var(--ig-cell-synced-vertical-border-color);
-
-    /* Cell synced row backgrounds and colors */
-    --ig-cell-synced-row-background: var(--hcg-cell-synced-row-background, var(--ig-cell-hovered-row-background));
-    --ig-cell-synced-row-color: var(--hcg-cell-synced-row-color, var(--ig-cell-hovered-row-color));
-    --ig-cell-synced-row-even-background: var(--hcg-cell-synced-row-even-background, var(--ig-cell-hovered-row-even-background));
-    --ig-cell-synced-row-even-color: var(--hcg-cell-synced-row-even-color, var(--ig-cell-hovered-row-even-color));
-
-    /* Cell synced row border */
-    --ig-cell-synced-row-border-width: var(--hcg-cell-synced-row-border-width, var(--ig-cell-hovered-row-border-width));
-    --ig-cell-synced-row-border-style: var(--hcg-cell-synced-row-border-style, var(--ig-cell-hovered-row-border-style));
-    --ig-cell-synced-row-border-color: var(--hcg-cell-synced-row-border-color, var(--ig-cell-hovered-row-border-color));
-    --ig-cell-synced-row-border: var(--ig-cell-synced-row-border-width) var(--ig-cell-synced-row-border-style) var(--ig-cell-synced-row-border-color);
-
-    /* Cell synced column backgrounds and colors */
-    --ig-cell-synced-column-background: var(--hcg-cell-synced-column-background, var(--ig-cell-hovered-column-background));
-    --ig-cell-synced-column-color: var(--hcg-cell-synced-column-color, var(--ig-cell-hovered-column-color));
-    --ig-cell-synced-column-even-background: var(--hcg-cell-synced-column-even-background, var(--hcg-cell-synced-column-background, var(--ig-cell-hovered-column-even-background)));
-    --ig-cell-synced-column-even-color: var(--hcg-cell-synced-column-even-color, var(--ig-cell-hovered-column-even-color));
-
-    /* Cell synced column border */
-    --ig-cell-synced-column-border-width: var(--hcg-cell-synced-column-border-width, var(--ig-cell-hovered-column-border-width));
-    --ig-cell-synced-column-border-style: var(--hcg-cell-synced-column-border-style, var(--ig-cell-hovered-column-border-style));
-    --ig-cell-synced-column-border-color: var(--hcg-cell-synced-column-border-color, var(--ig-cell-hovered-column-border-color));
-    --ig-cell-synced-column-border: var(--ig-cell-synced-column-border-width) var(--ig-cell-synced-column-border-style) var(--ig-cell-synced-column-border-color);
-
-    /* Cell synced header background and color */
-    --ig-cell-synced-header-background: var(--hcg-cell-synced-header-background, var(--ig-cell-hovered-header-background));
-    --ig-cell-synced-header-color: var(--hcg-cell-synced-header-color, var(--ig-cell-hovered-header-color));
-
-    /* Cell synced header border */
-    --ig-cell-synced-header-border-width: var(--hcg-cell-synced-header-border-width, var(--ig-cell-hovered-header-border-width));
-    --ig-cell-synced-header-border-style: var(--hcg-cell-synced-header-border-style, var(--ig-cell-synced-column-border-style));
-    --ig-cell-synced-header-border-color: var(--hcg-cell-synced-header-border-color, var(--ig-cell-synced-column-border-color));
-    --ig-cell-synced-header-border: var(--ig-cell-synced-header-border-width) var(--ig-cell-synced-header-border-style) var(--ig-cell-synced-header-border-color);
 
     /* Input styles */
     --ig-input-font-weight: var(--hcg-input-font-weight, normal);
@@ -430,6 +314,7 @@
     box-sizing: border-box;
     font: var(--ig-font);
     color-scheme: light dark;
+    max-height: inherit;
 }
 
 .highcharts-light .hcg-container {
@@ -444,8 +329,11 @@
     box-sizing: border-box;
 }
 
-.hcg-column {
-    width: 0;
+.hcg-container:has(.hcg-no-data) {
+    justify-content: center;
+    align-items: center;
+    padding: var(--ig-description-padding);
+    text-align: var(--ig-description-text-align);
 }
 
 /* Links */
@@ -460,16 +348,17 @@
     text-decoration: var(--ig-link-hovered-text-decoration);
 }
 
-/* Table */
+/* ----------------------------------------------------------
+  START BASE TABLE ELEMENTS
+------------------------------------------------------------ */
+
+/* <table> */
 .hcg-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     overflow: hidden;
-    border: var(--ig-border);
-    background: var(--ig-background);
     table-layout: fixed;
-    border-radius: var(--ig-border-radius);
     flex: 1;
 }
 
@@ -479,49 +368,118 @@
     min-height: 0;
 }
 
-/* Table Header */
+/* <thead> */
 .hcg-table.hcg-virtualization thead {
     display: block;
 }
 
-.hcg-table thead {
-    background-color: var(--ig-header-background);
-}
-
 .hcg-table thead th {
     position: relative;
-    border-right: var(--ig-header-column-border);
-    border-bottom: var(--ig-header-row-border);
-    background: var(--ig-header-background);
-    padding: var(--ig-header-padding);
-    color: var(--ig-header-color);
 }
 
-.hcg-table thead th .hcg-header-cell-content {
-    width: 100%;
-    font: var(--ig-header-font);
-    text-align: var(--ig-header-text-align);
+/* <tbody> */
+.hcg-table.hcg-scrollable-content tbody {
+    height: 100%;
+    overflow: auto;
+    min-height: 0;
+    flex: 1;
+}
+
+.hcg-table.hcg-virtualization tbody {
     display: block;
+    position: relative;
+}
+
+.hcg-table tbody tr {
     overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0;
-    padding: 0;
-    user-select: none; /* Standard syntax */
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
+    width: 100%;
 }
 
-.hcg-table thead th .hcg-header-cell-content span {
-    flex: 1;
+.hcg-table tbody tr.hcg-mocked-row td,
+.hcg-table tbody tr td {
+    position: relative;
+    line-height: 1em;
     overflow: hidden;
+}
+
+.hcg-table tbody tr.hcg-mocked-row td {
+    white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.hcg-resizable-content thead,
-.hcg-resizable-content tbody {
+.hcg-table .hcg-last-header-cell-in-row,
+.hcg-table td:last-of-type {
+    border-right: none;
+}
+
+.hcg-table tr:last-of-type td {
+    border-bottom: none;
+}
+
+.hcg-table.hcg-scrollable-content tbody tr {
     display: block;
-    overflow: hidden;
-    width: 100%;
+}
+
+.hcg-table.hcg-virtualization tbody tr {
+    position: absolute;
+}
+
+.hcg-table tbody.hcg-rows-content-nowrap td {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.hcg-table tbody td:focus {
+    outline: none;
+}
+
+/* ----------------------------------------------------------
+  START THEMABLE TABLE ELEMENTS
+------------------------------------------------------------ */
+
+/* <table> */
+.hcg-table {
+    border: var(--ig-border);
+    background: var(--ig-background);
+    border-radius: var(--ig-border-radius);
+}
+
+/* <thead> */
+.hcg-table thead {
+    background-color: var(--ig-header-background);
+}
+
+.hcg-table thead th {
+    --ig-header-column-background: var(--hcg-column-background);
+    --ig-header-background: var(--hcg-header-background, var(--hcg-cell-background, var(--ig-header-column-background, transparent)));
+    --ig-header-column-color: var(--hcg-column-color, var(--hcg-cell-color, var(--ig-color, inherit)));
+    --ig-header-base-color: var(--hcg-header-color, var(--ig-header-column-color));
+    --ig-header-current-color: var(--ig-header-base-color);
+
+    border-right: var(--ig-header-column-border);
+    border-bottom: var(--ig-header-row-border);
+    padding: var(--ig-header-padding);
+    background: var(--ig-header-background);
+    color: var(--ig-header-current-color);
+}
+
+.hcg-table thead th:nth-child(even) {
+    --ig-header-column-background: var(--hcg-column-even-background, var(--hcg-column-background));
+    --ig-header-background: var(--hcg-header-even-background, var(--hcg-header-background, var(--hcg-cell-background, var(--ig-header-column-background, transparent))));
+    --ig-header-column-color: var(--hcg-column-even-color, var(--hcg-column-color, var(--hcg-cell-color, var(--ig-color, inherit))));
+    --ig-header-base-color: var(--hcg-header-even-color, var(--hcg-header-color, var(--ig-header-column-color)));
+    --ig-header-current-color: var(--ig-header-base-color);
+}
+
+.hcg-table thead th .hcg-header-cell-content {
+    --ig-header-font-weight: var(--hcg-header-font-weight, var(--hcg-cell-font-weight, var(--ig-font-weight)));
+    --ig-header-font-size: var(--hcg-header-font-size, var(--hcg-cell-font-size, var(--ig-font-size)));
+    --ig-header-font-family: var(--hcg-header-font-family, var(--hcg-cell-font-family, var(--ig-font-family)));
+    --ig-header-font: var(--ig-header-font-weight) var(--ig-header-font-size) var(--ig-header-font-family);
+    --ig-header-text-align: var(--hcg-header-text-align, var(--hcg-cell-text-align, var(--ig-text-align)));
+
+    font: var(--ig-header-font);
+    text-align: var(--ig-header-text-align);
 }
 
 .hcg-table thead tr:first-of-type th:first-child {
@@ -532,6 +490,38 @@
     border-top-right-radius: var(--ig-border-radius);
 }
 
+.hcg-table thead th:focus-visible {
+    outline: none;
+    box-shadow: inset var(--ig-focus-ring);
+}
+
+/* Start header hover & sync */
+.hcg-container .hcg-table th:hover {
+    --ig-header-hover-opacity: var(--hcg-header-hover-opacity, var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))));
+    --ig-header-hover-color:
+        color-mix(
+            in srgb,
+            var(--hcg-header-hovered-background, var(--hcg-header-hover-background, var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background))))) var(--ig-header-hover-opacity),
+            var(--ig-header-background) calc(100% - var(--ig-header-hover-opacity))
+        );
+
+    background: var(--ig-header-hover-color);
+    --ig-header-color:
+        var(
+            --hcg-header-hovered-color,
+            var(
+                --hcg-header-hover-color,
+                var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color)))
+            )
+        );
+    --ig-header-current-color: var(--ig-header-color);
+
+    color: var(--ig-header-current-color);
+}
+
+/* End header hover & sync */
+
+/* <tbody> */
 .hcg-table tbody tr:last-of-type td:first-child {
     border-bottom-left-radius: var(--ig-border-radius);
 }
@@ -540,6 +530,253 @@
     border-bottom-right-radius: var(--ig-border-radius);
 }
 
+.hcg-table tbody {
+    border-bottom-left-radius: var(--hcg-border-radius);
+    border-bottom-right-radius: var(--hcg-border-radius);
+}
+
+.hcg-table tbody tr {
+    --ig-row-background-current: var(--hcg-row-background);
+    --ig-row-color-current: var(--hcg-row-color);
+}
+
+.hcg-table tbody tr.hcg-row-even {
+    --ig-row-background-current: var(--hcg-row-even-background, var(--hcg-row-background));
+    --ig-row-color-current: var(--hcg-row-even-color, var(--hcg-row-color));
+}
+
+.hcg-table tbody tr.hcg-mocked-row td,
+.hcg-table tbody tr td {
+    --ig-cell-column-background: var(--hcg-column-background);
+    --ig-cell-column-color: var(--hcg-column-color);
+    --ig-cell-base-background: var(--hcg-cell-background, var(--ig-row-background-current, var(--ig-cell-column-background, transparent)));
+    --ig-column-layer: var(--ig-cell-base-background);
+    --ig-cell-hover-background-helper: var(--hcg-cell-hovered-background, var(--hcg-cell-hover-background));
+    --ig-cell-hover-background: var(--ig-cell-hover-background-helper, var(--ig-row-hover-color, var(--ig-column-layer)));
+    --ig-cell-hover-opacity-helper: var(--hcg-cell-hover-opacity);
+    --ig-cell-hover-opacity: var(--ig-cell-hover-opacity-helper, var(--ig-hover-opacity));
+    --ig-cell-active-opacity: var(--ig-cell-hover-opacity);
+    --ig-cell-sync-opacity: var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--ig-cell-hover-opacity)));
+    --ig-cell-base-color: var(--hcg-cell-color, var(--ig-row-color-current, var(--ig-cell-column-color, var(--ig-color, inherit))));
+    --ig-column-text-layer: var(--ig-cell-base-color);
+    --ig-row-hover-text-color: var(--ig-column-text-layer);
+    --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+    --ig-cell-font-weight: var(--hcg-cell-font-weight, var(--ig-font-weight));
+    --ig-cell-font-size: var(--hcg-cell-font-size, var(--ig-font-size));
+    --ig-cell-font-family: var(--hcg-cell-font-family, var(--ig-font-family));
+    --ig-cell-font: var(--ig-cell-font-weight) var(--ig-cell-font-size) var(--ig-cell-font-family);
+    --ig-cell-text-align: var(--hcg-cell-text-align, var(--ig-text-align));
+
+    background: var(--ig-column-layer);
+    color: var(--ig-cell-hover-text-color);
+    border-right: var(--ig-column-border);
+    border-bottom: var(--ig-row-border);
+    padding: var(--ig-padding);
+    font: var(--ig-cell-font);
+    text-align: var(--ig-cell-text-align);
+}
+
+.hcg-table tbody tr td:nth-child(even) {
+    --ig-cell-column-background: var(--hcg-column-even-background, var(--hcg-column-background));
+    --ig-cell-column-color: var(--hcg-column-even-color, var(--hcg-column-color));
+}
+
+.hcg-table tbody td:focus {
+    box-shadow: inset var(--ig-focus-ring);
+}
+
+/* Start column hover & sync */
+.hcg-container .hcg-table td.hcg-hovered-column {
+    --ig-column-layer:
+        color-mix(
+            in srgb,
+            var(--hcg-cell-hovered-column-background, var(--hcg-column-hover-background, var(--ig-cell-base-background))) var(--hcg-column-hover-opacity, var(--ig-hover-opacity)),
+            var(--ig-cell-base-background) calc(100% - var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))
+        );
+    --ig-column-text-layer: var(--hcg-cell-hovered-column-color, var(--hcg-column-hover-color, var(--ig-cell-base-color)));
+}
+
+.hcg-container .hcg-table td.hcg-synced-column {
+    --ig-column-layer:
+        color-mix(
+            in srgb,
+            var(
+                --hcg-cell-synced-column-background,
+                var(--hcg-cell-hovered-column-background, var(--hcg-column-sync-background, var(--hcg-column-hover-background, var(--ig-cell-base-background))))
+            ) var(--hcg-column-sync-opacity, var(--hcg-sync-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))),
+            var(--ig-cell-base-background)
+            calc(100% - var(--hcg-column-sync-opacity, var(--hcg-sync-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))))
+        );
+    --ig-column-text-layer:
+        var(
+            --hcg-cell-synced-column-color,
+            var(--hcg-cell-hovered-column-color, var(--hcg-column-sync-color, var(--hcg-column-hover-color, var(--ig-cell-base-color))))
+        );
+}
+
+.hcg-container .hcg-table th.hcg-hovered-column:not(:hover) {
+    --ig-header-column-hover-color:
+        color-mix(
+            in srgb,
+            var(--hcg-cell-hovered-header-background, var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background)))) var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))),
+            var(--ig-header-background) calc(100% - var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))))
+        );
+    --ig-header-color: var(--hcg-cell-hovered-header-color, var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color))));
+    --ig-header-current-color: var(--ig-header-color);
+
+    background: var(--ig-header-column-hover-color);
+    color: var(--ig-header-current-color);
+}
+
+.hcg-container .hcg-table th.hcg-synced-column:not(:hover) {
+    --ig-header-sync-opacity:
+        var(
+            --hcg-header-sync-opacity,
+            var(
+                --hcg-column-sync-header-opacity,
+                var(--hcg-sync-opacity, var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))))
+            )
+        );
+    --ig-header-column-hover-color:
+        color-mix(
+            in srgb,
+            var(
+                --hcg-cell-synced-header-background,
+                var(
+                    --hcg-cell-hovered-header-background,
+                    var(
+                        --hcg-column-sync-header-background,
+                        var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background)))
+                    )
+                )
+            ) var(--ig-header-sync-opacity),
+            var(--ig-header-background)
+            calc(
+                100% - var(
+                    --ig-header-sync-opacity
+                )
+            )
+        );
+    --ig-header-color:
+        var(
+            --hcg-cell-synced-header-color,
+            var(
+                --hcg-cell-hovered-header-color,
+                var(--hcg-column-sync-header-color, var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color))))
+            )
+        );
+    --ig-header-current-color: var(--ig-header-color);
+
+    background: var(--ig-header-column-hover-color);
+    color: var(--ig-header-current-color);
+}
+
+/* End column hover & sync */
+
+/* Start row hover & sync */
+.hcg-container .hcg-table tr:hover td {
+    --ig-row-hover-color:
+        color-mix(
+            in srgb,
+            var(--hcg-cell-hovered-row-background, var(--hcg-row-hover-background, var(--ig-column-layer))) var(--hcg-row-hover-opacity, var(--ig-hover-opacity)),
+            var(--ig-column-layer) calc(100% - var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))
+        );
+    --ig-row-hover-text-color: var(--hcg-cell-hovered-row-color, var(--hcg-row-hover-color, var(--ig-column-text-layer)));
+    --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+
+    background: var(--ig-row-hover-color);
+    color: var(--ig-cell-hover-text-color);
+}
+
+.hcg-container .hcg-table tr.hcg-synced-row td {
+    --ig-row-hover-color:
+        color-mix(
+            in srgb,
+            var(
+                --hcg-cell-synced-row-background,
+                var(--hcg-cell-hovered-row-background, var(--hcg-row-sync-background, var(--hcg-row-hover-background, var(--ig-column-layer))))
+            )
+            var(--hcg-row-sync-opacity, var(--hcg-sync-opacity, var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))),
+            var(--ig-column-layer)
+            calc(100% - var(--hcg-row-sync-opacity, var(--hcg-sync-opacity, var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))))
+        );
+    --ig-row-hover-text-color:
+        var(
+            --hcg-cell-synced-row-color,
+            var(--hcg-cell-hovered-row-color, var(--hcg-row-sync-color, var(--hcg-row-hover-color, var(--ig-column-text-layer))))
+        );
+    --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+
+    background: var(--ig-row-hover-color);
+    color: var(--ig-cell-hover-text-color);
+}
+
+/* End row hover & sync */
+
+/* Start cell hover & sync */
+.hcg-container .hcg-table td:hover,
+.hcg-container .hcg-table tr:hover td:hover,
+.hcg-container .hcg-table td.hcg-hovered-column:hover {
+    --ig-cell-hover-layer:
+        color-mix(
+            in srgb,
+            var(--ig-cell-hover-background) var(--ig-cell-hover-opacity),
+            var(--ig-row-hover-color, var(--ig-column-layer)) calc(100% - var(--ig-cell-hover-opacity))
+        );
+    --ig-cell-hover-text-color: var(--hcg-cell-hovered-color, var(--hcg-cell-hover-color, var(--ig-row-hover-text-color)));
+
+    background: var(--ig-cell-hover-layer);
+    color: var(--ig-cell-hover-text-color);
+}
+
+.hcg-container .hcg-table tr.hcg-synced-row td.hcg-synced-column {
+    --ig-cell-hover-layer:
+        color-mix(
+            in srgb,
+            var(
+                --hcg-cell-synced-background,
+                var(
+                    --hcg-cell-hovered-background,
+                    var(--hcg-cell-sync-background, var(--hcg-cell-hover-background, var(--ig-row-hover-color, var(--ig-column-layer))))
+                )
+            ) var(--hcg-cell-synced-opacity, var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--hcg-cell-hover-opacity, var(--ig-cell-hover-opacity))))),
+            var(--ig-row-hover-color, var(--ig-column-layer))
+            calc(100% - var(--hcg-cell-synced-opacity, var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--hcg-cell-hover-opacity, var(--ig-cell-hover-opacity))))))
+        );
+    --ig-cell-hover-text-color:
+        var(
+            --hcg-cell-synced-color,
+            var(--hcg-cell-hovered-color, var(--hcg-cell-sync-color, var(--hcg-cell-hover-color, var(--ig-row-hover-text-color))))
+        );
+
+    background: var(--ig-cell-hover-layer);
+    color: var(--ig-cell-hover-text-color);
+}
+
+/* End cell hover & sync */
+
+/* ----------------------------------------------------------
+  START OTHER ELEMENTS
+------------------------------------------------------------ */
+
+.hcg-table thead th .hcg-header-cell-content {
+    width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    padding: 0;
+    user-select: none; /* Standard syntax */
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+}
+
+.hcg-table thead th .hcg-header-cell-content span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Header cell menu button centered */
 .hcg-header-cell-container.hcg-no-width .hcg-header-cell-menu-icon {
     position: absolute;
@@ -567,7 +804,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    transition: all 0.3s ease;
+
+    /* transition: all 0.3s ease; */
 }
 
 /* Generic button styling for Grid */
@@ -619,7 +857,7 @@
     display: flex;
     overflow: hidden;
     align-items: center;
-    gap: 2px;
+    gap: 0;
     max-width: 0;
     margin-left: 4px;
     opacity: 0;
@@ -644,6 +882,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 }
 
 /* Active icon styling - icons that are in an active state */
@@ -651,7 +890,7 @@
     background: var(--ig-button-hover-background);
 }
 
-/* Active indicator dot - positioned at top right of button */
+/* Active indicator dot (filtering) - positioned at top right of button */
 .hcg-active-indicator {
     position: absolute;
     top: 2px;
@@ -663,13 +902,26 @@
     pointer-events: none;
 }
 
-/* Make button relative for absolute positioning of indicator */
-.hcg-header-cell-icons .hcg-button {
-    position: relative;
+.hcg-sort-priority-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 2px;
+    height: 20px;
+    padding: 0 2px;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--ig-icon-header-hover-color);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
 }
 
-.hcg-resizable-content tr {
-    width: 100%;
+.hcg-header-cell-sort-icon .hcg-button:has(.hcg-sort-priority-indicator) {
+    /* Keep header height stable when showing the multi-sort indicator */
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
 
 .hcg-table thead th .hcg-column-resizer {
@@ -721,273 +973,6 @@ th.hcg-column-sortable > .hcg-column-sortable-icon {
     right: 10px;
 }
 
-.hcg-container:has(.hcg-no-data) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-    padding: var(--ig-description-padding);
-    text-align: var(--ig-description-text-align);
-}
-
-/* Table body */
-.hcg-table.hcg-scrollable-content tbody {
-    height: 100%;
-    overflow: auto;
-    min-height: 0;
-    flex: 1;
-}
-
-.hcg-table.hcg-virtualization tbody {
-    display: block;
-    position: relative;
-}
-
-.hcg-table tbody {
-    border-bottom-left-radius: var(--hcg-border-radius);
-    border-bottom-right-radius: var(--hcg-border-radius);
-}
-
-.hcg-table tbody tr {
-    overflow: hidden;
-    width: 100%;
-}
-
-.hcg-table tbody tr td,
-.hcg-table tbody tr.hcg-mocked-row td {
-    border-right: var(--ig-column-border);
-    border-bottom: var(--ig-row-border);
-    text-align: var(--ig-text-align);
-    padding: var(--ig-padding);
-    color: var(--ig-color);
-    font: var(--ig-font);
-    line-height: 1em;
-    overflow: hidden;
-}
-
-.hcg-table tbody tr.hcg-mocked-row td {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.hcg-table .hcg-last-header-cell-in-row,
-.hcg-table td:last-of-type {
-    border-right: none;
-}
-
-.hcg-table tr:last-of-type td {
-    border-bottom: none;
-}
-
-.hcg-table.hcg-scrollable-content tbody tr {
-    display: block;
-}
-
-.hcg-table.hcg-virtualization tbody tr {
-    position: absolute;
-}
-
-.hcg-table tbody.hcg-rows-content-nowrap td {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.hcg-table tbody td:focus,
-.hcg-table thead th:focus-visible {
-    outline: none;
-    box-shadow: inset var(--ig-focus-ring);
-}
-
-/* Header hovered background and color */
-.hcg-table thead tr th.hcg-column-sortable:hover {
-    background: var(--ig-header-hovered-background);
-}
-
-.hcg-table thead th.hcg-column-sortable:hover .hcg-header-cell-content {
-    color: var(--ig-header-hovered-color);
-}
-
-/* Row backgrounds */
-.hcg-table tbody tr td {
-    background: var(--ig-row-background);
-    position: relative;
-}
-
-.hcg-table tbody tr.hcg-row-even td {
-    background: var(--ig-row-even-background);
-    color: var(--ig-row-even-color);
-}
-
-/* Cell hovered and synced shared styles */
-.hcg-table thead th.hcg-hovered-column::before,
-.hcg-table tbody tr:hover td:hover::before,
-.hcg-table tbody tr:hover td::before,
-.hcg-table tbody tr td.hcg-hovered-column::before,
-.hcg-table thead th.hcg-synced-column::before,
-.hcg-table tbody tr.hcg-synced-row td.hcg-synced-cell::before,
-.hcg-table tbody tr.hcg-synced-row td::before,
-.hcg-table tbody tr td.hcg-synced-column::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-}
-
-/* Cell hovered background and color */
-.hcg-table tbody tr:hover td:hover {
-    background: var(--ig-cell-hovered-background);
-    color: var(--ig-cell-hovered-color);
-}
-
-/* Cell hovered border */
-.hcg-table tbody tr:hover td:hover::before {
-    border-top: var(--ig-cell-hovered-vertical-border);
-    border-right: var(--ig-cell-hovered-horizontal-border);
-    border-bottom: var(--ig-cell-hovered-vertical-border);
-    border-left: var(--ig-cell-hovered-horizontal-border);
-}
-
-/* Cell hovered background and color */
-.hcg-table tbody tr.hcg-row-even:hover td:hover {
-    background: var(--ig-cell-even-hovered-background);
-    color: var(--ig-cell-even-hovered-color);
-}
-
-/* Cell hovered row background and color */
-.hcg-table tbody tr:hover td {
-    background: var(--ig-cell-hovered-row-background);
-    color: var(--ig-cell-hovered-row-color);
-}
-
-/* Cell hovered row border */
-.hcg-table tbody tr:hover td::before {
-    border-top: var(--ig-cell-hovered-row-border);
-    border-bottom: var(--ig-cell-hovered-row-border);
-}
-
-/* Cell hovered row background and color */
-.hcg-table tbody tr.hcg-row-even:hover td {
-    background: var(--ig-cell-hovered-row-even-background);
-    color: var(--ig-cell-hovered-row-even-color);
-}
-
-/* Cell hovered column background and color */
-.hcg-table tbody tr td.hcg-hovered-column {
-    background: var(--ig-cell-hovered-column-background);
-    color: var(--ig-cell-hovered-column-color);
-}
-
-/* Cell hovered column border */
-.hcg-table tbody tr td.hcg-hovered-column::before {
-    border-left: var(--ig-cell-hovered-column-border);
-    border-right: var(--ig-cell-hovered-column-border);
-}
-
-/* Cell hovered column background and color */
-.hcg-table tbody tr.hcg-row-even td.hcg-hovered-column {
-    background: var(--ig-cell-hovered-column-even-background);
-    color: var(--ig-cell-hovered-column-even-color);
-}
-
-/* Cell hovered header background */
-.hcg-table thead th.hcg-hovered-column {
-    background: var(--ig-cell-hovered-header-background);
-}
-
-/* Cell hovered header border */
-.hcg-table thead th.hcg-hovered-column::before {
-    border-left: var(--ig-cell-hovered-header-border);
-    border-right: var(--ig-cell-hovered-header-border);
-}
-
-/* Cell hovered header color */
-.hcg-table thead th.hcg-hovered-column .hcg-header-cell-content {
-    color: var(--ig-cell-hovered-header-color);
-}
-
-/* Cell synced background and color */
-.hcg-table tbody tr.hcg-synced-row td.hcg-synced-column {
-    background: var(--ig-cell-synced-background);
-    color: var(--ig-cell-synced-color);
-}
-
-/* Cell synced border */
-.hcg-table tbody tr.hcg-synced-row td.hcg-synced-column::before {
-    border-top: var(--ig-cell-synced-vertical-border);
-    border-right: var(--ig-cell-synced-horizontal-border);
-    border-bottom: var(--ig-cell-synced-vertical-border);
-    border-left: var(--ig-cell-synced-horizontal-border);
-}
-
-/* Cell synced background and color */
-.hcg-table tbody tr.hcg-row-even.hcg-synced-row td.hcg-synced-column {
-    background: var(--ig-cell-even-synced-background);
-    color: var(--ig-cell-even-synced-color);
-}
-
-/* Cell synced row background and color */
-.hcg-table tbody tr.hcg-synced-row td {
-    background: var(--ig-cell-synced-row-background);
-    color: var(--ig-cell-synced-row-color);
-}
-
-/* Cell synced row border */
-.hcg-table tbody tr.hcg-synced-row td::before {
-    border-top: var(--ig-cell-synced-row-border);
-    border-bottom: var(--ig-cell-synced-row-border);
-}
-
-/* Cell synced row background and color */
-.hcg-table tbody tr.hcg-row-even.hcg-synced-row td {
-    background: var(--ig-cell-synced-row-even-background);
-    color: var(--ig-cell-synced-row-even-color);
-}
-
-/* Cell synced column background and color */
-.hcg-table tbody tr td.hcg-synced-column {
-    background: var(--ig-cell-synced-column-background);
-    color: var(--ig-cell-synced-column-color);
-}
-
-/* Cell synced column border */
-.hcg-table tbody tr td.hcg-synced-column::before {
-    border-left: var(--ig-cell-synced-column-border);
-    border-right: var(--ig-cell-synced-column-border);
-}
-
-/* Cell synced column background and color */
-.hcg-table tbody tr.hcg-row-even td.hcg-synced-column {
-    background: var(--ig-cell-synced-column-even-background);
-    color: var(--ig-cell-synced-column-even-color);
-}
-
-/* Cell synced header background */
-.hcg-table thead th.hcg-synced-column {
-    background: var(--ig-cell-synced-header-background);
-}
-
-/* Cell synced header border */
-.hcg-table thead th.hcg-synced-column::before {
-    border-left: var(--ig-cell-synced-header-border);
-    border-right: var(--ig-cell-synced-header-border);
-}
-
-/* Cell synced header color */
-.hcg-table thead th.hcg-synced-column .hcg-header-cell-content {
-    color: var(--ig-cell-synced-header-color);
-}
-
-.hcg-table td:first-child,
-.hcg-table thead th.hcg-column-first,
-.hcg-table thead tr:first-child th:first-child {
-    border-left: none;
-}
-
 /* Accessibility */
 .hcg-visually-hidden {
     position: absolute;
@@ -1525,13 +1510,24 @@ th.hcg-column-sortable > .hcg-column-sortable-icon {
 
 .hcg-theme-default {
     --hcg-border-color: var(--highcharts-neutral-color-20, color-mix(in srgb, var(--hcg-color, #000000) 10%, var(--hcg-background, #ffffff)));
-    --hcg-cell-hovered-row-background: var(--ig-highlight-color-5, color-mix(in srgb, var(--hcg-color, #000000) 3%, var(--hcg-background, #ffffff)));
+    --hcg-row-hover-background: var(--ig-highlight-color-5, color-mix(in srgb, var(--hcg-color, #000000) 3%, var(--hcg-background, #ffffff)));
     --hcg-row-even-background: var(--highcharts-neutral-color-3, color-mix(in srgb, var(--hcg-color, #000000) 2%, var(--hcg-background, #ffffff)));
 }
 
 /* End Grid Default Theme */
 
 
+/* SPDX-License-Identifier: LicenseRef-Highcharts */
+
+/**
+ * @license Highcharts Grid Pro v2.2.0
+ *
+ * (c) 2009-2025 Highsoft AS
+ *
+ * A commercial license may be required depending on use.
+ * See www.highcharts.com/license
+ */
+
 /* Grid Pro specific styles */
 
 .hcg-container,