/* ============================================================
   FILE: assets/css/login.css
   PURPOSE: Login page styles — full-bleed slider + glass card
   ============================================================ */

:root {
    --bg-base:      #0d1b3e;
    --accent-blue:  #0052D4;
    --accent-blue-light: #4364F7;
    --text-primary: #f1f5f9;
    --text-muted:   #94a3b8;
    --radius:16px;
}

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

body{
    font-family:'Inter',sans-serif;
    background:var(--bg-base);
    color:var(--text-primary);
    min-height:100vh;
}

/* ============================================================
   WRAPPER — full viewport stage
============================================================ */

.login-wrapper{
    position:relative;
    min-height:100vh;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:4vw;
}

/* ============================================================
   FULL-BLEED SLIDER BACKGROUND
============================================================ */

.slider{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 2s ease, transform 8s ease;
    overflow:hidden;
}

.slide.active{
    opacity:1;
    transform:scale(1);
}

/* Photo backgrounds — swap the flat gradients below for your real photos:
   background: url('/assets/images/login/slide1.jpg') center/cover no-repeat;  */

.slide-1{ background:url('/assets/images/login/slide1.jpg') center/cover no-repeat; }
.slide-2{ background:url('/assets/images/login/slide2.jpg') center/cover no-repeat; }
.slide-3{ background:url('/assets/images/login/slide3.jpg') center/cover no-repeat; }
.slide-4{ background:url('/assets/images/login/slide4.jpg') center/cover no-repeat; }

.slide-shape{
    position:absolute;
    border-radius:50%;
    background:rgba(0,82,212,.16);
    filter:blur(60px);
}

.shape-a{
    width:420px;
    height:420px;
    top:-120px;
    left:-100px;
    animation:float-a 12s ease-in-out infinite;
}

.shape-b{
    width:340px;
    height:340px;
    bottom:-100px;
    right:10%;
    background:rgba(67,100,247,.12);
    animation:float-b 14s ease-in-out infinite;
}

@keyframes float-a{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(40px,50px); }
}

@keyframes float-b{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(-35px,-40px); }
}

/* Ambient floating particles for depth */

.particles{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.particles span{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    animation:drift linear infinite;
}

.particles span:nth-child(1){ left:8%;  top:80%;  animation-duration:16s; animation-delay:0s;  }
.particles span:nth-child(2){ left:22%; top:95%;  animation-duration:20s; animation-delay:2s;  width:3px; height:3px; }
.particles span:nth-child(3){ left:40%; top:88%;  animation-duration:14s; animation-delay:4s;  }
.particles span:nth-child(4){ left:58%; top:100%; animation-duration:22s; animation-delay:1s;  width:5px; height:5px; }
.particles span:nth-child(5){ left:70%; top:90%;  animation-duration:18s; animation-delay:3s;  }
.particles span:nth-child(6){ left:83%; top:96%;  animation-duration:15s; animation-delay:5s;  width:3px; height:3px; }
.particles span:nth-child(7){ left:12%; top:70%;  animation-duration:24s; animation-delay:6s;  }
.particles span:nth-child(8){ left:65%; top:75%;  animation-duration:19s; animation-delay:2.5s; width:5px; height:5px; }

@keyframes drift{
    0%{   transform:translateY(0)     translateX(0);    opacity:0; }
    10%{  opacity:.6; }
    90%{  opacity:.4; }
    100%{ transform:translateY(-100vh) translateX(30px); opacity:0; }
}

/* Dark gradient wash so the card and text stay readable over any photo */

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, rgba(6,13,32,.75) 0%, rgba(6,13,32,.35) 45%, rgba(6,13,32,.65) 100%);
    z-index:1;
    pointer-events:none;
}

/* ============================================================
   BRAND CAPTION — bottom-left over the photo
============================================================ */

.brand-caption{
    position:absolute;
    left:4vw;
    bottom:4vw;
    z-index:2;
    max-width:420px;
}

.brand-caption h1{
    font-size:2.25rem;
    font-weight:800;
    color:#ffffff;
    letter-spacing:-.5px;
    margin-bottom:.4rem;
    text-shadow:0 4px 20px rgba(0,0,0,.35);
}

.brand-caption p{
    color:#cbd8f5;
    font-size:1rem;
    font-weight:400;
    margin-bottom:1.5rem;
}

.slider-dots{
    display:flex;
    gap:.5rem;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:.3s;
}

.dot.active{
    background:#ffffff;
    width:26px;
    border-radius:6px;
}

/* ============================================================
   FLOATING GLASS LOGIN CARD
============================================================ */

.login-card-wrap{
    position:relative;
    z-index:2;
    width:100%;
    max-width:400px;
}

.card-enter{
    animation:cardEnter .9s cubic-bezier(.16,1,.3,1) both;
}

@keyframes cardEnter{
    from{ opacity:0; transform:translateY(28px) scale(.98); }
    to{   opacity:1; transform:translateY(0) scale(1); }
}

.login-card{
    position:relative;
    width:100%;
    background:rgba(20,32,66,.55);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    padding:2.5rem 2.25rem;
    box-shadow:0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow:hidden;
}

.accent-bar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,
        var(--accent-blue) 0%,
        var(--accent-blue-light) 25%,
        #7fa8ff 50%,
        var(--accent-blue-light) 75%,
        var(--accent-blue) 100%);
    background-size:200% 100%;
    animation:accentFlow 5s linear infinite;
}

@keyframes accentFlow{
    0%{   background-position:0% 0%; }
    100%{ background-position:200% 0%; }
}

.brand-logo{
    display:block;
    width:64px;
    height:64px;
    object-fit:contain;
    background:white;
    border-radius:50%;
    padding:8px;
    margin:0 auto 1.25rem;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
}

.login-header{
    text-align:center;
    margin-bottom:1.75rem;
}

.login-header h2{
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:.3rem;
    color:#ffffff;
}

.login-header p{
    color:var(--text-muted);
    font-size:.9rem;
}

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

.form-group{
    margin-bottom:1.1rem;
}

.form-group label{
    display:block;
    margin-bottom:.4rem;
    font-size:.8rem;
    color:#b6c2e0;
    font-weight:500;
}

.input-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.input-icon{
    position:absolute;
    left:.875rem;
    font-size:.95rem;
    opacity:.85;
}

.input-wrap input{
    width:100%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    padding:.7rem 2.75rem .7rem 2.6rem;
    color:white;
    font-size:.92rem;
    font-family:inherit;
    transition:.2s;
}

.input-wrap input::placeholder{
    color:rgba(255,255,255,.4);
}

.input-wrap input:focus{
    outline:none;
    border-color:var(--accent-blue-light);
    background:rgba(255,255,255,.1);
    box-shadow:0 0 0 3px rgba(67,100,247,.25);
}

.toggle-pw{
    position:absolute;
    right:.875rem;
    background:none;
    border:none;
    cursor:pointer;
    font-size:.95rem;
    opacity:.7;
    color:white;
}

.toggle-pw:hover{
    opacity:1;
}

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

.btn-login{
    position:relative;
    width:100%;
    background:linear-gradient(135deg, var(--accent-blue-light), var(--accent-blue));
    color:white;
    border:none;
    border-radius:10px;
    padding:.8rem;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-top:.4rem;
    box-shadow:0 10px 25px rgba(0,82,212,.35);
    transition:.25s;
    overflow:hidden;
}

.btn-login::before{
    content:'';
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.btn-login:hover::before{
    left:125%;
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,82,212,.45);
}

.forgot-link{
    text-align:center;
    margin-top:1.1rem;
}

.forgot-link a{
    color:#a8b8e8;
    font-size:.8rem;
    text-decoration:none;
}

.forgot-link a:hover{
    color:#ffffff;
    text-decoration:underline;
}

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

.alert{
    padding:.65rem .9rem;
    border-radius:8px;
    margin-bottom:1.1rem;
    font-size:.82rem;
    border-left:3px solid;
}

.alert-error{
    background:rgba(92,26,36,.55);
    border-color:#dc3545;
    color:#fecaca;
}

.alert-success{
    background:rgba(20,83,45,.55);
    border-color:#28a745;
    color:#d1fae5;
}

.alert-warning{
    background:rgba(92,74,10,.55);
    border-color:#ffc107;
    color:#fef3c7;
}

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

.login-footer{
    text-align:center;
    margin-top:1.75rem;
    color:#6e7ba3;
}

.login-footer small{
    display:block;
    font-size:.72rem;
}

.signature{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    margin-top:.6rem;
}

.signature-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent-blue-light), var(--accent-blue));
    color:white;
    font-size:.6rem;
    font-weight:700;
    font-family:'Inter',sans-serif;
    box-shadow:0 2px 8px rgba(0,82,212,.4);
}

.login-footer .dev-credit{
    color:#5a6690;
    font-size:.68rem;
    letter-spacing:.3px;
}

/* ============================================================
   MOBILE
============================================================ */

@media(max-width:768px){

    .login-wrapper{
        justify-content:center;
        padding:6vw 5vw;
    }

    .brand-caption{
        left:5vw;
        bottom:auto;
        top:6vw;
        max-width:calc(100% - 10vw);
    }

    .brand-caption h1{
        font-size:1.6rem;
    }

    .login-card-wrap{
        margin-top:14rem;
    }

    .login-card{
        padding:2rem 1.5rem;
    }
}