/**
 * Alert Components
 * CRITICAL FIX: Proper contrast in dark theme
 */

/* =============================================================================
   BASE ALERT STYLING
   ============================================================================= */

.alert {
    position: relative;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: var(--border-width-1) solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.alert:last-child {
    margin-bottom: 0;
}

/* Alert with Icon */
.alert i, .alert .fas, .alert .bi {
    margin-right: var(--space-2);
    font-size: var(--font-size-lg);
}

/* =============================================================================
   ALERT VARIANTS - LIGHT THEME
   ============================================================================= */

/* Primary Alert */
.alert-primary {
    color: #1e3a8a;
    background-color: #dbeafe;
    border-color: #93c5fd;
}

/* Secondary Alert */
.alert-secondary {
    color: #475569;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Success Alert */
.alert-success {
    color: #065f46;
    background-color: #d1fae5;
    border-color: #6ee7b7;
}

/* Info Alert */
.alert-info {
    color: #075985;
    background-color: #e0f2fe;
    border-color: #7dd3fc;
}

/* Warning Alert */
.alert-warning {
    color: #92400e;
    background-color: #fef3c7;
    border-color: #fcd34d;
}

/* Danger Alert */
.alert-danger {
    color: #991b1b;
    background-color: #fee2e2;
    border-color: #fca5a5;
}

/* Light Alert */
.alert-light {
    color: #334155;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* Dark Alert */
.alert-dark {
    color: #f8fafc;
    background-color: #1e293b;
    border-color: #475569;
}

/* =============================================================================
   ALERT VARIANTS - DARK THEME (CRITICAL FIX)
   ============================================================================= */

[data-theme="dark"] .alert-primary {
    color: #ffffff !important;
    background-color: #1e3a8a !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .alert-secondary {
    color: #ffffff !important;
    background-color: #475569 !important;
    border-color: #64748b !important;
}

/* CRITICAL FIX: Success Alert in Dark Theme */
[data-theme="dark"] .alert-success {
    color: #ffffff !important;
    background-color: #065f46 !important;
    border-color: #10b981 !important;
}

/* CRITICAL FIX: Info Alert in Dark Theme */
[data-theme="dark"] .alert-info {
    color: #ffffff !important;
    background-color: #075985 !important;
    border-color: #0ea5e9 !important;
}

[data-theme="dark"] .alert-warning {
    color: #ffffff !important;
    background-color: #92400e !important;
    border-color: #f59e0b !important;
}

[data-theme="dark"] .alert-danger {
    color: #ffffff !important;
    background-color: #991b1b !important;
    border-color: #ef4444 !important;
}

[data-theme="dark"] .alert-light {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="dark"] .alert-dark {
    color: #ffffff !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* =============================================================================
   ALERT LINKS
   ============================================================================= */

.alert-link {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

.alert-primary .alert-link {
    color: #1e293b;
}

.alert-success .alert-link {
    color: #047857;
}

.alert-info .alert-link {
    color: #0c4a6e;
}

.alert-warning .alert-link {
    color: #78350f;
}

.alert-danger .alert-link {
    color: #7f1d1d;
}

[data-theme="dark"] .alert-link {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* =============================================================================
   DISMISSIBLE ALERTS
   ============================================================================= */

.alert-dismissible {
    padding-right: var(--space-12);
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--space-4);
    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;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}

.alert-dismissible .btn-close:hover {
    opacity: 1;
}

[data-theme="dark"] .alert-dismissible .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%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;
}

/* =============================================================================
   ALERT HEADINGS
   ============================================================================= */

.alert-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: inherit;
}

.alert > :last-child {
    margin-bottom: 0;
}

/* =============================================================================
   SOLID ALERTS (COLORED TEXT ON WHITE)
   ============================================================================= */

.alert-solid-primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.alert-solid-success {
    background-color: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.alert-solid-info {
    background-color: var(--color-info);
    color: white;
    border-color: var(--color-info);
}

.alert-solid-warning {
    background-color: var(--color-warning);
    color: white;
    border-color: var(--color-warning);
}

.alert-solid-danger {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

/* =============================================================================
   BORDERED ALERTS (ONLY BORDER, SUBTLE BACKGROUND)
   ============================================================================= */

.alert-bordered {
    background-color: var(--color-background);
    border-width: var(--border-width-2);
    border-left-width: var(--border-width-4);
}

.alert-bordered.alert-primary {
    border-left-color: var(--color-primary);
}

.alert-bordered.alert-success {
    border-left-color: var(--color-success);
}

.alert-bordered.alert-info {
    border-left-color: var(--color-info);
}

.alert-bordered.alert-warning {
    border-left-color: var(--color-warning);
}

.alert-bordered.alert-danger {
    border-left-color: var(--color-danger);
}

/* =============================================================================
   TOAST NOTIFICATIONS (AS ALERTS)
   ============================================================================= */

.alert.toast-alert {
    position: fixed;
    top: var(--space-20);
    right: var(--space-6);
    min-width: 300px;
    max-width: 400px;
    z-index: var(--z-notification);
    box-shadow: var(--shadow-xl);
    animation: slideInRight var(--duration-base) var(--ease-out);
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.alert.toast-alert.hiding {
    animation: slideOutRight var(--duration-base) var(--ease-in);
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

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

@media (max-width: 768px) {
    .alert {
        padding: var(--space-3);
        font-size: var(--font-size-sm);
    }
    
    .alert-heading {
        font-size: var(--font-size-base);
    }
    
    .alert.toast-alert {
        top: var(--space-16);
        right: var(--space-4);
        left: var(--space-4);
        min-width: auto;
        max-width: none;
    }
}

/* =============================================================================
   SPECIAL USE CASES
   ============================================================================= */

/* Alert with List */
.alert ul {
    margin-bottom: 0;
    padding-left: var(--space-5);
}

.alert ul li {
    margin-bottom: var(--space-1);
}

.alert ul li:last-child {
    margin-bottom: 0;
}

/* Alert with Strong Text */
.alert strong {
    font-weight: var(--font-weight-bold);
}

/* Inline Alert (smaller, compact) */
.alert-inline {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}