/* ===== Auth Pages Styles - Pension Portal ===== */
/* Shared styles for Login and Verify Identity pages */

/* ===== Shared: Page Wrappers ===== */
.login-wrapper,
.verify-identity-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

/* ===== Shared: Card Styling ===== */
.login-card,
.verify-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.login-card .card-body,
.verify-card .card-body {
    background: var(--neutral-lightest);
    color: var(--neutral-darkest);
}

/* Override inherited main form styles */
.login-card form,
.login-wrapper form,
main .login-card form,
main .login-wrapper form,
.verify-card form,
.verify-identity-wrapper form,
main .verify-card form,
main .verify-identity-wrapper form {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* ===== Shared: Icon Wrappers ===== */
.login-icon-wrapper,
.verify-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-icon-wrapper i,
.verify-icon-wrapper i {
    font-size: 2.5rem;
    color: white;
}

/* Login icon - gold gradient */
.login-icon-wrapper {
    background: linear-gradient(135deg, #F9A825, #C88D00);
    box-shadow: 0 4px 12px rgba(0, 115, 124, 0.2);
}

/* Verify icon - green gradient */
.verify-icon-wrapper {
    background: linear-gradient(135deg, var(--success) 0%, #00a854 100%);
    box-shadow: 0 4px 12px rgba(0, 105, 62, 0.3);
}

/* ===== Shared: Form Controls ===== */
.login-card .form-label,
.verify-card .form-label {
    color: var(--neutral-dark);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.login-card .form-label i,
.verify-card .form-label i {
    color: var(--neutral-medium);
    font-size: 1rem;
}

.login-card .form-control,
.verify-card .form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-light);
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-card .form-control:focus,
.verify-card .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(3, 95, 165, 0.25);
    background-color: var(--neutral-lightest);
    color: var(--neutral-darkest);
}

.login-card .form-control::placeholder,
.verify-card .form-control::placeholder {
    color: var(--neutral-medium);
}

/* ===== Login-Specific: Passkey Button ===== */
.passkey-btn {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #00737c 100%);
    border: none;
    border-radius: var(--radius-pill);
    color: white;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .passkey-btn:hover {
        background: linear-gradient(135deg, #0d213d 0%, #005f64 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 115, 124, 0.3);
        color: white;
    }

    .passkey-btn:focus {
        background: linear-gradient(135deg, #0d213d 0%, #005f64 100%);
        box-shadow: 0 0 0 3px rgba(0, 115, 124, 0.25);
        outline: none;
        color: white;
    }

    .passkey-btn:active {
        background: linear-gradient(135deg, #0a1829 0%, #004550 100%);
        transform: translateY(0);
        color: white;
    }

    .passkey-btn.loading {
        background: linear-gradient(135deg, var(--neutral-medium) 0%, var(--neutral-dark) 100%);
        pointer-events: none;
        color: white;
    }

/* ===== Login-Specific: Divider ===== */
.login-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

    .login-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--neutral-light);
    }

    .login-divider .divider-text {
        position: relative;
        display: inline-block;
        padding: 0 1rem;
        background: var(--neutral-lightest);
        color: var(--neutral-dark);
        font-size: 0.875rem;
        font-weight: 500;
    }

/* ===== Login-Specific: Support Links ===== */
.support-links-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-light);
}

.support-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    border: 2px solid var(--neutral-light);
    background-color: var(--neutral-lightest);
    color: var(--neutral-dark);
}

    .support-link:hover {
        background-color: var(--primary-lightest);
        border-color: var(--primary-light);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }

    .support-link:focus {
        outline: 2px solid var(--primary-light);
        outline-offset: 2px;
    }

    .support-link i {
        font-size: 0.875rem;
    }

/* ===== Login-Specific: Registration Card ===== */
.register-card {
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--neutral-light);
    background-color: var(--neutral-lightest);
}

    .register-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
        border-color: var(--success);
    }

    .register-card .card-body {
        background: linear-gradient(to right, rgba(0, 105, 62, 0.03), rgba(0, 105, 62, 0.01));
    }

    .register-card h5 {
        color: var(--neutral-darkest);
    }

    .register-card .text-muted {
        color: var(--neutral-medium) !important;
    }

    .register-card .text-success {
        color: var(--success) !important;
    }

/* Preserve text colors in links */
a .card-body,
a .card-text,
a .text-success,
a .text-muted {
    color: inherit !important;
}

/* ===== Verify Identity-Specific: Form Text ===== */
.verify-card .form-text {
    color: var(--neutral-medium);
    font-size: 0.875rem;
}

    .verify-card .form-text i {
        color: var(--primary-light);
    }

/* ===== Verify Identity-Specific: Help Section ===== */
.help-section {
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin: -0.5rem -0.5rem 0;
}

    .help-section .btn {
        border-radius: var(--radius-md);
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .help-section .btn-outline-primary {
        border: 2px solid var(--primary-dark);
        color: var(--primary-dark);
    }

        .help-section .btn-outline-primary:hover {
            background-color: var(--primary-dark);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 44, 101, 0.2);
        }

    .help-section .btn-outline-secondary {
        border: 2px solid var(--neutral-light);
        color: var(--neutral-dark);
    }

        .help-section .btn-outline-secondary:hover {
            background-color: var(--neutral-light);
            color: var(--neutral-darkest);
            border-color: var(--neutral-medium);
            transform: translateY(-1px);
        }

/* ===== Shared: Responsive Adjustments ===== */
@media (max-width: 576px) {
    .login-wrapper,
    .verify-identity-wrapper {
        padding: 1rem 0;
    }

    .login-card .card-body,
    .verify-card .card-body {
        padding: 2rem 1.5rem !important;
    }

    .login-icon-wrapper,
    .verify-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .login-icon-wrapper i,
    .verify-icon-wrapper i {
        font-size: 2rem;
    }

    .support-links-container .d-flex {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .support-link {
        display: block;
        text-align: center;
    }

    .help-section {
        padding: 1rem;
    }
}

/* ===== Shared: Dark Mode ===== */
:root.dark-mode .login-wrapper,
:root.dark-mode .verify-identity-wrapper {
    background-color: var(--neutral-lightest);
}

:root.dark-mode .login-card,
:root.dark-mode .verify-card {
    background-color: var(--neutral-lightest);
    border: 2px solid var(--neutral-border);
}

:root.dark-mode .login-card .card-body,
:root.dark-mode .verify-card .card-body {
    background-color: var(--neutral-lightest);
    color: #ffffff;
}

/* Dark mode icon wrappers */
:root.dark-mode .login-icon-wrapper {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #00737c 100%);
    box-shadow: 0 4px 12px rgba(0, 115, 124, 0.4);
}

:root.dark-mode .verify-icon-wrapper {
    box-shadow: 0 4px 12px rgba(0, 105, 62, 0.5);
}

/* Dark mode form labels */
:root.dark-mode .login-card .form-label,
:root.dark-mode .verify-card .form-label {
    color: #ffffff;
    background-color: var(--neutral-lightest) !important;
}

:root.dark-mode .card-body {
    background-color: var(--neutral-lightest) !important;
}

/* Dark mode form controls */
:root.dark-mode .login-card .form-control,
:root.dark-mode .verify-card .form-control {
    background-color: var(--neutral-lightest);
    border-color: var(--neutral-border);
    color: #ffffff;
}

:root.dark-mode .login-card .form-control:focus,
:root.dark-mode .verify-card .form-control:focus {
    background-color: var(--neutral-lightest);
    border-color: var(--primary-light);
    color: #ffffff;
}

:root.dark-mode .login-card .form-control::placeholder,
:root.dark-mode .verify-card .form-control::placeholder {
    color: var(--neutral-medium); /* Light gray #CDD5E1 in dark mode - 12.8:1 contrast */
    opacity: 0.8; /* Slightly reduced for placeholder appearance */
}

/* Dark mode login divider */
:root.dark-mode .login-divider::before {
    background: var(--neutral-border);
}

:root.dark-mode .login-divider .divider-text {
    background: var(--neutral-lightest);
}

/* Dark mode support links */
:root.dark-mode .support-links-container {
    border-top-color: var(--neutral-border);
}

:root.dark-mode .support-link {
    color: var(--neutral-dark);
}

    :root.dark-mode .support-link:hover {
        color: var(--secondary);
    }

/* Dark mode registration card */
:root.dark-mode .register-card {
    background-color: var(--neutral-lightest);
    border-color: var(--neutral-border);
}

    :root.dark-mode .register-card .card-body {
        background: linear-gradient(to right, rgba(0, 105, 62, 0.1), rgba(0, 105, 62, 0.05));
    }

    :root.dark-mode .register-card h5 {
        color: #ffffff;
    }

    :root.dark-mode .register-card .text-muted {
        color: var(--neutral-medium) !important; /* Light gray in dark mode (#CDD5E1) - proper contrast */
    }

    :root.dark-mode .register-card:hover {
        border-color: var(--success);
        box-shadow: 0 6px 12px rgba(0, 105, 62, 0.3) !important;
    }

/* Dark mode form check styling */
:root.dark-mode .form-check-input {
    background-color: #2b2b3f;
    border-color: var(--neutral-border);
}

    :root.dark-mode .form-check-input:checked {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

:root.dark-mode .form-check-label {
    color: #ffffff;
}

/* Dark mode alert styling */
:root.dark-mode .alert-success {
    background-color: rgba(0, 105, 62, 0.2);
    color: #4ade80;
    border-color: var(--success);
}

:root.dark-mode .alert-danger {
    background-color: rgba(207, 46, 46, 0.2);
    color: #f87171;
    border-color: var(--error);
}

:root.dark-mode .alert-info {
    background-color: rgba(44, 87, 165, 0.2);
    color: #60a5fa;
    border-color: var(--primary-light);
}

/* Dark mode help section */
:root.dark-mode .help-section {
    background: linear-gradient(to bottom, transparent, rgba(44, 87, 165, 0.1));
}