/*
 * FILTERS — barra de filtros de listagem (abas em pílula).
 * Pílulas à esquerda (uma ativa por vez) e ações extras à direita.
 * Distinta das `.tabs` (que trocam painéis na mesma tela): aqui cada
 * pílula é um link que refiltra a listagem no servidor.
 */
.filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Segmented control: trilho único (fundo afundado + borda) com os segmentos
   dentro. A opção ativa vira um "cartão" elevado (superfície + sombra) — lê
   mais profissional que pílulas soltas. O trilho usa `color-bg` e o ativo
   `color-surface`: a superfície fica sempre "acima" do fundo, então o realce
   funciona nos dois temas (no escuro, surface é mais claro que bg). */
.filters__tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
}

/* Cada segmento: discreto quando inativo (texto secundário, fundo do trilho). */
.filters__tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.filters__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Ativo: cartão elevado sobre o trilho + texto na cor de marca. */
.filters__tab--active,
.filters__tab--active:hover {
  background-color: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

/* Contador opcional dentro do segmento (ex.: nº de contratos por gravidade). */
.filters__tab-count {
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Busca: fica logo após os segmentos, à ESQUERDA (achabilidade). Largura
   natural do .search-box (16rem). */
.filters__search {
  flex: 0 1 auto;
}

/* Ações extras (período, ⋯ Mais ações): empurradas para a DIREITA da barra. */
.filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Mobile: a barra inteira empilha. As pílulas viram uma faixa que rola na
   horizontal (swipe) em vez de quebrar em linhas espremidas; a busca/ações
   ocupam a largura toda. Vale em todas as listagens. */
@media (max-width: 640px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .filters__tabs {
    flex-wrap: nowrap;
    /* inline-flex cresceria até o conteúdo e estouraria a página; max-width
       capa no container e deixa o overflow-x rolar DENTRO do trilho (swipe). */
    max-width: 100%;
    overflow-x: auto;
    /* esconde a barra de rolagem, mantém o swipe (rola dentro do trilho) */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters__tabs::-webkit-scrollbar { display: none; }
  .filters__tab { flex-shrink: 0; }
  /* As ações QUEBRAM em vez de espremer: telas com mais controles (mês +
     competência + busca) fluem em mais de uma linha em vez de comprimir tudo
     numa faixa só. A busca toma a linha inteira; os demais ficam no tamanho
     natural na linha acima. */
  .filters__actions {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }
  .filters__actions > form,
  .filters__actions .search,
  .filters__actions input[type="search"] {
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Busca ocupa a linha inteira no mobile, logo abaixo dos segmentos. */
  .filters__search {
    width: 100%;
  }
  .filters__search .search-box {
    width: 100%;
  }
}