/*
 * IdleMon — Design System de menus (.ui-*)
 * Componentes canônicos extraídos do Hunt Atlas e do Systems (master-ui),
 * 100% baseados nos tokens de :root em idlemon-theme.css.
 * Uso e anatomia: docs/UI-COMPONENTS.md. Migração: docs/PLANO-PADRONIZACAO-UI.md.
 *
 * Regra: menu novo/migrado usa SÓ estas classes + tokens. Nada de hex/px mágico.
 * Este arquivo NÃO altera Atlas/Systems/Altar/Breeding (que mantêm suas classes).
 */

/* ---- Shell do diálogo (dentro de .city-dialog / .ui-overlay) -------------- */
.ui-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:18px;background:#030806e6}
.ui-overlay.hidden{display:none}
.ui-card{
  position:relative;width:min(880px,96vw);max-height:92vh;display:flex;flex-direction:column;
  padding:20px 22px;border:2px solid var(--bevel-dark);border-radius:8px;
  background:linear-gradient(160deg,var(--stone-600),var(--stone-700) 52%);
  box-shadow:var(--bevel-strong),0 30px 80px #000;
}
.ui-card.ui-card-sm{width:min(560px,96vw)}
.ui-card.ui-card-lg{width:min(1120px,96vw)}
.ui-card>.dialog-close{border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-800);color:var(--parchment-dim);box-shadow:var(--bevel)}
.ui-card>.dialog-close:hover{color:var(--poke-yellow);border-color:var(--gold)}
.ui-body{display:grid;gap:10px;align-content:start;overflow-y:auto;padding:2px 4px 2px 2px}

/* ---- Cabeçalho ------------------------------------------------------------ */
.ui-head{padding-right:36px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--bevel-dark);box-shadow:0 1px 0 var(--bevel-light)}
.ui-head h2{margin:2px 0 4px;color:var(--parchment);font:600 22px var(--font-display);letter-spacing:.3px}
.ui-head p{margin:0;color:var(--parchment-dim);font:400 12px var(--font-body);line-height:1.45;max-width:64ch}

/* ---- Seção ---------------------------------------------------------------- */
.ui-section{display:grid;gap:7px;align-content:start}
.ui-section>.eyebrow{display:block}
.ui-hint{margin:0;color:var(--parchment-dim);font:400 11px var(--font-body);line-height:1.45}

/* ---- Grade + card clicável (tile) ----------------------------------------- */
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ui-tile{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-800);box-shadow:var(--bevel);color:var(--parchment);cursor:pointer;text-align:left;transition:border-color .15s ease}
.ui-tile:hover:not(:disabled){border-color:var(--gold)}
.ui-tile.selected,.ui-tile.active{border-color:var(--gold);background:var(--stone-700);box-shadow:var(--bevel),0 0 10px #d4a83c33}
.ui-tile.caught{box-shadow:var(--bevel),inset 3px 0 0 var(--gold)}
.ui-tile.locked,.ui-tile:disabled{opacity:.5;filter:grayscale(.6);cursor:not-allowed}

/* Moldura de ícone dentro do tile/row */
.ui-iconbox{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-700);box-shadow:var(--bevel);color:var(--gold-soft)}
.ui-iconbox .ui-icon,.ui-iconbox svg{width:22px;height:22px}

/* Bloco de texto padrão (título + legenda) */
.ui-copy{display:grid;gap:2px;min-width:0}
.ui-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--parchment);font:600 11px var(--font-display)}
.ui-copy small{color:var(--parchment-dim);font:400 10px var(--font-body)}

/* ---- Linha de lista (row) ------------------------------------------------- */
.ui-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-800);box-shadow:var(--bevel)}
.ui-row>div{display:grid;gap:2px;min-width:0}
.ui-row b{color:var(--parchment);font:600 11px var(--font-display)}
.ui-row small{color:var(--parchment-dim);font:400 11px var(--font-body)}
.ui-row.ready{border-color:var(--gold)}
.ui-row.done b{color:var(--gold-soft)}

/* ---- Selo / estado (pill) ------------------------------------------------- */
.ui-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid var(--bevel-dark);border-radius:4px;background:var(--stone-700);color:var(--gold-soft);font:400 11px var(--font-num);font-style:normal}
.ui-pill b{color:var(--poke-yellow);font-weight:400}

/* ---- Botões --------------------------------------------------------------- */
.ui-btn{padding:6px 12px;border:1px solid var(--bevel-dark);border-radius:4px;background:var(--stone-800);box-shadow:var(--bevel);color:var(--parchment-dim);font:600 10px var(--font-display);cursor:pointer;transition:border-color .15s ease}
.ui-btn:hover:not(:disabled){color:var(--poke-yellow);border-color:var(--gold)}
.ui-btn:disabled{opacity:.4;cursor:not-allowed}
/* CTA dourado — ação primária comum (comprar, salvar, confirmar) */
.ui-btn-primary{padding:11px 16px;border:0;border-radius:8px;background:linear-gradient(180deg,#efd276,#b8923f);color:#1a140c;font:700 12px var(--font-display);cursor:pointer;transition:filter .15s ease}
.ui-btn-primary:hover:not(:disabled){filter:brightness(1.05)}
.ui-btn-primary:disabled{opacity:.4;cursor:not-allowed}
/* CTA vermelho "ir" forte — como o Caçar do Atlas (começar/entrar) */
.ui-btn-go{padding:12px 18px;border:2px solid #14100a;border-radius:6px;background:linear-gradient(#ff5a2b,var(--poke-red) 45%,#c22a08);color:#fff;font:600 12px var(--font-display);text-shadow:1px 1px 0 var(--poke-red-dark);box-shadow:0 3px 0 var(--poke-red-dark),0 6px 14px #0008,inset 1px 1px 0 #ff8a5f;cursor:pointer;transition:.15s}
.ui-btn-go:hover:not(:disabled){filter:brightness(1.06)}
.ui-btn-go:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--poke-red-dark)}
.ui-btn-go:disabled{opacity:.4;filter:grayscale(.4);cursor:not-allowed}

/* ---- Rodapé de ação ------------------------------------------------------- */
.ui-foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:2px solid var(--bevel-dark);box-shadow:0 -1px 0 var(--bevel-light)}
.ui-back{justify-self:start;padding:6px 12px;border:1px solid var(--bevel-dark);border-radius:4px;background:var(--stone-800);box-shadow:var(--bevel);color:var(--parchment-dim);font:600 10px var(--font-display);cursor:pointer}
.ui-back:hover{color:var(--poke-yellow);border-color:var(--gold)}

/* ---- Mini-stat + barra de progresso --------------------------------------- */
.ui-stat{display:grid;gap:3px;padding:8px;border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-700);box-shadow:var(--bevel);text-align:left}
.ui-stat small{color:var(--parchment-dim);font:600 8px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.ui-stat b{color:var(--gold-soft);font:400 14px var(--font-num)}
.ui-progress{height:9px;overflow:hidden;border:2px solid var(--bevel-dark);border-radius:6px;background:var(--stone-800)}
.ui-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}

/* ---- Campo de busca ------------------------------------------------------- */
.ui-search{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--bevel-dark);border-radius:8px;background:var(--stone-800);color:var(--parchment-dim)}
.ui-search input{flex:1;border:0;background:transparent;color:var(--parchment);font:500 13px var(--font-ui);outline:none}

/* ---- Campo de formulário -------------------------------------------------- */
.ui-field{display:grid;gap:4px}
.ui-field>span{color:var(--parchment-dim);font:600 9px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.ui-field input,.ui-field select{padding:8px 10px;border:1px solid var(--bevel-dark);border-radius:6px;background:var(--stone-800);box-shadow:var(--bevel);color:var(--parchment);font:400 13px var(--font-num);outline:none}
.ui-field input:focus,.ui-field select:focus{border-color:var(--gold)}

@media(max-width:860px){
  .ui-foot{grid-template-columns:1fr;justify-items:stretch}
  .ui-grid{grid-template-columns:1fr}
}