/* Jspreadsheet CE ships its own hardcoded light-theme colors (see
   public/js/vendor/jspreadsheet-ce/jspreadsheet.css). This remaps its classes
   onto our --color-* tokens (public/css/styles.css) so the grid that replaces
   every <table class="table"> (public/js/table-grid.js) still follows the
   theme switch instead of staying stuck in light mode. */

:root {
  --jss-border-color: var(--color-accent);
}

.jss_container { background: transparent; }

.jss_worksheet {
  background-color: var(--color-neutral-100);
  color: var(--color-text);
  font-size: 13px;
}

.jss_worksheet > thead > tr > td {
  background-color: var(--color-neutral-300);
  border-top-color: var(--color-divider);
  border-left-color: var(--color-divider);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left !important;
}

/* public/js/table-grid.js (mergeFilterRow) hides Jspreadsheet's own filter
   row and appends one of these into each title cell instead, so title and
   filter glyph sit in the same header cell — title left, filter right. */
/* The visible glyph is 13px, but that's not a real click target — a 26px
   box keeps it comfortably tappable without crowding the title text next
   to it (columns already reserve room for this in table-grid.js). */
.grid-filter-icon {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: var(--color-neutral-700); cursor: pointer;
}
.grid-filter-icon:hover { color: var(--color-text); }

/* public/js/registry-grid.js (wireBulkActions): centers the bulk-select
   checkbox in its cell on both axes. column.align:center (buildGrid)
   already gets the cell's own text-align there; the rest is this wrapper,
   sized to fill the cell, rather than leaning on the cell's vertical-align
   — a checkbox is an inline box sitting on its line box's own baseline, so
   vertical-align only ever gets it *close*, and exactly how close depends
   on the row's height at that instant (font metrics still settling on a
   fresh load can shift it again after first paint). Flex doesn't have
   that dependency. */
.bulk-select-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* Jspreadsheet draws its own sort arrow as a background-image on the header
   cell, anchored 5px off the cell's right edge (jspreadsheet.css) — the same
   corner .grid-filter-icon sits in, so a sorted column showed the arrow
   drawn right underneath the filter glyph. Shifted left by the icon's own
   width plus its gap, so the two never share the same few pixels on any
   table the icon appears on. */
.jss_worksheet > thead > tr > td.arrow-up,
.jss_worksheet > thead > tr > td.arrow-down {
  background-position: center right 32px;
}

.jss_worksheet > thead > tr > td.selected,
.jss_worksheet > tbody > tr.selected > td:first-child {
  background-color: var(--color-neutral-400);
}

.jss_worksheet > tbody > tr > td:first-child {
  background-color: var(--color-neutral-200);
  color: var(--color-text);
}

.jss_worksheet > tbody > tr > td {
  border-top-color: var(--color-divider);
  border-left-color: var(--color-divider);
}

.jss_worksheet > tbody > tr > td.readonly { color: var(--color-neutral-700); }

/* public/js/registry-grid.js: the same "unsaved" highlight .cell-input's own
   is-changed class gives the real control underneath, applied to the grid
   cell standing in for it. */
.jss_worksheet > tbody > tr > td.grid-cell-changed {
  background-color: var(--color-accent-100);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.jss_worksheet > tbody > tr.dragging > td { background-color: var(--color-neutral-200); }

.jss_filter, .jss_toolbar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}

.jss_toolbar:empty { display: none; }

.jss_pagination > div > div { border-color: var(--color-divider); color: var(--color-text); }
.jss_page_selected { background-color: var(--color-neutral-300); }

.jss_content::-webkit-scrollbar-track { background: var(--color-neutral-200); }
.jss_content::-webkit-scrollbar-thumb { background: var(--color-neutral-600); }

/* The filter dropdown (jsuites' .jdropdown), opened from a header's
   .grid-filter-icon — same token set as the grid itself. */
.jdropdown-default .jdropdown-container,
.jdropdown-default .jdropdown-content {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-divider);
}
.jdropdown-item, .jdropdown-description { color: var(--color-text); }
.jdropdown-default .jdropdown-item:hover {
  background-color: var(--color-accent);
  color: var(--on-accent);
}
.jdropdown-close { color: var(--color-accent); }

/* jsuites' own default caps the value list at 215px regardless of how much
   room the screen actually has, so a column with dozens of distinct values
   (Email, Zip, First name…) scrolls through a tiny window even on a tall
   desktop display. Grown to a share of the viewport instead, capped so it
   never runs past the screen; the list still scrolls beyond that. */
.jdropdown-default .jdropdown-content { max-height: min(60vh, 520px); }