@import url("aurora-variables.css");

/* ============================================================
   Aurora Modern Theme — Login screen (UserLogin.aspx)
   ------------------------------------------------------------
   Self-contained, ter-scope ke `.login-page` & ID login. Login
   tidak guna master page, jadi fail ini dipaut terus pada
   UserLogin.aspx selepas style asas sedia ada (supaya menang).
   Visual sahaja — tiada markup/server-control/script disentuh.
   ============================================================ */

/* ---- Page canvas & centering ---- */
body.login-page {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 100vh;
    height: auto;
    overflow: auto;
    margin: 0;
    background: #eef1f6;
    font-family: var(--au-font);
    -webkit-font-smoothing: antialiased;
}

/* Background image (company bglogin) + soft readability scrim */
.login-page::before {
    background-image:
        linear-gradient(135deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.16)),
        url("../../Images/Images/Login/bglogin.png");
    background-size: cover, 100% 100%;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    opacity: 1;
}

/* ---- Slim transparent top bar (logo + version) ---- */
.login-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    background: transparent;
    opacity: 1;
    padding: 16px 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    z-index: 5;
}

.login-title {
    float: none;
    color: #fff;
    height: auto;
    padding: 0;
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    opacity: .95;
}

/* ---- The card ---- */
.login-box,
.register-box {
    width: 408px;
    margin: 0;
}

.login-box-body {
    background: #fff;
    border: none;
    border-radius: var(--au-radius-xl);
    box-shadow: var(--au-shadow-lg);
    padding: 40px 36px 30px;
}

    /* neutralize the old "bounce" hover on the card */
    .login-box-body:hover {
        -webkit-transform: none;
        transform: none;
        box-shadow: var(--au-shadow-lg);
    }

    .login-box-body .login-logo {
        margin-bottom: 6px;
    }

        .login-box-body .login-logo img {
            max-width: 210px;
            height: auto;
        }

#CompanyName,
#CompanyName2,
#CompanyName3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--au-ink);
    margin: 10px 0 2px;
    line-height: 1.3;
}

.login-box-msg {
    color: var(--au-muted);
    font-size: 14px;
    padding: 0 0 16px;
    margin: 0;
}

/* ---- Inputs ---- */
.login-box-body .form-group {
    margin-bottom: 16px;
    position: relative;
}

.login-box-body .form-control {
    height: 48px;
    border-radius: var(--au-radius);
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 44px 10px 14px;
    font-size: 14px;
    color: #111827;
    box-shadow: none;
    -webkit-transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .login-box-body .form-control::-webkit-input-placeholder {
        color: #9ca3af;
    }

    .login-box-body .form-control::placeholder {
        color: #9ca3af;
    }

    .login-box-body .form-control:focus {
        border-color: var(--au-login);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.15);
        outline: none;
    }

/* feedback glyph alignment for taller inputs */
.login-box-body .form-control-feedback {
    top: 0;
    right: 0;
    width: 44px;
    height: 48px;
    line-height: 48px;
    color: #9ca3af;
    font-size: 16px;
    pointer-events: none;
}

.toggle-eye {
    right: 15px;
    color: #9ca3af;
}

    .toggle-eye:hover {
        color: var(--au-login);
    }

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* ---- Links ---- */
#lbtnForgetPass,
#lbtnLogin {
    color: var(--au-login-2);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

    #lbtnForgetPass:hover,
    #lbtnLogin:hover {
        text-decoration: underline;
    }

/* ---- Buttons ---- */
.btn-modern-login {
    border-radius: var(--au-radius);
    padding: 13px 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--au-login-3), var(--au-login-2));
}

    .btn-modern-login:hover {
        background: linear-gradient(135deg, #ff8f1a, var(--au-login-2));
    }

#colloginAd {
    margin-top: 4px;
}

.btn-ms-login {
    border-radius: var(--au-radius);
}

/* ---- Alerts & footer build ---- */
#lblErrorMessage,
.login-box-body .alert {
    border-radius: 10px;
    font-size: 13px;
    text-align: left;
    margin-top: 8px;
    border: none;
}

#SystemBuild {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE / MOBILE-FRIENDLY
   ============================================================ */
@media (max-width: 480px) {
    .login-box,
    .register-box {
        width: 92vw;
    }

    .login-box-body {
        padding: 28px 20px 22px;
    }

        .login-box-body .login-logo img {
            max-width: 170px;
        }

    #CompanyName,
    #CompanyName2,
    #CompanyName3 {
        font-size: 17px;
    }
}

/* Short screens: anchor to top with breathing room so the
   fixed header bar never overlaps the card */
@media (max-height: 640px) {
    body.login-page {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding: 72px 0 24px;
    }
}