/**
 * ALERT COMPONENT
 *
 * Componente de alertas/avisos com suporte a:
 * - Tipos: Success, Warning, Error, Info
 * - Variantes: Normal, Fixo (sticky)
 * - Com/sem ícone
 * - Com/sem botão de fechar (dismissible)
 * - Com/sem título
 * - Com/sem ações (botões)
 * - Dark mode completo
 * - Acessibilidade WCAG 2.1 AA
 *
 * Baseado no Design System Figma - Gales
 * @version 1.0.0
 * @date 2025-10-30
 */

/* ============================================
   BASE ALERT STRUCTURE
   ============================================ */

.alert {
    /* Layout */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 12px);
    position: relative;

    /* Sizing */
    width: 100%;
    padding: 12px;
    min-height: 48px;

    /* Typography */
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 24px;

    /* Appearance */
    border-radius: 6px;
    border: none !important;
    box-shadow: none;

    /* Animation */
    transition: all var(--transition-base, 200ms ease-in-out);
}

/* Content wrapper */
.alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
    min-width: 0; /* Para permitir ellipsis */
}

/* Icon container */
.alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.alert-icon i {
    font-size: 20px;
    line-height: 1;
}

/* Title */
.alert-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    color: inherit;
}

/* Message/Description */
.alert-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    color: inherit;
}

/* Close button */
.alert-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--transition-fast, 150ms ease-in-out);
    margin-top: 2px; /* Alinhamento óptico */
}

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

.alert-close:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

.alert-close i {
    font-size: 18px;
    line-height: 1;
}

/* Actions (botões dentro do alert) */
.alert-actions {
    display: flex;
    gap: var(--spacing-sm, 8px);
    margin-top: var(--spacing-sm, 8px);
    flex-wrap: wrap;
}

/* ============================================
   VARIANTES - SUCCESS (GREEN)
   ============================================ */

.alert-success {
    background-color: var(--color-success-light, #DDE4D2);
    border-color: var(--color-success, #519000);
    color: var(--color-success-dark, #2D470A);
}

.alert-success .alert-icon {
    color: var(--color-success, #519000);
}

.alert-success .alert-title {
    color: var(--color-success-dark, #2D470A);
}

.alert-success .alert-message {
    color: var(--color-success-dark, #2D470A);
}

.alert-success .alert-close {
    color: var(--color-success-dark, #2D470A);
}

/* ============================================
   VARIANTES - WARNING (YELLOW)
   ============================================ */

.alert-warning {
    background-color: var(--color-warning-light, #F0E5C1);
    border-color: var(--color-warning, #E9BD00);
    color: var(--color-warning-dark, #3B2E02);
}

.alert-warning .alert-icon {
    color: var(--color-warning-icon, #9F7C04);
}

.alert-warning .alert-title {
    color: var(--color-warning-dark, #3B2E02);
}

.alert-warning .alert-message {
    color: var(--color-warning-dark, #3B2E02);
}

.alert-warning .alert-close {
    color: var(--color-warning-dark, #3B2E02);
}

/* ============================================
   VARIANTES - ERROR (RED)
   ============================================ */

.alert-error,
.alert-danger {
    background-color: var(--color-danger-light, #F9E1E1);
    border-color: var(--color-danger, #C90A0A);
    color: var(--color-danger-dark, #970707);
}

.alert-error .alert-icon,
.alert-danger .alert-icon {
    color: var(--color-danger, #C90A0A);
}

.alert-error .alert-title,
.alert-danger .alert-title {
    color: var(--color-danger-dark, #970707);
}

.alert-error .alert-message,
.alert-danger .alert-message {
    color: var(--color-danger-dark, #970707);
}

.alert-error .alert-close,
.alert-danger .alert-close {
    color: var(--color-danger-dark, #970707);
}

/* ============================================
   VARIANTES - INFO (BLUE)
   ============================================ */

.alert-info {
    background-color: #EEF3FE;
    color: #1E3FD5;
}

.alert-info .alert-icon {
    color: var(--color-accent-300);
}

.alert-info .alert-title {
    color: #1E3FD5;
}

.alert-info .alert-message {
    color: #1E3FD5;
}

.alert-info .alert-close {
    color: #1E3FD5;
}

/* ============================================
   VARIANTES - NEUTRAL (GRAY)
   ============================================ */

.alert-neutral {
    background-color: #F5F6FA;
    border-color: #C8CDDB;
    color: #525C7A;
}

.alert-neutral .alert-icon {
    color: #525C7A;
}

.alert-neutral .alert-title {
    color: var(--color-neutral-800);
}

.alert-neutral .alert-message {
    color: #525C7A;
}

.alert-neutral .alert-close {
    color: #525C7A;
}

/* ============================================
   VARIANTES - SOLID (PREENCHIDO FORTE)
   ============================================ */

/* Success Solid */
.alert-success-solid {
    background-color: var(--color-success, #519000);
    border-color: var(--color-success, #519000);
    color: var(--color-text-light);
}

.alert-success-solid .alert-icon,
.alert-success-solid .alert-title,
.alert-success-solid .alert-message,
.alert-success-solid .alert-close {
    color: var(--color-text-light);
}

/* Warning Solid */
.alert-warning-solid {
    background-color: var(--color-warning, #E9BD00);
    border-color: var(--color-warning, #E9BD00);
    color: var(--color-neutral-800);
}

.alert-warning-solid .alert-icon,
.alert-warning-solid .alert-title,
.alert-warning-solid .alert-message,
.alert-warning-solid .alert-close {
    color: var(--color-neutral-800);
}

/* Error Solid */
.alert-error-solid,
.alert-danger-solid {
    background-color: var(--color-danger, #C90A0A);
    border-color: var(--color-danger, #C90A0A);
    color: var(--color-text-light);
}

.alert-error-solid .alert-icon,
.alert-error-solid .alert-title,
.alert-error-solid .alert-message,
.alert-error-solid .alert-close,
.alert-danger-solid .alert-icon,
.alert-danger-solid .alert-title,
.alert-danger-solid .alert-message,
.alert-danger-solid .alert-close {
    color: var(--color-text-light);
}

/* Info Solid */
.alert-info-solid {
    background-color: var(--color-accent-300);
    border-color: var(--color-accent-300);
    color: var(--color-text-light);
}

.alert-info-solid .alert-icon,
.alert-info-solid .alert-title,
.alert-info-solid .alert-message,
.alert-info-solid .alert-close {
    color: var(--color-text-light);
}

/* ============================================
   TAMANHOS
   ============================================ */

/* Small */
.alert-sm {
    padding: 12px;
    min-height: 44px;
    font-size: 13px;
    line-height: 18px;
    gap: 8px;
}

.alert-sm .alert-icon {
    width: 18px;
    height: 18px;
}

.alert-sm .alert-icon i {
    font-size: 18px;
}

.alert-sm .alert-title {
    font-size: 13px;
    line-height: 18px;
}

.alert-sm .alert-message {
    font-size: 13px;
    line-height: 18px;
}

/* Large */
.alert-lg {
    padding: 20px;
    min-height: 64px;
    font-size: 16px;
    line-height: 24px;
    gap: 16px;
}

.alert-lg .alert-icon {
    width: 24px;
    height: 24px;
}

.alert-lg .alert-icon i {
    font-size: 24px;
}

.alert-lg .alert-title {
    font-size: 16px;
    line-height: 24px;
}

.alert-lg .alert-message {
    font-size: 16px;
    line-height: 24px;
}

/* ============================================
   ESTADOS ESPECIAIS
   ============================================ */

/* Fixed/Sticky (top) */
.alert-fixed,
.alert-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-alert, 1050);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Fixed bottom */
.alert-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-alert, 1050);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

/* Dismissible (com animação de saída) */
.alert-dismissible {
    animation: alert-slide-in 0.3s ease-out;
}

.alert-dismissing {
    animation: alert-slide-out 0.2s ease-in forwards;
}

@keyframes alert-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes alert-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Hidden */
.alert-hidden {
    display: none;
}

/* ============================================
   VARIANTES DE BORDA
   ============================================ */

/* Borda esquerda destacada */
.alert-border-left {
    border-left-width: 4px;
}

/* Borda superior destacada */
.alert-border-top {
    border-top-width: 4px;
}

/* Sem borda */
.alert-no-border {
    border: none;
}

/* ============================================
   VARIANTES SEM ÍCONE
   ============================================ */

.alert-no-icon .alert-icon {
    display: none;
}

/* ============================================
   ALERT INLINE (dentro de conteúdo)
   ============================================ */

.alert-inline {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

/* ============================================
   ALERT LIST (múltiplos alertas)
   ============================================ */

.alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 12px);
}

.alert-list .alert {
    margin-bottom: 0;
}

/* ============================================
   DARK MODE
   ============================================ */

/* Success Dark */
.dark .alert-success,
[data-theme="dark"] .alert-success {
    background-color: var(--color-success-light, #1B2C2B);
    border-color: var(--color-success, #519000);
    color: var(--color-success-dark, #B3D684);
}

.dark .alert-success .alert-icon,
[data-theme="dark"] .alert-success .alert-icon {
    color: var(--color-success, #519000);
}

.dark .alert-success .alert-title,
[data-theme="dark"] .alert-success .alert-title {
    color: var(--color-text-light);
}

.dark .alert-success .alert-message,
[data-theme="dark"] .alert-success .alert-message {
    color: var(--color-success-dark, #B3D684);
}

/* Warning Dark */
.dark .alert-warning,
[data-theme="dark"] .alert-warning {
    background-color: var(--color-warning-light, #242622);
    border-color: var(--color-warning, #E9BD00);
    color: var(--color-warning-dark, #EFD371);
}

.dark .alert-warning .alert-icon,
[data-theme="dark"] .alert-warning .alert-icon {
    color: var(--color-warning, #E9BD00);
}

.dark .alert-warning .alert-title,
[data-theme="dark"] .alert-warning .alert-title {
    color: var(--color-text-light);
}

.dark .alert-warning .alert-message,
[data-theme="dark"] .alert-warning .alert-message {
    color: var(--color-warning-dark, #EFD371);
}

/* Error Dark */
.dark .alert-error,
.dark .alert-danger,
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background-color: var(--color-danger-light, #3C2020);
    border-color: var(--color-danger, #CC2727);
    color: var(--color-danger-dark, #F49999);
}

.dark .alert-error .alert-icon,
.dark .alert-danger .alert-icon,
[data-theme="dark"] .alert-error .alert-icon,
[data-theme="dark"] .alert-danger .alert-icon {
    color: var(--color-danger, #CC2727);
}

.dark .alert-error .alert-title,
.dark .alert-danger .alert-title,
[data-theme="dark"] .alert-error .alert-title,
[data-theme="dark"] .alert-danger .alert-title {
    color: var(--color-text-light);
}

.dark .alert-error .alert-message,
.dark .alert-danger .alert-message,
[data-theme="dark"] .alert-error .alert-message,
[data-theme="dark"] .alert-danger .alert-message {
    color: var(--color-danger-dark, #F49999);
}

/* Info Dark */
.dark .alert-info,
[data-theme="dark"] .alert-info {
    background-color: rgba(77, 145, 245, 0.1);
    border-color: #4D91F5;
    color: #B3D4FF;
}

.dark .alert-info .alert-icon,
[data-theme="dark"] .alert-info .alert-icon {
    color: #4D91F5;
}

.dark .alert-info .alert-title,
[data-theme="dark"] .alert-info .alert-title {
    color: var(--color-text-light);
}

.dark .alert-info .alert-message,
[data-theme="dark"] .alert-info .alert-message {
    color: #B3D4FF;
}

/* Neutral Dark */
.dark .alert-neutral,
[data-theme="dark"] .alert-neutral {
    background-color: #2A2F3F;
    border-color: var(--color-neutral-600);
    color: #9BA3BC;
}

.dark .alert-neutral .alert-icon,
[data-theme="dark"] .alert-neutral .alert-icon {
    color: #9BA3BC;
}

.dark .alert-neutral .alert-title,
[data-theme="dark"] .alert-neutral .alert-title {
    color: #E0E2EB;
}

.dark .alert-neutral .alert-message,
[data-theme="dark"] .alert-neutral .alert-message {
    color: #9BA3BC;
}

/* Solid variants in Dark Mode (mantém as mesmas cores) */
.dark .alert-success-solid,
[data-theme="dark"] .alert-success-solid {
    background-color: var(--color-success, #519000);
    border-color: var(--color-success, #519000);
}

.dark .alert-warning-solid,
[data-theme="dark"] .alert-warning-solid {
    background-color: var(--color-warning, #E9BD00);
    border-color: var(--color-warning, #E9BD00);
}

.dark .alert-error-solid,
.dark .alert-danger-solid,
[data-theme="dark"] .alert-error-solid,
[data-theme="dark"] .alert-danger-solid {
    background-color: var(--color-danger, #CC2727);
    border-color: var(--color-danger, #CC2727);
}

.dark .alert-info-solid,
[data-theme="dark"] .alert-info-solid {
    background-color: #4D91F5;
    border-color: #4D91F5;
}

/* Close button em dark mode */
.dark .alert-close,
[data-theme="dark"] .alert-close {
    color: inherit;
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    .alert {
        padding: 12px;
        font-size: 13px;
        line-height: 18px;
    }

    .alert-lg {
        padding: 16px;
        font-size: 14px;
        line-height: 20px;
    }

    .alert-actions {
        flex-direction: column;
        width: 100%;
    }

    .alert-actions .btn {
        width: 100%;
    }

    /* Fixed alerts ocupam toda largura em mobile */
    .alert-fixed,
    .alert-sticky,
    .alert-fixed-bottom {
        left: 0;
        right: 0;
        margin: 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .alert {
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }

    .alert-close {
        display: none;
    }

    .alert-fixed,
    .alert-sticky,
    .alert-fixed-bottom {
        position: relative;
    }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .alert {
        border-width: 2px;
    }

    .alert-close:focus {
        outline-width: 3px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .alert,
    .alert-dismissible,
    .alert-dismissing {
        animation: none;
        transition: none;
    }
}

/* Screen Reader Only (para ARIA live regions) */
.alert-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   UTILITÁRIOS
   ============================================ */

/* Alerta com sombra */
.alert-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.alert-shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Alerta sem padding */
.alert-no-padding {
    padding: 0;
}

/* Alerta compacto */
.alert-compact {
    min-height: auto;
    padding: 8px 12px;
}

/* Alerta com overflow scroll (para conteúdo longo) */
.alert-scrollable {
    max-height: 300px;
    overflow-y: auto;
}

.alert-scrollable::-webkit-scrollbar {
    width: 6px;
}

.alert-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.alert-scrollable::-webkit-scrollbar-thumb {
    background: currentColor;
    opacity: 0.3;
    border-radius: 3px;
}

/* Link dentro do alert */
.alert a,
.alert .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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