/* School shell only. Embedded teacher/check pages keep their own controls. */
body.school-controls-ui [hidden]{display:none!important}
body.school-controls-ui {
  --school-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236e6e76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Native listboxes and the already fitted archive-list filters are excluded. */
body.school-controls-ui :is(#mainView,.modal-mask,dialog,.sc-modal) select:not([multiple]):is(:not([size]),[size="0"],[size="1"]):not(:where(.archive-list-filters select)) {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 38px;
  background-image: var(--school-select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
}

body.school-controls-ui :is(#mainView,.modal-mask,dialog,.sc-modal) :is(.btn,.so-button,.ss-button,.se-button,.sh-button,.st-button,.sn-button,.hm-button,.hi-button,.oh-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

body.school-controls-ui :is(#mainView,.modal-mask,dialog,.sc-modal) :is(.field,.filter-bar,.sc-field,.sc-toolbar,.st-search,.st-name-field,.so-form-grid,.sp-search,.sp-list-tools,.oh-form-grid,.oh-search,.ss-fields,.sh-filters,.sh-form-section,.se-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select) {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}

body.school-controls-ui :is(.filter-bar,.sc-actions,.ss-row-actions,.sh-detail-actions,.st-actions,.so-row-actions,.sp-actions,.oh-tools,.oh-form-actions,.hi-file-actions) {
  align-items: center;
}

body.school-controls-ui :is(.sc-form-footer,.sc-dialog footer,.sae-footer,.modal .foot,.sh-editor-actions,.sh-detail-footer,.hi-footer,.hm-footer) {
  flex-wrap: wrap;
}

body.school-controls-ui :is(.sgp-heading,.hi-header,.oh-tool-header,.sc-dialog header,.sn-dialog-head,.hm-header) h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.school-controls-ui :is(.hm-close,.sn-close,.hi-close,.school-check-cleanup .scc-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
}

/* Keep the filter icon centered when its input becomes touch-sized. */
body.school-controls-ui #gradeClassView .gc-search input,
body.school-controls-ui #gradeClassView .gc-filters select {
  height: 44px;
  min-width: 0;
}

body.school-controls-ui #gradeClassView .gc-search {
  min-width: 0;
}

body.school-controls-ui #gradeClassView .gc-search svg {
  top: 50%;
  transform: translateY(-50%);
}

body.school-controls-ui .hm-search {
  height: 44px;
}

body.school-controls-ui .sh-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

body.school-controls-ui #queryLinkInput {
  min-width: 0;
  max-width: 100%;
}

body.school-controls-ui #studentInfoView .sc-profile-title {
  min-width: 0;
}

body.school-controls-ui #studentInfoView .sc-profile h2 {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body.school-controls-ui :is(#mainView,.modal-mask,dialog,.sc-modal) :is(.field,.filter-bar,.sc-field,.sc-toolbar,.st-search,.st-name-field,.so-form-grid,.sp-search,.sp-list-tools,.oh-form-grid,.oh-search,.ss-fields,.sh-filters,.sh-form-section,.se-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select) {
    font-size: 16px;
  }

  body.school-controls-ui :is(.sn-moves button,.ss-order .btn) {
    min-width: 44px;
    min-height: 44px;
  }

  body.school-controls-ui :is(.sn-name,.hm-selected-note,.sc-form-footer>span) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.school-controls-ui .sn-moves {
    flex: none;
  }

  body.school-controls-ui .oh-tree-toggle,
  body.school-controls-ui .oh-department,
  body.school-controls-ui .oh-add-department {
    min-height: 44px;
  }

  body.school-controls-ui .sc-pager,
  body.school-controls-ui .st-pager,
  body.school-controls-ui .sh-pagination {
    flex-wrap: wrap;
  }

  body.school-controls-ui .sh-pagination>div {
    flex-wrap: wrap;
    margin-left: auto;
  }

  body.school-controls-ui .sh-tabs {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  body.school-controls-ui .se-scopebar {
    flex-wrap: wrap;
    align-items: center;
  }

  body.school-controls-ui .se-scope-fields {
    flex: 1 1 270px;
    max-width: 100%;
  }

  body.school-controls-ui .se-file-actions {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  body.school-controls-ui #gradeClassView .gc-grade-head {
    flex-wrap: wrap;
  }

  body.school-controls-ui #gradeClassView .gc-grade-title {
    flex: 1 1 180px;
  }

  body.school-controls-ui #gradeClassView .gc-grade-actions {
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-left: auto;
    max-width: 100%;
  }

  body.school-controls-ui #gradeClassView button.gc-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }

  body.school-controls-ui #gradeClassView .gc-grade-bottom {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.school-controls-ui #gradeClassView .gc-filters select {
    max-width: 45%;
    font-size: 16px;
  }

  body.school-controls-ui #gradeClassView .gc-search input,
  body.school-controls-ui .hm-search input {
    font-size: 16px;
  }

  body.school-controls-ui .ss-heading,
  body.school-controls-ui .sh-heading,
  body.school-controls-ui .st-panel-head {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  /* This table already changes to cards; discard the shell's 680px table floor. */
  body.school-controls-ui .sh-table,
  body.school-controls-ui .sh-table tbody {
    min-width: 0;
    max-width: 100%;
  }

  body.school-controls-ui .sh-table td {
    min-width: 0;
  }
}

@media (forced-colors: active) {
  body.school-controls-ui :is(#mainView,.modal-mask,dialog,.sc-modal) select:not([multiple]):is(:not([size]),[size="0"],[size="1"]):not(:where(.archive-list-filters select)) {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
  }
}