/* ==========================================================
   FINSYS V2 - Finance Premium Login
   ========================================================== */

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

html,
body{
    height:100%;
    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #081120 0%,
            #10213f 50%,
            #16294d 100%
        );

    overflow:hidden;
}

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

#logincontainer{

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:30px;
}

#loginbox{

    width:1000px;
    max-width:95vw;
    min-height:620px;

    display:flex;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 25px 80px rgba(0,0,0,.45);
}

/* ==========================================================
   Bloc gauche
   ========================================================== */

.login-left{

    width:42%;

    background:
        linear-gradient(
            180deg,
            #8f0000 0%,
            #700000 100%
        );

    color:#fff;

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    position:relative;

    overflow:hidden;
}
/* ==========================================================
   Finance Background Effect
   ========================================================== */

.login-left::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    top:-180px;
    right:-220px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.05);

    box-shadow:
        0 0 0 80px rgba(255,255,255,.025),
        0 0 0 160px rgba(255,255,255,.018),
        0 0 0 240px rgba(255,255,255,.012);

    pointer-events:none;
}

.login-left::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    bottom:-120px;
    left:-120px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.04);

    box-shadow:
        0 0 0 60px rgba(255,255,255,.02),
        0 0 0 120px rgba(255,255,255,.01);

    pointer-events:none;
}

.login-left > *{

    position:relative;

    z-index:2;
}
.brand-zone{

    text-align:left;
}

.brand-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#fff;

    color:#8f0000;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:38px;
    font-weight:bold;

    margin-bottom:20px;
}

.brand-title{

    font-size:42px;
    font-weight:700;

    letter-spacing:1px;
}

.brand-subtitle{

    margin-top:8px;

    color:#ffd8d8;

    font-size:15px;
}

.modules{

    margin-top:40px;
}

.modules h3{

    margin-bottom:25px;

    color:#ffd166;

    font-size:16px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.modules ul{

    list-style:none;
}

.modules li{

    padding:10px 0;

    font-size:16px;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.footer-zone{

    color:#f2c7c7;

    font-size:13px;
}

/* ==========================================================
   Bloc droit
   ========================================================== */

.login-right{

    width:58%;

    background:#1e293b;

    padding:60px;
}

.auth-title{

    color:#fff;

    font-size:34px;

    font-weight:600;

    margin-bottom:10px;
}

.auth-subtitle{

    color:#94a3b8;

    margin-bottom:40px;
}

.form-group{

    margin-bottom:22px;
}
.label{

    display:block;

    margin-bottom:8px;

    color:#d6a21c;

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

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;
}
.form-group label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:14px;

    font-weight:500;
}

.logininput{

    width:100%;

    padding:14px 16px;

    border-radius:10px;

    border:1px solid #334155;

    background:#0f172a;

    color:#fff;

    font-size:15px;
}
.logininput{

    height:54px;
}
.captcha-container img{

    height:70px;
}
.logininput:focus{

    outline:none;

    border-color:#d6a21c;

    box-shadow:
        0 0 0 3px rgba(214,162,28,.15);
}

.captcha-zone{

    margin-top:10px;
}

.captcha-zone img{

    border-radius:8px;

    border:1px solid #334155;

    margin-bottom:12px;
}

.loginbtn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #b30000,
            #d61c1c
        );

    transition:.25s;
}

.loginbtn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 10px 25px rgba(179,0,0,.35);
}

/* ==========================================================
   Message erreur
   ========================================================== */

.captcha-error{

    background:#7f1d1d;

    color:#fff;

    padding:12px;

    border-radius:8px;

    margin-bottom:20px;

    text-align:center;
}

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

@media(max-width:900px){

    #loginbox{

        flex-direction:column;
        width:95%;
    }

    .login-left{

        width:100%;
        padding:35px;
    }

    .login-right{

        width:100%;
        padding:35px;
    }

    .brand-title{

        font-size:32px;
    }
}


.brand-title{

    text-shadow:
        0 3px 10px rgba(0,0,0,.25);
}

.login-right{

    width:58%;

    background:#1e293b;

    padding:60px;

    position:relative;
}

.login-right::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #d6a21c,
            #f5d76e,
            #d6a21c
        );
}

.captcha-container{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;
}

.captcha-container img{

    border-radius:8px;

    border:1px solid #334155;

    background:#fff;

    padding:4px;

    height:60px;
}

.captcha-refresh{

    width:42px;
    height:42px;

    border:none;

    border-radius:8px;

    background:#334155;

    color:#fff;

    cursor:pointer;

    font-size:18px;
}

.captcha-refresh:hover{

    background:#475569;
}

.btn-view{
    background:#243b55;
    color:#fff;
}

.btn-edit{
    background:#d6a21c;
    color:#111;
}

.btn-delete{
    background:#8f0000;
    color:#fff;
}

.btn-view,
.btn-edit,
.btn-delete{
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
    margin-right:4px;
    font-size:12px;
    font-weight:600;
}

.toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.toolbar .form-control{
    width:300px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
}


.actions{
    white-space:nowrap;
}

.action-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:5px 10px;

    border-radius:6px;

    text-decoration:none;

    font-size:12px;
    font-weight:600;

    margin-right:4px;

    transition:.2s;
}

.action-btn i{
    font-size:11px;
}

.action-btn.view{
    background:#243b55;
    color:#fff;
}

.action-btn.edit{
    background:#d6a21c;
    color:#111;
}

.action-btn.delete{
    background:#8f0000;
    color:#fff;
}

.action-btn:hover{
    transform:translateY(-1px);
    opacity:.9;
}