/* Custom login styles extracted from inline styles for cleaner templating */
:root{
    --login-green-1: #667eea;
    --login-green-2: #764ba2;
    --card-bg: rgba(255,255,255,0.98);
    --muted: #6b7280;
    --dark-blue: #1a3a52;
    --brown: #795548;
}

*{box-sizing:border-box}

body.auth-body-bg{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, var(--login-green-1) 0%, var(--login-green-2) 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding:15px;
}

.bg-overlay{display:none}

.wrapper-page-login{width:100%;max-width:450px;animation:login-slide-in .45s ease-out}
@keyframes login-slide-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.card{border:none;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;background:var(--card-bg)}
.card-body{padding:50px 40px;background:#ffffff}

.login-title{font-size:1.8rem;font-weight:700;color:var(--dark-blue);text-align:center;margin-bottom:8px;letter-spacing:-0.5px}
.login-subtitle{font-size:1.1rem;font-weight:600;color:var(--brown);text-align:center;margin-bottom:40px;letter-spacing:0.5px;line-height:1.6}
.login-icon{text-align:center;margin-bottom:10px}
.login-icon i{font-size:3rem;color:var(--login-green-1)}

.form-group{margin-bottom:20px}
.form-group:last-of-type{margin-bottom:30px}
.form-control{border:1px solid #e0e0e0;border-radius:8px;padding:12px 16px;font-size:0.95rem;transition:all 0.3s ease;background:#f8f9fa}
.form-control::placeholder{color:#9ca3af;font-weight:400}
.form-control:focus{border-color:var(--login-green-1);background:#fff;box-shadow:0 0 0 3px rgba(102,126,234,0.1);outline:none}

.btn-login{width:100%;padding:12px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--login-green-1) 0%,var(--login-green-2) 100%);color:white;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102,126,234,0.4)}
.btn-login:hover{box-shadow:0 6px 20px rgba(102,126,234,0.6);transform:translateY(-2px)}
.btn-login:disabled{opacity:0.78;cursor:not-allowed;transform:none}

.text-danger{font-size:13px;margin-top:6px;display:block}

/* small screens */
@media (max-width:576px){
    .wrapper-page-login{max-width:100%}
    .card-body{padding:30px 22px}
    .login-title{font-size:22px}
    .login-subtitle{font-size:13px;margin-bottom:18px}
    .form-control{padding:11px 12px;font-size:13px}
    .btn-login{padding:11px 18px;font-size:14px}
}

@media (max-width:480px){
    body.auth-body-bg{padding:10px}
    .card-body{padding:24px 18px}
}

/* subtle helper */
.form-horizontal{display:flex;flex-direction:column}