/**
 * tom-select-custom.css
 * Project-specific overrides for TomSelect (bootstrap5 theme).
 * Colors follow the soil design system (see docs/design.md): sienna secondary #944925.
 */

.ts-control .item {
    background-color: #944925 !important;
    color: #ffffff !important;
    border-color: #944925 !important;
}

.ts-control .item .remove {
    color: #ffffff !important;
    border-left-color: rgba(255,255,255,0.3) !important;
}

.ts-control .item .remove:hover {
    background-color: #773310 !important;
}

/* Dropdown highlight */
.ts-dropdown .option.selected,
.ts-dropdown .option:hover {
    background-color: #944925;
    color: #ffffff;
}

.ts-dropdown .option.active {
    background-color: #773310;
    color: #ffffff;
}

/* Focus ring matches the action blue used for interactive states */
.ts-control:focus-within,
.ts-wrapper.focus .ts-control {
    border-color: #3498DB !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

/* Keep height consistent with Bootstrap form-control */
.ts-wrapper .ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}


/* The bundled bootstrap5 theme paints the dropdown with var(--bs-body-bg),
   which no longer exists since Bootstrap was removed — solid surface: */
.ts-dropdown {
  background: #ffffff;
  border: 1px solid #cabeb3;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(75, 54, 33, 0.14);
  color: #33210d;
}
.ts-dropdown .option.active {
  background: #f4ece9;
  color: #33210d;
}