/* Tom Select Global Theme Overrides
   Cyber-Industrial / Acid Yellow theme compatibility
*/

/* Wrapper */
.ts-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Trigger / control box */
.ts-wrapper .ts-control {
  background-color: var(--brand-elevated, #252830) !important;
  border: 1px solid var(--brand-border, rgba(255,255,255,0.07)) !important;
  border-radius: 8px !important;
  color: var(--on-surface, #ffffff) !important;
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
}

/* Focus state on wrapper */
.ts-wrapper.focus .ts-control {
  border-color: var(--brand-yellow, #ffd800) !important;
  box-shadow: 0 0 0 1px var(--brand-yellow, #ffd800) !important;
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* The text inside the trigger */
.ts-wrapper .ts-control input {
  color: var(--on-surface, #ffffff) !important;
  font-size: 0.875rem !important;
}
.ts-wrapper .ts-control input::placeholder {
  color: var(--brand-muted, #959595) !important;
}

/* Selected item tag (multi-select) */
.ts-wrapper.multi .ts-control .item {
  background-color: var(--brand-surface, #1C1E14) !important;
  border: 1px solid var(--brand-border, rgba(255,255,255,0.07)) !important;
  color: var(--on-surface, #ffffff) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 0.8rem !important;
}

/* Remove button on tag (multi-select) */
.ts-wrapper .ts-control .item .remove {
  color: var(--brand-muted, #959595) !important;
  border-left-color: var(--brand-border, rgba(255,255,255,0.07)) !important;
}
.ts-wrapper .ts-control .item .remove:hover {
  color: var(--error, #ffb4ab) !important;
  background-color: rgba(255,0,0,0.1) !important;
}

/* Dropdown open arrow chevron */
.ts-wrapper.single .ts-control::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: var(--brand-muted, #959595) transparent transparent transparent;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--brand-yellow, #ffd800) transparent;
}

/* The dropdown panel container */
.ts-dropdown {
  background-color: var(--brand-elevated, #252830) !important;
  border: 1px solid var(--brand-border, rgba(255,255,255,0.07)) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
  color: var(--on-surface, #ffffff) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

/* Search input inside dropdown */
.ts-dropdown .ts-dropdown-content {
  max-height: 250px !important;
}
.ts-dropdown .dropdown-input-wrap {
  padding: 8px !important;
}
.ts-dropdown .dropdown-input {
  background-color: var(--brand-surface, #1C1E14) !important;
  border: 1px solid var(--brand-border, rgba(255,255,255,0.07)) !important;
  color: var(--on-surface, #ffffff) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
.ts-dropdown .dropdown-input:focus {
  border-color: var(--brand-yellow, #ffd800) !important;
  outline: none !important;
}

/* Individual option items */
.ts-dropdown .option {
  padding: 10px 16px !important;
  color: var(--on-surface, #ffffff) !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.1s ease-in-out !important;
}

/* Hovered option */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--brand-surface, #1C1E14) !important;
  color: var(--brand-yellow, #ffd800) !important;
}

/* Currently selected option in list */
.ts-dropdown .option.selected {
  background-color: var(--surface-container-highest, #343535) !important;
  color: var(--brand-yellow, #ffd800) !important;
  font-weight: 600 !important;
}

/* No results message */
.ts-dropdown .no-results {
  padding: 10px 16px !important;
  color: var(--brand-muted, #959595) !important;
  font-style: italic !important;
}

/* Fix plugin checkbox styles */
.ts-dropdown .option .ts-checkbox {
  margin-right: 8px;
}