/*
 * 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.
   margin-inline: auto centraliza o bloco quando sobra espaço (widescreen),
   em vez de deixá-lo colado à esquerda.
   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);
  margin-inline: auto;
}

/* 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, e centraliza. */
.settings {
  max-width: var(--max-width-form);
  margin-inline: auto;
}

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

/* Botão de ação no fim de uma seção (ex.: "+ Novo representante" abaixo da
   lista): separa do conteúdo acima para não colar. */
.form-section__action {
  margin-top: var(--space-4);
}

/* Lista dividida logo após uma grade de campos, e ações logo após a lista:
   respiro por adjacência (mesmo padrão do "+" das seções) — sem margem inline. */
.form-grid + .divided-list,
.form-grid--cols + .divided-list {
  margin-top: var(--space-4);
}

.divided-list + .inline-actions {
  margin-top: var(--space-5);
}

/* Hint logo após uma grade de campos (não sob um título): cancela o margin-top
   negativo — senão o texto cola/sobrepõe os campos acima. */
.form-grid + .form-section__hint,
.form-grid--cols + .form-section__hint {
  margin-top: var(--space-4);
}

.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);
}

/* Subtítulo dentro da seção: agrupa campos afins (ex.: famílias de
   notificação no perfil) sem o peso de uma seção nova. */
.form-section__subtitle {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* 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);
}

/* Hints em sequência não podem colar: só o primeiro puxa para cima do título. */
.form-section__hint + .form-section__hint {
  margin-top: 0;
}

/* 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;
}

/* Contém o input oculto (position:absolute) dentro do botão. */
.file-field label {
  position: relative;
}

/* Input nativo oculto, MAS presente no layout (não display:none): alguns
   navegadores não abrem o seletor ao clicar num <label> que embrulha um input
   display:none. Esconde no padrão acessível para o clique no botão funcionar
   em todos. Seletor com a classe-pai para vencer o `.field input { width:100% }`. */
.file-field .file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.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 de uma grade não precisa da margem-base — o `gap` da grade
   já dá o respiro. Sem isso a margem soma ao gap e dobra o espaço entre linhas
   (.form-grid--cols tinha esse espaço dobrado no endereço). */
.form-grid .field,
.form-grid--cols .field {
  margin-bottom: 0;
}

/* Grade logo após um switch não pode colar nele. */
.switch-row + .form-grid {
  margin-top: var(--space-4);
}

/* Duas grades empilhadas (ex.: identificação + endereço no modal do
   representante) não podem colar — sem form-section entre elas, dá o respiro. */
.form-grid + .form-grid--cols,
.form-grid--cols + .form-grid--cols,
.form-grid--cols + .form-grid {
  margin-top: var(--space-4);
}

/* 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);
}

/* Em forms de página inteira (novo/editar), a barra de ações gruda no rodapé
   da viewport enquanto o conteúdo rola — Salvar/Cancelar sempre ao alcance.
   Fundo sólido + sombra para cima quando flutua sobre o conteúdo. Só alcança
   o .form-actions direto do <form> de página (não os inline/modais). */
/* Barra de ações que acompanha a rolagem (gruda no rodapé da viewport) — Salvar
   sempre ao alcance, em TODA tela de página. Pega o .form-actions em qualquer
   profundidade dentro do conteúdo (.app-container), incluindo os aninhados nas
   abas (config/contrato). Modais ficam FORA do .app-container (turbo_frame
   próprio), então não são afetados — lá a barra segue o fluxo normal. */
.app-container .form-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-bar);
}

/* 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;
  /* Descola os botões do último campo acima (categoria/validade). */
  margin-top: var(--space-4);
}

/* 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-7 { grid-column: span 7; }
.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). */
/* Tokens do editor de contrato: bloco recolhível (<details>). Fechado por
   padrão para o botão Salvar ficar perto; abre quando precisa de um token. */
.token-disclosure {
  margin-top: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}
.token-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.token-disclosure__summary::-webkit-details-marker { display: none; }
.token-disclosure__caret {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.token-disclosure[open] .token-disclosure__caret { transform: rotate(90deg); }
.token-disclosure__hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* Lista vertical: um token por linha, clicável (insere no cursor). */
.token-rows {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
  max-height: 22rem;
  overflow-y: auto;
}
.token-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.token-row:hover { background-color: var(--color-accent-soft); }
.token-row code {
  flex-shrink: 0;
  min-width: 12rem;
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-variant-ligatures: none;
}
.token-row__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.contract-template__body { font-family: var(--font-mono, monospace); }

/* Prévia viva dos encargos (aba Cobrança): exemplo calculado a partir dos
   percentuais digitados. Encosta abaixo do grid de campos. */
.charge-preview {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.charge-preview__label {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.charge-preview strong {
  color: var(--color-text);
  font-weight: 600;
}