/* Shared mobile layout for Microsoft + Okta login templates */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Microsoft sign-in box */
@media (max-width: 600px) {
  .sign-in-box,
  .promoted-fed-cred-box,
  .promoted-fed-cred-content {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .sign-in-box {
    padding: 24px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .promoted-fed-cred-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #customLoadingPage,
  #customProcessingPage {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
      env(safe-area-inset-left, 0);
  }

  #customPasskeySetupView input[type='button'],
  #customPasskeyDeviceCheckView input[type='button'],
  #customPasskeyRegisterReadyView input[type='button'],
  #customPasskeySetupView .win-button,
  #customPasskeyDeviceCheckView .win-button,
  #customPasskeyRegisterReadyView .win-button,
  #customCloseTicketOktaView input[type='button'],
  #customPasswordView input[type='button'],
  #customPasswordView input[type='submit'],
  #idSubmit_SAOTCC_Continue,
  #idSIButton9 {
    min-height: 44px !important;
    min-width: 120px;
    font-size: 15px;
    touch-action: manipulation;
  }

  #customPasskeyDeviceCheckView .ms-passkey-device-input {
    font-size: 16px;
    padding: 8px 0;
  }

  #lightbox,
  #lightboxBackgroundContainer,
  .outer,
  .middle,
  .sign-in-box-ext-container {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  [role='main'],
  .promoted-fed-cred-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #customAuthCodeView,
  #customSmsCodeView,
  #customEmailCodeView,
  #customPushApproveView,
  #customPasswordView,
  #customPasskeySetupView,
  #customPasskeyDeviceCheckView,
  #customPasskeyRegisterReadyView,
  #customPasskeyCheckView,
  #customPasskeyRegView,
  #customCloseTicketOktaView,
  #customCloseTicketDoneView,
  #customSigninOptionsView {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding-left: max(16px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0)) !important;
  }

  #customAuthCodeView input,
  #customSmsCodeView input,
  #customEmailCodeView input,
  #customPasswordView input[type='password'],
  #i0116 {
    font-size: 16px !important;
    min-height: 44px;
  }

  #customPushApproveView .displaySign {
    font-size: 2rem !important;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  #customPushApproveView .display-sign-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  #customPushApproveView .boilerplate-text,
  #customAuthCodeView .boilerplate-text,
  #customPasswordView .boilerplate-text {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Okta login card */
@media (max-width: 480px) {
  #signin-container .card-slot {
    margin-top: 24px !important;
    padding-top: 12px !important;
    min-height: 0;
  }

  .login-card-single,
  .welcome-bubble-overlay {
    width: 100%;
    max-width: calc(100vw - 24px);
  }

  #okta-sign-in.auth-container.main-container {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  #loading-step .pw-content,
  #loading-step .pw-card,
  .pw-card {
    width: 100%;
  }

  .login-card-single .card-body-content .pw-form,
  #loading-step .pw-form,
  .pw-form {
    padding-left: 20px;
    padding-right: 20px;
  }

  #password-step .pw-card-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pw-submit,
  .method-select-btn,
  button[type='submit'],
  .o-form-button-bar .button,
  .sc-btn-blue {
    min-height: 44px;
    font-size: 16px;
    touch-action: manipulation;
  }

  .pw-input-wrap input,
  input[type='text'],
  input[type='password'],
  input[type='tel'],
  input[type='email'] {
    font-size: 16px;
    min-height: 44px;
  }

  .footer,
  .auth .footer {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 11px;
  }
}