/* =========================================
   AssessGuard Login Theme
========================================= */

:root{
    --primary-dark:#041B66;
    --primary:#0A49D1;
    --primary-light:#11A8FF;
    --text-dark:#1e293b;
    --text-muted:#6b7280;
    --border:#dbe3f0;
    --bg-light:#f8fbff;
}

/* =========================================
   Base
========================================= */

html,
body{
    height:100%;
    margin:0;
    padding:0;
    font-family:'Roboto',sans-serif;
}

/* =========================================
   Background
========================================= */

.body-bg{
    background-color:#ffffff;
    background-image:url("/theme/images/bg1.png");
    background-repeat:no-repeat;
    background-position:left center;
    background-size:60% 100%;
    overflow:hidden;
}

/* =========================================
   Layout
========================================= */

.auth-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-right:8%;
}

/* =========================================
   Login Side
========================================= */

.auth-right{
    width:100%;
    max-width:490px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:7%;
}

@media (max-width:992px){
    .auth-right{
        padding-left:0;
    }
}

/* =========================================
   Login Card
========================================= */

.login-card{
    width:100%;
    background:#ffffff;
    border-radius:20px;
    padding:40px;
    border:1px solid rgba(10,73,209,0.08);
    box-shadow: 0 10px 40px rgba(4,27,102,0.10);
    transition:all .3s ease;
}

.login-card:hover{
    transform:translateY(-2px);
    box-shadow: 0 18px 45px rgba(4,27,102,0.14);
}

/* =========================================
   Logo
========================================= */

.logo-brand img{
    height:110px;
    margin-bottom:12px;
}

/* =========================================
   Typography
========================================= */

.login-title{
    font-size:30px;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:8px;
}

.login-subtitle{
    color:var(--text-muted);
    font-size:15px;
    margin-bottom:0;
}

.text-theme-accent {
    color: #11A8FF !important;
}

/* =========================================
   Links
========================================= */

a{
    color:var(--primary);
    text-decoration:none;
    transition:all .3s ease;
}

a:hover{
    color:var(--primary-light);
    text-decoration:none;
}

/* =========================================
   Form Controls
========================================= */

.form-control{
    height:52px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg-light);
    padding-left:45px;
    font-size:15px;
    transition:all .3s ease;
}

.form-control:focus{
    border-color:var(--primary);
    background:#ffffff;
    box-shadow: 0 0 0 4px rgba(17,168,255,0.12);
}

/* =========================================
   Input Icons
========================================= */

.form-control-feedback{
    color:#94a3b8;
    left:14px;
}

/* =========================================
   Buttons
========================================= */

.btn-theme{
    height:52px;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    color:#ffffff;
    background:
        linear-gradient(
            90deg,
            var(--primary-dark) 0%,
            var(--primary) 55%,
            var(--primary-light) 100%
        );
    box-shadow: 0 8px 20px rgba(10,73,209,0.25);
    transition:all .3s ease;
}

.btn-theme:hover{
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow: 0 12px 24px rgba(10,73,209,0.32);
}

/* =========================================
   Alerts
========================================= */

.alert{
    border-radius:12px;
    font-size:14px;
}

/* =========================================
   Validation
========================================= */
.help-block,
.invalid-feedback{
    color:#D84315;
    font-size:13px;
}

/* =========================================
   Footer
========================================= */
.login-footer{
    margin-top:18px;
    color:#94a3b8;
    font-size:13px;
}

/* =========================================
   Responsive
========================================= */

@media (max-width:1200px){
    .body-bg{
        background-size:58% 100%;
    }
    .auth-wrapper{
        padding-right:5%;
    }
}

@media (max-width:992px){
    .body-bg{
        background-image:none;
        background:linear-gradient(135deg,#041B66 0%,#0A49D1 100%);
    }
    .auth-wrapper{
        justify-content:center;
        padding:30px;
    }
    .login-card{
        max-width:450px;
    }
}

@media (max-width:576px){
    .auth-wrapper{
        padding:20px;
    }
    .login-card{
        padding:30px 22px;
    }
    .login-title{
        font-size:24px;
    }
    .logo-brand img{
        height:90px;
    }
}