/* ===========================
   ERP LOGIN - GREEN THEME
   =========================== */

:root{
    --primary:#198754;
    --primary-dark:#146c43;
    --primary-light:#20c997;

    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-alt:#f8fafc;

    --text:#212529;
    --text-light:#6c757d;

    --border:#dce3ea;

    --danger:#dc3545;
    --warning:#ffc107;
    --success:#198754;

    --radius:14px;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --font-en:'Syne','DM Sans',sans-serif;
    --font-ar:'Cairo',sans-serif;
}

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

html,
body{
    width:100%;
    min-height:100%;
}

body{

    font-family:var(--font-en);
    background:

    radial-gradient(circle at top left,#dff7e9 0%,transparent 35%),

    radial-gradient(circle at bottom right,#d7f2ff 0%,transparent 30%),

    var(--bg);

    color:var(--text);

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

    padding:40px;

    overflow-x:hidden;

    position:relative;
}

html[dir=rtl] body{
    font-family:var(--font-ar);
}

/* Background */

.bg-canvas{

    position:fixed;
    inset:0;

    z-index:0;

    overflow:hidden;
}

.orb{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.20;

    animation:drift 18s infinite ease-in-out;
}

.orb-1{

    width:450px;
    height:450px;

    background:#28a745;

    left:-140px;
    top:-120px;
}

.orb-2{

    width:500px;
    height:500px;

    background:#20c997;

    right:-150px;
    bottom:-170px;

    animation-delay:-7s;
}

.orb-3{

    width:350px;
    height:350px;

    background:#198754;

    left:50%;
    top:40%;

    transform:translate(-50%,-50%);

    animation-delay:-12s;
}

@keyframes drift{

    0%,100%{

        transform:translate(0,0) scale(1);
    }

    50%{

        transform:translate(40px,-25px) scale(1.08);
    }
}

.bg-grid{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(25,135,84,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(25,135,84,.05) 1px,transparent 1px);

    background-size:42px 42px;

    z-index:0;
}

/* Login */

.login-wrap{

    position:relative;

    z-index:5;

    width:100%;
    max-width:460px;

    animation:fadeUp .7s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(35px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

.login-card{

    background:#fff;

    border-radius:22px;

    padding:45px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);
}





/* ===========================
   LOGO
=========================== */

.logo-block{
    text-align:center;
    margin-bottom:35px;
}

.logo-icon{

    width:72px;
    height:72px;

    margin:auto auto 18px;

    border-radius:18px;

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

    font-size:30px;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    box-shadow:
    0 10px 30px rgba(25,135,84,.35);

    animation:pulse 3s infinite;
}

@keyframes pulse{

    0%,100%{

        transform:scale(1);
        box-shadow:0 10px 30px rgba(25,135,84,.35);
    }

    50%{

        transform:scale(1.04);
        box-shadow:0 18px 40px rgba(25,135,84,.55);
    }
}

.logo-name{

    font-size:28px;

    font-weight:700;

    color:var(--primary-dark);

    margin-bottom:6px;
}

.logo-sub{

    color:var(--text-light);

    font-size:14px;
}


/* ===========================
   FORM
=========================== */

.form-group{

    margin-bottom:22px;
}

label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    color:var(--primary-dark);

    letter-spacing:.4px;
}

.input-wrap{

    position:relative;
}

.input-wrap i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#6c757d;

    transition:.25s;
}

html[dir=rtl] .input-wrap i{

    left:auto;
    right:16px;
}

.input-wrap input{

    width:100%;

    height:52px;

    padding-left:48px;

    padding-right:16px;

    border-radius:12px;

    border:1px solid var(--border);

    background:#fff;

    color:#222;

    font-size:15px;

    transition:.25s;

    outline:none;
}

html[dir=rtl] .input-wrap input{

    padding-left:16px;
    padding-right:48px;
}

.input-wrap input::placeholder{

    color:#999;
}

.input-wrap input:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 4px rgba(25,135,84,.12);
}

.input-wrap:focus-within i{

    color:var(--primary);
}


/* Password */

.pw-toggle{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    cursor:pointer;

    color:#6c757d;

    transition:.25s;
}

html[dir=rtl] .pw-toggle{

    right:auto;
    left:14px;
}

.pw-toggle:hover{

    color:var(--primary);
}



/* ===========================
   ALERTS
=========================== */

.alert{

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 16px;

    margin-bottom:20px;

    border-radius:12px;

    font-size:14px;

    border:1px solid transparent;

    animation:fadeAlert .35s ease;
}

@keyframes fadeAlert{

    from{

        opacity:0;
        transform:translateY(-8px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

.alert-danger{

    background:#fdecec;

    color:#b42318;

    border-color:#f5c2c7;
}

.alert-success{

    background:#edfdf3;

    color:#146c43;

    border-color:#badbcc;
}

.alert-warning{

    background:#fff8e5;

    color:#997404;

    border-color:#ffe69c;
}


/* ===========================
   BUTTON
=========================== */

.btn-login{

    width:100%;

    height:54px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-size:15px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    transition:.25s;

    position:relative;

    overflow:hidden;

    margin-top:10px;
}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(25,135,84,.30);
}

.btn-login:active{

    transform:translateY(0);
}

.btn-login:disabled{

    opacity:.7;

    cursor:not-allowed;
}

.btn-login::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent
    );

    opacity:0;

    transition:.25s;
}

.btn-login:hover::before{

    opacity:1;
}

.spinner{

    display:none;

    width:20px;
    height:20px;

    margin:auto;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;
}

@keyframes spin{

    to{

        transform:rotate(360deg);
    }
}

.btn-login.loading .btn-text{

    display:none;
}

.btn-login.loading .spinner{

    display:block;
}


/* ===========================
   FOOTER
=========================== */

.login-footer{

    text-align:center;

    margin-top:28px;

    color:#6c757d;

    font-size:13px;
}


/* ===========================
   LANGUAGE
=========================== */

.lang-switcher{

    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    gap:10px;

    z-index:100;
}

html[dir=rtl] .lang-switcher{

    right:auto;

    left:20px;
}

.lang-btn{

    text-decoration:none;

    padding:8px 14px;

    border-radius:10px;

    border:1px solid var(--border);

    background:#fff;

    color:#555;

    font-size:13px;

    transition:.25s;
}

.lang-btn:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);
}

.lang-btn.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);
}


/* ===========================
   PARTICLES
=========================== */

.particle{

    position:fixed;

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--primary-light);

    opacity:.35;

    animation:particleFloat linear infinite;
}

@keyframes particleFloat{

    from{

        transform:translateY(100vh);

        opacity:0;
    }

    20%{

        opacity:.5;
    }

    80%{

        opacity:.25;
    }

    to{

        transform:translateY(-10vh);

        opacity:0;
    }
}


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

@media (max-width:768px){

    body{

        padding:20px;
    }

    .login-card{

        padding:30px 24px;
    }

    .logo-name{

        font-size:24px;
    }

    .logo-icon{

        width:60px;
        height:60px;

        font-size:24px;
    }

    .lang-switcher{

        top:12px;

        right:12px;
    }

    html[dir=rtl] .lang-switcher{

        right:auto;

        left:12px;
    }
}

@media (max-width:480px){

    .login-card{

        padding:24px 18px;
    }

    .btn-login{

        height:50px;
    }

    .input-wrap input{

        height:48px;
    }
}