/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Prevent layout shift when scrollbar appears/disappears */
html {
  overflow-y: scroll;
}

/* ── Tom Select — DaisyUI theme integration ── */

/* Control (the select-like box) */
.ts-wrapper.single .ts-control {
  border: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border-radius: var(--radius-field, 0.25rem);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  height: calc(var(--size-field, 0.25rem) * 10);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  box-shadow: 0 1px color-mix(in oklab, var(--color-base-content) 10%, transparent) inset,
              0 -1px oklch(100% 0 0 / 0.05) inset;
  cursor: pointer;
}

/* Focus state — match DaisyUI input:focus */
.ts-wrapper.single.focus .ts-control {
  border-color: var(--color-base-content);
  outline: 2px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Dropdown arrow */
.ts-wrapper.single .ts-control::after {
  border-color: color-mix(in oklab, var(--color-base-content) 50%, transparent) transparent transparent transparent;
}

/* Search input inside control */
.ts-wrapper .ts-control input {
  color: var(--color-base-content);
  font-size: 0.875rem;
}

.ts-wrapper .ts-control > .item {
  color: var(--color-base-content);
}

/* Dropdown panel */
.ts-dropdown {
  border: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border-radius: var(--radius-field, 0.25rem);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  margin-top: 0.25rem;
  z-index: 50;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Dropdown options */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  opacity: 0.6;
}

/* Clear button plugin */
.ts-wrapper .clear-button {
  color: var(--color-base-content);
  opacity: 0.5;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

.ts-wrapper .clear-button:hover {
  opacity: 1;
}

/* Hide the loading spinner completely */
.spinner,
.spinner::after,
.ts-dropdown .spinner,
.ts-dropdown .spinner::after,
.ts-wrapper .spinner,
.ts-wrapper .spinner::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  animation: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
  position: absolute !important;
}

.ts-wrapper.loading .ts-control::after {
  animation: none !important;
}

@keyframes lds-dual-ring {
  0%, 100% { transform: none; }
}