/* tom-select-overrides.css
 * Переопределения Tom Select под палитру RopMe
 * Базовый CSS: tom-select.css (дефолтный, не трогаем)
 * Здесь только визуальные override-ы: цвета, бордеры, тени
 */

/* === Remove double border on wrapper === */
.ts-wrapper {
  border: none;
  padding: 0;
}

/* === Trigger (closed state) === */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  background-color: #fff;
  box-shadow: none;
  min-height: 38px;
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
  background-color: #f9fafb; /* gray-50 */
}

.ts-wrapper.focus .ts-control {
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); /* ring-2 ring-blue-500 */
}

/* === Dropdown panel === */
.ts-dropdown {
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  margin-top: 0.25rem;
}

/* === Dropdown options === */
.ts-dropdown .option {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: #374151; /* gray-700 */
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #f9fafb; /* gray-50 */
  color: #374151;
}

.ts-dropdown .option.selected {
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8; /* blue-700 */
}

/* === Search input inside dropdown === */
.ts-dropdown .ts-dropdown-content {
  max-height: 200px;
}

.ts-wrapper .ts-control > input {
  font-size: 0.875rem;
  color: #374151;
}

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

/* === Multi-select tags === */
.ts-wrapper.multi .ts-control > .item {
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8; /* blue-700 */
  border: 1px solid #bfdbfe; /* blue-200 */
  border-radius: 0.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
}

.ts-wrapper.multi .ts-control > .item .remove {
  color: #60a5fa; /* blue-400 */
  border-left-color: #bfdbfe; /* blue-200 */
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
  color: #2563eb; /* blue-600 */
  background-color: #dbeafe; /* blue-100 */
}

/* === Checkbox plugin styling === */
.ts-dropdown .option input[type="checkbox"] {
  border-radius: 0.25rem;
  border-color: #d1d5db; /* gray-300 */
  color: #2563eb; /* blue-600 */
  margin-right: 0.5rem;
}

/* === Disabled state === */
.ts-wrapper.disabled .ts-control {
  background-color: #f9fafb; /* gray-50 */
  opacity: 0.7;
  cursor: not-allowed;
}

/* === No results message === */
.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #9ca3af; /* gray-400 */
}

/* === Placeholder text === */
.ts-wrapper.single .ts-control .item {
  color: #374151; /* gray-700 */
}

/* === Dropdown z-index: выше sticky headers (z-10, z-20) === */
.ts-dropdown {
  z-index: 50 !important;
}