/* =====================================================
   GLOBAL
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background:#eef3f8;

    color:#2c3e50;

}


img{

    max-width:100%;

}


/* =====================================================
   SIDEBAR
===================================================== */


.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    background:#003b8e;

    color:white;

    padding:25px;

    z-index:1000;

}


.brand{

    text-align:center;

    margin-bottom:40px;

}


.brand img{

    width:75px;

    margin-bottom:10px;

}


.brand h4{

    margin:5px 0;

    color:white;

}


.brand span{

    font-size:14px;

    opacity:.8;

}



.sidebar ul{

    list-style:none;

    padding:0;

}



.sidebar li{

    margin-bottom:8px;

}



.sidebar a{

    display:block;

    color:white;

    text-decoration:none;

    padding:13px 18px;

    border-radius:10px;

    transition:.25s;

}


.sidebar a:hover,
.sidebar .active a{

    background:rgba(255,255,255,.15);

}



/* =====================================================
   DASHBOARD CONTENT
===================================================== */


.main{

    margin-left:260px;

    padding:35px;

}



.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.user{

    background:white;

    padding:12px 18px;

    border-radius:12px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

}



/* =====================================================
   STAT CARD
===================================================== */


.stat-card{

    background:white;

    border-radius:15px;

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}



.stat-card:hover{

    transform:translateY(-4px);

}



.stat-card h6{

    color:#888;

}



.stat-card h2{

    font-weight:700;

}



.stat-card i{

    font-size:40px;

    color:#0056b3;

}



/* =====================================================
   SEARCH
===================================================== */


.search-box{

    margin-top:35px;

    background:white;

    padding:30px;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



#keyword{

    height:50px;

    font-size:17px;

}



.student-card{

    margin-top:20px;

    background:white;

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

    transition:.25s;

}



.student-card:hover{

    border-color:#0d6efd;

    box-shadow:0 5px 20px rgba(13,110,253,.15);

}



.student-name{

    font-size:20px;

    font-weight:700;

    color:#003b8e;

}



.student-info{

    margin-top:8px;

    color:#666;

    line-height:1.7;

}





/* =====================================================
   LOGIN PAGE
===================================================== */


body.login-page{

    margin:0;

    min-height:100vh;

    overflow:auto;

}



.login-page{

    min-height:100vh;

    font-family:'Inter','Segoe UI',sans-serif;

    background:

    linear-gradient(

        135deg,

        #003b8e,

        #0066cc

    );


    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}



/* WRAPPER */


.login-wrapper{

    width:1100px;

    max-width:95%;

    display:grid;

    grid-template-columns:

    1fr 430px;


    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

}



/* LEFT */


.login-left{

    padding:65px;

    color:white;

    background:

    linear-gradient(

        135deg,

        #003b8e,

        #0056b3

    );


    display:flex;

    flex-direction:column;

    justify-content:center;

}



.login-logo{

    width:90px;

    height:90px;

    object-fit:contain;

    background:white;

    padding:8px;

    border-radius:20px;

    margin-bottom:25px;

}



.login-left h1{

    font-size:48px;

    font-weight:700;

    margin-bottom:5px;

}



.login-left h3{

    font-size:24px;

    font-weight:400;

    margin-bottom:25px;

}



.login-left p{

    font-size:16px;

    line-height:1.8;

}



/* SYSTEM INFO */


.system-info{

    margin-top:35px;

}



.system-info div{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}



.system-info i{

    width:25px;

}





/* RIGHT */


.login-right{

    background:#f8fafc;

    padding:45px;

    display:flex;

    align-items:center;

}



/* LOGIN BOX */


.login-card{

    width:100%;

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}



.login-card h2{

    color:#003b8e;

    font-weight:700;

}



.login-card p{

    color:#64748b;

    margin-bottom:30px;

}



/* BOOTSTRAP OVERRIDE LOGIN */


.login-card .input-group-text{

    background:#edf4ff;

    border:none;

    color:#003b8e;

}



.login-card .form-control{

    height:50px;

    background:#edf4ff;

    border:none;

}



.login-card .form-control:focus{

    background:#edf4ff;

    border:none;

    box-shadow:

    0 0 0 3px rgba(0,86,179,.15);

}



/* BUTTON */


.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:10px;

    background:#003b8e;

    color:white;

    font-weight:600;

    transition:.25s;

}



.btn-login:hover{

    background:#00275f;

}





.login-footer{

    text-align:center;

    margin-top:30px;

    color:#94a3b8;

}





/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:992px){


    .login-wrapper{

        grid-template-columns:1fr;

    }



    .login-left{

        padding:40px;

    }



    .sidebar{

        width:80px;

        padding:15px;

    }



    .main{

        margin-left:80px;

    }


}



@media(max-width:600px){


    .login-page{

        padding:15px;

    }


    .login-right{

        padding:25px;

    }


    .login-card{

        padding:25px;

    }


}