/* Only catch-up filters, record-query results and standalone station controls.
   Existing controls and handlers are retained; embedded lesson evaluation is
   intentionally outside every station selector below. The app's typography
   layer is reused so its generic centered-button rule cannot recenter records. */
@layer peLocalTypography {
  body #app .classroomFlow[data-classroom-view="catchup"] > .classroomCatchupFilters {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: 100% !important;
  }
  body #app .classroomFlow[data-classroom-view="catchup"] > .classroomCatchupFilters > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 60px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  body #app .classroomFlow[data-classroom-view="history"] .classroomCompletedHistoryRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }
  body #app .classroomFlow[data-classroom-view="history"] .classroomHistoryIdentity,
  body #app .classroomFlow[data-classroom-view="history"] .classroomHistoryIdentity > b {
    min-width: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  body #app .classroomFlow[data-classroom-view="history"] .classroomHistoryActions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 4px 10px !important;
    max-width: 100% !important;
    text-align: right !important;
  }
  body #app .classroomFlow[data-classroom-view="history"] .classroomHistoryActions > span {
    text-align: right !important;
    white-space: nowrap !important;
  }

  body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) {
    grid-template-columns: minmax(100px, 1fr) minmax(72px, .65fr) minmax(72px, .65fr) minmax(160px, 2.2fr) 76px !important;
  }
  body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) > label.wide {
    grid-column: 4 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-self: start !important;
  }
  body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) > label.wide > select {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) > #stationReload {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    width: 76px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  @media (max-width: 1180px) {
    body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr) !important;
    }
    /* Both controls share the second grid row but have disjoint boxes:
       selector = available width minus the 76px action and an 8px gap. */
    body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) > label.wide {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      width: calc(100% - 84px) !important;
    }
    body #app .classroomFlow[data-classroom-view="station"] > .classroomStationControls:not(.embedded) > #stationReload {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
    }
  }
  @media (max-width: 699px) {
    body #app .classroomFlow[data-classroom-view="history"] .classroomHistoryActions {
      display: grid !important;
      justify-items: end !important;
      gap: 3px !important;
    }
  }
}

/* The packaged app already centers this label with its control typography. */
html:not(.pe-local-app) body #app .classroomFlow[data-classroom-view="station"]
> .classroomStationControls:not(.embedded) > label.wide > span {
  text-align: center;
}