@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .topbar {
    left: 0 !important;
  }

  .menu-toggle {
    display: flex;
  }

  .page-container {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; }

  .summary-cards { grid-template-columns: repeat(2, 1fr); }

  .scoreboard-table { display: none; }
  .mobile-card-list { display: block; }

  .page-header { flex-direction: column; align-items: flex-start; }

  .competition-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .competition-tab { white-space: nowrap; }

  .add-match-form { grid-template-columns: 1fr; }

  .score-input-grid { grid-template-columns: repeat(2, 1fr); }

  .match-card { padding: 16px; }
  .match-teams { flex-direction: column; gap: 8px; }
  .match-team { width: 100%; }

  .modal { max-width: 100%; margin: 10px; }

  .page-title { font-size: var(--font-size-xl); }

  .topbar-date { display: none; }

  .filter-group { width: 100%; }
  .search-box { max-width: 100%; width: 100%; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .toast-container { right: 10px; left: 10px; }
  .toast { min-width: auto; max-width: 100%; }

  .bracket-display { gap: 30px; }
  .bracket-round { min-width: 200px; }
  .bracket-match { min-width: 180px; }

  .scoreboard-card-header { flex-direction: column; align-items: flex-start; }

  .athletics-card-header { flex-direction: column; align-items: flex-start; }

  .page-section { padding: 0; }
}

@media (max-width: 480px) {
  .summary-cards { grid-template-columns: 1fr; }
  .page-container { padding: 16px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: var(--font-size-2xl); }
  .leaderboard-item { padding: 12px; }
  .score-input-grid { grid-template-columns: repeat(2, 1fr); }
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sidebar) - 1);
}

.sidebar-overlay.active {
  display: block;
}