/**
 * Tom Select v2.2.2
 * Enhanced CSS for Tom Select in Kidwell
 */

/* Base control styling to match inputs */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  cursor: pointer;
  height: 100%;
}

.ts-wrapper {
  min-height: 38px !important;
  display: block !important;
}

/* Ensure the control doesn't look like a multiple select */
.ts-wrapper .ts-control {
  display: flex !important;
  align-items: center !important;
}

/* Add a dropdown indicator for single select */
.ts-wrapper.single .ts-control::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.7;
}

[dir="rtl"] .ts-wrapper.single .ts-control::after {
  right: auto;
  left: 15px;
}

.ts-control {
  padding: 0.5rem 0.75rem !important;
  padding-right: 2rem !important; /* Provide space for dropdown icon */
  border-radius: 0.375rem !important;
  min-height: auto !important;
  border-color: rgb(209, 213, 219) !important;
  box-shadow: none !important;
  background-color: #fff !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
}

[dir="rtl"] .ts-control {
  padding-right: 0.75rem !important;
  padding-left: 2rem !important;
}

/* Focus state styling to match Tailwind */
.ts-control:focus,
.ts-wrapper.focus .ts-control {
  border-color: rgb(59, 130, 246) !important;
  box-shadow: 0 0 0 1px rgb(59, 130, 246) !important;
  outline: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Dropdown styling */
.ts-dropdown {
  border-radius: 0.375rem !important;
  border-color: rgb(209, 213, 219) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  max-height: 280px !important;
  z-index: 1000 !important;
}

/* Selected item styling */
.ts-dropdown .active {
  background-color: rgb(243, 244, 246) !important;
  color: rgb(17, 24, 39) !important;
  font-weight: 500 !important;
}

/* Dropdown option styling */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  transition: background-color 0.15s ease-in-out !important;
  font-size: 0.9rem !important;
}

.ts-dropdown .option:hover {
  background-color: rgb(243, 244, 246) !important;
}

/* No results and create styling */
.ts-dropdown .create,
.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem !important;
  color: rgb(107, 114, 128) !important;
  font-style: italic !important;
}

/* Input within control */
.ts-wrapper .ts-control > input {
  min-height: 24px !important;
  position: absolute !important; /* Change to absolute to not affect layout */
  opacity: 0 !important; /* Hide when not active */
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: calc(100% - 40px) !important; /* Ensure good width for typing */
}

/* Make input visible when dropdown is open */
.ts-wrapper.dropdown-active .ts-control > input {
  opacity: 1 !important;
  position: relative !important;
  flex: 1 !important;
  min-width: 100% !important; /* Ensure full width for typing */
}

/* Hide the selected item when dropdown is active */
.ts-wrapper.dropdown-active .ts-control > .item {
  display: none !important; /* Hide when dropdown is open */
}

/* Add more standard single-select appearance when dropdown is active */
.ts-wrapper.dropdown-active.single .ts-control {
  border-color: rgb(59, 130, 246) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0 0 1px rgb(59, 130, 246) !important;
}

/* Clear button styling */
.ts-wrapper.plugin-clear_button .clear-button {
  font-size: 14px !important;
  opacity: 0.5 !important;
  right: 30px !important; /* Move further right to make room for dropdown arrow */
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgb(107, 114, 128) !important;
  transition: opacity 0.15s ease !important;
  z-index: 1 !important;
}

[dir="rtl"] .ts-wrapper.plugin-clear_button .clear-button {
  right: auto !important;
  left: 30px !important;
}

.ts-wrapper.plugin-clear_button .clear-button:hover {
  opacity: 1 !important;
  color: rgb(239, 68, 68) !important;
}

/* Force single select styling */
.ts-wrapper.single.has-items .ts-control {
  padding: 0.5rem 0.75rem !important;
  display: flex !important; /* Use flex for better alignment */
  align-items: center !important;
  height: 38px !important; /* Fixed height to match standard inputs */
}

/* Remove any pill styling */
.ts-wrapper.single .ts-control .item {
  background-color: transparent !important;
  color: rgb(17, 24, 39) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  display: block !important;
  flex: 1 !important; /* Take available space */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: calc(100% - 35px) !important;
  vertical-align: middle !important;
}

/* Remove the multi-select styling */
.ts-wrapper.single .ts-control > div {
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Hide elements that make it look like multi-select */
.ts-wrapper.single .dropdown-active::before,
.ts-wrapper.single .dropdown-active::after,
.ts-wrapper.single .ts-control div:before,
.ts-wrapper.single .ts-control div:after,
.ts-wrapper.single .ts-control span:before,
.ts-wrapper.single .ts-control span:after {
  display: none !important;
}

/* RTL support is handled above */

/* Style placeholder for select - make it look like a placeholder, not an option */
.ts-control .item[data-value=""] {
  color: #9ca3af !important; /* Modern gray placeholder color */
  font-weight: 400 !important;
  opacity: 0.75 !important;
  font-size: 0.95rem !important;
}

/* Hide placeholder in dropdown list */
.ts-dropdown .option[data-value=""],
.ts-dropdown .placeholder-option {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Style the active search input */
.ts-wrapper.input-active .ts-control input {
  color: #374151 !important; /* Darker text for input */
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Focus state for dropdown */
.ts-dropdown .active {
  background-color: rgba(59, 130, 246, 0.1) !important; /* Light blue highlight */
  color: #1F2937 !important;
}

/* Hover state for dropdown items */
.ts-dropdown .option:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

/* Ensure the multi-select badge is never shown */
.ts-wrapper .item.active {
  background: transparent !important;
}

/* Override any remaining multi-select styles */
.ts-wrapper.multi .ts-control > div {
  background: none !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent focus outline addition that might make it look like multi */
.ts-wrapper.focus.single .ts-control {
  box-shadow: 0 0 0 1px rgb(59, 130, 246) !important;
  border-color: rgb(59, 130, 246) !important;
}

/* Keep cursor as pointer for the entire control to behave like a select */
.ts-control,
.ts-control input,
.ts-dropdown,
.ts-dropdown .option {
  cursor: pointer !important;
}

/* Improve option item appearance */
.ts-dropdown .option {
  line-height: 1.5 !important;
  font-size: 0.9rem !important;
}

/* Improve focus state on dropdown items */
.ts-dropdown .option:focus,
.ts-dropdown .option.active:focus {
  outline: none !important;
  background-color: rgb(239, 246, 255) !important; /* Light blue background */
}