/* Styles specific to the login (index.html) page */
:root{
    --accent:#ffffff;
    --bg:#f3f6f9;
    --mainColor:#21467F;
    --details:#FDB515;
    --video-opacity: 1;
}

html, body {height:100%;}
body{margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);overflow:hidden}

.login-layout{display:flex;min-height:100vh;align-items:center;justify-content:center}
.login-left{flex:0 0 50%;display:flex;align-items:center;justify-content:center;padding:48px;height:100vh}
.login-right{flex:0 0 50%;position:relative;overflow:hidden}
.login-card{background:rgba(255, 255, 255, 0.247);padding:28px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.06);width:min(480px,90%);max-height:calc(100vh - 96px);overflow:auto;position:absolute;left:50%;top:45%;transform:translate(-50%,-60%);z-index:3;backdrop-filter: blur(6px)}

.logo-top{position:absolute;left:50%;top:-64px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center}
.logo-top{position:fixed;left:50%;top:8vh;transform:translateX(-50%);width:min(520px,90%);z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.logo-top img{width:100%;height:auto;display:block;max-width:520px}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand .logo{width:48px;height:48px;border-radius:6px}
.brand .logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand h2{margin:0;font-size:1.1rem;color:var(--accent)}

.login-card form{display:flex;flex-direction:column;gap:10px}
.login-card input{padding:10px;border-radius:6px;opacity: 50%;;border:1px solid #ddd}
.login-card button{padding:10px;border-radius:6px;border:0;background:var(--accent);color:#000000;cursor:pointer}
.remember-me{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:600}
.remember-me input{accent-color:var(--mainColor)}
.mensagem{color:#b00020;margin-top:8px}

.login-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:var(--video-opacity);
    z-index:1;
}

/* full-bleed background video (covers entire viewport) */
.bg-video{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    object-fit:cover;
    z-index:0;
    opacity:var(--video-opacity);
    pointer-events:none; /* let clicks pass through */
    filter: brightness(60%);
}

/* ensure content sits above background video */
.login-layout{position:relative;z-index:2}

/* hide in-column video if present (we now use full-bleed bg video) */
.login-right .login-video{display:none}
@media (max-width:900px){
    .login-layout{flex-direction:column;gap:0}
    /* stack and center content vertically with minimal spacing */
    .login-left{flex:1 1 auto;padding:8px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:auto}
    .login-right{height:50vh}
    /* revert card to normal flow on small screens so it scrolls naturally */
    .login-card{position:relative;left:auto;top:auto;transform:none;max-height:none;width:100%;margin-top:0;padding:20px}

    /* adjust logo positioning and size on mobile - minimal margin */
    .logo-top{position:absolute;top:auto;left:auto;transform:none;margin:0 0 4px 0;width:100%;}
    .logo-top img{height:auto;max-width:250px;width:75%; margin-top: 22vh;}
    
    /* reduce spacing in brand section */
    .brand{margin-bottom:12px}
}