/* Mobile-first polish for /login (sign-in, sign-up, forgot) and /update-password.
   Desktop layout is left alone; everything here is scoped to narrow viewports. */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* iOS: 16px inputs so the page does not zoom on focus */
@media (max-width: 768px) {
  input.form-control,
  select.form-control,
  textarea.form-control,
  .form-control {
    font-size: 16px !important;
    min-height: 48px;
    line-height: 1.35;
  }
  .btn,
  .btn-block,
  .btn-login,
  .btn-signup,
  .btn-forgot,
  .btn-update,
  #btn_check_status {
    min-height: 48px;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
}

@media (max-width: 768px) {
  .web-footer { display: none !important; }
  nav.navbar {
    padding: 6px 12px !important;
  }
  nav.navbar .navbar-brand img,
  nav.navbar .navbar-brand svg {
    max-height: 28px !important;
  }
  .page-breadcrumbs,
  .page-header-wrapper { display: none !important; }

  /* -------- Login split view -------- */
  .for-login .login-container {
    min-height: auto;
    min-height: 100dvh;
    align-items: stretch;
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }
  .for-login .login-split-view {
    flex-direction: column;
    max-width: 100%;
  }
  .for-login .login-left-panel {
    text-align: center;
    padding: 20px 20px 8px;
    flex: 0 0 auto;
  }
  .for-login .logo-container {
    margin-bottom: 8px;
    padding: 0;
  }
  .for-login .logo-container img {
    height: 56px;
  }
  .for-login .welcome-text {
    font-size: 1rem;
    margin: 0;
  }
  .for-login .welcome-text .brand-name {
    font-size: 1.55rem;
    margin: 2px 0 0;
  }
  .for-login .welcome-text .portal-name { font-size: 1rem; }

  .for-login .login-right-panel {
    padding: 8px 16px 28px;
    width: 100%;
  }
  .for-login .login-form-container {
    max-width: 100%;
    padding: 22px 18px 24px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  }
  .for-login .form-title {
    font-size: 1.25rem !important;
    margin-bottom: 18px !important;
  }
  .for-login .input-narrow-field,
  .for-login .form-group .form-label,
  .for-login .form-group .d-flex,
  .for-login .tsp-login-hint {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .for-login .form-group .d-flex {
    flex-wrap: wrap;
    gap: 6px;
  }
  .password-field { position: relative; }
  .for-login .tsp-reg-cycle { display: inline-block; padding: 10px 4px; }

  /* -------- Signup / Forgot cards (Frappe .page-card) -------- */
  .for-signup,
  .for-forgot,
  .for-login-with-email-link {
    padding: 12px 16px 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .for-signup .page-card,
  .for-forgot .page-card,
  .for-login-with-email-link .page-card {
    max-width: 100%;
    width: 100%;
    margin: 12px auto 0;
    padding: 20px 16px 24px;
    box-sizing: border-box;
    border-radius: 14px;
  }
  .for-signup .page-card-head,
  .for-forgot .page-card-head,
  .for-login-with-email-link .page-card-head {
    padding: 8px 0 12px;
    margin: 0 0 8px;
    text-align: center;
  }
  .for-signup .page-card-head img.app-logo,
  .for-forgot .page-card-head img.app-logo {
    height: 44px !important;
  }
  .for-signup .form-header,
  .for-forgot .page-card-head h4 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 14px;
  }
  .for-signup .page-card-body,
  .for-forgot .page-card-body {
    padding: 0;
  }
  .for-signup .page-card-actions,
  .for-forgot .page-card-actions {
    margin-top: 8px;
  }
  .for-signup .sign-up-message,
  .for-forgot .sign-up-message {
    margin-top: 16px;
  }
  .for-signup .sign-up-message a,
  .for-forgot .sign-up-message a {
    display: inline-block;
    padding: 8px 4px;
  }

  /* Contractor / Incident cards stack on a phone */
  .reg-type-options {
    flex-direction: column;
    gap: 8px;
  }
  .reg-type-option {
    padding: 14px 16px;
  }
  .reg-type-title { font-size: 0.95rem; }
  .reg-type-desc { font-size: 0.8rem; }

  .check-status-section {
    margin-top: 22px;
    padding-top: 20px;
  }
  .signup-success-panel { padding: 8px 4px 0; }
  .signup-success-message {
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: left;
  }
  .signup-next-steps {
    text-align: left;
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.55;
    margin: 0 0 20px;
    padding: 0 0 0 18px;
  }
  .signup-next-steps li { margin-bottom: 6px; }

  /* -------- Reset / set password -------- */
  .for-reset-password {
    margin: 0;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    min-height: 100dvh;
    box-sizing: border-box;
  }
  .for-reset-password .page-card-head {
    padding: 12px 8px 8px;
  }
  .for-reset-password .page-card-head img {
    max-height: 40px;
  }
  .for-reset-password .page-card-head h4 {
    font-size: 1.25rem;
    margin-top: 10px;
  }
  .for-reset-password .page-card {
    max-width: 100% !important;
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px 24px !important;
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }
  .password-strength-indicator {
    float: none !important;
    display: inline-block;
    padding: 0 !important;
    margin: 4px 0 8px !important;
  }
  .password-strength-message {
    margin-top: 4px !important;
    font-size: 0.85rem;
    line-height: 1.45;
  }
  .for-reset-password .sign-up-message {
    margin-top: 18px;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .for-login .login-form-container,
  .for-signup .page-card,
  .for-forgot .page-card,
  .for-reset-password .page-card {
    padding-left: 14px;
    padding-right: 14px;
  }
  .for-login .welcome-text .brand-name { font-size: 1.35rem; }
}