/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   AS TRES TELAS DA JAP FRUTAS LENDO O SANKHYA (r91, item 2, 03/10/2026): Sazonalidade, Evolucao e Tendencia e Forca de
   Compra (assets/js/telas/sazonalidade.js, evolucao-e-tendencia.js, forca-de-compra.js e o que elas dividem em
   jap-comum.js). Esta folha SUBSTITUI a de 20/09/2026, que vestia a casca propria do desenho do James (barra lateral
   verde, cartoes pastel, cores amostradas das fotos): essa casca saiu, as tres telas usam a casa (grade solta, cartao,
   indicador, as classes `mva-` da analise de vendas e `escolha` da escolha com busca) e aqui mora so o que a casa nao
   tinha. Nenhuma cor escrita: so token, claro e escuro trocam sozinhos. Regua da Apple: alvo de toque de 44 px, letra de
   12 px no minimo, movimento de 200 ms que para com "reduzir movimento" (o bloco global de tokens.css), e nunca so a cor.
   ============================================================ */

/* a barra do produto: a escolha a esquerda, o que ha de pequeno a dizer (janela, atualizado em, meses pendentes) ao lado.
   Sem cartao em volta; `position`+`z-index` para a caixa da busca ficar POR CIMA dos cartoes que vem depois (cada um
   entra com animacao e cria o proprio empilhamento). */
.grade.solta > .jap-barra {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
}
.jap-barra .escolha-botao {
  width: auto;
  max-width: min(420px, 100%);
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.jap-barra .escolha-painel {
  right: auto;
  left: 0;
}
.jap-barra .escolha-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jap-barra-etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.jap-barra-etiquetas .etiqueta {
  white-space: normal;
  height: auto;
  min-height: 24px;
  padding-block: 4px;
}
.jap-contagem {
  margin: 0;
}
.jap-busca {
  flex: 1 1 260px;
  max-width: 420px;
}
.jap-busca .campo {
  min-height: 44px;
}
/* o foco da busca mora na caixa (desvio 4 do Carvalho, r32): o contorno de 2 px que scripts/testar-regua-apple.mjs (R4b) mede */
.jap-busca:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* o estado "nenhuma venda de produto guardada ainda": uma etiqueta e a saida, nunca um cartao de exemplo */
.grade.solta > .jap-vazio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

/* os tres destaques da Sazonalidade: o desenho dos numeros de cima da analise de vendas (`mva-chip`), com o mes grande */
.jap-destaque .mva-chip-valor {
  overflow-wrap: anywhere;
}
.jap-mes-nome {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
/* a janela escrita sobre o desenho: texto corrido, piso de 13 px no computador (regua da Apple); `.gr-nota` traz 12 px */
.jap-janela,
p.gr-nota.jap-janela {
  margin: 0 0 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.jap-grafico .cartao-corpo {
  min-width: 0;
}
.jap-tabela .cartao-corpo {
  min-width: 0;
}

/* a lista de produtos da Forca de Compra: cada produto e uma linha que abre (a venda dele no ultimo ano numa barra
   curta, na mesma regua de todos) e so entao pergunta ao Sankhya */
.jap-produtos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jap-produtos > li + li {
  border-top: 1px solid var(--border);
}
.jap-produto > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px;
  list-style: none;
  cursor: pointer;
}
.jap-produto > summary::-webkit-details-marker {
  display: none;
}
.jap-produto > summary > svg {
  width: 16px;
  color: var(--muted-foreground);
  transform: rotate(90deg); /* o chevron do icone aponta para a direita: fechado, para baixo */
  transition: transform 200ms var(--saida);
}
.jap-produto[open] > summary > svg {
  transform: rotate(-90deg);
}
.jap-produto-nome {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.jap-produto-trilho {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--muted);
  overflow: hidden;
}
.jap-produto-barra[data-vazio] {
  min-width: 0;
}
.jap-produto-barra {
  display: block;
  width: calc(var(--f, 0) * 100%);
  min-width: 2px;
  height: 100%;
  border-radius: 4px;
  background: var(--grafico-serie-1);
}
.jap-produto-venda {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.jap-produto-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px 24px;
  padding: 8px 16px 20px;
}
.jap-bloco {
  min-width: 0;
}
.jap-bloco .mva-chips {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin-bottom: 0;
}
.jap-bloco-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 8px;
}
.jap-bloco-cab .mva-sub {
  margin: 0;
}
.jap-total {
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.jap-quanto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  grid-column: 1 / -1;
}
.jap-quanto-rotulo {
  font-size: 13px;
  color: var(--muted-foreground);
}
@media (max-width: 600px) {
  /* 8 px em cima: com a foto da fruta (28 px) a primeira linha encosta no fio de cima com os 6 px do computador (a regua
     da Apple pede 8, scripts/testar-telas-jap.mjs, grupo L) */
  .jap-produto > summary {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    row-gap: 6px;
    padding-block: 8px;
  }
  .jap-produto-trilho {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* os clientes da Evolucao levam a participacao em dinheiro ao lado da variacao ("34,6% da venda"): a coluna do apoio da linha de
   barra (6,75 rem na analise de vendas) e curta para os dois e o texto passava por cima da barra; aqui ela e mais larga */
.mva-clientes .gr-div-botao {
  grid-template-columns: minmax(0, 1fr) 12.5rem;
}
@media (max-width: 600px) {
  /* no celular a coluna larga comia a barra e cortava o nome: o apoio desce para a linha de baixo, na largura inteira */
  .mva-clientes .gr-div-botao {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome valor" "trilho trilho" "apoio apoio";
  }
  .mva-clientes .gr-div-apoio {
    justify-self: start;
  }
}

/* quem nos vendeu (Forca de Compra): o desenho da casa de barras horizontais poe rotulo, trilho e numeros na mesma linha, e
   numa coluna de metade da tela o trilho virava um risco e o nome saia cortado. Aqui o nome e a quilagem ficam em cima, o trilho
   na largura inteira embaixo (todos iguais, entao a razao entre duas barras continua sendo a razao entre os numeros) e o resto
   (valor, preco, notas, ultima compra) numa linha miuda. */
.jap-bloco .grafico-hbarras {
  grid-template-columns: minmax(0, 1fr);
}
.jap-bloco .hbarra {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 4px;
}
.jap-bloco .hbarra-fim {
  display: contents;
}
.jap-bloco .hbarra-rotulo {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
}
.jap-bloco .hbarra-valor {
  grid-column: 2;
  grid-row: 1;
}
.jap-bloco .hbarra-trilho {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 14px;
}
.jap-bloco .hbarra-apoio {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: left;
}

/* ---------- a foto da fruta (05/10/2026, o Carvalho: "aqui você coloca as imagens que você criou no ChatGPT"; r102,
   07/10/2026: "coloque as fotos das frutas também nas telas da jap onde diz respeito a elas") ----------
   Redonda, ao lado do nome: 28 px numa lista, 44 px na escolha do produto, 96 px no cartao do produto (PADRAO-JAMES
   secao 7). Produto SEM foto nao ganha nada no lugar (nem bolinha, nem inicial: ordem de 07/10, que vence a de 05/10);
   numa lista, o nome dele fica alinhado com os que tem foto, e o espaco da foto fica vazio, sem desenho. */
.fruta-foto {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
}
.fruta-foto-media {
  width: 44px;
  height: 44px;
}
.fruta-foto-grande {
  width: 96px;
  height: 96px;
}
/* o nome de um produto numa lista (`comFruta`, jap-comum.js): a foto antes, o que a linha ja dizia ao lado */
.fruta-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fruta-nome > :not(.fruta-foto) {
  flex: 1 1 auto;
  min-width: 0;
}
/* O ALINHAMENTO: numa lista com ao menos uma foto, o nome sem foto comeca onde comecam os outros (28 px da foto mais os
   8 do vao), e o espaco fica vazio. Lista sem fruta nenhuma (so batata, cebola, "MÓDULO 1 ILHA 07") nao guarda espaco. */
:is(.tabela, .jap-produtos, .grafico-hbarras):has(.fruta-foto) .fruta-nome:not(:has(> .fruta-foto)) {
  padding-left: 36px;
}
/* o nome da barra do ranking (O que vende): a foto entra no proprio rotulo, que continua cortando com reticencias */
.hbarra-rotulo > .fruta-foto {
  margin-right: 8px;
  vertical-align: middle;
}
.grafico-hbarras:has(.fruta-foto) .hbarra-rotulo:not(:has(> .fruta-foto)) {
  padding-left: 36px;
}
.jap-ranking .hbarra-rotulo {
  max-width: 180px;
}
.jap-escolha .escolha-botao.com-fruta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  min-height: 52px;
  padding-block: 4px;
}
.jap-escolha .escolha-botao-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a lista da escolha: com alguma foto, toda opcao guarda a coluna da foto (vazia na que nao tem) */
.jap-escolha .escolha-lista:has(.fruta-foto) [role="option"] {
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
.jap-escolha .escolha-lista [role="option"] > .fruta-foto {
  grid-row: span 2;
}
.jap-escolha .escolha-lista:has(.fruta-foto) [role="option"] > :not(.fruta-foto) {
  grid-column: 2;
}

/* ---------- os dois desenhos alinhados da Evolucao (vitrine da 017, r98, 04/10/2026) ----------
   No lugar do eixo duplo do desenho: quilos em cima, preco do quilo embaixo, os mesmos meses no eixo de baixo. */
.jap-alinhados {
  display: grid;
  gap: 16px;
}

/* ---------- a cara do desenho do James nas tres telas da JAP (r102, 07/10/2026, o Carvalho: "prefiro as telas do james,
   com cores nos cards e degradês") ----------
   Os numeros de cima (`mva-chip`: os tres destaques da Sazonalidade, e a venda, os quilos e o preco da Evolucao e da
   Forca de Compra) viram cartoes coloridos, com o MESMO receituario do cartao de numero da camada comum (PADRAO-JAMES
   secao 2): degrade diagonal do fundo do tom ate o cartao, borda fina do tom, texto na tinta de texto. O tom: a venda e
   dinheiro que entra (verde); o resto nao tem juizo de valor e vai pelo rodizio de assunto (azul, turquesa, violeta),
   nunca coral nem ambar, que querem dizer ruim e atencao. A seta da variacao continua na cor do SENTIDO (`variacao()`).
   So nas telas da JAP (`[data-jap-tela]`): a mesma peca mora na Maquina de Vendas, que e de outra porta. */
[data-jap-tela] .mva-chip {
  --jap-tom: var(--tom-azul);
  --jap-tom-fundo: var(--tom-azul-fundo);
  border: 1px solid color-mix(in srgb, var(--jap-tom) 24%, transparent);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--jap-tom-fundo) 0%, color-mix(in srgb, var(--jap-tom-fundo) 40%, var(--card)) 100%);
}
[data-jap-tela] .mva-chip[data-chip="venda"] {
  --jap-tom: var(--tom-verde);
  --jap-tom-fundo: var(--tom-verde-fundo);
}
[data-jap-tela] .mva-chip:is([data-chip="preco"], [data-destaque="caro"]) {
  --jap-tom: var(--tom-turquesa);
  --jap-tom-fundo: var(--tom-turquesa-fundo);
}
[data-jap-tela] .mva-chip[data-destaque="venda"] {
  --jap-tom: var(--tom-violeta);
  --jap-tom-fundo: var(--tom-violeta-fundo);
}
[data-jap-tela] .mva-chip-valor {
  color: var(--foreground);
}
/* o numero de 26 px do padrao so nos tres destaques da Sazonalidade (um mes, curto): nos cartoes estreitos da Forca de
   Compra "R$ 5.780,00" a 26 px quebrava no meio do numero, e ali fica o tamanho da casa (22 px) */
[data-jap-tela] .jap-destaque .mva-chip-valor {
  font-size: 26px;
}
/* a etiqueta de variacao tinha o fundo do proprio tom, que agora pode ser o fundo do cartao inteiro: ganha o branco */
[data-jap-tela] .mva-chip .tendencia {
  background: var(--card);
}