@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body{
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 15% 0%, rgba(10,81,161,0.12), rgba(10,81,161,0) 55%),
                radial-gradient(900px 500px at 95% 20%, rgba(251,191,36,0.18), rgba(251,191,36,0) 50%),
                linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.full-screen {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

:root{
    --login-primary: #0a51a1;
    --login-secondary: #fbbf24;
    --login-text: #111827;
}

#loginForm{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* Hide legacy banner/carousel images on login */
#mycarousel{
    display: none !important;
}

.login-card{
    width: 360px;
    max-width: 92vw;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    padding: 26px 24px;
}

.login-brand{
    text-align: center;
    margin-bottom: 18px;
}

.brand-icon{
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--login-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-icon img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.login-brand h2{
    margin: 0;
    font-size: 22px;
    color: var(--login-primary);
    font-weight: 700;
}

.login-brand p{
    margin: 8px 0 0;
    font-size: 12.5px;
    color: rgba(17,24,39,0.8);
    line-height: 1.45;
}

.form-signin{
    margin: 0;
}

.form-signin label{
    font-size: 13px;
    color: rgba(17,24,39,0.85);
    font-weight: 500;
}

.field-group{
    margin-bottom: 14px;
}

.label-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.forgot-link{
    font-size: 12.5px;
    color: rgba(10,81,161,0.95);
    text-decoration: none;
}

.forgot-link:hover{
    text-decoration: underline;
}

.password-wrap{
    position: relative;
}

.pwd-icon{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(10,81,161,0.85);
    pointer-events: none;
}

.form-control{
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(17,24,39,0.12);
}

.form-control:focus{
    border-color: rgba(10,81,161,0.55);
    box-shadow: 0 0 0 3px rgba(10,81,161,0.15);
    outline: none;
}

.remember-row{
    display: flex;
    align-items: center;
    margin: 10px 0 14px;
}

.remember-me{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(17,24,39,0.85);
}

.btn-signin{
    width: 100%;
    background: var(--login-secondary);
    border: none;
    border-radius: 8px;
    color: #0b2b4a;
    padding: 10px 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.btn-signin:hover{
    filter: brightness(0.97);
}

.or-divider{
    text-align: center;
    margin: 18px 0 10px;
    color: rgba(17,24,39,0.55);
    font-size: 12.5px;
}

.social-row{
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 6px;
}

.social-row a{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(17,24,39,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(17,24,39,0.55);
    text-decoration: none;
}

.social-row a:hover{
    border-color: rgba(10,81,161,0.35);
    color: rgba(10,81,161,0.95);
}

.login-err{
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.2);
    color: rgba(127,29,29,1);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}