/* ==========================================================================
   SanoEDU Responsive Stylesheet - Media Queries and Mobile Optimizations
   ========================================================================== */

/* Fix horizontal scroll / overflow on ALL sizes */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
* {
  box-sizing: border-box !important;
}

/* Global overflow fix */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Prevent iOS input zoom */
input, select, textarea {
  font-size: 16px !important;
}

/* ── Desktop & Sidebar Toggles ── */
#sideToggle {
  display: none;
}

/* ── Grid Layout Modifiers (Desktop / Large screen defaults) ── */
@media (max-width: 1024px) {
  .g3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .g2, .g3, .g4 {
    grid-template-columns: 1fr;
  }
}

/* ── Desktop Sidebar Viewports ── */
@media (max-width: 820px) {
  .d-side {
    transform: translateX(-100%) !important;
  }
  .d-side.open {
    transform: translateX(0) !important;
  }
  .d-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #sideToggle {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-acts {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .nav-acts #navRegisterBtn,
  .nav-acts .theme-menu-wrap {
    display: none !important;
  }
  .ham {
    display: flex !important;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-vis {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  .player-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .psidebar {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, .02) !important;
  }
}

/* ── High-Fidelity Tablet and Landscape Mobile Optimizations ≤1024px ── */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-inner { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .hero-vis { display: none !important; }
  .con, .con-sm, .con-lg { padding: 0 20px !important; }
}

/* ── Mobile Viewports ≤768px (The main culprit for overflows) ── */
@media (max-width: 768px) {
  /* Contain everything to screen boundaries */
  #pubNav, #app, .hero, section, footer, .d-wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Consistent 16px side padding on mobile */
  .con, .con-sm, .con-lg {
    padding: 0 16px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Navigation Bar overrides */
  #pubNav {
    overflow: visible !important;
  }
  .nav-in {
    padding: 0 16px !important;
    height: 56px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #mobileNav {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Mobile Typography scales */
  .sh1 { font-size: 1.75rem !important; line-height: 1.15 !important; }
  .sh2 { font-size: 1.35rem !important; line-height: 1.2 !important; }
  .sh3 { font-size: 1.1rem !important; }
  .sub { font-size: .9rem !important; max-width: 100% !important; }
  .eye { font-size: .68rem !important; }

  /* Collapse all columns to single list */
  .g2, .g3, .g4, .footer-grid, .metrics-grid, .course-grid, .iprofile-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Hero Section adjustments */
  .hero {
    padding: 72px 0 36px !important;
    min-height: auto !important;
    overflow: hidden !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  .hero-vis {
    display: none !important;
  }
  .hero-acts {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-acts .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-trust {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero-h1 {
    font-size: 1.75rem !important;
  }
  .hero-sub {
    font-size: .88rem !important;
    max-width: 100% !important;
  }
  .hero-grad, .hero-grad2, .hero-dots {
    overflow: hidden !important;
  }

  section {
    overflow: hidden !important;
  }

  /* Padding scales */
  .card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .mc {
    padding: 14px !important;
  }
  .mc-val {
    font-size: 1.6rem !important;
  }

  .btn-lg {
    padding: 12px 22px !important;
    font-size: .9rem !important;
  }

  /* Admin/Tutor Dashboard */
  .d-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .d-con {
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .d-bar {
    padding: 0 14px !important;
    height: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .d-bar-title {
    font-size: .88rem !important;
    max-width: 55vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .d-ph h1 {
    font-size: 1.1rem !important;
  }
  
  /* Double columns for smaller metrics on dashboards */
  .g4.mb-24 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables horizontal scrolling */
  .tw {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tbl {
    min-width: 480px !important;
    font-size: .8rem !important;
  }
  .tbl th {
    padding: 9px 10px !important;
    font-size: .68rem !important;
  }
  .tbl td {
    padding: 10px !important;
  }

  .frow {
    grid-template-columns: 1fr !important;
  }
  .fg {
    margin-bottom: 12px !important;
  }

  /* Bottom sheet behavior for modals on mobile */
  .modal-wrap {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 22px 18px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tabs and Pills scroll bars */
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .tbtn {
    white-space: nowrap !important;
    padding: 9px 12px !important;
    font-size: .8rem !important;
  }
  .pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }
  .pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Course Thumbnails scales */
  .cc-body {
    padding: 12px !important;
  }
  .cc-title {
    font-size: .88rem !important;
  }

  /* Direct messaging split grids */
  .msg-layout {
    grid-template-columns: 1fr !important;
    height: 70vh !important;
  }
  .msg-layout:not(.thread-open) .msg-thread {
    display: none !important;
  }
  .msg-layout.thread-open .msg-list {
    display: none !important;
  }
  .msg-layout.thread-open .msg-thread {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
  }
  .msg-back-btn {
    display: inline-block !important;
  }

  /* Video player screen widths */
  .ptabs-bar {
    overflow-x: auto !important;
  }
  .ptab {
    white-space: nowrap !important;
    font-size: .8rem !important;
    padding: 10px 12px !important;
  }
  .pc-area {
    padding: 14px !important;
  }

  .cert-card {
    padding: 22px 14px !important;
  }
  .cert-meta {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .toast-wrap {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
  }
  .toast {
    min-width: auto !important;
    width: 100% !important;
  }
}

/* ── Small Screens / Micro Viewports ≤400px ── */
@media (max-width: 400px) {
  .con, .con-sm, .con-lg {
    padding: 0 12px !important;
  }
  .sh1 { font-size: 1.55rem !important; }
  .sh2 { font-size: 1.2rem !important; }
  .btn-lg { padding: 11px 18px !important; font-size: .86rem !important; }
  .card { padding: 12px !important; }
  .d-con { padding: 11px !important; }
  .mc-val { font-size: 1.5rem !important; }
  .g4.mb-24 { grid-template-columns: repeat(2, 1fr) !important; }
}