/* ============================================================
   Třídíme hliník – Vimpersko
   Custom styles (doplněk k Tailwind CDN)
   ============================================================ */

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- Selection color --- */
::selection {
  background-color: #81C784;
  color: #1B5E20;
}

/* --- Plechovkometr animace --- */
#canFill {
  transition: y 1.5s cubic-bezier(0.22, 1, 0.36, 1),
              height 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- CountUp animace --- */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* --- Leaderboard řádek animace --- */
#leaderboard-body tr {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}

/* --- Progress bar v tabulce --- */
.progress-bar-track {
  background-color: #E8F5E9;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
  min-width: 60px;
}

.progress-bar-fill {
  background: linear-gradient(90deg, #4CAF50, #81C784);
  height: 100%;
  border-radius: 9999px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Trend šipky --- */
.trend-up {
  color: #2E7D32;
}
.trend-down {
  color: #C62828;
}
.trend-same {
  color: #9E9E9E;
}

/* --- Medailová pozice --- */
.rank-1 { color: #F59E0B; font-weight: 800; }
.rank-2 { color: #9CA3AF; font-weight: 700; }
.rank-3 { color: #B45309; font-weight: 700; }

/* --- Pořadí badge --- */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
}
.rank-badge-1 {
  background: linear-gradient(135deg, #FFC107, #FFD54F);
  color: #7B6100;
}
.rank-badge-2 {
  background: linear-gradient(135deg, #BDBDBD, #E0E0E0);
  color: #424242;
}
.rank-badge-3 {
  background: linear-gradient(135deg, #CD7F32, #DDA15E);
  color: #5D3A1A;
}

/* --- Nová aktualizace badge --- */
.update-badge {
  display: inline-block;
  background-color: #E8F5E9;
  color: #2E7D32;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- QR kód container --- */
#qr-code img,
#qr-code canvas {
  display: block;
  margin: 0 auto;
}

/* --- Form focus ring --- */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* --- Placeholder images (border dashed boxes) --- */
[class*="border-dashed"] {
  background-size: cover;
  background-position: center;
}

/* --- Responsive nav scroll indicator --- */
@media (max-width: 768px) {
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Menší rank badge na mobilu */
  .rank-badge {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }

  /* Kompaktnější tabulka */
  #leaderboard-body td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* --- Hero parallax subtle effect --- */
@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

/* --- Print styles --- */
@media print {
  #hero, #registrace, #qr-code, footer {
    display: none !important;
  }
  #vysledky {
    display: block !important;
    padding: 1rem;
  }
}