/* SMART HY-HRIS - PREMIUM LOGIN */
:root{--navy:#082f69;--blue:#0967da;--gold:#d9a52d;--muted:#8297b2;--line:#d9e5f3;--page:#eef5fc}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--page)}
body{font-family:"Segoe UI",Inter,Arial,sans-serif;color:var(--navy)}
button,input{font:inherit}

/* Main composition: 68% visual / 32% login */
.login-page{
    width:100%;
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,68%) minmax(500px,32%);
    overflow:hidden;
    background:#fff;
}

/* LEFT: artwork already contains the complete branding and marketing text */
.login-visual{
    min-width:0;
    min-height:100vh;
    background:url("/assets/img/login-bg.jpg") center center/cover no-repeat;
    position:relative;
}

/* RIGHT */
.login-form-panel{
    position:relative;
    min-width:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px 34px 34px;
    background:
      radial-gradient(circle at 88% 5%,rgba(39,132,241,.16),transparent 31%),
      linear-gradient(145deg,#f9fcff 0%,#edf5fd 100%);
    overflow:hidden;
}
.login-form-panel:after{
    content:"";
    position:absolute;
    width:430px;height:430px;
    right:-220px;bottom:-230px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(4,91,207,.12),rgba(221,169,47,.06));
}

.language{
    position:absolute;z-index:5;right:24px;top:24px;
    display:flex;align-items:center;gap:9px;
    padding:10px 14px;
    border:1px solid #cbdff4;border-radius:13px;
    background:rgba(255,255,255,.72);
    color:#315b8d;font-size:12px;
    box-shadow:0 8px 24px rgba(30,82,135,.06);
    backdrop-filter:blur(8px)
}
.language span:first-child{font-size:10px;font-weight:800}.language b{color:#183f72}.language .chevron{font-size:11px}

.login-card{
    position:relative;z-index:2;
    width:min(100%,430px);
    padding:30px 34px 22px;
    border-radius:22px;
    background:rgba(255,255,255,.975);
    border:1px solid rgba(255,255,255,.95);
    box-shadow:0 26px 65px rgba(22,65,117,.16),0 5px 18px rgba(22,65,117,.06)
}
.login-card:before{
    content:"";position:absolute;left:18%;right:18%;top:0;height:4px;border-radius:0 0 8px 8px;
    background:linear-gradient(90deg,var(--blue),var(--gold),var(--blue))
}
.login-card-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
.login-card-brand img{width:67px;height:67px;object-fit:contain;margin-bottom:4px}
.login-card-brand strong{font-size:19px;line-height:1.15;font-weight:850;letter-spacing:-.3px}
.login-card-brand small{margin-top:4px;font-size:8px;font-weight:800;letter-spacing:2px;color:#2872d0}
.powered{margin-top:7px;color:#9aaabe;font-size:9px}.powered b{color:#4b607c}

.welcome{text-align:center;margin:22px 0 20px}
.welcome h2{margin:0;font-size:26px;line-height:1.1;letter-spacing:-.7px}
.welcome p{margin:7px 0 0;color:#8195b0;font-size:12px;line-height:1.4}
.login-error{margin-bottom:13px;padding:9px 11px;border:1px solid #ffd5d1;border-radius:9px;background:#fff1ef;color:#bd3d36;font-size:11px}
.login-field{margin-bottom:13px}.login-field>label{display:block;margin:0 0 6px 1px;color:#193e70;font-size:11px;font-weight:800}
.input-wrap{position:relative}.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#4774aa;font-size:14px;pointer-events:none}
.login-field input{width:100%;height:50px;padding:0 43px 0 40px;border:1px solid var(--line);border-radius:11px;outline:0;background:#fff;color:#173d6e;font-size:12px;transition:.2s}
.login-field input::placeholder{color:#9aacbf}.login-field input:hover{border-color:#bfd2ea}.login-field input:focus{border-color:#2773d5;box-shadow:0 0 0 4px rgba(39,115,213,.09)}
.toggle-pw{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:31px;height:31px;border:0;border-radius:8px;background:transparent;color:#7189a7;cursor:pointer}.toggle-pw:hover{background:#edf5ff;color:var(--blue)}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}.remember{display:flex;align-items:center;gap:7px;color:#526a88;font-size:11px;cursor:pointer}.remember input{width:15px;height:15px;margin:0;accent-color:#1471dd}.forgot-link{border:0;padding:0;background:transparent;color:#0964d8;font-size:11px;font-weight:800;cursor:pointer}.forgot-link:hover{text-decoration:underline}
.forgot-note{display:none;margin:-3px 0 12px;padding:9px 11px;border-radius:9px;background:#f2f7fd;color:#59718f;font-size:10px;line-height:1.45}.forgot-note.show{display:block}
.submit-btn{width:100%;height:51px;border:0;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#1267d8,#0758ca);color:#fff;font-size:14px;font-weight:850;cursor:pointer;box-shadow:0 12px 24px rgba(7,88,202,.20);transition:.18s}.submit-btn:hover{transform:translateY(-1px);box-shadow:0 15px 29px rgba(7,88,202,.26)}.submit-btn:active{transform:none}.submit-btn .arrow{font-size:18px}
.login-footer{margin-top:18px;padding-top:13px;border-top:1px solid #edf1f6;text-align:center;color:#9aaabe;font-size:8.5px;line-height:1.75}.login-footer a{color:#6c82a0;text-decoration:none}.login-footer a:hover{color:var(--blue)}

@media (max-width:1250px){.login-page{grid-template-columns:minmax(0,64%) minmax(470px,36%)}.login-form-panel{padding-left:24px;padding-right:24px}.login-card{padding-left:28px;padding-right:28px}}
@media (max-width:980px){.login-page{display:block}.login-visual{height:300px;min-height:300px}.login-form-panel{min-height:calc(100vh - 300px);padding:60px 20px 30px}.login-card{width:min(100%,460px)}}
@media (max-width:520px){.login-visual{height:210px;min-height:210px}.login-form-panel{min-height:calc(100vh - 210px);padding:54px 13px 22px}.login-card{padding:28px 21px 21px;border-radius:19px}.login-card-brand img{width:62px;height:62px}.welcome h2{font-size:24px}.language{top:13px;right:13px;padding:8px 11px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   FINAL OVERLAY MODE — LOGIN CARD ON TOP OF BACKGROUND
   ============================================================ */
.login-page {
    position: relative;
    min-height: 100vh;
    display: block;
    overflow: hidden;
    background: #eef5fd url("/assets/img/login-bg.jpg") center center / cover no-repeat;
}

.login-visual { display: none !important; }

.login-form-panel {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 50px clamp(24px, 3.2vw, 58px) 36px;
    background: transparent !important;
}

.login-form-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0) 52%, rgba(235,245,255,.02) 72%, rgba(3,42,96,.08) 100%);
}

.language {
    z-index: 5;
    top: 22px;
    right: clamp(24px, 3.2vw, 58px);
    background: rgba(255,255,255,.74);
    box-shadow: 0 8px 25px rgba(13,57,111,.10);
    backdrop-filter: blur(12px);
}

.login-card {
    z-index: 4;
    width: min(480px, 31vw);
    min-width: 410px;
    max-height: calc(100vh - 82px);
    overflow: auto;
    padding: 31px 36px 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.965);
    border: 1px solid rgba(255,255,255,.98);
    box-shadow: 0 26px 70px rgba(4,40,90,.25), 0 8px 24px rgba(4,40,90,.10);
}

.login-card-brand img { width: 66px; height: 66px; }
.login-card-brand strong { font-size: 20px; }
.welcome { margin: 22px 0 20px; }
.welcome h2 { font-size: 26px; }
.login-field { margin-bottom: 13px; }
.login-field input { height: 51px; }
.login-row { margin-bottom: 16px; }
.submit-btn { height: 52px; }
.login-footer { margin-top: 18px; padding-top: 12px; }

@media (max-width: 1200px) {
    .login-card { width: min(460px, 35vw); min-width: 390px; }
}

@media (max-width: 900px) {
    .login-page { background-position: 38% center; }
    .login-form-panel {
        position: relative;
        min-height: 100vh;
        padding: 72px 18px 28px;
        justify-content: center;
    }
    .login-card {
        width: min(510px, 100%);
        min-width: 0;
        max-height: none;
    }
    .language { top: 16px; right: 18px; }
}

@media (max-width: 520px) {
    .login-page { background-position: 30% center; }
    .login-form-panel { padding: 62px 11px 16px; }
    .login-card { padding: 27px 20px 21px; border-radius: 19px; }
}

/* ============================================================
   FINAL SIZE FIX
   The supplied left artwork is a portrait crop (1130x846).
   Keep it inside the left visual zone instead of using cover on
   the whole viewport, which was cropping the top of the logo.
   The right side uses a clean architectural extension.
   ============================================================ */
.login-page{
    min-height:100svh;
    height:100svh;
    background-color:#eaf3fc;
    background-image:url("/assets/img/login-bg-right.png");
    background-repeat:no-repeat;
    background-position:right center;
    background-size:42% 100%;
}
.login-page::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 auto 0 0;
    width:64%;
    background:url("/assets/img/login-bg.jpg") left center/100% 100% no-repeat;
    pointer-events:none;
}
.login-form-panel{
    z-index:2;
    height:100svh;
    min-height:0;
    padding:78px 30px 28px 0;
    justify-content:flex-end;
    align-items:center;
}
.login-form-panel::before{display:none}
.language{
    top:22px;
    right:28px;
}
.login-card{
    width:430px;
    min-width:0;
    max-width:430px;
    max-height:calc(100svh - 110px);
    overflow:hidden;
    padding:29px 34px 22px;
    border-radius:22px;
    background:rgba(255,255,255,.96);
}
.login-card-brand img{width:64px;height:64px}
.welcome{margin:20px 0 18px}
.welcome h2{font-size:25px}
.login-field{margin-bottom:12px}
.login-field input{height:49px}
.login-row{margin-bottom:15px}
.submit-btn{height:50px}
.login-footer{margin-top:16px;padding-top:11px}

@media (max-width:1300px){
    .login-page::before{width:62%}
    .login-page{background-size:44% 100%}
    .login-form-panel{padding-right:22px}
    .login-card{width:415px;max-width:415px;padding-left:30px;padding-right:30px}
}
@media (max-width:900px){
    .login-page{
        height:auto;
        min-height:100svh;
        background-image:none;
        background-color:#eef5fc;
    }
    .login-page::before{
        position:relative;
        display:block;
        width:100%;
        height:260px;
        background-size:100% 100%;
    }
    .login-form-panel{
        height:auto;
        min-height:calc(100svh - 260px);
        padding:64px 18px 28px;
        justify-content:center;
    }
    .login-card{width:min(500px,100%);max-width:none;max-height:none}
    .language{top:16px;right:18px}
}
@media (max-width:520px){
    .login-page::before{height:205px}
    .login-form-panel{min-height:calc(100svh - 205px);padding:58px 11px 18px}
    .login-card{padding:26px 20px 20px;border-radius:19px}
}

/* ============================================================
   TRUE FLOATING LOGIN OVER THE FULL BACKGROUND
   The artwork is one continuous 1880x837 image. The login card
   is absolutely positioned on top of it — no separate right panel.
   ============================================================ */
html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
}

.login-page {
    position: relative !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 620px !important;
    display: block !important;
    overflow: hidden !important;
    background: #dfeefa url('/assets/img/login-background-wide.png') center center / cover no-repeat !important;
}

.login-page::before {
    display: none !important;
}

.login-visual {
    display: none !important;
}

.login-form-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 10 !important;
}

.login-form-panel::before,
.login-form-panel::after {
    display: none !important;
}

/* Language floats over the artwork */
.language {
    position: absolute !important;
    top: 24px !important;
    right: 3.1vw !important;
    z-index: 30 !important;
}

/* The card is the only white surface and sits directly on the photo */
.login-card {
    position: absolute !important;
    top: 50% !important;
    right: 3.1vw !important;
    transform: translateY(-50%) !important;
    width: min(430px, 27vw) !important;
    min-width: 380px !important;
    max-width: 430px !important;
    max-height: calc(100svh - 92px) !important;
    overflow: hidden !important;
    padding: 30px 34px 22px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.91) !important;
    border: 1px solid rgba(255,255,255,.98) !important;
    box-shadow:
        0 28px 70px rgba(5,40,90,.27),
        0 8px 25px rgba(5,40,90,.12) !important;
    backdrop-filter: blur(8px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

.login-card::before {
    left: 18% !important;
    right: 18% !important;
    height: 4px !important;
}

.login-card-brand img {
    width: 64px !important;
    height: 64px !important;
}

.login-card-brand strong {
    font-size: 20px !important;
}

.welcome {
    margin: 21px 0 18px !important;
}

.welcome h2 {
    font-size: 25px !important;
}

.login-field {
    margin-bottom: 12px !important;
}

.login-field input {
    height: 49px !important;
}

.login-row {
    margin-bottom: 15px !important;
}

.submit-btn {
    height: 50px !important;
}

.login-footer {
    margin-top: 16px !important;
    padding-top: 11px !important;
}

@media (max-width: 1400px) {
    .login-card {
        width: 410px !important;
        min-width: 410px !important;
        right: 2.7vw !important;
    }
    .language {
        right: 2.7vw !important;
    }
}

@media (max-width: 900px) {
    .login-page {
        min-height: 100svh !important;
        height: auto !important;
        background-position: 38% center !important;
    }

    .login-form-panel {
        position: relative !important;
        min-height: 100svh !important;
        height: 100svh !important;
    }

    .language {
        top: 16px !important;
        right: 18px !important;
    }

    .login-card {
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(500px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: 500px !important;
        max-height: calc(100svh - 85px) !important;
    }
}

@media (max-width: 520px) {
    .login-page {
        background-position: 30% center !important;
    }

    .login-card {
        width: calc(100vw - 22px) !important;
        padding: 26px 20px 20px !important;
        border-radius: 19px !important;
    }
}