/*
 * I Can Learn Academy — Shared Mobile Responsive Styles
 * Include after page-specific styles in every HTML page
 */

/* ──────────────────────────────────────────
   FOOTER ALIGNMENT FIX
────────────────────────────────────────── */
.footer-grid {
  align-items: flex-start !important;
}

/* Hide mobile-only elements on desktop by default */
.show-on-mobile {
  display: none !important;
}

@media (max-width: 1024px) {
  .show-on-mobile {
    display: block !important;
  }
}

/* ──────────────────────────────────────────
   GLOBAL MOBILE FIXES  (≤ 768px)
────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Container padding */
  .container { padding: 0 16px !important; }

  /* ── TOP BAR ── */
  .top-bar { display: none !important; }

  /* ── NAVBAR ── */
  .navbar { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 8px; }
  .nav-right .search-box { display: none !important; }
  .nav-right { gap: 8px; }
  .btn { padding: 7px 14px; font-size: 0.78rem; }

  /* ── HERO ── */
  .hero { padding: 36px 20px !important; margin-top: 16px !important; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .hero-content h1 { font-size: 2rem !important; }
  .hero-ctas { flex-direction: row; gap: 12px; }
  .hero-ctas .btn { width: auto; justify-content: center; }
  .hero-benefits-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .hero-visual { display: none; } /* hide on tiny screens to save space */
  .hero-visual-card { display: none; }

  /* ── SUBJECTS GRID ── */
  .course-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  /* ── SECTION TITLES ── */
  .section-title-center { font-size: 1.4rem; }

  /* ── FOOTER ── */
  .footer-wrapper { padding: 40px 0 20px; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* About footer */
  .footer { padding: 32px 20px; }
  .footer .footer-grid { grid-template-columns: 1fr !important; }

  /* ── ABOUT PAGE ── */
  .about-hero { padding: 40px 24px; border-radius: 20px; }
  .about-hero h1 { font-size: 1.75rem; }
  .mv-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .stats-section { padding: 32px 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .cta-banner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 28px 20px;
    border-radius: 18px;
  }

  /* ── NAVBAR (rounded card style on about page) ── */
  .navbar-container { margin: 12px auto 0; }
  .navbar.card-nav {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .nav-links { flex-wrap: wrap; gap: 12px; justify-content: center; }

  /* ── AUTH PAGES ── */
  .auth-container { padding: 28px 20px; border-radius: 20px; }
  .auth-container h1 { font-size: 1.3rem; }
}

/* ──────────────────────────────────────────
   EXTRA SMALL (≤ 480px)
────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 1.7rem !important; }
  .course-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom { font-size: 0.7rem; }
}

/* ──────────────────────────────────────────
   ADMIN & DASHBOARD MOBILE (≤ 900px)
────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Sidebar collapse */
  .sidebar {
    position: fixed !important;
    left: -260px !important;
    top: 0; bottom: 0;
    z-index: 2000 !important;
    transition: left 0.3s ease !important;
    width: 240px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .sidebar.open { left: 0 !important; }

  /* Main content full width when sidebar hidden */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }

  /* Top header */
  .top-header {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Stats cards grid — 2 columns on tablet */
  .stats-cards-grid,
  .dashboard-grid,
  .cards-grid,
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Tables scroll */
  .table-responsive, .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }

  /* Modals */
  .modal-box, .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 20px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 600px) {
  /* Stats cards — single column on phone */
  .stats-cards-grid,
  .dashboard-grid,
  .cards-grid,
  .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Fix stat card layout to column and prevent stretching icon boxes */
  .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .stat-icon-box {
    align-self: flex-start !important;
    margin-bottom: 4px !important;
  }

  /* Stack export buttons vertically on mobile */
  .export-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Admin/dashboard header */
  .top-header h2,
  .page-title { font-size: 1.1rem !important; }

  /* Cards */
  .card, .stat-card { padding: 16px !important; border-radius: 14px !important; }

  /* Tabs — scroll horizontally */
  .tab-bar, .tabs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .tab-bar::-webkit-scrollbar { height: 3px; }
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1999;
}
.sidebar-overlay.active { display: block; }

/* Mobile menu toggle button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #1b2048;
  font-size: 1.35rem;
}
@media (max-width: 900px) {
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
}