/**
 * Tom-select custom styles for Domus
 * Based on Tom Select default theme with Tailwind integration
 */

/* Import base Tom Select styles */
@import "tom-select/dist/css/tom-select.css";

/* Custom overrides to match Tailwind/application design */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
  border-color: rgb(209 213 219); /* border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}

.ts-wrapper.form-select .ts-control:focus,
.ts-wrapper.form-control .ts-control:focus {
  border-color: rgb(99 102 241); /* border-indigo-500 */
  outline: none;
  ring: 2px;
  ring-color: rgb(99 102 241 / 0.5); /* ring-indigo-500 with opacity */
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1);
}

/* Dropdown styling */
.ts-dropdown {
  border-color: rgb(209 213 219); /* border-gray-300 */
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  font-size: 0.875rem;
}

/* Options styling */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem;
}

.ts-dropdown .option.active {
  background-color: rgb(238 242 255); /* bg-indigo-50 */
  color: rgb(79 70 229); /* text-indigo-600 */
}

.ts-dropdown .option:hover {
  background-color: rgb(238 242 255);
  color: rgb(79 70 229);
}

.ts-dropdown .option.selected {
  background-color: rgb(224 231 255); /* bg-indigo-100 */
  color: rgb(67 56 202); /* text-indigo-700 */
  font-weight: 500;
}

/* Selected items (tags) for multi-select */
.ts-wrapper.multi .ts-control > div {
  background-color: rgb(224 231 255); /* bg-indigo-100 */
  border-color: rgb(199 210 254); /* border-indigo-200 */
  color: rgb(67 56 202); /* text-indigo-700 */
  border-radius: 0.25rem; /* rounded */
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
  margin: 0.125rem 0.25rem 0.125rem 0;
}

.ts-wrapper.multi .ts-control > div .remove {
  color: rgb(99 102 241); /* text-indigo-500 */
  border-left-color: rgb(199 210 254);
}

.ts-wrapper.multi .ts-control > div .remove:hover {
  background-color: rgb(199 210 254);
  color: rgb(55 48 163); /* text-indigo-800 */
}

/* Input field inside control */
.ts-wrapper .ts-control input {
  color: rgb(17 24 39); /* text-gray-900 */
  font-size: 0.875rem;
}

.ts-wrapper .ts-control input::placeholder {
  color: rgb(156 163 175); /* text-gray-400 */
}

/* Loading state */
.ts-wrapper.loading::after {
  border-top-color: rgb(99 102 241); /* indigo-500 */
}

/* No results message */
.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  color: rgb(107 114 128); /* text-gray-500 */
  font-size: 0.875rem;
}

/* Create option */
.ts-dropdown .create {
  padding: 0.5rem 0.75rem;
  color: rgb(79 70 229); /* text-indigo-600 */
  font-weight: 500;
}

.ts-dropdown .create:hover {
  background-color: rgb(238 242 255);
}