From f096cf84a4ae8fd42dfe29311b805efaee72dd50 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 21:35:57 -0500
Subject: [PATCH 1/8] Adapter first render fix

---
 packages/core/src/core/dom/DOMManager.ts      |   6 +
 .../core/src/managers/DimensionManager.ts     |  17 ++
 packages/core/src/utils/resizeUtils/index.ts  |  38 ++-
 .../spreadsheet/SpreadsheetExample.ts         | 289 ++++++++++++++++++
 .../examples/spreadsheet/spreadsheet-demo.css |  46 +++
 packages/react/src/SimpleTable.tsx            |  29 +-
 6 files changed, 412 insertions(+), 13 deletions(-)
 create mode 100644 packages/core/stories/examples/spreadsheet/SpreadsheetExample.ts
 create mode 100644 packages/core/stories/examples/spreadsheet/spreadsheet-demo.css

diff --git a/packages/core/src/core/dom/DOMManager.ts b/packages/core/src/core/dom/DOMManager.ts
index b28999e14..513e00b2d 100644
--- a/packages/core/src/core/dom/DOMManager.ts
+++ b/packages/core/src/core/dom/DOMManager.ts
@@ -1,3 +1,4 @@
+import { COLUMN_EDIT_WIDTH } from "../../consts/general-consts";
 import { SimpleTableConfig } from "../../types/SimpleTableConfig";
 
 export interface DOMElements {
@@ -60,6 +61,11 @@ export class DOMManager {
 
     const content = document.createElement("div");
     content.className = "st-content";
+    // Match RenderOrchestrator so DimensionManager's first clientWidth read (before any render)
+    // already excludes the column editor strip when editColumns is on.
+    content.style.width = config.editColumns
+      ? `calc(100% - ${COLUMN_EDIT_WIDTH}px)`
+      : "100%";
 
     const headerContainer = document.createElement("div");
     headerContainer.className = "st-header-container";
diff --git a/packages/core/src/managers/DimensionManager.ts b/packages/core/src/managers/DimensionManager.ts
index 1e03d24ee..0627673e4 100644
--- a/packages/core/src/managers/DimensionManager.ts
+++ b/packages/core/src/managers/DimensionManager.ts
@@ -166,6 +166,23 @@ export class DimensionManager {
 
     this.resizeObserver = new ResizeObserver(updateContainerWidth);
     this.resizeObserver.observe(containerElement);
+
+    // Width updates from RO are deferred to rAF above; without a synchronous read,
+    // state stays 0 until the next frame (breaks autoExpand resize and stale header
+    // context). Reading here is outside the RO callback, so Chromium RO loop issues
+    // do not apply.
+    this.applyContainerWidthSync(containerElement);
+  }
+
+  private applyContainerWidthSync(containerElement: HTMLElement): void {
+    const w = containerElement.clientWidth;
+    if (w > 0 && w !== this.state.containerWidth) {
+      this.state = {
+        ...this.state,
+        containerWidth: w,
+      };
+      this.notifySubscribers();
+    }
   }
 
   updateConfig(config: Partial<DimensionManagerConfig>): void {
diff --git a/packages/core/src/utils/resizeUtils/index.ts b/packages/core/src/utils/resizeUtils/index.ts
index 8eeb5a622..c6704d0e3 100644
--- a/packages/core/src/utils/resizeUtils/index.ts
+++ b/packages/core/src/utils/resizeUtils/index.ts
@@ -13,6 +13,26 @@ import { calculateMaxHeaderWidth } from "./maxWidth";
 import { handleParentHeaderResize } from "./parentHeaderResize";
 import { handleResizeWithAutoExpand } from "./autoExpandResize";
 
+/**
+ * Header resize handlers may capture an old `containerWidth` (e.g. 0) from when the
+ * cell was created. When the manager still reports 0, read the grid viewport from
+ * the DOM, scoped via mainBodyRef to this table instance.
+ */
+const resolveContainerWidthForResize = (
+  fromContext: number,
+  mainBodyRef: HandleResizeStartProps["mainBodyRef"],
+): number => {
+  if (fromContext > 0) return fromContext;
+  const main = mainBodyRef?.current;
+  if (!main) return 0;
+  const root = main.closest(".simple-table-root");
+  const bodyContainer = root?.querySelector(".st-body-container");
+  if (bodyContainer instanceof HTMLElement) {
+    return bodyContainer.clientWidth;
+  }
+  return main.clientWidth;
+};
+
 /**
  * Handler for when resize dragging starts
  */
@@ -23,6 +43,7 @@ export const handleResizeStart = ({
   event,
   header,
   headers,
+  mainBodyRef,
   onColumnWidthChange,
   reverse = false,
   setHeaders,
@@ -35,6 +56,11 @@ export const handleResizeStart = ({
 
   if (!header || header.hide) return;
 
+  const effectiveContainerWidth = resolveContainerWidthForResize(
+    containerWidth,
+    mainBodyRef,
+  );
+
   // Set resizing state to true
   setIsResizing(true);
 
@@ -74,11 +100,11 @@ export const handleResizeStart = ({
       initialWidthsMap.set(h.accessor as string, width);
     });
 
-    // Calculate widths of pinned sections using the passed containerWidth
-    if (containerWidth > 0) {
+    // Calculate widths of pinned sections using the effective container width
+    if (effectiveContainerWidth > 0) {
       const { leftWidth, rightWidth, mainWidth } = recalculateAllSectionWidths({
         headers,
-        containerWidth,
+        containerWidth: effectiveContainerWidth,
         collapsedHeaders,
       });
 
@@ -92,7 +118,7 @@ export const handleResizeStart = ({
         sectionWidth = mainWidth;
       }
 
-      initialMainAvailable = containerWidth - leftWidth - rightWidth;
+      initialMainAvailable = effectiveContainerWidth - leftWidth - rightWidth;
     }
   }
 
@@ -103,7 +129,7 @@ export const handleResizeStart = ({
   const mainInitialWidths = new Map<string, number>();
   let mainLeafHeaders: HeaderObject[] = [];
 
-  if (autoExpandColumns && rootPinned && containerWidth > 0) {
+  if (autoExpandColumns && rootPinned && effectiveContainerWidth > 0) {
     const sectionLeafs = getAllVisibleLeafHeaders(
       headers.filter((h) => h.pinned === rootPinned),
       collapsedHeaders,
@@ -160,7 +186,7 @@ export const handleResizeStart = ({
       handleResizeWithAutoExpand({
         childrenToResize,
         collapsedHeaders,
-        containerWidth,
+        containerWidth: effectiveContainerWidth,
         delta,
         headers,
         initialWidthsMap,
diff --git a/packages/core/stories/examples/spreadsheet/SpreadsheetExample.ts b/packages/core/stories/examples/spreadsheet/SpreadsheetExample.ts
new file mode 100644
index 000000000..46ba4adc2
--- /dev/null
+++ b/packages/core/stories/examples/spreadsheet/SpreadsheetExample.ts
@@ -0,0 +1,289 @@
+/**
+ * Spreadsheet Example — vanilla port of simple-table-marketing SpreadsheetExample.
+ * Loan-style columns, amortization recalculation on edit, and dynamic “Add column”.
+ */
+import type { CellChangeProps, HeaderObject, Row } from "../../../src/index";
+import { SimpleTableVanilla } from "../../../src/index";
+import { defaultVanillaArgs, type UniversalVanillaArgs } from "../../vanillaStoryConfig";
+import "./spreadsheet-demo.css";
+
+const BASE_SPREADSHEET_COLUMNS = 6;
+
+function generateSpreadsheetRows(count: number): Row[] {
+  const data: Row[] = [];
+  for (let i = 0; i < count; i++) {
+    const principal = Math.floor(Math.random() * 490000) + 10000;
+    const interestRate = parseFloat((Math.random() * 5 + 3).toFixed(2));
+    const monthlyRate = interestRate / 100 / 12;
+    const numMonths = 360;
+    const monthlyPayment =
+      (principal * (monthlyRate * Math.pow(1 + monthlyRate, numMonths))) /
+      (Math.pow(1 + monthlyRate, numMonths) - 1);
+    const paymentsMade = Math.floor(Math.random() * 120);
+    const remainingBalance =
+      (principal *
+        (Math.pow(1 + monthlyRate, numMonths) - Math.pow(1 + monthlyRate, paymentsMade))) /
+      (Math.pow(1 + monthlyRate, numMonths) - 1);
+    const totalPaid = monthlyPayment * paymentsMade;
+    const principalReduction = principal - Math.max(0, remainingBalance);
+    const interestPaid = totalPaid - principalReduction;
+
+    data.push({
+      id: i + 1,
+      principal: parseFloat(principal.toFixed(2)),
+      interestRate: parseFloat(interestRate.toFixed(2)),
+      monthlyPayment: parseFloat(monthlyPayment.toFixed(2)),
+      remainingBalance: parseFloat(Math.max(0, remainingBalance).toFixed(2)),
+      totalPaid: parseFloat(totalPaid.toFixed(2)),
+      interestPaid: parseFloat(Math.max(0, interestPaid).toFixed(2)),
+    });
+  }
+  return data;
+}
+
+function getSpreadsheetHeaders(additionalColumns: HeaderObject[] = []): HeaderObject[] {
+  return [
+    {
+      accessor: "principal",
+      label: "Principal",
+      width: "1fr",
+      minWidth: 100,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "sum" },
+    },
+    {
+      accessor: "interestRate",
+      label: "Interest Rate %",
+      width: "1fr",
+      minWidth: 110,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "average" },
+    },
+    {
+      accessor: "monthlyPayment",
+      label: "Monthly Payment",
+      width: "1fr",
+      minWidth: 120,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "sum" },
+    },
+    {
+      accessor: "remainingBalance",
+      label: "Remaining Balance",
+      width: "1fr",
+      minWidth: 130,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "sum" },
+    },
+    {
+      accessor: "totalPaid",
+      label: "Total Paid",
+      width: "1fr",
+      minWidth: 110,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "sum" },
+    },
+    {
+      accessor: "interestPaid",
+      label: "Interest Paid",
+      width: "1fr",
+      minWidth: 110,
+      align: "right",
+      isEditable: true,
+      type: "number",
+      aggregation: { type: "sum" },
+    },
+    ...additionalColumns,
+  ];
+}
+
+function applyAmortizationEdit(
+  item: Row,
+  accessor: string,
+  newValue: CellChangeProps["newValue"],
+): Row {
+  const updatedItem: Row = {
+    ...item,
+    [accessor]: newValue,
+  };
+
+  if (!["principal", "interestRate", "monthlyPayment"].includes(accessor)) {
+    return updatedItem;
+  }
+
+  const principal =
+    accessor === "principal"
+      ? parseFloat(String(newValue)) || 0
+      : typeof item.principal === "number"
+        ? item.principal
+        : 0;
+  const interestRate =
+    accessor === "interestRate"
+      ? parseFloat(String(newValue)) || 0
+      : typeof item.interestRate === "number"
+        ? item.interestRate
+        : 0;
+  const monthlyPayment =
+    accessor === "monthlyPayment"
+      ? parseFloat(String(newValue)) || 0
+      : typeof item.monthlyPayment === "number"
+        ? item.monthlyPayment
+        : 0;
+
+  const monthlyRate = interestRate / 100 / 12;
+  const numMonths = 360;
+
+  let calculatedPayment = monthlyPayment;
+  if (accessor === "principal" || accessor === "interestRate") {
+    if (monthlyRate > 0 && principal > 0) {
+      calculatedPayment =
+        (principal * monthlyRate * Math.pow(1 + monthlyRate, numMonths)) /
+        (Math.pow(1 + monthlyRate, numMonths) - 1);
+      updatedItem.monthlyPayment = parseFloat(calculatedPayment.toFixed(2));
+    }
+  }
+
+  const totalPaidValue = typeof item.totalPaid === "number" ? item.totalPaid : 0;
+  const estimatedPaymentsMade = Math.max(
+    0,
+    Math.min(120, Math.floor(totalPaidValue / calculatedPayment)),
+  );
+
+  let remainingBalance = principal;
+  if (monthlyRate > 0 && calculatedPayment > 0) {
+    remainingBalance =
+      principal *
+      ((Math.pow(1 + monthlyRate, numMonths) - Math.pow(1 + monthlyRate, estimatedPaymentsMade)) /
+        (Math.pow(1 + monthlyRate, numMonths) - 1));
+  }
+
+  const totalPaid = calculatedPayment * estimatedPaymentsMade;
+  const principalReduction = principal - Math.max(0, remainingBalance);
+  const interestPaid = totalPaid - principalReduction;
+
+  updatedItem.remainingBalance = parseFloat(Math.max(0, remainingBalance).toFixed(2));
+  updatedItem.totalPaid = parseFloat(totalPaid.toFixed(2));
+  updatedItem.interestPaid = parseFloat(Math.max(0, interestPaid).toFixed(2));
+
+  return updatedItem;
+}
+
+export const spreadsheetExampleDefaults: Partial<UniversalVanillaArgs> = {
+  columnReordering: true,
+  columnResizing: true,
+  selectableCells: true,
+  selectableColumns: true,
+  useOddEvenRowBackground: true,
+  height: "70vh",
+  theme: "light",
+};
+
+export function renderSpreadsheetExample(args?: Partial<UniversalVanillaArgs>): HTMLElement {
+  const options = { ...defaultVanillaArgs, ...spreadsheetExampleDefaults, ...args };
+
+  const wrapper = document.createElement("div");
+  wrapper.style.padding = "2rem";
+
+  const h2 = document.createElement("h2");
+  h2.style.marginBottom = "1rem";
+  h2.textContent = "Spreadsheet";
+  wrapper.appendChild(h2);
+
+  const outer = document.createElement("div");
+  outer.className = "spreadsheet-container";
+  wrapper.appendChild(outer);
+
+  const tableContainer = document.createElement("div");
+  outer.appendChild(tableContainer);
+
+  const state = {
+    rows: generateSpreadsheetRows(100),
+    additionalColumns: [] as HeaderObject[],
+  };
+
+  let tableRef: SimpleTableVanilla | null = null;
+
+  const buildHeaders = (): HeaderObject[] => {
+    const baseHeaders = getSpreadsheetHeaders(state.additionalColumns);
+    const actionsColumn: HeaderObject = {
+      accessor: "actions",
+      label: "",
+      width: 100,
+      minWidth: 100,
+      filterable: false,
+      type: "other",
+      disableReorder: true,
+      headerRenderer: () => {
+        const wrap = document.createElement("div");
+        wrap.style.display = "flex";
+        wrap.style.justifyContent = "center";
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "spreadsheet-add-column-btn";
+        btn.textContent = "+ Add Column";
+        btn.addEventListener("click", () => {
+          const nextIndex = BASE_SPREADSHEET_COLUMNS + state.additionalColumns.length + 1;
+          const accessor = `column${nextIndex}`;
+          const newColumn: HeaderObject = {
+            accessor,
+            label: `Column ${nextIndex}`,
+            width: 120,
+            minWidth: 80,
+            type: "number",
+            align: "right",
+            isEditable: true,
+            aggregation: { type: "sum" },
+          };
+          state.additionalColumns = [...state.additionalColumns, newColumn];
+          state.rows = state.rows.map((r) => ({ ...r, [accessor]: 0 }));
+          tableRef?.update({
+            defaultHeaders: buildHeaders(),
+            rows: state.rows,
+          });
+        });
+        wrap.appendChild(btn);
+        return wrap;
+      },
+    };
+    return [...baseHeaders, actionsColumn];
+  };
+
+  const handleCellEdit = (props: CellChangeProps) => {
+    const { accessor, newValue, row } = props;
+    const acc = String(accessor);
+    if (acc === "actions") return;
+
+    state.rows = state.rows.map((item) => {
+      if (item.id !== row.id) return item;
+      return applyAmortizationEdit(item, acc, newValue);
+    });
+    tableRef?.update({ rows: state.rows });
+  };
+
+  const table = new SimpleTableVanilla(tableContainer, {
+    ...options,
+    defaultHeaders: buildHeaders(),
+    enableHeaderEditing: true,
+    enableRowSelection: true,
+    onCellEdit: handleCellEdit,
+    customTheme: { ...(options.customTheme ?? {}), rowHeight: 22 },
+    rows: state.rows,
+    getRowId: (params: { row?: { id?: unknown } }) => String(params.row?.id),
+  });
+  table.mount();
+  tableRef = table;
+
+  (wrapper as HTMLElement & { _table?: SimpleTableVanilla })._table = table;
+
+  return wrapper;
+}
diff --git a/packages/core/stories/examples/spreadsheet/spreadsheet-demo.css b/packages/core/stories/examples/spreadsheet/spreadsheet-demo.css
new file mode 100644
index 000000000..56018083a
--- /dev/null
+++ b/packages/core/stories/examples/spreadsheet/spreadsheet-demo.css
@@ -0,0 +1,46 @@
+/* Spreadsheet demo — compact styling (vanilla Storybook port of marketing example) */
+
+.spreadsheet-container .st-cell-content {
+  font-size: 13px !important;
+}
+
+.spreadsheet-container .st-header-label {
+  font-size: 13px !important;
+  font-weight: 500 !important;
+}
+
+.spreadsheet-container .simple-table-cell {
+  padding: 4px 8px !important;
+}
+
+.spreadsheet-container .simple-table {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+}
+
+.spreadsheet-container .st-header-resize-handle {
+  height: 10px !important;
+}
+
+.spreadsheet-container .st-checkbox-custom {
+  min-height: 14px !important;
+  min-width: 14px !important;
+  max-height: 14px !important;
+  max-width: 14px !important;
+}
+
+.spreadsheet-container .spreadsheet-add-column-btn {
+  color: #fff;
+  border: none;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  background: #2563eb;
+}
+
+.spreadsheet-container .spreadsheet-add-column-btn:hover {
+  background: #1d4ed8;
+}
diff --git a/packages/react/src/SimpleTable.tsx b/packages/react/src/SimpleTable.tsx
index b6066e990..943499997 100644
--- a/packages/react/src/SimpleTable.tsx
+++ b/packages/react/src/SimpleTable.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { SimpleTableVanilla } from "simple-table-core";
-import type { TableAPI } from "simple-table-core";
+import type { SimpleTableConfig, TableAPI } from "simple-table-core";
 import { buildVanillaConfig } from "./buildVanillaConfig";
 import type { SimpleTableReactProps, TableInstance } from "./types";
 
@@ -34,6 +34,10 @@ const SimpleTable = React.forwardRef<TableAPI, SimpleTableReactProps>(
     // SimpleTableVanilla class — so the component stays decoupled from
     // internal implementation details.
     const instanceRef = useRef<TableInstance | null>(null);
+    /** Last `defaultHeaders` array reference applied via `update` (full config). */
+    const syncedDefaultHeadersRef = useRef<SimpleTableReactProps["defaultHeaders"] | undefined>(
+      undefined,
+    );
 
     // forwardRef omits `ref` from props at the type level; cast it back so
     // buildVanillaConfig receives the complete SimpleTableReactProps shape.
@@ -43,10 +47,7 @@ const SimpleTable = React.forwardRef<TableAPI, SimpleTableReactProps>(
     useEffect(() => {
       if (!containerRef.current) return;
 
-      const instance = new SimpleTableVanilla(
-        containerRef.current,
-        buildVanillaConfig(reactProps)
-      );
+      const instance = new SimpleTableVanilla(containerRef.current, buildVanillaConfig(reactProps));
       instance.mount();
       instanceRef.current = instance;
 
@@ -62,6 +63,7 @@ const SimpleTable = React.forwardRef<TableAPI, SimpleTableReactProps>(
       return () => {
         instance.destroy();
         instanceRef.current = null;
+        syncedDefaultHeadersRef.current = undefined;
         if (ref && typeof ref !== "function") {
           ref.current = null;
         }
@@ -70,12 +72,25 @@ const SimpleTable = React.forwardRef<TableAPI, SimpleTableReactProps>(
     }, []);
 
     // Sync prop changes to the vanilla instance after every render.
+    // When `defaultHeaders` keeps the same reference, omit it so core does not
+    // reset internal header state (widths, reorder results). New reference = new columns.
     useEffect(() => {
-      instanceRef.current?.update(buildVanillaConfig(reactProps));
+      const instance = instanceRef.current;
+      if (!instance) return;
+
+      const fullConfig = buildVanillaConfig(reactProps);
+      if (syncedDefaultHeadersRef.current !== reactProps.defaultHeaders) {
+        syncedDefaultHeadersRef.current = reactProps.defaultHeaders;
+        instance.update(fullConfig);
+        return;
+      }
+
+      const { defaultHeaders: _headers, ...rest } = fullConfig;
+      instance.update(rest as Partial<SimpleTableConfig>);
     });
 
     return <div ref={containerRef} />;
-  }
+  },
 );
 
 SimpleTable.displayName = "SimpleTable";

From 0900810e664fe51a3a56610d5d348cbd5c96a2ad Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 21:50:03 -0500
Subject: [PATCH 2/8] Dropdown fixes

---
 packages/core/src/styles/base.css             |  19 +---
 .../src/utils/filters/createCustomSelect.ts   |   1 +
 .../src/utils/filters/createDateFilter.ts     |   1 +
 .../core/src/utils/filters/createDropdown.ts  | 101 +++++++++++++-----
 .../core/src/utils/headerCell/filtering.ts    |   5 +-
 5 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index 7ca554ab0..4990a79cb 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -1494,21 +1494,12 @@ input {
   cursor: default;
 }
 
-/* Position variants */
-.st-dropdown-bottom-left {
-  margin-top: 4px;
-}
-
-.st-dropdown-bottom-right {
-  margin-top: 4px;
-}
-
-.st-dropdown-top-left {
-  margin-bottom: 4px;
-}
-
+/* Position variants — vertical offset comes from JS (React Dropdown parity: +4px only) */
+.st-dropdown-bottom-left,
+.st-dropdown-bottom-right,
+.st-dropdown-top-left,
 .st-dropdown-top-right {
-  margin-bottom: 4px;
+  margin: 0;
 }
 
 /* Dropdown items */
diff --git a/packages/core/src/utils/filters/createCustomSelect.ts b/packages/core/src/utils/filters/createCustomSelect.ts
index b2d55d3a0..297f20fcd 100644
--- a/packages/core/src/utils/filters/createCustomSelect.ts
+++ b/packages/core/src/utils/filters/createCustomSelect.ts
@@ -106,6 +106,7 @@ export const createCustomSelect = (options: CreateCustomSelectOptions) => {
     children: optionsContainer,
     containerRef,
     mainBodyRef,
+    anchorElement: trigger,
     onClose: () => {
       setOpen(false);
     },
diff --git a/packages/core/src/utils/filters/createDateFilter.ts b/packages/core/src/utils/filters/createDateFilter.ts
index 8a54cb369..7ee1b7b5e 100644
--- a/packages/core/src/utils/filters/createDateFilter.ts
+++ b/packages/core/src/utils/filters/createDateFilter.ts
@@ -156,6 +156,7 @@ export const createDateFilter = (options: CreateDateFilterOptions) => {
       children: picker.element,
       containerRef,
       mainBodyRef,
+      anchorElement: input,
       onClose: () => {
         isOpen = false;
       },
diff --git a/packages/core/src/utils/filters/createDropdown.ts b/packages/core/src/utils/filters/createDropdown.ts
index 5d4795eab..a8ee3d73a 100644
--- a/packages/core/src/utils/filters/createDropdown.ts
+++ b/packages/core/src/utils/filters/createDropdown.ts
@@ -1,23 +1,40 @@
+/**
+ * Filter / filter-UI dropdown positioning (React-era parity):
+ * - Fixed: portaled under `.simple-table-root`, anchored to `anchorElement` (e.g. filter icon) so
+ *   `overflow: hidden` on `.st-header-cell` does not clip the panel. Same top/left +4px and
+ *   container-based flip as legacy React Dropdown.tsx.
+ * - Absolute: stays under caller’s parent (e.g. `.st-custom-select`); use `anchorElement` for the
+ *   trigger rect vs `position: relative` parent (React CustomSelect pattern).
+ */
+
 export interface CreateDropdownOptions {
   children: HTMLElement;
   containerRef?: HTMLElement;
   mainBodyRef?: HTMLElement;
+  /** Rect used for placement. Required for fixed portaling (e.g. filter icon); for absolute, pass the real trigger (button/input) when it differs from the dropdown parent. */
+  anchorElement?: HTMLElement;
   onClose: () => void;
   open: boolean;
   overflow?: "auto" | "visible" | "hidden";
   width?: number;
+  maxWidth?: number;
   positioning?: "fixed" | "absolute";
 }
 
+const resolveTableRoot = (el?: HTMLElement | null): HTMLElement | null =>
+  el?.closest(".simple-table-root") ?? null;
+
 export const createDropdown = (options: CreateDropdownOptions) => {
   let {
     children,
     containerRef,
     mainBodyRef,
+    anchorElement: anchorOption,
     onClose,
     open,
     overflow = "auto",
     width,
+    maxWidth,
     positioning = "fixed",
   } = options;
 
@@ -28,6 +45,9 @@ export const createDropdown = (options: CreateDropdownOptions) => {
   if (width) {
     dropdownElement.style.width = `${width}px`;
   }
+  if (maxWidth) {
+    dropdownElement.style.maxWidth = `${maxWidth}px`;
+  }
 
   dropdownElement.addEventListener("click", (e) => e.stopPropagation());
   dropdownElement.addEventListener("mousedown", (e) => e.stopPropagation());
@@ -35,21 +55,34 @@ export const createDropdown = (options: CreateDropdownOptions) => {
 
   dropdownElement.appendChild(children);
 
-  let triggerElement: HTMLElement | null = null;
+  let anchorElement: HTMLElement | undefined = anchorOption;
+
+  if (positioning === "fixed") {
+    const root =
+      resolveTableRoot(anchorElement) ??
+      resolveTableRoot(mainBodyRef ?? null) ??
+      resolveTableRoot(containerRef ?? null) ??
+      (document.querySelector(".simple-table-root") as HTMLElement | null);
+    (root ?? document.body).appendChild(dropdownElement);
+  }
+
+  const effectiveAnchor = (): HTMLElement | null => {
+    if (anchorElement) return anchorElement;
+    return dropdownElement.parentElement;
+  };
 
   const calculatePosition = () => {
-    if (!open || !dropdownElement.parentElement) return;
+    if (!open) return;
+    if (positioning === "absolute" && !dropdownElement.parentElement) return;
+    if (positioning === "fixed" && !dropdownElement.parentElement) return;
 
     dropdownElement.style.visibility = "hidden";
 
-    if (!triggerElement) {
-      triggerElement = dropdownElement.parentElement;
-    }
+    const anchorEl = effectiveAnchor();
+    if (!anchorEl) return;
 
     requestAnimationFrame(() => {
-      if (!triggerElement) return;
-
-      const triggerRect = triggerElement.getBoundingClientRect();
+      const anchorRect = anchorEl.getBoundingClientRect();
       const dropdownHeight = dropdownElement.offsetHeight;
       const dropdownWidth = width || dropdownElement.offsetWidth;
 
@@ -73,9 +106,9 @@ export const createDropdown = (options: CreateDropdownOptions) => {
         } as DOMRect;
       }
 
-      const spaceBottom = containerRect.bottom - triggerRect.bottom;
-      const spaceTop = triggerRect.top - containerRect.top;
-      const spaceRight = containerRect.right - triggerRect.right;
+      const spaceBottom = containerRect.bottom - anchorRect.bottom;
+      const spaceTop = anchorRect.top - containerRect.top;
+      const spaceRight = containerRect.right - anchorRect.right;
 
       let verticalPosition = "bottom";
       if (dropdownHeight > spaceBottom && dropdownHeight <= spaceTop) {
@@ -85,40 +118,44 @@ export const createDropdown = (options: CreateDropdownOptions) => {
       }
 
       let horizontalPosition = "left";
-      if (dropdownWidth > spaceRight + triggerRect.width) {
+      if (dropdownWidth > spaceRight + anchorRect.width) {
         horizontalPosition = "right";
       }
 
       if (positioning === "fixed") {
         if (verticalPosition === "bottom") {
-          dropdownElement.style.top = `${triggerRect.bottom + 4}px`;
+          dropdownElement.style.top = `${anchorRect.bottom + 4}px`;
           dropdownElement.style.bottom = "auto";
         } else {
-          dropdownElement.style.bottom = `${window.innerHeight - triggerRect.top + 4}px`;
+          dropdownElement.style.bottom = `${window.innerHeight - anchorRect.top + 4}px`;
           dropdownElement.style.top = "auto";
         }
 
         if (horizontalPosition === "left") {
-          dropdownElement.style.left = `${triggerRect.left}px`;
+          dropdownElement.style.left = `${anchorRect.left}px`;
           dropdownElement.style.right = "auto";
         } else {
-          dropdownElement.style.right = `${window.innerWidth - triggerRect.right}px`;
+          dropdownElement.style.right = `${window.innerWidth - anchorRect.right}px`;
           dropdownElement.style.left = "auto";
         }
       } else {
+        const positionParent = dropdownElement.parentElement;
+        if (!positionParent) return;
+        const pRect = positionParent.getBoundingClientRect();
+
         if (verticalPosition === "bottom") {
-          dropdownElement.style.top = `${triggerRect.height + 4}px`;
+          dropdownElement.style.top = `${anchorRect.bottom - pRect.top + 4}px`;
           dropdownElement.style.bottom = "auto";
         } else {
-          dropdownElement.style.bottom = `${triggerRect.height + 4}px`;
+          dropdownElement.style.bottom = `${pRect.bottom - anchorRect.top + 4}px`;
           dropdownElement.style.top = "auto";
         }
 
         if (horizontalPosition === "left") {
-          dropdownElement.style.left = "0";
+          dropdownElement.style.left = `${anchorRect.left - pRect.left}px`;
           dropdownElement.style.right = "auto";
         } else {
-          dropdownElement.style.right = "0";
+          dropdownElement.style.right = `${pRect.right - anchorRect.right}px`;
           dropdownElement.style.left = "auto";
         }
       }
@@ -139,13 +176,18 @@ export const createDropdown = (options: CreateDropdownOptions) => {
   };
 
   const handleClickOutside = (event: MouseEvent | KeyboardEvent) => {
-    if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
-      const parentElement = dropdownElement.parentElement;
-      if (parentElement && !parentElement.contains(event.target as Node)) {
-        setOpen(false);
-        onClose?.();
-      }
+    const target = event.target as Node;
+    if (dropdownElement.contains(target)) return;
+
+    if (anchorElement?.contains(target)) return;
+
+    if (positioning === "absolute") {
+      const host = dropdownElement.parentElement;
+      if (host?.contains(target)) return;
     }
+
+    setOpen(false);
+    onClose?.();
   };
 
   const handleEscKey = (event: KeyboardEvent) => {
@@ -180,6 +222,9 @@ export const createDropdown = (options: CreateDropdownOptions) => {
   }
 
   const update = (newOptions: Partial<CreateDropdownOptions>) => {
+    if (newOptions.anchorElement !== undefined) {
+      anchorElement = newOptions.anchorElement;
+    }
     if (newOptions.open !== undefined) {
       setOpen(newOptions.open);
     }
@@ -191,6 +236,10 @@ export const createDropdown = (options: CreateDropdownOptions) => {
       width = newOptions.width;
       dropdownElement.style.width = width ? `${width}px` : "auto";
     }
+    if (newOptions.maxWidth !== undefined) {
+      maxWidth = newOptions.maxWidth;
+      dropdownElement.style.maxWidth = maxWidth ? `${maxWidth}px` : "";
+    }
     if (newOptions.overflow !== undefined) {
       overflow = newOptions.overflow;
       dropdownElement.style.overflow = overflow;
diff --git a/packages/core/src/utils/headerCell/filtering.ts b/packages/core/src/utils/headerCell/filtering.ts
index 6ae32e48d..77e1aae98 100644
--- a/packages/core/src/utils/headerCell/filtering.ts
+++ b/packages/core/src/utils/headerCell/filtering.ts
@@ -107,6 +107,7 @@ export const createFilterIcon = (
         children: filterDropdownInstance.element,
         containerRef: containerElement,
         mainBodyRef: containerElement,
+        anchorElement: iconContainer,
         onClose: () => {
           isFilterDropdownOpen = false;
           iconContainer.setAttribute("aria-expanded", "false");
@@ -118,10 +119,8 @@ export const createFilterIcon = (
         open: true,
         overflow: "auto",
         positioning: "fixed",
-        width: 280,
+        maxWidth: 280,
       });
-
-      iconContainer.appendChild(dropdownInstance.element);
     } else {
       if (dropdownInstance) {
         dropdownInstance.destroy();

From 54e170b2a5b19bf5441f74766c386273ea5083e0 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 21:55:22 -0500
Subject: [PATCH 3/8] Inner dropdown fixes

---
 packages/core/src/styles/base.css             | 13 +++++++++
 .../core/src/utils/filters/createDropdown.ts  | 28 +++++++++++++++++--
 .../core/src/utils/headerCell/filtering.ts    |  2 +-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index 4990a79cb..565a6c2db 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -1494,6 +1494,19 @@ input {
   cursor: default;
 }
 
+/* Filter popover (and similar): nested .st-dropdown-content menus must not be clipped by the shell.
+   overflow:auto + max-height on the parent creates a scrollport that clips absolutely positioned
+   children (operator CustomSelect, date picker, etc.). */
+.st-dropdown-content.st-dropdown-content--allow-descendant-overflow {
+  overflow: visible;
+  max-height: none;
+}
+
+/* Nested filter UI panels (absolute) stack above the fixed filter shell */
+.st-filter-container .st-dropdown-content {
+  z-index: 101;
+}
+
 /* Position variants — vertical offset comes from JS (React Dropdown parity: +4px only) */
 .st-dropdown-bottom-left,
 .st-dropdown-bottom-right,
diff --git a/packages/core/src/utils/filters/createDropdown.ts b/packages/core/src/utils/filters/createDropdown.ts
index a8ee3d73a..a868bcf65 100644
--- a/packages/core/src/utils/filters/createDropdown.ts
+++ b/packages/core/src/utils/filters/createDropdown.ts
@@ -19,6 +19,12 @@ export interface CreateDropdownOptions {
   width?: number;
   maxWidth?: number;
   positioning?: "fixed" | "absolute";
+  /**
+   * When true, this panel does not clip overflowing descendants (e.g. nested operator menus inside
+   * the filter popover). Uses overflow: visible and drops max-height on the shell — see
+   * `.st-dropdown-content--allow-descendant-overflow` in base.css.
+   */
+  allowDescendantOverflow?: boolean;
 }
 
 const resolveTableRoot = (el?: HTMLElement | null): HTMLElement | null =>
@@ -36,12 +42,23 @@ export const createDropdown = (options: CreateDropdownOptions) => {
     width,
     maxWidth,
     positioning = "fixed",
+    allowDescendantOverflow = false,
   } = options;
 
+  let allowDescendantOverflowFlag = allowDescendantOverflow;
+
+  const descendantOverflowClass = "st-dropdown-content--allow-descendant-overflow";
+
+  const placementClassSuffix = () =>
+    allowDescendantOverflowFlag ? ` ${descendantOverflowClass}` : "";
+
   const dropdownElement = document.createElement("div");
   dropdownElement.className = "st-dropdown-content";
+  if (allowDescendantOverflowFlag) {
+    dropdownElement.classList.add(descendantOverflowClass);
+  }
   dropdownElement.style.position = positioning;
-  dropdownElement.style.overflow = overflow;
+  dropdownElement.style.overflow = allowDescendantOverflowFlag ? "visible" : overflow;
   if (width) {
     dropdownElement.style.width = `${width}px`;
   }
@@ -160,7 +177,7 @@ export const createDropdown = (options: CreateDropdownOptions) => {
         }
       }
 
-      dropdownElement.className = `st-dropdown-content st-dropdown-${verticalPosition}-${horizontalPosition}`;
+      dropdownElement.className = `st-dropdown-content st-dropdown-${verticalPosition}-${horizontalPosition}${placementClassSuffix()}`;
       dropdownElement.style.visibility = "visible";
     });
   };
@@ -242,7 +259,12 @@ export const createDropdown = (options: CreateDropdownOptions) => {
     }
     if (newOptions.overflow !== undefined) {
       overflow = newOptions.overflow;
-      dropdownElement.style.overflow = overflow;
+      dropdownElement.style.overflow = allowDescendantOverflowFlag ? "visible" : overflow;
+    }
+    if (newOptions.allowDescendantOverflow !== undefined) {
+      allowDescendantOverflowFlag = newOptions.allowDescendantOverflow;
+      dropdownElement.classList.toggle(descendantOverflowClass, allowDescendantOverflowFlag);
+      dropdownElement.style.overflow = allowDescendantOverflowFlag ? "visible" : overflow;
     }
   };
 
diff --git a/packages/core/src/utils/headerCell/filtering.ts b/packages/core/src/utils/headerCell/filtering.ts
index 77e1aae98..2b7904d2e 100644
--- a/packages/core/src/utils/headerCell/filtering.ts
+++ b/packages/core/src/utils/headerCell/filtering.ts
@@ -117,9 +117,9 @@ export const createFilterIcon = (
           }
         },
         open: true,
-        overflow: "auto",
         positioning: "fixed",
         maxWidth: 280,
+        allowDescendantOverflow: true,
       });
     } else {
       if (dropdownInstance) {

From 6e60d7888949a097ca6a071365cd19779931f056 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:00:58 -0500
Subject: [PATCH 4/8] Button style fixes

---
 packages/core/src/styles/base.css             | 25 ++++++++++-
 .../src/utils/filters/createCustomSelect.ts   |  9 ++--
 .../src/utils/filters/createEnumFilter.ts     | 12 +++---
 .../src/utils/filters/createFilterActions.ts  | 42 ++++++++++++++-----
 4 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index 565a6c2db..0bc94409e 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -1772,12 +1772,19 @@ input {
   font-size: 0.9em;
   font-weight: 500;
   font-family: inherit;
+  appearance: none;
+  -webkit-appearance: none;
   transition: background-color var(--st-transition-duration)
     var(--st-transition-ease);
 }
+/* Keyboard only — avoids a stuck ring after mouse click (especially on bordered Clear) */
 .st-filter-button:focus {
+  outline: none;
+}
+
+.st-filter-button:focus-visible {
   outline: 2px solid var(--st-focus-ring-color);
-  outline-offset: -2px;
+  outline-offset: 2px;
 }
 
 /* Apply Button */
@@ -1829,6 +1836,9 @@ input {
   justify-content: space-between;
   gap: var(--st-spacing-medium);
   outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: left;
   transition: border-color var(--st-transition-duration)
     var(--st-transition-ease);
 }
@@ -1928,6 +1938,12 @@ input {
   overflow: auto;
 }
 
+/* Enum rows: left-align checkbox + label (full-width row); default .st-checkbox-label is centered */
+.st-enum-filter-options .st-checkbox-label {
+  justify-content: flex-start;
+  width: 100%;
+}
+
 /* Select All checkbox styling */
 .st-enum-select-all {
   padding-bottom: var(--st-spacing-small);
@@ -1952,6 +1968,13 @@ input {
   user-select: none;
 }
 
+.st-enum-filter-options .st-enum-option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* No results message */
 .st-enum-no-results {
   padding: var(--st-spacing-medium);
diff --git a/packages/core/src/utils/filters/createCustomSelect.ts b/packages/core/src/utils/filters/createCustomSelect.ts
index 297f20fcd..270611e94 100644
--- a/packages/core/src/utils/filters/createCustomSelect.ts
+++ b/packages/core/src/utils/filters/createCustomSelect.ts
@@ -64,11 +64,14 @@ export const createCustomSelect = (options: CreateCustomSelectOptions) => {
   const selectedOption = selectOptions.find((opt) => opt.value === value);
   valueSpan.textContent = selectedOption ? selectedOption.label : placeholder;
 
-  const arrowSpan = document.createElement("span");
-  arrowSpan.innerHTML = SELECT_ICON_SVG;
+  // Match React CustomSelect: SVG is a direct child of the trigger so `.st-custom-select-arrow`
+  // is the flex item (flex-shrink, rotate) — not an unstyled wrapper span.
+  const iconTemplate = document.createElement("template");
+  iconTemplate.innerHTML = SELECT_ICON_SVG.trim();
+  const arrowIcon = iconTemplate.content.firstElementChild as SVGElement;
 
   trigger.appendChild(valueSpan);
-  trigger.appendChild(arrowSpan);
+  trigger.appendChild(arrowIcon);
   container.appendChild(trigger);
 
   const optionsContainer = document.createElement("div");
diff --git a/packages/core/src/utils/filters/createEnumFilter.ts b/packages/core/src/utils/filters/createEnumFilter.ts
index 69311f0d8..8a055b768 100644
--- a/packages/core/src/utils/filters/createEnumFilter.ts
+++ b/packages/core/src/utils/filters/createEnumFilter.ts
@@ -57,8 +57,9 @@ export const createEnumFilter = (options: CreateEnumFilterOptions) => {
   selectAllLabel.className = "st-enum-option-label st-enum-select-all-label";
   selectAllLabel.textContent = "Select All";
 
+  // Match React EnumFilter: label text is a child of <label class="st-checkbox-label">, not a sibling.
+  selectAllCheckbox.element.appendChild(selectAllLabel);
   selectAllContainer.appendChild(selectAllCheckbox.element);
-  selectAllContainer.appendChild(selectAllLabel);
   optionsContainer.appendChild(selectAllContainer);
 
   let searchContainer: HTMLElement | null = null;
@@ -111,8 +112,6 @@ export const createEnumFilter = (options: CreateEnumFilterOptions) => {
       optionCheckboxesContainer.appendChild(noResults);
     } else {
       filteredOptions.forEach((option) => {
-        const optionContainer = document.createElement("div");
-
         const checkbox = createCheckbox({
           checked: selectedValues.includes(option.value),
           onChange: () => {
@@ -132,13 +131,12 @@ export const createEnumFilter = (options: CreateEnumFilterOptions) => {
         const label = document.createElement("span");
         label.className = "st-enum-option-label";
         label.textContent = option.label;
+        checkbox.element.appendChild(label);
 
-        optionContainer.appendChild(checkbox.element);
-        optionContainer.appendChild(label);
-        optionCheckboxesContainer.appendChild(optionContainer);
+        optionCheckboxesContainer.appendChild(checkbox.element);
 
         optionCheckboxes.push({
-          container: optionContainer,
+          container: checkbox.element,
           checkbox,
           value: option.value,
         });
diff --git a/packages/core/src/utils/filters/createFilterActions.ts b/packages/core/src/utils/filters/createFilterActions.ts
index 3475598ca..8caddb118 100644
--- a/packages/core/src/utils/filters/createFilterActions.ts
+++ b/packages/core/src/utils/filters/createFilterActions.ts
@@ -5,6 +5,7 @@ export interface CreateFilterActionsOptions {
   showClear: boolean;
 }
 
+/** Matches React FilterActions: `st-filter-button-apply`, `st-filter-button-clear`, `st-filter-button-disabled`. */
 export const createFilterActions = (options: CreateFilterActionsOptions) => {
   let { onApply, onClear, canApply, showClear } = options;
 
@@ -12,23 +13,41 @@ export const createFilterActions = (options: CreateFilterActionsOptions) => {
   container.className = "st-filter-actions";
 
   const applyBtn = document.createElement("button");
-  applyBtn.className = "st-filter-button st-filter-apply";
+  applyBtn.type = "button";
+  applyBtn.tabIndex = 0;
   applyBtn.textContent = "Apply";
-  applyBtn.disabled = !canApply;
-  applyBtn.addEventListener("click", onApply);
+
+  const syncApplyButton = () => {
+    applyBtn.disabled = !canApply;
+    applyBtn.className = `st-filter-button st-filter-button-apply${!canApply ? " st-filter-button-disabled" : ""}`.trim();
+  };
+  syncApplyButton();
+
+  const handleApplyClick = () => {
+    onApply();
+  };
+  applyBtn.addEventListener("click", handleApplyClick);
 
   container.appendChild(applyBtn);
 
   let clearBtn: HTMLButtonElement | null = null;
 
+  const handleClearClick = () => {
+    onClear?.();
+  };
+
   const renderClearButton = () => {
-    if (showClear && !clearBtn) {
+    const shouldShow = showClear && !!onClear;
+    if (shouldShow && !clearBtn) {
       clearBtn = document.createElement("button");
-      clearBtn.className = "st-filter-button st-filter-clear";
+      clearBtn.type = "button";
+      clearBtn.tabIndex = 0;
+      clearBtn.className = "st-filter-button st-filter-button-clear";
       clearBtn.textContent = "Clear";
-      clearBtn.addEventListener("click", () => onClear?.());
+      clearBtn.addEventListener("click", handleClearClick);
       container.appendChild(clearBtn);
-    } else if (!showClear && clearBtn) {
+    } else if (!shouldShow && clearBtn) {
+      clearBtn.removeEventListener("click", handleClearClick);
       clearBtn.remove();
       clearBtn = null;
     }
@@ -39,7 +58,7 @@ export const createFilterActions = (options: CreateFilterActionsOptions) => {
   const update = (newOptions: Partial<CreateFilterActionsOptions>) => {
     if (newOptions.canApply !== undefined) {
       canApply = newOptions.canApply;
-      applyBtn.disabled = !canApply;
+      syncApplyButton();
     }
     if (newOptions.showClear !== undefined) {
       showClear = newOptions.showClear;
@@ -50,13 +69,14 @@ export const createFilterActions = (options: CreateFilterActionsOptions) => {
     }
     if (newOptions.onClear !== undefined) {
       onClear = newOptions.onClear;
+      renderClearButton();
     }
   };
 
   const destroy = () => {
-    applyBtn.removeEventListener("click", onApply);
-    if (clearBtn && onClear) {
-      clearBtn.removeEventListener("click", onClear);
+    applyBtn.removeEventListener("click", handleApplyClick);
+    if (clearBtn) {
+      clearBtn.removeEventListener("click", handleClearClick);
     }
     container.remove();
   };

From 2854a459f6ece5d104e2f6d337ae402d083a583f Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:05:30 -0500
Subject: [PATCH 5/8] fix(filters): sync custom select value on pick;
 Enter-only outside keydown

- Update internal value and trigger label when an option is chosen (click or
  Enter) so operator UI matches parent state.
- Match React Dropdown: run document keydown outside-close only on Enter,
  not every key, so nested filter menus behave correctly.

Made-with: Cursor
---
 packages/core/src/utils/filters/createCustomSelect.ts | 11 ++++++++++-
 packages/core/src/utils/filters/createDropdown.ts     | 11 +++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/utils/filters/createCustomSelect.ts b/packages/core/src/utils/filters/createCustomSelect.ts
index 270611e94..c68ef1489 100644
--- a/packages/core/src/utils/filters/createCustomSelect.ts
+++ b/packages/core/src/utils/filters/createCustomSelect.ts
@@ -120,7 +120,14 @@ export const createCustomSelect = (options: CreateCustomSelectOptions) => {
 
   container.appendChild(dropdown.element);
 
+  const syncValueFromSelection = (optionValue: string) => {
+    value = optionValue;
+    const opt = selectOptions.find((o) => o.value === value);
+    valueSpan.textContent = opt ? opt.label : placeholder;
+  };
+
   const handleOptionClick = (optionValue: string) => {
+    syncValueFromSelection(optionValue);
     onChange(optionValue);
     setOpen(false);
     focusedIndex = -1;
@@ -156,7 +163,9 @@ export const createCustomSelect = (options: CreateCustomSelectOptions) => {
       case "Enter":
         event.preventDefault();
         if (focusedIndex >= 0) {
-          onChange(selectOptions[focusedIndex].value);
+          const v = selectOptions[focusedIndex].value;
+          syncValueFromSelection(v);
+          onChange(v);
           setOpen(false);
           focusedIndex = -1;
           renderOptions();
diff --git a/packages/core/src/utils/filters/createDropdown.ts b/packages/core/src/utils/filters/createDropdown.ts
index a868bcf65..9d5310f27 100644
--- a/packages/core/src/utils/filters/createDropdown.ts
+++ b/packages/core/src/utils/filters/createDropdown.ts
@@ -214,6 +214,13 @@ export const createDropdown = (options: CreateDropdownOptions) => {
     }
   };
 
+  /** React Dropdown only ran outside logic on Enter for keydown; running on every key broke nested menus. */
+  const handleOutsideKeydown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleClickOutside(event);
+    }
+  };
+
   const setOpen = (newOpen: boolean) => {
     open = newOpen;
     if (open) {
@@ -221,13 +228,13 @@ export const createDropdown = (options: CreateDropdownOptions) => {
       calculatePosition();
       window.addEventListener("scroll", handleScroll, true);
       document.addEventListener("mousedown", handleClickOutside, true);
-      document.addEventListener("keydown", handleClickOutside, true);
+      document.addEventListener("keydown", handleOutsideKeydown, true);
       document.addEventListener("keydown", handleEscKey);
     } else {
       dropdownElement.style.display = "none";
       window.removeEventListener("scroll", handleScroll, true);
       document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleOutsideKeydown, true);
       document.removeEventListener("keydown", handleEscKey);
     }
   };

From e78cbee75acbc15c126636334d5479249ce4497e Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:25:54 -0500
Subject: [PATCH 6/8] border improvements

---
 .../core/src/styles/themes/modern-dark.css    |   8 +-
 .../core/src/styles/themes/modern-light.css   |   8 +-
 .../core/src/utils/headerCell/resizing.ts     | 230 +++++++++++++-----
 packages/core/src/utils/headerCell/styling.ts |  32 ++-
 packages/core/src/utils/headerCellRenderer.ts |  24 +-
 packages/core/src/utils/headerWidthUtils.ts   |  12 +-
 packages/core/src/utils/resizeUtils/index.ts  | 194 +++++++++++++++
 .../tests/13-ColumnResizeTests.stories.ts     |  31 ++-
 .../39-AutoExpandColumnsTests.stories.ts      |  74 +++++-
 packages/core/styles.css                      |   2 +-
 10 files changed, 513 insertions(+), 102 deletions(-)

diff --git a/packages/core/src/styles/themes/modern-dark.css b/packages/core/src/styles/themes/modern-dark.css
index 164d99d87..a296f7823 100644
--- a/packages/core/src/styles/themes/modern-dark.css
+++ b/packages/core/src/styles/themes/modern-dark.css
@@ -5,7 +5,7 @@
  * - Dark gray base with lighter text for reduced eye strain
  * - Hover states with subtle brightness changes
  * - Generous padding (12px) for better readability
- * - Rounded corners (8px) for a softer appearance
+ * - Rounded corners (4px) for a clean, compact appearance
  * - Modern blue accent (#60a5fa) for interactive elements (lighter for dark mode)
  * - High contrast text for accessibility
  * - Lightweight visual hierarchy
@@ -14,7 +14,7 @@
  */
 .theme-modern-dark {
   /* Layout/Structure variables - Tighter, more compact */
-  --st-border-radius: 8px;
+  --st-border-radius: 4px;
   --st-cell-padding: 12px;
 
   /* Spacing variables - Reduced for cleaner look */
@@ -205,7 +205,7 @@
 
 /* Cleaner pagination buttons - more compact */
 .theme-modern-dark .st-page-btn {
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
   color: #d1d5db;
@@ -229,7 +229,7 @@
 /* Next/Prev buttons */
 .theme-modern-dark .st-next-prev-btn {
   padding: 6px 8px;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.15s ease;
   margin-left: 4px;
   flex-shrink: 0;
diff --git a/packages/core/src/styles/themes/modern-light.css b/packages/core/src/styles/themes/modern-light.css
index 8a8baeb5b..08b1a218a 100644
--- a/packages/core/src/styles/themes/modern-light.css
+++ b/packages/core/src/styles/themes/modern-light.css
@@ -5,7 +5,7 @@
  * - White backgrounds with minimal color variation
  * - Hover states instead of alternating row colors
  * - Generous padding (12px) for better readability
- * - Rounded corners (8px) for a softer appearance
+ * - Rounded corners (4px) for a clean, compact appearance
  * - Modern blue accent (#3b82f6) for interactive elements
  * - High contrast text (#111827) for accessibility
  * - Lightweight visual hierarchy
@@ -14,7 +14,7 @@
  */
 .theme-modern-light {
   /* Layout/Structure variables - Tighter, more compact */
-  --st-border-radius: 8px;
+  --st-border-radius: 4px;
   --st-cell-padding: 12px;
 
   /* Spacing variables - Reduced for cleaner look */
@@ -205,7 +205,7 @@
 
 /* Cleaner pagination buttons - more compact */
 .theme-modern-light .st-page-btn {
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
   color: #374151;
@@ -229,7 +229,7 @@
 /* Next/Prev buttons */
 .theme-modern-light .st-next-prev-btn {
   padding: 6px 8px;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.15s ease;
   margin-left: 4px;
   flex-shrink: 0;
diff --git a/packages/core/src/utils/headerCell/resizing.ts b/packages/core/src/utils/headerCell/resizing.ts
index 677fdfead..c8b5c9ee7 100644
--- a/packages/core/src/utils/headerCell/resizing.ts
+++ b/packages/core/src/utils/headerCell/resizing.ts
@@ -1,105 +1,93 @@
 import { TABLE_HEADER_CELL_WIDTH_DEFAULT } from "../../consts/general-consts";
 import HeaderObject from "../../types/HeaderObject";
 import { getCellId } from "../cellUtils";
-import { calculateHeaderContentWidth } from "../headerWidthUtils";
+import { calculateHeaderContentWidth, removeAllFractionalWidths } from "../headerWidthUtils";
 import {
   getHeaderIndexPath,
   getSiblingArray,
   setSiblingArray,
 } from "../../managers/DragHandlerManager";
-import { handleResizeStart } from "../resizeUtils";
+import {
+  applyColumnAutoFitWithAutoExpand,
+  handleResizeStart,
+} from "../resizeUtils";
+import { updateColumnWidthsInDOM } from "../resizeUtils/domUpdates";
 import { HeaderRenderContext } from "./types";
 import { addTrackedEventListener, throttle } from "./eventTracking";
 
+const DOUBLE_TAP_MS = 320;
+
+const getStyleRoot = (context: HeaderRenderContext): ParentNode | null => {
+  const main = context.mainBodyRef?.current;
+  if (!main) return null;
+  return main.closest(".simple-table-root") ?? main;
+};
+
 export const createResizeHandle = (
   header: HeaderObject,
   context: HeaderRenderContext,
-  isLastHeader: boolean,
+  isLastMainAutoExpandColumn: boolean,
 ): HTMLElement | null => {
   const { columnResizing } = context;
   const isSelectionColumn =
     header.isSelectionColumn && context.enableRowSelection;
 
-  if (!columnResizing || isSelectionColumn || isLastHeader) return null;
+  if (!columnResizing || isSelectionColumn) return null;
+
+  const dragDisabled =
+    Boolean(
+      isLastMainAutoExpandColumn &&
+        context.autoExpandColumns &&
+        !context.pinned,
+    );
 
   const resizeContainer = document.createElement("div");
   resizeContainer.className = "st-header-resize-handle-container";
   resizeContainer.setAttribute("role", "separator");
   resizeContainer.setAttribute("aria-label", `Resize ${header.label} column`);
   resizeContainer.setAttribute("aria-orientation", "vertical");
+  if (dragDisabled) {
+    resizeContainer.setAttribute("data-st-autofit-only", "true");
+  }
 
   const resizeHandle = document.createElement("div");
   resizeHandle.className = "st-header-resize-handle";
   resizeContainer.appendChild(resizeHandle);
 
-  const handleMouseDown = (event: MouseEvent) => {
-    const startWidth = document.getElementById(
+  const measureOptions = (leafHeader: HeaderObject) => ({
+    rows: context.rows,
+    header: leafHeader,
+    maxWidth: 500,
+    sampleSize: 50,
+    styleRoot: getStyleRoot(context),
+  });
+
+  const performAutoFit = () => {
+    const headerCell = document.getElementById(
       getCellId({ accessor: header.accessor, rowId: "header" }),
-    )?.offsetWidth;
+    );
 
-    throttle(() => {
-      handleResizeStart({
-        autoExpandColumns: context.autoExpandColumns,
-        collapsedHeaders: context.collapsedHeaders,
-        containerWidth: context.containerWidth,
-        event: event,
-        forceUpdate: context.forceUpdate,
+    if (context.autoExpandColumns) {
+      applyColumnAutoFitWithAutoExpand({
         header,
         headers: context.headers,
-        mainBodyRef: context.mainBodyRef,
-        onColumnWidthChange: context.onColumnWidthChange,
-        pinnedLeftRef: context.pinnedLeftRef,
-        pinnedRightRef: context.pinnedRightRef,
-        reverse: context.reverse,
-        setHeaders: context.setHeaders,
-        setIsResizing: context.setIsResizing,
-        startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
-      });
-    }, 10);
-  };
-
-  addTrackedEventListener(
-    resizeContainer,
-    "mousedown",
-    handleMouseDown as EventListener,
-  );
-
-  const handleTouchStart = (event: Event) => {
-    const touchEvent = event as globalThis.TouchEvent;
-    const startWidth = document.getElementById(
-      getCellId({ accessor: header.accessor, rowId: "header" }),
-    )?.offsetWidth;
-
-    throttle(() => {
-      handleResizeStart({
-        autoExpandColumns: context.autoExpandColumns,
         collapsedHeaders: context.collapsedHeaders,
         containerWidth: context.containerWidth,
-        event: touchEvent as any,
-        forceUpdate: context.forceUpdate,
-        header,
-        headers: context.headers,
         mainBodyRef: context.mainBodyRef,
-        onColumnWidthChange: context.onColumnWidthChange,
-        pinnedLeftRef: context.pinnedLeftRef,
-        pinnedRightRef: context.pinnedRightRef,
         reverse: context.reverse,
-        setHeaders: context.setHeaders,
-        setIsResizing: context.setIsResizing,
-        startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
+        headerCellElement: headerCell,
+        getTargetLeafWidth: (leafHeader) =>
+          calculateHeaderContentWidth(leafHeader.accessor, measureOptions(leafHeader)),
       });
-    }, 10);
-  };
-
-  addTrackedEventListener(resizeContainer, "touchstart", handleTouchStart);
+      const next = [...context.headers];
+      context.setHeaders(next);
+      if (context.onColumnWidthChange) {
+        context.onColumnWidthChange(next);
+      }
+      return;
+    }
 
-  const handleDoubleClick = () => {
-    const contentWidth = calculateHeaderContentWidth(header.accessor, {
-      rows: context.rows,
-      header,
-      maxWidth: 500,
-      sampleSize: 50,
-    });
+    const contentWidth = calculateHeaderContentWidth(header.accessor, measureOptions(header));
 
     const path = getHeaderIndexPath(context.headers, header.accessor);
     if (!path) return;
@@ -116,6 +104,17 @@ export const createResizeHandle = (
       path,
       updatedSiblings,
     );
+
+    updatedHeaders.forEach((h) => removeAllFractionalWidths(h));
+
+    const pathLeaf = updatedSiblings[headerIndex];
+    const override = new Map<string, number>();
+    if (pathLeaf && typeof pathLeaf.width === "number") {
+      override.set(String(pathLeaf.accessor), pathLeaf.width);
+    }
+
+    updateColumnWidthsInDOM(updatedHeaders, context.collapsedHeaders as Set<string>, override);
+
     context.setHeaders(updatedHeaders);
 
     if (context.onColumnWidthChange) {
@@ -123,10 +122,115 @@ export const createResizeHandle = (
     }
   };
 
+  let lastAutoFitAt = 0;
+  const runAutoFitDebounced = () => {
+    const now = Date.now();
+    if (now - lastAutoFitAt < 120) return;
+    lastAutoFitAt = now;
+    performAutoFit();
+  };
+
+  if (!dragDisabled) {
+    const handleMouseDown = (event: MouseEvent) => {
+      if (event.detail >= 2) {
+        event.preventDefault();
+        runAutoFitDebounced();
+        return;
+      }
+      const startWidth = document.getElementById(
+        getCellId({ accessor: header.accessor, rowId: "header" }),
+      )?.offsetWidth;
+
+      throttle(() => {
+        handleResizeStart({
+          autoExpandColumns: context.autoExpandColumns,
+          collapsedHeaders: context.collapsedHeaders,
+          containerWidth: context.containerWidth,
+          event: event,
+          forceUpdate: context.forceUpdate,
+          header,
+          headers: context.headers,
+          mainBodyRef: context.mainBodyRef,
+          onColumnWidthChange: context.onColumnWidthChange,
+          pinnedLeftRef: context.pinnedLeftRef,
+          pinnedRightRef: context.pinnedRightRef,
+          reverse: context.reverse,
+          setHeaders: context.setHeaders,
+          setIsResizing: context.setIsResizing,
+          startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
+        });
+      }, 10);
+    };
+
+    addTrackedEventListener(
+      resizeContainer,
+      "mousedown",
+      handleMouseDown as EventListener,
+    );
+
+    const handleTouchStart = (event: Event) => {
+      const touchEvent = event as globalThis.TouchEvent;
+      const startWidth = document.getElementById(
+        getCellId({ accessor: header.accessor, rowId: "header" }),
+      )?.offsetWidth;
+
+      throttle(() => {
+        handleResizeStart({
+          autoExpandColumns: context.autoExpandColumns,
+          collapsedHeaders: context.collapsedHeaders,
+          containerWidth: context.containerWidth,
+          event: touchEvent as any,
+          forceUpdate: context.forceUpdate,
+          header,
+          headers: context.headers,
+          mainBodyRef: context.mainBodyRef,
+          onColumnWidthChange: context.onColumnWidthChange,
+          pinnedLeftRef: context.pinnedLeftRef,
+          pinnedRightRef: context.pinnedRightRef,
+          reverse: context.reverse,
+          setHeaders: context.setHeaders,
+          setIsResizing: context.setIsResizing,
+          startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
+        });
+      }, 10);
+    };
+
+    addTrackedEventListener(resizeContainer, "touchstart", handleTouchStart);
+  } else {
+    const handleAutofitOnlyMouseDown = (event: MouseEvent) => {
+      if (event.detail >= 2) {
+        event.preventDefault();
+        runAutoFitDebounced();
+      }
+    };
+    addTrackedEventListener(
+      resizeContainer,
+      "mousedown",
+      handleAutofitOnlyMouseDown as EventListener,
+    );
+
+    let lastTouchEndTime = 0;
+    addTrackedEventListener(
+      resizeContainer,
+      "touchend",
+      ((e: TouchEvent) => {
+        const now = Date.now();
+        if (now - lastTouchEndTime < DOUBLE_TAP_MS) {
+          lastTouchEndTime = 0;
+          e.preventDefault();
+          runAutoFitDebounced();
+        } else {
+          lastTouchEndTime = now;
+        }
+      }) as EventListener,
+      { passive: false },
+    );
+  }
+
   addTrackedEventListener(
     resizeContainer,
     "dblclick",
-    handleDoubleClick as EventListener,
+    runAutoFitDebounced as EventListener,
   );
 
   return resizeContainer;
diff --git a/packages/core/src/utils/headerCell/styling.ts b/packages/core/src/utils/headerCell/styling.ts
index 680923ab7..692efd078 100644
--- a/packages/core/src/utils/headerCell/styling.ts
+++ b/packages/core/src/utils/headerCell/styling.ts
@@ -18,7 +18,7 @@ import { addTrackedEventListener } from "./eventTracking";
 export const calculateHeaderCellClasses = (
   cell: AbsoluteCell,
   context: HeaderRenderContext,
-  isLastHeader: boolean,
+  isLastMainAutoExpandColumn: boolean,
 ): string => {
   const { header, colIndex, parentHeader } = cell;
   const {
@@ -89,7 +89,7 @@ export const calculateHeaderCellClasses = (
     enableHeaderEditing && !isSelectionColumn ? "st-header-editable" : "",
     isHeaderSelected ? "st-header-selected" : "",
     hasHighlightedCell && !isHeaderSelected ? "st-header-has-highlighted-cell" : "",
-    isLastHeader ? "st-no-resize" : "",
+    isLastMainAutoExpandColumn && !context.columnResizing ? "st-no-resize" : "",
   ]
     .filter(Boolean)
     .join(" ");
@@ -98,7 +98,7 @@ export const calculateHeaderCellClasses = (
 export const createHeaderCellElement = (
   cell: AbsoluteCell,
   context: HeaderRenderContext,
-  isLastHeader: boolean,
+  isLastMainAutoExpandColumn: boolean,
 ): HTMLElement => {
   const { header, colIndex } = cell;
   const { reverse } = context;
@@ -106,7 +106,11 @@ export const createHeaderCellElement = (
   const isSelectionColumn = header.isSelectionColumn && context.enableRowSelection;
 
   // Get class names
-  const classNames = calculateHeaderCellClasses(cell, context, isLastHeader);
+  const classNames = calculateHeaderCellClasses(
+    cell,
+    context,
+    isLastMainAutoExpandColumn,
+  );
 
   const cellElement = document.createElement("div");
   cellElement.className = classNames;
@@ -149,7 +153,11 @@ export const createHeaderCellElement = (
   const collapseIcon = createCollapseIcon(header, context);
 
   if (reverse) {
-    const resizeHandle = createResizeHandle(header, context, isLastHeader);
+    const resizeHandle = createResizeHandle(
+      header,
+      context,
+      isLastMainAutoExpandColumn,
+    );
     if (resizeHandle) {
       cellElement.appendChild(resizeHandle);
     }
@@ -219,7 +227,11 @@ export const createHeaderCellElement = (
   }
 
   if (!reverse) {
-    const resizeHandle = createResizeHandle(header, context, isLastHeader);
+    const resizeHandle = createResizeHandle(
+      header,
+      context,
+      isLastMainAutoExpandColumn,
+    );
     if (resizeHandle) {
       cellElement.appendChild(resizeHandle);
     }
@@ -255,12 +267,16 @@ export const updateHeaderCellElement = (
   cellElement: HTMLElement,
   cell: AbsoluteCell,
   context: HeaderRenderContext,
-  isLastHeader: boolean,
+  isLastMainAutoExpandColumn: boolean,
 ): void => {
   const { header } = cell;
 
   // Update classes to reflect current state
-  cellElement.className = calculateHeaderCellClasses(cell, context, isLastHeader);
+  cellElement.className = calculateHeaderCellClasses(
+    cell,
+    context,
+    isLastMainAutoExpandColumn,
+  );
 
   // Update position (may have changed due to column resize or scroll)
   cellElement.style.left = `${cell.left}px`;
diff --git a/packages/core/src/utils/headerCellRenderer.ts b/packages/core/src/utils/headerCellRenderer.ts
index 65d99e357..4457c0b73 100644
--- a/packages/core/src/utils/headerCellRenderer.ts
+++ b/packages/core/src/utils/headerCellRenderer.ts
@@ -79,17 +79,21 @@ export const renderHeaderCells = (
 
   // Batch create new cells using DocumentFragment
   const fragment = document.createDocumentFragment();
-  const cellsToCreate: Array<{ cell: AbsoluteCell; cellId: string; isLastHeader: boolean }> = [];
+  const cellsToCreate: Array<{
+    cell: AbsoluteCell;
+    cellId: string;
+    isLastMainAutoExpandColumn: boolean;
+  }> = [];
 
   // First pass: identify cells to create vs update
   cellsToRender.forEach((cell) => {
     const cellId = getCellId({ accessor: cell.header.accessor, rowId: "header" });
-    const isLastHeader = Boolean(
+    const isLastMainAutoExpandColumn = Boolean(
       context.autoExpandColumns && !context.pinned && cell.colIndex === lastHeaderIndex,
     );
 
     if (!renderedCells.has(cellId)) {
-      cellsToCreate.push({ cell, cellId, isLastHeader });
+      cellsToCreate.push({ cell, cellId, isLastMainAutoExpandColumn });
     } else {
       // Use cached position to detect change (avoid DOM reads / layout thrash)
       const cellElement = renderedCells.get(cellId)!;
@@ -124,7 +128,11 @@ export const renderHeaderCells = (
       }
 
       // Update classes when context changes (e.g. column selection → st-header-selected)
-      const newClassNames = calculateHeaderCellClasses(cell, context, isLastHeader);
+      const newClassNames = calculateHeaderCellClasses(
+        cell,
+        context,
+        isLastMainAutoExpandColumn,
+      );
       if (cellElement.className !== newClassNames) {
         cellElement.className = newClassNames;
       }
@@ -138,8 +146,12 @@ export const renderHeaderCells = (
   });
 
   // Second pass: batch create new cells (seed position cache so next update doesn't read DOM)
-  cellsToCreate.forEach(({ cell, cellId, isLastHeader }) => {
-    const cellElement = createHeaderCellElement(cell, context, isLastHeader);
+  cellsToCreate.forEach(({ cell, cellId, isLastMainAutoExpandColumn }) => {
+    const cellElement = createHeaderCellElement(
+      cell,
+      context,
+      isLastMainAutoExpandColumn,
+    );
     fragment.appendChild(cellElement);
     renderedCells.set(cellId, cellElement);
     positionCache.set(cellId, {
diff --git a/packages/core/src/utils/headerWidthUtils.ts b/packages/core/src/utils/headerWidthUtils.ts
index 9bf53ed34..2869c6ff1 100644
--- a/packages/core/src/utils/headerWidthUtils.ts
+++ b/packages/core/src/utils/headerWidthUtils.ts
@@ -333,9 +333,13 @@ export const calculateHeaderContentWidth = (
     header?: HeaderObject; // Header object for valueFormatter/valueGetter
     maxWidth?: number; // Maximum width (default: 500px)
     sampleSize?: number; // Number of rows to sample (default: 50)
+    /** Scope `.st-cell-content` font/padding sampling to this table instance */
+    styleRoot?: ParentNode | null;
   },
 ): number => {
-  const { rows, header, maxWidth = 500, sampleSize = 50 } = options || {};
+  const { rows, header, maxWidth = 500, sampleSize = 50, styleRoot } =
+    options || {};
+  const domQueryRoot: ParentNode = styleRoot ?? document;
   // Get the header cell element from the DOM
   const headerCellElement = document.getElementById(getCellId({ accessor, rowId: "header" }));
 
@@ -449,7 +453,9 @@ export const calculateHeaderContentWidth = (
     // Copy font styles from a sample cell content span
     let cellPaddingLeft = 0;
     let cellPaddingRight = 0;
-    const sampleCellContent = document.querySelector(".st-cell-content") as HTMLElement;
+    const sampleCellContent = domQueryRoot.querySelector(
+      ".st-cell-content",
+    ) as HTMLElement | null;
     if (sampleCellContent) {
       const cellStyle = window.getComputedStyle(sampleCellContent);
       tempDiv.style.font = cellStyle.font;
@@ -520,5 +526,5 @@ export const calculateHeaderContentWidth = (
   // Add a small buffer to account for rounding and browser rendering differences
   const buffer = 2;
 
-  return optimalWidth + buffer;
+  return Math.max(optimalWidth + buffer, MIN_COLUMN_WIDTH);
 };
diff --git a/packages/core/src/utils/resizeUtils/index.ts b/packages/core/src/utils/resizeUtils/index.ts
index c6704d0e3..297ef35fe 100644
--- a/packages/core/src/utils/resizeUtils/index.ts
+++ b/packages/core/src/utils/resizeUtils/index.ts
@@ -1,4 +1,5 @@
 import type HeaderObject from "../../types/HeaderObject";
+import type { Accessor } from "../../types/HeaderObject";
 import type { HandleResizeStartProps } from "../../types/HandleResizeStartProps";
 import {
   findLeafHeaders,
@@ -365,3 +366,196 @@ export const handleResizeStart = ({
     document.addEventListener("mouseup", handleMouseUp);
   }
 };
+
+export type ApplyColumnAutoFitWithAutoExpandParams = {
+  collapsedHeaders: Set<Accessor>;
+  containerWidth: number;
+  getTargetLeafWidth: (leafHeader: HeaderObject) => number;
+  header: HeaderObject;
+  headerCellElement: HTMLElement | null;
+  headers: HeaderObject[];
+  mainBodyRef: HandleResizeStartProps["mainBodyRef"];
+  reverse: boolean;
+};
+
+/**
+ * Apply a one-shot "fit to content" width for a column while preserving autoExpand
+ * compensation (same redistribution rules as dragging the resize handle).
+ */
+export const applyColumnAutoFitWithAutoExpand = ({
+  header,
+  headers,
+  collapsedHeaders,
+  containerWidth,
+  mainBodyRef,
+  reverse,
+  headerCellElement,
+  getTargetLeafWidth,
+}: ApplyColumnAutoFitWithAutoExpandParams): void => {
+  if (!header || header.hide) return;
+
+  const effectiveContainerWidth = resolveContainerWidthForResize(
+    containerWidth,
+    mainBodyRef,
+  );
+
+  const rootPinned = getRootPinned(header, headers);
+
+  const isParentHeader = Boolean(header.children && header.children.length > 0);
+  let childrenToResize: HeaderObject[];
+  if (isParentHeader) {
+    const visibleChildren = findLeafHeaders(header, collapsedHeaders);
+    childrenToResize = visibleChildren.length > 0 ? visibleChildren : [header];
+  } else {
+    childrenToResize = [header];
+  }
+
+  const initialWidthsMap = new Map<string, number>();
+  let sectionWidth = 0;
+  let initialMainAvailable = 0;
+
+  const sectionHeaders = headers.filter((h) => h.pinned === rootPinned);
+  const sectionLeafHeaders = getAllVisibleLeafHeaders(
+    sectionHeaders,
+    collapsedHeaders,
+  );
+  sectionLeafHeaders.forEach((h) => {
+    const width = getHeaderWidthInPixels(h);
+    initialWidthsMap.set(h.accessor as string, width);
+  });
+
+  if (effectiveContainerWidth > 0) {
+    const { leftWidth, rightWidth, mainWidth } = recalculateAllSectionWidths({
+      headers,
+      containerWidth: effectiveContainerWidth,
+      collapsedHeaders,
+    });
+
+    if (rootPinned === "left") {
+      sectionWidth = leftWidth;
+    } else if (rootPinned === "right") {
+      sectionWidth = rightWidth;
+    } else {
+      sectionWidth = mainWidth;
+    }
+
+    initialMainAvailable = effectiveContainerWidth - leftWidth - rightWidth;
+  }
+
+  let isBoundaryResize = false;
+  const mainInitialWidths = new Map<string, number>();
+  let mainLeafHeaders: HeaderObject[] = [];
+
+  if (rootPinned && effectiveContainerWidth > 0) {
+    const sectionLeafs = getAllVisibleLeafHeaders(
+      headers.filter((h) => h.pinned === rootPinned),
+      collapsedHeaders,
+    );
+
+    if (sectionLeafs.length > 0) {
+      let atBoundary = false;
+
+      if (childrenToResize.length > 1) {
+        const firstIdx = sectionLeafs.findIndex(
+          (h) => h.accessor === childrenToResize[0].accessor,
+        );
+        const lastIdx = sectionLeafs.findIndex(
+          (h) =>
+            h.accessor ===
+            childrenToResize[childrenToResize.length - 1].accessor,
+        );
+        atBoundary =
+          (rootPinned === "left" && lastIdx === sectionLeafs.length - 1) ||
+          (rootPinned === "right" && firstIdx === 0);
+      } else {
+        const target = childrenToResize[0] || header;
+        const idx = sectionLeafs.findIndex((h) => h.accessor === target.accessor);
+        atBoundary =
+          (rootPinned === "left" && idx === sectionLeafs.length - 1) ||
+          (rootPinned === "right" && idx === 0);
+      }
+
+      if (atBoundary) {
+        isBoundaryResize = true;
+        const mainHeaders = headers.filter((h) => !h.pinned);
+        mainLeafHeaders = getAllVisibleLeafHeaders(mainHeaders, collapsedHeaders);
+        mainLeafHeaders.forEach((h) => {
+          mainInitialWidths.set(h.accessor as string, getHeaderWidthInPixels(h));
+        });
+      }
+    }
+  }
+
+  const targetTotal = childrenToResize.reduce(
+    (sum, h) => sum + getTargetLeafWidth(h),
+    0,
+  );
+
+  const startWidth =
+    headerCellElement?.offsetWidth ??
+    childrenToResize.reduce((sum, h) => sum + getHeaderWidthInPixels(h), 0);
+
+  const headerToResize =
+    childrenToResize.length > 0
+      ? childrenToResize[childrenToResize.length - 1]
+      : header;
+
+  const delta = targetTotal - startWidth;
+
+  handleResizeWithAutoExpand({
+    childrenToResize,
+    collapsedHeaders,
+    containerWidth: effectiveContainerWidth,
+    delta,
+    headers,
+    initialWidthsMap,
+    isParentResize: childrenToResize.length > 1,
+    resizedHeader: headerToResize,
+    reverse,
+    rootPinned,
+    sectionHeaders,
+    sectionWidth,
+    startWidth,
+  });
+
+  if (isBoundaryResize && mainLeafHeaders.length > 0) {
+    const childDelta = childrenToResize.reduce((sum, h) => {
+      const initW = initialWidthsMap.get(h.accessor as string) || 0;
+      const newW = typeof h.width === "number" ? h.width : initW;
+      return sum + (newW - initW);
+    }, 0);
+
+    const newMainAvailable = Math.max(0, initialMainAvailable - childDelta);
+    const initialMainTotal = Array.from(mainInitialWidths.values()).reduce(
+      (a, b) => a + b,
+      0,
+    );
+
+    if (newMainAvailable > 0 && initialMainTotal > 0) {
+      const scale = newMainAvailable / initialMainTotal;
+      let acc = 0;
+      mainLeafHeaders.forEach((h, i) => {
+        const initW = mainInitialWidths.get(h.accessor as string) || 100;
+        if (i === mainLeafHeaders.length - 1) {
+          h.width = newMainAvailable - acc;
+        } else {
+          h.width = Math.round(initW * scale);
+          acc += h.width as number;
+        }
+      });
+    }
+  }
+
+  const overrideWidths = new Map<string, number>();
+  childrenToResize.forEach((h) => {
+    if (typeof h.width === "number")
+      overrideWidths.set(h.accessor as string, h.width);
+  });
+  if (isBoundaryResize) {
+    mainLeafHeaders.forEach((h) => {
+      if (typeof h.width === "number")
+        overrideWidths.set(h.accessor as string, h.width);
+    });
+  }
+  updateColumnWidthsInDOM(headers, collapsedHeaders, overrideWidths);
+};
diff --git a/packages/core/stories/tests/13-ColumnResizeTests.stories.ts b/packages/core/stories/tests/13-ColumnResizeTests.stories.ts
index b9d29a154..789d9f517 100644
--- a/packages/core/stories/tests/13-ColumnResizeTests.stories.ts
+++ b/packages/core/stories/tests/13-ColumnResizeTests.stories.ts
@@ -281,6 +281,7 @@ export const OnColumnWidthChangeCallbackFires = {
 // ============================================================================
 
 export const DoubleClickResizeHandleAutoFit = {
+  parameters: { tags: ["column-resize-double-click-autofit"] },
   render: () => {
     const headers: HeaderObject[] = [
       { accessor: "id", label: "ID", width: 300, type: "number" },
@@ -298,17 +299,35 @@ export const DoubleClickResizeHandleAutoFit = {
     const idHeader = findHeaderCellByLabel(canvasElement, "ID");
     expect(idHeader).toBeTruthy();
 
-    const resizeHandle = idHeader!.querySelector<HTMLElement>(".st-header-resize-handle");
+    const resizeHandle = idHeader!.querySelector<HTMLElement>(".st-header-resize-handle-container");
     expect(resizeHandle).toBeTruthy();
 
-    // Dispatch dblclick on resize handle — verifies no errors are thrown
+    const initialWidth = idHeader!.getBoundingClientRect().width;
+
     resizeHandle!.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
     await new Promise((r) => setTimeout(r, 400));
 
-    // After a double-click the table re-renders and creates new DOM nodes.
-    // The old element references may be detached, so verify by querying the live DOM.
-    const headerStillPresent = canvasElement.querySelector(".st-header-cell") !== null;
-    expect(headerStillPresent).toBe(true);
+    const idAfter = findHeaderCellByLabel(canvasElement, "ID");
+    expect(idAfter).toBeTruthy();
+    const finalWidth = idAfter!.getBoundingClientRect().width;
+
+    // ID was 300px; numeric ids and header fit in far less — auto-fit must shrink the column.
+    expect(finalWidth).toBeLessThan(initialWidth - 15);
+
+    const storeHeader = findHeaderCellByLabel(canvasElement, "Store Name");
+    expect(storeHeader).toBeTruthy();
+    const storeResize = storeHeader!.querySelector<HTMLElement>(
+      ".st-header-resize-handle-container",
+    );
+    expect(storeResize).toBeTruthy();
+    const storeInitial = storeHeader!.getBoundingClientRect().width;
+    storeResize!.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+    await new Promise((r) => setTimeout(r, 400));
+    const storeAfter = findHeaderCellByLabel(canvasElement, "Store Name");
+    expect(storeAfter).toBeTruthy();
+    const storeFinal = storeAfter!.getBoundingClientRect().width;
+    // Store Name started at 100px; row values are long store names — expect meaningful growth.
+    expect(storeFinal).toBeGreaterThan(storeInitial + 10);
   },
 };
 
diff --git a/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts b/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
index bc1ccd7b9..8b56b3b1e 100644
--- a/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
+++ b/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
@@ -2292,16 +2292,16 @@ export const AutoExpandResizeDualPinnedMaxClamp = {
 export const AutoExpandDoubleClickResizePinned = {
   parameters: { tags: ["auto-expand-double-click-resize-pinned"] },
   render: () => {
-    const headers: HeaderObject[] = [
+    const headersNarrowEmail: HeaderObject[] = [
       { accessor: "id", label: "ID", width: 70, pinned: "left", type: "number" },
-      { accessor: "name", label: "Name", width: 200, pinned: "left", type: "string" },
-      { accessor: "email", label: "Email", width: 170, type: "string" },
+      { accessor: "name", label: "Name", width: 320, pinned: "left", type: "string" },
+      { accessor: "email", label: "Email", width: 55, type: "string" },
       { accessor: "department", label: "Department", width: 140, type: "string" },
       { accessor: "position", label: "Position", width: 130, type: "string" },
       { accessor: "salary", label: "Salary", width: 100, pinned: "right", type: "number" },
       { accessor: "projects", label: "Projects", width: 80, pinned: "right", type: "number" },
     ];
-    const { wrapper } = renderVanillaTable(headers, createEmployeeData(), {
+    const { wrapper } = renderVanillaTable(headersNarrowEmail, createEmployeeData(), {
       getRowId: (p: { row?: { id?: unknown } }) => String(p.row?.id),
       height: "400px",
       autoExpandColumns: true,
@@ -2317,8 +2317,9 @@ export const AutoExpandDoubleClickResizePinned = {
     // Double-click on the pinned "Name" resize handle
     const nameHeader = findHeaderCellByLabel(canvasElement, "Name");
     expect(nameHeader).toBeTruthy();
+    const nameWidthBefore = nameHeader!.getBoundingClientRect().width;
     const resizeHandle = nameHeader!.querySelector<HTMLElement>(
-      ".st-header-resize-handle",
+      ".st-header-resize-handle-container",
     );
     expect(resizeHandle).toBeTruthy();
     resizeHandle!.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
@@ -2333,17 +2334,27 @@ export const AutoExpandDoubleClickResizePinned = {
       expect(Number.isNaN(w)).toBe(false);
     });
 
-    // Double-click on a main section column too
+    const nameAfterFirst = findHeaderCellByLabel(canvasElement, "Name");
+    expect(nameAfterFirst).toBeTruthy();
+    const nameWidthAfterFirst = nameAfterFirst!.getBoundingClientRect().width;
+    expect(nameWidthAfterFirst).toBeLessThan(nameWidthBefore - 8);
+
+    // Double-click on a main section column too (Email deliberately too narrow)
     const emailHeader = findHeaderCellByLabel(canvasElement, "Email");
     if (emailHeader) {
       const emailResize = emailHeader.querySelector<HTMLElement>(
-        ".st-header-resize-handle",
+        ".st-header-resize-handle-container",
       );
       if (emailResize) {
+        const emailWBefore = emailHeader.getBoundingClientRect().width;
         emailResize.dispatchEvent(
           new MouseEvent("dblclick", { bubbles: true }),
         );
         await new Promise((r) => setTimeout(r, 400));
+        const emailAfter = findHeaderCellByLabel(canvasElement, "Email");
+        expect(emailAfter).toBeTruthy();
+        const emailWAfter = emailAfter!.getBoundingClientRect().width;
+        expect(emailWAfter).toBeGreaterThan(emailWBefore + 8);
       }
     }
 
@@ -2358,6 +2369,55 @@ export const AutoExpandDoubleClickResizePinned = {
   },
 };
 
+/** Last main column: double-click-only handle (no drag) still auto-fits under autoExpand. */
+export const AutoExpandDoubleClickLastMainColumnAutoFit = {
+  parameters: { tags: ["auto-expand-double-click-last-main"] },
+  render: () => {
+    const headers: HeaderObject[] = [
+      { accessor: "title", label: "Title", width: 520, type: "string" },
+      { accessor: "notes", label: "Notes", width: 72, type: "string" },
+    ];
+    const rows: Row[] = [
+      {
+        id: 1,
+        title: "A",
+        notes: "This is a much longer note that needs more horizontal space than seventy pixels",
+      },
+      {
+        id: 2,
+        title: "B",
+        notes: "Another lengthy notes field used for column width measurement",
+      },
+    ];
+    const { wrapper } = renderVanillaTable(headers, rows, {
+      getRowId: (p: { row?: { id?: unknown } }) => String(p.row?.id),
+      height: "300px",
+      autoExpandColumns: true,
+      columnResizing: true,
+    });
+    wrapper.style.width = "920px";
+    wrapper.style.boxSizing = "border-box";
+    return wrapper;
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await waitForTable();
+    const notesHeader = findHeaderCellByLabel(canvasElement, "Notes");
+    expect(notesHeader).toBeTruthy();
+    expect(notesHeader!.querySelector("[data-st-autofit-only]")).toBeTruthy();
+    const handle = notesHeader!.querySelector<HTMLElement>(
+      ".st-header-resize-handle-container",
+    );
+    expect(handle).toBeTruthy();
+    const wBefore = notesHeader!.getBoundingClientRect().width;
+    handle!.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+    await new Promise((r) => setTimeout(r, 450));
+    const notesAfter = findHeaderCellByLabel(canvasElement, "Notes");
+    expect(notesAfter).toBeTruthy();
+    const wAfter = notesAfter!.getBoundingClientRect().width;
+    expect(wAfter).toBeGreaterThan(wBefore + 12);
+  },
+};
+
 /** Stress test: resize across pinned and main sections in sequence, growing and shrinking. */
 export const AutoExpandResizePinnedAndMainStress = {
   parameters: { tags: ["auto-expand-resize-pinned-and-main-stress"] },
diff --git a/packages/core/styles.css b/packages/core/styles.css
index 2741faba1..d8b579c3e 100644
--- a/packages/core/styles.css
+++ b/packages/core/styles.css
@@ -1 +1 @@
-.st-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.simple-table-root{--st-after-width:11.01px;--st-resize-handle-width:2px;--st-resize-handle-container-width:10px;--st-border-width:1px;--st-footer-height:49px;--st-transition-duration:0.2s;--st-transition-ease:ease;--st-opacity-disabled:0.5;--st-white:#fff;--st-black:#000;--st-slate-50:#f8fafc;--st-slate-100:#f1f5f9;--st-slate-200:#e2e8f0;--st-slate-300:#cbd5e1;--st-slate-400:#94a3b8;--st-slate-500:#64748b;--st-slate-600:#475569;--st-slate-800:#1e293b;--st-slate-900:#0f172a;--st-gray-100:#f3f4f6;--st-gray-200:#e5e7eb;--st-gray-300:#d1d5db;--st-gray-400:#9ca3af;--st-gray-500:#6b7280;--st-gray-600:#4b5563;--st-gray-700:#374151;--st-gray-800:#1f2937;--st-gray-900:#111827;--st-neutral-50:#fafafa;--st-neutral-100:#f5f5f5;--st-neutral-200:#e5e5e5;--st-neutral-300:#d4d4d4;--st-neutral-400:#a3a3a3;--st-neutral-500:#737373;--st-neutral-600:#525252;--st-neutral-800:#262626;--st-neutral-900:#171717;--st-stone-100:#f5f5f4;--st-stone-200:#e7e5e4;--st-stone-300:#d6d3d1;--st-stone-400:#a8a29e;--st-stone-500:#78716c;--st-stone-700:#44403c;--st-red-300:#fca5a5;--st-red-400:#f87171;--st-orange-400:#fb923c;--st-amber-50:#fffbeb;--st-amber-100:#fef3c7;--st-amber-200:#fde68a;--st-emerald-400:#34d399;--st-emerald-500:#10b981;--st-emerald-600:#059669;--st-teal-400:#2dd4bf;--st-teal-500:#14b8a6;--st-teal-600:#0d9488;--st-sky-100:#e0f2fe;--st-sky-200:#bae6fd;--st-sky-300:#7dd3fc;--st-sky-400:#38bdf8;--st-blue-50:#eff6ff;--st-blue-100:#dbeafe;--st-blue-200:#bfdbfe;--st-blue-300:#93c5fd;--st-blue-400:#60a5fa;--st-blue-500:#3b82f6;--st-blue-600:#2563eb;--st-blue-800:#1e40af;--st-blue-900:#1e3a8a;--st-blue-950:#172554;--st-violet-50:#f5f3ff;--st-violet-100:#ede9fe;--st-violet-200:#ddd6fe;--st-violet-400:#a78bfa;--st-violet-500:#8b5cf6;--st-violet-600:#7c3aed;--st-violet-800:#5b21b6}.simple-table-root *{scrollbar-thumb-border-radius:var(--st-scrollbar-thumb-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit;scrollbar-color:var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);scrollbar-width:var(--st-scrollbar-width)}input{color:#000}.simple-table-root ::-webkit-scrollbar{height:8px;width:8px}.simple-table-root ::-webkit-scrollbar-track{background:var(--st-scrollbar-bg-color)}.simple-table-root ::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-color);border-radius:4px}.simple-table-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--st-cell-color)}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);overflow:hidden;position:relative}.st-wrapper-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.st-content-wrapper,.st-wrapper-container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.st-content-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.st-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.st-content,.st-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.st-header-container,.st-header-container.st-header-scroll-padding:after{-ms-flex-negative:0;background-color:var(--st-header-background-color);flex-shrink:0}.st-header-container.st-header-scroll-padding:after{content:"";display:block;width:default-width;width:var(--st-after-width,default-width)}.st-header-container.st-header-scroll-padding:after,.st-header-main,.st-header-pinned-left,.st-header-pinned-right{border-bottom:var(--st-border-width) solid var(--st-border-color)}.st-header-grid{min-width:100%;position:relative}.st-body-main,.st-body-pinned-left,.st-body-pinned-right,.st-header-main,.st-header-pinned-left,.st-header-pinned-right,.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-middle,.st-horizontal-scrollbar-right{overflow:auto;-ms-touch-action:auto;touch-action:auto}.st-body-main,.st-body-pinned-left,.st-body-pinned-right,.st-header-main,.st-header-pinned-left,.st-header-pinned-right{scrollbar-width:none}.st-body-pinned-left,.st-body-pinned-right,.st-header-pinned-left,.st-header-pinned-right{-ms-flex-negative:0;flex-shrink:0}.st-body-pinned-left,.st-header-pinned-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-body-pinned-right,.st-header-pinned-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-header-main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.st-header-main,.st-header-pinned-left,.st-header-pinned-right{overflow-x:auto;overflow-y:hidden}.st-header-main::-webkit-scrollbar{display:none}.st-body-container{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-overflow-scrolling:touch;background-color:var(--st-even-row-background-color);flex-grow:1;height:-webkit-max-content;height:-moz-max-content;height:max-content;overflow:auto;-ms-touch-action:auto;touch-action:auto;width:100%}.st-body-container,.st-sticky-top{display:-webkit-box;display:-ms-flexbox;display:flex}.st-sticky-top{left:0;pointer-events:none;position:absolute;top:0;z-index:10}.st-sticky-section-left,.st-sticky-section-main,.st-sticky-section-right{overflow:hidden;pointer-events:none}.st-sticky-section-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-sticky-section-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-empty-state-wrapper{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:200px;width:100%}.st-empty-state,.st-empty-state-wrapper{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.st-empty-state{-ms-flex-align:center;-ms-flex-pack:center;color:var(--st-header-text-color);font-size:.9em;opacity:.6;padding:48px 24px}.st-body-main,.st-body-pinned-left,.st-body-pinned-right{display:grid;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-height:100%}.st-body-main::-webkit-scrollbar{display:none}.st-row{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--st-even-row-background-color);display:grid;min-width:100%;position:absolute;-webkit-transition:background .2s ease;transition:background .2s ease}.st-row.st-sticky-parent{z-index:5}.st-sticky-top .st-row.even{background-color:var(--st-even-row-background-color)}.st-sticky-top .st-row.odd{background-color:var(--st-odd-row-background-color)}.st-sticky-top .st-row.selected{background-color:var(--st-selected-row-background-color)}.st-row.hovered .st-cell-editing,.st-row.hovered .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first),.st-sticky-top .st-row.hovered:not(.st-cell-editing):not(.st-cell-column-selected):not(.st-cell-column-selected-last):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-row.hovered .st-cell.st-sub-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-sub-cell-hover-background-color)}.st-row.even{background-color:var(--st-even-row-background-color)}.st-row.odd{background-color:var(--st-odd-row-background-color)}.st-row.selected{background-color:var(--st-selected-row-background-color)}.st-row.selected.hovered .st-cell-editing,.st-row.selected.hovered .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-nested-grid-row{padding-left:8px;padding-right:8px}.st-cell-content{display:-webkit-box;display:-ms-flexbox;display:flex}.st-row.odd .st-cell-content{color:var(--st-cell-odd-row-color)}.st-row.even .st-cell-content{color:var(--st-cell-color)}.st-cell.st-cell-even-row{background-color:var(--st-even-row-background-color)}.st-cell.st-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-cell.st-cell-even-row .st-cell-content{color:var(--st-cell-color)}.st-cell.st-cell-odd-row .st-cell-content{color:var(--st-cell-odd-row-color)}.st-cell.st-cell-selected-row{background-color:var(--st-selected-row-background-color)}.st-cell.st-row-hovered:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-header-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:var(--st-font-weight-bold);gap:var(--st-spacing-small);top:0}.st-header-cell.parent{border-bottom:var(--st-border-width) solid var(--st-border-color)}.st-header-cell.st-sub-header{background-color:var(--st-sub-header-background-color)}.st-cell.st-sub-cell{background-color:var(--st-sub-cell-background-color)}.st-header-cell.clickable,.st-header-cell.st-header-editable{cursor:pointer}.st-header-cell.draggable{cursor:-webkit-grab;cursor:grab}.st-header-cell.st-header-selected{background-color:var(--st-header-selected-background-color)}.st-header-cell.st-header-selected .st-header-label-text{color:var(--st-header-selected-label-color)}.st-header-cell.st-header-selected .st-header-icon,.st-header-cell.st-header-selected .st-icon-container *{fill:var(--st-header-selected-icon-color);background-color:var(--st-header-selected-icon-color)}.st-header-cell.st-header-selected .st-icon-container{color:var(--st-header-selected-icon-color)}.st-header-cell.st-header-selected .st-header-resize-handle{background-color:var(--st-resize-handle-selected-color)}.st-header-cell.st-header-has-highlighted-cell{background-color:var(--st-header-highlight-indicator-color)}.st-cell,.st-header-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:initial;color:var(--st-cell-color);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);overflow:hidden;position:relative}.st-cell.left-aligned,.st-header-cell.left-aligned{padding-left:var(--st-cell-padding);text-align:left}.st-cell.center-aligned,.st-cell.center-aligned>.st-cell-content,.st-header-cell.center-aligned,.st-header-cell.center-aligned>.st-header-label-text{text-align:center}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{height:100%;width:100%}.st-cell-editing{position:relative}.st-header-label{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:1;height:100%;min-width:0;overflow:hidden}.st-cell-content,.st-header-label-text{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:100%}.st-header-label-text{color:var(--st-header-label-color);font-weight:600;overflow:hidden;padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding);text-overflow:ellipsis;white-space:nowrap}.st-cell-content.left-aligned,.st-header-label-text.left-aligned{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}.st-cell-content.center-aligned,.st-header-label-text.center-aligned{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.st-cell-content.right-aligned,.st-header-label-text.right-aligned{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right}.st-not-resizeable .st-cell-content{padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding)}.st-resizeable .st-body-pinned-right .st-cell-content,.st-resizeable .st-sticky-section-right .st-cell-content{padding-left:calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width));padding-right:var(--st-cell-padding)}.st-resizeable .st-body-main .st-cell-content,.st-resizeable .st-body-pinned-left .st-cell-content,.st-resizeable .st-sticky-section-left .st-cell-content,.st-resizeable .st-sticky-section-main .st-cell-content{padding-left:var(--st-cell-padding);padding-right:calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width))}.st-resizeable .st-selection-cell .st-cell-content{padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding)}.st-selection-cell.st-selection-has-highlighted-cell{background-color:var(--st-selection-highlight-indicator-color)}.st-cell{border:var(--st-border-width) solid #0000}.st-cell:focus,.st-cell:focus-visible{outline:none}.st-cell.even-column:not(.st-cell-selected){background-color:var(--st-even-column-background-color)}.st-cell.odd-column:not(.st-cell-selected){background-color:var(--st-odd-column-background-color)}.st-cell-depth-1{padding-left:calc(var(--st-cell-padding)*4)}.st-cell-depth-2{padding-left:calc(var(--st-cell-padding)*8)}.st-cell-depth-3{padding-left:calc(var(--st-cell-padding)*12)}.st-cell-depth-4{padding-left:calc(var(--st-cell-padding)*16)}.st-cell-depth-5{padding-left:calc(var(--st-cell-padding)*20)}.st-cell-depth-6{padding-left:calc(var(--st-cell-padding)*24)}.st-cell-depth-7{padding-left:calc(var(--st-cell-padding)*28)}.st-cell-depth-1 .st-cell-content{color:rgb(from var(--st-cell-color) r g b/80%)!important}.st-cell-depth-2 .st-cell-content,.st-cell-depth-3 .st-cell-content,.st-cell-depth-4 .st-cell-content,.st-cell-depth-5 .st-cell-content,.st-cell-depth-6 .st-cell-content,.st-cell-depth-7 .st-cell-content{color:rgb(from var(--st-cell-color) r g b/70%)!important}.st-icon-container{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin-left:4px;-webkit-transition:outline .2s ease;transition:outline .2s ease}.st-icon-container:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:2px}.st-collapse-icon-container{cursor:pointer}.st-expand-icon{fill:var(--st-header-label-color);cursor:pointer}.st-header-resize-handle-container{-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;cursor:col-resize;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--st-resize-handle-container-width)}.st-header-resize-handle{background-color:var(--st-resize-handle-color);height:calc(100% - 20px);width:var(--st-resize-handle-width)}.st-header-cell.st-no-resize{padding-right:var(--st-resize-handle-container-width)}.st-row-separator{background-color:var(--st-border-color);cursor:pointer;height:1px;min-width:100%;position:absolute;width:100%}.st-row-separator.st-last-group-row{background-color:var(--st-last-group-row-separator-border-color)}.st-dragging:not(.st-sub-header){background-color:var(--st-dragging-background-color)}.st-dragging.st-sub-header{background-color:var(--st-dragging-sub-header-background-color)}.st-loading-skeleton{-webkit-animation:st-skeleton-pulse 1.5s ease-in-out infinite;animation:st-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--st-loading-skeleton-bg-color);border-radius:4px;height:16px;width:80%}@-webkit-keyframes st-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes st-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.st-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-selected .st-cell-content{color:var(--st-selected-cell-color)!important}.st-cell-selected-first{background-color:var(--st-selected-first-cell-background-color);border:var(--st-border-width) solid var(--st-selected-border-color)}.st-cell-selected-first .st-cell-content{color:var(--st-selected-first-cell-color)!important}.st-cell-selected.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-selected.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-selected-first.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-selected-first.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-column-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-column-selected .st-cell-content{color:var(--st-selected-cell-color)!important}.st-cell-column-selected-first{background-color:var(--st-selected-first-cell-background-color)}.st-cell-column-selected-first .st-cell-content{color:var(--st-selected-first-cell-color)!important}.st-cell-column-selected.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-column-selected.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-column-selected-first.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-column-selected-first.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-selected-top-border{border-top:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-bottom-border{border-bottom:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-left-border{border-left:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-right-border{border-right:var(--st-border-width) solid var(--st-selected-border-color)}.st-horizontal-scrollbar-container{-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-scrollbar-bg-color);border-top:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:12px;width:100%}.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-right{-ms-flex-negative:0;flex-shrink:0}.st-horizontal-scrollbar-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-horizontal-scrollbar-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-right{height:100%}.st-horizontal-scrollbar-middle{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:11px}.st-horizontal-scrollbar-left>div,.st-horizontal-scrollbar-middle>div,.st-horizontal-scrollbar-right>div{height:.3px}.st-footer{-webkit-box-pack:justify;-ms-flex-pack:justify;background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);gap:var(--st-spacing-medium);justify-content:space-between;min-height:49px;min-height:var(--st-footer-height,49px);padding:var(--st-spacing-medium)}.st-footer,.st-footer-info{-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0}.st-footer-results-text{color:var(--st-cell-color);font-size:.9em;white-space:nowrap}.st-footer-pagination{-ms-flex-negative:0;flex-shrink:0}.st-footer-pagination,.st-next-prev-btn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-next-prev-btn{-webkit-box-pack:center;-ms-flex-pack:center;fill:var(--st-next-prev-btn-color);background-color:initial;border:none;border-radius:var(--st-border-radius);cursor:pointer;justify-content:center;padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.disabled>.st-next-prev-icon{fill:var(--st-next-prev-btn-disabled-color);cursor:not-allowed}.st-next-prev-btn:not(.disabled):hover{background-color:var(--st-page-btn-hover-background-color)}.st-next-prev-btn:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:0}.st-page-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--st-page-btn-color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center;margin-right:var(--st-spacing-small);padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-page-btn:hover{background-color:var(--st-button-hover-background-color)}.st-page-btn:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:-2px}.st-page-btn.active{background-color:var(--st-button-active-background-color);color:#fff}.st-page-ellipsis{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--st-cell-color);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;justify-content:center;margin:0 var(--st-spacing-small);padding:var(--st-spacing-small)}.editable-cell-input{border:var(--st-border-width) solid var(--st-border-color);-webkit-box-shadow:var(--st-edit-cell-shadow-color);box-shadow:var(--st-edit-cell-shadow-color);font-size:.875rem;height:100%;left:0;outline:none;padding:var(--st-cell-padding);position:absolute;top:0;width:100%;z-index:1}.editable-cell-input:focus{border:var(--st-border-width) solid var(--st-editable-cell-focus-border-color)}.st-column-editor{-ms-flex-negative:0;background:var(--st-column-editor-background-color);border-left:var(--st-border-width) solid var(--st-border-color);color:var(--st-column-editor-text-color);display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-column-editor-text{-webkit-box-flex:1;-ms-flex-positive:1;cursor:pointer;flex-grow:1;padding:var(--st-spacing-medium) var(--st-spacing-small);-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;z-index:2}.st-column-editor.open,.st-column-editor.open .st-column-editor-text{background-color:var(--st-column-editor-background-color)}.st-column-editor-popout{background-color:var(--st-column-editor-popout-background-color);height:100%;overflow:hidden;position:absolute;right:calc(100% + 1px);top:0;-webkit-transition:width var(--st-transition-duration) var(--st-transition-ease);transition:width var(--st-transition-duration) var(--st-transition-ease);width:0;z-index:10}.st-column-editor-popout-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-overflow-scrolling:touch;border-left:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;-ms-touch-action:auto;touch-action:auto}.st-column-editor-search-wrapper{background-color:var(--st-column-editor-popout-background-color);padding:var(--st-spacing-medium);position:sticky;top:0;z-index:1}.st-column-editor-list{padding-bottom:var(--st-spacing-medium);padding-left:var(--st-spacing-medium);padding-right:var(--st-spacing-medium)}.st-column-editor-list,.st-column-editor-lists{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.st-column-editor-lists{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto}.st-column-editor-section-label{color:var(--st-column-editor-text-color);font-size:.7rem;font-weight:600;letter-spacing:.04em;opacity:.75;padding:var(--st-spacing-small) var(--st-spacing-medium) 0;text-transform:uppercase}.st-column-editor-list-section{padding-bottom:var(--st-spacing-small);padding-top:0}.st-column-editor-footer{background-color:var(--st-column-editor-popout-background-color);border-top:var(--st-border-width) solid var(--st-border-color);bottom:0;position:sticky;z-index:1}.st-column-editor-footer,.st-column-editor-reset-btn{padding:var(--st-spacing-small) var(--st-spacing-medium)}.st-column-editor-reset-btn{background:#0000;border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-column-editor-text-color);cursor:pointer;font-size:.8rem;font-weight:500;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-column-editor-reset-btn:hover{background-color:var(--st-hover-background-color)}.st-column-pin-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#0000;border:none;border-radius:4px;color:inherit;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin:0;padding:2px}.st-column-pin-btn:hover{background:color-mix(in srgb,var(--st-column-editor-text-color) 12%,#0000)}.st-column-pin-pinned-mark{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.st-column-pin-pinned-active{background:color-mix(in srgb,var(--st-column-editor-text-color) 12%,#0000);border-radius:4px}.st-column-pin-pinned-essential{cursor:default}.st-column-pin-side-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1px}.st-column-pin-side{font-size:.65rem;font-weight:700;height:1.25rem;letter-spacing:-.02em;line-height:1;min-width:1.25rem;padding:0 3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-column-pin-side-option{color:color-mix(in srgb,var(--st-column-editor-text-color) 52%,#0000);-webkit-transition:color var(--st-transition-duration) var(--st-transition-ease),background var(--st-transition-duration) var(--st-transition-ease);transition:color var(--st-transition-duration) var(--st-transition-ease),background var(--st-transition-duration) var(--st-transition-ease)}.st-column-pin-svg,.st-header-checkbox-item:hover .st-column-pin-side-option{color:var(--st-column-editor-text-color)}.st-column-pin-svg{display:block}.st-checkbox-disabled{cursor:not-allowed;opacity:.45}.st-header-checkbox-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);padding-bottom:var(--st-spacing-small);padding-top:var(--st-spacing-small)}.st-column-label-container{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-drag-icon-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:-webkit-grab;cursor:grab;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.5;-webkit-transition:opacity var(--st-transition-duration) var(--st-transition-ease);transition:opacity var(--st-transition-duration) var(--st-transition-ease)}.st-drag-icon-container:hover{opacity:1}.st-drag-icon-container:active{cursor:-webkit-grabbing;cursor:grabbing}.st-drag-icon{fill:currentColor}.st-column-editor-drag-separator{background-color:var(--st-drag-separator-color);border-radius:1px;height:2px;margin:2px 0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;width:100%}.st-header-icon-container{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;width:24px}.st-header-icon{fill:var(--st-header-icon-color);-webkit-transition:fill var(--st-transition-duration) var(--st-transition-ease);transition:fill var(--st-transition-duration) var(--st-transition-ease)}.st-collapsible-header-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.st-collapsible-header-icon,.st-nested-headers{display:-webkit-box;display:-ms-flexbox;display:flex}.st-nested-headers{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.st-column-editor-popout.open{min-width:240px;width:auto}.st-column-editor-popout.left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.st-column-editor-popout.open.left{-webkit-transform:translateX(0);transform:translateX(0)}.st-checkbox-label{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-checkbox-input{height:0;opacity:0;pointer-events:none;position:absolute;width:0}.st-checkbox-input:focus-visible+.st-checkbox-custom{outline:1px solid var(--st-focus-ring-color);outline-offset:-1px}.st-checkbox-custom{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border:var(--st-border-width) solid var(--st-checkbox-border-color);border-radius:var(--st-border-radius);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;min-height:16px;min-width:16px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease),border-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease),border-color var(--st-transition-duration) var(--st-transition-ease)}.st-checkbox-custom.st-checked{background-color:var(--st-checkbox-checked-background-color);border-color:var(--st-checkbox-checked-border-color)}.st-checkbox-checkmark{fill:#fff}@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-right{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.st-group-header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);border-bottom:var(--st-border-width) solid var(--st-border-color);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:var(--st-font-weight-bold);height:40px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-group-header:hover{background-color:var(--st-button-hover-background-color)}.st-group-header-content{gap:var(--st-spacing-medium)}.st-group-header-content,.st-group-toggle-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-group-toggle-icon{-webkit-box-pack:center;-ms-flex-pack:center;font-size:.8em;height:16px;justify-content:center;width:16px}.st-group-name{font-weight:var(--st-font-weight-bold)}.st-group-count{color:var(--st-cell-odd-row-color);font-size:.9em}.st-group-header.expanded .st-group-toggle-icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.st-group-header.collapsed .st-group-toggle-icon,.st-group-header.expanded .st-group-toggle-icon{-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-group-header.collapsed .st-group-toggle-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.st-expand-icon-container{-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-expand-icon-container.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.st-expand-icon-container.collapsed{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.st-expand-icon-container.placeholder{opacity:0;pointer-events:none}@-webkit-keyframes cell-flash{0%{background-color:var(--st-cell-flash-color)}to{background-color:initial}}@keyframes cell-flash{0%{background-color:var(--st-cell-flash-color)}to{background-color:initial}}.st-cell-updating{-webkit-animation:cell-flash .6s ease-in-out;animation:cell-flash .6s ease-in-out}@-webkit-keyframes copy-flash{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-cell-background-color)}}@keyframes copy-flash{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-cell-background-color)}}@-webkit-keyframes copy-flash-first{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}@keyframes copy-flash-first{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}.st-cell-copy-flash{-webkit-animation:copy-flash .8s ease-in-out;animation:copy-flash .8s ease-in-out}.st-cell-copy-flash-first{-webkit-animation:copy-flash-first .8s ease-in-out;animation:copy-flash-first .8s ease-in-out}@-webkit-keyframes warning-flash{0%{background-color:var(--st-warning-flash-color)}to{background-color:initial}}@keyframes warning-flash{0%{background-color:var(--st-warning-flash-color)}to{background-color:initial}}@-webkit-keyframes warning-flash-first{0%{background-color:var(--st-warning-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}@keyframes warning-flash-first{0%{background-color:var(--st-warning-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}.st-cell-warning-flash{-webkit-animation:warning-flash .6s ease-in-out;animation:warning-flash .6s ease-in-out}.st-cell-warning-flash-first{-webkit-animation:warning-flash-first .6s ease-in-out;animation:warning-flash-first .6s ease-in-out}.st-dropdown-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-overflow-scrolling:touch;background-color:var(--st-odd-row-background-color);border:1px solid var(--st-border-color);border-radius:var(--st-border-radius);-webkit-box-shadow:var(--st-edit-cell-shadow);box-shadow:var(--st-edit-cell-shadow);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:300px;min-width:120px;position:fixed;-ms-touch-action:auto;touch-action:auto;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;z-index:100}.st-dropdown-bottom-left,.st-dropdown-bottom-right{margin-top:4px}.st-dropdown-top-left,.st-dropdown-top-right{margin-bottom:4px}.st-dropdown-item{color:var(--st-cell-color);cursor:pointer;font-size:.9em;padding:var(--st-spacing-small) var(--st-spacing-medium);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);white-space:nowrap}.st-dropdown-item:hover{background-color:var(--st-button-hover-background-color)}.st-dropdown-item.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-dropdown-divider{background-color:var(--st-border-color);height:1px;margin:4px 0}.st-datepicker{background-color:var(--st-odd-row-background-color);font-family:inherit}.st-datepicker-header{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);border-bottom:1px solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;padding:var(--st-spacing-medium)}.st-datepicker-header-label{-webkit-box-flex:1;color:var(--st-header-label-color);cursor:pointer;-ms-flex:1;flex:1;font-weight:600;text-align:center}.st-datepicker-nav-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#0000;border:none;border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.2em;justify-content:center;padding:0 8px}.st-datepicker-nav-btn>*{fill:var(--st-cell-color)!important}.st-datepicker-nav-btn:hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-grid{display:grid;padding:var(--st-spacing-medium)}.st-datepicker-days-grid{gap:4px;grid-template-columns:repeat(7,1fr)}.st-datepicker-months-grid,.st-datepicker-years-grid{gap:8px;grid-template-columns:repeat(3,1fr)}.st-datepicker-weekday{color:var(--st-datepicker-weekday-color);font-size:.8em;font-weight:600;padding:6px 0;text-align:center}.st-datepicker-day{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:50%;color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.9em;height:24px;justify-content:center;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);width:24px}.st-datepicker-day.empty{cursor:default}.st-datepicker-day:not(.empty):hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-day.today{color:var(--st-button-active-background-color);font-weight:600}.st-datepicker-day.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-datepicker-day.other-month{color:var(--st-datepicker-other-month-color)}.st-datepicker-month,.st-datepicker-year{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:var(--st-border-radius);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;padding:12px 8px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-datepicker-month:hover,.st-datepicker-year:hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-month.selected,.st-datepicker-year.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-datepicker-footer{-webkit-box-pack:end;-ms-flex-pack:end;border-top:1px solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-end;padding:var(--st-spacing-medium)}.st-datepicker-today-btn{background-color:initial;border:1px solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;padding:6px 12px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-datepicker-today-btn:hover{background-color:var(--st-button-hover-background-color)}.st-filter-container{min-width:150px;padding:var(--st-spacing-medium)}.st-filter-container,.st-filter-section{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1}.st-filter-section{margin-bottom:var(--st-spacing-medium)}.st-filter-input{background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);font-family:inherit;font-size:.9em;outline:none;padding:var(--st-spacing-small);-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-filter-input:focus{border-color:var(--st-editable-cell-focus-border-color)}.st-filter-input-range-from{margin-bottom:var(--st-spacing-medium)}.st-filter-select{background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;font-family:inherit;font-size:.9em;outline:none;padding:var(--st-spacing-medium) var(--st-spacing-medium);-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-filter-select:focus{border-color:var(--st-editable-cell-focus-border-color)}.st-filter-actions{border-top:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-medium);padding-top:var(--st-spacing-medium)}.st-filter-button{-webkit-box-flex:1;border:none;border-radius:var(--st-border-radius);cursor:pointer;-ms-flex:1;flex:1;font-family:inherit;font-size:.9em;font-weight:500;padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-filter-button:focus{outline:2px solid var(--st-focus-ring-color);outline-offset:-2px}.st-filter-button-apply{background-color:var(--st-button-active-background-color);color:#fff}.st-filter-button-apply:hover:not(.st-filter-button-disabled){opacity:.9}.st-filter-button-disabled{background-color:var(--st-filter-button-disabled-background-color);color:var(--st-filter-button-disabled-text-color);cursor:not-allowed}.st-filter-button-clear{background-color:initial;border:var(--st-border-width) solid var(--st-border-color);color:var(--st-cell-color)}.st-filter-button-clear:hover{background-color:var(--st-button-hover-background-color)}.st-custom-select{position:relative;width:100%}.st-custom-select-trigger{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:.9em;gap:var(--st-spacing-medium);justify-content:space-between;outline:none;padding:var(--st-spacing-small);-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-custom-select-open .st-custom-select-trigger,.st-custom-select-trigger:focus,.st-custom-select-trigger:hover:not(:disabled){border-color:var(--st-editable-cell-focus-border-color)}.st-custom-select-value{-webkit-box-flex:1;color:var(--st-cell-color);-ms-flex:1;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.st-custom-select-arrow{-ms-flex-negative:0;color:var(--st-header-label-color);flex-shrink:0;-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-custom-select-open .st-custom-select-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.st-custom-select-options{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:200px;min-width:120px;overflow:auto;overflow-x:hidden}.st-custom-select-option{-ms-flex-negative:0;color:var(--st-cell-color);cursor:pointer;flex-shrink:0;font-size:.9em;overflow:hidden;padding:var(--st-spacing-small);text-overflow:ellipsis;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);white-space:nowrap}.st-custom-select-option-focused,.st-custom-select-option:hover{background-color:var(--st-button-hover-background-color)}.st-custom-select-option-selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-custom-select-option-selected.st-custom-select-option-focused{background-color:var(--st-selected-cell-background-color);opacity:.9}.st-custom-select-disabled{opacity:var(--st-opacity-disabled);pointer-events:none}.st-custom-select-disabled .st-custom-select-trigger{background-color:var(--st-header-background-color);color:var(--st-header-label-color);cursor:not-allowed}.st-enum-filter-options{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;gap:var(--st-spacing-small);max-height:200px;overflow:auto}.st-enum-search,.st-enum-select-all{border-bottom:var(--st-border-width) solid var(--st-border-color);padding-bottom:var(--st-spacing-small)}.st-enum-select-all-label{color:var(--st-header-label-color);font-weight:600}.st-enum-option-label{color:var(--st-cell-color);font-size:.9em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-enum-no-results{color:var(--st-slate-400);font-size:.9em;font-style:italic;padding:var(--st-spacing-medium);text-align:center}.st-row-number{font-size:.8em;font-weight:500;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-selection-cell-content{-webkit-box-pack:justify;-ms-flex-pack:justify;gap:8px;justify-content:space-between;width:100%}.st-row-buttons,.st-selection-cell-content,.st-selection-control{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-row-buttons,.st-selection-control{-ms-flex-negative:0;flex-shrink:0}.st-row-buttons{-webkit-box-pack:end;-ms-flex-pack:end;gap:4px;justify-content:flex-end}.st-row-button{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}.st-column-borders .st-cell:not(.st-last-column),.st-column-borders .st-header-cell:not(.st-last-column),.st-column-borders .st-row.hovered .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first),.st-column-borders .st-row.selected.hovered .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){-webkit-box-shadow:var(--st-border-width) 0 0 0 var(--st-border-color);box-shadow:var(--st-border-width) 0 0 0 var(--st-border-color)}.st-tooltip{word-wrap:break-word;-webkit-animation:st-tooltip-fade-in .2s ease-out;animation:st-tooltip-fade-in .2s ease-out;background-color:var(--st-tooltip-background-color);border-radius:var(--st-tooltip-border-radius);-webkit-box-shadow:var(--st-tooltip-shadow);box-shadow:var(--st-tooltip-shadow);color:var(--st-tooltip-text-color);font-size:.8em;line-height:1.4;max-width:300px;padding:var(--st-tooltip-padding);pointer-events:none}@-webkit-keyframes st-tooltip-fade-in{0%{opacity:0;-webkit-transform:translateY(-4px);transform:translateY(-4px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes st-tooltip-fade-in{0%{opacity:0;-webkit-transform:translateY(-4px);transform:translateY(-4px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.st-row.st-state-row{display:grid;position:absolute;width:100%}.st-row.st-state-row-spacer{background-color:initial;display:block;position:absolute;width:100%}.st-state-row-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-body-background-color);display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:1/-1}.st-bar-chart,.st-line-area-chart{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.st-bar-chart rect{shape-rendering:crispEdges}.theme-light{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-slate-50);--st-scrollbar-thumb-color:var(--st-slate-300);--st-scrollbar-width:thin;--st-border-color:var(--st-slate-300);--st-footer-background-color:var(--st-slate-50);--st-last-group-row-separator-border-color:var(--st-slate-400);--st-odd-row-background-color:var(--st-white);--st-even-row-background-color:var(--st-slate-50);--st-hover-row-background-color:var(--st-slate-100);--st-selected-row-background-color:var(--st-blue-50);--st-odd-column-background-color:var(--st-slate-50);--st-even-column-background-color:var(--st-white);--st-header-background-color:var(--st-slate-100);--st-sub-header-background-color:var(--st-slate-200);--st-header-label-color:var(--st-slate-900);--st-header-icon-color:var(--st-slate-500);--st-cell-color:var(--st-slate-900);--st-cell-odd-row-color:var(--st-slate-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-sub-cell-background-color:var(--st-slate-100);--st-sub-cell-hover-background-color:var(--st-slate-200);--st-selected-cell-background-color:var(--st-blue-100);--st-selected-first-cell-background-color:var(--st-blue-50);--st-selected-cell-color:var(--st-slate-900);--st-selected-first-cell-color:var(--st-slate-900);--st-selected-sub-cell-background-color:var(--st-blue-200);--st-selected-sub-cell-color:var(--st-slate-900);--st-dragging-background-color:var(--st-slate-200);--st-dragging-sub-header-background-color:var(--st-slate-300);--st-resize-handle-color:var(--st-slate-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-500);--st-editable-cell-focus-border-color:var(--st-blue-500);--st-focus-ring-color:var(--st-blue-800);--st-button-hover-background-color:var(--st-slate-100);--st-button-active-background-color:var(--st-blue-600);--st-next-prev-btn-color:var(--st-slate-600);--st-next-prev-btn-disabled-color:var(--st-slate-400);--st-page-btn-color:var(--st-slate-600);--st-page-btn-hover-background-color:var(--st-slate-100);--st-checkbox-checked-background-color:var(--st-blue-600);--st-checkbox-checked-border-color:var(--st-blue-600);--st-checkbox-border-color:var(--st-slate-300);--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:var(--st-slate-500);--st-datepicker-weekday-color:var(--st-slate-500);--st-datepicker-other-month-color:var(--st-slate-400);--st-filter-button-disabled-background-color:var(--st-slate-300);--st-filter-button-disabled-text-color:var(--st-slate-500);--st-cell-flash-color:var(--st-slate-200);--st-copy-flash-color:var(--st-blue-500);--st-warning-flash-color:var(--st-red-300);--st-tooltip-background-color:var(--st-slate-900);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-blue-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-100);--st-selection-highlight-indicator-color:var(--st-slate-300);--st-loading-skeleton-bg-color:var(--st-slate-200);--st-chart-color:var(--st-blue-300);--st-chart-fill-color:var(--st-blue-300);--st-drag-separator-color:var(--st-blue-500)}.theme-dark{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-gray-900);--st-scrollbar-thumb-color:var(--st-gray-600);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-gray-700);--st-footer-background-color:var(--st-gray-900);--st-last-group-row-separator-border-color:var(--st-gray-500);--st-odd-row-background-color:var(--st-gray-800);--st-even-row-background-color:var(--st-gray-900);--st-hover-row-background-color:var(--st-gray-600);--st-selected-row-background-color:var(--st-blue-950);--st-odd-column-background-color:var(--st-gray-800);--st-even-column-background-color:var(--st-gray-900);--st-header-background-color:var(--st-gray-800);--st-sub-header-background-color:var(--st-gray-700);--st-sub-cell-background-color:var(--st-gray-800);--st-sub-cell-hover-background-color:var(--st-gray-700);--st-header-label-color:var(--st-gray-100);--st-header-icon-color:var(--st-gray-400);--st-cell-color:var(--st-gray-100);--st-cell-odd-row-color:var(--st-gray-200);--st-edit-cell-shadow:0 1px 3px 0 #ffffff1a;--st-selected-cell-background-color:var(--st-blue-900);--st-selected-first-cell-background-color:var(--st-blue-800);--st-selected-cell-color:var(--st-white);--st-selected-first-cell-color:var(--st-white);--st-selected-sub-cell-background-color:var(--st-blue-800);--st-selected-sub-cell-color:var(--st-white);--st-dragging-background-color:var(--st-gray-500);--st-dragging-sub-header-background-color:var(--st-gray-600);--st-resize-handle-color:var(--st-gray-500);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-400);--st-editable-cell-focus-border-color:var(--st-blue-400);--st-focus-ring-color:var(--st-blue-400);--st-button-hover-background-color:var(--st-gray-600);--st-button-active-background-color:var(--st-blue-500);--st-next-prev-btn-color:var(--st-gray-300);--st-next-prev-btn-disabled-color:var(--st-gray-600);--st-page-btn-color:var(--st-gray-300);--st-page-btn-hover-background-color:var(--st-gray-600);--st-checkbox-checked-background-color:var(--st-blue-500);--st-checkbox-checked-border-color:var(--st-blue-500);--st-checkbox-border-color:var(--st-gray-600);--st-column-editor-background-color:var(--st-gray-800);--st-column-editor-popout-background-color:var(--st-gray-800);--st-column-editor-text-color:var(--st-gray-400);--st-datepicker-weekday-color:var(--st-gray-400);--st-datepicker-other-month-color:var(--st-gray-600);--st-filter-button-disabled-background-color:var(--st-gray-700);--st-filter-button-disabled-text-color:var(--st-gray-500);--st-cell-flash-color:var(--st-gray-500);--st-copy-flash-color:var(--st-blue-500);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-gray-100);--st-tooltip-text-color:var(--st-gray-900);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #0000004d;--st-header-selected-background-color:var(--st-blue-500);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-900);--st-selection-highlight-indicator-color:var(--st-gray-600);--st-loading-skeleton-bg-color:var(--st-gray-700);--st-chart-color:var(--st-blue-400);--st-chart-fill-color:var(--st-blue-400);--st-drag-separator-color:var(--st-blue-400)}.theme-neutral{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-neutral-100);--st-scrollbar-thumb-color:var(--st-neutral-400);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-neutral-300);--st-footer-background-color:var(--st-neutral-50);--st-last-group-row-separator-border-color:var(--st-neutral-400);--st-odd-row-background-color:var(--st-neutral-50);--st-even-row-background-color:var(--st-neutral-100);--st-hover-row-background-color:var(--st-neutral-200);--st-selected-row-background-color:var(--st-neutral-200);--st-odd-column-background-color:var(--st-neutral-50);--st-even-column-background-color:var(--st-neutral-100);--st-header-background-color:var(--st-neutral-200);--st-sub-header-background-color:var(--st-neutral-300);--st-sub-cell-background-color:var(--st-neutral-200);--st-sub-cell-hover-background-color:var(--st-neutral-300);--st-header-label-color:var(--st-neutral-900);--st-header-icon-color:var(--st-neutral-500);--st-cell-color:var(--st-neutral-900);--st-cell-odd-row-color:var(--st-neutral-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-selected-cell-background-color:var(--st-neutral-400);--st-selected-first-cell-background-color:var(--st-neutral-300);--st-selected-cell-color:var(--st-neutral-900);--st-selected-first-cell-color:var(--st-neutral-900);--st-selected-sub-cell-background-color:var(--st-neutral-400);--st-selected-sub-cell-color:var(--st-neutral-900);--st-dragging-background-color:var(--st-neutral-300);--st-dragging-sub-header-background-color:var(--st-neutral-400);--st-resize-handle-color:var(--st-neutral-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-neutral-600);--st-editable-cell-focus-border-color:var(--st-neutral-500);--st-focus-ring-color:var(--st-neutral-600);--st-button-hover-background-color:var(--st-neutral-200);--st-button-active-background-color:var(--st-neutral-600);--st-next-prev-btn-color:var(--st-neutral-600);--st-next-prev-btn-disabled-color:var(--st-neutral-400);--st-page-btn-color:var(--st-neutral-600);--st-page-btn-hover-background-color:var(--st-neutral-200);--st-checkbox-checked-background-color:var(--st-neutral-600);--st-checkbox-checked-border-color:var(--st-neutral-600);--st-checkbox-border-color:var(--st-neutral-300);--st-column-editor-background-color:var(--st-neutral-50);--st-column-editor-popout-background-color:var(--st-neutral-50);--st-column-editor-text-color:var(--st-neutral-500);--st-datepicker-weekday-color:var(--st-neutral-500);--st-datepicker-other-month-color:var(--st-neutral-400);--st-filter-button-disabled-background-color:var(--st-neutral-300);--st-filter-button-disabled-text-color:var(--st-neutral-500);--st-cell-flash-color:var(--st-neutral-400);--st-copy-flash-color:var(--st-neutral-600);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-neutral-800);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-neutral-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-neutral-400);--st-selection-highlight-indicator-color:var(--st-neutral-400);--st-loading-skeleton-bg-color:var(--st-neutral-200);--st-chart-color:var(--st-neutral-500);--st-chart-fill-color:var(--st-neutral-500);--st-drag-separator-color:var(--st-neutral-600)}.theme-sky{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-blue-50);--st-scrollbar-thumb-color:var(--st-blue-300);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-blue-300);--st-footer-background-color:var(--st-blue-50);--st-last-group-row-separator-border-color:var(--st-blue-400);--st-odd-row-background-color:var(--st-blue-50);--st-even-row-background-color:var(--st-blue-100);--st-hover-row-background-color:var(--st-blue-200);--st-selected-row-background-color:var(--st-sky-100);--st-odd-column-background-color:var(--st-blue-50);--st-even-column-background-color:var(--st-blue-100);--st-header-background-color:var(--st-blue-200);--st-sub-header-background-color:var(--st-blue-300);--st-sub-cell-background-color:var(--st-sky-100);--st-sub-cell-hover-background-color:var(--st-sky-200);--st-header-label-color:var(--st-blue-900);--st-header-icon-color:var(--st-blue-600);--st-cell-color:var(--st-blue-900);--st-cell-odd-row-color:var(--st-blue-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-selected-cell-background-color:var(--st-blue-400);--st-selected-first-cell-background-color:var(--st-blue-300);--st-selected-cell-color:var(--st-blue-900);--st-selected-first-cell-color:var(--st-blue-900);--st-selected-sub-cell-background-color:var(--st-sky-300);--st-selected-sub-cell-color:var(--st-blue-900);--st-dragging-background-color:var(--st-sky-300);--st-dragging-sub-header-background-color:var(--st-sky-400);--st-resize-handle-color:var(--st-blue-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-600);--st-editable-cell-focus-border-color:var(--st-blue-500);--st-focus-ring-color:var(--st-blue-600);--st-button-hover-background-color:var(--st-blue-200);--st-button-active-background-color:var(--st-blue-600);--st-next-prev-btn-color:var(--st-blue-600);--st-next-prev-btn-disabled-color:var(--st-blue-400);--st-page-btn-color:var(--st-blue-600);--st-page-btn-hover-background-color:var(--st-blue-200);--st-checkbox-checked-background-color:var(--st-blue-600);--st-checkbox-checked-border-color:var(--st-blue-600);--st-checkbox-border-color:var(--st-blue-300);--st-column-editor-background-color:var(--st-blue-50);--st-column-editor-popout-background-color:var(--st-blue-50);--st-column-editor-text-color:var(--st-blue-600);--st-datepicker-weekday-color:var(--st-blue-600);--st-datepicker-other-month-color:var(--st-blue-400);--st-filter-button-disabled-background-color:var(--st-blue-300);--st-filter-button-disabled-text-color:var(--st-blue-500);--st-cell-flash-color:var(--st-sky-200);--st-copy-flash-color:var(--st-blue-600);--st-warning-flash-color:var(--st-orange-400);--st-tooltip-background-color:var(--st-blue-900);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-blue-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-400);--st-selection-highlight-indicator-color:var(--st-blue-400);--st-loading-skeleton-bg-color:var(--st-blue-200);--st-chart-color:var(--st-blue-900);--st-chart-fill-color:var(--st-blue-900);--st-drag-separator-color:var(--st-blue-600)}.theme-violet{--st-border-radius:8px;--st-cell-padding:12px;--st-spacing-small:6px;--st-spacing-medium:10px;--st-scrollbar-bg-color:var(--st-stone-100);--st-scrollbar-thumb-color:var(--st-violet-500);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-stone-200);--st-footer-background-color:var(--st-stone-100);--st-last-group-row-separator-border-color:var(--st-stone-300);--st-odd-row-background-color:var(--st-amber-50);--st-even-row-background-color:var(--st-amber-100);--st-hover-row-background-color:var(--st-amber-200);--st-selected-row-background-color:var(--st-violet-100);--st-odd-column-background-color:var(--st-violet-50);--st-even-column-background-color:var(--st-amber-50);--st-header-background-color:var(--st-violet-600);--st-sub-header-background-color:var(--st-violet-500);--st-sub-cell-background-color:var(--st-violet-100);--st-sub-cell-hover-background-color:var(--st-violet-200);--st-header-label-color:var(--st-white);--st-header-icon-color:var(--st-violet-200);--st-cell-color:var(--st-stone-700);--st-cell-odd-row-color:var(--st-stone-700);--st-edit-cell-shadow:0 4px 6px -1px #7c3aed1a,0 2px 4px -1px #7c3aed0f;--st-selected-cell-background-color:var(--st-violet-50);--st-selected-first-cell-background-color:var(--st-violet-100);--st-selected-cell-color:var(--st-violet-800);--st-selected-first-cell-color:var(--st-violet-800);--st-selected-sub-cell-background-color:var(--st-violet-200);--st-selected-sub-cell-color:var(--st-violet-800);--st-dragging-background-color:var(--st-violet-200);--st-dragging-sub-header-background-color:var(--st-violet-300);--st-resize-handle-color:var(--st-violet-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-violet-500);--st-editable-cell-focus-border-color:var(--st-violet-500);--st-focus-ring-color:var(--st-violet-600);--st-button-hover-background-color:var(--st-violet-50);--st-button-active-background-color:var(--st-violet-600);--st-next-prev-btn-color:var(--st-violet-600);--st-next-prev-btn-disabled-color:var(--st-violet-400);--st-page-btn-color:var(--st-violet-600);--st-page-btn-hover-background-color:var(--st-violet-50);--st-checkbox-checked-background-color:var(--st-violet-500);--st-checkbox-checked-border-color:var(--st-violet-600);--st-checkbox-border-color:var(--st-stone-200);--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:var(--st-violet-600);--st-datepicker-weekday-color:var(--st-violet-600);--st-datepicker-other-month-color:var(--st-violet-400);--st-filter-button-disabled-background-color:var(--st-stone-200);--st-filter-button-disabled-text-color:var(--st-stone-500);--st-cell-flash-color:var(--st-violet-200);--st-copy-flash-color:var(--st-violet-600);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-violet-800);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-violet-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-violet-800);--st-selection-highlight-indicator-color:var(--st-stone-400);--st-loading-skeleton-bg-color:var(--st-stone-200);--st-chart-color:var(--st-violet-400);--st-chart-fill-color:var(--st-violet-400);--st-drag-separator-color:var(--st-violet-500)}.theme-frost{--st-border-radius:0px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#f8faff;--st-scrollbar-thumb-color:#c5d1dd;--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:#e1e7ea;--st-footer-background-color:#f8faff;--st-last-group-row-separator-border-color:#c5d1dd;--st-odd-row-background-color:#fff;--st-even-row-background-color:#fff;--st-hover-row-background-color:#e5effe;--st-selected-row-background-color:#d4e4fd;--st-odd-column-background-color:#fff;--st-even-column-background-color:#fff;--st-header-background-color:#f8faff;--st-sub-header-background-color:#e5effe;--st-sub-cell-background-color:#f8faff;--st-sub-cell-hover-background-color:#d4e4fd;--st-header-label-color:#0b1215;--st-header-icon-color:#5a6c7d;--st-cell-color:#0b1215;--st-cell-odd-row-color:#0b1215;--st-edit-cell-shadow:0 1px 2px 0 #0b12150d;--st-selected-cell-background-color:#c9dcfb;--st-selected-first-cell-background-color:#d4e4fd;--st-selected-cell-color:#0b1215;--st-selected-first-cell-color:#0b1215;--st-selected-sub-cell-background-color:#c9dcfb;--st-selected-sub-cell-color:#0b1215;--st-dragging-background-color:#d0dce8;--st-dragging-sub-header-background-color:#0d9488;--st-resize-handle-color:#c5d1dd;--st-resize-handle-selected-color:#5a6c7d;--st-selected-border-color:#5a9cf8;--st-editable-cell-focus-border-color:#5a9cf8;--st-focus-ring-color:#5a9cf8;--st-button-hover-background-color:#e5effe;--st-button-active-background-color:#5a9cf8;--st-next-prev-btn-color:#5a6c7d;--st-next-prev-btn-disabled-color:#c5d1dd;--st-page-btn-color:#5a6c7d;--st-page-btn-hover-background-color:#e5effe;--st-checkbox-checked-background-color:#5a9cf8;--st-checkbox-checked-border-color:#4a8ce8;--st-checkbox-border-color:#e1e7ea;--st-column-editor-background-color:#fff;--st-column-editor-popout-background-color:#fff;--st-column-editor-text-color:#5a6c7d;--st-datepicker-weekday-color:#5a6c7d;--st-datepicker-other-month-color:#c5d1dd;--st-filter-button-disabled-background-color:#e1e7ea;--st-filter-button-disabled-text-color:#5a6c7d;--st-cell-flash-color:#d0dce8;--st-copy-flash-color:#5a9cf8;--st-warning-flash-color:#f87171;--st-tooltip-background-color:#0b1215;--st-tooltip-text-color:#fff;--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:#5a9cf8;--st-header-selected-label-color:#fff;--st-header-selected-icon-color:#fff;--st-header-highlight-indicator-color:#c9dcfb;--st-selection-highlight-indicator-color:#e1e7ea;--st-loading-skeleton-bg-color:#e1e7ea;--st-chart-color:var(--st-blue-300);--st-chart-fill-color:var(--st-blue-300);--st-drag-separator-color:#0d9488}.theme-modern-light{--st-border-radius:8px;--st-cell-padding:12px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#fafafa;--st-scrollbar-thumb-color:#d1d5db;--st-scrollbar-width:thin;--st-border-color:#f3f4f6;--st-footer-background-color:var(--st-white);--st-last-group-row-separator-border-color:#e5e7eb;--st-odd-row-background-color:var(--st-white);--st-even-row-background-color:var(--st-white);--st-hover-row-background-color:#f9fafb;--st-selected-row-background-color:#eff6ff;--st-odd-column-background-color:var(--st-white);--st-even-column-background-color:var(--st-white);--st-header-background-color:var(--st-white);--st-sub-header-background-color:#fafafa;--st-header-label-color:#111827;--st-header-icon-color:#6b7280;--st-cell-color:#111827;--st-cell-odd-row-color:#374151;--st-edit-cell-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--st-sub-cell-background-color:#f9fafb;--st-sub-cell-hover-background-color:#f3f4f6;--st-selected-cell-background-color:#dbeafe;--st-selected-first-cell-background-color:#eff6ff;--st-selected-cell-color:#111827;--st-selected-first-cell-color:#111827;--st-selected-sub-cell-background-color:#bfdbfe;--st-selected-sub-cell-color:#111827;--st-dragging-background-color:#f3f4f6;--st-dragging-sub-header-background-color:#e5e7eb;--st-resize-handle-color:#e5e7eb;--st-resize-handle-selected-color:#3b82f6;--st-selected-border-color:#3b82f6;--st-editable-cell-focus-border-color:#3b82f6;--st-focus-ring-color:#3b82f6;--st-button-hover-background-color:#f3f4f6;--st-button-active-background-color:#3b82f6;--st-next-prev-btn-color:#6b7280;--st-next-prev-btn-disabled-color:#d1d5db;--st-page-btn-color:#6b7280;--st-page-btn-hover-background-color:#f3f4f6;--st-checkbox-checked-background-color:#3b82f6;--st-checkbox-checked-border-color:#3b82f6;--st-checkbox-border-color:#d1d5db;--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:#6b7280;--st-datepicker-weekday-color:#6b7280;--st-datepicker-other-month-color:#d1d5db;--st-filter-button-disabled-background-color:#f3f4f6;--st-filter-button-disabled-text-color:#9ca3af;--st-cell-flash-color:#dbeafe;--st-copy-flash-color:#3b82f6;--st-warning-flash-color:#fca5a5;--st-tooltip-background-color:#1f2937;--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:6px 10px;--st-tooltip-font-size:12px;--st-tooltip-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--st-header-selected-background-color:#3b82f6;--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:#dbeafe;--st-selection-highlight-indicator-color:#f3f4f6;--st-loading-skeleton-bg-color:#f3f4f6;--st-chart-color:#3b82f6;--st-chart-fill-color:#dbeafe;--st-drag-separator-color:#3b82f6;--st-body-background-color:var(--st-white)}.theme-modern-light .st-wrapper{border:1px solid #f3f4f6}.theme-modern-light .st-header-main,.theme-modern-light .st-header-pinned-left,.theme-modern-light .st-header-pinned-right{border-bottom:1px solid #f3f4f6}.theme-modern-light .st-body-pinned-left,.theme-modern-light .st-header-pinned-left{border-right:1px solid #f3f4f6}.theme-modern-light .st-body-pinned-right,.theme-modern-light .st-header-pinned-right{border-left:1px solid #f3f4f6}.theme-modern-light .st-row-separator{background-color:#f9fafb}.theme-modern-light .st-header-cell{color:#6b7280;font-size:14px;font-weight:500}.theme-modern-light .st-cell-content{color:#111827;font-size:14px}.theme-modern-light .st-row.hovered{-webkit-transition:background-color .15s ease;transition:background-color .15s ease}.theme-modern-light .st-footer{background-color:var(--st-white);border-top:1px solid #f3f4f6;gap:12px;padding:12px 16px}.theme-modern-light .st-footer-results-text{color:#6b7280;font-size:14px}.theme-modern-light .st-footer-pagination{-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:2px;overflow:hidden}.theme-modern-light .st-page-ellipsis{color:#9ca3af;font-weight:400;padding:0 4px}.theme-modern-light .st-page-btn{-ms-flex-negative:0;border-radius:6px;color:#374151;flex-shrink:0;font-size:13px;font-weight:500;margin-right:0;min-width:36px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-light .st-page-btn:hover{background-color:#f3f4f6}.theme-modern-light .st-page-btn.active{background-color:#3b82f6;color:#fff;font-weight:600}.theme-modern-light .st-page-btn:nth-child(n+10):not(.active){display:none}.theme-modern-light .st-page-btn.active,.theme-modern-light .st-page-btn.active+.st-page-btn,.theme-modern-light .st-page-btn:has(+.st-page-btn.active){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.theme-modern-light .st-next-prev-btn{-ms-flex-negative:0;border-radius:6px;flex-shrink:0;margin-left:4px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-light .st-next-prev-btn:not(.disabled):hover{background-color:#f3f4f6}.theme-modern-light .st-horizontal-scrollbar-container{background-color:#fafafa;border-top:1px solid #f3f4f6}.theme-modern-light .st-group-header{border-bottom:1px solid #f3f4f6;font-weight:500}.theme-modern-light .st-checkbox-custom{border:1.5px solid #d1d5db;border-radius:4px}.theme-modern-light .st-checkbox-custom.st-checked{background-color:#3b82f6;border-color:#3b82f6}.theme-modern-dark{--st-border-radius:8px;--st-cell-padding:12px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#111827;--st-scrollbar-thumb-color:#4b5563;--st-scrollbar-width:thin;--st-border-color:#374151;--st-footer-background-color:#1f2937;--st-last-group-row-separator-border-color:#4b5563;--st-odd-row-background-color:#1f2937;--st-even-row-background-color:#1f2937;--st-hover-row-background-color:#374151;--st-selected-row-background-color:#1e3a5f;--st-odd-column-background-color:#1f2937;--st-even-column-background-color:#1f2937;--st-header-background-color:#1f2937;--st-sub-header-background-color:#111827;--st-header-label-color:#f3f4f6;--st-header-icon-color:#9ca3af;--st-cell-color:#f3f4f6;--st-cell-odd-row-color:#d1d5db;--st-edit-cell-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003;--st-sub-cell-background-color:#111827;--st-sub-cell-hover-background-color:#1f2937;--st-selected-cell-background-color:#1e40af;--st-selected-first-cell-background-color:#1e3a8a;--st-selected-cell-color:#f3f4f6;--st-selected-first-cell-color:#f3f4f6;--st-selected-sub-cell-background-color:#1e3a8a;--st-selected-sub-cell-color:#f3f4f6;--st-dragging-background-color:#374151;--st-dragging-sub-header-background-color:#4b5563;--st-resize-handle-color:#4b5563;--st-resize-handle-selected-color:#60a5fa;--st-selected-border-color:#60a5fa;--st-editable-cell-focus-border-color:#60a5fa;--st-focus-ring-color:#60a5fa;--st-button-hover-background-color:#374151;--st-button-active-background-color:#3b82f6;--st-next-prev-btn-color:#9ca3af;--st-next-prev-btn-disabled-color:#4b5563;--st-page-btn-color:#d1d5db;--st-page-btn-hover-background-color:#374151;--st-checkbox-checked-background-color:#3b82f6;--st-checkbox-checked-border-color:#3b82f6;--st-checkbox-border-color:#4b5563;--st-column-editor-background-color:#1f2937;--st-column-editor-popout-background-color:#1f2937;--st-column-editor-text-color:#9ca3af;--st-datepicker-weekday-color:#9ca3af;--st-datepicker-other-month-color:#4b5563;--st-filter-button-disabled-background-color:#374151;--st-filter-button-disabled-text-color:#6b7280;--st-cell-flash-color:#1e40af;--st-copy-flash-color:#60a5fa;--st-warning-flash-color:#ef4444;--st-tooltip-background-color:#f3f4f6;--st-tooltip-text-color:#111827;--st-tooltip-border-radius:6px;--st-tooltip-padding:6px 10px;--st-tooltip-font-size:12px;--st-tooltip-shadow:0 10px 15px -3px #0000004d,0 4px 6px -2px #0003;--st-header-selected-background-color:#3b82f6;--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:#1e40af;--st-selection-highlight-indicator-color:#374151;--st-loading-skeleton-bg-color:#374151;--st-chart-color:#60a5fa;--st-chart-fill-color:#3b82f6;--st-drag-separator-color:#60a5fa;--st-body-background-color:#1f2937}.theme-modern-dark .st-wrapper{border:1px solid #374151}.theme-modern-dark .st-header-main,.theme-modern-dark .st-header-pinned-left,.theme-modern-dark .st-header-pinned-right{border-bottom:1px solid #374151}.theme-modern-dark .st-body-pinned-left,.theme-modern-dark .st-header-pinned-left{border-right:1px solid #374151}.theme-modern-dark .st-body-pinned-right,.theme-modern-dark .st-header-pinned-right{border-left:1px solid #374151}.theme-modern-dark .st-row-separator{background-color:#374151}.theme-modern-dark .st-header-cell{color:#d1d5db;font-size:14px;font-weight:500}.theme-modern-dark .st-cell-content{color:#f3f4f6;font-size:14px}.theme-modern-dark .st-row.hovered{-webkit-transition:background-color .15s ease;transition:background-color .15s ease}.theme-modern-dark .st-footer{background-color:#1f2937;border-top:1px solid #374151;gap:12px;padding:12px 16px}.theme-modern-dark .st-footer-results-text{color:#d1d5db;font-size:14px}.theme-modern-dark .st-footer-pagination{-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:2px;overflow:hidden}.theme-modern-dark .st-page-ellipsis{color:#9ca3af;font-weight:400;padding:0 4px}.theme-modern-dark .st-page-btn{-ms-flex-negative:0;border-radius:6px;color:#d1d5db;flex-shrink:0;font-size:13px;font-weight:500;margin-right:0;min-width:36px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-dark .st-page-btn:hover{background-color:#374151}.theme-modern-dark .st-page-btn.active{background-color:#3b82f6;color:#fff;font-weight:600}.theme-modern-dark .st-page-btn:nth-child(n+10):not(.active){display:none}.theme-modern-dark .st-page-btn.active,.theme-modern-dark .st-page-btn.active+.st-page-btn,.theme-modern-dark .st-page-btn:has(+.st-page-btn.active){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.theme-modern-dark .st-next-prev-btn{-ms-flex-negative:0;border-radius:6px;flex-shrink:0;margin-left:4px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-dark .st-next-prev-btn:not(.disabled):hover{background-color:#374151}.theme-modern-dark .st-next-prev-btn.disabled>*{fill:#4b5563}.theme-modern-dark .st-horizontal-scrollbar-container{background-color:#111827;border-top:1px solid #374151}.theme-modern-dark .st-group-header{border-bottom:1px solid #374151;font-weight:500}.theme-modern-dark .st-checkbox-custom{background-color:#1f2937;border:1.5px solid #4b5563;border-radius:4px}.theme-modern-dark .st-checkbox-custom.st-checked{background-color:#3b82f6;border-color:#3b82f6}.theme-modern-dark .st-empty-state{color:#9ca3af}
\ No newline at end of file
+.st-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.simple-table-root{--st-after-width:11.01px;--st-resize-handle-width:2px;--st-resize-handle-container-width:10px;--st-border-width:1px;--st-footer-height:49px;--st-transition-duration:0.2s;--st-transition-ease:ease;--st-opacity-disabled:0.5;--st-white:#fff;--st-black:#000;--st-slate-50:#f8fafc;--st-slate-100:#f1f5f9;--st-slate-200:#e2e8f0;--st-slate-300:#cbd5e1;--st-slate-400:#94a3b8;--st-slate-500:#64748b;--st-slate-600:#475569;--st-slate-800:#1e293b;--st-slate-900:#0f172a;--st-gray-100:#f3f4f6;--st-gray-200:#e5e7eb;--st-gray-300:#d1d5db;--st-gray-400:#9ca3af;--st-gray-500:#6b7280;--st-gray-600:#4b5563;--st-gray-700:#374151;--st-gray-800:#1f2937;--st-gray-900:#111827;--st-neutral-50:#fafafa;--st-neutral-100:#f5f5f5;--st-neutral-200:#e5e5e5;--st-neutral-300:#d4d4d4;--st-neutral-400:#a3a3a3;--st-neutral-500:#737373;--st-neutral-600:#525252;--st-neutral-800:#262626;--st-neutral-900:#171717;--st-stone-100:#f5f5f4;--st-stone-200:#e7e5e4;--st-stone-300:#d6d3d1;--st-stone-400:#a8a29e;--st-stone-500:#78716c;--st-stone-700:#44403c;--st-red-300:#fca5a5;--st-red-400:#f87171;--st-orange-400:#fb923c;--st-amber-50:#fffbeb;--st-amber-100:#fef3c7;--st-amber-200:#fde68a;--st-emerald-400:#34d399;--st-emerald-500:#10b981;--st-emerald-600:#059669;--st-teal-400:#2dd4bf;--st-teal-500:#14b8a6;--st-teal-600:#0d9488;--st-sky-100:#e0f2fe;--st-sky-200:#bae6fd;--st-sky-300:#7dd3fc;--st-sky-400:#38bdf8;--st-blue-50:#eff6ff;--st-blue-100:#dbeafe;--st-blue-200:#bfdbfe;--st-blue-300:#93c5fd;--st-blue-400:#60a5fa;--st-blue-500:#3b82f6;--st-blue-600:#2563eb;--st-blue-800:#1e40af;--st-blue-900:#1e3a8a;--st-blue-950:#172554;--st-violet-50:#f5f3ff;--st-violet-100:#ede9fe;--st-violet-200:#ddd6fe;--st-violet-400:#a78bfa;--st-violet-500:#8b5cf6;--st-violet-600:#7c3aed;--st-violet-800:#5b21b6}.simple-table-root *{scrollbar-thumb-border-radius:var(--st-scrollbar-thumb-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit;scrollbar-color:var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);scrollbar-width:var(--st-scrollbar-width)}input{color:#000}.simple-table-root ::-webkit-scrollbar{height:8px;width:8px}.simple-table-root ::-webkit-scrollbar-track{background:var(--st-scrollbar-bg-color)}.simple-table-root ::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-color);border-radius:4px}.simple-table-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--st-cell-color)}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);overflow:hidden;position:relative}.st-wrapper-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.st-content-wrapper,.st-wrapper-container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.st-content-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.st-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.st-content,.st-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.st-header-container,.st-header-container.st-header-scroll-padding:after{-ms-flex-negative:0;background-color:var(--st-header-background-color);flex-shrink:0}.st-header-container.st-header-scroll-padding:after{content:"";display:block;width:default-width;width:var(--st-after-width,default-width)}.st-header-container.st-header-scroll-padding:after,.st-header-main,.st-header-pinned-left,.st-header-pinned-right{border-bottom:var(--st-border-width) solid var(--st-border-color)}.st-header-grid{min-width:100%;position:relative}.st-body-main,.st-body-pinned-left,.st-body-pinned-right,.st-header-main,.st-header-pinned-left,.st-header-pinned-right,.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-middle,.st-horizontal-scrollbar-right{overflow:auto;-ms-touch-action:auto;touch-action:auto}.st-body-main,.st-body-pinned-left,.st-body-pinned-right,.st-header-main,.st-header-pinned-left,.st-header-pinned-right{scrollbar-width:none}.st-body-pinned-left,.st-body-pinned-right,.st-header-pinned-left,.st-header-pinned-right{-ms-flex-negative:0;flex-shrink:0}.st-body-pinned-left,.st-header-pinned-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-body-pinned-right,.st-header-pinned-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-header-main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.st-header-main,.st-header-pinned-left,.st-header-pinned-right{overflow-x:auto;overflow-y:hidden}.st-header-main::-webkit-scrollbar{display:none}.st-body-container{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-overflow-scrolling:touch;background-color:var(--st-even-row-background-color);flex-grow:1;height:-webkit-max-content;height:-moz-max-content;height:max-content;overflow:auto;-ms-touch-action:auto;touch-action:auto;width:100%}.st-body-container,.st-sticky-top{display:-webkit-box;display:-ms-flexbox;display:flex}.st-sticky-top{left:0;pointer-events:none;position:absolute;top:0;z-index:10}.st-sticky-section-left,.st-sticky-section-main,.st-sticky-section-right{overflow:hidden;pointer-events:none}.st-sticky-section-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-sticky-section-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-empty-state-wrapper{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:200px;width:100%}.st-empty-state,.st-empty-state-wrapper{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.st-empty-state{-ms-flex-align:center;-ms-flex-pack:center;color:var(--st-header-text-color);font-size:.9em;opacity:.6;padding:48px 24px}.st-body-main,.st-body-pinned-left,.st-body-pinned-right{display:grid;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-height:100%}.st-body-main::-webkit-scrollbar{display:none}.st-row{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--st-even-row-background-color);display:grid;min-width:100%;position:absolute;-webkit-transition:background .2s ease;transition:background .2s ease}.st-row.st-sticky-parent{z-index:5}.st-sticky-top .st-row.even{background-color:var(--st-even-row-background-color)}.st-sticky-top .st-row.odd{background-color:var(--st-odd-row-background-color)}.st-sticky-top .st-row.selected{background-color:var(--st-selected-row-background-color)}.st-row.hovered .st-cell-editing,.st-row.hovered .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first),.st-sticky-top .st-row.hovered:not(.st-cell-editing):not(.st-cell-column-selected):not(.st-cell-column-selected-last):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-row.hovered .st-cell.st-sub-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-sub-cell-hover-background-color)}.st-row.even{background-color:var(--st-even-row-background-color)}.st-row.odd{background-color:var(--st-odd-row-background-color)}.st-row.selected{background-color:var(--st-selected-row-background-color)}.st-row.selected.hovered .st-cell-editing,.st-row.selected.hovered .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-nested-grid-row{padding-left:8px;padding-right:8px}.st-cell-content{display:-webkit-box;display:-ms-flexbox;display:flex}.st-row.odd .st-cell-content{color:var(--st-cell-odd-row-color)}.st-row.even .st-cell-content{color:var(--st-cell-color)}.st-cell.st-cell-even-row{background-color:var(--st-even-row-background-color)}.st-cell.st-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-cell.st-cell-even-row .st-cell-content{color:var(--st-cell-color)}.st-cell.st-cell-odd-row .st-cell-content{color:var(--st-cell-odd-row-color)}.st-cell.st-cell-selected-row{background-color:var(--st-selected-row-background-color)}.st-cell.st-row-hovered:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){background-color:var(--st-hover-row-background-color)}.st-header-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:var(--st-font-weight-bold);gap:var(--st-spacing-small);top:0}.st-header-cell.parent{border-bottom:var(--st-border-width) solid var(--st-border-color)}.st-header-cell.st-sub-header{background-color:var(--st-sub-header-background-color)}.st-cell.st-sub-cell{background-color:var(--st-sub-cell-background-color)}.st-header-cell.clickable,.st-header-cell.st-header-editable{cursor:pointer}.st-header-cell.draggable{cursor:-webkit-grab;cursor:grab}.st-header-cell.st-header-selected{background-color:var(--st-header-selected-background-color)}.st-header-cell.st-header-selected .st-header-label-text{color:var(--st-header-selected-label-color)}.st-header-cell.st-header-selected .st-header-icon,.st-header-cell.st-header-selected .st-icon-container *{fill:var(--st-header-selected-icon-color);background-color:var(--st-header-selected-icon-color)}.st-header-cell.st-header-selected .st-icon-container{color:var(--st-header-selected-icon-color)}.st-header-cell.st-header-selected .st-header-resize-handle{background-color:var(--st-resize-handle-selected-color)}.st-header-cell.st-header-has-highlighted-cell{background-color:var(--st-header-highlight-indicator-color)}.st-cell,.st-header-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:initial;color:var(--st-cell-color);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);overflow:hidden;position:relative}.st-cell.left-aligned,.st-header-cell.left-aligned{padding-left:var(--st-cell-padding);text-align:left}.st-cell.center-aligned,.st-cell.center-aligned>.st-cell-content,.st-header-cell.center-aligned,.st-header-cell.center-aligned>.st-header-label-text{text-align:center}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{height:100%;width:100%}.st-cell-editing{position:relative}.st-header-label{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:1;height:100%;min-width:0;overflow:hidden}.st-cell-content,.st-header-label-text{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:100%}.st-header-label-text{color:var(--st-header-label-color);font-weight:600;overflow:hidden;padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding);text-overflow:ellipsis;white-space:nowrap}.st-cell-content.left-aligned,.st-header-label-text.left-aligned{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}.st-cell-content.center-aligned,.st-header-label-text.center-aligned{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.st-cell-content.right-aligned,.st-header-label-text.right-aligned{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right}.st-not-resizeable .st-cell-content{padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding)}.st-resizeable .st-body-pinned-right .st-cell-content,.st-resizeable .st-sticky-section-right .st-cell-content{padding-left:calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width));padding-right:var(--st-cell-padding)}.st-resizeable .st-body-main .st-cell-content,.st-resizeable .st-body-pinned-left .st-cell-content,.st-resizeable .st-sticky-section-left .st-cell-content,.st-resizeable .st-sticky-section-main .st-cell-content{padding-left:var(--st-cell-padding);padding-right:calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-container-width))}.st-resizeable .st-selection-cell .st-cell-content{padding-left:var(--st-cell-padding);padding-right:var(--st-cell-padding)}.st-selection-cell.st-selection-has-highlighted-cell{background-color:var(--st-selection-highlight-indicator-color)}.st-cell{border:var(--st-border-width) solid #0000}.st-cell:focus,.st-cell:focus-visible{outline:none}.st-cell.even-column:not(.st-cell-selected){background-color:var(--st-even-column-background-color)}.st-cell.odd-column:not(.st-cell-selected){background-color:var(--st-odd-column-background-color)}.st-cell-depth-1{padding-left:calc(var(--st-cell-padding)*4)}.st-cell-depth-2{padding-left:calc(var(--st-cell-padding)*8)}.st-cell-depth-3{padding-left:calc(var(--st-cell-padding)*12)}.st-cell-depth-4{padding-left:calc(var(--st-cell-padding)*16)}.st-cell-depth-5{padding-left:calc(var(--st-cell-padding)*20)}.st-cell-depth-6{padding-left:calc(var(--st-cell-padding)*24)}.st-cell-depth-7{padding-left:calc(var(--st-cell-padding)*28)}.st-cell-depth-1 .st-cell-content{color:rgb(from var(--st-cell-color) r g b/80%)!important}.st-cell-depth-2 .st-cell-content,.st-cell-depth-3 .st-cell-content,.st-cell-depth-4 .st-cell-content,.st-cell-depth-5 .st-cell-content,.st-cell-depth-6 .st-cell-content,.st-cell-depth-7 .st-cell-content{color:rgb(from var(--st-cell-color) r g b/70%)!important}.st-icon-container{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin-left:4px;-webkit-transition:outline .2s ease;transition:outline .2s ease}.st-icon-container:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:2px}.st-collapse-icon-container{cursor:pointer}.st-expand-icon{fill:var(--st-header-label-color);cursor:pointer}.st-header-resize-handle-container{-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;cursor:col-resize;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--st-resize-handle-container-width)}.st-header-resize-handle{background-color:var(--st-resize-handle-color);height:calc(100% - 20px);width:var(--st-resize-handle-width)}.st-header-cell.st-no-resize{padding-right:var(--st-resize-handle-container-width)}.st-row-separator{background-color:var(--st-border-color);cursor:pointer;height:1px;min-width:100%;position:absolute;width:100%}.st-row-separator.st-last-group-row{background-color:var(--st-last-group-row-separator-border-color)}.st-dragging:not(.st-sub-header){background-color:var(--st-dragging-background-color)}.st-dragging.st-sub-header{background-color:var(--st-dragging-sub-header-background-color)}.st-loading-skeleton{-webkit-animation:st-skeleton-pulse 1.5s ease-in-out infinite;animation:st-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--st-loading-skeleton-bg-color);border-radius:4px;height:16px;width:80%}@-webkit-keyframes st-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes st-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.st-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-selected .st-cell-content{color:var(--st-selected-cell-color)!important}.st-cell-selected-first{background-color:var(--st-selected-first-cell-background-color);border:var(--st-border-width) solid var(--st-selected-border-color)}.st-cell-selected-first .st-cell-content{color:var(--st-selected-first-cell-color)!important}.st-cell-selected.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-selected.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-selected-first.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-selected-first.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-column-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-column-selected .st-cell-content{color:var(--st-selected-cell-color)!important}.st-cell-column-selected-first{background-color:var(--st-selected-first-cell-background-color)}.st-cell-column-selected-first .st-cell-content{color:var(--st-selected-first-cell-color)!important}.st-cell-column-selected.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-column-selected.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-cell-column-selected-first.st-sub-cell{background-color:var(--st-selected-sub-cell-background-color)}.st-cell-column-selected-first.st-sub-cell .st-cell-content{color:var(--st-selected-sub-cell-color)!important}.st-selected-top-border{border-top:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-bottom-border{border-bottom:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-left-border{border-left:var(--st-border-width) solid var(--st-selected-border-color)}.st-selected-right-border{border-right:var(--st-border-width) solid var(--st-selected-border-color)}.st-horizontal-scrollbar-container{-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-scrollbar-bg-color);border-top:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:12px;width:100%}.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-right{-ms-flex-negative:0;flex-shrink:0}.st-horizontal-scrollbar-left{border-right:var(--st-border-width) solid var(--st-border-color)}.st-horizontal-scrollbar-right{border-left:var(--st-border-width) solid var(--st-border-color)}.st-horizontal-scrollbar-left,.st-horizontal-scrollbar-right{height:100%}.st-horizontal-scrollbar-middle{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:11px}.st-horizontal-scrollbar-left>div,.st-horizontal-scrollbar-middle>div,.st-horizontal-scrollbar-right>div{height:.3px}.st-footer{-webkit-box-pack:justify;-ms-flex-pack:justify;background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);gap:var(--st-spacing-medium);justify-content:space-between;min-height:49px;min-height:var(--st-footer-height,49px);padding:var(--st-spacing-medium)}.st-footer,.st-footer-info{-webkit-box-align:center;-ms-flex-align:center;-ms-flex-negative:0;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0}.st-footer-results-text{color:var(--st-cell-color);font-size:.9em;white-space:nowrap}.st-footer-pagination{-ms-flex-negative:0;flex-shrink:0}.st-footer-pagination,.st-next-prev-btn{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-next-prev-btn{-webkit-box-pack:center;-ms-flex-pack:center;fill:var(--st-next-prev-btn-color);background-color:initial;border:none;border-radius:var(--st-border-radius);cursor:pointer;justify-content:center;padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.disabled>.st-next-prev-icon{fill:var(--st-next-prev-btn-disabled-color);cursor:not-allowed}.st-next-prev-btn:not(.disabled):hover{background-color:var(--st-page-btn-hover-background-color)}.st-next-prev-btn:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:0}.st-page-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--st-page-btn-color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center;margin-right:var(--st-spacing-small);padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-page-btn:hover{background-color:var(--st-button-hover-background-color)}.st-page-btn:focus-visible{outline:1px solid var(--st-focus-ring-color);outline-offset:-2px}.st-page-btn.active{background-color:var(--st-button-active-background-color);color:#fff}.st-footer-pagination .st-page-btn.st-page-btn--compact-hidden{display:none}.st-page-ellipsis{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:var(--st-cell-color);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;justify-content:center;margin:0 var(--st-spacing-small);padding:var(--st-spacing-small)}.editable-cell-input{border:var(--st-border-width) solid var(--st-border-color);-webkit-box-shadow:var(--st-edit-cell-shadow-color);box-shadow:var(--st-edit-cell-shadow-color);font-size:.875rem;height:100%;left:0;outline:none;padding:var(--st-cell-padding);position:absolute;top:0;width:100%;z-index:1}.editable-cell-input:focus{border:var(--st-border-width) solid var(--st-editable-cell-focus-border-color)}.st-column-editor{-ms-flex-negative:0;background:var(--st-column-editor-background-color);border-left:var(--st-border-width) solid var(--st-border-color);color:var(--st-column-editor-text-color);display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-column-editor-text{-webkit-box-flex:1;-ms-flex-positive:1;cursor:pointer;flex-grow:1;padding:var(--st-spacing-medium) var(--st-spacing-small);-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;z-index:2}.st-column-editor.open,.st-column-editor.open .st-column-editor-text{background-color:var(--st-column-editor-background-color)}.st-column-editor-popout{background-color:var(--st-column-editor-popout-background-color);height:100%;overflow:hidden;position:absolute;right:calc(100% + 1px);top:0;-webkit-transition:width var(--st-transition-duration) var(--st-transition-ease);transition:width var(--st-transition-duration) var(--st-transition-ease);width:0;z-index:10}.st-column-editor-popout-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-overflow-scrolling:touch;border-left:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;-ms-touch-action:auto;touch-action:auto}.st-column-editor-search-wrapper{background-color:var(--st-column-editor-popout-background-color);padding:var(--st-spacing-medium);position:sticky;top:0;z-index:1}.st-column-editor-list{padding-bottom:var(--st-spacing-medium);padding-left:var(--st-spacing-medium);padding-right:var(--st-spacing-medium)}.st-column-editor-list,.st-column-editor-lists{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.st-column-editor-lists{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto}.st-column-editor-section-label{color:var(--st-column-editor-text-color);font-size:.7rem;font-weight:600;letter-spacing:.04em;opacity:.75;padding:var(--st-spacing-small) var(--st-spacing-medium) 0;text-transform:uppercase}.st-column-editor-list-section{padding-bottom:var(--st-spacing-small);padding-top:0}.st-column-editor-footer{background-color:var(--st-column-editor-popout-background-color);border-top:var(--st-border-width) solid var(--st-border-color);bottom:0;position:sticky;z-index:1}.st-column-editor-footer,.st-column-editor-reset-btn{padding:var(--st-spacing-small) var(--st-spacing-medium)}.st-column-editor-reset-btn{background:#0000;border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-column-editor-text-color);cursor:pointer;font-size:.8rem;font-weight:500;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-column-editor-reset-btn:hover{background-color:var(--st-hover-background-color)}.st-column-pin-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#0000;border:none;border-radius:4px;color:inherit;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin:0;padding:2px}.st-column-pin-btn:hover{background:color-mix(in srgb,var(--st-column-editor-text-color) 12%,#0000)}.st-column-pin-pinned-mark{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.st-column-pin-pinned-active{background:color-mix(in srgb,var(--st-column-editor-text-color) 12%,#0000);border-radius:4px}.st-column-pin-pinned-essential{cursor:default}.st-column-pin-side-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1px}.st-column-pin-side{font-size:.65rem;font-weight:700;height:1.25rem;letter-spacing:-.02em;line-height:1;min-width:1.25rem;padding:0 3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-column-pin-side-option{color:color-mix(in srgb,var(--st-column-editor-text-color) 52%,#0000);-webkit-transition:color var(--st-transition-duration) var(--st-transition-ease),background var(--st-transition-duration) var(--st-transition-ease);transition:color var(--st-transition-duration) var(--st-transition-ease),background var(--st-transition-duration) var(--st-transition-ease)}.st-column-pin-svg,.st-header-checkbox-item:hover .st-column-pin-side-option{color:var(--st-column-editor-text-color)}.st-column-pin-svg{display:block}.st-checkbox-disabled{cursor:not-allowed;opacity:.45}.st-header-checkbox-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);padding-bottom:var(--st-spacing-small);padding-top:var(--st-spacing-small)}.st-column-label-container{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-drag-icon-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:-webkit-grab;cursor:grab;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.5;-webkit-transition:opacity var(--st-transition-duration) var(--st-transition-ease);transition:opacity var(--st-transition-duration) var(--st-transition-ease)}.st-drag-icon-container:hover{opacity:1}.st-drag-icon-container:active{cursor:-webkit-grabbing;cursor:grabbing}.st-drag-icon{fill:currentColor}.st-column-editor-drag-separator{background-color:var(--st-drag-separator-color);border-radius:1px;height:2px;margin:2px 0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;width:100%}.st-header-icon-container{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;width:24px}.st-header-icon{fill:var(--st-header-icon-color);-webkit-transition:fill var(--st-transition-duration) var(--st-transition-ease);transition:fill var(--st-transition-duration) var(--st-transition-ease)}.st-collapsible-header-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.st-collapsible-header-icon,.st-nested-headers{display:-webkit-box;display:-ms-flexbox;display:flex}.st-nested-headers{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.st-column-editor-popout.open{min-width:240px;width:auto}.st-column-editor-popout.left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.st-column-editor-popout.open.left{-webkit-transform:translateX(0);transform:translateX(0)}.st-checkbox-label{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-small);justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-checkbox-input{height:0;opacity:0;pointer-events:none;position:absolute;width:0}.st-checkbox-input:focus-visible+.st-checkbox-custom{outline:1px solid var(--st-focus-ring-color);outline-offset:-1px}.st-checkbox-custom{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border:var(--st-border-width) solid var(--st-checkbox-border-color);border-radius:var(--st-border-radius);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;min-height:16px;min-width:16px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease),border-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease),border-color var(--st-transition-duration) var(--st-transition-ease)}.st-checkbox-custom.st-checked{background-color:var(--st-checkbox-checked-background-color);border-color:var(--st-checkbox-checked-border-color)}.st-checkbox-checkmark{fill:#fff}@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-in-right{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.st-group-header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);border-bottom:var(--st-border-width) solid var(--st-border-color);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:var(--st-font-weight-bold);height:40px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-group-header:hover{background-color:var(--st-button-hover-background-color)}.st-group-header-content{gap:var(--st-spacing-medium)}.st-group-header-content,.st-group-toggle-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-group-toggle-icon{-webkit-box-pack:center;-ms-flex-pack:center;font-size:.8em;height:16px;justify-content:center;width:16px}.st-group-name{font-weight:var(--st-font-weight-bold)}.st-group-count{color:var(--st-cell-odd-row-color);font-size:.9em}.st-group-header.expanded .st-group-toggle-icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.st-group-header.collapsed .st-group-toggle-icon,.st-group-header.expanded .st-group-toggle-icon{-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-group-header.collapsed .st-group-toggle-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.st-expand-icon-container{-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-expand-icon-container.expanded{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.st-expand-icon-container.collapsed{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.st-expand-icon-container.placeholder{opacity:0;pointer-events:none}@-webkit-keyframes cell-flash{0%{background-color:var(--st-cell-flash-color)}to{background-color:initial}}@keyframes cell-flash{0%{background-color:var(--st-cell-flash-color)}to{background-color:initial}}.st-cell-updating{-webkit-animation:cell-flash .6s ease-in-out;animation:cell-flash .6s ease-in-out}@-webkit-keyframes copy-flash{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-cell-background-color)}}@keyframes copy-flash{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-cell-background-color)}}@-webkit-keyframes copy-flash-first{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}@keyframes copy-flash-first{0%{background-color:var(--st-copy-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}.st-cell-copy-flash{-webkit-animation:copy-flash .8s ease-in-out;animation:copy-flash .8s ease-in-out}.st-cell-copy-flash-first{-webkit-animation:copy-flash-first .8s ease-in-out;animation:copy-flash-first .8s ease-in-out}@-webkit-keyframes warning-flash{0%{background-color:var(--st-warning-flash-color)}to{background-color:initial}}@keyframes warning-flash{0%{background-color:var(--st-warning-flash-color)}to{background-color:initial}}@-webkit-keyframes warning-flash-first{0%{background-color:var(--st-warning-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}@keyframes warning-flash-first{0%{background-color:var(--st-warning-flash-color)}to{background-color:var(--st-selected-first-cell-background-color)}}.st-cell-warning-flash{-webkit-animation:warning-flash .6s ease-in-out;animation:warning-flash .6s ease-in-out}.st-cell-warning-flash-first{-webkit-animation:warning-flash-first .6s ease-in-out;animation:warning-flash-first .6s ease-in-out}.st-dropdown-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-overflow-scrolling:touch;background-color:var(--st-odd-row-background-color);border:1px solid var(--st-border-color);border-radius:var(--st-border-radius);-webkit-box-shadow:var(--st-edit-cell-shadow);box-shadow:var(--st-edit-cell-shadow);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:300px;min-width:120px;position:fixed;-ms-touch-action:auto;touch-action:auto;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;z-index:100}.st-dropdown-content.st-dropdown-content--allow-descendant-overflow{max-height:none;overflow:visible}.st-filter-container .st-dropdown-content{z-index:101}.st-dropdown-bottom-left,.st-dropdown-bottom-right,.st-dropdown-top-left,.st-dropdown-top-right{margin:0}.st-dropdown-item{color:var(--st-cell-color);cursor:pointer;font-size:.9em;padding:var(--st-spacing-small) var(--st-spacing-medium);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);white-space:nowrap}.st-dropdown-item:hover{background-color:var(--st-button-hover-background-color)}.st-dropdown-item.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-dropdown-divider{background-color:var(--st-border-color);height:1px;margin:4px 0}.st-datepicker{background-color:var(--st-odd-row-background-color);font-family:inherit}.st-datepicker-header{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-header-background-color);border-bottom:1px solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;padding:var(--st-spacing-medium)}.st-datepicker-header-label{-webkit-box-flex:1;color:var(--st-header-label-color);cursor:pointer;-ms-flex:1;flex:1;font-weight:600;text-align:center}.st-datepicker-nav-btn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#0000;border:none;border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.2em;justify-content:center;padding:0 8px}.st-datepicker-nav-btn>*{fill:var(--st-cell-color)!important}.st-datepicker-nav-btn:hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-grid{display:grid;padding:var(--st-spacing-medium)}.st-datepicker-days-grid{gap:4px;grid-template-columns:repeat(7,1fr)}.st-datepicker-months-grid,.st-datepicker-years-grid{gap:8px;grid-template-columns:repeat(3,1fr)}.st-datepicker-weekday{color:var(--st-datepicker-weekday-color);font-size:.8em;font-weight:600;padding:6px 0;text-align:center}.st-datepicker-day{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:50%;color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.9em;height:24px;justify-content:center;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);width:24px}.st-datepicker-day.empty{cursor:default}.st-datepicker-day:not(.empty):hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-day.today{color:var(--st-button-active-background-color);font-weight:600}.st-datepicker-day.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-datepicker-day.other-month{color:var(--st-datepicker-other-month-color)}.st-datepicker-month,.st-datepicker-year{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border-radius:var(--st-border-radius);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;padding:12px 8px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-datepicker-month:hover,.st-datepicker-year:hover{background-color:var(--st-button-hover-background-color)}.st-datepicker-month.selected,.st-datepicker-year.selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-datepicker-footer{-webkit-box-pack:end;-ms-flex-pack:end;border-top:1px solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-end;padding:var(--st-spacing-medium)}.st-datepicker-today-btn{background-color:initial;border:1px solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;padding:6px 12px;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-datepicker-today-btn:hover{background-color:var(--st-button-hover-background-color)}.st-filter-container{min-width:150px;padding:var(--st-spacing-medium)}.st-filter-container,.st-filter-section{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1}.st-filter-section{margin-bottom:var(--st-spacing-medium)}.st-filter-input{background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);font-family:inherit;font-size:.9em;outline:none;padding:var(--st-spacing-small);-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-filter-input:focus{border-color:var(--st-editable-cell-focus-border-color)}.st-filter-input-range-from{margin-bottom:var(--st-spacing-medium)}.st-filter-select{background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;font-family:inherit;font-size:.9em;outline:none;padding:var(--st-spacing-medium) var(--st-spacing-medium);-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-filter-select:focus{border-color:var(--st-editable-cell-focus-border-color)}.st-filter-actions{border-top:var(--st-border-width) solid var(--st-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--st-spacing-medium);padding-top:var(--st-spacing-medium)}.st-filter-button{-webkit-box-flex:1;-moz-appearance:none;appearance:none;-webkit-appearance:none;border:none;border-radius:var(--st-border-radius);cursor:pointer;-ms-flex:1;flex:1;font-family:inherit;font-size:.9em;font-weight:500;padding:var(--st-spacing-small);-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease)}.st-filter-button:focus{outline:none}.st-filter-button:focus-visible{outline:2px solid var(--st-focus-ring-color);outline-offset:2px}.st-filter-button-apply{background-color:var(--st-button-active-background-color);color:#fff}.st-filter-button-apply:hover:not(.st-filter-button-disabled){opacity:.9}.st-filter-button-disabled{background-color:var(--st-filter-button-disabled-background-color);color:var(--st-filter-button-disabled-text-color);cursor:not-allowed}.st-filter-button-clear{background-color:initial;border:var(--st-border-width) solid var(--st-border-color);color:var(--st-cell-color)}.st-filter-button-clear:hover{background-color:var(--st-button-hover-background-color)}.st-custom-select{position:relative;width:100%}.st-custom-select-trigger{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:var(--st-odd-row-background-color);border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);color:var(--st-cell-color);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:.9em;gap:var(--st-spacing-medium);justify-content:space-between;outline:none;padding:var(--st-spacing-small);text-align:left;-webkit-transition:border-color var(--st-transition-duration) var(--st-transition-ease);transition:border-color var(--st-transition-duration) var(--st-transition-ease);width:100%}.st-custom-select-open .st-custom-select-trigger,.st-custom-select-trigger:focus,.st-custom-select-trigger:hover:not(:disabled){border-color:var(--st-editable-cell-focus-border-color)}.st-custom-select-value{-webkit-box-flex:1;color:var(--st-cell-color);-ms-flex:1;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.st-custom-select-arrow{-ms-flex-negative:0;color:var(--st-header-label-color);flex-shrink:0;-webkit-transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:-webkit-transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease);transition:transform var(--st-transition-duration) var(--st-transition-ease),-webkit-transform var(--st-transition-duration) var(--st-transition-ease)}.st-custom-select-open .st-custom-select-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.st-custom-select-options{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:200px;min-width:120px;overflow:auto;overflow-x:hidden}.st-custom-select-option{-ms-flex-negative:0;color:var(--st-cell-color);cursor:pointer;flex-shrink:0;font-size:.9em;overflow:hidden;padding:var(--st-spacing-small);text-overflow:ellipsis;-webkit-transition:background-color var(--st-transition-duration) var(--st-transition-ease);transition:background-color var(--st-transition-duration) var(--st-transition-ease);white-space:nowrap}.st-custom-select-option-focused,.st-custom-select-option:hover{background-color:var(--st-button-hover-background-color)}.st-custom-select-option-selected{background-color:var(--st-selected-cell-background-color);color:var(--st-selected-cell-color)}.st-custom-select-option-selected.st-custom-select-option-focused{background-color:var(--st-selected-cell-background-color);opacity:.9}.st-custom-select-disabled{opacity:var(--st-opacity-disabled);pointer-events:none}.st-custom-select-disabled .st-custom-select-trigger{background-color:var(--st-header-background-color);color:var(--st-header-label-color);cursor:not-allowed}.st-enum-filter-options{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;gap:var(--st-spacing-small);max-height:200px;overflow:auto}.st-enum-filter-options .st-checkbox-label{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:100%}.st-enum-search,.st-enum-select-all{border-bottom:var(--st-border-width) solid var(--st-border-color);padding-bottom:var(--st-spacing-small)}.st-enum-select-all-label{color:var(--st-header-label-color);font-weight:600}.st-enum-option-label{color:var(--st-cell-color);font-size:.9em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-enum-filter-options .st-enum-option-label{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.st-enum-no-results{color:var(--st-slate-400);font-size:.9em;font-style:italic;padding:var(--st-spacing-medium);text-align:center}.st-row-number{font-size:.8em;font-weight:500;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.st-selection-cell-content{-webkit-box-pack:justify;-ms-flex-pack:justify;gap:8px;justify-content:space-between;width:100%}.st-row-buttons,.st-selection-cell-content,.st-selection-control{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.st-row-buttons,.st-selection-control{-ms-flex-negative:0;flex-shrink:0}.st-row-buttons{-webkit-box-pack:end;-ms-flex-pack:end;gap:4px;justify-content:flex-end}.st-row-button{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}.st-column-borders .st-cell:not(.st-last-column),.st-column-borders .st-header-cell:not(.st-last-column),.st-column-borders .st-row.hovered .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first),.st-column-borders .st-row.selected.hovered .st-cell:not(.st-last-column):not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(.st-cell-column-selected-first){-webkit-box-shadow:var(--st-border-width) 0 0 0 var(--st-border-color);box-shadow:var(--st-border-width) 0 0 0 var(--st-border-color)}.st-tooltip{word-wrap:break-word;-webkit-animation:st-tooltip-fade-in .2s ease-out;animation:st-tooltip-fade-in .2s ease-out;background-color:var(--st-tooltip-background-color);border-radius:var(--st-tooltip-border-radius);-webkit-box-shadow:var(--st-tooltip-shadow);box-shadow:var(--st-tooltip-shadow);color:var(--st-tooltip-text-color);font-size:.8em;line-height:1.4;max-width:300px;padding:var(--st-tooltip-padding);pointer-events:none}@-webkit-keyframes st-tooltip-fade-in{0%{opacity:0;-webkit-transform:translateY(-4px);transform:translateY(-4px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes st-tooltip-fade-in{0%{opacity:0;-webkit-transform:translateY(-4px);transform:translateY(-4px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.st-row.st-state-row{display:grid;position:absolute;width:100%}.st-row.st-state-row-spacer{background-color:initial;display:block;position:absolute;width:100%}.st-state-row-cell{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--st-body-background-color);display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:1/-1}.st-bar-chart,.st-line-area-chart{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.st-bar-chart rect{shape-rendering:crispEdges}.theme-light{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-slate-50);--st-scrollbar-thumb-color:var(--st-slate-300);--st-scrollbar-width:thin;--st-border-color:var(--st-slate-300);--st-footer-background-color:var(--st-slate-50);--st-last-group-row-separator-border-color:var(--st-slate-400);--st-odd-row-background-color:var(--st-white);--st-even-row-background-color:var(--st-slate-50);--st-hover-row-background-color:var(--st-slate-100);--st-selected-row-background-color:var(--st-blue-50);--st-odd-column-background-color:var(--st-slate-50);--st-even-column-background-color:var(--st-white);--st-header-background-color:var(--st-slate-100);--st-sub-header-background-color:var(--st-slate-200);--st-header-label-color:var(--st-slate-900);--st-header-icon-color:var(--st-slate-500);--st-cell-color:var(--st-slate-900);--st-cell-odd-row-color:var(--st-slate-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-sub-cell-background-color:var(--st-slate-100);--st-sub-cell-hover-background-color:var(--st-slate-200);--st-selected-cell-background-color:var(--st-blue-100);--st-selected-first-cell-background-color:var(--st-blue-50);--st-selected-cell-color:var(--st-slate-900);--st-selected-first-cell-color:var(--st-slate-900);--st-selected-sub-cell-background-color:var(--st-blue-200);--st-selected-sub-cell-color:var(--st-slate-900);--st-dragging-background-color:var(--st-slate-200);--st-dragging-sub-header-background-color:var(--st-slate-300);--st-resize-handle-color:var(--st-slate-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-500);--st-editable-cell-focus-border-color:var(--st-blue-500);--st-focus-ring-color:var(--st-blue-800);--st-button-hover-background-color:var(--st-slate-100);--st-button-active-background-color:var(--st-blue-600);--st-next-prev-btn-color:var(--st-slate-600);--st-next-prev-btn-disabled-color:var(--st-slate-400);--st-page-btn-color:var(--st-slate-600);--st-page-btn-hover-background-color:var(--st-slate-100);--st-checkbox-checked-background-color:var(--st-blue-600);--st-checkbox-checked-border-color:var(--st-blue-600);--st-checkbox-border-color:var(--st-slate-300);--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:var(--st-slate-500);--st-datepicker-weekday-color:var(--st-slate-500);--st-datepicker-other-month-color:var(--st-slate-400);--st-filter-button-disabled-background-color:var(--st-slate-300);--st-filter-button-disabled-text-color:var(--st-slate-500);--st-cell-flash-color:var(--st-slate-200);--st-copy-flash-color:var(--st-blue-500);--st-warning-flash-color:var(--st-red-300);--st-tooltip-background-color:var(--st-slate-900);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-blue-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-100);--st-selection-highlight-indicator-color:var(--st-slate-300);--st-loading-skeleton-bg-color:var(--st-slate-200);--st-chart-color:var(--st-blue-300);--st-chart-fill-color:var(--st-blue-300);--st-drag-separator-color:var(--st-blue-500)}.theme-dark{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-gray-900);--st-scrollbar-thumb-color:var(--st-gray-600);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-gray-700);--st-footer-background-color:var(--st-gray-900);--st-last-group-row-separator-border-color:var(--st-gray-500);--st-odd-row-background-color:var(--st-gray-800);--st-even-row-background-color:var(--st-gray-900);--st-hover-row-background-color:var(--st-gray-600);--st-selected-row-background-color:var(--st-blue-950);--st-odd-column-background-color:var(--st-gray-800);--st-even-column-background-color:var(--st-gray-900);--st-header-background-color:var(--st-gray-800);--st-sub-header-background-color:var(--st-gray-700);--st-sub-cell-background-color:var(--st-gray-800);--st-sub-cell-hover-background-color:var(--st-gray-700);--st-header-label-color:var(--st-gray-100);--st-header-icon-color:var(--st-gray-400);--st-cell-color:var(--st-gray-100);--st-cell-odd-row-color:var(--st-gray-200);--st-edit-cell-shadow:0 1px 3px 0 #ffffff1a;--st-selected-cell-background-color:var(--st-blue-900);--st-selected-first-cell-background-color:var(--st-blue-800);--st-selected-cell-color:var(--st-white);--st-selected-first-cell-color:var(--st-white);--st-selected-sub-cell-background-color:var(--st-blue-800);--st-selected-sub-cell-color:var(--st-white);--st-dragging-background-color:var(--st-gray-500);--st-dragging-sub-header-background-color:var(--st-gray-600);--st-resize-handle-color:var(--st-gray-500);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-400);--st-editable-cell-focus-border-color:var(--st-blue-400);--st-focus-ring-color:var(--st-blue-400);--st-button-hover-background-color:var(--st-gray-600);--st-button-active-background-color:var(--st-blue-500);--st-next-prev-btn-color:var(--st-gray-300);--st-next-prev-btn-disabled-color:var(--st-gray-600);--st-page-btn-color:var(--st-gray-300);--st-page-btn-hover-background-color:var(--st-gray-600);--st-checkbox-checked-background-color:var(--st-blue-500);--st-checkbox-checked-border-color:var(--st-blue-500);--st-checkbox-border-color:var(--st-gray-600);--st-column-editor-background-color:var(--st-gray-800);--st-column-editor-popout-background-color:var(--st-gray-800);--st-column-editor-text-color:var(--st-gray-400);--st-datepicker-weekday-color:var(--st-gray-400);--st-datepicker-other-month-color:var(--st-gray-600);--st-filter-button-disabled-background-color:var(--st-gray-700);--st-filter-button-disabled-text-color:var(--st-gray-500);--st-cell-flash-color:var(--st-gray-500);--st-copy-flash-color:var(--st-blue-500);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-gray-100);--st-tooltip-text-color:var(--st-gray-900);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #0000004d;--st-header-selected-background-color:var(--st-blue-500);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-900);--st-selection-highlight-indicator-color:var(--st-gray-600);--st-loading-skeleton-bg-color:var(--st-gray-700);--st-chart-color:var(--st-blue-400);--st-chart-fill-color:var(--st-blue-400);--st-drag-separator-color:var(--st-blue-400)}.theme-neutral{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-neutral-100);--st-scrollbar-thumb-color:var(--st-neutral-400);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-neutral-300);--st-footer-background-color:var(--st-neutral-50);--st-last-group-row-separator-border-color:var(--st-neutral-400);--st-odd-row-background-color:var(--st-neutral-50);--st-even-row-background-color:var(--st-neutral-100);--st-hover-row-background-color:var(--st-neutral-200);--st-selected-row-background-color:var(--st-neutral-200);--st-odd-column-background-color:var(--st-neutral-50);--st-even-column-background-color:var(--st-neutral-100);--st-header-background-color:var(--st-neutral-200);--st-sub-header-background-color:var(--st-neutral-300);--st-sub-cell-background-color:var(--st-neutral-200);--st-sub-cell-hover-background-color:var(--st-neutral-300);--st-header-label-color:var(--st-neutral-900);--st-header-icon-color:var(--st-neutral-500);--st-cell-color:var(--st-neutral-900);--st-cell-odd-row-color:var(--st-neutral-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-selected-cell-background-color:var(--st-neutral-400);--st-selected-first-cell-background-color:var(--st-neutral-300);--st-selected-cell-color:var(--st-neutral-900);--st-selected-first-cell-color:var(--st-neutral-900);--st-selected-sub-cell-background-color:var(--st-neutral-400);--st-selected-sub-cell-color:var(--st-neutral-900);--st-dragging-background-color:var(--st-neutral-300);--st-dragging-sub-header-background-color:var(--st-neutral-400);--st-resize-handle-color:var(--st-neutral-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-neutral-600);--st-editable-cell-focus-border-color:var(--st-neutral-500);--st-focus-ring-color:var(--st-neutral-600);--st-button-hover-background-color:var(--st-neutral-200);--st-button-active-background-color:var(--st-neutral-600);--st-next-prev-btn-color:var(--st-neutral-600);--st-next-prev-btn-disabled-color:var(--st-neutral-400);--st-page-btn-color:var(--st-neutral-600);--st-page-btn-hover-background-color:var(--st-neutral-200);--st-checkbox-checked-background-color:var(--st-neutral-600);--st-checkbox-checked-border-color:var(--st-neutral-600);--st-checkbox-border-color:var(--st-neutral-300);--st-column-editor-background-color:var(--st-neutral-50);--st-column-editor-popout-background-color:var(--st-neutral-50);--st-column-editor-text-color:var(--st-neutral-500);--st-datepicker-weekday-color:var(--st-neutral-500);--st-datepicker-other-month-color:var(--st-neutral-400);--st-filter-button-disabled-background-color:var(--st-neutral-300);--st-filter-button-disabled-text-color:var(--st-neutral-500);--st-cell-flash-color:var(--st-neutral-400);--st-copy-flash-color:var(--st-neutral-600);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-neutral-800);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-neutral-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-neutral-400);--st-selection-highlight-indicator-color:var(--st-neutral-400);--st-loading-skeleton-bg-color:var(--st-neutral-200);--st-chart-color:var(--st-neutral-500);--st-chart-fill-color:var(--st-neutral-500);--st-drag-separator-color:var(--st-neutral-600)}.theme-sky{--st-border-radius:4px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:var(--st-blue-50);--st-scrollbar-thumb-color:var(--st-blue-300);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-blue-300);--st-footer-background-color:var(--st-blue-50);--st-last-group-row-separator-border-color:var(--st-blue-400);--st-odd-row-background-color:var(--st-blue-50);--st-even-row-background-color:var(--st-blue-100);--st-hover-row-background-color:var(--st-blue-200);--st-selected-row-background-color:var(--st-sky-100);--st-odd-column-background-color:var(--st-blue-50);--st-even-column-background-color:var(--st-blue-100);--st-header-background-color:var(--st-blue-200);--st-sub-header-background-color:var(--st-blue-300);--st-sub-cell-background-color:var(--st-sky-100);--st-sub-cell-hover-background-color:var(--st-sky-200);--st-header-label-color:var(--st-blue-900);--st-header-icon-color:var(--st-blue-600);--st-cell-color:var(--st-blue-900);--st-cell-odd-row-color:var(--st-blue-800);--st-edit-cell-shadow:0 1px 2px 0 #0000000d;--st-selected-cell-background-color:var(--st-blue-400);--st-selected-first-cell-background-color:var(--st-blue-300);--st-selected-cell-color:var(--st-blue-900);--st-selected-first-cell-color:var(--st-blue-900);--st-selected-sub-cell-background-color:var(--st-sky-300);--st-selected-sub-cell-color:var(--st-blue-900);--st-dragging-background-color:var(--st-sky-300);--st-dragging-sub-header-background-color:var(--st-sky-400);--st-resize-handle-color:var(--st-blue-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-blue-600);--st-editable-cell-focus-border-color:var(--st-blue-500);--st-focus-ring-color:var(--st-blue-600);--st-button-hover-background-color:var(--st-blue-200);--st-button-active-background-color:var(--st-blue-600);--st-next-prev-btn-color:var(--st-blue-600);--st-next-prev-btn-disabled-color:var(--st-blue-400);--st-page-btn-color:var(--st-blue-600);--st-page-btn-hover-background-color:var(--st-blue-200);--st-checkbox-checked-background-color:var(--st-blue-600);--st-checkbox-checked-border-color:var(--st-blue-600);--st-checkbox-border-color:var(--st-blue-300);--st-column-editor-background-color:var(--st-blue-50);--st-column-editor-popout-background-color:var(--st-blue-50);--st-column-editor-text-color:var(--st-blue-600);--st-datepicker-weekday-color:var(--st-blue-600);--st-datepicker-other-month-color:var(--st-blue-400);--st-filter-button-disabled-background-color:var(--st-blue-300);--st-filter-button-disabled-text-color:var(--st-blue-500);--st-cell-flash-color:var(--st-sky-200);--st-copy-flash-color:var(--st-blue-600);--st-warning-flash-color:var(--st-orange-400);--st-tooltip-background-color:var(--st-blue-900);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-blue-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-blue-400);--st-selection-highlight-indicator-color:var(--st-blue-400);--st-loading-skeleton-bg-color:var(--st-blue-200);--st-chart-color:var(--st-blue-900);--st-chart-fill-color:var(--st-blue-900);--st-drag-separator-color:var(--st-blue-600)}.theme-violet{--st-border-radius:8px;--st-cell-padding:12px;--st-spacing-small:6px;--st-spacing-medium:10px;--st-scrollbar-bg-color:var(--st-stone-100);--st-scrollbar-thumb-color:var(--st-violet-500);--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:var(--st-stone-200);--st-footer-background-color:var(--st-stone-100);--st-last-group-row-separator-border-color:var(--st-stone-300);--st-odd-row-background-color:var(--st-amber-50);--st-even-row-background-color:var(--st-amber-100);--st-hover-row-background-color:var(--st-amber-200);--st-selected-row-background-color:var(--st-violet-100);--st-odd-column-background-color:var(--st-violet-50);--st-even-column-background-color:var(--st-amber-50);--st-header-background-color:var(--st-violet-600);--st-sub-header-background-color:var(--st-violet-500);--st-sub-cell-background-color:var(--st-violet-100);--st-sub-cell-hover-background-color:var(--st-violet-200);--st-header-label-color:var(--st-white);--st-header-icon-color:var(--st-violet-200);--st-cell-color:var(--st-stone-700);--st-cell-odd-row-color:var(--st-stone-700);--st-edit-cell-shadow:0 4px 6px -1px #7c3aed1a,0 2px 4px -1px #7c3aed0f;--st-selected-cell-background-color:var(--st-violet-50);--st-selected-first-cell-background-color:var(--st-violet-100);--st-selected-cell-color:var(--st-violet-800);--st-selected-first-cell-color:var(--st-violet-800);--st-selected-sub-cell-background-color:var(--st-violet-200);--st-selected-sub-cell-color:var(--st-violet-800);--st-dragging-background-color:var(--st-violet-200);--st-dragging-sub-header-background-color:var(--st-violet-300);--st-resize-handle-color:var(--st-violet-400);--st-resize-handle-selected-color:var(--st-white);--st-selected-border-color:var(--st-violet-500);--st-editable-cell-focus-border-color:var(--st-violet-500);--st-focus-ring-color:var(--st-violet-600);--st-button-hover-background-color:var(--st-violet-50);--st-button-active-background-color:var(--st-violet-600);--st-next-prev-btn-color:var(--st-violet-600);--st-next-prev-btn-disabled-color:var(--st-violet-400);--st-page-btn-color:var(--st-violet-600);--st-page-btn-hover-background-color:var(--st-violet-50);--st-checkbox-checked-background-color:var(--st-violet-500);--st-checkbox-checked-border-color:var(--st-violet-600);--st-checkbox-border-color:var(--st-stone-200);--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:var(--st-violet-600);--st-datepicker-weekday-color:var(--st-violet-600);--st-datepicker-other-month-color:var(--st-violet-400);--st-filter-button-disabled-background-color:var(--st-stone-200);--st-filter-button-disabled-text-color:var(--st-stone-500);--st-cell-flash-color:var(--st-violet-200);--st-copy-flash-color:var(--st-violet-600);--st-warning-flash-color:var(--st-red-400);--st-tooltip-background-color:var(--st-violet-800);--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:var(--st-violet-600);--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:var(--st-violet-800);--st-selection-highlight-indicator-color:var(--st-stone-400);--st-loading-skeleton-bg-color:var(--st-stone-200);--st-chart-color:var(--st-violet-400);--st-chart-fill-color:var(--st-violet-400);--st-drag-separator-color:var(--st-violet-500)}.theme-frost{--st-border-radius:0px;--st-cell-padding:8px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#f8faff;--st-scrollbar-thumb-color:#c5d1dd;--st-scrollbar-width:thin;--st-scrollbar-thumb-border-radius:4px;--st-border-color:#e1e7ea;--st-footer-background-color:#f8faff;--st-last-group-row-separator-border-color:#c5d1dd;--st-odd-row-background-color:#fff;--st-even-row-background-color:#fff;--st-hover-row-background-color:#e5effe;--st-selected-row-background-color:#d4e4fd;--st-odd-column-background-color:#fff;--st-even-column-background-color:#fff;--st-header-background-color:#f8faff;--st-sub-header-background-color:#e5effe;--st-sub-cell-background-color:#f8faff;--st-sub-cell-hover-background-color:#d4e4fd;--st-header-label-color:#0b1215;--st-header-icon-color:#5a6c7d;--st-cell-color:#0b1215;--st-cell-odd-row-color:#0b1215;--st-edit-cell-shadow:0 1px 2px 0 #0b12150d;--st-selected-cell-background-color:#c9dcfb;--st-selected-first-cell-background-color:#d4e4fd;--st-selected-cell-color:#0b1215;--st-selected-first-cell-color:#0b1215;--st-selected-sub-cell-background-color:#c9dcfb;--st-selected-sub-cell-color:#0b1215;--st-dragging-background-color:#d0dce8;--st-dragging-sub-header-background-color:#0d9488;--st-resize-handle-color:#c5d1dd;--st-resize-handle-selected-color:#5a6c7d;--st-selected-border-color:#5a9cf8;--st-editable-cell-focus-border-color:#5a9cf8;--st-focus-ring-color:#5a9cf8;--st-button-hover-background-color:#e5effe;--st-button-active-background-color:#5a9cf8;--st-next-prev-btn-color:#5a6c7d;--st-next-prev-btn-disabled-color:#c5d1dd;--st-page-btn-color:#5a6c7d;--st-page-btn-hover-background-color:#e5effe;--st-checkbox-checked-background-color:#5a9cf8;--st-checkbox-checked-border-color:#4a8ce8;--st-checkbox-border-color:#e1e7ea;--st-column-editor-background-color:#fff;--st-column-editor-popout-background-color:#fff;--st-column-editor-text-color:#5a6c7d;--st-datepicker-weekday-color:#5a6c7d;--st-datepicker-other-month-color:#c5d1dd;--st-filter-button-disabled-background-color:#e1e7ea;--st-filter-button-disabled-text-color:#5a6c7d;--st-cell-flash-color:#d0dce8;--st-copy-flash-color:#5a9cf8;--st-warning-flash-color:#f87171;--st-tooltip-background-color:#0b1215;--st-tooltip-text-color:#fff;--st-tooltip-border-radius:6px;--st-tooltip-padding:8px 12px;--st-tooltip-font-size:13px;--st-tooltip-shadow:0 2px 8px #00000026;--st-header-selected-background-color:#5a9cf8;--st-header-selected-label-color:#fff;--st-header-selected-icon-color:#fff;--st-header-highlight-indicator-color:#c9dcfb;--st-selection-highlight-indicator-color:#e1e7ea;--st-loading-skeleton-bg-color:#e1e7ea;--st-chart-color:var(--st-blue-300);--st-chart-fill-color:var(--st-blue-300);--st-drag-separator-color:#0d9488}.theme-modern-light{--st-border-radius:4px;--st-cell-padding:12px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#fafafa;--st-scrollbar-thumb-color:#d1d5db;--st-scrollbar-width:thin;--st-border-color:#f3f4f6;--st-footer-background-color:var(--st-white);--st-last-group-row-separator-border-color:#e5e7eb;--st-odd-row-background-color:var(--st-white);--st-even-row-background-color:var(--st-white);--st-hover-row-background-color:#f9fafb;--st-selected-row-background-color:#eff6ff;--st-odd-column-background-color:var(--st-white);--st-even-column-background-color:var(--st-white);--st-header-background-color:var(--st-white);--st-sub-header-background-color:#fafafa;--st-header-label-color:#111827;--st-header-icon-color:#6b7280;--st-cell-color:#111827;--st-cell-odd-row-color:#374151;--st-edit-cell-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--st-sub-cell-background-color:#f9fafb;--st-sub-cell-hover-background-color:#f3f4f6;--st-selected-cell-background-color:#dbeafe;--st-selected-first-cell-background-color:#eff6ff;--st-selected-cell-color:#111827;--st-selected-first-cell-color:#111827;--st-selected-sub-cell-background-color:#bfdbfe;--st-selected-sub-cell-color:#111827;--st-dragging-background-color:#f3f4f6;--st-dragging-sub-header-background-color:#e5e7eb;--st-resize-handle-color:#e5e7eb;--st-resize-handle-selected-color:#3b82f6;--st-selected-border-color:#3b82f6;--st-editable-cell-focus-border-color:#3b82f6;--st-focus-ring-color:#3b82f6;--st-button-hover-background-color:#f3f4f6;--st-button-active-background-color:#3b82f6;--st-next-prev-btn-color:#6b7280;--st-next-prev-btn-disabled-color:#d1d5db;--st-page-btn-color:#6b7280;--st-page-btn-hover-background-color:#f3f4f6;--st-checkbox-checked-background-color:#3b82f6;--st-checkbox-checked-border-color:#3b82f6;--st-checkbox-border-color:#d1d5db;--st-column-editor-background-color:var(--st-white);--st-column-editor-popout-background-color:var(--st-white);--st-column-editor-text-color:#6b7280;--st-datepicker-weekday-color:#6b7280;--st-datepicker-other-month-color:#d1d5db;--st-filter-button-disabled-background-color:#f3f4f6;--st-filter-button-disabled-text-color:#9ca3af;--st-cell-flash-color:#dbeafe;--st-copy-flash-color:#3b82f6;--st-warning-flash-color:#fca5a5;--st-tooltip-background-color:#1f2937;--st-tooltip-text-color:var(--st-white);--st-tooltip-border-radius:6px;--st-tooltip-padding:6px 10px;--st-tooltip-font-size:12px;--st-tooltip-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--st-header-selected-background-color:#3b82f6;--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:#dbeafe;--st-selection-highlight-indicator-color:#f3f4f6;--st-loading-skeleton-bg-color:#f3f4f6;--st-chart-color:#3b82f6;--st-chart-fill-color:#dbeafe;--st-drag-separator-color:#3b82f6;--st-body-background-color:var(--st-white)}.theme-modern-light .st-wrapper{border:1px solid #f3f4f6}.theme-modern-light .st-header-main,.theme-modern-light .st-header-pinned-left,.theme-modern-light .st-header-pinned-right{border-bottom:1px solid #f3f4f6}.theme-modern-light .st-body-pinned-left,.theme-modern-light .st-header-pinned-left{border-right:1px solid #f3f4f6}.theme-modern-light .st-body-pinned-right,.theme-modern-light .st-header-pinned-right{border-left:1px solid #f3f4f6}.theme-modern-light .st-row-separator{background-color:#f9fafb}.theme-modern-light .st-header-cell{color:#6b7280;font-size:14px;font-weight:500}.theme-modern-light .st-cell-content{color:#111827;font-size:14px}.theme-modern-light .st-row.hovered{-webkit-transition:background-color .15s ease;transition:background-color .15s ease}.theme-modern-light .st-footer{background-color:var(--st-white);border-top:1px solid #f3f4f6;gap:12px;padding:12px 16px}.theme-modern-light .st-footer-results-text{color:#6b7280;font-size:14px}.theme-modern-light .st-footer-pagination{-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:2px;overflow:hidden}.theme-modern-light .st-page-ellipsis{color:#9ca3af;font-weight:400;padding:0 4px}.theme-modern-light .st-page-btn{-ms-flex-negative:0;border-radius:4px;color:#374151;flex-shrink:0;font-size:13px;font-weight:500;margin-right:0;min-width:36px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-light .st-page-btn:hover{background-color:#f3f4f6}.theme-modern-light .st-page-btn.active{background-color:#3b82f6;color:#fff;font-weight:600}.theme-modern-light .st-next-prev-btn{-ms-flex-negative:0;border-radius:4px;flex-shrink:0;margin-left:4px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-light .st-next-prev-btn:not(.disabled):hover{background-color:#f3f4f6}.theme-modern-light .st-horizontal-scrollbar-container{background-color:#fafafa;border-top:1px solid #f3f4f6}.theme-modern-light .st-group-header{border-bottom:1px solid #f3f4f6;font-weight:500}.theme-modern-light .st-checkbox-custom{border:1.5px solid #d1d5db;border-radius:4px}.theme-modern-light .st-checkbox-custom.st-checked{background-color:#3b82f6;border-color:#3b82f6}.theme-modern-dark{--st-border-radius:4px;--st-cell-padding:12px;--st-spacing-small:4px;--st-spacing-medium:8px;--st-scrollbar-bg-color:#111827;--st-scrollbar-thumb-color:#4b5563;--st-scrollbar-width:thin;--st-border-color:#374151;--st-footer-background-color:#1f2937;--st-last-group-row-separator-border-color:#4b5563;--st-odd-row-background-color:#1f2937;--st-even-row-background-color:#1f2937;--st-hover-row-background-color:#374151;--st-selected-row-background-color:#1e3a5f;--st-odd-column-background-color:#1f2937;--st-even-column-background-color:#1f2937;--st-header-background-color:#1f2937;--st-sub-header-background-color:#111827;--st-header-label-color:#f3f4f6;--st-header-icon-color:#9ca3af;--st-cell-color:#f3f4f6;--st-cell-odd-row-color:#d1d5db;--st-edit-cell-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003;--st-sub-cell-background-color:#111827;--st-sub-cell-hover-background-color:#1f2937;--st-selected-cell-background-color:#1e40af;--st-selected-first-cell-background-color:#1e3a8a;--st-selected-cell-color:#f3f4f6;--st-selected-first-cell-color:#f3f4f6;--st-selected-sub-cell-background-color:#1e3a8a;--st-selected-sub-cell-color:#f3f4f6;--st-dragging-background-color:#374151;--st-dragging-sub-header-background-color:#4b5563;--st-resize-handle-color:#4b5563;--st-resize-handle-selected-color:#60a5fa;--st-selected-border-color:#60a5fa;--st-editable-cell-focus-border-color:#60a5fa;--st-focus-ring-color:#60a5fa;--st-button-hover-background-color:#374151;--st-button-active-background-color:#3b82f6;--st-next-prev-btn-color:#9ca3af;--st-next-prev-btn-disabled-color:#4b5563;--st-page-btn-color:#d1d5db;--st-page-btn-hover-background-color:#374151;--st-checkbox-checked-background-color:#3b82f6;--st-checkbox-checked-border-color:#3b82f6;--st-checkbox-border-color:#4b5563;--st-column-editor-background-color:#1f2937;--st-column-editor-popout-background-color:#1f2937;--st-column-editor-text-color:#9ca3af;--st-datepicker-weekday-color:#9ca3af;--st-datepicker-other-month-color:#4b5563;--st-filter-button-disabled-background-color:#374151;--st-filter-button-disabled-text-color:#6b7280;--st-cell-flash-color:#1e40af;--st-copy-flash-color:#60a5fa;--st-warning-flash-color:#ef4444;--st-tooltip-background-color:#f3f4f6;--st-tooltip-text-color:#111827;--st-tooltip-border-radius:6px;--st-tooltip-padding:6px 10px;--st-tooltip-font-size:12px;--st-tooltip-shadow:0 10px 15px -3px #0000004d,0 4px 6px -2px #0003;--st-header-selected-background-color:#3b82f6;--st-header-selected-label-color:var(--st-white);--st-header-selected-icon-color:var(--st-white);--st-header-highlight-indicator-color:#1e40af;--st-selection-highlight-indicator-color:#374151;--st-loading-skeleton-bg-color:#374151;--st-chart-color:#60a5fa;--st-chart-fill-color:#3b82f6;--st-drag-separator-color:#60a5fa;--st-body-background-color:#1f2937}.theme-modern-dark .st-wrapper{border:1px solid #374151}.theme-modern-dark .st-header-main,.theme-modern-dark .st-header-pinned-left,.theme-modern-dark .st-header-pinned-right{border-bottom:1px solid #374151}.theme-modern-dark .st-body-pinned-left,.theme-modern-dark .st-header-pinned-left{border-right:1px solid #374151}.theme-modern-dark .st-body-pinned-right,.theme-modern-dark .st-header-pinned-right{border-left:1px solid #374151}.theme-modern-dark .st-row-separator{background-color:#374151}.theme-modern-dark .st-header-cell{color:#d1d5db;font-size:14px;font-weight:500}.theme-modern-dark .st-cell-content{color:#f3f4f6;font-size:14px}.theme-modern-dark .st-row.hovered{-webkit-transition:background-color .15s ease;transition:background-color .15s ease}.theme-modern-dark .st-footer{background-color:#1f2937;border-top:1px solid #374151;gap:12px;padding:12px 16px}.theme-modern-dark .st-footer-results-text{color:#d1d5db;font-size:14px}.theme-modern-dark .st-footer-pagination{-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:2px;overflow:hidden}.theme-modern-dark .st-page-ellipsis{color:#9ca3af;font-weight:400;padding:0 4px}.theme-modern-dark .st-page-btn{-ms-flex-negative:0;border-radius:4px;color:#d1d5db;flex-shrink:0;font-size:13px;font-weight:500;margin-right:0;min-width:36px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-dark .st-page-btn:hover{background-color:#374151}.theme-modern-dark .st-page-btn.active{background-color:#3b82f6;color:#fff;font-weight:600}.theme-modern-dark .st-next-prev-btn{-ms-flex-negative:0;border-radius:4px;flex-shrink:0;margin-left:4px;padding:6px 8px;-webkit-transition:all .15s ease;transition:all .15s ease}.theme-modern-dark .st-next-prev-btn:not(.disabled):hover{background-color:#374151}.theme-modern-dark .st-next-prev-btn.disabled>*{fill:#4b5563}.theme-modern-dark .st-horizontal-scrollbar-container{background-color:#111827;border-top:1px solid #374151}.theme-modern-dark .st-group-header{border-bottom:1px solid #374151;font-weight:500}.theme-modern-dark .st-checkbox-custom{background-color:#1f2937;border:1.5px solid #4b5563;border-radius:4px}.theme-modern-dark .st-checkbox-custom.st-checked{background-color:#3b82f6;border-color:#3b82f6}.theme-modern-dark .st-empty-state{color:#9ca3af}
\ No newline at end of file

From ab81d8d7cb7a98d46ba1f5c7cd76968b71fe30bb Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:30:13 -0500
Subject: [PATCH 7/8] Last column fix

---
 .../core/src/utils/headerCell/resizing.ts     | 173 +++++++-----------
 packages/core/src/utils/headerCell/styling.ts |   2 +-
 .../39-AutoExpandColumnsTests.stories.ts      |  23 +--
 3 files changed, 75 insertions(+), 123 deletions(-)

diff --git a/packages/core/src/utils/headerCell/resizing.ts b/packages/core/src/utils/headerCell/resizing.ts
index c8b5c9ee7..b253033ce 100644
--- a/packages/core/src/utils/headerCell/resizing.ts
+++ b/packages/core/src/utils/headerCell/resizing.ts
@@ -15,8 +15,6 @@ import { updateColumnWidthsInDOM } from "../resizeUtils/domUpdates";
 import { HeaderRenderContext } from "./types";
 import { addTrackedEventListener, throttle } from "./eventTracking";
 
-const DOUBLE_TAP_MS = 320;
-
 const getStyleRoot = (context: HeaderRenderContext): ParentNode | null => {
   const main = context.mainBodyRef?.current;
   if (!main) return null;
@@ -32,23 +30,15 @@ export const createResizeHandle = (
   const isSelectionColumn =
     header.isSelectionColumn && context.enableRowSelection;
 
-  if (!columnResizing || isSelectionColumn) return null;
-
-  const dragDisabled =
-    Boolean(
-      isLastMainAutoExpandColumn &&
-        context.autoExpandColumns &&
-        !context.pinned,
-    );
+  if (!columnResizing || isSelectionColumn || isLastMainAutoExpandColumn) {
+    return null;
+  }
 
   const resizeContainer = document.createElement("div");
   resizeContainer.className = "st-header-resize-handle-container";
   resizeContainer.setAttribute("role", "separator");
   resizeContainer.setAttribute("aria-label", `Resize ${header.label} column`);
   resizeContainer.setAttribute("aria-orientation", "vertical");
-  if (dragDisabled) {
-    resizeContainer.setAttribute("data-st-autofit-only", "true");
-  }
 
   const resizeHandle = document.createElement("div");
   resizeHandle.className = "st-header-resize-handle";
@@ -130,102 +120,71 @@ export const createResizeHandle = (
     performAutoFit();
   };
 
-  if (!dragDisabled) {
-    const handleMouseDown = (event: MouseEvent) => {
-      if (event.detail >= 2) {
-        event.preventDefault();
-        runAutoFitDebounced();
-        return;
-      }
-      const startWidth = document.getElementById(
-        getCellId({ accessor: header.accessor, rowId: "header" }),
-      )?.offsetWidth;
-
-      throttle(() => {
-        handleResizeStart({
-          autoExpandColumns: context.autoExpandColumns,
-          collapsedHeaders: context.collapsedHeaders,
-          containerWidth: context.containerWidth,
-          event: event,
-          forceUpdate: context.forceUpdate,
-          header,
-          headers: context.headers,
-          mainBodyRef: context.mainBodyRef,
-          onColumnWidthChange: context.onColumnWidthChange,
-          pinnedLeftRef: context.pinnedLeftRef,
-          pinnedRightRef: context.pinnedRightRef,
-          reverse: context.reverse,
-          setHeaders: context.setHeaders,
-          setIsResizing: context.setIsResizing,
-          startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
-        });
-      }, 10);
-    };
-
-    addTrackedEventListener(
-      resizeContainer,
-      "mousedown",
-      handleMouseDown as EventListener,
-    );
+  const handleMouseDown = (event: MouseEvent) => {
+    if (event.detail >= 2) {
+      event.preventDefault();
+      runAutoFitDebounced();
+      return;
+    }
+    const startWidth = document.getElementById(
+      getCellId({ accessor: header.accessor, rowId: "header" }),
+    )?.offsetWidth;
 
-    const handleTouchStart = (event: Event) => {
-      const touchEvent = event as globalThis.TouchEvent;
-      const startWidth = document.getElementById(
-        getCellId({ accessor: header.accessor, rowId: "header" }),
-      )?.offsetWidth;
-
-      throttle(() => {
-        handleResizeStart({
-          autoExpandColumns: context.autoExpandColumns,
-          collapsedHeaders: context.collapsedHeaders,
-          containerWidth: context.containerWidth,
-          event: touchEvent as any,
-          forceUpdate: context.forceUpdate,
-          header,
-          headers: context.headers,
-          mainBodyRef: context.mainBodyRef,
-          onColumnWidthChange: context.onColumnWidthChange,
-          pinnedLeftRef: context.pinnedLeftRef,
-          pinnedRightRef: context.pinnedRightRef,
-          reverse: context.reverse,
-          setHeaders: context.setHeaders,
-          setIsResizing: context.setIsResizing,
-          startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
-        });
-      }, 10);
-    };
-
-    addTrackedEventListener(resizeContainer, "touchstart", handleTouchStart);
-  } else {
-    const handleAutofitOnlyMouseDown = (event: MouseEvent) => {
-      if (event.detail >= 2) {
-        event.preventDefault();
-        runAutoFitDebounced();
-      }
-    };
-    addTrackedEventListener(
-      resizeContainer,
-      "mousedown",
-      handleAutofitOnlyMouseDown as EventListener,
-    );
+    throttle(() => {
+      handleResizeStart({
+        autoExpandColumns: context.autoExpandColumns,
+        collapsedHeaders: context.collapsedHeaders,
+        containerWidth: context.containerWidth,
+        event: event,
+        forceUpdate: context.forceUpdate,
+        header,
+        headers: context.headers,
+        mainBodyRef: context.mainBodyRef,
+        onColumnWidthChange: context.onColumnWidthChange,
+        pinnedLeftRef: context.pinnedLeftRef,
+        pinnedRightRef: context.pinnedRightRef,
+        reverse: context.reverse,
+        setHeaders: context.setHeaders,
+        setIsResizing: context.setIsResizing,
+        startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
+      });
+    }, 10);
+  };
 
-    let lastTouchEndTime = 0;
-    addTrackedEventListener(
-      resizeContainer,
-      "touchend",
-      ((e: TouchEvent) => {
-        const now = Date.now();
-        if (now - lastTouchEndTime < DOUBLE_TAP_MS) {
-          lastTouchEndTime = 0;
-          e.preventDefault();
-          runAutoFitDebounced();
-        } else {
-          lastTouchEndTime = now;
-        }
-      }) as EventListener,
-      { passive: false },
-    );
-  }
+  addTrackedEventListener(
+    resizeContainer,
+    "mousedown",
+    handleMouseDown as EventListener,
+  );
+
+  const handleTouchStart = (event: Event) => {
+    const touchEvent = event as globalThis.TouchEvent;
+    const startWidth = document.getElementById(
+      getCellId({ accessor: header.accessor, rowId: "header" }),
+    )?.offsetWidth;
+
+    throttle(() => {
+      handleResizeStart({
+        autoExpandColumns: context.autoExpandColumns,
+        collapsedHeaders: context.collapsedHeaders,
+        containerWidth: context.containerWidth,
+        event: touchEvent as any,
+        forceUpdate: context.forceUpdate,
+        header,
+        headers: context.headers,
+        mainBodyRef: context.mainBodyRef,
+        onColumnWidthChange: context.onColumnWidthChange,
+        pinnedLeftRef: context.pinnedLeftRef,
+        pinnedRightRef: context.pinnedRightRef,
+        reverse: context.reverse,
+        setHeaders: context.setHeaders,
+        setIsResizing: context.setIsResizing,
+        startWidth: startWidth ?? TABLE_HEADER_CELL_WIDTH_DEFAULT,
+      });
+    }, 10);
+  };
+
+  addTrackedEventListener(resizeContainer, "touchstart", handleTouchStart);
 
   addTrackedEventListener(
     resizeContainer,
diff --git a/packages/core/src/utils/headerCell/styling.ts b/packages/core/src/utils/headerCell/styling.ts
index 692efd078..db2851413 100644
--- a/packages/core/src/utils/headerCell/styling.ts
+++ b/packages/core/src/utils/headerCell/styling.ts
@@ -89,7 +89,7 @@ export const calculateHeaderCellClasses = (
     enableHeaderEditing && !isSelectionColumn ? "st-header-editable" : "",
     isHeaderSelected ? "st-header-selected" : "",
     hasHighlightedCell && !isHeaderSelected ? "st-header-has-highlighted-cell" : "",
-    isLastMainAutoExpandColumn && !context.columnResizing ? "st-no-resize" : "",
+    isLastMainAutoExpandColumn ? "st-no-resize" : "",
   ]
     .filter(Boolean)
     .join(" ");
diff --git a/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts b/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
index 8b56b3b1e..a57e1720b 100644
--- a/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
+++ b/packages/core/stories/tests/39-AutoExpandColumnsTests.stories.ts
@@ -2369,9 +2369,9 @@ export const AutoExpandDoubleClickResizePinned = {
   },
 };
 
-/** Last main column: double-click-only handle (no drag) still auto-fits under autoExpand. */
-export const AutoExpandDoubleClickLastMainColumnAutoFit = {
-  parameters: { tags: ["auto-expand-double-click-last-main"] },
+/** Last main column under autoExpand: no resize handle; prior column still has a handle. */
+export const AutoExpandLastMainColumnNoResizeHandle = {
+  parameters: { tags: ["auto-expand-last-main-no-handle"] },
   render: () => {
     const headers: HeaderObject[] = [
       { accessor: "title", label: "Title", width: 520, type: "string" },
@@ -2403,18 +2403,11 @@ export const AutoExpandDoubleClickLastMainColumnAutoFit = {
     await waitForTable();
     const notesHeader = findHeaderCellByLabel(canvasElement, "Notes");
     expect(notesHeader).toBeTruthy();
-    expect(notesHeader!.querySelector("[data-st-autofit-only]")).toBeTruthy();
-    const handle = notesHeader!.querySelector<HTMLElement>(
-      ".st-header-resize-handle-container",
-    );
-    expect(handle).toBeTruthy();
-    const wBefore = notesHeader!.getBoundingClientRect().width;
-    handle!.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
-    await new Promise((r) => setTimeout(r, 450));
-    const notesAfter = findHeaderCellByLabel(canvasElement, "Notes");
-    expect(notesAfter).toBeTruthy();
-    const wAfter = notesAfter!.getBoundingClientRect().width;
-    expect(wAfter).toBeGreaterThan(wBefore + 12);
+    expect(notesHeader!.querySelector(".st-header-resize-handle-container")).toBeFalsy();
+    expect(notesHeader!.className).toContain("st-no-resize");
+    const titleHeader = findHeaderCellByLabel(canvasElement, "Title");
+    expect(titleHeader).toBeTruthy();
+    expect(titleHeader!.querySelector(".st-header-resize-handle-container")).toBeTruthy();
   },
 };
 

From c22cc376c02b78cb5874492faa4ba4df9caca9c2 Mon Sep 17 00:00:00 2001
From: peter <20213436+petera2c@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:41:28 -0500
Subject: [PATCH 8/8] Version update

---
 packages/angular/package.json | 2 +-
 packages/core/package.json    | 2 +-
 packages/react/package.json   | 2 +-
 packages/solid/package.json   | 2 +-
 packages/svelte/package.json  | 2 +-
 packages/vue/package.json     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/angular/package.json b/packages/angular/package.json
index ef108d487..4c024aaf3 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/angular",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/angular/src/index.d.ts",
diff --git a/packages/core/package.json b/packages/core/package.json
index 8c11936e0..9fa4e185f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/src/index.d.ts",
diff --git a/packages/react/package.json b/packages/react/package.json
index c2bac06e9..08769277a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/react",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/react/src/index.d.ts",
diff --git a/packages/solid/package.json b/packages/solid/package.json
index 2293344cf..4f2be76e0 100644
--- a/packages/solid/package.json
+++ b/packages/solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/solid",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/solid/src/index.d.ts",
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index a3f84f6db..6f932cd9b 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/svelte",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/index.d.ts",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index d73c03109..d1508fe8f 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/vue",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/vue/src/index.d.ts",