/* =====================================================================
   BP Investment Webmail — Navy & White login theme
   Skin: bp_navy (extends elastic). Styles scoped to the login screen.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap');

:root{
    --bp-navy:#0B1F3A;
    --bp-navy-2:#12294a;
    --bp-gold:#C6A15B;
    --bp-line:#e5e9f0;
    --bp-ink:#0f1b2d;
    --bp-muted:#5b6675;
}

/* ---- Page: navy background, centered ---- */
body.task-login,
html.dark-mode body.task-login{
    background:radial-gradient(120% 90% at 50% 0%, #12294a 0%, #0B1F3A 62%) fixed !important;
    color:var(--bp-ink) !important;
}
body.task-login #layout,
body.task-login #print-layout{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:100vh; min-height:100dvh;
    padding:24px; box-sizing:border-box;
}
body.task-login #layout-content{
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    display:flex; align-items:center; justify-content:center;
    width:100%; border:0 !important;
}

/* ---- White card ---- */
body.task-login .bp-login-card{
    width:100%; max-width:400px;
    background:#ffffff;
    border-radius:16px;
    border-top:3px solid var(--bp-gold);
    padding:44px 38px 30px;
    box-shadow:0 26px 64px -22px rgba(4,12,26,.60), 0 2px 6px rgba(4,12,26,.16);
    font-family:'Outfit',system-ui,-apple-system,sans-serif;
    text-align:center;
    animation:bp-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Logo (neutralise elastic's vh offset) ---- */
body.task-login #logo,
body.task-login .bp-logo{
    position:static !important; top:0 !important;
    display:block !important; margin:0 auto 4px !important;
    max-height:66px !important; max-width:210px; width:auto; height:auto;
    opacity:1 !important;
}

/* ---- Title ---- */
body.task-login .bp-title{
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:24px; letter-spacing:-.01em; line-height:1.1;
    color:var(--bp-navy); margin:16px 0 0;
}
body.task-login .bp-title span{
    display:block; font-family:'Outfit',sans-serif; font-weight:400;
    font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--bp-muted); margin-top:7px;
}
body.task-login .bp-sep{
    height:1px; width:54px; margin:20px auto 24px;
    background:linear-gradient(90deg,transparent,var(--bp-gold),transparent);
}

/* ---- Form: reset elastic vh offsets & width ---- */
body.task-login #login-form{
    position:static !important; top:0 !important;
    margin:0 auto !important; width:100% !important; max-width:none !important;
    text-align:left;
}
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td{ display:block !important; width:100% !important; }
body.task-login #login-form td{ padding:0 0 15px !important; }

/* ---- Labels ---- */
body.task-login #login-form td.title,
body.task-login #login-form label{
    display:block !important; margin:0 0 7px !important; padding:0 !important;
    font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:500;
    color:var(--bp-ink); text-align:left; width:auto !important; float:none !important;
}

/* ---- Inputs ---- */
body.task-login #login-form input,
body.task-login #login-form input.form-control,
body.task-login #login-form select{
    width:100% !important; box-sizing:border-box !important;
    font-family:'Outfit',sans-serif !important; font-size:15px !important;
    color:var(--bp-ink) !important;
    background:#fff !important;
    border:1px solid var(--bp-line) !important;
    border-radius:9px !important;
    padding:12px 14px !important; height:auto !important; line-height:1.3 !important;
    box-shadow:none !important;
    transition:border-color .15s ease, box-shadow .15s ease;
}
body.task-login #login-form input:focus,
body.task-login #login-form input.form-control:focus{
    border-color:var(--bp-navy) !important;
    box-shadow:0 0 0 3px rgba(11,31,58,.13) !important; outline:none !important;
}
body.task-login #login-form input::placeholder{ color:#9aa4b1 !important; }

/* ---- Submit button ---- */
body.task-login #login-form .btn-primary,
body.task-login #login-form button[type=submit],
body.task-login #login-form input[type=submit],
body.task-login #login-form .formbuttons button{
    display:block !important; width:100% !important; margin:6px 0 0 !important;
    font-family:'Outfit',sans-serif !important; font-weight:600 !important;
    font-size:15px !important; letter-spacing:.01em;
    color:#fff !important; cursor:pointer;
    background:var(--bp-navy) !important;
    border:1px solid var(--bp-navy) !important;
    border-radius:9px !important; padding:13px 16px !important; height:auto !important;
    box-shadow:0 9px 22px -9px rgba(11,31,58,.55);
    transition:filter .15s ease, transform .08s ease;
}
body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button[type=submit]:hover{ filter:brightness(1.13); }
body.task-login #login-form .btn-primary:active,
body.task-login #login-form button[type=submit]:active{ transform:translateY(1px); }

/* ---- Footer ---- */
body.task-login #login-footer,
html.dark-mode body.task-login #login-footer{
    color:var(--bp-muted) !important; font-family:'Outfit',sans-serif;
    font-size:11.5px; text-align:center; margin-top:20px; flex:none;
}
body.task-login #login-footer>div{
    background:transparent !important; padding:.4rem 0 0 !important; margin-top:.4rem;
}
body.task-login .support-link{ color:var(--bp-navy) !important; }

/* ---- Messages (errors) sit above the card nicely ---- */
body.task-login #messagestack{ z-index:1000; }

/* ---- Small screens ---- */
@media (max-width:480px){
    body.task-login .bp-login-card{ padding:34px 24px 26px; border-radius:14px; }
    body.task-login .bp-title{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
    body.task-login .bp-login-card{ animation:none; }
}