/* =====================================================================
   CodeCampus LMS v2.9.41 · System-wide Mobile UX Foundation
   Scope: shared shell/navigation, dashboard, course pages, forms, tables,
          modals and common interaction surfaces.
   Desktop layout is intentionally unchanged.
   ===================================================================== */

html,body{max-width:100%;}
body{overflow-x:hidden;}
img,video,canvas,svg{max-width:100%;}

/* Prevent long programming/content strings from forcing page overflow. */
.content,.premium-content,.app-main,.course-banner,.course-actions,
.course-layout,.stream-main,.student-dashboard-main-v200,
.student-dashboard-side-v200,.student-course-card-copy-v200,
.class-card,.panel,.glass{min-width:0;}

pre,code,.code-area{max-width:100%;}
pre{overflow:auto;-webkit-overflow-scrolling:touch;}

/* ------------------------------------------------------------------
   Mobile shell + navigation
   ------------------------------------------------------------------ */
@media (max-width:820px){
  html{scroll-padding-top:72px;}
  body{min-width:0;}

  .app-shell.premium-shell,.app-shell{display:block!important;min-width:0!important;}
  .app-main{width:100%!important;min-width:0!important;}

  .sidebar{
    width:min(320px,88vw)!important;
    max-width:88vw!important;
    height:var(--cc-visual-vh,100dvh)!important;
    max-height:var(--cc-visual-vh,100dvh)!important;
    padding-top:max(14px,env(safe-area-inset-top))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar .premium-brand{position:sticky;top:0;z-index:3;padding-top:8px;padding-bottom:10px;background:inherit;}
  .side-nav a{min-height:48px!important;font-size:.84rem!important;}
  .sidebar-network-card{margin-top:16px!important;}
  .sidebar-foot{padding-bottom:max(4px,env(safe-area-inset-bottom))!important;}

  .mobile-nav-scrim{height:var(--cc-visual-vh,100dvh)!important;}
  body.premium-nav-open{overflow:hidden!important;touch-action:none;}

  .topbar{
    min-width:0!important;
    height:64px!important;
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))!important;
    gap:10px!important;
  }
  .topbar>.icon-btn.mobile-only{
    width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;
  }
  .top-title{min-width:0!important;flex:1 1 auto!important;}
  .top-title b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem!important;}
  .top-title small{display:none!important;}
  .top-actions{flex:0 0 auto!important;}
  .top-actions .icon-btn{width:42px!important;height:42px!important;}

  .premium-content,.content{
    width:100%!important;
    max-width:100%!important;
    padding:14px max(12px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  }

  /* Mobile controls should be comfortable to tap and never trigger iOS zoom. */
  .btn,button,input,select,textarea{max-width:100%;}
  .btn,button:not(.quiz-navigator-grid-v190 button){min-height:44px;}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important;}
  textarea{line-height:1.5;}

  .section-head{gap:12px!important;flex-wrap:wrap!important;}
  .section-head>div{min-width:0!important;}
  .section-head h1,.section-head h2{overflow-wrap:anywhere;}

  /* Horizontal data is scrollable instead of squeezing into unreadable text. */
  .table-wrap,.gradebook-wrap,.cc-mobile-table-scroll-v2941{
    max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain;
  }
  .table-wrap table,.gradebook-wrap table{min-width:680px;}

  /* Modal/dialogs fit the visual viewport and keep actions reachable. */
  .modal{padding:6px!important;align-items:flex-end!important;}
  .modal-card{
    width:100%!important;max-width:100%!important;
    max-height:calc(var(--cc-visual-vh,100dvh) - 12px)!important;
    margin:0!important;border-radius:18px 18px 0 0!important;
    overflow:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .modal-close{min-width:44px!important;width:44px!important;height:44px!important;}

  /* ----------------------------------------------------------------
     Dashboard
     ---------------------------------------------------------------- */
  .dashboard-classes-head-v2920{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;
  }
  .dashboard-classes-title-row-v2920{align-items:flex-start!important;flex-wrap:wrap!important;gap:7px!important;}
  .dashboard-classes-head-actions-v2920{width:100%!important;display:flex!important;gap:8px!important;align-items:center!important;}
  .dashboard-classes-head-actions-v2920 .btn{margin-left:auto;}
  .dashboard-sort-grid-v2920,.class-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .class-card{min-height:0!important;padding:17px!important;border-radius:16px!important;}
  .class-card h3{margin-top:14px!important;font-size:1.02rem!important;overflow-wrap:anywhere;}
  .class-meta{display:flex!important;flex-wrap:wrap!important;gap:8px 12px!important;align-items:center!important;}
  .dashboard-class-code-v2921{max-width:100%!important;}
  .dashboard-course-drag-handle-v2920{width:42px!important;height:42px!important;}

  .student-home-v200{width:100%!important;min-width:0!important;}
  .student-welcome-v200{
    grid-template-columns:1fr!important;gap:18px!important;padding:20px!important;
  }
  .student-welcome-copy-v200 h2{font-size:1.55rem!important;line-height:1.14!important;}
  .student-welcome-actions-v200{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .student-welcome-actions-v200 .btn{width:100%!important;justify-content:center!important;}
  .student-progress-orbit-v200{justify-self:center!important;}

  .student-join-banner-v240{
    grid-template-columns:1fr!important;gap:14px!important;padding:17px!important;
  }
  .student-join-banner-form-v240{width:100%!important;grid-template-columns:1fr!important;gap:9px!important;}
  .student-join-banner-form-v240 .btn{width:100%!important;justify-content:center!important;}

  .student-dashboard-grid-v200{grid-template-columns:1fr!important;gap:14px!important;}
  .student-dashboard-main-v200,.student-dashboard-side-v200{width:100%!important;min-width:0!important;}
  .student-course-grid-v200{grid-template-columns:1fr!important;gap:12px!important;}
  .student-course-card-v200{min-width:0!important;padding:17px!important;}
  .student-next-card-v200{grid-template-columns:44px minmax(0,1fr)!important;gap:11px!important;}
  .student-next-action-v200{grid-column:1/-1!important;width:100%!important;justify-content:center!important;min-height:44px!important;}
  .student-upcoming-list-v200>a,.student-announcement-list-v200>a{min-width:0!important;}

  /* ----------------------------------------------------------------
     Course header + course menu
     ---------------------------------------------------------------- */
  .course-banner,.stream-course-banner{
    width:100%!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:16px!important;padding:18px!important;border-radius:18px!important;
  }
  .course-banner>div:first-child,.stream-course-banner>div:first-child{min-width:0!important;}
  .course-banner h1,.stream-course-banner h1{
    margin:.55rem 0 .35rem!important;font-size:clamp(1.55rem,8vw,2.15rem)!important;
    line-height:1.08!important;overflow-wrap:anywhere!important;
  }
  .course-banner p,.stream-course-banner p{font-size:.8rem!important;line-height:1.5!important;overflow-wrap:anywhere;}
  .course-actions{
    width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;align-items:stretch!important;
  }
  .course-actions>.btn,.course-actions>a.btn{
    width:100%!important;min-width:0!important;min-height:46px!important;
    justify-content:center!important;text-align:center!important;white-space:normal!important;
  }
  .course-actions .join-code-box,.course-actions .course-class-code-v2933,
  .course-actions .student-course-progress-summary-v200{grid-column:1/-1!important;width:100%!important;}
  .course-class-code-row-v2933{justify-content:space-between!important;width:100%!important;}

  .course-tabs,.stream-course-tabs{
    width:100%!important;max-width:100%!important;
    display:flex!important;gap:5px!important;
    padding:5px!important;margin:12px 0!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .course-tabs::-webkit-scrollbar,.stream-course-tabs::-webkit-scrollbar{display:none;}
  .course-tabs>button,.course-tabs>a,.stream-course-tabs>button,.stream-course-tabs>a{
    flex:0 0 auto!important;min-height:44px!important;padding:9px 12px!important;
    scroll-snap-align:center;white-space:nowrap!important;
  }
  .course-tabs .ui-icon,.stream-course-tabs .ui-icon{width:16px!important;height:16px!important;}
  .course-layout,.stream-layout{grid-template-columns:1fr!important;gap:12px!important;}
  .side-panel,.sticky{position:static!important;}
  .stream-composer{padding:14px!important;}
  .stream-composer-actions{display:none!important;}
  .stream-compose-cta{margin-left:auto!important;}

  /* Cards used throughout course tabs. */
  .resource-card,.assessment-card,.feed-card,.student-resource-card-v200,
  .student-activity-card-v2925{max-width:100%!important;min-width:0!important;}

  /* Common forms / builders */
  .two-col,.assessment-layout-v2,.builder-two-column,.activity-layout{
    grid-template-columns:1fr!important;
  }
  .builder-preview-column{display:none!important;}
  .grade-form,.lms-rubric-grade-row{grid-template-columns:1fr!important;}
}

@media (max-width:520px){
  .premium-content,.content{padding-left:10px!important;padding-right:10px!important;}
  .course-banner,.stream-course-banner{padding:15px!important;border-radius:16px!important;}
  .course-actions{grid-template-columns:1fr!important;}
  .course-actions .join-code-box,.course-actions .course-class-code-v2933,
  .course-actions .student-course-progress-summary-v200{grid-column:1!important;}
  .dashboard-classes-head-actions-v2920{flex-direction:column!important;align-items:stretch!important;}
  .dashboard-classes-head-actions-v2920 .btn{margin-left:0!important;width:100%!important;justify-content:center!important;}
  .stat-grid{grid-template-columns:1fr 1fr!important;}
  .toast{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;}
}

@media (max-width:360px){
  .stat-grid{grid-template-columns:1fr!important;}
  .course-tabs>button,.course-tabs>a,.stream-course-tabs>button,.stream-course-tabs>a{padding-inline:10px!important;}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.mobile-nav-scrim,.course-tabs,.stream-course-tabs{scroll-behavior:auto!important;transition:none!important;}
}