/*
 * PE-Class 11981 — wide record titles, context cleanup and student summary
 *
 * Compact mobile keeps its dedicated titles, breadcrumbs and student cards.
 * Fold7 wide keeps the existing assessment/PAPS title and all four record
 * breadcrumbs, while sharing the selected-student header with other wide UI.
 */

/* Class context belongs only to PC, MacBook and iPad selected-record titles. */
@media (max-width: 768px) {
  html .peDesktopClassTitlePrefix {
    display: none !important;
  }
}

@media (min-width: 769px) {
  html:is(.pe87FoldWide, [data-pe-fold-wide="true"])
  .peDesktopClassTitlePrefix {
    display: none !important;
  }

  /*
   * PC/Mac/iPad no longer show the record-location sentence.  Both Fold7
   * modes are deliberately outside this selector contract.
   */
  html:not(.pe87FoldWide):not([data-pe-fold-wide="true"]):is(
    [data-pe-tab="progress"],
    [data-pe-tab="calendar"],
    [data-pe-tab="assessment"],
    [data-pe-tab="paps"]
  ) #app .pe87Crumb {
    display: none !important;
  }

  html.peRecordWorkspace:not(.pe87FoldWide):not([data-pe-fold-wide="true"]):is(
    [data-pe-tab="progress"],
    [data-pe-tab="calendar"],
    [data-pe-tab="assessment"]
  ) #app > .peRecordStickyRegion {
    padding-top: 0 !important;
  }

  /* PAPS previously reserved an explicit first grid row for its breadcrumb. */
  html[data-pe-foundation][data-pe-tab="paps"]:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  #app:has(#papsTableBox) > .pe87PageHead.peRecordStickyRegion {
    grid-template-rows: auto !important;
    row-gap: 0 !important;
  }

  html[data-pe-foundation][data-pe-tab="paps"]:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  #app:has(#papsTableBox) > .pe87PageHead.peRecordStickyRegion > h2,
  html[data-pe-foundation][data-pe-tab="paps"]:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  #app:has(#papsTableBox) > .pe87PageHead.peRecordStickyRegion > .row {
    grid-row: 1 !important;
  }

  /*
   * Student assessment filters share the heading row.  The legacy summary
   * card becomes layout-only and the record table owns the rounded card.
   */
  html[data-pe-tab="students"] #app.studentScreen
  #studentDetail > .studentAssessmentSection {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  #studentDetail > .studentAssessmentSection > h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  #studentDetail > .studentAssessmentSection > #studentAssessmentSummary {
    display: contents !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  .studentAssessmentSection #studentAssessmentSummary > .academicToolbar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  .studentAssessmentSection #studentAssessTable {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d4dde8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-pe-tab="students"] #app.studentScreen
  .studentAssessmentSection #studentAssessTable > .academicEmpty {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* The new wrapper is visually inert on iPhone and Fold7 folded screens. */
@media (max-width: 768px) {
  html[data-pe-tab="students"] #app.studentScreen
  #studentDetail > .studentAssessmentSection {
    display: contents !important;
  }
}