/* ---------------------------------------------------------------------------
   lancamentos.css — ajustes exclusivos da tela de Lançamentos (issue #65).

   Carregado DEPOIS de main.css, apenas nesta página. Reaproveita os tokens
   de DESIGN.md (--surface, --border, --border-input, --primary, --muted...);
   nada de cor improvisada aqui.

   Escopo:
     1. Campo "Categoria" do formulário (largura, amostra de cor, ajuda).
     2. Barra de filtros do extrato reagrupada em blocos rotulados.
     3. Ações da tabela como botão de ícone (lápis / lixeira / check).
--------------------------------------------------------------------------- */

/* 1. Campo Categoria -------------------------------------------------------
   O select vinha estreito e sem nenhuma pista visual de qual categoria estava
   escolhida. Agora ocupa duas colunas do form-grid, tem uma amostra de cor à
   esquerda e uma linha de ajuda embaixo. */
.field-categoria {
  grid-column: span 2;
  min-width: 0;
}

.select-categoria {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.select-categoria > select {
  flex: 1 1 auto;
  min-width: 0;
  /* Seta própria: o select nativo some no tema escuro de alguns navegadores. */
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
}

/* Amostra da cor da categoria selecionada. A cor em si é aplicada por CSSOM
   (aplicarCores) — style inline seria barrado pela CSP. */
.select-categoria-cor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}

.select-categoria-cor .dot-lg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--border-input);
}

.field-categoria > small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .field-categoria { grid-column: auto; }
}

/* 2. Filtros do extrato ----------------------------------------------------
   Antes eram nove controles soltos numa única linha flex, que quebravam em
   posições arbitrárias. Agora são três grupos rotulados (Período,
   Classificação, Busca) que se acomodam lado a lado no desktop e empilham
   no celular. */
.lanc-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* flex-basis explicito por grupo: sem ele o fieldset (bloco) esticava para
   100% e cada grupo comia uma linha inteira, deixando a barra com ~365px de
   altura. Com a base declarada, Período + Busca dividem a primeira linha e
   Classificação assume a segunda. */
.lanc-filtros-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  flex: 1 1 20rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Ordem visual: Período + Busca dividem a primeira linha; Classificação, com
   quatro controles, ocupa a segunda inteira. Por isso Classificação vem por
   ultimo no HTML -- assim o wrap acontece no lugar certo sem `order`, que
   quebraria a ordem de tabulacao do teclado. */
.lanc-filtros-classificacao { flex: 1 1 100%; }

.lanc-filtros-grupo > legend {
  width: 100%;
  float: none;
  margin-bottom: 0.35rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Sem separador vertical entre grupos: com o wrap, a borda esquerda ficava
   pendurada no grupo que caiu para a linha de baixo. As legendas ja separam
   visualmente os blocos. */

.lanc-filtros .field-filtro {
  margin-bottom: 0;
  min-width: 0;
}

.lanc-filtros .field-filtro > span {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.lanc-filtros input,
.lanc-filtros select {
  min-height: 2.5rem;
}

.lanc-filtros label.field-filtro:has(input[type='date']) { flex: 1 1 9.5rem; min-width: 9rem; }
.lanc-filtros label.field-filtro:has(select) { flex: 1 1 11rem; min-width: 10rem; }
.lanc-filtros label.field-filtro:has(input[type='search']) { flex: 1 1 15rem; min-width: 12rem; }

/* Multi-seleção de categorias: mais alta, com sua própria coluna. */
.lanc-filtros .field-filtro-cats { flex: 1 1 14rem; min-width: 12rem; align-self: flex-start; }
/* A multi-selecao mostrava 4 linhas e ficava quase o dobro da altura dos
   outros controles, abrindo um vao morto na barra. Tres linhas ja dao a
   pista de que rola, sem esticar o grupo inteiro. */
.lanc-filtros .field-filtro-cats select[multiple] {
  width: 100%;
  height: 4.6rem;
  min-height: 0;
  padding: 0.25rem;
  line-height: 1.35;
}
.lanc-filtros .field-filtro-cats > small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
}

.lanc-filtros-busca { flex: 1 1 20rem; }
.lanc-filtros-busca .btn-outline {
  flex: 0 0 auto;
  min-height: 2.5rem;
  white-space: nowrap;
}

/* Mobile: um grupo por linha, controles em largura cheia, sem separador. */
@media (max-width: 860px) {
  .lanc-filtros { gap: 0.9rem; padding: 0.85rem; }
  .lanc-filtros-grupo {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
  }

  .lanc-filtros-grupo + .lanc-filtros-grupo {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }
  /* Os seletores base usam :has(...), de especificidade (0,3,0). Uma regra
     mobile escrita como `.lanc-filtros label.field-filtro` (0,2,0) PERDE para
     eles e os campos continuavam com largura de desktop no celular. Por isso
     aqui o mesmo peso de :has() e repetido. */
  .lanc-filtros label.field-filtro:has(input[type='date']),
  .lanc-filtros label.field-filtro:has(select),
  .lanc-filtros label.field-filtro:has(input[type='search']),
  .lanc-filtros .field-filtro-cats {
    flex: 1 1 100%;
    min-width: 0;
  }
  .lanc-filtros-busca .btn-outline { flex: 1 1 100%; }
}

/* 3. Ações da tabela como ícone -------------------------------------------
   "Editar"/"Excluir" viraram botões quadrados de ícone SVG. O rótulo continua
   acessível por aria-label + title; nada de emoji. */
.btn-acao.btn-icone {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 8px;
}

.btn-acao.btn-icone > svg {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none; /* o clique sempre cai no <button>, não no <path> */
}

/* Alvo confortável em toque (mínimo 44px, WCAG 2.5.5). */
@media (pointer: coarse) {
  .btn-acao.btn-icone {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .btn-acao.btn-icone > svg { width: 1.15rem; height: 1.15rem; }
}