/* Select2 styles aligned with design tokens (light/dark aware). */

/* ------------------------------------------------------------------
   Shared account-select base
   ------------------------------------------------------------------ */

#swap-modal .select2-selection--single,
#account-switcher-modal .select2-selection--single,
.select2-container--account-clean .select2-selection--single,
#customer-select {
  min-height: 3rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

#swap-modal .select2-selection--single,
#account-switcher-modal .select2-selection--single,
.select2-container--account-clean .select2-selection--single {
  padding: 0.625rem 0.875rem !important;
}

#customer-select {
  padding: 0.75rem 0.875rem !important;
}

#swap-modal .select2-selection--single:hover,
#account-switcher-modal .select2-selection--single:hover,
.select2-container--account-clean .select2-selection--single:hover,
#customer-select:hover {
  border-color: color-mix(in oklab, var(--border) 65%, var(--foreground) 35%) !important;
}

#swap-modal .select2-container--focus .select2-selection--single,
#account-switcher-modal .select2-container--focus .select2-selection--single,
.select2-container--account-clean.select2-container--focus .select2-selection--single,
#customer-select:focus {
  border-color: var(--ring) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent) !important;
}

#swap-modal .select2-selection--single .select2-selection__rendered,
#account-switcher-modal .select2-selection--single .select2-selection__rendered,
.select2-container--account-clean .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--foreground) !important;
  line-height: 1.5 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

#swap-modal .select2-selection--single .select2-selection__placeholder,
#account-switcher-modal .select2-selection--single .select2-selection__placeholder,
.select2-container--account-clean .select2-selection--single .select2-selection__placeholder {
  color: var(--muted-foreground) !important;
}

/* Keep account selects clean: text only, no internal icons */
#swap-modal .select2-selection__clear,
#account-switcher-modal .select2-selection__clear,
#swap-modal .select2-selection--single .select2-selection__arrow,
#account-switcher-modal .select2-selection--single .select2-selection__arrow,
.select2-container--account-clean .select2-selection__clear,
.select2-container--account-clean .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

/* ------------------------------------------------------------------
   Dropdown surface (modal + static account select)
   ------------------------------------------------------------------ */

#swap-modal,
#account-switcher-modal,
.select2-dropdown--account-clean {
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  box-shadow: 0 12px 24px rgba(15, 15, 19, 0.12) !important;
  overflow: hidden !important;
  margin-top: 0.375rem !important;
}

.dark #swap-modal,
.dark #account-switcher-modal,
.dark .select2-dropdown--account-clean {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36) !important;
}

#swap-modal .select2-search,
#account-switcher-modal .select2-search,
.select2-dropdown--account-clean .select2-search {
  padding: 0.625rem !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--card) !important;
}

#swap-modal .select2-search__field,
#account-switcher-modal .select2-search__field,
.select2-container--account-clean .select2-search__field {
  width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

#swap-modal .select2-search__field::placeholder,
#account-switcher-modal .select2-search__field::placeholder,
.select2-container--account-clean .select2-search__field::placeholder {
  color: var(--muted-foreground) !important;
}

#swap-modal .select2-search__field:focus,
#account-switcher-modal .select2-search__field:focus,
.select2-container--account-clean .select2-search__field:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 22%, transparent) !important;
  outline: none !important;
}

#swap-modal .select2-results__option,
#account-switcher-modal .select2-results__option,
.select2-dropdown--account-clean .select2-results__option {
  padding: 0.625rem 0.75rem !important;
  color: var(--foreground) !important;
  font-size: 0.875rem !important;
}

#swap-modal .select2-results__option--highlighted,
#account-switcher-modal .select2-results__option--highlighted,
.select2-dropdown--account-clean .select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

#swap-modal .select2-results__option--selected,
#account-switcher-modal .select2-results__option--selected,
.select2-dropdown--account-clean .select2-results__option--selected {
  background: color-mix(in oklab, var(--primary) 16%, var(--popover)) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

#swap-modal .select2-results__option--disabled,
#account-switcher-modal .select2-results__option--disabled,
.select2-dropdown--account-clean .select2-results__option--disabled {
  color: var(--muted-foreground) !important;
}

/* ------------------------------------------------------------------
   Campaign states multi-select (clean + token-based)
   ------------------------------------------------------------------ */

.select2-container--states-clean .select2-selection--multiple {
  min-height: 3rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  padding: 0.375rem 0.5rem !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

.select2-container--states-clean .select2-selection--multiple:hover {
  border-color: color-mix(in oklab, var(--border) 65%, var(--foreground) 35%) !important;
}

.select2-container--states-clean.select2-container--focus .select2-selection--multiple {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent) !important;
}

.select2-container--states-clean .select2-selection--multiple .select2-search__field {
  margin-top: 0 !important;
  color: var(--foreground) !important;
  font-size: 0.875rem !important;
}

.select2-container--states-clean .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--muted-foreground) !important;
}

.select2-container--states-clean .select2-selection__choice {
  margin-top: 0.25rem !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.select2-container--states-clean .select2-selection__choice__remove,
.select2-container--states-clean .select2-selection__clear {
  display: none !important;
}

.select2-dropdown--states-clean {
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  box-shadow: 0 12px 24px rgba(15, 15, 19, 0.12) !important;
  overflow: hidden !important;
  margin-top: 0.375rem !important;
}

.dark .select2-dropdown--states-clean {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36) !important;
}

.select2-dropdown--states-clean .select2-results__option {
  padding: 0.625rem 0.75rem !important;
  color: var(--foreground) !important;
  font-size: 0.875rem !important;
}

.select2-dropdown--states-clean .select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.select2-dropdown--states-clean .select2-results__option--selected {
  background: color-mix(in oklab, var(--primary) 16%, var(--popover)) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

/* Native fallback option colors */
#customer-select option {
  background: var(--card) !important;
  color: var(--foreground) !important;
}