/* ==========================================================================
   <sf-filtros> - botao "Filtros" e a gaveta lateral onde os campos moram.
   Ver public/js/components/sf-filtros.js.
   ========================================================================== */

/*
 * `align-items: center` porque o hospedeiro e item de um flex (.pagina-acoes)
 * e estica na altura do vizinho mais alto - sem isto, o botao de filtros
 * acompanharia a altura do link "Importar planilha" e ficaria mais alto que
 * qualquer outro botao pequeno da tela.
 */
.filtros {
  display: inline-flex;
  align-items: center;
}

/* ---------- o botao na tela ---------- */

/*
 * A quantidade de filtros ativos, colada no rotulo.
 *
 * Ela existe porque o painel esconde o que esta filtrado: sem esse numero, uma
 * lista recortada por um filtro esquecido parece uma base vazia.
 */
.filtros-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  margin-inline-start: var(--esp-1);
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  font-size: var(--txt-rotulo-p);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
 * O `[hidden]` do navegador perde para a regra acima - ela e do autor e tem
 * especificidade maior. Sem esta linha, o contador ficaria visivel zerado.
 */
.filtros-contador[hidden] {
  display: none;
}

/* ---------- a gaveta ---------- */

.filtros-painel {
  --size: 22rem;
}

/* ---------- os recortes salvos ---------- */

/*
 * A secao fica ACIMA dos campos, separada deles por uma borda inferior.
 *
 * A borda nao e enfeite: sem ela, a lista de recortes e o primeiro campo do
 * formulario se leriam como uma coisa so, e "Minha carteira" pareceria o valor
 * de um filtro chamado "Filtros salvos".
 */
.filtros-salvos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding-bottom: var(--esp-4);
  margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}

.filtros-salvos[hidden] {
  display: none;
}

.filtros-salvos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/*
 * Cada recorte e uma PASTILHA com dois alvos: o nome aplica, o "x" apaga.
 *
 * Os dois sao irmaos e nao aninhados - um botao dentro de outro prometeria dois
 * destinos no mesmo lugar. A borda envolve os dois para que se leiam como um
 * item so, e a divisoria interna diz onde um termina.
 */
.filtros-salvo {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  overflow: hidden;
}

.filtros-salvo-aplicar,
.filtros-salvo-apagar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--esp-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
  cursor: pointer;
  min-width: 0;
}

.filtros-salvo-aplicar:hover {
  background: var(--cor-superficie-baixa);
  color: var(--cor-primaria);
}

/*
 * O "x" so ganha cor de perigo no hover. Vermelho o tempo todo, numa fila de
 * pastilhas, pintaria a gaveta inteira de alerta para oferecer uma acao que
 * quase nunca e a que se quer.
 */
.filtros-salvo-apagar {
  border-inline-start: 1px solid var(--cor-borda);
  color: var(--cor-texto-fraco);
}

.filtros-salvo-apagar:hover {
  background: var(--cor-erro-tint);
  color: var(--cor-erro-texto);
}

.filtros-salvo-aplicar:focus-visible,
.filtros-salvo-apagar:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: -2px;
}

/* A pergunta ocupa a largura do item, com as duas respostas no fim. */
.filtros-salvo--confirmando {
  align-items: center;
  gap: var(--esp-2);
  padding: 2px var(--esp-2);
  font-size: var(--txt-corpo-p);
}

.filtros-salvar {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
}

/* O nome ocupa o que sobra; o botao fica com o proprio tamanho. */
.filtros-salvar-nome {
  flex: 1 1 auto;
  min-width: 0;
}

.filtros-salvos-erro {
  margin: 0 0 var(--esp-3);
  font-size: var(--txt-corpo-p);
  color: var(--cor-erro-texto);
}

.filtros-salvos-erro[hidden] {
  display: none;
}

.filtros-campos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/*
 * Um campo por linha, largura cheia. Na horizontal do card antigo a largura
 * era disputada entre quatro controles; aqui nao ha essa disputa, e nome de
 * SUCOM - "SUCOM SAO PAULO INTERIOR" - cabe inteiro.
 */
.filtros-campo {
  width: 100%;
}

/* Mesmo caso do contador: o componente declara o proprio display. */
.filtros-campo[hidden] {
  display: none;
}

.filtros-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

/*
 * Em tela estreita a gaveta ocupa quase tudo: 22rem numa tela de 360px
 * deixaria uma faixa de conteudo inutil do lado, sem largura para ser lida
 * nem para ser tocada.
 */
@media (max-width: 480px) {
  .filtros-painel {
    --size: 88vw;
  }
}