/* Tom Select — Tailwind + Dark Mode Overrides */

/* ── Wrapper: dış kenarlığı kaldır, ts-control tek kenarlık olsun ── */
.ts-wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border: 1px solid #d1d5db !important; /* border-gray-300 */
  border-radius: 0.5rem !important; /* rounded-lg */
  padding: 0.625rem 1rem !important; /* px-4 py-2.5 */
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.25rem;
  background-color: transparent !important;
  /* Diğer input'larla aynı yükseklik: py-2.5 (20px) + text-sm line-height (20px) + border (2px) */
  min-height: 2.625rem !important;
  box-shadow: none !important;
}

.ts-wrapper.single .ts-control:focus-within,
.ts-wrapper.multi .ts-control:focus-within {
  border-color: var(--color-brand-500, #465fff) !important;
  box-shadow: 0 0 0 1px var(--color-brand-500, #465fff) !important;
  outline: none !important;
}

/* Caret (ok) ikonu */
.ts-wrapper.single .ts-control::after {
  border-color: #9ca3af transparent transparent transparent;
  margin-top: -2px;
}

/* ── Dropdown ── */
.ts-dropdown {
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
  font-size: 0.875rem !important;
  margin-top: 4px !important;
  z-index: 9999 !important;
  overflow: hidden;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 240px;
  padding: 0;
}

.ts-dropdown .option {
  padding: 0.5rem 1rem;
}

.ts-dropdown .option.active {
  background-color: var(--color-brand-500, #465fff) !important;
  color: #fff !important;
}

.ts-dropdown .option:not(.active):hover {
  background-color: #f3f4f6; /* bg-gray-100 */
}

/* Dropdown ici arama inputu */
.ts-dropdown .dropdown-input-wrap {
  padding: 0 !important;
  border-bottom: 1px solid #e5e7eb;
}

.ts-dropdown .dropdown-input {
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* No results */
.ts-no-results {
  padding: 0.5rem 1rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* ── Multi-select tags ── */
.ts-wrapper.multi .ts-control .item {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: #1e40af;
  margin: 0 0.25rem 0 0;
}

.ts-wrapper .item .remove {
  border-left: 1px solid #bfdbfe;
  margin-left: 0.25rem;
}

/* ═══════════════════════════════════════ */
/* ── Dark Mode ──                        */
/* ═══════════════════════════════════════ */

.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #374151 !important; /* border-gray-700 */
  color: #fff !important;
}

.dark .ts-wrapper .ts-control input {
  color: #fff !important;
}

.dark .ts-wrapper.single .ts-control::after {
  border-color: #6b7280 transparent transparent transparent;
}

.dark .ts-dropdown {
  background-color: #1f2937 !important; /* bg-gray-800 */
  border-color: #374151 !important;
}

.dark .ts-dropdown .dropdown-input-wrap {
  border-bottom-color: #374151;
}

.dark .ts-dropdown .dropdown-input {
  color: #fff !important;
}

.dark .ts-dropdown .option {
  color: #e5e7eb;
}

.dark .ts-dropdown .option:not(.active):hover {
  background-color: #374151;
}

.dark .ts-dropdown .option.active {
  background-color: var(--color-brand-500, #465fff) !important;
  color: #fff !important;
}

.dark .ts-wrapper.multi .ts-control .item {
  background-color: #1e3a5f !important;
  border-color: #2563eb !important;
  color: #93c5fd;
}

.dark .ts-wrapper .item .remove {
  border-color: #2563eb;
}

.dark .ts-no-results {
  color: #6b7280;
}

/* ═══════════════════════════════════════ */
/* ── Action Container (+  butonu)        */
/* ═══════════════════════════════════════ */

.ts-action-container {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.ts-action-container .ts-wrapper {
  flex: 1;
  min-width: 0;
}

.ts-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.ts-add-btn:hover {
  border-color: var(--color-brand-500, #465fff);
  color: var(--color-brand-500, #465fff);
  background-color: #f0f4ff;
}

.dark .ts-add-btn {
  background-color: #111827;
  border-color: #374151;
  color: #9ca3af;
}

.dark .ts-add-btn:hover {
  border-color: var(--color-brand-500, #465fff);
  color: var(--color-brand-500, #465fff);
  background-color: #1e2a4a;
}