/* Shared auth page styles (Login, Register). Uses design-system tokens where applicable. */

@keyframes authWebkitAutofill {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.auth-form .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.auth-form .input-group-text {
    border-color: #ced4da;
}

.auth-form .btn-outline-secondary {
    border-color: #ced4da;
}

.auth-form .btn-outline-secondary:hover {
    background-color: #f8f9fa;
}

.auth-form .form-check-input:checked {
    background-color: var(--lc-color-primary-600, #2563eb);
    border-color: var(--lc-color-primary-600, #2563eb);
}

.auth-form .btn-primary {
    background-color: var(--lc-color-primary-600, #2563eb);
    border-color: var(--lc-color-primary-600, #2563eb);
}

.auth-form .btn-primary:hover {
    background-color: var(--lc-color-primary-700, #1d4ed8);
    border-color: #1e40af;
}

@media (max-width: 767px) {
    #loginForm.auth-form .input-group-lg {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    #loginForm.auth-form .input-group-lg .form-control,
    #loginForm.auth-form .input-group-lg .input-group-text,
    #loginForm.auth-form .input-group-lg .toggle-password,
    #loginForm.auth-form .input-group-lg .btn.toggle-password {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    #loginForm.auth-form .input-group-lg .form-control {
        font-size: 1rem !important;
        padding: 0.375rem 0.75rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #loginForm.auth-form .input-group-lg .input-group-text {
        padding: 0.375rem 0.75rem !important;
        font-size: 1rem !important;
        min-width: 36px !important;
        flex: 0 0 auto !important;
    }

    #loginForm.auth-form .input-group-lg .toggle-password,
    #loginForm.auth-form .input-group-lg .btn.toggle-password {
        flex: 0 0 auto !important;
        width: 44px !important;
        max-width: 44px !important;
        min-width: 44px !important;
        padding: 0.375rem !important;
        font-size: 1rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }

    .auth-form-card,
    .auth-form-card .card-body {
        background-color: var(--lc-color-surface-raised, #1e293b) !important;
        color: var(--lc-color-text-primary, #f1f5f9) !important;
        color-scheme: dark;
    }

    #loginForm.auth-form {
        color-scheme: dark;
    }

    #loginForm.auth-form .input-group-text {
        background-color: #334155 !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }

    #loginForm.auth-form .toggle-password,
    #loginForm.auth-form .btn-outline-secondary.toggle-password {
        background-color: #334155 !important;
        border-color: #475569 !important;
        color: #94a3b8 !important;
    }

    #loginForm.auth-form .toggle-password:hover,
    #loginForm.auth-form .toggle-password:focus,
    #loginForm.auth-form .btn-outline-secondary.toggle-password:hover,
    #loginForm.auth-form .btn-outline-secondary.toggle-password:focus {
        background-color: #475569 !important;
        border-color: #64748b !important;
        color: #f1f5f9 !important;
    }

    #loginForm.auth-form .form-control,
    #loginForm.auth-form .input-group .form-control {
        background-color: var(--lc-color-surface-raised, #1e293b) !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }

    #loginForm.auth-form .form-control::placeholder {
        color: #94a3b8 !important;
    }

    #loginForm.auth-form .form-control:focus {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
    }

    #loginForm.auth-form input.form-control:-webkit-autofill,
    #loginForm.auth-form input.form-control:-webkit-autofill:hover,
    #loginForm.auth-form input.form-control:-webkit-autofill:focus,
    #loginForm.auth-form input.form-control:-webkit-autofill:active,
    #loginForm.auth-form input.form-control:autofill,
    #loginForm.auth-form input.form-control:autofill:hover,
    #loginForm.auth-form input.form-control:autofill:focus,
    #loginForm.auth-form input.form-control:autofill:active {
        -webkit-text-fill-color: #f1f5f9 !important;
        caret-color: #f1f5f9 !important;
        border-color: #475569 !important;
        -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
        box-shadow: 0 0 0 1000px #1e293b inset !important;
        transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
        animation-name: authWebkitAutofill;
        animation-duration: 0.001s;
    }
}

html.color-scheme-dark {
    color-scheme: dark;
}

html.color-scheme-dark .auth-form-card,
html.color-scheme-dark .auth-form-card .card-body {
    background-color: var(--lc-color-surface-raised, #1e293b) !important;
    color: var(--lc-color-text-primary, #f1f5f9) !important;
    color-scheme: dark;
}

html.color-scheme-dark #loginForm.auth-form {
    color-scheme: dark;
}

html.color-scheme-dark #loginForm.auth-form .input-group-text {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.color-scheme-dark #loginForm.auth-form .toggle-password,
html.color-scheme-dark #loginForm.auth-form .btn-outline-secondary.toggle-password {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html.color-scheme-dark #loginForm.auth-form .toggle-password:hover,
html.color-scheme-dark #loginForm.auth-form .toggle-password:focus,
html.color-scheme-dark #loginForm.auth-form .btn-outline-secondary.toggle-password:hover,
html.color-scheme-dark #loginForm.auth-form .btn-outline-secondary.toggle-password:focus {
    background-color: #475569 !important;
    border-color: #64748b !important;
    color: #f1f5f9 !important;
}

html.color-scheme-dark #loginForm.auth-form .form-control,
html.color-scheme-dark #loginForm.auth-form .input-group .form-control {
    background-color: var(--lc-color-surface-raised, #1e293b) !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.color-scheme-dark #loginForm.auth-form .form-control::placeholder {
    color: #94a3b8 !important;
}

html.color-scheme-dark #loginForm.auth-form .form-control:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}

html.color-scheme-dark #loginForm.auth-form input.form-control:-webkit-autofill,
html.color-scheme-dark #loginForm.auth-form input.form-control:-webkit-autofill:hover,
html.color-scheme-dark #loginForm.auth-form input.form-control:-webkit-autofill:focus,
html.color-scheme-dark #loginForm.auth-form input.form-control:-webkit-autofill:active,
html.color-scheme-dark #loginForm.auth-form input.form-control:autofill,
html.color-scheme-dark #loginForm.auth-form input.form-control:autofill:hover,
html.color-scheme-dark #loginForm.auth-form input.form-control:autofill:focus,
html.color-scheme-dark #loginForm.auth-form input.form-control:autofill:active {
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
    border-color: #475569 !important;
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
    box-shadow: 0 0 0 1000px #1e293b inset !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    animation-name: authWebkitAutofill;
    animation-duration: 0.001s;
}