/**
 * Login Alert Styling - WCAG2 AA Compliant
 * Created: May 20, 2025
 * 
 * This CSS updates the login page alerts to use blue colors matching the site theme
 * instead of green, while ensuring text contrast meets WCAG2 AA standards.
 */

/* Alert styling for all alerts on login page */
.login-form .alert,
.login .alert,
.alert.login-alert {
    border-radius: 4px !important;
    border: none !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    position: relative !important;
    /* The below colors match the blue theme instead of green */
    background-color: rgba(13, 110, 253, 0.15) !important; /* Light blue background with 15% opacity */
    color: #0b5ed7 !important; /* Darker blue text for WCAG2 AA compliance (contrast ratio > 4.5:1) */
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
}

/* Make close button match the blue theme */
.login-form .alert .btn-close,
.login .alert .btn-close,
.alert.login-alert .btn-close {
    color: #0b5ed7 !important;
    opacity: 0.8 !important;
}

.login-form .alert .btn-close:hover,
.login .alert .btn-close:hover,
.alert.login-alert .btn-close:hover {
    opacity: 1 !important;
}

/* Specific styling for success alerts */
.login-form .alert-success,
.login .alert-success,
.alert.login-alert.alert-success {
    background-color: rgba(13, 110, 253, 0.15) !important; /* Light blue background */
    color: #0b5ed7 !important; /* Darker blue text for contrast */
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
}

/* Specific styling for danger/error alerts */
.login-form .alert-danger,
.login .alert-danger,
.alert.login-alert.alert-danger {
    background-color: rgba(13, 110, 253, 0.15) !important; /* Light blue background */
    color: #0b5ed7 !important; /* Darker blue text for contrast */
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
}

/* Ensure text is readable with proper weight */
.login-form .alert,
.login .alert,
.alert.login-alert {
    font-weight: 500 !important;
    text-shadow: none !important;
}
/* High-priority override for alert styling */
body.login .alert,
.login-form .alert,
div.alert.alert-dismissible.fade.show.login-alert {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #0b5ed7 !important;
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
    font-weight: 500 !important;
}

/* Use more specific selectors to override Bootstrap defaults */
.login-form .alert.alert-success,
.login-form .alert.alert-danger,
.login-form .alert.alert-warning,
.login-form .alert.alert-info {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #0b5ed7 !important; 
    border: 1px solid rgba(13, 110, 253, 0.3) !important;
}