/* Mobile responsive styles */

@media (max-width: 768px) {
  .page-header {
    padding: 1rem;
  }

  .header-left {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
  }

  .logo-section h1 {
    font-size: 2rem;
  }

  .logo-section p {
    display: none; /* Hide tagline on mobile to save space */
  }

  .nav-links {
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .nav-links a {
    font-size: 1rem;
    padding: 0.3rem 0;
  }

  .nav-links a.btn-upload {
    margin-left: auto;
    padding: 0.4rem 1rem;
  }

  /* Stats should wrap nicely on mobile */
  .page-stats {
    font-size: 1.2rem;
    padding: 1rem;
    gap: 1rem;
  }

  .page-stats span {
    flex: 1 1 auto;
    min-width: 150px;
  }

  #toggle-leaderboard {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  /* Reposition leaderboard on mobile */
  #leaderboard {
    width: 90% !important;
    left: 5% !important;
    right: 5% !important;
    top: auto !important;
    bottom: 100px !important;
    max-height: 50vh;
    overflow-y: auto;
  }

  .legend {
    bottom: 3rem;
    right: 0.5rem;
    max-width: 180px;
    font-size: 0.9rem;
    padding: 0.75rem;
  }

  /* Footer adjustments */
  footer {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  footer .author {
    font-size: 1.1rem;
  }

  footer .social-links {
    gap: 0.5rem;
  }

  footer .social-icons {
    font-size: 1.1rem;
  }

  footer .version {
    font-size: 1rem;
    padding: 0.15rem 0.5rem;
  }

  /* Table responsive */
  .datasets-table {
    font-size: 0.9rem;
  }

  .datasets-table th,
  .datasets-table td {
    padding: 0.5rem;
  }

  /* Hide some columns on mobile */
  .datasets-table th:nth-child(4),
  .datasets-table td:nth-child(4),
  .datasets-table th:nth-child(5),
  .datasets-table td:nth-child(5) {
    display: none;
  }

  /* Page container */
  .page-container {
    padding: 1rem;
  }

  /* Video container */
  .video-container {
    padding: 1rem;
  }
}