/* Barra de filtros compartilhada das 9 telas do Painel de Vendas
   (Componentes/BarraFiltrosVendas.razor). Arquivo CSS COMUM, não
   `.razor.css` — regra fixa do projeto (CSS de componente de módulo não
   usa CSS isolado; ver .claude/rules/arquitetura.md). Todo seletor
   prefixado por ".barra-filtros-vendas".

   Fase 7 de extrair-barra-filtros-vendas — unifica os 8 blocos antes
   duplicados em detalhe-vendas.css, graficos-vendas.css,
   ranking-clientes-vendas.css, localidades-vendas.css,
   cotacoes-abertas-vendas.css, cotacoes-perdidas-vendas.css,
   servico-sem-os-vendas.css e canais-venda-vendas.css (byte-idênticos
   entre si a menos do prefixo e das regras extras da variante
   colapsável). Ver openspec/changes/extrair-barra-filtros-vendas/design.md,
   "Rota do CSS — unificar, em duas etapas".

   Número de colunas por MODIFICADOR de classe, nunca `style` inline —
   padrão é 7 colunas (13 campos completos, ou os 13 campos da variante
   colapsável); --colunas-5 e --colunas-6 cobrem Cotações Abertas (5
   campos) e Cotações Perdidas (6 campos), únicas telas com conjunto
   reduzido. */

.barra-filtros-vendas__filtros {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.barra-filtros-vendas__filtros-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.barra-filtros-vendas__filtros-grid--colunas-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.barra-filtros-vendas__filtros-grid--colunas-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.barra-filtros-vendas__campo-select {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.barra-filtros-vendas__campo-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-filtros-vendas__select,
.barra-filtros-vendas__input {
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: 10px;
  min-width: 0;
}

.barra-filtros-vendas__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.barra-filtros-vendas__btn {
  height: 26px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.barra-filtros-vendas__btn--secundario {
  padding: 0 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
}

.barra-filtros-vendas__btn--primario {
  padding: 0 16px;
  border: none;
  background: var(--color-primary);
  color: var(--color-bg);
}

/* ---------- Variante colapsável (só Canais de Venda hoje) ----------
   Regras transportadas literalmente de canais-venda-vendas.css antes
   desta unificação (linhas ~68-193 daquele arquivo). */

.barra-filtros-vendas__filtros-barra {
  display: flex;
  align-items: center;
  gap: 10px;
}

.barra-filtros-vendas__filtros-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  border-radius: 7px;
  height: 24px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.barra-filtros-vendas__filtros-chevron {
  color: var(--color-disabled);
  font-size: 9px;
}

.barra-filtros-vendas__filtros-resumo {
  font-size: 10px;
  color: var(--color-subtle);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-filtros-vendas__filtros-limpar {
  flex: none;
  margin-left: auto;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* Compactação da variante colapsável — mesmos valores literais que
   canais-venda-vendas.css já usava para o contêiner de filtros (padding
   menor, grade com respiro pro toggle acima, botões de 24px). Ligada ao
   mesmo modificador de classe emitido quando o componente nasce com
   `Colapsavel="true"` — nenhuma outra tela usa hoje. */
.barra-filtros-vendas__filtros--compacta {
  padding: 8px 12px;
}

.barra-filtros-vendas__filtros--compacta .barra-filtros-vendas__filtros-grid {
  margin-top: 9px;
}

.barra-filtros-vendas__filtros--compacta .barra-filtros-vendas__acoes {
  margin-top: 7px;
}

.barra-filtros-vendas__filtros--compacta .barra-filtros-vendas__btn {
  height: 24px;
  font-weight: 600;
}

.barra-filtros-vendas__filtros--compacta .barra-filtros-vendas__btn--primario {
  font-weight: 700;
}

/* Reflui abaixo de 1400px nas 9 telas (Delta Spec, "Requirement: Barra
   de filtros reflui abaixo de 1400px em todas as telas") — valor
   transportado de graficos-vendas.css/ranking-clientes-vendas.css/
   localidades-vendas.css, as 3 telas que já tinham esta media query
   antes da unificação. Cobre os três moldes de coluna (7 padrão, 5 e 6
   reduzidos) com o mesmo destino de 4 colunas. */
@media (max-width: 1400px) {
  .barra-filtros-vendas__filtros-grid,
  .barra-filtros-vendas__filtros-grid--colunas-5,
  .barra-filtros-vendas__filtros-grid--colunas-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}