/* ========================================================================
   Color inputs (sidebar)
   ===================================================================== */

.connectivity-color-picker {
  width: calc(var(--space-12) + var(--space-0-5));
  height: var(--space-6);
  padding: 0;
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-sm);
  background: transparent;
  cursor: pointer;
}

/* ========================================================================
   Searchable gene dropdown
   ===================================================================== */

.searchable-dropdown {
  position: relative;
  width: 100%;
}

#gene-expression-row .searchable-dropdown {
  flex: 1;
  min-width: 0;
}

/* Dropdown list of genes */
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface-elevated);
  border: var(--border-default);
  border-top: none;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
}

.dropdown-item {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--type-control);
  cursor: pointer;
  border-bottom: var(--border-width-1) solid var(--color-border-faint);
}

.dropdown-item:last-child,
.dropdown-item:has(+ .dropdown-spacer:last-child) {
  border-bottom: none;
}

/* Stands for the entries of a windowed list that are not built
   (ui/components/windowed-listbox.js). */
.dropdown-spacer {
  margin: 0;
  padding: 0;
  border: none;
}

.dropdown-item:hover,
.dropdown-item.active {
  background: var(--color-border-light);
}

.dropdown-item.selected.active {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.dropdown-item.selected {
  background: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* An empty-state message is shown whole, not cut to a list's scroll height
   (`windowed-listbox.js` `showMessage`). */
.dropdown-list[data-message] {
  max-height: none;
  overflow-y: visible;
}

.dropdown-no-results {
  padding: var(--space-2) var(--space-2-5);
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* ========================================================================
   Data mapping (Session; the rest of the Session panel is _session.css)
   ===================================================================== */

/* Data mapping (Session, last group): a disclosure list -- the Embeddings
   checklist first, then the groups read from the file -- one status line,
   and Revert/Apply in one row. Spacing comes from the body's gap; the blocks
   inside carry no margins. */
.data-mapping-body {
  display: flex;
  flex-direction: column;
  gap: var(--control-row-gap);
}

/* One checklist row. First line: on/off, the representation's short name
   (cut with an ellipsis; the full key is its title), its dimension and, for
   an added selection, its remove button. A second line only while there is
   something on it: the Default toggle and "guessed" of a representation that
   is on, or why an array cannot be drawn. The editor -- dimension, a column
   per axis, Add columns -- opens under the row from its dimension button.
   An unchecked row is "not offered", not deleted, so its name is not struck
   through. */
.data-mapping-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
}

.data-mapping-row[data-disabled="true"] .list-item-text {
  text-decoration: none;
}

.data-mapping-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* The checklist is one list: rows sit flush, divided by a hairline, with no
   box of their own. The dimension chips line up at the right edge. */
.data-mapping-list {
  gap: 0;
  padding-block: var(--space-0-5);
}

.data-mapping-list .data-mapping-row,
.data-mapping-list .data-mapping-row:hover,
.data-mapping-list .data-mapping-row[data-disabled="true"] {
  padding-inline: 0;
  border: 0;
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  background: transparent;
}

.data-mapping-list .data-mapping-row:last-child,
.data-mapping-more .data-mapping-row:last-child {
  border-bottom: 0;
}

.data-mapping-row-main > .data-mapping-dim {
  margin-left: auto;
  min-width: var(--space-10);
  justify-content: space-between;
}

/* How wide a wide array is, quietly, under its name. */
.data-mapping-width {
  white-space: nowrap;
  font-size: var(--type-compact);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* "Other arrays": arrays wider than a 3D layout, or that cannot be drawn, collapsed at the end. */
.data-mapping-more > .disclosure-header {
  padding-block: var(--space-1);
}

.data-mapping-more > .disclosure-header > .disclosure-title {
  font-size: var(--type-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* A long name ("PCA scale0 latents 1,2,3") takes a second line rather than
   losing its columns to an ellipsis; past two lines it is cut, and the
   label's title holds the array key and columns. */
.data-mapping-row-main > .data-mapping-name {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: var(--leading-normal);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The remove button sits in the row's line, not over its corner. */
.data-mapping-row-main > .data-mapping-remove {
  flex: 0 0 auto;
}

.data-mapping-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  /* Under the name, past the checkbox. */
  padding-left: calc(var(--space-4) + var(--space-0-5));
}

.data-mapping-dim,
.data-mapping-tag {
  flex: 0 0 auto;
  font-size: var(--type-compact);
  line-height: var(--leading-tight);
  padding: var(--space-px) var(--space-1);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* The dimension of a representation whose columns can be chosen: a chip
   with the sidebar's disclosure chevron, opening the row's editor. */
.data-mapping-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-family: inherit;
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  cursor: pointer;
  transition: var(--transition-colors);
}

.data-mapping-edit::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-30%) rotate(45deg);
  opacity: var(--opacity-70);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.data-mapping-edit:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}

.data-mapping-edit[aria-expanded="true"] {
  background: var(--color-surface-tertiary);
  color: var(--color-text-primary);
}

.data-mapping-edit[aria-expanded="true"]::after {
  transform: translateY(30%) rotate(-135deg);
}

/* A fingertip needs more than the chip's text height. */
@media (pointer: coarse) {
  .data-mapping-edit {
    padding: var(--space-1) var(--space-2);
  }
}

.data-mapping-reason {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--type-compact);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Default": a toggle that is pressed on the one default of its dimension. */
.data-mapping-default {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--type-compact);
  line-height: var(--leading-tight);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.data-mapping-default[aria-pressed="true"] {
  background: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  opacity: 1;
  cursor: default;
}

.data-mapping-default:disabled:not([aria-pressed="true"]) {
  opacity: var(--opacity-45);
  cursor: not-allowed;
}

/* The editor: Dimension and Add columns on one line, then one column per
   axis, in three equal tracks, each select under its own label. */
.data-mapping-editor {
  padding-top: var(--space-1-5);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.data-mapping-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-1-5);
}

.data-mapping-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.data-mapping-field > .data-mapping-field-label {
  margin: 0 0 var(--space-0-5);
  font-size: var(--type-compact);
}

/* Narrow selects: the text keeps clear of the drawn chevron, and a column
   number of four digits still fits a third of the row. */
.data-mapping-field > select.obs-select {
  min-width: 0;
  padding-left: var(--space-1-5);
  padding-right: var(--space-5);
}

/* The axes keep their own line and track whatever the dimension. */
.data-mapping-axis-field {
  grid-row: 2;
}

.data-mapping-axis-field[data-axis="1"] {
  grid-column: 2;
}

.data-mapping-axis-field[data-axis="2"] {
  grid-column: 3;
}

.data-mapping-add {
  grid-row: 1;
  grid-column: 2 / -1;
  justify-self: end;
  max-width: 100%;
  white-space: nowrap;
}

/* Vector fields: one compact fieldset of checkboxes per embedding. */
.data-mapping-vector-list {
  display: flex;
  flex-direction: column;
  gap: var(--control-row-gap);
}

.data-mapping-vector-embedding {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.data-mapping-vector-embedding > legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--type-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.data-mapping-vector-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--type-label);
}

.data-mapping-vector-empty {
  margin: 0;
  font-size: var(--type-compact);
  color: var(--color-text-tertiary);
}

.data-mapping-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1-5);
}

/* Hidden inputs (triggered programmatically). */
.file-input-hidden {
  display: none;
}

/* Dataset select dropdown enhancements */
#dataset-select option {
  padding: var(--space-1) var(--space-2);
}

#dataset-select option:disabled {
  color: var(--color-text-tertiary);
}

/* ========================================================================
   Dimension Selector
   ===================================================================== */