/**
 * Alert Component Styles
 *
 * Modern Bootstrap alert styling that integrates with Azure Portal design system.
 * Provides consistent appearance across light and dark modes with proper semantic colors.
 *
 * Usage: Standard Bootstrap alert classes work automatically
 * <div class="alert alert-success">Success message</div>
 * <div class="alert alert-danger">Error message</div>
 * <div class="alert alert-warning">Warning message</div>
 * <div class="alert alert-info">Info message</div>
 */

/* ============================================================================
   Base Alert Styles
   ============================================================================ */

.alert {
    /* Spacing & Layout */
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    border: none;
    border-left: 4px solid transparent;

    /* Typography */
    font-size: 14px;
    line-height: 1.5;

    /* Positioning for icons */
    display: flex;
    align-items: flex-start;
    gap: 12px;

    /* Transitions */
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Icon sizing when used in alerts */
.alert > i.bi {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Alert content area */
.alert > div:not(.btn-close) {
    flex: 1;
    min-width: 0;
}

/* Dismissible alerts */
.alert-dismissible {
    padding-right: 40px;
    position: relative;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

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

/* ============================================================================
   Alert Types - Light Mode (Default + Explicit)
   ============================================================================ */

/* Default (when no data-bs-theme attribute) */
.alert-success {
    background-color: #f0f9f4;
    border-left-color: #10b981;
    color: #065f46;
}

.alert-success > i.bi {
    color: #10b981;
}

.alert-info {
    background-color: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}

.alert-info > i.bi {
    color: #3b82f6;
}

.alert-warning {
    background-color: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.alert-warning > i.bi {
    color: #f59e0b;
}

.alert-danger {
    background-color: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.alert-danger > i.bi {
    color: #ef4444;
}

.alert-secondary {
    background-color: #f8f9fa;
    border-left-color: #6c757d;
    color: #495057;
}

.alert-secondary > i.bi {
    color: #6c757d;
}

/* Explicit light theme (when data-bs-theme="light") */
[data-bs-theme="light"] .alert-success {
    background-color: #f0f9f4;
    border-left-color: #10b981;
    color: #065f46;
}

[data-bs-theme="light"] .alert-success > i.bi {
    color: #10b981;
}

[data-bs-theme="light"] .alert-info {
    background-color: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}

[data-bs-theme="light"] .alert-info > i.bi {
    color: #3b82f6;
}

[data-bs-theme="light"] .alert-warning {
    background-color: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

[data-bs-theme="light"] .alert-warning > i.bi {
    color: #f59e0b;
}

[data-bs-theme="light"] .alert-danger {
    background-color: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

[data-bs-theme="light"] .alert-danger > i.bi {
    color: #ef4444;
}

[data-bs-theme="light"] .alert-secondary {
    background-color: #f8f9fa;
    border-left-color: #6c757d;
    color: #495057;
}

[data-bs-theme="light"] .alert-secondary > i.bi {
    color: #6c757d;
}

/* ============================================================================
   Alert Types - Dark Mode
   ============================================================================ */

[data-bs-theme="dark"] .alert-success {
    background-color: #1a2e1f;
    border-left-color: #10b981;
    color: #86efac;
}

[data-bs-theme="dark"] .alert-success > i.bi {
    color: #10b981;
}

[data-bs-theme="dark"] .alert-info {
    background-color: #1e293b;
    border-left-color: #3b82f6;
    color: #93c5fd;
}

[data-bs-theme="dark"] .alert-info > i.bi {
    color: #3b82f6;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: #2d2416;
    border-left-color: #f59e0b;
    color: #fcd34d;
}

[data-bs-theme="dark"] .alert-warning > i.bi {
    color: #f59e0b;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #2e1a1a;
    border-left-color: #ef4444;
    color: #fca5a5;
}

[data-bs-theme="dark"] .alert-danger > i.bi {
    color: #ef4444;
}

[data-bs-theme="dark"] .alert-secondary {
    background-color: #30302E;
    border-left-color: #6c757d;
    color: #adb5bd;
}

[data-bs-theme="dark"] .alert-secondary > i.bi {
    color: #6c757d;
}

/* ============================================================================
   Alert Links
   ============================================================================ */

.alert a:not(.btn) {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Default link colors */
.alert-success a:not(.btn) {
    color: #047857;
}

.alert-info a:not(.btn) {
    color: #1d4ed8;
}

.alert-warning a:not(.btn) {
    color: #b45309;
}

.alert-danger a:not(.btn) {
    color: #b91c1c;
}

/* Light mode link colors */
[data-bs-theme="light"] .alert-success a:not(.btn) {
    color: #047857;
}

[data-bs-theme="light"] .alert-info a:not(.btn) {
    color: #1d4ed8;
}

[data-bs-theme="light"] .alert-warning a:not(.btn) {
    color: #b45309;
}

[data-bs-theme="light"] .alert-danger a:not(.btn) {
    color: #b91c1c;
}

[data-bs-theme="dark"] .alert-success a:not(.btn) {
    color: #6ee7b7;
}

[data-bs-theme="dark"] .alert-info a:not(.btn) {
    color: #60a5fa;
}

[data-bs-theme="dark"] .alert-warning a:not(.btn) {
    color: #fbbf24;
}

[data-bs-theme="dark"] .alert-danger a:not(.btn) {
    color: #f87171;
}

/* ============================================================================
   Alert Headings
   ============================================================================ */

.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.alert .alert-heading {
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 15px;
}

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

/* ============================================================================
   Alert with Buttons/Actions
   ============================================================================ */

.alert .btn {
    margin-top: 8px;
}

.alert .btn:first-of-type {
    margin-left: 0;
}

/* ============================================================================
   Small/Compact Alerts
   ============================================================================ */

.alert.small,
.alert .small {
    font-size: 12px;
}

.alert.py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.alert.px-3 {
    padding-left: 12px;
    padding-right: 12px;
}

/* ============================================================================
   Close Button Theming
   ============================================================================ */

/* Default (light) */
.alert .btn-close {
    filter: brightness(0.3);
}

/* Explicit light theme */
[data-bs-theme="light"] .alert .btn-close {
    filter: brightness(0.3);
}

[data-bs-theme="dark"] .alert .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

[data-bs-theme="dark"] .alert .btn-close:hover {
    opacity: 1;
}

/* ============================================================================
   Alert Animations
   ============================================================================ */

/* Fade in animation for new alerts */
.alert.fade:not(.show) {
    opacity: 0;
}

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

/* Slide down animation (optional enhancement) */
@keyframes alertSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert.alert-animate {
    animation: alertSlideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Validation Summary Alerts
   ============================================================================ */

/* ASP.NET validation summary styling */
.alert .validation-summary-errors ul,
.alert ul.validation-errors {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.alert .validation-summary-errors li,
.alert ul.validation-errors li {
    margin: 4px 0;
}

/* ============================================================================
   Accessibility
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .alert {
        border: 2px solid;
    }

    [data-bs-theme="light"] .alert-success {
        border-color: #047857;
    }

    [data-bs-theme="light"] .alert-info {
        border-color: #1d4ed8;
    }

    [data-bs-theme="light"] .alert-warning {
        border-color: #b45309;
    }

    [data-bs-theme="light"] .alert-danger {
        border-color: #b91c1c;
    }

    [data-bs-theme="dark"] .alert-success {
        border-color: #10b981;
    }

    [data-bs-theme="dark"] .alert-info {
        border-color: #3b82f6;
    }

    [data-bs-theme="dark"] .alert-warning {
        border-color: #f59e0b;
    }

    [data-bs-theme="dark"] .alert-danger {
        border-color: #ef4444;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .alert {
        transition: none;
    }

    .alert.alert-animate {
        animation: none;
    }
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 576px) {
    .alert {
        font-size: 13px;
        padding: 10px 12px;
    }

    .alert > i.bi {
        font-size: 16px;
    }

    .alert-dismissible {
        padding-right: 36px;
    }

    .alert-dismissible .btn-close {
        top: 10px;
        right: 10px;
    }
}