/* Student roster tools only. Keep the established desktop header unchanged. */
@media (max-width:768px) {
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions,
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions.hasInactiveStudents {
    display:grid!important;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.12fr) minmax(0,1.3fr)!important;
    gap:5px!important;
    width:100%!important; min-width:0!important; max-width:100%!important;
    margin:0!important; overflow:visible!important;
  }
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions > .btn {
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    width:100%!important; min-width:0!important; max-width:100%!important;
    box-sizing:border-box!important; height:44px!important; min-height:44px!important;
    margin:0!important; padding:0 4px!important;
    font-size:clamp(10px,2.85vw,11px)!important; line-height:1.2!important;
    text-align:center!important; white-space:nowrap!important;
  }
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions > [data-student-roster-action="add"] { grid-column:1!important; grid-row:1!important; }
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions > [data-student-roster-action="sync"] { grid-column:2!important; grid-row:1!important; }
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions > [data-student-roster-action="delete"] { grid-column:3!important; grid-row:1!important; }
  /* This optional, longer status action must not push the three main actions
     sideways or hide one of them behind a horizontal scroll area. */
  html[data-pe-tab="students"] body:has(#mobileStudentSelector) #app.studentScreen .studentRosterActions > [data-student-inactive-toggle] { grid-column:1 / -1!important; grid-row:2!important; }
}
