/* ========================================================================
   Field Operations UI
   - Field rename/delete buttons next to selects
   - InlineEditor input styling
   - Deleted Fields restoration block
   - Legend category rename affordance
   - Gene selected pill actions
   - CategoryBuilder + ConfirmDialog
   ===================================================================== */

/* ------------------------------------------------------------------------
   Field selector rows (Filtering accordion)
   --------------------------------------------------------------------- */

.field-selector-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.field-selector-row .obs-select {
  flex: 1 1 auto;
  min-width: 0;
}

.field-actions {
  display: inline-flex;
  gap: var(--space-0-5);
  align-items: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------
   InlineEditor input
   --------------------------------------------------------------------- */

.inline-rename-input {
  flex: 1 1 auto;
  min-width: 0;
}

.inline-rename-input[aria-invalid="true"] {
  --field-frame: var(--color-border-error);
  outline-color: var(--color-border-error);
}

/* ------------------------------------------------------------------------
   Deleted Fields section
   --------------------------------------------------------------------- */

.deleted-fields-section {
  margin-top: var(--space-1);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.deleted-fields-wrapper {
  margin-top: var(--space-1);
}

.deleted-fields-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.deleted-fields-list > .section-title {
  margin-top: var(--space-1-5);
}

.deleted-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-0-5) 0;
}

.deleted-field-name {
  font-size: var(--type-control);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.deleted-field-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------
   Legend: category rename
   --------------------------------------------------------------------- */

.legend-label.is-renamed {
  font-weight: var(--font-weight-semibold);
}

.legend-label.legend-label-draggable {
  cursor: grab;
}

.legend-label.legend-label-voting {
  cursor: pointer;
}

.legend-item.legend-item-dragging .legend-label.legend-label-draggable {
  cursor: grabbing;
  opacity: var(--opacity-80);
}

.legend-item.legend-item-drag-over {
  background: color-mix(in srgb, var(--color-border-light) 55%, transparent);
  outline: var(--border-width-2) dashed color-mix(in srgb, var(--color-border-strong) 45%, transparent);
  outline-offset: var(--space-0-5);
}

/* ------------------------------------------------------------------------
   Confirm dialog (destructive actions)
   --------------------------------------------------------------------- */

.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-surface-overlay);
  backdrop-filter: blur(2px);
}

.confirm-dialog {
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--color-surface-elevated);
  border: var(--border-default);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-none);
}

/* The header band and title are the shared dialog chrome (_modals.css). */
.confirm-dialog-body {
  padding: var(--control-dialog-padding);
  font-size: var(--type-control);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Messages are written with explicit line breaks; only the message keeps
   them, not the indentation of the dialog's own markup. */
.confirm-dialog-message {
  margin: 0;
  white-space: pre-line;
}

.confirm-dialog-input {
  margin-top: var(--control-block-gap);
}

.confirm-dialog-textarea-wrap {
  position: relative;
}

.confirm-dialog-textarea {
  min-height: 68px;
  padding-right: 6em;
}

.confirm-dialog-char-counter--overlay {
  position: absolute;
  right: var(--space-1);
  top: var(--space-1);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-readout);
  color: var(--color-text-tertiary);
  background: color-mix(in srgb, var(--color-surface-elevated) 85%, transparent);
  padding: 0 var(--space-0-5);
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-2-5);
  border-top: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

/* ------------------------------------------------------------------------
   Category builder
   --------------------------------------------------------------------- */

.cat-builder {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.cat-builder-dropzone {
  border: var(--border-width-1) dashed var(--color-border-control);
  background: var(--color-surface-secondary);
  padding: var(--space-2);
}

.cat-builder-dropzone.dragover {
  border-color: var(--color-border-focus);
  background: color-mix(in srgb, var(--color-interactive-primary) 8%, var(--color-surface-secondary));
}

.dropzone-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dropzone-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1-5);
  border: var(--border-width-1) solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xs);
}

.dropzone-item.dragging {
  opacity: var(--opacity-70);
}

.dropzone-item.drag-over {
  border-color: var(--color-border-focus);
  background: color-mix(in srgb, var(--color-interactive-primary) 8%, var(--color-surface-elevated));
}

.dropzone-item-handle {
  cursor: grab;
  color: var(--color-text-tertiary);
  -webkit-user-select: none;
  user-select: none;
}

.dropzone-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.dropzone-item-source {
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.dropzone-item-count {
  font-size: var(--type-compact);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  opacity: var(--opacity-70);
  white-space: nowrap;
}

.cat-builder-section {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.section-header {
  padding: var(--space-1) var(--space-1-5);
  border: var(--border-width-1) solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
}

.section-header.warning {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border-strong));
  background: color-mix(in srgb, var(--color-danger-soft) 60%, var(--color-surface-secondary));
}

.section-content {
  padding: var(--space-1-5);
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-top: none;
  background: var(--color-surface-elevated);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-2-5);
}

.radio-group > .section-title {
  flex-basis: 100%;
}

.cat-builder-overlap-extra {
  margin-top: var(--space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cat-builder-intersection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.cat-builder-intersection-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cat-builder-intersection-meta {
  font-size: var(--type-compact);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.cat-builder-intersection-input {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-builder-preview {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width-1) solid var(--color-border-subtle);
}

.preview-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.preview-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--type-control);
}

.preview-swatch {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 25%, transparent);
  background: var(--preview-swatch-color, var(--color-border-light));
  flex-shrink: 0;
}

.preview-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.preview-count {
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.preview-stats {
  margin-top: var(--space-1-5);
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

.cat-builder-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cat-builder-actions > .btn {
  flex: 1;
}

.cat-builder-add-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cat-builder-add-row > .obs-select {
  flex: 1;
  min-width: 0;
}