/* Tom Select uses loadingClass on the wrapper — never use DaisyUI's `.loading` (name collision). */
.ts-wrapper.ts-is-loading {
  position: relative;
}

.ts-wrapper.ts-is-loading::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 9999px;
  animation: ts-loading-spin 0.65s linear infinite;
  pointer-events: none;
}

.ts-wrapper.ts-is-loading .ts-control {
  padding-right: 2.25rem;
}

/* Legacy/default Tom Select loading class — neutralize DaisyUI spinner if it slips through. */
.ts-wrapper.loading {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  animation: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ts-wrapper.loading::before {
  display: none !important;
}

.ts-wrapper {
  position: relative;
  width: 100%;
}

@keyframes ts-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.ts-control {
  @apply !bg-base-100;
}

/* Multi-select: strip DaisyUI fixed-height `.select` behavior and grow with tags. */
.ts-wrapper.multi,
.ts-wrapper.multi.select,
.ts-wrapper.ts-multi-field {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.select .ts-control,
.ts-wrapper.ts-multi-field .ts-control {
  height: auto !important;
  min-height: var(--size, 2.5rem) !important;
  max-height: 7.5rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 0.375rem !important;
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
  border-radius: var(--radius-field, 0.25rem) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--color-base-content) 20%, transparent) inset !important;
}

.ts-wrapper.multi.has-items .ts-control {
  padding-inline-end: 2rem !important;
}

.ts-wrapper.multi .ts-control > .item {
  margin: 0 !important;
  max-width: 100%;
}

.ts-wrapper.plugin-clear_button.multi .ts-control {
  --ts-pr-clear-button: 1.75rem;
}

.ts-wrapper.plugin-clear_button .clear-button {
  opacity: 0.45;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  font-size: 1.125rem;
  line-height: 1;
  right: 0.5rem;
}

.ts-wrapper.plugin-clear_button.focus.has-items .clear-button,
.ts-wrapper.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 0.85;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body > .ts-dropdown {
  position: fixed !important;
  margin-top: 0 !important;
}

.ts-dropdown .ts-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  font-size: 0.75rem;
}

.ts-dropdown .ts-bulk-actions button {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-secondary);
  font-weight: 600;
}

.ts-dropdown .ts-bulk-actions button:hover {
  text-decoration: underline;
}

.ts-dropdown .ts-bulk-divider {
  color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
}

.ts-control .item {
  @apply !bg-primary !text-primary-content !rounded-md !px-2 !py-1;
}

.optgroup .optgroup-header {
  @apply !font-semibold;
}

.optgroup .menu-item {
  @apply !px-6;
}