/*
 * CAMPOS DE FORMULÁRIO
 * Invólucro .field (label + controle empilhados), e estilo de input,
 * select, textarea. Full-width, foco com borda destacada, estado de erro.
 * Consome apenas tokens semânticos — respeita o tema.
 */

/* Invólucro de um campo: rótulo acima, controle abaixo. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Rótulo do campo. `.field__label` é o rótulo de um GRUPO (ex.: conjunto de
   checkboxes) que não se prende a um único <input>; compartilha o estilo. */
.field label,
.field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-text);
}

/* Texto de ajuda abaixo do controle. */
.field small,
.field__help {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Asterisco de campo obrigatório, junto ao rótulo. */
.field__required {
  margin-left: 2px;
  color: var(--color-danger);
}

/* Controles de entrada. */
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Foco: borda assume a cor de ação (petróleo) e um halo suave aparece ao
   redor — estado de foco "de marca", mais polido que o realce cinza. */
.field input:focus,
.field select:focus,
.field textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Seta custom para todos os selects: a nativa cola na borda direita e varia
   entre navegadores. Esconde a nativa (appearance: none) e desenha um chevron
   com folga da borda; abre espaço à direita para ele não encostar no texto.
   O stroke #94a3b8 (slate-400) é literal de propósito: data-URI não lê var()
   CSS, e <select> é elemento replaced (sem ::after) — mask no próprio elemento
   recortaria o fundo todo, não só a seta. Esse cinza médio lê nos dois temas. */
select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.1rem;
  padding-right: calc(var(--space-3) + 1.5rem);
}

/* Textarea: altura mínima confortável e redimensionável na vertical. */
textarea {
  min-height: 6rem;
  resize: vertical;
}

/* Placeholder discreto (3º nível de texto, mais claro que muted). */
input::placeholder,
textarea::placeholder {
  color: var(--color-text-placeholder);
}

/* Desabilitado. */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Estado de erro: borda em danger. `.field--error` é aplicado manualmente no
   invólucro; `[aria-invalid="true"]` vem automático do field_error_proc quando
   a validação falha (ver config/initializers/field_error.rb). */
.field--error input,
.field--error select,
.field--error textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field--error label {
  color: var(--color-danger);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* Autofill do navegador: por padrão o Chrome/Safari pintam um fundo
   azul/amarelo que ignora nosso tema. Cobrimos o fundo com um box-shadow
   interno (truque conhecido — o navegador não respeita background-color
   no autofill) e forçamos a cor do texto. Mantém o visual do tema. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  caret-color: var(--color-text);
  transition: background-color 9999s ease-in-out 0s;
}

/* CAMPO DE SENHA COM OLHINHO — wrapper relativo com o input de senha e um
   botão sobreposto à direita que alterna mostrar/esconder. O padding-right
   abre espaço para o ícone não cobrir o texto. */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: calc(var(--space-3) + 1.75rem);
}

.password-field__toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.password-field__toggle:hover {
  color: var(--color-text);
}

.password-field__toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Grupo de opções (checkboxes/radios) em grade compacta. Usado para
   campos de múltipla escolha, como categorias do cliente. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-2);
}

/* Variante em linha única: opções do tamanho do conteúdo, lado a lado (cabem
   todas numa linha no desktop; quebram só em telas estreitas). */
.choice-grid--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* Alterna qual modelo de contrato (residencial/comercial) a aba edita. */
.contract-kind-switch {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Variante em lista: uma opção por linha, com divisória — melhor leitura em
   listas longas (ex.: escolher imóveis do relatório do contador). */
.choice-grid--list {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* Cada opção: checkbox + rótulo lado a lado, clicável. */
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Checkbox/radio do .choice: reseta o estilo que vaza de `.field input`
   (padding/borda/raio/appearance) e restaura o controle nativo, tingido com a
   cor de ação. Sem isso, dentro de um .field o checkbox vira uma caixinha vazia. */
.choice input {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.choice span {
  font-size: var(--text-sm);
}

/* ---- Opção selecionável sem caixinha ----------------------------------
   Variantes onde a CAIXA some e o rótulo inteiro vira o alvo de clique,
   acendendo quando marcado. O checkbox continua lá (acessível/submetível),
   só escondido — o estado vem de :has(input:checked). Aplique no <label>. */

/* Esconde o controle nativo mantendo-o acessível (foco/teclado pelo :has). */
.choice--chip input,
.choice--card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* CHIP — pílula compacta para múltipla escolha (ex.: categorias).
   `.choice.choice--chip` p/ vencer `.field label { display:block }`. */
.choice.choice--chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.choice--chip:hover {
  border-color: var(--color-accent-muted);
}

.choice--chip:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* CARD — caixa maior para opção isolada, com espaço pra descrição longa.
   height:100% iguala a altura quando vários cards dividem a mesma linha do
   grid (o conteúdo centra na vertical). */
.choice.choice--card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Texto em duas linhas dentro do card: título + dica menor e apagada. */
.choice__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.choice__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.choice--card:hover {
  border-color: var(--color-accent-muted);
}

.choice--card:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

/* Marca de seleção do card: contorno vazio que vira ✓ ao marcar. */
.choice--card::before {
  content: "";
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice--card:has(input:checked)::before {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E");
}

/* Foco por teclado: anel no rótulo quando o input escondido recebe foco. */
.choice--chip:has(input:focus-visible),
.choice--card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* SWITCH — checkbox estilizado como interruptor deslizante (padrão de
   configuração liga/desliga). Aplique .switch no <input type="checkbox">.
   Reseta o estilo que vaza de `.field input` (padding/borda) para funcionar
   também dentro de um .field. O estado real continua no checkbox (acessível,
   submetível); só o visual muda. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.4rem - 4px);
  height: calc(1.4rem - 4px);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}

.switch:checked {
  background-color: var(--color-accent);
}

.switch:checked::after {
  transform: translateX(calc(2.5rem - 1.4rem));
}

.switch:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Switch desabilitado (ex.: emissão automática sem chave Asaas): sem clique. */
.switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Linha de configuração com switch: texto (rótulo + ajuda) à esquerda, switch
   à direita, num cartão clicável. */
.switch-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-2);
  cursor: pointer;
}

.switch-row:hover {
  border-color: var(--color-accent);
}

.switch-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.switch-row__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.switch-row__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Lista dinâmica de seletores (locatários, fiadores).
   Cada linha: um select que cresce + botão remover ao lado. */
.people-select__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.people-select__row select {
  flex: 1;
}

/* Botão de remover linha: discreto, quadrado, alinhado ao select. */
.people-select__remove {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
}

.people-select__remove:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* PREVIEW DE REAJUSTE — faixa "atual → novo" com a variação (R$ e %) ao vivo.
   Aparece abaixo dos campos do reajuste enquanto o usuário digita. */
.readjust-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface-2);
  font-size: var(--text-sm);
}

.readjust-preview__from,
.readjust-preview__arrow {
  color: var(--color-text-muted);
}

.readjust-preview__new {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.readjust-preview__delta {
  margin-left: auto;
  font-weight: var(--weight-medium);
  color: var(--color-success);
}

.readjust-preview__delta--down {
  color: var(--color-danger);
}

/* ---------- MEDIDOR DE FORÇA DE SENHA ---------- */
/* Visível só quando o form está com o medidor ativo (controller adiciona a
   classe password-strength-active no <form>). */
.password-strength {
  display: none;
  margin-top: var(--space-2);
}

.password-strength-active .password-strength {
  display: block;
}

.password-strength__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  overflow: hidden;
}

.password-strength__bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.password-strength__bar-fill--fraca {
  width: 33%;
  background-color: var(--color-danger);
}

.password-strength__bar-fill--media {
  width: 66%;
  background-color: var(--color-warning);
}

.password-strength__bar-fill--forte {
  width: 100%;
  background-color: var(--color-success);
}

.password-strength__label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.password-strength__rules {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.password-strength__rule {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.password-strength__rule::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
}

.password-strength__rule--ok {
  color: var(--color-text);
}

.password-strength__rule--ok::before {
  content: "✓";
  color: var(--color-success);
}

.password-strength__match {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.password-strength__match--ok {
  color: var(--color-success);
}

.password-strength__match--erro {
  color: var(--color-danger);
}