/*
===============================================================================
Enterprise Order System

Login Page CSS

Design:
    - Enterprise SaaS Login
    - Tabler Style
    - Bootstrap 5 Compatible
    - Responsive

===============================================================================
*/


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


.login-page {


    min-height:100vh;


    position:relative;


    overflow:hidden;


    display:flex;


    align-items:center;


    justify-content:center;


}



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


.login-background-image {


    position:absolute;


    inset:0;


    background-image:


        url("/static/images/login/login-background.jpg");


    background-size:cover;


    background-position:center;


    filter:blur(8px);


    transform:scale(1.08);


    z-index:0;


}



.login-background-overlay {


    position:absolute;


    inset:0;


    background:


        rgba(15,23,42,.45);


    z-index:1;


}





.login-content {


    position:relative;


    z-index:2;


    width:100%;


}






/*
===============================================================================
Main Login Layout

Left Image + Right Form

===============================================================================
*/


.login-layout {


    width:900px;


    max-width:100%;


    display:flex;


    align-items:stretch;


    overflow:hidden;


    border-radius:20px;


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


    box-shadow:


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


    margin:auto;


}






/*
===============================================================================
Left Brand Panel
===============================================================================
*/


.login-brand-wrapper {


    width:50%;


    display:flex;


}



.login-brand-panel {


    width:100%;


    height:100%;


    display:flex;


    position:relative;


    overflow:hidden;


    background:#f8fafc;


}




.login-brand-image {


    width:100%;


    height:100%;


    object-fit:contain;


    display:block;


}




.login-brand-overlay {


    position:absolute;


    inset:0;


    background:


        linear-gradient(

            135deg,

            rgba(0,0,0,.15),

            rgba(0,0,0,.02)

        );


}







/*
===============================================================================
Right Login Panel
===============================================================================
*/


.login-form-wrapper {


    width:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    padding:50px;


}




.login-form-panel {


    width:100%;


    max-width:360px;


}







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

Glass Style
===============================================================================
*/


.login-card {


    background:


        rgba(255,255,255,.92);


    backdrop-filter:


        blur(20px);


    border-radius:20px;


    border:0;


}






.login-card .card-body {


    padding:0;


}







/*
===============================================================================
Brand / Title
===============================================================================
*/


.login-card .navbar-brand {


    justify-content:center;


    font-size:26px;


    font-weight:700;


}



.login-card h2 {


    font-weight:700;


}






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


.login-card .form-control {


    height:46px;


}



.login-card .input-group-flat {


    border-radius:8px;


}





.input-icon-addon {


    color:#9ca3af;


}







/*
===============================================================================
Password Toggle

Tabler Icon
===============================================================================
*/


.password-toggle {


    display:flex;


    align-items:center;


    justify-content:center;


    border:0;


    background:none;


    padding:0;


    cursor:pointer;


    color:#6b7280;


}



.password-toggle i {


    font-size:20px;


}



.password-toggle:hover {


    color:#206bc4;


}






/*
===============================================================================
Login Button
===============================================================================
*/


.login-card .btn-primary {


    height:48px;


    font-size:16px;


    font-weight:600;


}



.login-card .btn-primary:hover {


    transform:translateY(-1px);


}







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


.mobile-logo {


    width:70px;


    height:70px;


    margin:0 auto 20px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:36px;


    background:#ffffff;


    border-radius:20px;


    box-shadow:


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


}







/*
===============================================================================
Security Notice
===============================================================================
*/


.login-security {


    margin-top:25px;


    padding-top:18px;


    border-top:1px solid #e5e7eb;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:8px;


    color:#6b7280;


    font-size:14px;


}




.login-security i {


    color:#16a34a;


}







/*
===============================================================================
Footer
===============================================================================
*/


.login-footer {


    margin-top:20px;


    text-align:center;


    color:#9ca3af;


    font-size:13px;


}








/*
===============================================================================
Login Success Animation
===============================================================================
*/


.login-success-overlay {


    position:fixed;


    inset:0;


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


    display:none;


    align-items:center;


    justify-content:center;


    z-index:9999;


}



.login-success-overlay.show {


    display:flex;


}




.success-icon {


    width:90px;


    height:90px;


    border-radius:50%;


    background:#16a34a;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    animation:


        success-pop .5s ease;


}




.success-icon i {


    font-size:45px;


}





@keyframes success-pop {


    from {


        transform:scale(.3);


        opacity:0;


    }


    to {


        transform:scale(1);


        opacity:1;


    }


}







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

Tablet / Mobile

===============================================================================
*/


@media(max-width:991px){


    .login-page {


        padding:20px;


    }




    /*
    Hide left image
    */


    .login-brand-wrapper {


        display:none;


    }





    .login-layout {


        width:420px;


        max-width:100%;


        display:block;


    }





    .login-form-wrapper {


        width:100%;


        padding:35px;


    }



}






@media(max-width:576px){


    .login-form-wrapper {


        padding:25px;


    }





    .login-card .navbar-brand {


        font-size:22px;


    }



}


/*
===============================================================================
Force Desktop Two Column Layout
===============================================================================
*/


@media(min-width:992px){


    .login-layout {


        display:flex !important;


        flex-direction:row !important;


        align-items:stretch !important;


    }




    .login-brand-wrapper {


        width:50% !important;


        flex:0 0 50% !important;


        max-width:50% !important;


        display:flex !important;


    }




    .login-form-wrapper {


        width:50% !important;


        flex:0 0 50% !important;


        max-width:50% !important;


        display:flex !important;


    }


}



.password-input-wrapper {

    position:relative;

}



.password-input-wrapper .password-toggle {


    position:absolute;


    right:10px;


    top:50%;


    transform:translateY(-50%);


    z-index:5;


}



.password-input-wrapper .form-control {


    padding-right:45px;


}