/* Mobile forms: navigation must never sit over an input or steal its taps. */
@media (max-width: 760px) {
  .wizard .wizard-actions,
  form.wizard .wizard-actions,
  .teacher-form .wizard-actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    gap: 8px !important;
    margin: 22px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .wizard .wizard-actions .btn,
  .teacher-form .wizard-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  .wizard .form-step.active,
  .teacher-form .form-step.active {
    min-height: 0 !important;
    padding-bottom: 8px !important;
  }

  /* The compact footer is intentionally visible on phones, above the bottom nav. */
  .site-footer.app-footer,
  .site-footer.app-footer.mobile-footer-only {
    display: block !important;
  }
}

/* Every multi-step form uses normal document flow on touch devices.
   A fixed or sticky action bar can cover fields in Android WebViews. */
@media (max-width: 900px) {
  .wizard-actions,
  form .wizard-actions,
  .teacher-form .wizard-actions,
  .travel-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    z-index: 1 !important;
    clear: both !important;
    margin: 24px 0 0 !important;
    padding: 14px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #addWizard,
  #storeWizard,
  #transportWizard,
  #teacherWizard,
  #directoryWizard,
  .teacher-form,
  .travel-form {
    padding-bottom: 28px !important;
  }

  .wizard-actions .btn,
  .travel-actions .btn {
    min-height: 50px !important;
    touch-action: manipulation !important;
  }

  .wizard .form-step.active,
  .teacher-form .form-step.active {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }

  .wizard input,
  .wizard select,
  .wizard textarea,
  .teacher-form input,
  .teacher-form select,
  .teacher-form textarea {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}