/* Make table headers sticky for all tables */
table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
}
.live-game { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { background-color: #fef3c7; } 50% { background-color: #fffbeb; } }
.status-final { @apply bg-green-100 text-green-800; }
.status-1st-quarter { @apply bg-blue-100 text-blue-800 animate-pulse; }
.mnf { @apply ring-2 ring-orange-500; }

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Larger touch targets for radio buttons and checkboxes on mobile */
@media (max-width: 767px) {
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
  }

  /* Ensure tables don't break the layout */
  table {
    font-size: 0.75rem;
  }

  table th,
  table td {
    padding: 0.35rem 0.5rem;
  }

  /* Make the picks form more touch-friendly */
  .space-x-4 label {
    padding: 0.25rem;
  }

  /* Stack button groups on mobile */
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mobile-stack > * {
    width: 100% !important;
    text-align: center;
  }

  /* Smaller headings on mobile */
  h1.text-3xl {
    font-size: 1.5rem;
  }

  h2.text-2xl {
    font-size: 1.25rem;
  }

  /* Quick-select buttons wrap */
  .picks-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center !important;
  }

  .picks-buttons button {
    flex: 1 1 auto;
    min-width: 70px;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  /* Leaderboard action buttons stack */
  .action-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }

  .action-buttons > div {
    width: 100%;
  }

  .action-buttons a {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Messages header buttons wrap */
  .msg-header-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Admin grid: single column on mobile */
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Small phone adjustments */
@media (max-width: 380px) {
  table {
    font-size: 0.65rem;
  }

  table th,
  table td {
    padding: 0.25rem 0.35rem;
  }

  .picks-buttons button {
    min-width: 60px;
    font-size: 0.65rem;
    padding: 0.4rem 0.5rem;
  }
}

/* Ensure overflow containers work */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}