/* pals-list.css — depende das variáveis e componentes definidos em codex.css */
.pointer-none{
	pointer-events: none;
}
.main-logo{
	max-height:50px;
}
.main-logo-24{
	max-height:24px;
}
.main-logo-32{
	max-height:32px;
}
.main-logo-48{
	max-height:48px;
}
.main-logo-60{
	max-height:60px;
}
.main-logo-64{
	max-height:64px;
}
.main-logo-80{
	max-height:80px;
}
.main-logo-90{
	max-height:90px;
}
.main-logo-100{
	max-height:100px;
}
.main-logo-128{
	max-height:128px;
}
.main-logo-150{
	max-height:150px;
}
.main-logo-160{
	max-height:160px;
}
.main-logo-180{
	max-height:180px;
}
.main-logo-200{
	max-height:200px;
}
.main-logo-220{
	max-height:220px;
}
.main-logo-250{
	max-height:250px;
}
.main-logo-256{
	max-height:256px;
}
.main-logo-512{
	max-height:512px;
}
.main-logo-640{
	max-height:640px;
}
.main-logo-720{
	max-height:720px;
}
.main-logo-800{
	max-height:800px;
}
.main-logo-900{
	max-height:900px;
}
.main-logo-1000{
	max-height:1000px;
}
.main-logo-1080{
	max-height:1080px;
}
.main-logo-1440{
	max-height:1440px;
}
.main-logo-1920{
	max-height:1920px;
}
.main-logo-2048{
	max-height:2048px;
}
[class^="main-logo"] {
    pointer-events: none;
}
/* ---------- Cabeçalho da listagem ---------- */
.pals-list-header{
  text-align:center;
  margin-bottom: 1.75rem;
}
.pals-list-header h1{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 2.3rem;
  color: var(--text-bright);
  margin: 0 0 .3rem;
}
.pals-list-header h1 em, em.header{
  font-style:italic;
  color: var(--accent);
}
.pals-list-header p{
  color: var(--text-dim);
  margin:0;
  font-size:.95rem;
}

/* ---------- Barra de filtros ---------- */
.filter-bar{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.filter-bar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: .75rem;
}
.filter-search{
  position:relative;
  flex: 1 1 260px;
  min-width: 220px;
}
.filter-search i.bi-search{
  position:absolute;
  left: .8rem; top:50%;
  transform:translateY(-50%);
  color: var(--text-dim);
  font-size:.85rem;
  pointer-events:none;
}
.filter-search input{
  width:100%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text);
  border-radius: 8px;
  padding: .55rem .85rem .55rem 2.1rem;
  font-size:.9rem;
}
.filter-search input::placeholder{ color: var(--text-dim); }
.filter-search input:focus{
  outline:none;
  color: var(--text-bright);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.filter-search-count{
  position:absolute;
  right: .75rem; top:50%;
  transform:translateY(-50%);
  font-family: var(--font-mono);
  font-size:.75rem;
  color: var(--text-dim);
  background: var(--panel);
  padding: .1rem .45rem;
  border-radius: 6px;
  border:1px solid var(--hairline);
  pointer-events:none;
}

.filter-select{
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text);
  border-radius: 8px;
  padding: .55rem .7rem;
  font-size:.88rem;
  flex: 0 0 auto;
}
.filter-select:focus{
  outline:none;
  color: var(--text-bright);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.filter-select option{ background: var(--panel-2); color: var(--text); }

.filter-sort-dir{
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 8px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.filter-sort-dir:hover{ color: var(--text-bright); border-color: var(--accent-line); }
.filter-sort-dir.desc i{ transform: rotate(180deg); }
.filter-sort-dir i{ transition: transform .15s ease; display:inline-block; }

.filter-btn-clear{
  border:1px solid var(--hairline);
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size:.85rem;
  white-space:nowrap;
  text-decoration:none;
  flex: 0 0 auto;
}
.filter-btn-clear:hover{ color: var(--text-bright); border-color: var(--accent-line); }

/* Linha de filtro por elemento (ícones) */
.filter-group{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.filter-group-label{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-bottom: .6rem;
}
.element-filters{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
}
.element-chip{
  --chip-color: #9aa0b4;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text-dim);
  border-radius: 20px;
  padding: .4rem .85rem .4rem .65rem;
  font-size:.8rem;
  text-decoration:none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.element-chip i{ color: var(--chip-color); font-size:.85rem; }
.element-chip img.icon-img{ width:.85rem; height:.85rem; }
.element-chip:hover{
  border-color: var(--chip-color);
  color: var(--text-bright);
}
.element-chip.active{
  border-color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 16%, var(--panel-2));
  color: var(--text-bright);
}

/* Chips de filtros ativos */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom: 1.5rem;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  color: var(--accent);
  font-size:.78rem;
  border-radius: 20px;
  padding: .3rem .7rem .3rem .9rem;
  text-decoration:none;
}
.filter-chip:hover{ background: var(--accent); color:#0a0d14; }
.filter-chip i{ font-size:.7rem; }

.results-count{
  color: var(--text-dim);
  font-size:.85rem;
  margin-bottom: 1.25rem;
}
.results-count b{ color: var(--text-bright); }

/* ---------- Grid de Pals ---------- */
.pal-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}
.pal-card{
  --rarity-color: #8b93a7;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  text-align:center;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  position:relative;
}


/* Base compartilhada */
.pal-card-template {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

/* Pal excluído */
.pal-card-excluido {
    background-color: rgba(95, 12, 18,0.3);
	background-image: url('/assets/img/bg-pal-excluido.webp?v=2');
}

/* Pal existe no código mas não foi implementado */
.pal-card-stub {
    background-color: rgba(18, 24, 92,0.3);
	background-image: url('/assets/img/bg-pal-stub.webp?v=2');
}

/* Pal existe mas não pode ser capturado */
.pal-card-incapturavel {
    background-color: rgba(125, 90, 12,0.3);
	background-image: url('/assets/img/bg-pal-incapturavel.webp?v=2');
}

.pal-card:hover{
  border-color: var(--rarity-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.5);
}
.pal-card-element{
  position:absolute;
  top: .6rem; left: .6rem;
  width: 22px; height: 22px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
/* Variante com até 2 elementos + ícone de noturno lado a lado (habilidade.php, item.php) */
.pal-card-elements{
  position:absolute;
  top: .6rem; left: .6rem;
  display:flex;
  align-items:center;
  gap:.3rem;
}
.pal-card-element-icon{
  width: 22px; height: 22px;
  border-radius:50%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pal-card-element-icon img{
  width:14px; height:14px;
  object-fit:contain;
}
.pal-card-topright{
  position:absolute;
  top: .8rem; right: .8rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.pal-card-number{
  font-family: var(--font-mono);
  font-size:.65rem;
  color: var(--text-dim);
}
.pal-card-type-icon{
  display:inline-block;
  width:16px; height:16px;
  flex-shrink:0;
}
/* Tipos sem tintura (OilRig, GYM, Predator, Police) usam a imagem como está */
.pal-card-type-icon img{
  width:100%; height:100%;
  object-fit:contain;
}
/* Tipos com tintura (BOSS, RAID em vermelho; SUMMON em amarelo) usam a
   imagem só como máscara — a cor de verdade vem do background */
.pal-card-type-icon.is-mascara{
  background-color: var(--tint-color, #ff3a3a);
  -webkit-mask-image: var(--tint-icon);
  mask-image: var(--tint-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* SUMMON usa gradiente em vez de cor sólida — some.usarGradiente na função PHP decide */
.pal-card-type-icon.is-mascara.is-gradiente{
  background: linear-gradient(135deg, var(--tint-color, #dfb90e), color-mix(in srgb, var(--tint-color, #dfb90e) 55%, white));
}
.pal-card-portrait-wrap{
  width:68px; height:68px;
  border-radius:50%;
  padding: 2px;
  background: var(--rarity-color);
  margin: .3rem 0 .75rem;
}
.pal-card-portrait{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  background: var(--panel-2);
  border: 2px solid var(--panel);
  display:block;
}
.pal-card-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.02rem;
  color: var(--text-bright);
  margin: 0 0 .5rem;
  line-height:1.2;
}
.pal-card-rarity{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.03em;
  color: var(--rarity-color);
  border: 1px solid var(--rarity-color);
  background: color-mix(in srgb, var(--rarity-color) 14%, transparent);
  border-radius: 20px;
  padding: .15rem .65rem;
}

/* ---------- Estado vazio ---------- */
.pals-empty{
  text-align:center;
  padding: 4rem 1rem;
  color: var(--text-dim);
}
.pals-empty i{
  font-size:2.2rem;
  color: var(--accent);
  margin-bottom:1rem;
  display:block;
}
.pals-empty h3{
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size:1.4rem;
  margin-bottom:.4rem;
}
.text-night{
	color: #b79fd8;
}

/* ---------- Paginação (compartilhada por toda página de listagem:
   itens.php, equipamentos.php, habilidades-ativas.php,
   habilidades-passivas.php, etc.) ---------- */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
  margin-top: 2rem;
}
.pagination-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  padding: 0 .6rem;
  border-radius: 8px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text);
  font-size:.85rem;
  text-decoration:none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pagination-link:hover{ border-color: var(--accent-line); color: var(--text-bright); }
.pagination-link.active{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight:600;
}
.pagination-link.disabled{
  opacity:.4;
  pointer-events:none;
}
.pagination-ellipsis{
  color: var(--text-dim);
  padding: 0 .3rem;
  font-size:.85rem;
}

/* ---------- Chips de estado/tipo (checkbox "Noturno" + radios de
   palstate: Excluído/Não Implementado/Não capturável/Disponíveis e
   os tipos RAID/GYM/BOSS/POLICE/SUMMON/OilRig) ---------- */
.state-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.state-chip{
  position:relative;
  display:inline-flex;
}
.state-chip input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
  margin:0;
  pointer-events:none;
}
.state-chip label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .95rem;
  border-radius:999px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text);
  font-size:.82rem;
  cursor:pointer;
  margin:0;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.state-chip label:hover{ border-color: var(--accent-line); color: var(--text-bright); }
.state-chip input:checked + label{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight:600;
}
.state-chip input:focus-visible + label{
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
}
.state-chip label i{ font-size:.95rem; }
.state-chip-icon{
  width:16px; height:16px;
  object-fit:contain;
  flex-shrink:0;
}
.filter-group-sublabel{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.05em;
  color: var(--text-dim);
  text-transform:uppercase;
  margin: .9rem 0 .5rem;
}
.filter-group-sublabel:first-of-type{ margin-top:0; }