/* Screen reader only - visually hidden but accessible to screen readers */
.st-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.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;

  /* Animation variables */
  --st-transition-duration: 0.2s;
  --st-transition-ease: ease;
  --st-opacity-disabled: 0.5;

  /* Base colors */
  --st-white: #fff;
  --st-black: #000;

  /* Only include color variables that are actually used in themes below */
  /* Slate colors - used in light theme */
  --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;

  /* Gray colors - used in dark theme */
  --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;

  /* Neutral colors - used in neutral theme */
  --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;

  /* Stone colors - used in violet theme */
  --st-stone-100: #f5f5f4;
  --st-stone-200: #e7e5e4;
  --st-stone-300: #d6d3d1;
  --st-stone-400: #a8a29e;
  --st-stone-500: #78716c;
  --st-stone-700: #44403c;

  /* Red colors - used for warnings/errors */
  --st-red-300: #fca5a5;
  --st-red-400: #f87171;

  /* Orange colors - used in sky theme warnings */
  --st-orange-400: #fb923c;

  /* Amber colors - used in violet theme */
  --st-amber-50: #fffbeb;
  --st-amber-100: #fef3c7;
  --st-amber-200: #fde68a;

  /* Emerald colors - used for charts */
  --st-emerald-400: #34d399;
  --st-emerald-500: #10b981;
  --st-emerald-600: #059669;

  /* Teal colors - used for charts */
  --st-teal-400: #2dd4bf;
  --st-teal-500: #14b8a6;
  --st-teal-600: #0d9488;

  /* Sky colors - used in sky theme */
  --st-sky-100: #e0f2fe;
  --st-sky-200: #bae6fd;
  --st-sky-300: #7dd3fc;
  --st-sky-400: #38bdf8;

  /* Blue colors - used across multiple themes */
  --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;

  /* Violet colors - used in violet theme */
  --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 * {
  box-sizing: border-box;
  /* Scrollbar thumb color */
  scrollbar-color: var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);
  scrollbar-width: var(--st-scrollbar-width);
  scrollbar-thumb-border-radius: var(--st-scrollbar-thumb-border-radius);
  font-family: inherit;
}

input {
  color: black;
}

/* Safari scrollbar styling */
.simple-table-root *::-webkit-scrollbar {
  width: 8px; /* equivalent to "thin" */
  height: 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);
}

/* Wrapper for the table */
.st-wrapper {
  position: relative;
  border: var(--st-border-width) solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  overflow: hidden;
}

/* External scroll mode: the table grows to its natural height inside a
   consumer-owned scroll parent (HTMLElement or window). In this mode the
   header becomes sticky so it pins to the top of the external scroll
   viewport as the user scrolls. Relax overflow:hidden on the root so the
   sticky element's containing block can escape to the external scroll
   ancestor (CSS `position: sticky` is trapped by the nearest ancestor with
   non-visible overflow). Trade-off: body content may visually bleed across
   the rounded bottom corners, which is acceptable for natural-height
   tables. Consumers wanting strict clipping can set border-radius: 0. */
.simple-table-root.st-external-scroll {
  overflow: visible;
}

.simple-table-root.st-external-scroll .st-header-container {
  position: sticky;
  /* When the scroll parent has padding-top, CSS sticky would normally pin the
     header to the *padding edge*, leaving a visible gap between the container
     top and the header during scroll. We publish --st-external-scroll-padding-top
     from SimpleTableVanilla based on the resolved parent's computed padding-top
     so the sticky offset compensates and the header pins flush to the parent's
     outer top edge. Default 0px keeps the no-padding case unchanged. */
  top: calc(-1 * var(--st-external-scroll-padding-top, 0px));
  z-index: 4;
}

/* Sticky-parents overlay in external scroll mode: also a native sticky
   element so the browser composites it on the same paint as the parent
   scroll (no JS lag). Pinned directly below the sticky header by offsetting
   the header height and compensating for the scroll parent's padding-top.
   The renderer sets `margin-bottom: calc(-1 * stickyHeightPx)` inline to
   neutralize the overlay's contribution to flex column flow so the body
   container starts where it naturally would — the overlay then visually sits
   on top of the body's virtualized-out top region. */
.simple-table-root.st-external-scroll .st-sticky-top {
  position: sticky;
  top: calc(
    var(--st-calculated-header-height, 0px) - var(--st-external-scroll-padding-top, 0px)
  );
}

.st-wrapper-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.st-content-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
}
.st-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Header */
.st-header-container {
  display: flex;
  background-color: var(--st-header-background-color);
  flex-shrink: 0;
  width: 100%;
}

.st-header-container.st-header-scroll-padding::after {
  content: "";
  display: block;
  /* `*` does not target ::after; border-box keeps the bottom border inside the flex line. */
  box-sizing: border-box;
  width: var(--st-after-width, default-width);
  flex-shrink: 0;
  background-color: var(--st-header-background-color);
  border-bottom: var(--st-border-width) solid var(--st-border-color);
}

.st-header-pinned-left,
.st-header-main,
.st-header-pinned-right {
  border-bottom: var(--st-border-width) solid var(--st-border-color);
}

.st-header-grid {
  position: relative;
  min-width: 100%;
}

.st-horizontal-scrollbar-middle,
.st-horizontal-scrollbar-left,
.st-horizontal-scrollbar-right,
.st-header-main,
.st-header-pinned-left,
.st-header-pinned-right,
.st-body-main,
.st-body-pinned-left,
.st-body-pinned-right {
  overflow: auto;
  touch-action: auto;
}
.st-header-main,
.st-header-pinned-left,
.st-header-pinned-right,
.st-body-main,
.st-body-pinned-left,
.st-body-pinned-right {
  scrollbar-width: none;
}

.st-header-pinned-left,
.st-header-pinned-right,
.st-body-pinned-left,
.st-body-pinned-right {
  flex-shrink: 0;
}

.st-header-pinned-left,
.st-body-pinned-left {
  border-right: var(--st-border-width) solid var(--st-border-color);
}
.st-header-pinned-right,
.st-body-pinned-right {
  border-left: var(--st-border-width) solid var(--st-border-color);
}

.st-header-main {
  flex-grow: 1;
}

/* Header must only scroll horizontally; prevent vertical scroll (vanilla refactor removed display:grid from header sections) */
.st-header-main,
.st-header-pinned-left,
.st-header-pinned-right {
  overflow-x: auto;
  overflow-y: hidden;
}

.st-header-main::-webkit-scrollbar {
  display: none;
}

/* Body */
.st-body-container {
  flex-grow: 1;
  display: flex;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  height: max-content;
  background-color: var(--st-even-row-background-color);
}

/* Sticky parents container - positioned above scrolling content */
.st-sticky-top {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  z-index: 10;
}

.st-sticky-section-left,
.st-sticky-section-main,
.st-sticky-section-right {
  overflow: hidden;
}

.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  flex: 1;
}

.st-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--st-header-text-color);
  opacity: 0.6;
  font-size: 0.9em;
}

.st-body-main,
.st-body-pinned-left,
.st-body-pinned-right {
  display: grid;
  height: max-content;
  min-height: 100%;
}

.st-body-main::-webkit-scrollbar {
  display: none;
}

.st-row {
  display: grid;
  position: absolute;
  transition: background 0.2s ease;
  min-width: 100%;
  background-color: var(--st-even-row-background-color);

  /* Performance optimizations for virtual scrolling */
  backface-visibility: hidden;
}

/* Sticky parent rows in row grouping */
.st-row.st-sticky-parent {
  z-index: 5;
  /* Ensure sticky parents stay above regular rows and have proper background */
}

/* Ensure sticky parents have background color (override if needed) */
.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-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-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
  ) {
  background-color: var(--st-hover-row-background-color);
}
/* Separate hover background for sub-cells */
.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);
}

/* Selected row styling - higher specificity to override even/odd */
.st-row.selected {
  background-color: var(--st-selected-row-background-color);
}

/* Selected row hover state - should override selected background when hovering */
.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);
}

/* Nested grid row styling */
.st-nested-grid-row {
  padding-left: 8px;
  padding-right: 8px;
}

.st-cell-content {
  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);
}

/* Cell-level row background classes (for absolute positioned cells) */
.st-cell.st-cell-even-row:not(.st-cell-selected):not(.st-cell-selected-first):not(
    .st-cell-column-selected
  ):not(.st-cell-column-selected-first) {
  background-color: var(--st-even-row-background-color);
}
.st-cell.st-cell-odd-row:not(.st-cell-selected):not(.st-cell-selected-first):not(
    .st-cell-column-selected
  ):not(.st-cell-column-selected-first) {
  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);
}

/* Selected row styling for cells */
.st-cell.st-cell-selected-row {
  background-color: var(--st-selected-row-background-color);
}

/* Row hover styling for cells */
.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);
}

/* Styles for table header cells */
.st-header-cell {
  top: 0;
  background-color: var(--st-header-background-color);
  font-weight: var(--st-font-weight-bold);

  display: flex;
  align-items: center;
  gap: var(--st-spacing-small);
}
.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 {
  cursor: pointer;
}
.st-header-cell.st-header-editable {
  cursor: pointer;
}
.st-header-cell.draggable {
  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 {
  fill: var(--st-header-selected-icon-color);
}
.st-header-cell.st-header-selected .st-icon-container * {
  fill: 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);
}

/* Common styles for table header and cells */
.st-header-cell,
.st-cell {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--st-cell-color);
  gap: var(--st-spacing-small);
  overflow: hidden;
  /* mix-blend-mode: multiply; */
  background-color: transparent;
}

.st-header-cell.left-aligned,
.st-cell.left-aligned {
  padding-left: var(--st-cell-padding);
  text-align: left;
}
.st-header-cell.center-aligned,
.st-cell.center-aligned {
  text-align: center;
}

.st-cell.center-aligned > .st-cell-content {
  text-align: center;
}

.st-header-cell.center-aligned > .st-header-label-text {
  text-align: center;
}

.st-cell.clickable {
  cursor: pointer;
}

.st-header-cell,
.st-cell,
.st-cell-editing {
  width: 100%;
  height: 100%;
}

.st-cell-editing {
  position: relative;
}

.st-header-label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.st-header-label-text,
.st-cell-content {
  flex: 1;

  user-select: none;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.st-header-label-text {
  color: var(--st-header-label-color);
  padding-left: var(--st-cell-padding);
  padding-right: var(--st-cell-padding);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-cell-content.left-aligned,
.st-header-label-text.left-aligned {
  text-align: left;
  justify-content: flex-start;
}
.st-cell-content.center-aligned,
.st-header-label-text.center-aligned {
  text-align: center;
  justify-content: center;
}
.st-cell-content.right-aligned,
.st-header-label-text.right-aligned {
  text-align: right;
  justify-content: flex-end;
}

/* If the table is not resizeable then we don't need the extra right padding */
.st-not-resizeable .st-cell-content {
  padding-left: var(--st-cell-padding);
  padding-right: var(--st-cell-padding);
}

/* Right-pinned sections have resize handle on the left */
.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);
}

/* Main and left-pinned sections have resize handle on the right */
.st-resizeable .st-body-pinned-left .st-cell-content,
.st-resizeable .st-body-main .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)
  );
}

/* Override resize handle padding for selection cells in all sections */
.st-resizeable .st-selection-cell .st-cell-content {
  padding-left: var(--st-cell-padding);
  padding-right: var(--st-cell-padding);
}

/* Selection cell highlight when row has highlighted cells */
.st-selection-cell.st-selection-has-highlighted-cell {
  background-color: var(--st-selection-highlight-indicator-color);
}

.st-cell {
  border: var(--st-border-width) solid transparent;
  /* Stack above .st-row-separator so a cell mid-FLIP slides in front of the
     static border lines instead of being bisected by them. Both elements are
     position:absolute siblings with z-index:auto, so DOM order otherwise puts
     separators on top. Statically the separator never overlaps a cell, so
     this only changes paint during animation. */
  z-index: 1;
}

/* Remove browser default focus ring when Tab moves focus to a cell; selection styling indicates focus */
.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  border-radius: 4px;
  transition: outline 0.2s ease;
}

/* Focus visible styles for keyboard navigation */
.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 {
  cursor: pointer;
  fill: var(--st-header-label-color);
}
.st-header-resize-handle-container {
  flex-shrink: 0;
  width: var(--st-resize-handle-container-width);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
}
.st-header-resize-handle {
  width: var(--st-resize-handle-width);
  height: calc(100% - 20px);
  background-color: var(--st-resize-handle-color);
}

/* Add extra padding to the last column when resize handle is hidden (autoExpandColumns) */
.st-header-cell.st-no-resize {
  padding-right: var(--st-resize-handle-container-width);
}

.st-row-separator {
  position: absolute;
  width: 100%;
  min-width: 100%;
  cursor: pointer;
  height: 1px;
  background-color: var(--st-border-color);
}
.st-row-separator.st-last-group-row {
  background-color: var(--st-last-group-row-separator-border-color);
}

/* Style for a cell when it is being dragged */
.st-dragging:not(.st-sub-header) {
  background-color: var(--st-dragging-background-color);
}
/* Separate dragging background for sub-headers */
.st-dragging.st-sub-header {
  background-color: var(--st-dragging-sub-header-background-color);
}

/* Loading skeleton styles */
.st-loading-skeleton {
  height: 16px;
  width: 80%;
  background-color: var(--st-loading-skeleton-bg-color);
  border-radius: 4px;
  animation: st-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes st-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Style for selected table cells */
.st-cell-selected {
  background-color: var(--st-selected-cell-background-color);
}
.st-cell-selected .st-cell-content {
  color: var(--st-selected-cell-color) !important;
}

/* Style for the first selected table cell */
.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;
}

/* Style for selected sub-cells */
.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;
}

/* Style for first selected sub-cell */
.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;
}

/* Style for column selected cells (no borders) */
.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;
}

/* Style for the first column selected cell (no borders) */
.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;
}

/* Style for column selected sub-cells */
.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;
}

/* Style for first column selected sub-cell */
.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;
}

/* Border for selected cells */
.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 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-top: var(--st-border-width) solid var(--st-border-color);
  /* Container content area = height - border-top.
     Visible bar thickness = host / scrollbar height (below).
     Padding above + below the bar = content area - bar thickness, split
     evenly by align-items: center. Currently: 13 - 1 = 12px content,
     8px bar -> 2px padding top + 2px padding bottom. */
  height: 13px;
  width: 100%;
  background-color: var(--st-scrollbar-bg-color);
}
.st-horizontal-scrollbar-left,
.st-horizontal-scrollbar-right {
  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,
.st-horizontal-scrollbar-middle {
  height: 8px;
  /* Suppress vertical scrolling on these elements. The inner sentinel <div>
     is 0.3px tall purely to give the host a horizontal scrollWidth wider
     than its clientWidth (so the horizontal scrollbar appears). When the
     host has no spare vertical content area (e.g. host height ==
     scrollbar height), that 0.3px sentinel triggers a phantom vertical
     scrollbar reservation, which eats into clientWidth and desyncs the
     horizontal thumb's drag math from the actual scrollable range. Forcing
     overflow-y: hidden removes that possibility entirely. */
  overflow-x: auto;
  overflow-y: hidden;
  /* `scrollbar-color` is inherited from `.simple-table-root`. When set to a
     non-`auto` value, Chromium switches the element to standard CSS
     scrollbar mode and ignores the `::-webkit-scrollbar` pseudo rules
     below. Resetting to `auto` re-enables the WebKit pseudo styling so
     the scrollbar is rendered at exactly the height we specify. */
  scrollbar-color: auto;
}
.st-horizontal-scrollbar-middle {
  flex-grow: 1;
}
.st-horizontal-scrollbar-left > div,
.st-horizontal-scrollbar-right > div,
.st-horizontal-scrollbar-middle > div {
  height: 0.3px;
}

/* Match the host height exactly: bar fills the host with no internal gap,
   and the host is centered inside the container's content area, producing
   the symmetric top/bottom padding around the bar. Keep this in sync with
   the host height above. */
.st-horizontal-scrollbar-left::-webkit-scrollbar,
.st-horizontal-scrollbar-right::-webkit-scrollbar,
.st-horizontal-scrollbar-middle::-webkit-scrollbar {
  height: 8px;
}

.st-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--st-footer-height, 49px);
  background-color: var(--st-footer-background-color);
  padding: var(--st-spacing-medium);
  border-top: var(--st-border-width) solid var(--st-border-color);
  flex-shrink: 0;
  gap: var(--st-spacing-medium);
}

.st-footer-info {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.st-footer-results-text {
  color: var(--st-cell-color);
  font-size: 0.9em;
  white-space: nowrap;
}

.st-footer-pagination {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.st-next-prev-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--st-spacing-small);
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-radius: var(--st-border-radius);
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
}
.st-next-prev-btn {
  fill: var(--st-next-prev-btn-color);
}
.disabled > .st-next-prev-icon {
  cursor: not-allowed;
  fill: var(--st-next-prev-btn-disabled-color);
}

.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 {
  margin-right: var(--st-spacing-small);
  padding: var(--st-spacing-small);
  cursor: pointer;
  background-color: transparent;
  color: var(--st-page-btn-color);
  border: none;
  border-radius: var(--st-border-radius);
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.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: white;
}

/* Set by createTableFooter when page controls exceed MAX_COMPACT_VISIBLE_PAGE_BUTTONS */
.st-footer-pagination .st-page-btn.st-page-btn--compact-hidden {
  display: none;
}

.st-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--st-spacing-small);
  margin: 0 var(--st-spacing-small);
  color: var(--st-cell-color);
  font-weight: bold;
}

.editable-cell-input {
  position: absolute;
  top: 0;
  left: 0;
  border: var(--st-border-width) solid var(--st-border-color);
  box-shadow: var(--st-edit-cell-shadow-color);
  z-index: 1;
  outline: none;
  height: 100%;
  width: 100%;
  padding: var(--st-cell-padding);
  font-size: 0.875rem;
}
.editable-cell-input:focus {
  border: var(--st-border-width) solid var(--st-editable-cell-focus-border-color);
}
.st-column-editor {
  display: flex;
  position: relative;
  user-select: none;
  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);
  flex-shrink: 0;
  /* Row flex with .st-content: stretch to its height; height:100% is auto when root height is indefinite. */
  align-self: stretch;
  height: auto;
  min-height: 0;
}

.st-column-editor-text {
  padding: var(--st-spacing-medium) var(--st-spacing-small);
  writing-mode: vertical-rl;
  z-index: 2;
  cursor: pointer;
  flex-grow: 1;
}

.st-column-editor.open,
.st-column-editor.open .st-column-editor-text {
  background-color: var(--st-column-editor-background-color);
}

.st-column-editor-popout {
  position: absolute;
  top: 0;
  right: calc(100% + 1px);
  z-index: 10;
  height: 100%;
  background-color: var(--st-column-editor-popout-background-color);
  transition: width var(--st-transition-duration) var(--st-transition-ease);
  overflow: hidden;
  width: 0;
}
.st-column-editor-popout-content {
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  border-left: var(--st-border-width) solid var(--st-border-color);
  height: 100%;
}

/* Column Editor Search Wrapper */
.st-column-editor-search-wrapper {
  position: sticky;
  top: 0;
  background-color: var(--st-column-editor-popout-background-color);
  z-index: 1;
  padding: var(--st-spacing-medium);
}

/* Column Editor Search Styles */
.st-column-editor-search {
}

/* Column Editor List */
.st-column-editor-list {
  display: flex;
  flex-direction: column;
  padding-right: var(--st-spacing-medium);
  padding-left: var(--st-spacing-medium);
  padding-bottom: var(--st-spacing-medium);
}

.st-column-editor-lists {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}

.st-column-editor-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--st-column-editor-text-color);
  opacity: 0.75;
  padding: var(--st-spacing-small) var(--st-spacing-medium) 0;
}

.st-column-editor-list-section {
  padding-top: 0;
  padding-bottom: var(--st-spacing-small);
}

.st-column-editor-footer {
  position: sticky;
  bottom: 0;
  padding: var(--st-spacing-small) var(--st-spacing-medium);
  background-color: var(--st-column-editor-popout-background-color);
  border-top: var(--st-border-width) solid var(--st-border-color);
  z-index: 1;
}

.st-column-editor-reset-btn {
  width: 100%;
  padding: var(--st-spacing-small) var(--st-spacing-medium);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--st-column-editor-text-color);
  background: transparent;
  border: var(--st-border-width) solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  cursor: pointer;
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
}

.st-column-editor-reset-btn:hover {
  background-color: var(--st-hover-background-color);
}

.st-column-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.st-column-pin-btn:hover {
  background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
}

.st-column-pin-pinned-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pinned left/right: same surface as .st-column-pin-btn:hover */
.st-column-pin-pinned-active {
  background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
  border-radius: 4px;
}

.st-column-pin-pinned-essential {
  cursor: default;
}

.st-column-pin-side-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}

.st-column-pin-side {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 3px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
}

/* Main section: L / R always visible; stronger on row hover */
.st-column-pin-side-option {
  color: color-mix(in srgb, var(--st-column-editor-text-color) 52%, transparent);
  transition:
    color var(--st-transition-duration) var(--st-transition-ease),
    background var(--st-transition-duration) var(--st-transition-ease);
}

.st-header-checkbox-item:hover .st-column-pin-side-option {
  color: var(--st-column-editor-text-color);
}

.st-column-pin-svg {
  display: block;
  color: var(--st-column-editor-text-color);
}

.st-checkbox-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Column Editor Header Checkbox Styles */
.st-header-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--st-spacing-small);
  padding-top: var(--st-spacing-small);
  padding-bottom: var(--st-spacing-small);
}

.st-column-label-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-drag-icon-container {
  display: flex;
  align-items: center;
  cursor: grab;
  opacity: 0.5;
  transition: opacity var(--st-transition-duration) var(--st-transition-ease);
}

.st-drag-icon-container:hover {
  opacity: 1;
}

.st-drag-icon-container:active {
  cursor: grabbing;
}

.st-drag-icon {
  fill: currentColor;
}

.st-column-editor-drag-separator {
  height: 2px;
  width: 100%;
  background-color: var(--st-drag-separator-color);
  margin: 2px 0;
  border-radius: 1px;
  transition: opacity 0.2s ease;
}

.st-header-icon-container {
  width: 24px;
  display: flex;
  justify-content: center;
}

.st-header-icon {
  transition: fill var(--st-transition-duration) var(--st-transition-ease);
  fill: var(--st-header-icon-color);
}

.st-collapsible-header-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.st-collapsible-header-icon.st-expand-icon-container.expanded {
  transform: rotate(180deg);
}

.st-collapsible-header-icon.st-expand-icon-container.collapsed {
  transform: rotate(0deg);
}

/* Column-editor popout expand chevron — vertical expansion (children listed
 * below the parent), so it relies on the generic `.st-expand-icon-container`
 * 90° rotation rule. This class only provides cursor + flex centering. */
.st-column-editor-expand-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.st-nested-headers {
  display: flex;
  flex-direction: column;
}

.st-column-editor-popout.open {
  min-width: 240px;
  width: auto;
}

.st-column-editor-popout.left {
  transform: translateX(-100%);
}

.st-column-editor-popout.open.left {
  transform: translateX(0);
}

/* Checkbox styles */
.st-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--st-spacing-small);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-checkbox-input {
  /* Visually hide but keep in accessibility tree */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Focus visible styles for checkbox */
.st-checkbox-input:focus-visible + .st-checkbox-custom {
  outline: 1px solid var(--st-focus-ring-color);
  outline-offset: -1px;
}

.st-checkbox-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
  border: var(--st-border-width) solid var(--st-checkbox-border-color);
  border-radius: var(--st-border-radius);
  background-color: white;
  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: white;
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Group Header Styles */
.st-group-header {
  background-color: var(--st-header-background-color);
  cursor: pointer;
  user-select: none;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: var(--st-border-width) solid var(--st-border-color);
  color: var(--st-cell-color);
  font-weight: var(--st-font-weight-bold);
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
}

.st-group-header:hover {
  background-color: var(--st-button-hover-background-color);
}

.st-group-header-content {
  display: flex;
  align-items: center;
  gap: var(--st-spacing-medium);
}

.st-group-toggle-icon {
  font-size: 0.8em;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-group-name {
  font-weight: var(--st-font-weight-bold);
}

.st-group-count {
  color: var(--st-cell-odd-row-color);
  font-size: 0.9em;
}

/* Animation for expand/collapse */
.st-group-header.expanded .st-group-toggle-icon {
  transform: rotate(0deg);
  transition: transform var(--st-transition-duration) var(--st-transition-ease);
}

.st-group-header.collapsed .st-group-toggle-icon {
  transform: rotate(-90deg);
  transition: transform var(--st-transition-duration) var(--st-transition-ease);
}

/* Row expand icon animation */
.st-expand-icon-container {
  transition: transform var(--st-transition-duration) var(--st-transition-ease);
}

.st-expand-icon-container.expanded {
  transform: rotate(90deg);
}

.st-expand-icon-container.collapsed {
  transform: rotate(0deg);
}

.st-expand-icon-container.placeholder {
  opacity: 0;
  pointer-events: none;
}

/*
 * Accordion animation window for nested-column and row-grouping collapse/expand.
 *
 * Active for one collapse/expand operation: SimpleTableVanilla adds the
 * `st-accordion-animating` class plus inline `--st-accordion-duration` /
 * `--st-accordion-easing` custom properties on the table root, then removes
 * them once the animation ends.
 *
 * The transition applies to `width`/`height` only — `transform` is driven by
 * the FLIP `AnimationCoordinator` with its own inline transition string, and
 * transitioning `top`/`left` here would race with that. `overflow: hidden` is
 * needed so cell content is clipped while the cell shrinks/grows from zero
 * size in the active axis.
 */
.st-accordion-animating .st-cell,
.st-accordion-animating .st-header-cell {
  transition:
    width var(--st-accordion-duration, var(--st-transition-duration))
      var(--st-accordion-easing, var(--st-transition-ease)),
    height var(--st-accordion-duration, var(--st-transition-duration))
      var(--st-accordion-easing, var(--st-transition-ease));
  overflow: hidden;
}

/*
 * Nested grid rows position themselves with `transform: translate3d(0, Ypx, 0)`
 * (not `style.top`), so the FLIP-style cell coordinator doesn't drive them.
 * SectionRenderer applies an inline transition on transform/height when it
 * updates an existing nested-grid-row in place (because an unrelated row
 * above expanded/collapsed, or a sibling's child data resolved and changed
 * total layout height) — that lets the inline-style update interpolate
 * instead of snapping. Initial creation deliberately writes the transform
 * without a transition so the row appears at its destination immediately.
 */

/* Cell update animation */
@keyframes cell-flash {
  0% {
    background-color: var(--st-cell-flash-color);
  }
  100% {
    background-color: transparent;
  }
}

.st-cell-updating {
  animation: cell-flash 0.6s ease-in-out;
}

@keyframes copy-flash {
  0% {
    background-color: var(--st-copy-flash-color);
  }
  100% {
    background-color: var(--st-selected-cell-background-color);
  }
}

@keyframes copy-flash-first {
  0% {
    background-color: var(--st-copy-flash-color);
  }
  100% {
    background-color: var(--st-selected-first-cell-background-color);
  }
}

.st-cell-copy-flash {
  animation: copy-flash 0.8s ease-in-out;
}

.st-cell-copy-flash-first {
  animation: copy-flash-first 0.8s ease-in-out;
}

@keyframes warning-flash {
  0% {
    background-color: var(--st-warning-flash-color);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes warning-flash-first {
  0% {
    background-color: var(--st-warning-flash-color);
  }
  100% {
    background-color: var(--st-selected-first-cell-background-color);
  }
}

.st-cell-warning-flash {
  animation: warning-flash 0.6s ease-in-out;
}

.st-cell-warning-flash-first {
  animation: warning-flash-first 0.6s ease-in-out;
}

/* Dropdown css */

.st-dropdown-content {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 100;
  background-color: var(--st-odd-row-background-color);
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  box-shadow: var(--st-edit-cell-shadow);
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  min-width: 120px;
  max-height: 300px;
  transform: translateZ(0);
  will-change: transform;
  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,
.st-dropdown-top-left,
.st-dropdown-top-right {
  margin: 0;
}

/* Dropdown items */
.st-dropdown-item {
  padding: var(--st-spacing-small) var(--st-spacing-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
  color: var(--st-cell-color);
  font-size: 0.9em;
}

.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 {
  height: 1px;
  margin: 4px 0;
  background-color: var(--st-border-color);
}

/* Datepicker css */

.st-datepicker {
  background-color: var(--st-odd-row-background-color);
  font-family: inherit;
}

.st-datepicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--st-spacing-medium);
  border-bottom: 1px solid var(--st-border-color);
  background-color: var(--st-header-background-color);
}

.st-datepicker-header-label {
  color: var(--st-header-label-color);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  flex: 1;
}

.st-datepicker-nav-btn {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--st-cell-color);
  padding: 0 8px;
  border-radius: var(--st-border-radius);
}
.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 {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.st-datepicker-months-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.st-datepicker-years-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.st-datepicker-weekday {
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  padding: 6px 0;
  color: var(--st-datepicker-weekday-color);
}

.st-datepicker-day {
  color: var(--st-cell-color);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
  font-size: 0.9em;
}

.st-datepicker-day.empty {
  cursor: default;
}

.st-datepicker-day:not(.empty):hover {
  background-color: var(--st-button-hover-background-color);
}

.st-datepicker-day.today {
  font-weight: 600;
  color: var(--st-button-active-background-color);
}

.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: var(--st-border-radius);
  cursor: pointer;
  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 {
  display: flex;
  justify-content: flex-end;
  padding: var(--st-spacing-medium);
  border-top: 1px solid var(--st-border-color);
}

.st-datepicker-today-btn {
  background-color: transparent;
  border: 1px solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
  color: var(--st-cell-color);
}

.st-datepicker-today-btn:hover {
  background-color: var(--st-button-hover-background-color);
}

/* Filter Container */
.st-filter-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--st-spacing-medium);
  min-width: 150px;
}

/* Filter Section - Used for spacing between form sections */
.st-filter-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: var(--st-spacing-medium);
}

/* Filter Input - Text and number inputs */
.st-filter-input {
  width: 100%;
  padding: var(--st-spacing-small);
  border: var(--st-border-width) solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  font-size: 0.9em;
  background-color: var(--st-odd-row-background-color);
  color: var(--st-cell-color);
  font-family: inherit;
  outline: none;
  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
}

.st-filter-input:focus {
  border-color: var(--st-editable-cell-focus-border-color);
}

/* Range input specific styling */
.st-filter-input-range-from {
  margin-bottom: var(--st-spacing-medium);
}

/* Filter Select - Dropdown selectors */
.st-filter-select {
  width: 100%;
  padding: var(--st-spacing-medium) var(--st-spacing-medium);
  border: var(--st-border-width) solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  font-size: 0.9em;
  background-color: var(--st-odd-row-background-color);
  color: var(--st-cell-color);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
}

.st-filter-select:focus {
  border-color: var(--st-editable-cell-focus-border-color);
}

/* Filter Actions - Button container and buttons */
.st-filter-actions {
  display: flex;
  gap: var(--st-spacing-medium);
  padding-top: var(--st-spacing-medium);
  border-top: var(--st-border-width) solid var(--st-border-color);
}

.st-filter-button {
  flex: 1;
  padding: var(--st-spacing-small);
  border: none;
  border-radius: var(--st-border-radius);
  cursor: pointer;
  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;
}

/* Apply Button */
.st-filter-button-apply {
  background-color: var(--st-button-active-background-color);
  color: white;
}

.st-filter-button-apply:hover:not(.st-filter-button-disabled) {
  opacity: 0.9;
}

/* Disabled Apply Button */
.st-filter-button-disabled {
  background-color: var(--st-filter-button-disabled-background-color);
  color: var(--st-filter-button-disabled-text-color);
  cursor: not-allowed;
}

/* Clear Button */
.st-filter-button-clear {
  background-color: transparent;
  color: var(--st-cell-color);
  border: var(--st-border-width) solid var(--st-border-color);
}

.st-filter-button-clear:hover {
  background-color: var(--st-button-hover-background-color);
}

/* Custom Select Component */
.st-custom-select {
  position: relative;
  width: 100%;
}

.st-custom-select-trigger {
  width: 100%;
  padding: var(--st-spacing-small);
  border: var(--st-border-width) solid var(--st-border-color);
  border-radius: var(--st-border-radius);
  background-color: var(--st-odd-row-background-color);
  color: var(--st-cell-color);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  display: flex;
  align-items: center;
  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);
}

.st-custom-select-trigger:focus {
  border-color: var(--st-editable-cell-focus-border-color);
}

.st-custom-select-trigger:hover:not(:disabled) {
  border-color: var(--st-editable-cell-focus-border-color);
}

.st-custom-select-open .st-custom-select-trigger {
  border-color: var(--st-editable-cell-focus-border-color);
}

.st-custom-select-value {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--st-cell-color);
}

.st-custom-select-arrow {
  flex-shrink: 0;
  color: var(--st-header-label-color);
  transition: transform var(--st-transition-duration) var(--st-transition-ease);
}

.st-custom-select-open .st-custom-select-arrow {
  transform: rotate(180deg);
}

/* Custom select options container */
.st-custom-select-options {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  max-height: 200px;
  overflow: auto;
  overflow-x: hidden;
}

.st-custom-select-option {
  flex-shrink: 0;
  padding: var(--st-spacing-small);
  cursor: pointer;
  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--st-cell-color);
  font-size: 0.9em;
}

.st-custom-select-option:hover,
.st-custom-select-option-focused {
  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: 0.9;
}

/* Disabled state */
.st-custom-select-disabled {
  opacity: var(--st-opacity-disabled);
  pointer-events: none;
}

.st-custom-select-disabled .st-custom-select-trigger {
  cursor: not-allowed;
  background-color: var(--st-header-background-color);
  color: var(--st-header-label-color);
}

/* ===========================
   ENUM FILTER STYLES
   =========================== */

/* Enum filter options container */
.st-enum-filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-small);
  flex-grow: 1;
  max-height: 200px;
  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);
  border-bottom: var(--st-border-width) solid var(--st-border-color);
}

/* Search input container */
.st-enum-search {
  padding-bottom: var(--st-spacing-small);
  border-bottom: var(--st-border-width) solid var(--st-border-color);
}

.st-enum-select-all-label {
  font-weight: 600;
  color: var(--st-header-label-color);
}

/* Enum option label */
.st-enum-option-label {
  font-size: 0.9em;
  color: var(--st-cell-color);
  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);
  text-align: center;
  font-size: 0.9em;
  color: var(--st-slate-400);
  font-style: italic;
}

/* Row number styling */
.st-row-number {
  font-size: 0.8em;
  opacity: 0.6;
  user-select: none;
  font-weight: 500;
}

/* Selection cell with row buttons layout */
.st-selection-cell-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.st-selection-control {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Row buttons styling within selection column */
.st-row-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.st-row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Column borders - Add right border to cells when column borders are enabled */
.st-column-borders .st-header-cell:not(.st-last-column) {
  box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
}

.st-column-borders .st-cell:not(.st-last-column) {
  box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
}

/* Maintain column borders on hover */
.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) {
  box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
}

/* Maintain column borders on selected row hover */
.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) {
  box-shadow: var(--st-border-width) 0 0 0 var(--st-border-color);
}

/* ========================================== */
/* Tooltip Styles */
/* ========================================== */

.st-tooltip {
  background-color: var(--st-tooltip-background-color);
  color: var(--st-tooltip-text-color);
  padding: var(--st-tooltip-padding);
  border-radius: var(--st-tooltip-border-radius);
  font-size: 0.8em;
  line-height: 1.4;
  max-width: 300px;
  word-wrap: break-word;
  box-shadow: var(--st-tooltip-shadow);
  pointer-events: none;
  animation: st-tooltip-fade-in 0.2s ease-out;
}

@keyframes st-tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================== */
/* Row State Indicator Styles */
/* ========================================== */

/* State indicator rows (loading/error/empty) */
.st-row.st-state-row {
  display: grid;
  position: absolute;
  width: 100%;
}

/* Empty spacer for pinned sections when state row is shown */
.st-row.st-state-row-spacer {
  display: block;
  position: absolute;
  width: 100%;
  background-color: transparent;
}

/* The cell within state row that spans full width */
.st-state-row-cell {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  background-color: var(--st-body-background-color);
}

/* ========================================== */
/* Chart Styles */
/* ========================================== */

/* Crisp, pixel-perfect chart rendering */
.st-line-area-chart,
.st-bar-chart {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.st-bar-chart rect {
  shape-rendering: crispEdges;
}