/*
 * ============================================================================
 * St. Cloud State University - Alert/Notification Components
 * ============================================================================
 * 
 * Standardized alert and notification styling
 * 
 * PURPOSE:
 * Provides consistent alert components including:
 * - Success, info, warning, and error alerts
 * - Dismissible alerts
 * - Toast notifications
 * - Inline validation messages
 * 
 * MIGRATION PATH:
 * This file follows the same structure as scsu-buttons.css.
 * Copy to scsu-main-styles.css keeping the same class names.
 * All component classes are prefixed with .alert-* for easy identification.
 * 
 * ACCESSIBILITY:
 * - ARIA live regions for screen reader announcements
 * - High contrast colors
 * - Dismissible with keyboard support
 * - Role attributes for context
 * 
 * WCAG 2.1 AA Compliance:
 * - Color contrast ratio ≥ 4.5:1
 * - Icons + text (not color alone)
 * - Keyboard dismissible
 * - Screen reader announcements
 * 
 * ============================================================================
 */

/* ============================================
   BASE ALERT STYLES
   Foundation for all alert variants
   ============================================ */

.alert-scsu {
    position: relative;
    padding: var(--scsu-spacing-4, 1rem) var(--scsu-spacing-5, 1.5rem);
    margin-bottom: var(--scsu-spacing-4, 1rem);
    border: 1px solid transparent;
    border-radius: var(--scsu-border-radius, 0.25rem);
    font-size: var(--scsu-font-size-base, 1rem);
}

/* Alert heading */
.alert-scsu .alert-heading {
    color: inherit;
    font-weight: var(--scsu-font-weight-semibold, 600);
    margin-bottom: var(--scsu-spacing-2, 0.5rem);
}

/* Alert links */
.alert-scsu .alert-link {
    font-weight: var(--scsu-font-weight-semibold, 600);
    text-decoration: underline;
}

.alert-scsu .alert-link:hover {
    text-decoration: none;
}

/* ============================================
   ALERT VARIANTS - CONTEXTUAL COLORS
   ============================================ */

/* Success Alert */
.alert-scsu-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-scsu-success .alert-link {
    color: #0c4128;
}

/* Info Alert */
.alert-scsu-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-scsu-info .alert-link {
    color: #04414d;
}

/* Warning Alert */
.alert-scsu-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-scsu-warning .alert-link {
    color: #523e02;
}

/* Danger/Error Alert */
.alert-scsu-danger,
.alert-scsu-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-scsu-danger .alert-link,
.alert-scsu-error .alert-link {
    color: #6a1a21;
}

/* Primary Alert (SCSU Red) */
.alert-scsu-primary {
    color: #6b0f1e;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-scsu-primary .alert-link {
    color: #560c18;
}

/* Secondary Alert (Gray) */
.alert-scsu-secondary {
    color: #1a1a1a;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

.alert-scsu-secondary .alert-link {
    color: #141414;
}

/* ============================================
   DISMISSIBLE ALERTS
   Alerts with close button
   ============================================ */

.alert-scsu-dismissible {
    padding-right: 3.5rem;
}

.alert-scsu-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1.5rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--scsu-border-radius, 0.25rem);
    opacity: 0.5;
    cursor: pointer;
    width: 1em;
    height: 1em;
}

.alert-scsu-dismissible .btn-close:hover,
.alert-scsu-dismissible .btn-close:focus {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ARIA live region for screen readers */
.alert-scsu[role="alert"] {
    /* Automatically announced to screen readers */
}

/* ============================================
   ALERT WITH ICONS
   Visual indicators for alert type
   ============================================ */

.alert-scsu-with-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--scsu-spacing-3, 0.75rem);
}

.alert-scsu-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
}

.alert-scsu-content {
    flex: 1;
}

/* ============================================
   TOAST NOTIFICATIONS
   Temporary notifications that auto-dismiss
   ============================================ */

.toast-container-scsu {
    position: fixed;
    top: var(--scsu-spacing-5, 1.5rem);
    right: var(--scsu-spacing-5, 1.5rem);
    z-index: var(--scsu-z-modal, 1050);
    max-width: 400px;
}

.toast-scsu {
    position: relative;
    margin-bottom: var(--scsu-spacing-3, 0.75rem);
    background-color: var(--scsu-bg-body, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--scsu-border-radius, 0.25rem);
    box-shadow: var(--scsu-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--scsu-transition-base, 0.3s ease-in-out);
}

.toast-scsu.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-scsu.hiding {
    opacity: 0;
    transform: translateX(100%);
}

.toast-header-scsu {
    display: flex;
    align-items: center;
    padding: var(--scsu-spacing-2, 0.5rem) var(--scsu-spacing-3, 0.75rem);
    color: var(--scsu-text-secondary, #6c757d);
    background-color: var(--scsu-gray-100, #f8f9fa);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: calc(var(--scsu-border-radius, 0.25rem) - 1px) calc(var(--scsu-border-radius, 0.25rem) - 1px) 0 0;
}

.toast-header-scsu .toast-title {
    margin-right: auto;
    font-weight: var(--scsu-font-weight-semibold, 600);
}

.toast-header-scsu .toast-close {
    margin-left: var(--scsu-spacing-2, 0.5rem);
    margin-right: calc(var(--scsu-spacing-2, 0.5rem) * -0.5);
}

.toast-body-scsu {
    padding: var(--scsu-spacing-3, 0.75rem);
}

/* Toast variants */
.toast-scsu-success .toast-header-scsu {
    background-color: #d1e7dd;
    color: #0f5132;
}

.toast-scsu-info .toast-header-scsu {
    background-color: #cff4fc;
    color: #055160;
}

.toast-scsu-warning .toast-header-scsu {
    background-color: #fff3cd;
    color: #664d03;
}

.toast-scsu-danger .toast-header-scsu {
    background-color: #f8d7da;
    color: #842029;
}

/* ============================================
   INLINE VALIDATION MESSAGES
   Form field validation feedback
   ============================================ */

.validation-message-scsu {
    display: block;
    margin-top: var(--scsu-spacing-1, 0.25rem);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    line-height: var(--scsu-line-height-base, 1.5);
}

.validation-message-scsu.success {
    color: var(--scsu-color-success, #198754);
}

.validation-message-scsu.error {
    color: var(--scsu-color-danger, #dc3545);
    font-weight: var(--scsu-font-weight-medium, 500);
}

.validation-message-scsu.warning {
    color: var(--scsu-color-warning, #ffc107);
}

/* ============================================
   BANNER ALERTS
   Full-width prominent alerts
   ============================================ */

.alert-banner-scsu {
    border-radius: 0;
    margin-bottom: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-weight: var(--scsu-font-weight-medium, 500);
}

/* ============================================
   ALERT LISTS
   Multiple items within an alert
   ============================================ */

.alert-scsu ul,
.alert-scsu ol {
    margin-bottom: 0;
    padding-left: var(--scsu-spacing-5, 1.5rem);
}

.alert-scsu ul li,
.alert-scsu ol li {
    margin-bottom: var(--scsu-spacing-1, 0.25rem);
}

/* ============================================
   FADE TRANSITION
   Smooth show/hide animation
   ============================================ */

.alert-scsu.fade {
    opacity: 0;
    transition: opacity var(--scsu-transition-base, 0.3s ease-in-out);
}

.alert-scsu.fade.show {
    opacity: 1;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .toast-container-scsu {
        top: var(--scsu-spacing-3, 0.75rem);
        right: var(--scsu-spacing-3, 0.75rem);
        left: var(--scsu-spacing-3, 0.75rem);
        max-width: none;
    }
    
    .alert-scsu {
        font-size: var(--scsu-font-size-sm, 0.875rem);
        padding: var(--scsu-spacing-3, 0.75rem);
    }
    
    .alert-scsu-dismissible {
        padding-right: 3rem;
    }
}

/* ============================================
   PRINT STYLES
   Ensure alerts are visible when printed
   ============================================ */

@media print {
    .alert-scsu {
        border: 2px solid currentColor;
        page-break-inside: avoid;
    }
    
    .alert-scsu-dismissible .btn-close {
        display: none;
    }
}

/* End of SCSU Alert Components */