/*
 * AÇÕES NO TOPO DA ABA
 * Barra de ação (um ou mais botões, ou um form revelado) acima de uma
 * lista/grade dentro de uma aba. A barra de abas dá o espaço acima; esta
 * classe dá o mesmo espaço abaixo e alinha os botões na horizontal.
 * Um container escondido (hidden) não ocupa espaço.
 */
.tab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Form revelado (novo documento/sócio/foto, gerar parcelas) ocupa a linha. */
.tab-actions > form {
  flex: 1 1 100%;
}

/* Botão de ação que é um form (button_to, ex.: gerar parcelas): age como
   botão simples, não ocupa a linha toda — para conviver com o filtro ao lado. */
.tab-actions > form.tab-action-form {
  flex: 0 0 auto;
}

/* Filtro inline na barra de ações (ex.: ano do IPTU/parcela, competência da
   despesa): NÃO ocupa a linha toda (vence o `.tab-actions > form`) e encosta
   à direita, depois dos botões. Serve tanto a form quanto a div (filtro JS). */
.tab-actions > .tab-filter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.tab-filter__label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Select compacto, na mesma altura dos botões btn--sm da barra. Mantém folga
   à direita para o chevron (senão o padding curto encosta na seta). */
.tab-filter select {
  width: auto;
  padding: var(--space-1) calc(var(--space-2) + 1.4rem) var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  background-position: right var(--space-2) center;
  background-size: 1rem;
}