/*
 * LAYOUT DE FORMULÁRIO
 * Agrupa campos em seções (sem fieldset cru) e os organiza em grade
 * responsiva. Os campos em si usam .field (06_forms). Botões no rodapé do
 * form em .form-actions; em forms compactos, .inline-actions. Erros viram
 * toast (shared/_toast), não bloco inline.
 */

/* Formulário de página (novo/editar) ocupa a largura de leitura, não a
   página larga inteira — os campos ficariam espalhados em telas grandes.
   Só alcança o <form> no topo da página (button_to aninhados não são afetados). */
.app-container > form {
  max-width: var(--max-width-form);
}

/* Configurações: o form vive dentro das abas (não é filho direto do
   container), então não pega a regra acima. Limita a área toda à largura de
   leitura para os campos não se espalharem em telas largas. */
.settings {
  max-width: var(--max-width-form);
}

/* Seção do form: título discreto + grade de campos. Divisor entre seções. */
.form-section + .form-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.form-section__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Texto de apoio logo abaixo do título da seção (puxa para cima do grid). */
.form-section__hint {
  margin: calc(var(--space-4) * -1 + var(--space-1)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Campo de logo: miniatura quadrada à esquerda + input do arquivo. */
.logo-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.logo-field__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  padding: var(--space-2);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.logo-field__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-field__placeholder {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.logo-field__control {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* O input de arquivo nativo fica escondido; o <label.btn> abre o seletor
   (clicar no rótulo dispara o input). Padrão do design system, não o controle
   cru do navegador. */
.logo-field__input {
  display: none;
}

.logo-field__filename {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Upload genérico no padrão do design system (mesmo visual da logo): o input
   nativo fica oculto e um <label.btn> abre o seletor; o nome do arquivo (ou
   a contagem) aparece ao lado. Usado via partial shared/_file_field. */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.file-field__input {
  display: none;
}

.file-field__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grade de campos: duas colunas no desktop, uma no mobile. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* O .field dentro da grade não precisa de margem extra. */
.form-grid .field {
  margin-bottom: 0;
}

/* Campo que ocupa a linha inteira (ex.: nome, logradouro). */
.field--full {
  grid-column: 1 / -1;
}

/* Ações do form: botões alinhados, com divisor acima. */
.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* Linha de botões de um form compacto (revelado/inline), sem o divisor do
   .form-actions: usada nos forms curtos de novo documento/sócio/foto. */
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Grade de 12 colunas para distribuição controlada (ex.: endereço).
   Cada campo declara quantas colunas ocupa via .field--span-N.
   No mobile colapsa para uma coluna só. */
.form-grid--cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.field--span-2 { grid-column: span 2; }
.field--span-3 { grid-column: span 3; }
.field--span-4 { grid-column: span 4; }
.field--span-5 { grid-column: span 5; }
.field--span-6 { grid-column: span 6; }
.field--span-8 { grid-column: span 8; }
.field--span-9 { grid-column: span 9; }

/* No mobile, cada campo ocupa a linha inteira. */
@media (max-width: 640px) {
  .form-grid--cols .field {
    grid-column: 1 / -1;
  }
}

/* Lista de tokens da aba Contrato (referência ao lado do editor do modelo). */
.token-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.token-list__item { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.token-list__item code { background: var(--color-surface-2); padding: 0.05rem 0.35rem; border-radius: var(--radius-sm); color: var(--color-text); }
.token-list__item span { color: var(--color-text-muted); }
.contract-template__body { font-family: var(--font-mono, monospace); }