/*
 * PE-Class student management screen foundation v11675
 * ----------------------------------------------------
 * 학생 관리 화면의 최종 레이아웃 소유 파일입니다.
 * 데이터/API/저장 동작은 바꾸지 않고, 과거 기기별 보정과 충돌하던
 * 높이·폭·학업 요약 배치만 학생 화면 범위 안에서 통일합니다.
 */

html[data-pe-tab="students"] #app.studentScreen,
html[data-pe-tab="students"] #app.studentScreen *,
html[data-pe-tab="students"] #app.studentScreen *::before,
html[data-pe-tab="students"] #app.studentScreen *::after {
  box-sizing: border-box;
}

html[data-pe-tab="students"] #app.studentScreen {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentRosterUpload,
html[data-pe-tab="students"] #app.studentScreen > .studentRosterTools,
html[data-pe-tab="students"] #app.studentScreen > .classPdfLauncher,
html[data-pe-tab="students"] #app.studentScreen > .studentSplit,
html[data-pe-tab="students"] #app.studentScreen > .studentWaitingGrid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentRosterTools {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentRosterTools > strong {
  white-space: nowrap;
}

html[data-pe-tab="students"] #app.studentScreen > .studentRosterTools > .hint {
  min-width: 0 !important;
  margin-left: auto !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentSplit {
  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentSplit > .list {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 520px !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentSplit > .list > .listHead {
  flex: 0 0 auto !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentList.studentList {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 54px !important;
  overflow: hidden !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn > .num,
html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn > .name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn > .name {
  padding: 8px !important;
  overflow: hidden !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentList > .studentBtn .count {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail.detail {
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 520px !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail:has(.studentDetailHero) {
  min-height: 760px !important;
}


@media (min-width: 921px) {
  html[data-pe-device="desktop"][data-pe-ipados="false"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen > .studentSplit[data-pe-fixed-height="true"] {
    height: var(--student-split-height) !important;
    min-height: var(--student-split-height) !important;
    max-height: var(--student-split-height) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html[data-pe-device="desktop"][data-pe-ipados="false"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen > .studentSplit[data-pe-fixed-height="true"] > .list,
  html[data-pe-device="desktop"][data-pe-ipados="false"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen > .studentSplit[data-pe-fixed-height="true"] #studentDetail,
  html[data-pe-device="desktop"][data-pe-ipados="false"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen > .studentSplit[data-pe-fixed-height="true"] #studentDetail:has(.studentDetailHero) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html[data-pe-device="desktop"][data-pe-ipados="false"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen > .studentSplit[data-pe-fixed-height="true"] #studentDetail {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail > *,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentDetailHero,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentNoteRow,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentAcademicSummary {
  max-width: 100% !important;
  min-width: 0 !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard > div,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard input,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard select,
html[data-pe-tab="students"] #app.studentScreen #studentDetail .genderSegment {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentNoteRow {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) 88px !important;
  gap: 8px !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentNoteRow > * {
  min-width: 0 !important;
  width: 100% !important;
}

html[data-pe-tab="students"] #app.studentScreen #studentPapsSummary,
html[data-pe-tab="students"] #app.studentScreen #studentAssessmentSummary,
html[data-pe-tab="students"] #app.studentScreen #studentAssessTable {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html[data-pe-tab="students"] #app.studentScreen .academicToolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html[data-pe-tab="students"] #app.studentScreen .miniAcademicTable {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

html[data-pe-tab="students"] #app.studentScreen .miniAcademicTable th,
html[data-pe-tab="students"] #app.studentScreen .miniAcademicTable td {
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  overflow-wrap: anywhere;
}

/*
 * iPad student detail PAPS headers: keep Korean words intact and allow a
 * semantic break only before the "(최고)" qualifier.  This avoids both the
 * character-by-character wrap and horizontal table growth.
 */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
  html[data-pe-tab="students"][data-pe-device="tablet"][data-pe-ipados="true"]:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .papsStudentSummary th,
  html[data-pe-tab="students"].pe87Ipad:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .papsStudentSummary th,
  html[data-pe-tab="students"].pe87IpadRuntime:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .papsStudentSummary th {
    padding-inline: 2px !important;
    font-size: clamp(9px, .9vw, 11px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-overflow: clip !important;
  }

  html[data-pe-tab="students"][data-pe-device="tablet"][data-pe-ipados="true"]:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .studentPapsHeaderQualifier,
  html[data-pe-tab="students"].pe87Ipad:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .studentPapsHeaderQualifier,
  html[data-pe-tab="students"].pe87IpadRuntime:not([data-pe-fold-wide="true"])
  #app.studentScreen #studentPapsSummary .studentPapsHeaderQualifier {
    white-space: nowrap !important;
  }
}

html[data-pe-tab="students"] #app.studentScreen > .studentWaitingGrid {
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

html[data-pe-tab="students"] #app.studentScreen > .studentWaitingGrid > .waitingCard {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 360px !important;
}

html[data-pe-tab="students"] #classPdfModal.pdfCropModal {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html[data-pe-tab="students"] #classPdfModal .pdfCropDialog {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 32px) !important;
  min-width: 0 !important;
}

html[data-pe-tab="students"] #classPdfModal .pdfCropBody,
html[data-pe-tab="students"] #classPdfModal .pdfCropStage,
html[data-pe-tab="students"] #classPdfModal .pdfCropSteps {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* iPad 11-inch landscape keeps the confirmed 270px roster column. */
html[data-pe-tab="students"][data-pe-ipados="true"] #app.studentScreen > .studentSplit,
html[data-pe-tab="students"].pe87Ipad #app.studentScreen > .studentSplit,
html[data-pe-tab="students"].pe87IpadRuntime #app.studentScreen > .studentSplit {
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html[data-pe-tab="students"][data-pe-ipados="true"] #app.studentScreen > .studentWaitingGrid,
html[data-pe-tab="students"].pe87Ipad #app.studentScreen > .studentWaitingGrid,
html[data-pe-tab="students"].pe87IpadRuntime #app.studentScreen > .studentWaitingGrid {
  grid-template-columns: minmax(250px, 34%) minmax(0, 1fr) !important;
}

/* Fold7 wide uses one deterministic layout instead of the legacy 3-column/card mix. */
html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen > .studentSplit,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen > .studentSplit {
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr) !important;
  gap: 12px !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen #studentList > .studentBtn,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen #studentList > .studentBtn {
  grid-template-columns: 52px minmax(0, 1fr) !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen #studentList > .studentBtn > .name,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen #studentList > .studentBtn > .name {
  padding: 7px 4px !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen #studentList > .studentBtn .badge,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen #studentList > .studentBtn .badge {
  padding-inline: 5px !important;
  font-size: 11px !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen #studentPapsSummary .miniAcademicTable,
html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen #studentAssessTable .miniAcademicTable,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen #studentPapsSummary .miniAcademicTable,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen #studentAssessTable .miniAcademicTable {
  display: block !important;
  border: 0 !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable thead,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable thead {
  display: none !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable tbody,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable tbody {
  display: block !important;
  width: 100% !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable tr,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable tr {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 0 !important;
  border: 1px solid #dbe6ef !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable td,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable td {
  position: relative !important;
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 88px !important;
  height: 88px !important;
  padding: 28px 3px 5px !important;
  border: 0 !important;
  border-right: 1px solid #e3eaf0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-size: 10px !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable td:last-child,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable td:last-child {
  border-right: 0 !important;
}

html[data-pe-tab="students"][data-pe-fold-wide="true"] #app.studentScreen .miniAcademicTable td::before,
html[data-pe-tab="students"].pe87FoldWide #app.studentScreen .miniAcademicTable td::before {
  content: attr(data-label) !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  display: block !important;
  min-height: 23px !important;
  padding: 4px 2px !important;
  text-align: center !important;
  font-size: 8.5px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: hidden !important;
}

/* Compact phones and Fold7 closed state keep the existing picker/sheet UX. */
@media (max-width: 768px) {
  html[data-pe-tab="students"] #app.studentScreen {
    width: 100% !important;
    padding-inline: 12px !important;
  }

  html[data-pe-tab="students"] #app.studentScreen > .studentSplit {
    display: block !important;
    width: 100% !important;
  }

  html[data-pe-tab="students"] #app.studentScreen > .studentSplit > .list {
    display: none !important;
  }

  html[data-pe-tab="students"] #app.studentScreen #studentDetail.detail,
  html[data-pe-tab="students"] #app.studentScreen #studentDetail:has(.studentDetailHero) {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentInfoCard,
  html[data-pe-tab="students"] #app.studentScreen #studentDetail .studentNoteRow {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-pe-tab="students"] #app.studentScreen input,
  html[data-pe-tab="students"] #app.studentScreen select,
  html[data-pe-tab="students"] #app.studentScreen textarea {
    font-size: 16px !important;
  }

  /*
   * Keep the semester assessment filters on one row:
   * [학년도 | 연도 선택] [학기 | 학기 선택].
   * This restores the production layout without touching the PAPS toolbar
   * or the tablet/desktop student screen.
   */
  html[data-pe-tab="students"] #app.studentScreen
  #studentAssessmentSummary .academicToolbar {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  #studentAssessmentSummary .academicToolbar > span {
    white-space: nowrap !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  #studentAssessmentSummary .academicToolbar > select {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-pe-tab="students"] #app.studentScreen > .studentWaitingGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-pe-tab="students"] #app.studentScreen > .studentWaitingGrid > .waitingCard {
    min-height: 240px !important;
  }

  /*
   * Mobile PAPS labels inherit the common table cell centering above.
   * Keep only the metric title at the left edge; values and badges retain
   * their existing alignment.
   */
  html[data-pe-tab="students"] #app.studentScreen
  #studentPapsSummary table.mobilePapsVertical .mobilePapsMetricRow {
    justify-self: stretch !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  #studentPapsSummary table.mobilePapsVertical .mobilePapsMetricTitle {
    justify-self: start !important;
    width: 100% !important;
    text-align: left !important;
  }

  /*
   * Fold7 접힘/모바일 학생 상세의 학기별 수행평가 기록:
   * 공통 miniAcademicTable 중앙정렬보다 뒤에서 값 열만 우측 정렬한다.
   * 항목명(::before)은 계속 좌측에 두어 라벨/값 두 열 구조를 유지한다.
   */
  html[data-pe-device="compact"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen #studentAssessTable table.mobileAssessVertical td {
    justify-items: stretch !important;
    text-align: right !important;
  }

  html[data-pe-device="compact"][data-pe-fold-wide="false"][data-pe-tab="students"]
  #app.studentScreen #studentAssessTable table.mobileAssessVertical td::before {
    text-align: left !important;
  }

  html[data-pe-tab="students"] #classPdfModal.pdfCropModal {
    padding: 0 !important;
  }

  html[data-pe-tab="students"] #classPdfModal .pdfCropDialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}