/*
 * 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.
 */

/* Override TomSelect styling to match regular inputs */
.ts-wrapper .ts-control {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: rgb(15 23 42) !important;
  background-color: white !important;
  background: white !important;
  background-image: none !important;
  border: 1px solid rgb(203 213 225) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  min-height: 0 !important;
  height: auto !important;
}

.ts-wrapper .ts-control .ts-input {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: rgb(15 23 42) !important;
}

.ts-wrapper .ts-control .item {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgb(15 23 42) !important;
}

.ts-wrapper.single .ts-control::after {
  border: none !important;
}

.ts-wrapper .ts-control:focus {
  outline: none !important;
  border-color: rgb(59 130 246) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.ts-wrapper .ts-control input::placeholder {
  color: rgb(148 163 184) !important;
}