/* Global Styles for Select Elements */
select,
.filter-select,
.form-control select,
.filter-control {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(108, 92, 231, 0.3) !important;
  transition: all 0.3s ease !important;
}

select option,
.filter-select option,
.form-control option,
.filter-control option {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Custom styling for dropdown arrow */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c5ce7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 15px !important;
  padding-right: 30px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Focus state */
select:focus,
.filter-select:focus,
.form-control:focus,
.filter-control:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.3) !important;
}

/* Hover state */
select:hover,
.filter-select:hover,
.form-control select:hover,
.filter-control:hover {
  border-color: var(--primary) !important;
}