/* Mobile-only layout repair for OSIUN clean prototype pages. */
@media (max-width: 900px) {
  body {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body.osiun-role-sidebar-active {
    padding-left: 0 !important;
  }

  .osiun-role-sidebar {
    display: none !important;
  }

  body .osiun-learner-learning,
  body .osiun-learner-moodle {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
  }

  body .learning-grid,
  body .moodle-grid,
  body .osiun-live-context-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  body .learning-grid > aside,
  body .learning-grid > main,
  body .moodle-grid > aside,
  body .moodle-grid > main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .learning-card,
  body .learning-material,
  body .moodle-card,
  body .moodle-material,
  body .osiun-live-context {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .moodle-card *,
  body .learning-card *,
  body .moodle-material *,
  body .learning-material * {
    max-width: 100% !important;
  }

  body .learning-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .learning-menu button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body .learning-actions,
  body .moodle-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (max-width: 900px) {
  body .osiun-learner-learning,
  body .osiun-learner-moodle {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body .osiun-learner-learning .learning-grid,
  body .osiun-learner-moodle .moodle-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  body .osiun-learner-learning .learning-grid > aside,
  body .osiun-learner-learning .learning-grid > main,
  body .osiun-learner-moodle .moodle-grid > aside,
  body .osiun-learner-moodle .moodle-grid > main,
  body .osiun-learner-learning .learning-card,
  body .osiun-learner-moodle .moodle-card,
  body .osiun-learner-learning .learning-material,
  body .osiun-learner-moodle .moodle-material {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body .osiun-learner-learning .learning-section-title,
  body .osiun-learner-moodle .moodle-section-title {
    align-items: flex-start !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-left: 0 !important;
    padding-top: 0 !important;
  }

  .osiun-global-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 10px 14px !important;
  }

  .osiun-global-brand {
    font-size: 15px !important;
  }

  .osiun-global-nav {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .osiun-global-nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .learning-hero,
  .moodle-hero {
    padding: 14px !important;
  }

  .learning-hero h1,
  .moodle-hero h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .learning-section-title,
  .moodle-section-title {
    display: block !important;
  }

  .learning-material b,
  .moodle-material b {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .learning-material span,
  .moodle-material span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .learning-actions button,
  .moodle-actions button {
    flex: 1 1 120px !important;
    min-height: 34px !important;
    font-size: 12px !important;
  }

  #osiun-fixed-sidebar,
  .sidebar {
    display: none !important;
  }

  .app,
  .shell,
  .main,
  main,
  .page,
  .osiun-committee-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app,
  .grid,
  .steps,
  .topbar,
  .workspace,
  .upload-grid,
  .compact-grid,
  .osiun-link-grid,
  .osiun-ai-pref-grid,
  .osiun-committee-grid,
  .welcome-v2 .process-grid,
  .welcome-v2 .why-grid,
  .welcome-v2 .access-grid,
  .welcome-v2 .impact-grid,
  .process-grid,
  .why-grid,
  .access-grid,
  .impact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .main,
  .page,
  .osiun-committee-wrap {
    padding: 14px !important;
  }

  .topbar {
    gap: 12px !important;
  }

  .search,
  .profile {
    display: none !important;
  }

  .steps {
    max-height: none !important;
  }

  .step,
  .card,
  .osiun-committee-card,
  .process-card,
  .why-card,
  .access-card,
  .impact-strip {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .row,
  .actions,
  .committee-actions,
  .osiun-link-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  .card h1,
  .card h2,
  .card h3,
  .title h1,
  .section-title h2,
  .welcome-section h2,
  p,
  .hint,
  .meta,
  label,
  span,
  b {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .committee-file,
  .windows-output-row,
  .file-row {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .committee-file .status-pill,
  .windows-output-row .windows-output-status,
  .status-pill {
    grid-column: 2 !important;
    justify-self: start !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  pre,
  #committee-preview {
    max-height: 260px !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
  }

  .welcome-v2 .welcome-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .welcome-v2 .section-title,
  .welcome-v2 .section-title.centered {
    text-align: left !important;
  }

  body .app {
    display: block !important;
    min-height: auto !important;
  }

  body .main,
  body main {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .grid,
  body .grid:has(.osiun-left-empty),
  body .col,
  body .col.center,
  body .col.left,
  body .col.right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .card,
  body section.card,
  body .osiun-placement-top,
  body .osiun-upload-core,
  body .osiun-link-source-box,
  body .osiun-ai-pref-box {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .card + .card,
  body section.card + section.card,
  body .osiun-upload-core,
  body .osiun-link-source-box,
  body .osiun-ai-pref-box {
    margin-top: 14px !important;
  }

  body .row {
    display: block !important;
  }

  body .row > * + * {
    margin-top: 8px !important;
  }

  body .pill,
  body .meta,
  body .hint,
  body .file-meta,
  body .file-title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body h1,
  body h2,
  body h3 {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }

  body .card h2,
  body section.card h2 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  body .osiun-link-grid,
  body .osiun-ai-pref-grid,
  body .form-grid,
  body .compact-grid,
  body .upload-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body label,
  body input,
  body select,
  body textarea,
  body button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* OSIUN mobile readability hardening for long course/material titles and session chips. */
@media(max-width:900px){
  .osiun-session-user,
  .osiun-session-name,
  .learning-material b,
  .moodle-material b,
  .learning-material span,
  .moodle-material span,
  .osiun-record-row b,
  .osiun-record-row span,
  .committee-file b,
  .committee-file span,
  .osiun-tenant-row b,
  .osiun-tenant-row span{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  .osiun-session-user{
    flex-wrap:wrap !important;
    border-radius:10px !important;
  }
  .moodle-material,
  .learning-material{
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;
  }
}