/* ===================================================== Login Page CSS – FULL FILE Mobile: full screen, scroll-only, fixed footer ===================================================== */ /* NOTE: To fully disable zoom on mobile, you MUST include this in : */ /* ---------- Base Reset ---------- */ html, body { align-items: flex-start; /* stop vertical centering */ padding-top: 3rem; /* control top spacing here only */ } /* ---------- Body ---------- */ body { font-family: 'Roboto', sans-serif !important; background: #2c3e50 !important; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; -webkit-text-size-adjust: 100%; } /* Remove tap highlight */ * { -webkit-tap-highlight-color: transparent; } /* Prevent iOS input zoom */ input, select, textarea { font-size: 16px !important; } /* ---------- Container ---------- */ .login-container { max-width: 400px; width: 100%; /* margin: auto; */ padding: 0 12px; } /* ---------- Card ---------- */ .card { border: none; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 0; overflow: hidden; background: #fff; } /* Smaller margin on small screens (desktop look preserved) */ @media (max-width: 576px) { .card { justify-content: flex-start; /* keep content toward top */ } .card .card-body { padding-top: 0; /* adjust spacing inside card */ } } /* ---------- Card Body ---------- */ .card .card-body { padding: 1.25rem; } /* ---------- Card Footer ---------- */ .card .card-footer { background: #fff; border-top: 1px solid rgba(0,0,0,.125); } /* ---------- Inputs ---------- */ .form-control:focus { box-shadow: none; border-color: #3498db; } /* ---------- Buttons ---------- */ .btn-primary { background-color: #3498db; border: none; transition: background-color 0.3s; } .btn-primary:hover { background-color: #2980b9; } /* ---------- reCAPTCHA ---------- */ .recaptcha-container { text-align: center; } /* ---------- OTP Digit Inputs ---------- */ .digit { width: 50px; height: 50px; font-size: 2rem; text-align: center; } /* Suppress autofill yellow flash */ input:-webkit-autofill { transition: background-color 9999s ease-out 0s; } /* OTP section */ #showotpform .digit { width: 3rem; height: 3rem; text-align: center; font-size: 1.5rem; border: 1px solid #ccc; border-radius: .5rem; } #showotpform .digit:focus { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,0.25); outline: none; } /* ===================================================== MOBILE FULL-SCREEN MODE Card body scrolls, footer always visible ===================================================== */ @media (max-width: 576px) { /* Full screen container */ .login-container { width: 100%; max-width: 100%; min-height: 100dvh; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* Card becomes full screen */ .card { margin: 0; border-radius: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; /* IMPORTANT */ } /* Scroll ONLY the body */ .card .card-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: 1rem; padding-right: 1rem; } /* Footer always visible */ .card .card-footer { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 10; background: #fff; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); } /* Better mobile tap behavior */ button, input { touch-action: manipulation; } } /* ========================= Move sign-in card closer to top ========================= */ /* Desktop/tablet: stop centering vertically; push toward top */ body { align-items: flex-start; /* was center */ padding-top: 4vh; /* adjust: 2vh–8vh */ } /* Card: reduce its own top margin */ .card { margin-top: 0vh; /* was 8vh */ } /* Phone: keep full-screen card, but bias content toward top */ @media (max-width: 576px) { .card { justify-content: flex-start; /* was center */ } .card .card-body { padding-top: 1.25rem; /* adjust to taste */ } } /* password force change */ #forcedPasswordModal .modal-content { overflow: hidden; } #forcedPasswordModal .modal-header { background: linear-gradient(180deg, rgba(13,110,253,0.08), rgba(13,110,253,0.02)); } #forcedPasswordModal .form-control, #forcedPasswordModal .btn { border-radius: 0.8rem; } #forcedPasswordModal .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } #forcedPasswordModal .input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 82px; } #fp_user_email { display: flex; align-items: center; font-weight: 500; } #fp_password_rules li.ok { color: var(--bs-success); font-weight: 600; } #fp_password_rules li.bad { color: var(--bs-danger); } #showotpform input.digit.otp-filled { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success); box-shadow: 0 0 0 0.15rem rgba(var(--bs-success-rgb), 0.25); }