/* Панель фильтров операций */
.operation-filters-panel {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  align-items: center;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--background-alt);
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-lg);
}

.filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.operation-filter-select {
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  /* padding: 0.25rem 1.5rem 0.25rem 0.6rem; */
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  /* appearance: none; */
  /* -webkit-appearance: none; */
  /* Кастомная стрелка, чтобы не ломать дизайн */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.8rem;
}

/* Hover как у .operation-filter:hover */
.operation-filter-select:hover {
  color: var(--primary-hover);
  background-color: transparent;
}

.operation-filter-select:focus {
  background-color: var(--background-alt);
  outline: none;
}

/* Опции внутри select – стандартные, можно слегка подправить */
.operation-filter-select option {
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
}

/* Активное состояние (когда выбран фильтр) – добавляется классом .active через JS */
.operation-filter-select.active {
  /* background: var(--gradient-primary-button); */
  /* background: var(--primary-filtr); */
  background: var(--background, #ffffff);
  color: white;
  color: var(--text);
}