/* Estilos customizados além do Tailwind */

/* Previne zoom duplo em botões/inputs no iOS */
button, a, input, select { touch-action: manipulation; }

/* Transições de página */
#app { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Padding inferior do conteúdo principal para não ficar atrás do bottom nav */
.main-content {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .main-content { padding-bottom: 2rem; }
}

/* Bottom nav safe area */
.bottom-nav-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item { -webkit-tap-highlight-color: transparent; min-height: 52px; }

/* Esconder scrollbar nos tabs de grupo */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Inputs de placar */
.score-input {
  width: 3rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  background: #464646;
  border: 2px solid #525252;
  border-radius: 0.5rem;
  color: #F4F4F4;
  padding: 0.25rem;
  outline: none;
  transition: border-color 0.15s;
}
.score-input:focus { border-color: #57B952; }
.score-input.saved { border-color: #358831; background: #0D260D; }
.score-input.unsaved { border-color: #ca8a04; }
.score-input:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 767px) {
  .score-input { width: 3.5rem; font-size: 1.5rem; padding: 0.35rem; min-height: 44px; }
}

/* Card de jogo */
.match-card {
  background: #292929;
  border: 1px solid #464646;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  transition: border-color 0.15s;
}
.match-card:hover { border-color: #525252; }
.match-card.completed { border-left: 3px solid #57B952; }
.match-card.pending { border-left: 3px solid #ca8a04; }
.match-card.locked { border-left: 3px solid #7C7C7C; opacity: 0.8; }

/* Ranking */
.rank-row { transition: background 0.1s; }
.rank-row:hover { background: #464646; }
.rank-1 .rank-badge { background: #ca8a04; color: #1a1a00; }
.rank-2 .rank-badge { background: #9ca3af; color: #111; }
.rank-3 .rank-badge { background: #b45309; color: #fff; }

/* Toast */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
}
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  min-width: 200px;
  animation: slideIn 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.toast-success { background: #204720; border: 1px solid #57B952; color: #9DDB9A; }
.toast-error   { background: #450a0a; border: 1px solid #ef4444; color: #fecaca; }
.toast-info    { background: #292929; border: 1px solid #7C7C7C; color: #DCDCDC; }
@keyframes slideIn { from { opacity:0; transform:translateX(2rem); } to { opacity:1; transform:translateX(0); } }

/* Badge de pontos */
.points-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.pts-20 { background: #204720; color: #9DDB9A; }
.pts-10-19 { background: #283B4F; color: #A3BFD6; }
.pts-1-9 { background: #3b2100; color: #fcd34d; }
.pts-0 { background: #464646; color: #7C7C7C; }