/* ================================================================
   📱 MOBILE-PERFECT PASS (v3.3) — loaded LAST so it wins on phones.
   Every rule below only activates on small screens; desktop is
   completely untouched.
================================================================ */

/* ---------- comfortable touch & no iOS auto-zoom ---------- */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
}

/* ---------- PUBLIC WEBSITE (landing) ---------- */
/* the nav links stay usable as a scrollable row instead of disappearing */
@media (max-width: 860px) {
  .land-nav { flex-wrap: wrap; row-gap: 4px; padding: 12px 4%; }
  .land-links {
    display: flex !important;
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 22px;
    padding: 8px 2px 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .land-links::-webkit-scrollbar { display: none; }
  .land-links a { white-space: nowrap; }
}
@media (max-width: 700px) {
  .hero { padding: 34px 5% 26px; gap: 22px; }
  .hero h1 { font-size: 30px; line-height: 1.2; }
  .land-sec { padding-left: 5%; padding-right: 5%; }
  .cta-band { flex-direction: column; text-align: center; gap: 14px; }
  .land-foot { flex-direction: column; gap: 22px; }
  .course-hero { padding: 20px; }
}
@media (max-width: 480px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- APP SHELL: topbar & sidebar ---------- */
@media (max-width: 700px) {
  .topbar { padding: 10px 10px; gap: 8px; }
  #topWho { display: none; }              /* avatar stays; name hidden on phones */
  .searchbox { max-width: none; min-width: 0; }
  main#main { padding: 14px 12px 30px; }
}
@media (max-width: 460px) {
  .searchbox { display: none; }           /* burger · theme · bell · avatar · logout */
  .topbar { justify-content: flex-end; }
  .topbar #burger { margin-right: auto; }
}

/* ---------- TABLES: swipe sideways instead of breaking the layout ---------- */
@media (max-width: 820px) {
  .card:has(table.tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl { min-width: 640px; }
}

/* ---------- MODALS: bottom-sheet style on phones ---------- */
@media (max-width: 560px) {
  #modalBack { padding: 0; align-items: flex-end; }
  .modal, .modal.wide {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 20px 16px;
    max-height: 92vh;
  }
}

/* ---------- FORMS: two-column rows stack into one column ---------- */
@media (max-width: 560px) {
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .between { flex-wrap: wrap; gap: 8px; }
}

/* ---------- ADMISSION WIZARD ---------- */
@media (max-width: 560px) {
  .adm-shell { padding: 0 2px; }
  .adm-card { padding: 18px 14px; }
  .adm-steps { gap: 4px; }
  .adm-step { font-size: 11px; padding: 5px 8px; }
}

/* ---------- COURSE PAGES & PLAYER ---------- */
@media (max-width: 700px) {
  .hero-course { grid-template-columns: 1fr; gap: 14px; }
  .hero-course .hc-art { width: 100%; height: 150px; }
}

/* ---------- PROFILE HEADER ---------- */
@media (max-width: 640px) {
  .prof-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- AUTH CARD ---------- */
@media (max-width: 480px) {
  .auth-card { padding: 22px 16px; margin: 0 8px; }
}

/* ---------- v4.0 MOBILE PASS: cards & grids stack cleanly ---------- */
@media (max-width: 700px) {
  .grid.g2, .grid.g3 { grid-template-columns: 1fr !important; }
  .grid.g4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* filter bars wrap nicely */
  .card .row { flex-wrap: wrap; }
  .card .row select, .card .row input[type="date"] { max-width: 100% !important; flex: 1 1 46%; }
  /* calendar cells stay readable on small screens */
  .cal-grid, .cal-head { gap: 3px; }
  .cal-cell { min-height: 40px; border-radius: 8px; font-size: 11.5px; }
  .cal-fest { font-size: 6.5px; }
  /* dashboard & report two-column layouts stack (inline grid styles) */
  .grid[style*="1.2fr"], .grid[style*="1.4fr"], .grid[style*="1.1fr"], .grid[style*="1.5fr"] { grid-template-columns: 1fr !important; }
  /* messages page fills the phone screen */
  .msg-wrap { min-height: 70vh; }
  /* sidebar takes most of the phone width when open — and hides FULLY when closed */
  .sidebar { width: 78vw; max-width: 300px; left: -320px; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .sidebar.open { left: 0; }
}
@media (max-width: 420px) {
  .grid.g4 { grid-template-columns: 1fr !important; }
  .page-t { font-size: 19px; }
}