/* Cadastros (issue #67)
   Escopo restrito a tela de Cadastros: formularios em grade coerente e acoes
   de tabela como icone. Nada aqui vaza para outras paginas — todo seletor
   nasce de .pagina-cadastros, marcado no proprio <section> da view.

   Os valores vem dos tokens do main.css (--border, --muted, --primary,
   --error, --radius, --focus-ring): nenhuma cor nova e inventada aqui. */

/* ---------- Formularios ---------------------------------------------- */

/* Uma grade so para os tres formularios da tela. O auto-fit mantem duas ou
   tres colunas no desktop e desce para uma no celular sem media query
   propria — o minmax faz o trabalho. */
.pagina-cadastros .form-cadastro {
  display: grid;
  gap: 0.85rem 1rem;
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.pagina-cadastros .form-cadastro .field { margin-bottom: 0; }

.pagina-cadastros .form-cadastro .field > span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Todo controle ocupa a coluna inteira: sem isto o input de cor e o number
   encolhem para a largura intrinseca e a linha fica desalinhada. */
.pagina-cadastros .form-cadastro input,
.pagina-cadastros .form-cadastro select {
  width: 100%;
  min-width: 0;
}

/* A dica curta abaixo do campo (ex.: dia do mes) nao pode empurrar o botao. */
.pagina-cadastros .form-cadastro .dica {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Coluna do botao: acompanha a base dos campos e nao estica sozinha. */
.pagina-cadastros .form-cadastro .field-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.pagina-cadastros .form-cadastro .field-actions .btn-primary {
  width: 100%;
  min-height: 42px;
}

/* Campos que pedem largura inteira mesmo com espaco sobrando. */
.pagina-cadastros .form-cadastro .field-larga { grid-column: 1 / -1; }

/* Cor e um controle estreito por natureza: nao merece uma coluna cheia. */
.pagina-cadastros .form-cadastro input[type='color'] {
  height: 42px;
  padding: 0.2rem;
  cursor: pointer;
}

/* ---------- Acoes em icone ------------------------------------------- */

/* A celula de acoes deixa de ser uma pilha de botoes de texto: icones lado a
   lado, sem quebra de linha, alinhados a esquerda como o resto da tabela. */
.pagina-cadastros .celula-acoes {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

.pagina-cadastros .btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pagina-cadastros .btn-icone svg {
  width: 17px;
  height: 17px;
  display: block;
  /* O traco segue a cor do botao: um icone, tres estados. */
  stroke: currentColor;
  fill: none;
}

.pagina-cadastros .btn-icone:hover {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.pagina-cadastros .btn-icone.danger:hover {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.pagina-cadastros .btn-icone:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ---------- Toque e telas estreitas ---------------------------------- */

/* Dedo nao acerta 34px com conforto: o alvo cresce onde o ponteiro e
   grosseiro, igual ao que o main.css ja faz com .btn-acao. */
@media (pointer: coarse) {
  .pagina-cadastros .btn-icone { width: 42px; height: 42px; }
  .pagina-cadastros .btn-icone svg { width: 19px; height: 19px; }
}

@media (max-width: 640px) {
  .pagina-cadastros .form-cadastro {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .pagina-cadastros .form-cadastro .field-actions .btn-primary { min-height: 44px; }
}