/* Tom Select theme overrides — match FPSBench design tokens */

.ts-wrapper {
  width: 100%;
}

.ts-control {
  background: var(--color-background-secondary, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text-primary, #1e293b);
  padding: 10px 14px;
  font-size: var(--text-small, 0.875rem);
  min-height: unset;
}

.ts-control input {
  color: var(--color-text-primary, #1e293b);
  font-size: inherit;
}

.ts-control input::placeholder {
  color: var(--color-text-muted, #94a3b8);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 3px var(--color-primary-light, rgba(37, 99, 235, 0.1));
  outline: none;
}

.ts-dropdown {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.1));
  color: var(--color-text-primary, #1e293b);
  font-size: var(--text-small, 0.875rem);
  margin-top: 4px;
  z-index: var(--z-tooltip, 1000); /* dropdown renders at body level */
}

.ts-dropdown .ts-dropdown-content {
  max-height: 340px; /* default is 200px — too short for long hardware lists */
}

.ts-dropdown .option {
  padding: 9px 14px;
  color: var(--color-text-primary, #1e293b);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--color-surface-hover, #f8fafc);
  color: var(--color-text-primary, #1e293b);
}

.ts-dropdown .option.selected {
  background: var(--color-primary-light, rgba(37, 99, 235, 0.1));
  color: var(--color-primary, #2563eb);
}

.ts-dropdown .no-results {
  padding: 12px 14px;
  color: var(--color-text-muted, #94a3b8);
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
}

.ts-wrapper.disabled .ts-control {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark theme */
[data-theme="dark"] .ts-control {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .ts-control input {
  color: var(--color-text-primary);
}

[data-theme="dark"] .ts-dropdown {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

[data-theme="dark"] .ts-dropdown .option {
  color: var(--color-text-primary);
}

[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown .option.active {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

[data-theme="dark"] .ts-dropdown .option.selected {
  background: var(--color-primary-light);
  color: var(--color-primary);
}