/* ============================================================
   SHIV ENGINEERING ERP LOGIN V15
   Exact visual-match strategy:
   - The approved mockup is the page background.
   - Functional login controls are overlaid at the exact same positions.
   - Whole composition scales uniformly to the browser viewport.
   ============================================================ */

*{box-sizing:border-box}

html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    background:#eef4fb;
}

body{
    display:grid;
    place-items:center;
}

.mockup-screen{
    position:relative;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background-image:url("../images/login-mockup-bg.jpg?v=20260824-1");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;
}

/* Right-side form overlay uses the same percentages as the mockup */
.mockup-form{
    position:absolute;
    inset:0;
}

.field{
    position:absolute;
}

.field input{
    width:100%;
    height:100%;
    border:1px solid #cbd8e8;
    border-radius:9px;
    outline:none;
    color:#152b4d;
    background:rgba(255,255,255,.985);
    padding:0 12.2% 0 14%;
    font-size:clamp(12px,1.05vw,16px);
    line-height:1;
}

.field input::placeholder{
    color:#71849d;
    opacity:1;
}

.field input:focus{
    border-color:#5c9af0;
    box-shadow:0 0 0 3px rgba(13,109,244,.12);
}

.icon{
    position:absolute;
    z-index:3;
    top:50%;
    left:4.8%;
    transform:translateY(-50%);
    color:#5f7593;
    font-size:clamp(14px,1.2vw,19px);
    pointer-events:none;
}

.user-field{
    left:66.35%;
    top:36.95%;
    width:28.45%;
    height:5.1%;
}

.password-field{
    left:66.35%;
    top:47.18%;
    width:28.45%;
    height:5.1%;
}

.eye{
    position:absolute;
    z-index:4;
    top:50%;
    right:2.7%;
    transform:translateY(-50%);
    width:9%;
    height:64%;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#4d6687;
    font-size:clamp(14px,1.15vw,18px);
    cursor:pointer;
}

.remember{
    position:absolute;
    left:66.35%;
    top:54.1%;
    height:2.3%;
    display:flex;
    align-items:center;
    gap:.55vw;
    color:#203a5c;
    font-size:clamp(11px,.9vw,14px);
    font-weight:600;
    cursor:pointer;
}

.remember input{
    width:clamp(15px,1.25vw,20px);
    height:clamp(15px,1.25vw,20px);
    margin:0;
    accent-color:#0d6df4;
}

.forgot{
    position:absolute;
    right:5.2%;
    top:54.2%;
    padding:0;
    border:0;
    background:transparent;
    color:#0d6df4;
    font-size:clamp(11px,.9vw,14px);
    font-weight:600;
    cursor:pointer;
}

.submit-btn{
    position:absolute;
    left:66.35%;
    top:58.1%;
    width:28.45%;
    height:5.05%;
    border:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.7vw;
    color:#fff;
    background:linear-gradient(90deg,#0b5ee7,#2184ff);
    box-shadow:0 10px 24px rgba(10,101,232,.20);
    font-size:clamp(12px,1vw,16px);
    cursor:pointer;
}

.submit-btn:disabled{
    opacity:.8;
    cursor:wait;
}

.employee-btn{
    position:absolute;
    left:71.1%;
    top:69.1%;
    width:17.9%;
    height:4.35%;
    border:1px solid #6ca5ef;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55vw;
    color:#0d6df4;
    background:rgba(255,255,255,.985);
    font-size:clamp(10px,.9vw,14px);
    cursor:pointer;
}

/* Alert is intentionally above the first field, without changing mockup geometry */
.login-alert{
    position:absolute;
    z-index:20;
    left:66.35%;
    top:31.5%;
    width:28.45%;
    min-height:3.2%;
    padding:.45% .8%;
    display:flex;
    align-items:center;
    border-radius:8px;
    font-size:clamp(10px,.8vw,13px);
    font-weight:700;
}
.login-alert.error{
    color:#b31828;
    border:1px solid #f2bfc6;
    background:#fff2f4;
}
.login-alert.warning{
    color:#875700;
    border:1px solid #ecd9a9;
    background:#fff9e9;
}
.login-alert.success{
    color:#08713c;
    border:1px solid #b9dfca;
    background:#eff9f3;
}

/* Small screens: keep same composition, scaled, no scroll */
@media (max-width:800px){
    .field input{
        font-size:11px;
    }
    .forgot,
    .remember,
    .employee-btn,
    .submit-btn{
        font-size:10px;
    }
}


/* ============================================================
   V16 RIGHT-SIDE ALIGNMENT FIX
   The approved mockup already contains Remember Me / Forgot Password /
   Login button / Employee ID visuals. These controls are now transparent
   interactive hit-zones so no duplicate text is drawn over the mockup.
   ============================================================ */

.remember{
    left:66.25%;
    top:54.05%;
    width:10.2%;
    height:2.7%;
    display:block;
    cursor:pointer;
}

.remember input{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:clamp(15px,1.25vw,20px);
    height:clamp(15px,1.25vw,20px);
    margin:0;
    accent-color:#0d6df4;
}

.forgot{
    right:5.1%;
    top:53.85%;
    width:9.7%;
    height:2.9%;
    padding:0;
    border:0;
    background:transparent;
    color:transparent;
    font-size:0;
    cursor:pointer;
}

.submit-btn{
    left:66.35%;
    top:58.1%;
    width:28.45%;
    height:5.05%;
    border:0;
    background:transparent;
    box-shadow:none;
    color:transparent;
    font-size:0;
    cursor:pointer;
}

.submit-btn:hover,
.submit-btn:focus{
    background:rgba(13,109,244,.035);
    outline:none;
}

.employee-btn{
    left:71.05%;
    top:69.0%;
    width:18.0%;
    height:4.45%;
    border:0;
    background:transparent;
    color:transparent;
    font-size:0;
    cursor:pointer;
}

.employee-btn:hover,
.employee-btn:focus{
    background:rgba(13,109,244,.025);
    outline:none;
}

/* Keep checkbox itself aligned with the mockup's blue checkbox position */
@media (min-width:1200px){
    .remember input{
        width:17px;
        height:17px;
    }
}