/* ============================================================
   E-LEARNING PLATFORM — Responsive Breakpoints
   Desktop-first approach: Desktop ≥1200 | Tablet 768-1199 | Mobile <768
   ============================================================ */

/* ── Tablet (768px - 1199px) ── */
@media (max-width: 1199px) {
  .sidebar { width: var(--sidebar-collapsed-width); }
  .sidebar .brand-text { opacity: 0; width: 0; }
  .sidebar .nav-label { opacity: 0; width: 0; }
  .sidebar .nav-badge { display: none; }
  .sidebar .nav-section-title { text-align: center; font-size: 0; }
  .sidebar .nav-section-title::after { content: '•••'; font-size: var(--font-size-xs); color: var(--gray-500); }
  .sidebar .sidebar-toggle span { opacity: 0; width: 0; }

  .main-content { margin-left: var(--sidebar-collapsed-width); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid-2, .content-grid-2-1, .content-grid-1-2 { grid-template-columns: 1fr; }
  .content-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  :root {
    --content-padding: var(--space-4);
  }

  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-sidebar);
  }

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

  .sidebar.mobile-open .brand-text { opacity: 1; width: auto; }
  .sidebar.mobile-open .nav-label { opacity: 1; width: auto; }
  .sidebar.mobile-open .nav-badge { display: flex; }
  .sidebar.mobile-open .nav-section-title { text-align: left; font-size: var(--font-size-xs); }
  .sidebar.mobile-open .nav-section-title::after { content: none; }

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

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

  .topbar-hamburger { display: flex; }
  .topbar-search { display: none; }
  .topbar-user-info { display: none; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .content-grid-2, .content-grid-3, .content-grid-2-1, .content-grid-1-2 { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: 1fr; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-actions { width: 100%; }

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-item { flex-shrink: 0; }

  .data-table { display: block; overflow-x: auto; }

  .modal { width: 95%; max-width: none; margin: var(--space-4); }

  .toast-container { left: var(--space-4); right: var(--space-4); }
  .toast { min-width: auto; }

  h1 { font-size: var(--font-size-lg); }
  h2 { font-size: var(--font-size-md); }
}

/* ── Small Mobile (<480px) ── */
@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: var(--space-4); }

  .btn-lg { padding: 0.75rem 1.25rem; font-size: var(--font-size-sm); }
}