@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* === DARK THEME FOR TomSelect === */
/* Базовий (неактивний) стан */
.ts-wrapper {
  background-color: rgb(47, 47, 47) !important;  /* #2F2F2F */
  color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(55, 65, 81) !important;  /* gray-700 */
  border-radius: 0.375rem !important;
  min-height: 2.5rem !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
}

/* Текст усередині */
.ts-control {
  background: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1rem !important; /* трохи більший шрифт */
}

/* Активний стан (коли фокус або dropdown відкритий) */
.ts-wrapper.focus,
.ts-wrapper.input-active,
.ts-wrapper.dropdown-active {
  border-color: rgb(37, 99, 235) !important; /* синя рамка */
  box-shadow: 0 0 0 1px rgb(37, 99, 235) !important;
}

/* Стиль плейсхолдера */
.ts-control::placeholder,
.ts-wrapper.single .ts-control::before {
  color: rgb(156, 163, 175) !important; /* gray-400 */
  font-weight: 500 !important;          /* напівжирний */
  font-size: 0.95rem !important;        /* трохи більший */
  opacity: 1 !important;                /* щоб текст був чіткий */
}

/* Текст введений користувачем */
.ts-control input {
  color: rgb(255, 255, 255) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

/* Випадаючий список */
.ts-dropdown {
  background-color: rgb(47, 47, 47) !important; /* #2F2F2F — фон, як у поля */
  border: 1px solid rgb(55, 65, 81) !important; /* сіра рамка, як у полів */
  border-radius: 0.375rem !important; /* округлі кути */
  color: rgb(255, 255, 255) !important; /* білий текст */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Пункти у списку */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  color: rgb(255, 255, 255) !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* При наведенні */
.ts-dropdown .option:hover {
  background-color: rgb(37, 99, 235) !important; /* синій, як рамка при фокусі */
  color: rgb(255, 255, 255) !important;
}

/* === Підсвітка знайденого тексту (search match) === */
.ts-dropdown .highlight {
  background-color: rgba(37, 99, 235, 0.5) !important; /* напівпрозорий синій */
  color: rgb(255, 255, 255) !important;
  border-radius: 0.25rem;
  padding: 0 2px;
}

/* Вибрана опція */
.ts-dropdown .option.selected {
  background-color: rgb(37, 99, 235) !important;
  color: rgb(255, 255, 255) !important;
}

/* Якщо нічого не знайдено */
.ts-dropdown .no-results {
  padding: 0.75rem;
  color: rgb(156, 163, 175) !important; /* gray-400 */
  font-style: italic;
}

/* === Стиль скролбару (темний і акуратний) === */
.ts-dropdown::-webkit-scrollbar {
  width: 6px;
}
.ts-dropdown::-webkit-scrollbar-thumb {
  background-color: rgb(55, 65, 81); /* темно-сірий */
  border-radius: 3px;
}
.ts-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: rgb(37, 99, 235); /* синій при наведенні */
}