/* Match the packaged app's year / semester / save row on compact screens only.
   Keep the existing controls, callbacks, modal contents and wide layouts. */
@layer peMobileSettingsModal {
@media (max-width: 768px) {
  html[data-pe-device="compact"] body #settingsCWorkspace .settingsCControls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: end !important;
  }
  /* Match the 12px inset of the two-column Settings category buttons. */
  html.pe-mobile-settings-active[data-pe-device="compact"] body #settingsCWorkspace .settingsCControls {
    box-sizing: border-box !important;
    padding-inline: 12px !important;
  }
  html[data-pe-device="compact"] body #settingsCWorkspace .adminTopBar {
    display: contents !important;
  }
  html[data-pe-device="compact"] body #settingsCWorkspace .adminTopBar > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html[data-pe-device="compact"] body #settingsCWorkspace .settingsCControls :is(#adminYearSelect, #adminSemesterSelect) {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 20px !important;
  }
  html[data-pe-device="compact"] body #settingsCWorkspace #saveAdminAll {
    width: 72px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 360px) {
  html[data-pe-device="compact"] body #settingsCWorkspace .settingsCControls :is(#adminYearSelect, #adminSemesterSelect) {
    /* Reserve native arrow space without changing the existing mobile font. */
    padding-inline: 12px !important;
  }
  html.pe-mobile-settings-active[data-pe-device="compact"] body #settingsCWorkspace .settingsCControls :is(#adminYearSelect, #adminSemesterSelect) {
    /* Keep the full year readable after aligning the narrower outer edges. */
    padding-inline: 6px !important;
  }
}
}