/*
 * SvGrid component styles. Extracted from SvGrid.svelte's <style> block so the
 * component file stays focused on logic + markup. These are plain (global) CSS
 * rules - every selector is a unique .sv-grid-* class that maps to a real class
 * on the grid's elements, so behaviour is identical to the former scoped block.
 * Imported for its side effect by SvGrid.svelte; the WC build inlines it and
 * app bundlers include it via the import.
 */
/* Root wrapper: holds the shell + pager + any overlays (find, tooltips
 * pinned to the root). Position-relative so absolutely-positioned
 * overlays (the find-in-grid toolbar) anchor to the grid, not the
 * viewport. */
.sv-grid-root {
  position: relative;
  font-family: var(--sg-font, inherit);
}
.sv-grid-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sv-grid-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: auto;
  background: color-mix(in srgb, var(--sg-bg, #fff) 35%, transparent);
}
/* Indeterminate top progress bar - the "something is happening" signal
   that keeps the current rows visible underneath (no flash). */
.sv-grid-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sg-accent, #2563eb) 18%, transparent);
}
.sv-grid-loading-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--sg-accent, #2563eb);
  animation: sv-grid-loading-slide 1.1s ease-in-out infinite;
}
@keyframes sv-grid-loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
/* First-load skeleton: shimmer placeholder rows under the header. */
.sv-grid-skeleton {
  position: absolute;
  top: var(--sg-thead-h, 40px);
  left: 0;
  right: 0;
  padding: 0;
  overflow: hidden;
}
.sv-grid-skeleton-row {
  display: flex;
  height: var(--sg-pinned-row-h, 36px);
  align-items: center;
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
.sv-grid-skeleton-cell {
  flex-shrink: 0;
  padding: 0 12px;
  box-sizing: border-box;
}
.sv-grid-skeleton-bar {
  display: block;
  height: 10px;
  width: 70%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sg-muted, #94a3b8) 18%, transparent) 25%,
    color-mix(in srgb, var(--sg-muted, #94a3b8) 32%, transparent) 50%,
    color-mix(in srgb, var(--sg-muted, #94a3b8) 18%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: sv-grid-shimmer 1.3s linear infinite;
}
@keyframes sv-grid-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Grid toolbar strip above the shell - hosts the tool-panel trigger (and is a
   natural home for future grid-level actions). */
.sv-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
}
.sv-grid-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: var(--sg-radius, 6px);
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sv-grid-toolbar-btn:hover {
  border-color: var(--sg-accent, #2563eb);
  color: var(--sg-accent, #2563eb);
}
.sv-grid-toolbar-btn.is-active {
  background: var(--sg-accent, #2563eb);
  border-color: var(--sg-accent, #2563eb);
  color: #fff;
}
/* Advanced-filter indicator. Reads as state rather than as another action, so
   it uses the accent fill the toolbar buttons reserve for `is-active` instead
   of the neutral button shell. */
.sv-grid-advf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sg-accent, #2563eb) 35%, transparent);
  background: color-mix(in srgb, var(--sg-accent, #2563eb) 12%, transparent);
  color: var(--sg-accent, #2563eb);
  font-size: 12.5px;
  font-weight: 600;
}
.sv-grid-advf-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.sv-grid-advf-clear:hover {
  background: color-mix(in srgb, var(--sg-accent, #2563eb) 25%, transparent);
}
.sv-grid-tool-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Above the grid's sticky header (z-index 30) and custom scrollbars (z ~900)
     so the docked panel fully overlays the grid instead of the header/right
     columns bleeding through its top-right. Ties the menu layer (901) but the
     menus render later in the DOM, so a column menu opened over the panel still
     wins. */
  z-index: 901;
  width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--sg-bg, #fff);
  border-left: 1px solid var(--sg-border, #e2e8f0);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.sv-grid-tool-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sg-muted, #64748b);
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
.sv-grid-tool-panel-close {
  border: 0;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 14px;
  cursor: pointer;
}
.sv-grid-tool-panel-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.sv-grid-tool-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 5px;
}
.sv-grid-tool-panel-item:hover {
  background: var(--sg-row-hover-bg, rgba(148, 163, 184, 0.1));
}
.sv-grid-tool-panel-vis {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--sg-fg, #0f172a);
  cursor: pointer;
}
.sv-grid-tool-panel-vis input {
  accent-color: var(--sg-accent, #2563eb);
}
.sv-grid-tool-panel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-grid-tool-panel-actions {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.sv-grid-tool-panel-btn {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 13px;
  cursor: pointer;
}
.sv-grid-tool-panel-btn:hover:not(:disabled) {
  background: var(--sg-row-hover-bg, rgba(148, 163, 184, 0.18));
  color: var(--sg-fg, #0f172a);
}
.sv-grid-tool-panel-btn.is-active {
  color: var(--sg-accent, #2563eb);
}
.sv-grid-tool-panel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Tool-panel tab bar (Columns | Filters) */
.sv-grid-tool-panel-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
.sv-grid-tool-panel-tab {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sv-grid-tool-panel-tab:hover {
  color: var(--sg-fg, #0f172a);
}
.sv-grid-tool-panel-tab.is-active {
  color: var(--sg-accent, #2563eb);
  border-bottom-color: var(--sg-accent, #2563eb);
}
/* Filters tab: one control block per filterable column */
.sv-grid-tool-panel-filters {
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-grid-tp-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 6px;
}
.sv-grid-tp-filter.is-filtered {
  border-color: var(--sg-accent, #2563eb);
}
.sv-grid-tp-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-grid-tp-filter-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sg-fg, #0f172a);
}
.sv-grid-tp-filter-clear {
  border: 0;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
}
.sv-grid-tp-filter-clear:hover {
  color: var(--sg-accent, #2563eb);
}
.sv-grid-tp-filter-op,
.sv-grid-tp-filter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 5px;
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
}
/* Root wrapper fill mode: only takes effect when consumer passes
 * containerHeight='100%'. The shell becomes a flex item that expands
 * while the pager keeps its natural height. */
.sv-grid-root-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.sv-grid-root-fill > .sv-grid-shell {
  flex: 1 1 0;
  min-height: 0;
  height: auto !important;
}

.sv-grid-shell {
  position: relative;
  border-bottom: 1px solid var(--sg-border, #cbd5e1);
}

.sv-grid-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.sv-grid-table:focus {
  outline: none;
}

.sv-grid-column,
.sv-grid-cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
  user-select: none;
  /* Grid lines ship with the grid so it looks complete out of the box - no
     host stylesheet required. Only right + bottom per cell (border-spacing is
     0), so adjacent cells share a single 1px line rather than doubling. */
  border-right: 1px solid var(--sg-border, #e2e8f0);
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
/* The last cell / column in each row drops its right border so the grid's
   right edge stays clean (the shell provides the outer frame). */
.sv-grid-table tr > :last-child.sv-grid-column,
.sv-grid-table tr > :last-child.sv-grid-cell {
  border-right: 0;
}
/* Row hover tint - opt-in via `enableRowHover` (off by default; the class is
   present unless the grid opts in). Uses `background-color` (not the shorthand)
   so it never resets the fill-marquee `background-image`, and skips selected
   cells so the selection stays visible under a hovered row. */
.sv-grid-table:not(.sv-grid-no-row-hover)
  tbody tr:hover > .sv-grid-cell:not([data-selected-range="true"]) {
  background-color: var(--sg-row-hover-bg, #eef2ff);
}
/* Only the active cell + the cell hosting the fill handle become a
   positioning context (so the absolutely-positioned handle anchors
   to the cell box). Adding `position: relative` to EVERY cell paints
   each one as its own layout box and noticeably slows vertical
   scroll on dense grids - keep it scoped. Sticky / pinned cells are
   already positioning contexts via `position: sticky`. */
.sv-grid-cell-active,
.sv-grid-cell-has-fill-handle {
  position: relative;
}
/* The cell that owns the fill handle gets overflow: visible so the
   handle isn't clipped - chip cells in particular pack pills right up
   to the cell edges, and with overflow: hidden the handle's hover
   scale-up + the handle itself could be partially eaten by them. */
.sv-grid-cell-has-fill-handle {
  overflow: visible;
}

/* Full-width expandable detail row (props.isDetailRow / renderDetailRow).
   Overrides the normal single-line cell clamps so the panel spans every
   column and grows to its natural height. Pair with virtualization={false}
   so the variable height isn't fought by the fixed-row-height virtualizer.
   These rules sit AFTER `.sv-grid-cell` so they win at equal specificity. */
.sv-grid-detail-row {
  height: auto !important;
}
.sv-grid-detail-cell {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  height: auto;
  padding: 0;
  background: var(--sg-bg, #fff);
  user-select: text;
}

/* Pinned columns read as "frozen" via three layered cues:
     1. A distinct fill (slightly stronger than the header) so the
        pinned strip is visible even before you scroll. Themes with a
        saturated accent set --sg-pinned-bg / --sg-pinned-header-bg to a
        neutral instead of taking the accent mix below.
     2. A solid 1px divider on the inside edge (toward the scrollable
        middle) and a soft drop shadow extending into the scroll area.
     3. A thin accent stripe on the outermost edge that turns on when
        the grid scrolls past the pin - a familiar Excel-style cue.
   The shadow direction flips based on which side is pinned so it
   always points toward the scrollable middle. */
.sv-grid-cell[data-pinned="left"],
.sv-grid-column[data-pinned="left"] {
  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
  box-shadow:
    inset -1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
    8px 0 12px -6px var(--sg-pinned-shadow-color, rgba(15, 23, 42, 0.22));
}
.sv-grid-cell[data-pinned="right"],
.sv-grid-column[data-pinned="right"] {
  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
  box-shadow:
    inset 1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
    -8px 0 12px -6px var(--sg-pinned-shadow-color, rgba(15, 23, 42, 0.22));
}
/* Header row pinned cells get a slightly darker variant + bolder font
   so the frozen header itself reads as part of the grid chrome. */
.sv-grid-head .sv-grid-column[data-pinned="left"],
.sv-grid-head .sv-grid-column[data-pinned="right"] {
  background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 86%, var(--sg-accent, #2563eb) 14%));
  font-weight: 600;
}
/* Zebra striping, opt-in via the `zebraRows` prop (which adds
   `.sv-grid-row-alt` to alternating DATA rows only - pinned, group,
   detail, and summary rows never get the class, so they keep a single
   background). This rule sits before `.sv-grid-row-selected` /
   `:hover` so those states paint over the stripe. */
.sv-grid-row-alt > .sv-grid-cell {
  background: var(--sg-row-alt-bg, #f8fafc);
}
/* Zebra rows: keep the pinned tint visible (don't let the row-alt
   background bleed through) by re-painting the pinned cells. */
.sv-grid-row-alt > .sv-grid-cell[data-pinned] {
  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
}
/* When the row is selected, keep the pinned tint but layer the
   selection color over it so the row still reads as selected. */
.sv-grid-row-selected > .sv-grid-cell[data-pinned] {
  background:
    linear-gradient(
      color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent),
      color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent)
    ),
    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
}
/* Hovered row keeps the pinned tint distinguishable from the hover. Selected
   cells are excluded so the selection stays visible under hover. */
.sv-grid-table:not(.sv-grid-no-row-hover)
  .sv-grid-row:hover > .sv-grid-cell[data-pinned]:not([data-selected-range="true"]) {
  background:
    linear-gradient(
      color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent),
      color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent)
    ),
    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
}

.sv-grid-column {
  position: relative;
}

/* Column alignment via data-align attribute (see getColumnAlign helper).
 * For body cells text-align is enough; for headers the label lives inside
 * a flex container so we adjust justify-content on the sort button.
 * Padding is biased to the aligned side: left-aligned text gets a 7px
 * left gap; right-aligned numbers/dates get a 7px right gap. */
.sv-grid-cell[data-align="left"],
.sv-grid-column[data-align="left"] {
  padding-left: var(--sg-cell-px, 7px);
}
.sv-grid-cell[data-align="right"] {
  text-align: right;
  padding-right: var(--sg-cell-px, 7px);
}
.sv-grid-cell[data-align="center"] {
  text-align: center;
}
.sv-grid-column[data-align="right"] {
  padding-right: var(--sg-cell-px, 7px);
}
.sv-grid-column[data-align="right"] .sv-grid-header-sort {
  justify-content: flex-end;
}
/* The custom vertical scrollbar overlays the right 16px of the viewport
   (absolute, z-index 40) and does NOT shrink the scroll container's
   clientWidth. Two cases keep the last column clear of it:

   1. No horizontal overflow (content fits, nothing to scroll): nudge the last
      column's right-aligned content in by the scrollbar width so numbers
      aren't hidden underneath it. Left/center content already clears it.
   2. Horizontal overflow: there's nothing to nudge (you scroll to the end and
      the last 16px sit under the bar with no room left). Instead reserve a
      trailing gutter on the scroll container so you can scroll the last column
      fully out from under the overlay. See `.sv-grid-has-vscroll.sv-grid-has-hscroll`. */
.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
.sv-grid-has-vscroll:not(.sv-grid-has-hscroll) .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
  padding-right: calc(var(--sg-cell-px, 7px) + 16px);
}
/* Case 2: reserve the overlay scrollbar's width as end-of-scroll space so the
   final column can be scrolled clear of the vertical scrollbar. Modern browsers
   include a scroll container's inline-end padding in its scrollable overflow;
   the custom scrollbars are siblings of this container, so their layout is
   unaffected. */
.sv-grid-container.sv-grid-has-vscroll.sv-grid-has-hscroll {
  padding-right: 16px;
}
.sv-grid-column[data-align="center"] .sv-grid-header-sort {
  justify-content: center;
}

.sv-grid-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
  transition: background-color 100ms ease;
}

/* An accent center pill (rather than tinting the whole strip): faint on column
   hover, bright when the handle itself is hovered or while dragging. */
.sv-grid-resize-handle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto 2px;
  width: 2px;
  background: var(--sg-fg, #0f172a);
  opacity: 0;
  border-radius: 1px;
  transition: background-color 100ms ease, opacity 100ms ease;
}
.sv-grid-column:hover .sv-grid-resize-handle::after {
  opacity: 0.3;
}
.sv-grid-column:hover .sv-grid-resize-handle:hover::after,
.sv-grid-resize-handle.is-resizing::after {
  background: var(--sg-accent, #2563eb);
  opacity: 1;
}

/* Row resize handle (counterpart of the column resize handle). Lives
   at the bottom of the row-header gutter cell; the consumer opts in
   by attaching the `rowResize` action and setting
   `cellClass: 'sv-row-gutter'` on the row-header column. */
.sv-grid-row-resize-handle {
  /* Geometry + interactivity are also set inline by the rowResize
     action so the strip works even if this stylesheet hasn't been
     parsed yet. This rule only owns the hover/active tint. */
  transition: background-color 100ms ease;
}
.sv-grid-row-resize-handle:hover,
.sv-grid-row-resize-handle.is-resizing {
  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 30%, transparent);
}

.sv-grid-head {
  position: sticky;
  top: 0;
  /* Above pinned body cells (z-index 30 via cellPinStyle). Without
     this, when a row scrolls partially behind the sticky header,
     its pinned cells (left + right) paint OVER the header while the
     middle non-pinned cells are correctly hidden behind it, leaving
     "floating" symbol / pnl cells at the top of the viewport. */
  z-index: 35;
  background: var(--sg-header-bg, #f5f7fb);
}
/* Column-header cells take the header background (and header foreground)
   so the header row paints as a solid band rather than body-colored
   cells over the sticky header strip. Together with the row-number
   gutter below - which uses the same --sg-header-bg - the column headers
   and row headers read as one continuous header chrome. */
.sv-grid-head .sv-grid-column {
  background: var(--sg-header-bg, #f5f7fb);
  /* Header typography is themeable so each design-system preset can match
     its real grid header (e.g. Excel bold, Atlassian uppercase + subtle,
     shadcn medium + muted). The label/sort-button inherit these. */
  color: var(--sg-header-label-color, var(--sg-header-fg, var(--sg-fg, #0f172a)));
  font-weight: var(--sg-header-weight, 600);
  font-size: var(--sg-header-size, inherit);
  text-transform: var(--sg-header-transform, none);
  letter-spacing: var(--sg-header-tracking, normal);
  /* Themes that keep the header close to the page ground lean on this line
     rather than a fill to separate header from body. Scoped to the leaf header
     row so strengthening it doesn't thicken every cell border. */
  border-bottom-color: var(--sg-header-border, var(--sg-border, #e2e8f0));
}

/* Header drag-to-reorder. The `draggable` attribute is only set
 * when `enableColumnReorder` is true, so the cursor and drop
 * indicators only show in that mode. */
.sv-grid-column[draggable="true"] { cursor: grab; }
.sv-grid-column[draggable="true"]:active { cursor: grabbing; }
.sv-grid-column.is-dragging { opacity: 0.55; }
.sv-grid-column.is-drag-target-before,
.sv-grid-column.is-drag-target-after {
  position: relative;
}
.sv-grid-column.is-drag-target-before::before,
.sv-grid-column.is-drag-target-after::after {
  content: "";
  position: absolute; top: 4px; bottom: 4px; width: 3px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  box-shadow: 0 0 6px #6366f1;
  pointer-events: none;
  z-index: 7;
  animation: sg-drop-pulse 700ms ease-in-out infinite alternate;
}
.sv-grid-column.is-drag-target-before::before { left:  -2px; }
.sv-grid-column.is-drag-target-after::after   { right: -2px; }
@keyframes sg-drop-pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* Managed row dragging ----------------------------------------------------- */
/* The whole row is the drag source; the row-number cell shows a grip so the
 * affordance is discoverable. Pair `rowDragManaged` with `showRowNumbers` for
 * the grip; without row numbers the grab cursor still hints it. */
.sv-grid-row-draggable { cursor: grab; }
.sv-grid-row-draggable:active { cursor: grabbing; }
.sv-grid-row-draggable .sv-grid-row-number-cell {
  position: relative;
  padding-left: 14px;
}
.sv-grid-row-draggable .sv-grid-row-number-cell::before {
  content: "\2807"; /* braille grip glyph */
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  color: var(--sg-muted, #94a3b8);
  opacity: 0.4;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.sv-grid-row-draggable:hover .sv-grid-row-number-cell::before { opacity: 1; }

/* Default highlight for an external drop zone (use:rowDropZone) while a
   matching row is dragged over it. Consumers can override the class. */
.sv-grid-row-dropzone-over {
  outline: 2px dashed var(--sg-accent, #6366f1);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--sg-accent, #6366f1) 10%, transparent);
}

/* Drop indicator: a glowing line on the row's top (before) or bottom (after)
 * edge. Painted on the cells so it spans the full row across table layouts. */
.sv-grid-row-drop-before > td {
  box-shadow: inset 0 2px 0 0 var(--sg-accent, #6366f1);
}
.sv-grid-row-drop-after > td {
  box-shadow: inset 0 -2px 0 0 var(--sg-accent, #6366f1);
}

/* Pinned rows (top / bottom). Each cell sticks individually so the
 * row tracks scroll on every browser. Top rows stick below the sticky
 * thead via --sg-thead-h; bottom rows stick to the bottom of the
 * scroll container. Tinted background distinguishes them from
 * regular rows. */
.sv-grid-pinned-row td {
  position: sticky;
  z-index: 4;
  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
  border-bottom: 1px solid var(--sg-pinned-border, color-mix(in oklab, var(--sg-accent, #2563eb) 24%, transparent));
  font-weight: 600;
}
.sv-grid-pinned-row-top td    { top: var(--sg-thead-h, 36px); }
.sv-grid-pinned-row-bottom td { bottom: 0; border-top: 1px solid var(--sg-pinned-border, color-mix(in oklab, var(--sg-accent, #2563eb) 24%, transparent)); }
/* Stack multiple pinned-top rows: row 1 stops at thead, row 2 stops
 * at thead + 36px, etc. The component itself sets --sg-pinned-top-h
 * to the current pinned-top stack height via $effect. */
.sv-grid-pinned-row-top[data-pinned-index="1"] td { top: calc(var(--sg-thead-h, 36px) + var(--sg-pinned-row-h, 32px)); }
.sv-grid-pinned-row-top[data-pinned-index="2"] td { top: calc(var(--sg-thead-h, 36px) + var(--sg-pinned-row-h, 32px) * 2); }
.sv-grid-pinned-row-top[data-pinned-index="3"] td { top: calc(var(--sg-thead-h, 36px) + var(--sg-pinned-row-h, 32px) * 3); }
.sv-grid-pinned-row-bottom[data-pinned-index="1"] td { bottom: var(--sg-pinned-row-h, 32px); }
.sv-grid-pinned-row-bottom[data-pinned-index="2"] td { bottom: calc(var(--sg-pinned-row-h, 32px) * 2); }
.sv-grid-pinned-row-bottom[data-pinned-index="3"] td { bottom: calc(var(--sg-pinned-row-h, 32px) * 3); }
/* Sticky-left columns keep their left position; just override their
 * z so they sit above non-pinned pinned-row cells. */
.sv-grid-pinned-row td[data-pinned] { z-index: 5; }

/* Group header rows for multi-level (pivot-style) headers. Sits above
 * the standard leaf header row when the column tree has nesting. */
.sv-grid-group-header-row {
  background: var(--sg-header-bg, #eef2f8);
}
.sv-grid-group-header-cell {
  box-sizing: border-box;
  border-bottom: 1px solid var(--sg-border, #d8dee9);
  border-right: 1px solid var(--sg-border, #e2e8f0);
  text-align: center;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--sg-header-fg, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sv-grid-group-header-placeholder {
  background: transparent;
  border-right-color: transparent;
}
.sv-grid-group-header-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Collapse toggle on a collapsible column group header. */
.sv-grid-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
}
.sv-grid-group-toggle:hover {
  background: color-mix(in srgb, var(--sg-accent, #2563eb) 12%, transparent);
  color: var(--sg-accent, #2563eb);
}
.sv-grid-group-caret {
  flex-shrink: 0;
  transition: transform 140ms ease;
}
/* Collapsed: point the caret right (like a closed disclosure). */
.sv-grid-group-toggle.is-collapsed .sv-grid-group-caret {
  transform: rotate(-90deg);
}

.sv-grid-foot {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: var(--sg-header-bg, #f5f7fb);
}

/* Responsive (narrow) mode: smooth momentum touch panning, and let touch
   gestures pan the grid freely (the wheel-trap contain stays for pointer). */
.sv-grid-container.sv-grid-narrow {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

.sv-grid-container {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  /* Trap wheel scroll inside the grid. Without this, hitting the top
   * or bottom edge of the grid lets the wheel event chain to the
   * outer page (or any scrollable ancestor), so what feels like one
   * wheel notch keeps scrolling something else - the "starts and
   * doesn't stop" symptom. `contain` cancels the chained scroll
   * but still bounces normally inside the grid. */
  overscroll-behavior: contain;
  /* Disable scroll anchoring. The virtualizer changes the top-spacer
   * height every time the visible row window slides - modern browsers
   * (default `overflow-anchor: auto`) react by quietly adjusting
   * `scrollTop` to keep the visible content stable. That adjustment
   * fires another `scroll` event, which fires `onBodyScroll`, which
   * re-runs the virtualizer, which shifts the spacer again, which
   * adjusts `scrollTop` again - a self-sustaining loop that
   * presents as "the grid keeps scrolling after the wheel stops."
   * Turning anchoring off lets the virtualizer own the scroll
   * position outright. */
  overflow-anchor: none;
  /* Tell the browser that the sticky thead occupies the top
     `--sg-thead-h` pixels of the scroll container. `scrollIntoView`
     and friends use this to avoid scrolling a row underneath the
     sticky header - critical for Excel-style keyboard nav. */
  scroll-padding-top: var(--sg-thead-h, 36px);
}

.sv-grid-container.sv-grid-container-custom-scrollbars {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sv-grid-container.sv-grid-container-custom-scrollbars::-webkit-scrollbar {
  display: none;
}

.sv-grid-scrollbar {
  position: absolute;
  /* Above pinned columns (z-index 30 via cellPinStyle) so a frozen
     left/right column never paints over the custom scrollbar - that
     was the bug behind "vertical scrollbar hidden under the frozen
     column" in grids with a pinned column at the right edge. */
  z-index: 40;
}

/* Scrollbars anchor to the inline-end edge so RTL flips them to the
 * left automatically. `inset-inline-end` resolves to `right` in LTR
 * and `left` in RTL, no manual override needed. */
.sv-grid-scrollbar-vertical {
  top: 0;
  inset-inline-end: 0;
  width: 16px;
  height: calc(100% - 16px);
}

.sv-grid-scrollbar-corner {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 16px;
  background: var(--sg-header-bg, #f5f7fb);
  /* Continues the leaf-header underline across the scrollbar gutter. */
  border-bottom: 1px solid var(--sg-header-border, rgba(15, 23, 42, 0.08));
  /* Above pinned header cells (z-index 30) so the gap above the
     vertical scrollbar stays clean over a frozen column. */
  z-index: 41;
  pointer-events: none;
}

.sv-grid-scrollbar-corner-br {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  background: var(--sg-header-bg, #eef2f8);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
  z-index: 42;
  pointer-events: none;
}

.sv-grid-scrollbar-horizontal {
  inset-inline-start: 0;
  bottom: 0;
  width: calc(100% - 16px);
  height: 16px;
}

.sv-grid-selection-column,
.sv-grid-selection-cell {
  text-align: center;
  padding-inline: 6px;
  position: sticky;
  z-index: 4;
}

/* Row-number column: sticks to the left edge of the scroll viewport. */
.sv-grid-row-number-column,
.sv-grid-row-number-cell {
  text-align: right;
  padding-inline: 8px;
  position: sticky;
  left: 0;
  z-index: 4;
  /* Match the column-header band so the row-number gutter and the column
     headers form one continuous header chrome. */
  background: var(--sg-header-bg, #f5f7fb);
  color: var(--sg-muted, #64748b);
  font-variant-numeric: tabular-nums;
}
.sv-grid-row-number-head {
  color: inherit;
}

.sv-grid-filter-row-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  /* Inset the operator button + input from the cell edges so the filter row
     lines up with the header label / body text (same --sg-cell-px gutter) and
     isn't cramped against the top/side borders. */
  padding: 5px var(--sg-filter-cell-px, var(--sg-cell-px, 7px));
}

.sv-grid-filter-operator {
  flex: 2 1 0;
  min-width: 0;
  box-sizing: border-box;
}

.sv-grid-filter-value {
  flex: 3 1 0;
  min-width: 0;
  box-sizing: border-box;
}

/* Invalid regex pattern: flag the input so the user knows the half-typed
   pattern isn't being applied (it matches nothing until it compiles). */
.sv-grid-filter-value.sv-grid-filter-value-invalid,
.sv-grid-tp-filter-input.sv-grid-filter-value-invalid {
  border-color: var(--sg-danger, #dc2626) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-danger, #dc2626) 45%, transparent);
}

/* In / Not-in chip (token) input: chips + a flex-growing text box share one
   bordered control that reads like a single field. */
.sv-grid-filter-chips {
  flex: 3 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border: 1px solid var(--sg-input-border, #8794a8);
  border-radius: 4px;
  background: var(--sg-input-bg, #fff);
  overflow: hidden;
}

/* A few chips stay visible; the rest collapse into a non-wrapping "+N" pill
   that opens the value dropdown (select / unselect). */
.sv-grid-filter-chip .sv-grid-filter-chip-label {
  max-width: 84px;
}
.sv-grid-filter-chip-more {
  flex: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 16px;
  color: var(--sg-text, inherit);
}
.sv-grid-filter-chip-more:hover {
  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 26%, transparent);
}
.sv-grid-filter-chips:focus-within {
  border-color: var(--sg-accent, #0b63f3);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-accent, #0b63f3) 45%, transparent);
}
.sv-grid-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 120px;
  padding: 0 2px 0 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 16%, transparent);
  color: var(--sg-text, inherit);
}
.sv-grid-filter-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-grid-filter-chip-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.sv-grid-filter-chip-x:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 28%, transparent);
}
.sv-grid-filter-chips .sv-grid-filter-chip-input {
  flex: 1 1 14px;
  min-width: 14px;
  border: 0 !important;
  padding: 0 2px;
  background: transparent;
  box-shadow: none !important;
  outline: none;
}

/* Brief glow used when the user clicks the funnel icon while the grid
   is in row-filter mode - draws attention to where the input is so
   the click isn't a no-op. */
.sv-grid-filter-value.sv-grid-filter-value-pulse {
  animation: sv-grid-filter-pulse 700ms ease-out;
}
@keyframes sv-grid-filter-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-accent, #0b63f3) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sg-accent, #0b63f3) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-accent, #0b63f3) 0%, transparent); }
}

.sv-grid-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  /* The UA stylesheet gives <button> "padding: 1px 6px" on top of
     "box-sizing: border-box", which leaves 2px of content width inside the
     16px box. The glyphs below then shrink to a sliver, and the tick renders
     as a bare slanted line. Guarded by tests/e2e/selection-checkbox.spec.ts. */
  padding: 0;
  border: 1px solid var(--sg-input-border, #8794a8);
  border-radius: 4px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-accent, #0b63f3);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

/* Full-row editor: inline editors shown for every editable cell of a row
   in full-row edit. Fill the cell so the row reads as a form line. */
.sv-grid-fr-editor {
  width: 100%;
  box-sizing: border-box;
}
select.sv-grid-fr-editor {
  height: 100%;
  min-height: 26px;
}
.sv-grid-fr-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--sg-accent, #3b82f6);
  cursor: pointer;
}

/* Color editor - native HTML color input filling the cell so the
   swatch is clickable across the whole cell area, not just the tiny
   OS default size. */
.sv-grid-cell-editor-color {
  width: 100%;
  height: 100%;
  padding: 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sv-grid-cell-editor-color::-webkit-color-swatch-wrapper { padding: 0; }
.sv-grid-cell-editor-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.sv-grid-cell-editor-color::-moz-color-swatch { border: 0; border-radius: 4px; }

/* Rating editor - 5 clickable stars + clear button. Renders inline
   in the cell when editorType="rating"; the readonly view renders a
   filled-star count via the default text path (or a snippet cell). */
.sv-grid-rating-editor {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 100%;
}
.sv-grid-rating-star {
  border: 0; background: transparent; cursor: pointer;
  color: var(--sg-rating-empty, #cbd5e1);
  font-size: 18px; line-height: 1;
  padding: 0 1px;
  transition: color 80ms ease, transform 80ms ease;
}
.sv-grid-rating-star-on { color: var(--sg-rating-on, #f59e0b); }
.sv-grid-rating-star:hover { color: var(--sg-rating-hover, #fbbf24); transform: scale(1.12); }
.sv-grid-rating-clear {
  margin-left: 4px;
  border: 0; background: transparent;
  color: var(--sg-muted, #94a3b8);
  cursor: pointer; font-size: 14px;
}
.sv-grid-rating-clear:hover { color: var(--sg-fg, #0f172a); }

.sv-grid-checkbox[aria-checked="true"],
.sv-grid-checkbox[aria-checked="mixed"] {
  border-color: var(--sg-accent, #2563eb);
  background: var(--sg-accent, #2563eb);
  color: var(--sg-on-accent, #fff);
}

.sv-grid-checkbox[aria-checked="true"]::after {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(40deg) translate(-1px, -1px);
}

.sv-grid-checkbox[aria-checked="mixed"]::after {
  content: "";
  flex: none;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.sv-grid-checkbox:focus-visible {
  outline: 2px solid var(--sg-accent, #0b63f3);
  outline-offset: 1px;
}

.sv-grid-checkbox-readonly {
  cursor: default;
  pointer-events: none;
}

/* Built-in cell flash (ColumnDef `cellFlash`). Theme-tinted fade; consumers
   can pass their own class (e.g. up/down colouring) via `cellFlash.className`. */
@keyframes sv-grid-cell-flash-kf {
  0%   { background-color: var(--sg-cell-flash, color-mix(in oklab, var(--sg-accent, #3b82f6) 42%, transparent)); }
  100% { background-color: transparent; }
}
.sv-grid-cell-flash {
  animation: sv-grid-cell-flash-kf 0.7s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sv-grid-cell-flash { animation: none; }
}

.sv-grid-cell-active,
.sv-grid-cell-editing {
  position: relative;
  /* High enough to sit above pinned-column stacking contexts (z=4) so the
     list/chips popover overlays adjacent cells instead of being clipped. */
  z-index: 20;
  /* `box-shadow: inset` is bound to the cell's own box, so the ring
     clips cleanly with the cell when it's partially scrolled out of
     view (and shows up consistently at the right edge of a virtualized
     window). The previous `outline + outline-offset: -2px` rendered at
     the wrong position on clipped cells in some browsers - it's drawn
     outside the layout box, so the negative offset's effect was
     inconsistent at scroll boundaries. */
  box-shadow: inset 0 0 0 2px var(--sg-accent, #0b63f3);
  outline: none;
  /* Let list/chips popouts extend past the cell box (default cells have
     overflow: hidden so the chips picker would otherwise be clipped). */
  overflow: visible;
}

/* Excel-style fill handle: a 7×7 blue square anchored to the bottom-
   right corner of the active cell or selection range. The parent
   `.sv-grid-cell` is `position: relative` (sticky cells override
   that with sticky - which is also a positioning context), so the
   handle anchors to the cell box. */
/* Excel-style per-cell note indicator. A small triangle in the top-
 * right corner that, when hovered, shows the note tooltip. The
 * triangle IS the hot-zone (12×12 square clipped to a triangle via
 * border tricks); a transparent invisible square on top widens the
 * hit target a little so it's not painful to hit. */
.sv-grid-cell-note-corner {
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 12px;
  /* Triangle: 0,0  →  12,0  →  12,12 */
  background:
    linear-gradient(45deg, transparent 50%, var(--sg-note-corner, #f59e0b) 50%);
  cursor: help;
  z-index: 6;
}
/* Slightly larger invisible hit area so users don't have to land on
   a 6×6 pixel triangle. */
.sv-grid-cell-note-corner::before {
  content: '';
  position: absolute;
  inset: -3px -3px 0 0;
}

.sv-grid-fill-handle {
  position: absolute;
  /* Sit fully INSIDE the cell box so `overflow: hidden` doesn't clip
     most of the handle. Previously the handle stuck 3px outside the
     cell and the visible 4×4 corner was nearly unclickable - especially
     on chip cells where pills filled the bottom edge. */
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: var(--sg-accent, #0b63f3);
  border: 1px solid var(--sg-bg, #ffffff);
  box-sizing: border-box;
  cursor: crosshair;
  z-index: 15;
  touch-action: none;
}
.sv-grid-fill-handle:hover {
  transform: scale(1.3);
  transform-origin: bottom right;
}

/* Excel-style fill-handle drag marquee: ONE thin dashed rectangle around the
   whole target range (source + fill-into area), not a thick per-cell border or
   fill tint. Drawn as four background-image layers on the boundary cells - no
   `border`, so it paints on the compositor with zero reflow while dragging.
   `--sg-fill-marquee` overrides the colour (defaults to a theme-aware grey). */
/* Step 1 (LOW specificity): default every edge layer to `none`, then light up
   the edges this cell sits on. These are custom properties, which the
   `background:` shorthands on selected / zebra cells do NOT reset - so they can
   safely live at low specificity and just compete with each other by source
   order (gradient rules come after the defaults, so they win). */
.sv-grid-cell[data-fill-top="true"],
.sv-grid-cell[data-fill-bottom="true"],
.sv-grid-cell[data-fill-left="true"],
.sv-grid-cell[data-fill-right="true"] {
  --sv-fill-top: none;
  --sv-fill-bottom: none;
  --sv-fill-left: none;
  --sv-fill-right: none;
  /* Match the selection colour (the grid accent) by default. */
  --sv-fill-color: var(--sg-fill-marquee, var(--sg-accent, #2563eb));
}
.sv-grid-cell[data-fill-top="true"] {
  --sv-fill-top: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
}
.sv-grid-cell[data-fill-bottom="true"] {
  --sv-fill-bottom: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
}
.sv-grid-cell[data-fill-left="true"] {
  --sv-fill-left: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
}
.sv-grid-cell[data-fill-right="true"] {
  --sv-fill-right: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
}
/* Step 2 (HIGH specificity, `.sv-grid-table` prefix): compose the resolved edge
   layers into `background-image` so it beats the `background:` shorthands on
   selected / zebra / hover cells (which would otherwise reset background-image).
   The cell keeps its background-COLOR; this only adds the dashed lines on top. */
.sv-grid-table .sv-grid-cell[data-fill-top="true"],
.sv-grid-table .sv-grid-cell[data-fill-bottom="true"],
.sv-grid-table .sv-grid-cell[data-fill-left="true"],
.sv-grid-table .sv-grid-cell[data-fill-right="true"] {
  background-image: var(--sv-fill-top), var(--sv-fill-bottom),
    var(--sv-fill-left), var(--sv-fill-right);
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, bottom left, top left, top right;
}

.sv-grid-cell-editing {
  padding: 0;
}

/* The four CSS variables let us compose a single box-shadow that draws the
   selection rectangle outline only on the cells that sit on its edges. */
.sv-grid-cell[data-selected-range="true"] {
  background: var(--sg-selection-bg, #eef4ff);
  --sv-range-top: 0 0 0 transparent;
  --sv-range-bottom: 0 0 0 transparent;
  --sv-range-left: 0 0 0 transparent;
  --sv-range-right: 0 0 0 transparent;
  box-shadow: var(--sv-range-top), var(--sv-range-bottom),
    var(--sv-range-left), var(--sv-range-right);
}

/* Selection-range edges as inset box-shadows. We tried `border-*: 2px
   solid` to dodge the 1px-notch artifact at cell boundaries, but
   border width changes force a full table reflow on every selection
   change - catastrophic during keyboard nav (every arrow key pressed
   re-flows ~30 visible rows + their neighbours under border-collapse).
   Box-shadow inset paints on the compositor only - no reflow. */
.sv-grid-cell[data-range-top="true"] {
  --sv-range-top: inset 0 2px 0 var(--sg-accent, #0b63f3);
}
.sv-grid-cell[data-range-bottom="true"] {
  --sv-range-bottom: inset 0 -2px 0 var(--sg-accent, #0b63f3);
}
.sv-grid-cell[data-range-left="true"] {
  --sv-range-left: inset 2px 0 0 var(--sg-accent, #0b63f3);
}
.sv-grid-cell[data-range-right="true"] {
  --sv-range-right: inset -2px 0 0 var(--sg-accent, #0b63f3);
}

/* Lift edge cells above their neighbours so the inset shadow renders
   above adjacent cells' (collapsed) borders rather than under them. */
.sv-grid-cell[data-range-top="true"],
.sv-grid-cell[data-range-bottom="true"],
.sv-grid-cell[data-range-left="true"],
.sv-grid-cell[data-range-right="true"],
.sv-grid-cell.sv-merge-edge-right,
.sv-grid-cell.sv-merge-edge-bottom {
  position: relative;
  z-index: 3;
}

/* Inherited selection-range edges from `spreadsheetLayout` merges.
   Same inset-shadow technique - no layout impact when toggling. */
.sv-grid-cell.sv-merge-edge-right {
  box-shadow: inset -2px 0 0 var(--sg-accent, #0b63f3);
}
.sv-grid-cell.sv-merge-edge-bottom {
  box-shadow: inset 0 -2px 0 var(--sg-accent, #0b63f3);
}
.sv-grid-cell.sv-merge-in-range {
  background: var(--sg-selection-bg, #eef4ff);
}

.sv-grid-cell-editor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: var(--sg-input-bg, #fff);
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  padding: 0 8px;
}

/* Base look for the filter inputs (header filter row, per-column filter, the
   global search box, and the menu's search / condition inputs). The inline cell
   editor is styled separately - it's borderless and fills its cell. Shipping
   this with the grid means filters look like real inputs with no host
   stylesheet. */
.sv-grid-column-filter,
.sv-grid-filter-value,
.sv-grid-global-filter input,
.sv-grid-menu-search,
.sv-grid-menu-condition-value {
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #0f172a);
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  padding: 0 8px;
  box-sizing: border-box;
  font: inherit;
}
.sv-grid-column-filter {
  height: 28px;
  width: 100%;
  font-size: 0.8125rem;
}
/* The global "Filter all rows" search: a labelled input bar above the grid. Ships
   styled so it never renders as a bare, unpositioned text label + input. */
.sv-grid-global-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--sg-muted, #64748b);
}
.sv-grid-global-filter input {
  height: 30px;
  min-width: 220px;
  font-size: 0.8125rem;
}
.sv-grid-column-filter::placeholder,
.sv-grid-filter-value::placeholder,
.sv-grid-menu-search::placeholder,
.sv-grid-global-filter input::placeholder,
.sv-grid-cell-editor::placeholder {
  color: var(--sg-muted, #64748b);
  opacity: 0.7;
}

/* Calm, theme-aware focus (a soft box-shadow rather than a hard outline). */
.sv-grid-global-filter input:focus,
.sv-grid-filter-value:focus,
.sv-grid-column-filter:focus,
.sv-grid-menu-search:focus,
.sv-grid-menu-condition-value:focus,
.sv-grid-menu-operator:focus,
.sv-grid-cell-editor:focus {
  outline: none;
  border-color: var(--sg-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
}

.sv-grid-cell-editor-number,
.sv-grid-cell-editor-date,
.sv-grid-cell-editor-datetime {
  width: 100%;
  height: 100%;
}

/* List editor: native <select>. For multi-select it grows into a
   small popup-style listbox that hangs over the cell. */
.sv-grid-cell-editor-list {
  width: 100%;
  height: 100%;
  appearance: auto;
  font: inherit;
  color: inherit;
  background: var(--sg-input-bg, #fff);
  border: 0;
  padding: 0 6px;
  box-sizing: border-box;
}
.sv-grid-cell-editor-list[multiple] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 100%;
  max-height: 220px;
  z-index: 5;
  padding: 4px;
  border: 1px solid var(--sg-accent, #0b63f3);
  background: var(--sg-input-bg, #fff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

/* Free-form chips editor (multi-value cell with removable tokens).
   Absolutely positioned so it can grow downward past the row without
   pushing other rows. Theme-aware background + accent border + drop
   shadow so it reads as a popout above the next row, not as part of
   it. The cell's outer outline is suppressed for this editor - this
   popout already provides its own border. */
.sv-grid-cell-editor-chips {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  min-height: calc(100% + 2px);
  background: var(--sg-header-bg, var(--sg-bg, #ffffff));
  color: var(--sg-fg, #0f172a);
  padding: 4px 6px;
  box-sizing: border-box;
  z-index: 1000;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--sg-accent, #2563eb);
  border-radius: var(--sg-radius, 6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
/* When the chips editor is mounted, the parent .sv-grid-cell-editing
   no longer needs its own outline - the popout already shows one. */
.sv-grid-cell-editing:has(.sv-grid-cell-editor-chips) {
  outline: none;
}
.sv-grid-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.sv-grid-chip-input {
  flex: 1 1 80px;
  min-width: 60px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 2px 4px;
}
.sv-grid-chip-picker {
  flex: 1 1 100px;
  min-width: 80px;
  font: inherit;
  color: inherit;
  background: var(--sg-bg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 4px;
  padding: 2px 4px;
}
.sv-grid-chip-commit {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--sg-accent, #0b63f3);
  border: 0;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}
.sv-grid-chip-commit:hover {
  filter: brightness(1.1);
}

/* Chip badge - used both in readonly cell display and inside the
   chips editor. Subtle neutral chrome, scales to the row's font size.
   Readonly chip rows stay on one line (the parent <td> has
   overflow: hidden, so overflowing chips get clipped - widen the
   column or open the editor to see all). */
.sv-grid-chips-display {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
}
.sv-grid-sparkline {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
/* Conditional formatting overlays - behind the cell text. */
.sv-grid-cf-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sv-grid-cf-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.85;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
.sv-grid-cell-cf {
  position: relative;
}
/* Declarative cell validation (column `validate` hook). Invalid cells get a
 * soft red wash and a red inset ring - Handsontable's `htInvalid` look. The
 * value keeps rendering as-is; the message (if any) shows as the tooltip. */
.sv-grid-cell-invalid {
  background-color: var(--sg-invalid-bg, rgba(239, 68, 68, 0.14)) !important;
  box-shadow: inset 0 0 0 1px var(--sg-invalid-border, rgba(239, 68, 68, 0.45));
  color: var(--sg-invalid-fg, #b91c1c);
}
.sv-grid-cell-invalid.sv-grid-cell-active {
  box-shadow: inset 0 0 0 2px var(--sg-invalid-border, rgba(239, 68, 68, 0.7));
}
.sv-grid-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--sg-fg);
  background: var(--sg-header-bg, #f1f5f9);
  border: 1px solid var(--sg-border, #e2e8f0);
  border-top: 0;
  flex-shrink: 0;
}
.sv-grid-status-item {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sv-grid-status-label {
  color: var(--sg-muted, #64748b);
  font-weight: 400;
  margin-right: 5px;
}
.sv-grid-cf-content {
  position: relative;
  z-index: 1;
}
.sv-grid-cf-icon {
  margin-right: 5px;
  font-size: 0.95em;
}
.sv-grid-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.85em;
  line-height: 1.4;
  background: color-mix(in srgb, var(--sg-accent, #2563eb) 18%, transparent);
  color: var(--sg-fg, inherit);
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--sg-accent, #2563eb) 35%, transparent);
  white-space: nowrap;
}
.sv-grid-chip-removable {
  padding-right: 2px;
}
.sv-grid-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sg-fg, #0f172a) 18%, transparent);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sv-grid-chip-remove:hover {
  background: rgba(220, 38, 38, 0.7);
  color: #fff;
}

.sv-grid-icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

.sv-grid-header-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  /* Themeable header height. Defaults to auto (content-driven); presets
     can set a taller header (e.g. Material's roomy data-table header).
     The component measures the rendered header height for sticky offsets,
     so this propagates to --sg-thead-h automatically. */
  min-height: var(--sg-header-min-height, auto);
}

.sv-grid-header-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  /* Form controls get `text-transform: none` from the UA sheet, which the
     `font` shorthand doesn't undo. Without this the label ignores
     --sg-header-transform on every sortable column. */
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* Custom (function-valued) header rendering. Behaves like the sort
   button but is a div so the consumer's snippet can contain its own
   interactive elements (menu buttons, dropdowns, etc) - button-in-
   button DOM is invalid. */
.sv-grid-header-custom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sv-grid-header-label {
  /* min-width:0 lets this flex item shrink below its text width so a long
     label truncates to a single line with an ellipsis instead of overflowing
     or forcing the header taller. flex:0 1 auto keeps the sort icon snug to
     the label rather than pushed to the far edge. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-grid-header-icon {
  display: inline-flex;
  flex: none;
  font-size: 13px;
  color: var(--sg-muted, #5b6b85);
}

.sv-grid-header-icon-hint {
  opacity: 0;
  transition: opacity 120ms ease;
}

.sv-grid-column:hover .sv-grid-header-icon-hint {
  opacity: 0.4;
}

.sv-grid-header-icon-flag {
  color: var(--sg-accent, #0b63f3);
}

.sv-grid-col-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Collapse to zero width when invisible so a non-hovered column
     has no dead space at the right; the funnel (when an active
     filter is on) can then sit flush against the right edge.
     Hover / focus / open expand it back to 22px. */
  width: 0;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sg-muted, #5b6b85);
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition:
    width 140ms ease,
    opacity 140ms ease,
    background-color 120ms ease;
}

.sv-grid-column:hover .sv-grid-col-menu-btn,
.sv-grid-col-menu-btn.is-open,
.sv-grid-col-menu-btn:focus-visible {
  width: 22px;
  opacity: 1;
  pointer-events: auto;
}

/* The funnel filter button is a sibling .sv-grid-col-menu-btn that
   ALSO carries .sv-grid-col-filter-btn. When the column has an
   active filter (.is-active) the funnel stays visible at full size
   even when the column isn't hovered - so users can see at a glance
   which columns are filtered. Because the 3-dot menu still collapses
   to width: 0 in that state, the funnel ends up flush against the
   right edge. On hover, the menu expands back to 22px and pushes the
   funnel left naturally. */
.sv-grid-col-filter-btn.is-active {
  width: 22px;
  opacity: 1;
  pointer-events: auto;
}

.sv-grid-col-menu-btn:hover,
.sv-grid-col-menu-btn.is-open {
  background: var(--sg-row-hover-bg, #e2e8f3);
}

.sv-grid-filter-operator-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 4px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #334155);
  font-size: 13px;
  cursor: pointer;
}

.sv-grid-filter-operator-btn.is-open {
  border-color: var(--sg-accent, #0b63f3);
}

.sv-grid-caret {
  display: inline-flex;
  font-size: 9px;
  color: var(--sg-muted, #94a3b8);
}

.sv-grid-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: transparent;
}

.sv-grid-menu {
  position: fixed;
  z-index: 901;
  max-height: calc(100vh - 24px);
  overflow: auto;
  /* Keep a wheel that reaches the end of the menu from scrolling the grid
     underneath it - that scroll would close the menu out from under the user. */
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--sg-bg, #fff);
  border: 1px solid var(--sg-border, #d6dee9);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  color: var(--sg-fg, #1f2937);
}

.sv-grid-column-menu {
  width: 260px;
}
/* Column-menu tab bar (General / Filter / Columns). */
.sv-grid-menu-tabs {
  display: flex;
  gap: 2px;
  margin: -2px -2px 4px;
  padding: 2px 2px 0;
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
.sv-grid-menu-tab {
  flex: 1;
  padding: 6px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sv-grid-menu-tab:hover {
  color: var(--sg-fg, #0f172a);
}
.sv-grid-menu-tab.is-active {
  color: var(--sg-accent, #2563eb);
  border-bottom-color: var(--sg-accent, #2563eb);
}

.sv-grid-operator-menu {
  width: 184px;
}

.sv-grid-context-menu {
  min-width: 180px;
}

.sv-grid-comment-editor {
  width: 240px;
  padding: 8px;
}
.sv-grid-comment-textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  padding: 6px 8px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 4px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #0f172a);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.sv-grid-comment-textarea:focus {
  border-color: var(--sg-accent, #6366f1);
}
.sv-grid-comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.sv-grid-comment-spacer {
  flex: 1 1 auto;
}
.sv-grid-comment-actions button {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--sg-border, #cbd5e1);
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #1f2937);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sv-grid-comment-save {
  border-color: var(--sg-accent, #6366f1) !important;
  background: var(--sg-accent, #6366f1) !important;
  color: #fff !important;
}
.sv-grid-comment-remove {
  color: var(--sg-danger, #dc2626) !important;
}

.sv-grid-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sv-grid-menu-item:hover {
  background: var(--sg-row-hover-bg, #eef2f8);
}

/* In / Not-in value-suggestions dropdown (anchored under the chip input).
   Defined AFTER .sv-grid-menu so its tighter sizing wins - the element
   carries both classes. The rows come from SvListBox, which owns its own
   scrolling (windowed past ~40 values), so this is just the frame. */
.sv-grid-menu.sv-grid-in-suggest {
  min-width: 140px;
  max-width: 260px;
  padding: 0;
  overflow: visible;
  font-size: 12px;
}

.sv-grid-menu-item[aria-checked="true"] {
  background: var(--sg-selection-bg, #eaf2ff);
  color: var(--sg-accent, #0b63f3);
}

.sv-grid-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--sg-border, #e6ebf2);
}

.sv-grid-menu-filter {
  padding: 4px 6px 6px;
}

.sv-grid-menu-filter-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 6px;
  font-weight: 600;
  color: var(--sg-muted, #475569);
}

.sv-grid-menu-search {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 0 8px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  font: inherit;
}

.sv-grid-menu-filter-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.sv-grid-menu-operator-group {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}

.sv-grid-menu-operator-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 4px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #475569);
  cursor: pointer;
  transition:
    background-color 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.sv-grid-menu-operator-btn:hover {
  background: var(--sg-row-hover-bg, #eef2f8);
}

.sv-grid-menu-operator-btn.is-active {
  background: var(--sg-accent, #0b63f3);
  border-color: var(--sg-accent, #0b63f3);
  color: #fff;
}

.sv-grid-menu-condition-value {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  font: inherit;
}

/* Multi-condition filter: AND/OR join toggle + add-condition button. */
.sv-grid-menu-add-cond {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sg-accent, #3b82f6);
  background: transparent;
  border: 1px dashed var(--sg-border, #cbd5e1);
  border-radius: 5px;
  cursor: pointer;
}
.sv-grid-menu-add-cond:hover {
  background: color-mix(in oklab, var(--sg-accent, #3b82f6) 8%, transparent);
  border-style: solid;
}
.sv-grid-menu-join {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0;
}
.sv-grid-menu-join button {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sg-muted, #64748b);
  background: transparent;
  border: 1px solid var(--sg-border, #cbd5e1);
  cursor: pointer;
}
.sv-grid-menu-join button:first-child { border-radius: 5px 0 0 5px; }
.sv-grid-menu-join button:nth-child(2) { border-radius: 0; border-left: 0; }
.sv-grid-menu-join button.is-on {
  background: var(--sg-accent, #3b82f6);
  color: #fff;
  border-color: var(--sg-accent, #3b82f6);
}
.sv-grid-menu-join-x {
  margin-left: auto;
  border-radius: 5px !important;
  font-size: 14px;
  line-height: 1;
  padding: 2px 7px !important;
}

/* The value / column checklists are SvListBox instances (windowed past ~40
   rows). They draw their own box off the shared --sg-input-border/--sg-border
   tokens, so all the menu adds is scroll containment - without it a wheel past
   the end of a non-virtual list scrolls the page behind the popover, which
   closes it. */
.sv-grid-menu .sv-listbox {
  overscroll-behavior: contain;
}

.sv-grid-facet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.sv-grid-facet:hover {
  background: var(--sg-row-hover-bg, #f4f6fa);
}

/* Sits directly above the checklist, which draws its own frame - so no rule
   here, or the two borders stack. */
.sv-grid-facet-all {
  font-weight: 600;
  padding-inline-start: 3px;
}

.sv-grid-facet input {
  flex: none;
}

.sv-grid-facet-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-grid-facet-empty,
.sv-grid-facet-note {
  padding: 6px 8px;
  color: var(--sg-muted, #94a3b8);
  font-size: 12px;
}

.sv-grid-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 8px;
}

.sv-grid-menu-btn {
  padding: 5px 10px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #334155);
  font: inherit;
  cursor: pointer;
}

.sv-grid-menu-btn-primary {
  background: var(--sg-accent, #0b63f3);
  border-color: var(--sg-accent, #0b63f3);
  color: #fff;
}

.sv-grid-menu-item:disabled,
.sv-grid-menu-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sv-grid-menu-item:disabled:hover {
  background: transparent;
}

.sv-grid-group-row > .sv-grid-cell {
  background: var(--sg-header-bg, #eef2f8);
  font-weight: 600;
  cursor: pointer;
}

.sv-grid-row-selected > .sv-grid-cell {
  background: var(--sg-selection-bg, #eaf2ff);
}

/* Group subtotal row (`groupFooters`). Renders through the normal cell path so
   its totals sit under their own columns; a top rule + weight is what reads as
   "this closes the group above". Lighter than the banner on purpose - the
   banner opens a group, the footer just totals it. */
.sv-grid-group-footer-row > .sv-grid-cell {
  background: var(--sg-header-bg, #eef2f8);
  border-top: 1px solid var(--sg-border, #d7dce5);
  font-weight: 600;
}

/* Auto row height (`autoRowHeight`). The default cell truncates to one line
   (nowrap + ellipsis + overflow hidden), which would make a measured row height
   pointless - every row would measure the same. Let the text wrap so the row
   has something to grow to, and pad vertically since there is no fixed height
   centring the single line any more. */
.sv-grid-row-auto-height > .sv-grid-cell {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  padding-top: 6px;
  padding-bottom: 6px;
  /* Cells stretch to the row's height rather than centring on one line. */
  vertical-align: top;
}

/* Grand total (`grandTotalRow`). One step heavier than a group subtotal: it
   closes the whole dataset, not one group, so it takes a double top rule. */
.sv-grid-grand-total-row > .sv-grid-cell {
  border-top: 3px double var(--sg-border, #d7dce5);
  font-weight: 700;
}

/* Client tree data (`treeData`). The indent is a sized spacer rather than
   padding on the cell so conditional-format backgrounds and data bars still
   span the full cell width. */
.sv-grid-tree-indent {
  display: inline-block;
  flex: none;
}
.sv-grid-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  margin-right: 3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--sg-muted, #64748b);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.sv-grid-tree-toggle:hover {
  background: var(--sg-header-bg, #eef2f8);
  color: var(--sg-fg, #0f172a);
}
/* One chevron for every expander in the library - the grid's tree rows, its
   group banners and auto-group columns, SvGroupCell and SvTree all draw the
   same `chevron-right` and rotate it open, rather than swapping between two
   different glyphs. */
.sv-grid-tree-toggle .sv-grid-icon,
.sv-grid-group-toggle .sv-grid-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.sv-grid-tree-toggle[aria-expanded="true"] .sv-grid-icon,
.sv-grid-group-toggle[aria-expanded="true"] .sv-grid-icon {
  transform: rotate(90deg);
}
.sv-grid-tree-toggle:focus-visible {
  outline: 2px solid var(--sg-accent, #2563eb);
  outline-offset: 1px;
}
/* Auto-group column cell (`groupDisplayMode: singleColumn | multipleColumns`).
   The group row is an ordinary row here, so only the label needs weight - the
   full-width banner styling does not apply. */
.sv-grid-autogroup-label {
  font-weight: 600;
  color: var(--sg-fg, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keeps a childless row's value on the same x as its expandable siblings. */
.sv-grid-tree-spacer {
  display: inline-block;
  width: 14px;
  flex: none;
  margin-right: 3px;
}

.sv-grid-group-cell {
  padding: 0 12px;
}

.sv-grid-group-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sv-grid-group-toggle {
  border: 0;
  background: transparent;
  padding: 0 4px 0 0;
  font-size: 11px;
  line-height: 1;
  color: var(--sg-fg, #334155);
  cursor: pointer;
}

.sv-grid-group-count {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12px;
  color: var(--sg-muted, #64748b);
}
.sv-grid-group-agg {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sg-fg);
  white-space: nowrap;
}
.sv-grid-group-agg-label {
  font-weight: 400;
  color: var(--sg-muted, #64748b);
  margin-right: 4px;
}
.sv-grid-group-agg-label::after {
  content: ":";
}

.sv-grid-group-child-indent {
  display: inline-block;
  width: 18px;
}

/* ---- Custom hover tooltip (column .tooltip + cell notes) ---- */
.sv-grid-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 8px 10px;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: var(--sg-radius, 6px);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}
[data-theme="dark"] .sv-grid-tooltip { background: #f1f5f9; color: #0f172a; }

/* ---- Textarea editor ---- */
.sv-grid-cell-editor-textarea {
  width: 100%;
  min-height: 80px;
  padding: 6px 8px;
  border: 1px solid var(--sg-accent, #6366f1);
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  /* --sg-focus-ring is a COLOR everywhere else (`outline: 2px solid ...`).
     Consume it as one here too, rather than as a whole box-shadow value. */
  box-shadow: 0 0 0 2px var(--sg-focus-ring, rgba(99, 102, 241, 0.40));
}

.sv-grid-autocomplete {
  position: relative;
  width: 100%;
}
.sv-grid-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  max-height: 220px;
  overflow: auto;
  margin-top: 2px;
  padding: 4px;
  background: var(--sg-bg, #fff);
  border: 1px solid var(--sg-border, #d6dee9);
  border-radius: var(--sg-radius, 6px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.sv-grid-autocomplete-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sg-fg, #1f2937);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-grid-autocomplete-option:hover,
.sv-grid-autocomplete-option[aria-selected="true"] {
  background: var(--sg-row-hover-bg, rgba(99, 102, 241, 0.10));
}

/* ---- Find-in-grid overlay ---- */
.sv-grid-find {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
  border: 1px solid var(--sg-border, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  min-width: 280px;
}
.sv-grid-find-icon {
  width: 14px; height: 14px;
  color: var(--sg-muted, #94a3b8);
  flex: none;
  margin-left: 2px;
}
.sv-grid-find-input {
  flex: 1; min-width: 0;
  border: 0; outline: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  padding: 2px 6px;
}
.sv-grid-find-input::placeholder { color: var(--sg-muted, #94a3b8); }
.sv-grid-find-count {
  font-size: 11px;
  color: var(--sg-muted, #64748b);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  white-space: nowrap;
}
.sv-grid-find-step, .sv-grid-find-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  /* Same fixed-box + UA <button> padding trap as .sv-grid-checkbox: without
     this reset the 6px side padding squeezes the icon inside the 22px box. */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--sg-muted, #64748b);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.sv-grid-find-step:hover:not(:disabled),
.sv-grid-find-close:hover {
  background: var(--sg-row-hover-bg, rgba(148, 163, 184, 0.12));
  color: var(--sg-fg, #0f172a);
}
.sv-grid-find-step:disabled { opacity: 0.30; cursor: default; }

/* ---- Pagination footer (GridFooter.svelte) ------------------------------
   Ships with the grid so the pager is styled out of the box - previously this
   lived only in the examples' host stylesheet, leaving bare consumers with an
   unstyled pager. Uses --sg-* tokens with fallbacks like the rest of the theme. */
.sv-grid-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 12px 16px;
  margin-top: 0;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-top: 0;
  border-radius: 0 0 var(--sg-radius, 6px) var(--sg-radius, 6px);
  background: var(--sg-header-bg, #f1f5f9);
  color: var(--sg-fg, #0f172a);
  font-size: 13px;
}
/* Top-positioned pager: rounded + bordered on the top edge instead. */
.sv-grid-pagination-top {
  border-top: 1px solid var(--sg-border, #e2e8f0);
  border-bottom: 0;
  border-radius: var(--sg-radius, 6px) var(--sg-radius, 6px) 0 0;
}
.sv-grid-pagination-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sg-muted, #64748b);
}
.sv-grid-pagination-pagesize-dd {
  position: relative;
  height: 28px;
  min-width: 62px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  background: var(--sg-input-bg, #fff);
}
.sv-grid-pagination-pagesize-dd .sv-grid-dropdown,
.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger {
  background: transparent;
  border-radius: 5px;
  font-size: 13px;
  color: var(--sg-fg, #0f172a);
}
.sv-grid-pagination-pagesize-dd:focus-within {
  border-color: var(--sg-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
}
.sv-grid-pagination-range {
  color: var(--sg-fg, #0f172a);
}
.sv-grid-pagination-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sv-grid-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--sg-fg, #0f172a);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}
.sv-grid-pagination-btn:hover:not(:disabled) {
  background: var(--sg-input-bg, #fff);
  color: var(--sg-accent, #2563eb);
}
.sv-grid-pagination-btn:disabled {
  color: var(--sg-muted, #64748b);
  opacity: 0.4;
  cursor: default;
}
.sv-grid-pagination-label {
  margin: 0 8px;
  color: var(--sg-fg, #0f172a);
}

/* ---- Menu / filter chrome completeness -----------------------------------
   These styles previously lived only in the examples' host stylesheet. Shipping
   them here means the column menu, filter/choose-columns popovers, facet
   checklist, operator select, filter buttons, and the scrollbar corner are
   fully themed out of the box for any consumer - all via --sg-* tokens. */

/* Hide the scrollbar corner when its scrollbar is absent. */
.sv-grid-no-scroll .sv-grid-scrollbar-corner,
.sv-grid-no-scroll .sv-grid-scrollbar {
  display: none;
}
/* Scrollbar corner divider uses the theme border token. */
.sv-grid-scrollbar-corner,
.sv-grid-scrollbar-corner-br {
  border-bottom-color: var(--sg-border, #e2e8f0);
}

/* Filter operator <select> (the dropdown that replaced the radio group). */
.sv-grid-menu-operator-select {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  margin-bottom: 6px;
  border: 1px solid var(--sg-input-border, #cbd5e1);
  border-radius: 5px;
  background: var(--sg-input-bg, #fff);
  color: var(--sg-fg, #0f172a);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.sv-grid-menu-operator-select:focus {
  outline: none;
  border-color: var(--sg-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 40%, transparent);
}
/* Operator toggle button (active) uses the on-accent token. */
.sv-grid-menu-operator-btn.is-active {
  color: var(--sg-on-accent, #fff);
}

/* Filter-only + choose-columns popover widths. */
.sv-grid-filter-menu {
  width: 260px;
}
.sv-grid-choose-columns-menu {
  width: 240px;
}

/* Native checkbox on the "(Select all)" row picks up the theme accent. The
   checklist rows below it draw SvListBox's own box, not a native input. */
.sv-grid-facet input[type="checkbox"] {
  accent-color: var(--sg-accent, #2563eb);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Submenu right-chevron on the "Choose columns" item. */
.sv-grid-menu-item-chevron {
  margin-left: auto;
  transform: rotate(-90deg);
  opacity: 0.55;
}
.sv-grid-menu-item.is-open .sv-grid-menu-item-chevron {
  opacity: 1;
}

/* Magnifier prefix on the menu's search input. */
.sv-grid-menu-search {
  padding-left: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* Filter menu vertical rhythm. */
.sv-grid-menu-filter > * + * {
  margin-top: 6px;
}

/* Column-header filter (funnel) button tints accent when a filter is active. */
.sv-grid-col-filter-btn.is-active {
  color: var(--sg-accent, #2563eb);
}

/* Row-number gutter: neutralize the right border so it fuses with the header. */
.sv-grid-row-number-column,
.sv-grid-row-number-cell {
  border-right-color: var(--sg-header-bg, #f1f5f9);
}

/* Group row label colour. */
.sv-grid-group-row > .sv-grid-cell {
  color: var(--sg-header-fg, #0f172a);
}

/* Filter-row operator button: soften when idle, accent border on hover/open. */
.sv-grid-filter-operator-btn {
  opacity: 0.85;
}
.sv-grid-filter-operator-btn:hover {
  opacity: 1;
  border-color: var(--sg-accent, #2563eb);
}
.sv-grid-filter-operator-btn.is-open {
  opacity: 1;
}

/* Kanban board mode search box (board.searchable) */
.sv-grid-board-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 5px 9px;
  border: 1px solid var(--sg-border, #e4e7ec);
  border-radius: var(--sg-radius, 8px);
  background: var(--sg-bg, #fff);
  color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
  max-width: 280px;
}
.sv-grid-board-search:focus-within {
  border-color: var(--sg-accent, #3b82f6);
}
.sv-grid-board-search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  color: var(--sg-fg, #101828);
}

/* Placeholder shown when `scheduler` is set but the enterprise renderer that
   powers the calendar view has not been registered. */
.sv-grid-scheduler-upsell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: left;
  border: 1px dashed var(--sg-border, #e4e7ec);
  border-radius: var(--sg-radius, 8px);
  background: color-mix(in srgb, var(--sg-fg, #1f2937) 5%, transparent);
  color: color-mix(in srgb, var(--sg-fg, #101828) 70%, transparent);
}
.sv-grid-scheduler-upsell strong { font-size: 0.95rem; }
.sv-grid-scheduler-upsell p { margin: 0; font-size: 0.85rem; max-width: 42ch; }
.sv-grid-scheduler-upsell code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sg-fg, #101828) 8%, transparent);
}

/* ===================================================================
   Integrated chart panel (the `charting` prop)
   =================================================================== */
.sv-grid-chart-toggle svg { flex: none; }
.sv-grid-chart-panel {
  position: absolute;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--sg-bg, #fff);
  color: var(--sg-fg, #0f172a);
}
.sv-grid-chart-panel.is-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--sg-border, #e2e8f0);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.sv-grid-chart-panel.is-right {
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 1px solid var(--sg-border, #e2e8f0);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.sv-grid-chart-panel.is-floating {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: calc(var(--sg-radius, 6px) + 2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.sv-grid-chart-resizer {
  position: absolute;
  z-index: 1;
  background: transparent;
  touch-action: none;
}
.sv-grid-chart-panel.is-bottom > .sv-grid-chart-resizer { top: -3px; left: 0; right: 0; height: 7px; cursor: ns-resize; }
.sv-grid-chart-panel.is-right > .sv-grid-chart-resizer { left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.sv-grid-chart-resizer:hover,
.sv-grid-chart-resizer.is-dragging { background: color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent); }
.sv-grid-chart-float-resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--sg-muted, #64748b) 55%, transparent) 50%);
  border-bottom-right-radius: calc(var(--sg-radius, 6px) + 2px);
}
.sv-grid-chart-panel-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
  background: var(--sg-header-bg, #f8fafc);
}
.sv-grid-chart-drawer-title { display: flex; align-items: center; gap: 7px; }
.sv-grid-chart-drawer-title.is-drag-handle { cursor: move; user-select: none; }
.sv-grid-chart-title-icon { color: var(--sg-accent, #2563eb); flex: none; }
.sv-grid-chart-title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--sg-fg, #0f172a); }
.sv-grid-chart-drawer-title .sv-grid-chart-actions { margin-left: auto; }
.sv-grid-chart-actions { display: inline-flex; align-items: center; gap: 6px; }
.sv-grid-chart-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.sv-grid-chart-controls:empty { display: none; }
.sv-grid-chart-ctl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
.sv-grid-chart-ctl select {
  font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-fg, #0f172a);
  background: var(--sg-input-bg, var(--sg-bg, #fff));
  border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
  border-radius: var(--sg-radius, 6px); padding: 4px 8px;
}
.sv-grid-chart-toggle {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--sg-muted, #64748b); cursor: pointer; white-space: nowrap;
}
.sv-grid-chart-btn {
  font: inherit; font-size: 12px; font-weight: 550; padding: 5px 10px;
  border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
  background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer;
}
.sv-grid-chart-btn:hover:not(:disabled) { border-color: var(--sg-accent, #2563eb); color: var(--sg-accent, #2563eb); }
.sv-grid-chart-btn:disabled { opacity: 0.5; cursor: default; }
.sv-grid-chart-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid transparent; border-radius: var(--sg-radius, 6px); background: transparent;
  color: var(--sg-muted, #64748b); cursor: pointer;
}
.sv-grid-chart-icon-btn:hover { border-color: var(--sg-border, #e2e8f0); color: var(--sg-accent, #2563eb); background: var(--sg-bg, #fff); }
.sv-grid-chart-close { border: 0; background: transparent; color: var(--sg-muted, #64748b); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sv-grid-chart-close:hover { color: var(--sg-fg, #0f172a); }
.sv-grid-chart-panel-body {
  flex: 1; min-height: 0; padding: 4px 10px 8px; overflow: hidden;
  display: flex; align-items: stretch; justify-content: center;
}
.sv-grid-chart-panel-body > .sv-grid-chart { width: 100%; justify-content: center; }
.sv-grid-chart-empty { margin: 0; font-size: 13px; color: var(--sg-muted, #64748b); text-align: center; max-width: 42ch; }
/* Export menu */
.sv-grid-chart-export { position: relative; display: inline-flex; }
.sv-grid-chart-export-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; min-width: 150px; padding: 4px;
  display: flex; flex-direction: column; background: var(--sg-bg, #fff);
  border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sv-grid-chart-export-menu button {
  font: inherit; font-size: 12.5px; text-align: left; padding: 6px 10px; border: 0;
  border-radius: calc(var(--sg-radius, 6px) - 2px); background: transparent; color: var(--sg-fg, #0f172a); cursor: pointer; white-space: nowrap;
}
.sv-grid-chart-export-menu button:hover:not(:disabled) { background: var(--sg-hover-bg, color-mix(in srgb, var(--sg-accent, #2563eb) 10%, transparent)); }
.sv-grid-chart-export-menu button:disabled { opacity: 0.45; cursor: default; }
/* AI "chart this" */
.sv-grid-chart-ai-btn { display: inline-flex; align-items: center; gap: 4px; }
.sv-grid-chart-ai-btn.is-active { border-color: var(--sg-accent, #2563eb); color: var(--sg-accent, #2563eb); }
.sv-grid-chart-ai { display: flex; flex-direction: column; gap: 4px; }
.sv-grid-chart-ai-row { display: flex; gap: 6px; align-items: center; }
.sv-grid-chart-ai-input {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--sg-fg, #0f172a);
  background: var(--sg-input-bg, var(--sg-bg, #fff)); border: 1px solid var(--sg-input-border, var(--sg-border, #e2e8f0));
  border-radius: var(--sg-radius, 6px); padding: 5px 9px;
}
.sv-grid-chart-ai-input:focus { outline: none; border-color: var(--sg-accent, #2563eb); }
.sv-grid-chart-ai-msg { margin: 0; font-size: 12px; color: var(--sg-muted, #64748b); }
.sv-grid-chart-ai-msg.is-error { color: var(--sg-danger, #dc2626); }
/* Multi-chart tab strip */
.sv-grid-chart-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sv-grid-chart-tab { display: inline-flex; align-items: center; border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 6px); background: var(--sg-bg, #fff); overflow: hidden; }
.sv-grid-chart-tab.is-active { border-color: var(--sg-accent, #2563eb); background: color-mix(in srgb, var(--sg-accent, #2563eb) 10%, transparent); }
.sv-grid-chart-tab-label { font: inherit; font-size: 12px; font-weight: 600; color: var(--sg-fg, #0f172a); background: transparent; border: 0; padding: 3px 8px; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-grid-chart-tab.is-active .sv-grid-chart-tab-label { color: var(--sg-accent, #2563eb); }
.sv-grid-chart-tab-x { border: 0; background: transparent; color: var(--sg-muted, #64748b); font-size: 14px; line-height: 1; padding: 0 6px 0 2px; cursor: pointer; }
.sv-grid-chart-tab-x:hover { color: var(--sg-fg, #0f172a); }