/* ── Full-screen background ── */
.login-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* ── Popup card ── */
.login-card {
    background: linear-gradient(155deg, #0d3f60 0%, #07294a 45%, #042038 100%);
    border-radius: 10px;
    box-shadow:
        0 2px 0 0 rgba(255, 255, 255, 0.07) inset,
        0 -1px 0 0 rgba(0, 0, 0, 0.4) inset,
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 2rem 1.5rem;
    position: relative;
    width: 20rem;
}

    .login-card::before {
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.12) 60%, transparent 100%);
        border-radius: 10px 10px 0 0;
        content: '';
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

/* ── Logo + subtitle ── */
.login-header {
    align-items: center;
    border-bottom: 1px solid rgba(120, 180, 220, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.5rem;
}

    .login-header img {
        width: 100%;
    }

.login-subtitle {
    color: #ffb900;
    font-family: Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-align: center;
}

/* ── Description text (used in ForgotPassword / PasswordChange) ── */
.login-description {
    color: #8badc8;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Success / info message ── */
.login-success {
    color: #8badc8;
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

/* ── Form fields ── */
.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .login-field label {
        color: #8badc8;
        font-size: 0.8rem;
    }

    .login-field input {
        background: rgba(5, 25, 45, 0.7);
        border: 1px solid rgba(80, 140, 190, 0.3);
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
        caret-color: #fff;
        color: #e8f0f8;
        font-family: inherit;
        font-size: 1rem;
        font-style: normal;
        font-weight: normal;
        height: 2.1rem;
        letter-spacing: normal;
        line-height: normal;
        outline: none;
        padding: 0 0.625rem;
        transition: border-color 0.15s, box-shadow 0.15s;
        width: 100%;
    }

        .login-field input:focus {
            border-color: rgba(52, 152, 219, 0.7);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 2px rgba(52, 152, 219, 0.15);
        }

        .login-field input:-webkit-autofill,
        .login-field input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px #071e30 inset, 0 0 0 2px rgba(52, 152, 219, 0.15);
            -webkit-text-fill-color: #e8f0f8;
            caret-color: #e8f0f8;
        }

.login-field .validation-message {
    color: #e8a0a0;
    font-size: 0.8rem;
}

.login-field + .login-field {
    margin-top: 0.5rem;
}

/* ── Remember me ── */
.login-remember {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}

    .login-remember label {
        color: #8badc8;
        cursor: pointer;
        font-size: 0.8rem;
    }

/* ── Submit button ── */
.login-submit {
    background: linear-gradient(160deg, #1e6fa8 0%, #155a8c 50%, #0f4a74 100%);
    border: 1px solid rgba(100, 170, 220, 0.25);
    border-radius: 5px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 12px rgba(0, 0, 0, 0.35);
    align-items: center;
    color: #e8f4ff;
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.1rem;
    justify-content: center;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    width: 100%;
}

    .login-submit:hover {
        background: linear-gradient(160deg, #2278b8 0%, #1a6498 50%, #125482 100%);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.12) inset,
            0 6px 16px rgba(0, 0, 0, 0.4);
        color: #fff;
    }

    .login-submit:active {
        background: linear-gradient(160deg, #0f4a74 0%, #0d4268 100%);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
        transform: translateY(1px);
    }

/* ── Footer link ── */
.login-footer {
    text-align: center;
}

    .login-footer a {
        color: #8badc8;
        font-size: 0.8rem;
        text-decoration: none;
        transition: color 0.15s;
    }

        .login-footer a:hover {
            color: #90a1b9;
        }