/* Simpla Work App - loginscherm (login.aspx + loginByPin.aspx) */

body.login {
    min-height: 100vh;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.login .form-signin { max-width: 380px; padding: 24px 16px 32px; }

.loginLogo { text-align: center; margin: 12px 0 20px; }
.loginLogo img { width: 120px; border-radius: 12px; }

.login h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; }
.login .form-signin-heading { opacity: 0.9; margin-bottom: 18px; }

.loginField { text-align: left; margin-bottom: 12px; }
.loginField label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; opacity: 0.9; }

.form-signin .loginField .form-control,
.form-signin input[type="password"] {
    margin-bottom: 0;
    border-radius: 8px;
    min-height: 48px;
    font-size: 16px; /* voorkomt automatisch inzoomen op iPhone */
}

.loginPw { display: flex; }
.loginPw .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.loginPwToggle {
    border: 1px solid #ced4da; border-left: 0; background: #fff; color: #495057;
    border-radius: 0 8px 8px 0; padding: 0 14px; font-size: 1.1rem; min-width: 52px;
}

.login .checkbox { text-align: left; margin: 6px 0 16px; }
.login .checkbox label { display: inline; font-weight: normal; }
.login .checkbox input { width: 18px; height: 18px; vertical-align: -3px; }

.login .btn-lg { min-height: 50px; border-radius: 8px; font-weight: 600; }
.login .btn-block + .btn-block { margin-top: 10px; }
.login .btn-secondary { border-radius: 8px; min-height: 44px; }

.loginDivider { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 0.85rem; opacity: 0.8; }
.loginDivider::before, .loginDivider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.35); }

.loginHelp { font-size: 0.85rem; opacity: 0.85; margin: 16px 0 24px; }

.txtLoginPIN { text-transform: uppercase; letter-spacing: 6px; font-weight: 600; text-align: center; font-size: 1.4rem !important; }

#installApp { margin-top: 8px; }