/* ===== LOGIN PAGE — UI/UX POLISH
   Brand: #1B5E20 dark green | #66BB6A lime | #F5A623 orange
===== */

/* ===== NAV HEADER ===== */
.login-nav-area {
    background: #ffffff !important;
    border-bottom: 3px solid #1B5E20;
    padding: 6px 0 !important;
    box-shadow: 0 2px 8px rgba(27,94,32,0.10);
}

.login-nav-area img {
    max-height: 100px !important;
    width: auto !important;
}

/* ===== FULL SCREEN BODY ===== */
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.main-wrapper.login-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-image: url(../img/authBg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.login-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

.login-wrapper .container {
    width: 100%;
}

/* ===== LOGINBOX CARD ===== */
.loginbox {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(27,94,32,0.13) !important;
    overflow: hidden;
    border: none !important;
}

/* ===== LOGIN RIGHT (FORM SIDE) ===== */
.login-right {
    padding: 36px 32px !important;
    background: #ffffff;
}

.login-right-wrap {
    width: 100%;
}

/* ===== GREETING ===== */
.login-greeting {
    color: #1B5E20;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 4px;
}

.login-welcome {
    color: #555;
    font-size: 0.88rem;
    text-align: center;
    margin-bottom: 2px;
}

/* ===== "Employee Login" SUBTITLE ===== */
.account-subtitle {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F5A623;
    margin-bottom: 20px;
    position: relative;
}

.account-subtitle::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #1B5E20, #66BB6A);
    margin: 6px auto 0;
    border-radius: 2px;
}

/* ===== FORM INPUTS ===== */
.form-group {
    margin-bottom: 16px;
}

.form-control {
    border: 1.5px solid #d6e8d6 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    background-color: #fafffe !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important;
}

.form-control:focus {
    border-color: #1B5E20 !important;
    box-shadow: 0 0 0 3px rgba(27,94,32,0.10) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #aab8aa !important;
    font-size: 0.86rem !important;
}

/* ===== PASSWORD TOGGLE ===== */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

.input-group .form-control {
    border-radius: 8px 0 0 8px !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
}

.input-group-append {
    display: flex !important;
    align-items: stretch !important;
}

.pwd-toggle-btn {
    color: #aab8aa;
    transition: color 0.15s, border-color 0.2s;
}

.pwd-toggle-btn:hover {
    color: #1B5E20;
    border-color: #1B5E20 !important;
}

/* ===== CAPTCHA INPUT ===== */
#CaptchaInputText {
    border: 1.5px solid #d6e8d6 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    background-color: #fafffe !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important;
    width: 100%;
}

#CaptchaInputText:focus {
    border-color: #1B5E20 !important;
    box-shadow: 0 0 0 3px rgba(27,94,32,0.10) !important;
    outline: none !important;
}

/* Captcha image */
.form-group img[src*="Captcha"],
.form-group img[src*="captcha"] {
    border-radius: 8px;
    border: 1px solid #d6e8d6;
}

/* ===== LOGIN BUTTON ===== */
.btn-primary {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(27,94,32,0.25) !important;
    transition: all 0.22s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #145218 0%, #1B5E20 100%) !important;
    box-shadow: 0 6px 18px rgba(27,94,32,0.35) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(27,94,32,0.2) !important;
}

/* ===== FORGOT / LINKS ===== */
.forgotpass a {
    color: #2E7D32 !important;
    font-size: 0.83rem;
    text-decoration: none !important;
    transition: color 0.15s;
}

.forgotpass a:hover {
    color: #F5A623 !important;
}

/* ===== OR DIVIDER ===== */
.login-or {
    position: relative;
    text-align: center;
    margin: 14px 0;
}

.or-line {
    display: block;
    height: 1px;
    background: #e0ece0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.span-or {
    position: relative;
    background: #ffffff;
    padding: 0 10px;
    color: #aaa;
    font-size: 0.78rem;
    z-index: 1;
}

/* ===== REGISTER LINK ===== */
.dont-have {
    font-size: 0.83rem;
    color: #666;
}

.dont-have a {
    color: #1B5E20 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.dont-have a:hover {
    color: #F5A623 !important;
}

/* ===== ALERTS ===== */
.alert-danger {
    background-color: #fdf0f0 !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
}

.alert-success {
    background-color: #f0faf0 !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
}

/* ===== FOOTER TOP (PHONE BAR) ===== */
.footer-top {
    background: linear-gradient(135deg, #F5A623 0%, #e09800 100%) !important;
    padding: 14px 0 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.footer-top h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    letter-spacing: 0.3px;
}

.footer-top .fa-phone {
    color: #ffffff !important;
}

/* ===== FOOTER BOTTOM ===== */
.footer-bottom-area {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%) !important;
    padding: 12px 0 !important;
}

.footer-bottom-area p {
    color: #A5D6A7 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
}

/* ===== TABLET (768px–991px) — override style.css 50% width ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .login-wrapper .loginbox .login-right {
        width: 100% !important;
        padding: 28px 24px !important;
    }

    .login-greeting {
        font-size: 1.3rem;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    /* Nav logo */
    .login-nav-area img {
        max-height: 55px !important;
    }

    /* Card full width with side padding */
    .login-wrapper .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .col-md-4.offset-md-4 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Form padding */
    .login-right {
        padding: 24px 18px !important;
    }

    /* Loginbox radius smaller on mobile */
    .loginbox {
        border-radius: 12px !important;
    }

    /* Logo above card */
    .logo-top img {
        max-height: 50px;
        width: auto;
    }

    /* Footer stacked */
    .footer-bottom-area .col-md-6.text-right {
        text-align: left !important;
    }

    .footer-bottom-area p,
    .footer-top h6 {
        font-size: 0.72rem !important;
    }

    /* Body allow scroll on small screens */
    body {
        min-height: 100vh;
        height: auto;
        overflow-y: auto;
    }

    html {
        height: auto;
        min-height: 100%;
    }

    .main-wrapper.login-body {
        min-height: calc(100vh - 200px);
    }

    .login-wrapper {
        padding: 20px 0;
        align-items: center;
    }
}

@media (max-width: 400px) {
    .login-greeting {
        font-size: 1.2rem;
    }

    .login-nav-area img {
        max-height: 42px !important;
    }
}