/* Teacher roster tools: the table alone scrolls horizontally on small screens. */
html body #app .main.page-teacher .teacher-roster-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 125px minmax(205px, 240px) auto;
  align-items: end;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafd;
}
html body #app .main.page-teacher .teacher-roster-toolbar > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: #67768b;
  font-size: 11px;
}
html body #app .main.page-teacher .teacher-roster-toolbar :is(input, select) {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dce4ef;
  border-radius: 5px;
  background-color: #fff;
  color: #2c3e57;
  font-size: 12px;
  line-height: 1.5;
}
html body #app .main.page-teacher .teacher-roster-toolbar select { padding-right: 28px; }
html body #app .main.page-teacher .teacher-roster-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
html body #app .main.page-teacher :is(.teacher-roster-toolbar, .teacher-roster-pagination) .btn {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #dce4ef;
  border-radius: 5px !important;
  background: #fff;
  color: #3b587f;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  font-size: 12px;
  font-weight: 500;
}
html body #app .main.page-teacher :is(.teacher-roster-toolbar, .teacher-roster-pagination) .btn:hover:not(:disabled) { background: #eef3fb; border-color: #c5d3e9; }
html body #app .main.page-teacher :is(.teacher-roster-toolbar, .teacher-roster-pagination) :is(input, select, button):focus-visible { outline: 2px solid #365fba; outline-offset: 2px; box-shadow: none !important; }
html body #app .main.page-teacher .teacher-roster-ready .table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
html body #app .main.page-teacher .teacher-roster-ready tbody tr[hidden] { display: none !important; }
html body #app .main.page-teacher .teacher-roster-empty td { padding: 32px 20px; color: #7d8da5; text-align: center; font-size: 13px; }
html body #app .main.page-teacher .teacher-roster-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 16px; color: #74839a; font-size: 12px; }
html body #app .main.page-teacher :is(.teacher-roster-page-summary, .teacher-roster-page-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
html body #app .main.page-teacher .teacher-roster-page-summary > label { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
html body #app .main.page-teacher .teacher-roster-pagination select { min-width: 58px; width: auto; min-height: 32px; margin: 0; padding: 6px 20px 6px 8px; border: 1px solid #dce4ef; border-radius: 5px; background-color: #fff; font-size: 12px; }
html body #app .main.page-teacher [data-roster-page-label] { font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
@media (max-width: 1100px) {
  html body #app .main.page-teacher .teacher-roster-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body #app .main.page-teacher .teacher-roster-toolbar-actions { align-self: end; }
}
@media (max-width: 600px) {
  html body #app .main.page-teacher .teacher-roster-toolbar { gap: 12px; padding: 12px; grid-template-columns: minmax(0, 1fr); }
  html body #app .main.page-teacher .teacher-roster-toolbar-actions { justify-content: flex-end; }
  html body #app .main.page-teacher .teacher-roster-toolbar :is(input, select) { min-height: 40px; }
  html body #app .main.page-teacher :is(.teacher-roster-toolbar, .teacher-roster-pagination) .btn { min-height: 40px; }
  html body #app .main.page-teacher .teacher-roster-page-summary { justify-content: space-between; width: 100%; }
  html body #app .main.page-teacher .teacher-roster-page-actions { justify-content: flex-end; width: 100%; gap: 10px; }
}