/**
 * Modern Alert Notifications - Bootstrap Alert Override
 * 
 * This stylesheet overrides default Bootstrap alert styling with modern,
 * gradient-based notifications with smooth animations and better UX.
 * 
 * Usage: Simply use standard Bootstrap alert classes:
 * - .alert.alert-danger (for errors)
 * - .alert.alert-success (for success messages)
 * - .alert.alert-info (for informational messages)
 * - .alert.alert-primary (for primary/general messages)
 * - .alert.alert-warning (for warnings)
 * 
 * Load this CSS AFTER Bootstrap to override default alert styles.
 */

/* ============================================
   EXCLUSIONS - Do NOT apply modern styles to:
   ============================================ */

/* Exclude PNotify notifications - they have their own styling */
.ui-pnotify .alert,
.ui-pnotify-container.alert,
.alert.ui-pnotify-container {
    /* Reset to original Bootstrap/PNotify styles */
    display: block !important;
    padding: .8em !important;
    border-radius: 4px !important;
    animation: none !important;
    border: 1px solid transparent !important;
}

/* Remove auto-inserted icons from PNotify alerts */
.ui-pnotify .alert::before,
.ui-pnotify-container.alert::before,
.alert.ui-pnotify-container::before {
    display: none !important;
    content: none !important;
}

/* ============================================
   END EXCLUSIONS
   ============================================ */

/* Base alert styling - overrides Bootstrap .alert */
.alert:not(.ui-pnotify-container) {
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    display: flex;
    align-items: center;
    border: none !important;
    animation: slideDown 0.3s ease-out;
    position: relative;
}

/* Icon styling for alerts */
.alert:not(.ui-pnotify-container) i:first-child,
.alert:not(.ui-pnotify-container) .fa:first-child,
.alert:not(.ui-pnotify-container) .glyphicon:first-child {
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Success alerts - .alert-success */
.alert-success:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%) !important;
    border-left: 4px solid #4caf50 !important;
    color: #2e7d32 !important;
}

.alert-success:not(.ui-pnotify-container)::before {
    content: "\f058"; /* Font Awesome check-circle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #4caf50;
}

/* Error/Danger alerts - .alert-danger */
.alert-danger:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%) !important;
    border-left: 4px solid #f44336 !important;
    color: #c62828 !important;
}

.alert-danger:not(.ui-pnotify-container)::before {
    content: "\f06a"; /* Font Awesome exclamation-circle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #f44336;
}

/* Info alerts - .alert-info */
.alert-info:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%) !important;
    border-left: 4px solid #2196f3 !important;
    color: #1565c0 !important;
}

.alert-info:not(.ui-pnotify-container)::before {
    content: "\f05a"; /* Font Awesome info-circle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #2196f3;
}

/* Primary alerts - .alert-primary */
.alert-primary:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #e8eaf6 0%, #e3f2fd 100%) !important;
    border-left: 4px solid #3f51b5 !important;
    color: #1a237e !important;
}

.alert-primary:not(.ui-pnotify-container)::before {
    content: "\f05a"; /* Font Awesome info-circle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #3f51b5;
}

/* Warning alerts - .alert-warning */
.alert-warning:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%) !important;
    border-left: 4px solid #ff9800 !important;
    color: #e65100 !important;
}

.alert-warning:not(.ui-pnotify-container)::before {
    content: "\f071"; /* Font Awesome exclamation-triangle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #ff9800;
}

/* Secondary alerts - .alert-secondary */
.alert-secondary:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%) !important;
    border-left: 4px solid #757575 !important;
    color: #424242 !important;
}

.alert-secondary:not(.ui-pnotify-container)::before {
    content: "\f05a"; /* Font Awesome info-circle */
    font-family: "FontAwesome";
    font-size: 18px;
    margin-right: 12px;
    color: #757575;
}

/* Light alerts - .alert-light */
.alert-light:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
    border-left: 4px solid #e0e0e0 !important;
    color: #616161 !important;
}

/* Dark alerts - .alert-dark */
.alert-dark:not(.ui-pnotify-container) {
    background: linear-gradient(135deg, #424242 0%, #616161 100%) !important;
    border-left: 4px solid #212121 !important;
    color: #ffffff !important;
}

.alert-dark:not(.ui-pnotify-container)::before {
    color: #ffffff;
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dismissible alert close button styling */
.alert:not(.ui-pnotify-container) .close,
.alert:not(.ui-pnotify-container) button.close {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 0;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.alert:not(.ui-pnotify-container) .close:hover,
.alert:not(.ui-pnotify-container) button.close:hover {
    opacity: 0.8;
}

/* Remove default Bootstrap dismiss icon styling */
.alert-dismissible:not(.ui-pnotify-container) {
    padding-right: 45px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alert:not(.ui-pnotify-container) {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
    
    .alert:not(.ui-pnotify-container) i:first-child,
    .alert:not(.ui-pnotify-container) .fa:first-child,
    .alert:not(.ui-pnotify-container)::before {
        font-size: 16px;
        margin-right: 10px;
    }
}

/* If alert already has an icon, hide the ::before pseudo-element */
.alert:not(.ui-pnotify-container) i:first-child ~ *,
.alert:not(.ui-pnotify-container) .fa:first-child ~ * {
    margin-left: 0;
}

.alert:not(.ui-pnotify-container):has(> i:first-child)::before,
.alert:not(.ui-pnotify-container):has(> .fa:first-child)::before {
    display: none;
}

/* IMPORTANT: Preserve hidden elements - these rules must come last */
.alert[style*="display: none"],
.alert[style*="display:none"] {
    display: none !important;
}

.alert.hidden,
.alert.d-none,
.alert[hidden] {
    display: none !important;
}