/* Tom Select - Native-like styling (no wrapper UI) */

/* Disable all animations and transitions */
.ts-wrapper,
.ts-wrapper *,
.ts-control,
.ts-control *,
.ts-dropdown,
.ts-dropdown * {
  animation: none !important;
  transition: none !important;
}

/* Reset wrapper to look like native select */
.ts-wrapper.single {
  display: block;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove wrapper border completely */
.ts-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide the original select element */
.ts-wrapper + select,
select.tomselected {
  display: none !important;
}

/* Remove any inner borders */
.ts-wrapper .ts-control > * {
  border: none !important;
}

/* Remove focus ring on wrapper */
.ts-wrapper.focus,
.ts-wrapper:focus,
.ts-wrapper:focus-within {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ts-wrapper.single .ts-control {
  background-color: rgb(249 250 251) !important; /* bg-gray-50 */
  border: 1px solid rgb(209 213 219) !important; /* border-gray-300 */
  border-radius: 0.5rem !important; /* rounded-lg */
  padding: 0.5rem 2.5rem 0.5rem 0.75rem !important; /* py-2 px-3 to match inputs */
  font-size: 0.875rem !important; /* text-sm */
  cursor: pointer !important;
  box-shadow: none !important;

  /* Native select arrow */
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 0.75em 0.75em !important;
}

.ts-wrapper.single .ts-control:focus,
.ts-wrapper.single.focus .ts-control {
  border-color: rgb(59 130 246) !important; /* border-blue-500 */
  outline: none !important;
  box-shadow: none !important;
}

/* Hide all pseudo elements */
.ts-wrapper .ts-control:after,
.ts-wrapper .ts-control:before,
.ts-wrapper .ts-control::after,
.ts-wrapper .ts-control::before {
  display: none !important;
  content: none !important;
}

/* Hide inline input when using dropdown_input plugin */
.ts-wrapper .ts-control input {
  display: none !important;
}

/* Item display */
.ts-wrapper .ts-control .item {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  color: rgb(17 24 39) !important; /* text-gray-900 */
}

/* Clear button - position on the right before the arrow */
.ts-wrapper .clear-button {
  position: absolute !important;
  right: 1.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: rgb(156 163 175) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  width: 1rem !important;
  height: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
}

.ts-wrapper .clear-button:hover {
  color: rgb(75 85 99) !important; /* text-gray-600 */
}

/* Dropdown styling */
.ts-dropdown {
  background: white !important;
  border: 1px solid rgb(229 231 235) !important; /* border-gray-200 */
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  margin-top: 0.25rem !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
}

/* Dropdown search input */
.ts-dropdown .dropdown-input-wrap {
  padding: 0.5rem !important;
  border-bottom: 1px solid rgb(229 231 235) !important;
}

.ts-dropdown .dropdown-input {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  border: 1px solid rgb(209 213 219) !important;
  border-radius: 0.375rem !important;
  outline: none !important;
}

.ts-dropdown .dropdown-input:focus {
  border-color: rgb(59 130 246) !important;
  box-shadow: none !important;
  outline: none !important;
}

.ts-dropdown .ts-dropdown-content {
  padding: 0.25rem 0 !important;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: rgb(55 65 81) !important; /* text-gray-700 */
  cursor: pointer !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: rgb(243 244 246) !important; /* bg-gray-100 */
}

.ts-dropdown .option.selected {
  background-color: rgb(239 246 255) !important; /* bg-blue-50 */
  color: rgb(29 78 216) !important; /* text-blue-700 */
}

.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: rgb(107 114 128) !important;
  text-align: center !important;
}

/* Hide any SVG icons from Tom Select */
.ts-wrapper svg,
.ts-wrapper .ts-control svg {
  display: none !important;
}

/* Remove loading spinner/states */
.ts-wrapper.loading .ts-control::after,
.ts-wrapper .spinner {
  display: none !important;
}

/* Ensure stable height - prevent bouncing */
.ts-wrapper.single .ts-control {
  line-height: 1.25rem !important; /* Match text-sm line-height */
  min-height: 2.375rem !important; /* 38px - matches input height */
  display: flex !important;
  align-items: center !important;
}

/* Remove any extra padding/margin that causes layout shift */
.ts-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Placeholder styling when no value selected */
.ts-wrapper.single .ts-control .ts-placeholder {
  color: rgb(156 163 175) !important; /* text-gray-400 */
  opacity: 1 !important;
}

/* Ensure placeholder shows when empty */
.ts-wrapper.single .ts-control:empty::before {
  content: attr(data-placeholder);
  color: rgb(156 163 175) !important;
}