/* Screen-only viewport and rotation fixes. Printed attendance forms keep their layout. */
@media screen and (min-width: 1121px) {
  #mobileHomeScreen, #mobileHistoryScreen { display: none !important; }
}

@media screen {
  .modal-overlay {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-overlay > .modal-box {
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .system-main, .shared-page, #transportPage {
    overscroll-behavior: contain;
    scroll-padding-bottom: 24px;
  }
}

@media screen and (max-width: 1120px) {
  .mobile-menu-drawer {
    box-sizing: border-box;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #sharedMobileBottom {
    box-sizing: border-box;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .shared-page, #transportPage {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .modal-box input:not([type=checkbox]):not([type=radio]),
  .modal-box select, .modal-box textarea,
  .system-card input:not([type=checkbox]):not([type=radio]),
  .system-card select, .system-card textarea {
    font-size: max(16px, 1em);
  }
}

@media screen and (max-width: 1120px) and (max-height: 500px) {
  .modal-overlay { padding: 8px !important; }
  .modal-overlay > .modal-box {
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 12px !important;
    padding: 14px !important;
  }

  .mobile-page-header, .mobile-history-header {
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    padding-bottom: 4px !important;
    min-height: 48px !important;
  }

  #sharedMobileBottom { padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
  #sharedMobileBottom button { min-height: 42px; padding: 3px 2px; line-height: 1.25; }
  .system-workspace { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .system-nav { padding: 10px; overflow-y: auto; }
  .system-nav button { display: block; width: 100%; margin: 3px 0; }
  .system-main { padding: 16px; }
}
/* Keep checkbox labels aligned independently of the global form styles. */
@media screen {
  #substituteCreditList {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
  }

  #substituteCreditList .substitute-credit-option,
  .system-permissions label {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    justify-content: start;
    align-items: start;
    gap: 12px;
    text-align: left;
  }

  #substituteCreditList .substitute-credit-option {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    cursor: pointer;
  }

  #substituteCreditList input[type="checkbox"],
  .system-permissions input[type="checkbox"] {
    box-sizing: border-box;
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: #d96691;
  }

  #substituteCreditList .substitute-credit-option > span,
  .system-permissions label > span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #substituteCreditList .substitute-credit-option strong,
  #substituteCreditList .substitute-credit-option small {
    display: block;
    line-height: 1.6;
  }

  #substituteCreditList .substitute-credit-option small {
    margin-top: 3px;
    font-size: .76rem;
    font-weight: 400;
    color: var(--sub);
  }
}