/* ==========================================================================
   Fotos de produto — o campo do cadastro e o modal de associação do lote
   ==========================================================================
   Folha própria (ligada no layout ao lado da `application`) pelo mesmo motivo
   da `midia.css`: foto é um assunto que cresce sozinho e não tem por que
   engordar o CSS de todas as telas.

   MOBILE-FIRST, e aqui isso não é preferência: o lote de fotos existe porque o
   lojista TIRA as fotos com o celular. A tela larga é o caso raro. Por isso o
   modal nasce ocupando o aparelho inteiro e só a partir de 640px vira cartão
   centrado.

   Só tokens do :root da application.css. Nada de hexadecimal solto.
   ========================================================================== */

/* ======================================================================== */
/* O CAMPO DA FOTO NO CADASTRO DE PRODUTO                                   */
/* ======================================================================== */

.foto-campo {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

/* A prévia nasce escondida e o Stimulus a mostra quando há arquivo. Reservar o
   quadrado vazio deixaria um retângulo cinza sem explicação no formulário de
   produto novo.

   `contain`, e não `cover`: aqui a imagem é a EMBALAGEM, e cortar a embalagem
   pelo centro corta justamente o rótulo pelo qual o produto se reconhece. Na
   mídia paga o corte é aceitável porque a peça é arte feita para a caixa. */
.foto-campo__previa {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-cloud-gray);
  border: 1px solid var(--border-hairline);
}

/* ======================================================================== */
/* O MODAL "DE QUEM É CADA FOTO"                                            */
/* ======================================================================== */

/* ATENÇÃO AO `hidden` DAQUI PARA BAIXO.
 *
 * O atributo `hidden` do HTML esconde por uma regra da folha do NAVEGADOR
 * (`[hidden] { display: none }`), e regra de autor ganha de regra do navegador
 * independentemente de especificidade. Ou seja: toda classe que declara
 * `display` aqui APAGA o `hidden` que o Stimulus liga — e o elemento continua
 * na tela.
 *
 * Foi exatamente o que quebrou este modal: o `<dialog>` seguia desenhado depois
 * do `close()`, a busca não sumia ao escolher o produto e a caixa verde de "já
 * escolhido" aparecia vazia em todo cartão. Nada disso era JavaScript com
 * defeito. Por isso cada bloco com `display` tem, logo abaixo, o seu
 * `[hidden]` explícito — e é assim que a `.conversa__painel[hidden]` da
 * application.css já resolvia o mesmo problema.
 */

/* O <dialog> nativo chega com borda, padding e margem próprios do navegador —
   e com `max-width: calc(100% - 6px)`, que no celular deixa uma faixa branca
   de lado. Zerar tudo é o que faz a janela virar a folha inteira. */
.associacao {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface-card);
  color: var(--text-primary);
  /* Cabeçalho e ações param quietos; só a lista rola. Com a página inteira
     rolando, o botão "Pronto" fica trinta fotos abaixo do dedo. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* `<dialog>` sem `open` NÃO aparece. O navegador já diz isso, e o `display:
   flex` acima desdizia — era o "o modal vai para baixo da tela e não fecha". */
.associacao:not([open]) {
  display: none;
}

.associacao::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.associacao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--border-hairline);
}

.associacao__titulo {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color);
}

.associacao__contagem {
  margin: 2px 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-meta);
}

/* 44px de alvo: é o mínimo em que o polegar não erra. */
.associacao__fechar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icons);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.associacao__fechar:hover {
  background: var(--color-cloud-gray);
  color: var(--text-primary);
}

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

/* ---- o que já foi resolvido, e o que ficou de fora ----------------------- */

/* Os dois recados entram FECHADOS: o assunto da janela é a foto sem dono, e
   uma lista aberta de trinta acertos empurraria a pergunta para baixo da
   dobra. Quem quiser conferir, abre. */
.associacao__recado {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--border-hairline);
  display: grid;
  gap: var(--spacing-8);
}

.associacao__resumo {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.associacao__resumo > summary {
  cursor: pointer;
  padding: var(--spacing-4) 0;
}

.associacao__resumo--recusa > summary {
  color: var(--color-status-attention);
  font-weight: var(--font-weight-medium);
}

.associacao__resolvidas,
.associacao__recusadas {
  list-style: none;
  margin: var(--spacing-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-4);
  font-size: var(--text-caption);
}

.associacao__resolvidas li,
.associacao__recusadas li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.associacao__seta {
  color: var(--text-meta);
  flex-shrink: 0;
}

.associacao__motivo {
  color: var(--text-meta);
}

/* ---- a lista de pendentes ----------------------------------------------- */

.associacao__lista {
  list-style: none;
  margin: 0;
  padding: var(--spacing-16);
  display: grid;
  gap: var(--spacing-12);
  /* A rolagem é DAQUI, e `contain` impede que ela vaze para a página de trás
     quando a lista chega ao fim — o "scroll chaining" que faz o wizard andar
     sozinho enquanto o dedo ainda está na lista. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pendente {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
  padding: var(--spacing-12);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards-sm);
  background: var(--surface-card);
}

/* Grande o bastante para a pessoa RECONHECER o produto na foto: é a única
   informação que ela tem para responder a pergunta. Miniatura de 40px devolve
   a pergunta sem os meios de respondê-la. */
.pendente__previa {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-cloud-gray);
}

.pendente__corpo {
  min-width: 0;
  display: grid;
  gap: var(--spacing-8);
}

.pendente__arquivo {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-meta);
  /* Nome de arquivo é longo e não tem espaço para quebrar: sem isto ele
     atravessa o cartão e leva a rolagem horizontal junto. */
  overflow-wrap: anywhere;
}

/* ---- o cartão resolvido -------------------------------------------------- */

.pendente__escolhido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  /* O mesmo verde do `.etiqueta--ok` do sistema: é o mesmo significado,
     "isto está resolvido". */
  background: var(--color-mint-wash);
}

/* Nasce escondido: o cartão começa procurando, e só vira "resolvido" quando
   alguém aponta o produto. */
.pendente__escolhido[hidden] {
  display: none;
}

.pendente__nome {
  min-width: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-canopy-green);
}

/* ---- a busca ------------------------------------------------------------- */

.pendente__busca {
  position: relative;
  display: grid;
  gap: var(--spacing-4);
}

/* Some quando o produto foi escolhido — e volta pelo botão "Trocar". */
.pendente__busca[hidden] {
  display: none;
}

.pendente__rotulo {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.pendente__campo {
  width: 100%;
  /* 16px cravado: abaixo disso o Safari do iPhone DÁ ZOOM ao focar o campo, e
     a janela inteira sai do lugar no meio da digitação. */
  font-size: 16px;
  padding: 10px var(--spacing-12);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--text-primary);
}

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

.pendente__resultados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  /* Teto e rolagem própria: oito resultados dentro de um cartão que já está
     numa lista rolante viram um poço sem fundo sem isto. */
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A lista de resultados só existe enquanto se digita: sem isto ela ficava
   aberta depois da escolha, que é o "o dropdown não fecha". */
.pendente__resultados[hidden] {
  display: none;
}

.pendente__opcao {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-8) var(--spacing-12);
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.pendente__resultados li:last-child .pendente__opcao {
  border-bottom: 0;
}

.pendente__opcao:hover {
  background: var(--color-sage-wash);
}

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

.pendente__opcao-nome {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.pendente__opcao-codigo {
  font-size: var(--text-caption);
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.pendente__vazio {
  padding: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--text-meta);
}

/* ---- as ações ------------------------------------------------------------ */

.associacao__acoes {
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-card);
  /* No iPhone instalado como app a barra de gestos come os últimos pixels, e o
     botão "Pronto" fica meio escondido atrás dela. */
  padding-bottom: max(var(--spacing-16), env(safe-area-inset-bottom));
}

.associacao__acoes .botao {
  flex: 1;
}

/* ---- da tela larga para cima --------------------------------------------- */

@media (min-width: 640px) {
  /* CENTRAR UM `position: fixed` É `inset: 0` + `margin: auto`, e os dois
     juntos. Aqui estava `inset: auto`, que devolve o elemento à posição
     estática — e no top layer isso é o canto superior esquerdo da tela, com o
     `margin: auto` sem nenhuma folga para distribuir. A janela nascia encostada
     num canto, que é metade do "o modal foi parar num lugar estranho". A outra
     metade era o `display: flex` apagando o `[hidden]`, lá em cima. */
  .associacao {
    inset: 0;
    width: min(640px, calc(100% - 2 * var(--spacing-32)));
    /* `fit-content`, e não `auto`: com as quatro âncoras do `inset: 0`
       definidas, `height: auto` ESTICA a caixa de cima a baixo — a janela ficava
       com 700px de altura para 200px de conteúdo, com um vazio branco embaixo
       do botão. */
    height: fit-content;
    max-height: 85vh;
    margin: auto;
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-subtle);
  }

  .pendente__previa {
    width: 110px;
    height: 110px;
  }

  .associacao__acoes {
    justify-content: flex-end;
    padding-bottom: var(--spacing-16);
  }

  .associacao__acoes .botao {
    flex: 0 0 auto;
  }
}