/* ---- Tom Select light/dark theme overrides ---- */
.ts-control {
  background-color: #ffffff !important;
  color: #0f172a !important;           /* slate-900 */
  border: 1px solid #cbd5e1 !important;/* slate-300 */
  border-radius: 0.75rem !important;
  min-height: 2.5rem;
}
.ts-control input { color: inherit !important; caret-color: #4f46e5; }
.ts-control .item {
  background-color: #eef2ff;           /* indigo-50 */
  color: #3730a3;                       /* indigo-800 */
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem;
}
.ts-dropdown {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important; /* gray-200 */
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  padding: .25rem 0;
}
.ts-dropdown .option { padding: .375rem .5rem; }
.ts-dropdown .active { background: #f1f5f9; } /* slate-100 */

/* Dark */
.dark .ts-control {
  background-color: #0f172a !important; /* slate-900 */
  color: #e2e8f0 !important;            /* slate-200 */
  border: 1px solid #475569 !important; /* slate-600 */
}
.dark .ts-control input { caret-color: #a5b4fc; } /* indigo-200 */
.dark .ts-control .item {
  background-color: rgba(99,102,241,.18); /* indigo-500 @ 18% */
  color: #c7d2fe;                          /* indigo-200 */
}
.dark .ts-dropdown {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;   /* slate-700 */
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.dark .ts-dropdown .active { background: #1f2937; } /* gray-800 */


/* --- Improve selected tag badges for light/dark themes --- */
.ts-control .item .remove {
  opacity: .8;
  margin-left: .375rem;
}
.ts-control .item .remove:hover { opacity: 1; }

/* Light */
.ts-control .item .remove { color: #3730a3; }           /* indigo-800 */
.ts-control .item { border: 1px solid rgba(79,70,229,.20); } /* indigo-500/20 */

/* Dark */
.dark .ts-control .item { border: 1px solid rgba(165,180,252,.25); } /* indigo-200/25 */
.dark .ts-control .item .remove { color: #a5b4fc; }       /* indigo-200 */


/* --- Stronger theme overrides for Tom Select badges (chips) --- */
.ts-control .item {
  background-color: #eef2ff !important;      /* light: indigo-50 */
  color: #3730a3 !important;                  /* light: indigo-800 */
  border: 1px solid rgba(79,70,229,.20) !important;
  border-radius: 9999px !important;
}
.dark .ts-control .item {
  background-color: rgba(99,102,241,.18) !important;  /* dark: indigo-500 @18% */
  color: #c7d2fe !important;                           /* dark: indigo-200 */
  border: 1px solid rgba(165,180,252,.25) !important;  /* dark: indigo-200/25 */
}
.ts-control .item .remove { color: #3730a3 !important; opacity:.85; }
.ts-control .item .remove:hover { opacity:1; }
.dark .ts-control .item .remove { color: #a5b4fc !important; }


/* --- Ensure Tom Select wrappers are boxed consistently (single & multi) --- */
.ts-wrapper { display:block; width:100%; }
.ts-wrapper .ts-control { width:100%; }

/* Padding to mimic input look */
.ts-control { padding: 0.375rem 0.5rem !important; } /* ~py-1 px-2 */

/* Single & Multi: consistent borders */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border-width: 1px !important;
  border-style: solid !important;
}

/* Dark theme strong mapping */
.dark .ts-wrapper .ts-control {
  background-color: #0f172a !important; /* slate-900 */
  color: #e2e8f0 !important;            /* slate-200 */
  border-color: #475569 !important;     /* slate-600 */
}

/* Focus state parity with inputs (inner control) — ring is on the outer field wrapper already */
.ts-wrapper .ts-control:focus {
  outline: none !important;
}