/* Tom Select Custom Styling to match Tailwind inputs */

.ts-control {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
  border: 1px solid #d1d5db !important; /* border-gray-300 */
  border-radius: 0.375rem !important; /* rounded-md */
  background-color: white !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important; /* transition-colors */
  display: flex !important;
  align-items: center !important;
  min-height: 2.5rem !important; /* Matches standard input height with padding */
}

.ts-control.focus,
.ts-control.dropdown-active {
  outline: none !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)) !important; /* ring-indigo-500 */
  border-color: rgb(99 102 241) !important; /* border-indigo-500 */
}

.ts-control.has-error,
.ts-wrapper.has-error .ts-control {
  border-color: #ef4444 !important; /* border-red-500 */
}

.ts-control.has-error.focus,
.ts-control.has-error.dropdown-active,
.ts-wrapper.has-error .ts-control.focus,
.ts-wrapper.has-error .ts-control.dropdown-active {
  border-color: #ef4444 !important; /* focus:border-red-500 */
  outline: none !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)) !important; /* ring-red-500 */
}

.ts-control input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.ts-control input::placeholder {
  color: #9ca3af !important; /* placeholder-gray-400 */
}

/* Selected item styling */
.ts-control .item {
  font-size: 14px !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: center !important;
  color: #374151 !important; /* text-gray-700 */
  flex: 1 !important; /* Take full width */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

/* Single select: hide input when item is selected and closed */
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control input {
  position: absolute !important;
  left: -10000px !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Single select: show input when dropdown is active */
.ts-wrapper.single.dropdown-active .ts-control input {
  position: static !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* Hide selected item when dropdown is active (so user can search) */
.ts-wrapper.single.dropdown-active .ts-control .item {
  display: none !important;
}

/* Ensure input is visible and on top when typing */
.ts-wrapper.single.dropdown-active .ts-control {
  position: relative !important;
}

.ts-wrapper.single.dropdown-active .ts-control input {
  display: block !important;
  visibility: visible !important;
}

/* Dropdown styling */
.ts-dropdown {
  border: 1px solid #d1d5db !important; /* border-gray-300 */
  border-radius: 6px !important; /* rounded-md */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
  background-color: white !important;
  margin-top: 4px !important;
}

.ts-dropdown .ts-dropdown-content {
  padding: 4px !important;
}

.ts-dropdown .option {
  padding: 8px 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  min-height: 38px !important; /* Ensure consistent height */
  display: flex !important;
  align-items: center !important;
  color: #374151 !important; /* text-gray-700 */
}

/* Ensure empty option has proper height */
.ts-dropdown .option[data-value=""] {
  min-height: 38px !important;
}

.ts-dropdown .option[data-value=""]:before {
  content: "\00a0"; /* Non-breaking space to maintain height */
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #f3f4f6 !important; /* hover:bg-gray-100 */
  color: #111827 !important; /* hover:text-gray-900 */
}

.ts-dropdown .option.selected {
  background-color: #6366f1 !important; /* bg-indigo-600 */
  color: white !important;
}

/* Clear button styling */
.ts-control .clear-button {
  color: #9ca3af !important;
  padding: 2px !important;
  margin-right: 4px !important;
  display: none !important; /* Hidden by default */
}

.ts-control .clear-button:hover {
  color: #6b7280 !important;
}

/* Show clear button only when there's a value */
.ts-control.has-value .clear-button {
  display: inline-block !important;
}

/* Ensure proper cursor for clickable elements */
.ts-control {
  cursor: pointer !important;
}

/* Style for optgroup headers (like "All Roles") */
.ts-dropdown .optgroup-header {
  font-weight: 700; /* font-bold */
  color: #000000; /* black */
  background-color: #f9fafb; /* bg-gray-50 */
  cursor: default;
  font-size: 0.875rem; /* text-sm */
  padding: 0.5rem 0.75rem;
}

.ts-dropdown .optgroup:last-child .optgroup-header {
  border-bottom: none;
}

/* Fix weird line under suggested roles */
.ts-dropdown .optgroup {
  border: none !important;
}

.ts-dropdown .optgroup-header {
  margin-bottom: 0 !important;
}

/* Ensure placeholder is visible */
.ts-control .ts-control-input input:placeholder-shown {
  color: #9ca3af !important;
}

.ts-control .ts-control-input input:not([value=""]):not(:placeholder-shown) + .placeholder {
  display: none !important;
}

/* Fix empty state to show placeholder */
.ts-control:not(.has-items) .ts-control-input input::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Always show placeholder when no value is selected */
.ts-control .ts-control-input input {
  color: #9ca3af !important;
}

.ts-control .ts-control-input input:not(:focus):placeholder-shown {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Force placeholder visibility even when not focused */
.ts-control:not(.has-items):not(.focus) .ts-control-input input::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
  display: block !important;
}

/* Ensure the input shows placeholder text when empty */
.ts-control:not(.has-items) .ts-control-input input[placeholder]:not([value]) {
  color: #9ca3af !important;
}

/* Ensure relative positioning for pseudo-element */
.ts-control[data-controller~="contributor-role-select"] .ts-control-input {
  position: relative;
}

/* Custom placeholder using pseudo-element for contributor role select */
.ts-control[data-controller~="contributor-role-select"]:not(.has-items):not(.focus) .ts-control-input::before {
  content: "Search to add a Role";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  font-size: 14px;
  line-height: 1.25;
  z-index: 1;
}

/* Hide the pseudo-element when focused or has items */
.ts-control[data-controller~="contributor-role-select"].focus .ts-control-input::before,
.ts-control[data-controller~="contributor-role-select"].has-items .ts-control-input::before {
  display: none;
}

/* Match the exact styles of standard input fields for all Tom Select instances */
.ts-wrapper .ts-control {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
  font-size: 0.875rem !important; /* text-sm */
  border: 1px solid #d1d5db !important; /* border-gray-300 */
  border-radius: 0.375rem !important; /* rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important; /* transition-colors */
  background-color: white !important;
  outline: none !important;
}

.ts-wrapper .ts-control.focus,
.ts-wrapper .ts-control.dropdown-active {
  outline: none !important;
  outline-offset: 2px !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)) !important; /* ring-indigo-500 */
  border-color: rgb(99 102 241) !important; /* border-indigo-500 */
}

/* Error state overrides - must come after normal styles */
.ts-wrapper .ts-control.has-error {
  border-color: #ef4444 !important; /* border-red-500 */
}

.ts-wrapper .ts-control.has-error.focus,
.ts-wrapper .ts-control.has-error.dropdown-active {
  border-color: #ef4444 !important; /* focus:border-red-500 */
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)) !important; /* ring-red-500 */
}

.ts-wrapper .ts-control input::placeholder {
  color: #9ca3af !important; /* placeholder-gray-400 */
}