/* solver-completo.css — depende de codex.css, pals-list.css e breeding-calc.css.
   Estilos exclusivos da calculadora "Solver Completo": inputs de IV alvo
   e o grafo de árvore de reprodução (nós + setas conectoras em SVG). */

/* ---------- Colunas com altura máxima + scroll interno (Pal Alvo | Metas) ---------- */
.solver-coluna-scroll{
  max-height: 640px;
  overflow-y: auto;
  padding-right:.25rem;
}
.solver-coluna-scroll::-webkit-scrollbar{ width:8px; }
.solver-coluna-scroll::-webkit-scrollbar-thumb{ background: var(--hairline); border-radius:999px; }

/* ---------- Inputs de IV alvo ---------- */
.solver-iv-inputs{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.solver-iv-inputs label{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.solver-iv-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.solver-iv-inputs input{
  width:89px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  color: var(--text-bright);
  padding:.5rem 2.1rem .5rem .6rem;
  font-family: var(--font-mono);
  font-size:.95rem;
}
.solver-iv-input-max{
  position:absolute;
  right:.6rem;
  font-family: var(--font-mono);
  font-size:.7rem;
  color: var(--text-dim);
  pointer-events:none;
}
.solver-iv-inputs input:focus{
  outline:none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Resumo dos Pals possuídos ---------- */
.solver-owned-summary{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1rem;
}
.solver-owned-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:.3rem .7rem .3rem .3rem;
  font-size:.78rem;
  color: var(--text-dim);
}
.solver-owned-chip img{
  width:22px; height:22px;
  border-radius:50%;
  object-fit:cover;
}
.solver-owned-chip b{ color: var(--text-bright); font-weight:600; }

/* ---------- Botão salvar rota ---------- */
.solver-salvar-rota-wrap{
  display:flex;
  justify-content:flex-end;
  margin-bottom:.75rem;
}
.solver-salvar-rota-btn{
  max-width:220px;
  cursor:pointer;
  border:1px solid var(--hairline);
  background: var(--panel-2);
}
.solver-salvar-rota-btn:disabled{ opacity:.7; cursor:default; }

/* ---------- Alertas (passiva impossível / já possuído) ---------- */
.solver-alert{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  border-radius:12px;
  padding:.8rem 1rem;
  font-size:.85rem;
  line-height:1.5;
  margin-bottom:1rem;
}
.solver-alert i{ margin-top:.15rem; flex-shrink:0; }
.solver-alert--warning{
  background: rgba(203,168,106,.1);
  border:1px solid var(--gold-soft);
  color: var(--gold);
}
.solver-alert--info{
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  color: var(--accent);
}

/* ---------- Seção "com seus Pals atuais" (rotas prontas pra usar HOJE --
   mesmo tratamento em caixa da seção "Pals novos" abaixo, cor --accent
   (a de "pronto/positivo", igual .solver-alert--info) em vez de --gold
   ("precisa de algo a mais") -- as 3 seções têm peso visual igual,
   distinguidas por cor/significado, nunca por uma parecer secundária) ---------- */
.solver-secao-possuidos{
  padding:1.1rem 1.15rem;
  border:1px solid var(--accent-line);
  border-radius:14px;
  background: var(--accent-soft);
  margin-bottom:1rem;
}
.solver-label-possuidos{ color: var(--accent); }
.solver-secao-possuidos .solver-opcoes-lista{ margin-bottom:0; }
.solver-secao-possuidos .solver-opcao-chip{
  border-color: var(--accent-line);
  background: var(--panel);
}
.solver-secao-possuidos .solver-opcao-chip:hover,
.solver-secao-possuidos .solver-opcao-chip.is-active{
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Seção "Pals novos" (rotas que exigem Tribos ainda não possuídos --
   destaque FORTE de propósito, oposto do tratamento "apagado" da seção
   "sem passiva" abaixo: é uma opção válida e diferente, não uma
   curiosidade descartável) ---------- */
.solver-secao-pals-novos{
  margin-top:1.5rem;
  padding:1.1rem 1.15rem;
  border:1px solid var(--gold-soft);
  border-radius:14px;
  background: var(--gold-soft);
}
.solver-label-pals-novos{ color: var(--gold); }
.solver-opcoes-lista--pals-novos .solver-opcao-chip{
  border-color: var(--gold-soft);
  background: var(--panel);
  color: var(--gold);
}
.solver-opcoes-lista--pals-novos .solver-opcao-chip:hover,
.solver-opcoes-lista--pals-novos .solver-opcao-chip.is-active{
  border-color: var(--gold);
  background: rgba(203,168,106,.22);
  color: var(--gold);
}

/* ---------- Seção "sem passiva" (informação adicional, visual apagado) ---------- */
.solver-secao-sem-passiva{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px dashed var(--hairline);
}
.solver-label-dim{ opacity:.7; }
.solver-opcoes-lista--dim .solver-opcao-chip{
  opacity:.6;
}
.solver-opcoes-lista--dim .solver-opcao-chip:hover,
.solver-opcoes-lista--dim .solver-opcao-chip.is-active{
  opacity:1;
}

/* ---------- Loader (calculando) ---------- */
.solver-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:2rem 0;
}

/* ---------- Lista de rotas alternativas ---------- */
.solver-opcoes-lista{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin: .75rem 0 .5rem;
}
.solver-opcao-chip{
  display:flex;
  align-items:center;
  gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:.4rem .8rem;
  font-size:.75rem;
  color: var(--text-dim);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.solver-opcao-chip:hover{
  border-color: var(--accent-line);
  color: var(--text-bright);
}
.solver-opcao-chip.is-active{
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.solver-opcao-chip-num{
  font-family: var(--font-mono);
  font-weight:700;
}
.solver-opcao-chip-q{
  font-family: var(--font-mono);
  opacity:.8;
}

/* ---------- Container do grafo ---------- */
.solver-graph-wrap{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 1.5rem .5rem;
  -webkit-overflow-scrolling: touch;
}
.solver-graph{
  position:relative;
  display:flex;
  gap: 64px;
  align-items:flex-start;
  min-height: 120px;
}
.solver-graph-svg{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:visible;
}
.solver-graph-svg path{
  fill:none;
  stroke: var(--accent-line);
  stroke-width:2;
}
.solver-graph-svg path.is-real-leaf{
  stroke: var(--accent);
}

/* ---------- Coluna (geração) ---------- */
.solver-graph-col{
  display:flex;
  flex-direction:column;
  gap: 22px;
  flex-shrink:0;
  width: 216px;
}

/* ---------- Nó (card de um Pal na árvore) ---------- */
.solver-node{
  position:relative;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:.75rem .9rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:64px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.solver-node--folha{
  border-color: var(--accent-line);
}
.solver-node--alvo{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.solver-node-portrait{
  width:42px; height:42px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--hairline);
  flex-shrink:0;
  background: var(--panel-2);
}
/* Pal veio do Armazenamento Dimensional (em vez do Palbox de uma base) --
   ver identificarContainersDeArmazenamentoDimensional() em parseSave.js. */
.solver-node-portrait--dimensional{
  border:2px solid #4fffd8;
  box-shadow: 0 0 0 2px rgba(79,255,216,.25);
}
.solver-node-info{
  min-width:0;
  flex:1;
}
.solver-node-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:.95rem;
  color: var(--text-bright);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.solver-node-nickname{
  font-size:.68rem;
  color: var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.solver-node-badge-bred{
  font-family: var(--font-mono);
  font-size:.6rem;
  letter-spacing:.05em;
  color: var(--accent);
  text-transform:uppercase;
}
.solver-node-ivs{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.15rem;
  font-family: var(--font-mono);
  font-size:.62rem;
  color: var(--text-dim);
}
.solver-node-ivs span b{ color: var(--text-bright); }
/* Ícone de sexo (Macho/Fêmea) -- só informativo, ver generoInfo() em
   solver-grafo-render.js. */
.solver-node-gender{
  width:24px; height:24px;
  object-fit:contain;
  flex-shrink:0;
}
.solver-node-dimensional-storage-icon{
  width:18px; height:18px;
  margin-left:-5px;
  object-fit:contain;
  flex-shrink:0;
}
.solver-node--alvo .solver-node-dimensional-storage-icon, .solver-node.solver-node--bred .solver-node-dimensional-storage-icon {
	display:none;
}
.solver-node-passivas{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  margin-top:.3rem;
}
.solver-node-passiva-tag{
  font-size:.6rem;
  padding:.1rem .4rem;
  border-radius:999px;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text-dim);
}
.solver-node-passiva-tag.is-desejada{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* ---------- Troca de instância (quando há mais de uma do mesmo Tribo) ---------- */
.solver-node-swap{
  position:absolute;
  top:-.5rem;
  right:-.5rem;
  width:24px; height:24px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  cursor:pointer;
}
.solver-node-swap:hover{
  border-color: var(--accent-line);
  color: var(--accent);
}
.solver-node-swap-menu{
  position:absolute;
  top:calc(100% + .35rem);
  right:0;
  z-index:20;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:.4rem;
  min-width:200px;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.7);
}
.solver-node-swap-option{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  padding:.35rem .5rem;
  border-radius:6px;
  font-size:.72rem;
  color: var(--text-dim);
  cursor:pointer;
}
.solver-node-swap-option:hover{ background: var(--panel); color: var(--text-bright); }
.solver-node-swap-option.is-current{ color: var(--accent); }
.solver-node-swap-option-selo{
  color:#4fffd8;
  margin-right:.3rem;
}

/* ---------- Resumo de probabilidade ---------- */
.solver-prob-summary{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.25rem;
}

/* "Chance de ter tudo junto" -- mesmo número do chip da rota na lista,
   destacado à parte pra deixar claro que "Esta passiva" e "IVs" (mais
   abaixo, cada um só com sua própria parte) não se contradizem com ele
   -- são três perguntas diferentes, não três respostas conflitantes. */
.solver-prob-combinada{
  width:100%;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:14px;
  padding:1rem 1.15rem;
}
.solver-prob-combinada-label{
  font-family: var(--font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--accent);
  margin-bottom:.3rem;
}
.solver-prob-combinada-value{
  font-family: var(--font-display);
  font-size:2rem;
  font-weight:700;
  color: var(--accent);
}
.solver-prob-combinada-sub{
  font-size:.75rem;
  color: var(--text-dim);
  margin-top:.3rem;
  max-width:52ch;
}
.solver-prob-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:.85rem;
  width:100%;
}
.solver-prob-card{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:.9rem 1.1rem;
  flex:1;
  min-width:180px;
}
.solver-prob-card-label{
  font-family: var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--text-dim);
  margin-bottom:.3rem;
}
.solver-prob-card-value{
  font-family: var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  color: var(--text-bright);
}
.solver-prob-card-sub{
  font-size:.72rem;
  color: var(--text-dim);
  margin-top:.15rem;
}

@media (max-width: 767px){
  .solver-graph{ gap: 40px; }
  .solver-graph-col{ width: 168px; }
  .solver-node-portrait{ width:34px; height:34px; }
}