/* ============================================================
   DiveLog DS — Component: Filters Bar
   Barra orizzontale con input di ricerca e select.
   Estratto da: wac-components.css + log_immersioni.css
   Token: --color-primary, --color-text-primary, --color-text-secondary,
          --color-border, --color-surface, --radius-medium,
          --space-3, --space-4, --space-6, --font-body-medium,
          --font-family-primary, --motion-fast, --ease-standard
   ============================================================ */

.filters-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 600px) {
  .filters-bar {
    flex-direction: row;
    align-items: center;
  }
}

.filters-bar__search-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.filters-bar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 1rem;
}

.filters-bar__input,
.filters-bar__select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-body-medium);
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.filters-bar__input {
  padding-left: calc(var(--space-4) + 24px);
}

.filters-bar__select--org {
  max-width: 220px;
}

.filters-bar__select--compact {
  max-width: 180px;
}

.filters-bar__input:focus,
.filters-bar__select:focus {
  outline: none;
  border-color: var(--color-primary);
}