/* CHSS Portal – v2.2.8 */
:root{--card-w:clamp(320px,88vw,440px);--gap:clamp(16px,4vw,32px)}

/* Avoid overscroll artifacts */
html,body{overscroll-behavior:none}

/* Base page */
body.login-page{
    margin:0;
    padding:0;
    min-height:100vh;
    font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    position:relative;
    color:#0f172a;
    overflow-x:hidden;
}

/* Background: Chrome-optimized approach using scroll attachment */
body.login-page{
    background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.22)), var(--chss-bg) center/cover no-repeat;
    background-attachment:scroll;
}

/* Target WebKit browsers (Chrome/Safari) specifically for scroll attachment */
@supports (-webkit-appearance: none) {
    body.login-page {
        background-attachment: scroll !important;
    }
}

/* Layout: centered on narrow */
.login-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:var(--gap);min-height:100vh;padding:var(--gap);place-items:center}
.login-wrap{display:grid;place-items:center}

/* Wide: monogram top-left; card near right edge + vertically centered */
@media(min-width:1000px){
    .login-grid{
        grid-template-columns:minmax(220px,28vw) 1fr;
        grid-template-rows:1fr;
        align-items:center;
        justify-items:stretch;
        padding-left:clamp(4vw,6vw,8vw);
        padding-right:clamp(2vw,6vw,8vw);
    }
    .monogram-link{grid-column:1;grid-row:1;justify-self:start;align-self:start;margin-left:clamp(1vw,2vw,3vw);margin-top:clamp(1.5vw,3vh,40px)}
    .login-wrap{grid-column:2;grid-row:1;justify-self:end;align-self:center}
}

/* Monogram */
.monogram{width:clamp(72px,14vw,160px);height:auto;display:block;filter:drop-shadow(0 10px 26px rgba(0,0,0,.32))}

/* Card */
.login-card{
    width:100%;
    max-width:var(--card-w);
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    padding:clamp(18px,4vw,36px);
    border:1px solid rgba(0,0,0,.04);
    margin:0;
}

h5{margin:0 0 8px 0;font-size:clamp(13px,.7vw + 11px,16px);letter-spacing:.2px;color:#800020;text-transform:uppercase;font-weight:700}
.login-title{margin:0 0 18px 0;font-size:clamp(20px,1.1vw + 18px,22px);font-weight:600;color:#111827}
.row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:12px;min-width:0}
label{display:block;font-size:.95em;margin-bottom:6px;line-height:1.2}
.input{width:100%;min-width:0;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;outline:none;transition:border .15s,box-shadow .15s;box-sizing:border-box}
.input:focus{border-color:#800020;box-shadow:0 0 0 3px rgba(128,0,32,.30)}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.remember{display:flex;align-items:center;gap:8px;font-size:.95em;min-width:0}
.link,.link:visited{color:#800020;text-decoration:none;font-weight:600;font-size:.95em;white-space:nowrap}
.btn{width:100%;border:0;padding:12px 16px;border-radius:12px;font-weight:700;background:#800020;color:#fff;cursor:pointer;transition:transform .05s,background .2s}
.btn:hover{background:#66001a}.btn:active{transform:translateY(1px)}

/* Micro adjustments for very small screens */
@media(max-width:360px){.login-card{padding:14px}.actions{gap:8px}}

/* === NEW: Keep monogram + login card fixed during scroll === */

/* Fix the monogram link in the top-left, above content */
.monogram-link{
    position:fixed;
    top:clamp(12px,3vh,40px);
    left:clamp(12px,3vw,40px);
    z-index:3;
}

/* Fix the login card: right side on wide screens, vertically centered */
.login-card{
    position:fixed;
    right:clamp(2vw,6vw,8vw);
    top:50%;
    transform:translateY(-50%);
    width:min(var(--card-w), 92vw); /* override earlier width:100% to avoid spanning */
    z-index:2;
}

/* On narrow screens, center the card in the viewport */
@media (max-width:999px){
    .login-card{
        left:50%;
        right:auto;
        top:50%;
        transform:translate(-50%,-50%);
        width:min(var(--card-w), 94vw);
    }
    .monogram-link{
        top:clamp(12px,3vh,28px);
        left:clamp(12px,4vw,28px);
    }
}

/* Ensure background and any underlying content can scroll independently */
.login-grid{pointer-events:none}
.login-card,.monogram-link{pointer-events:auto}