/* 
 * Sistema de Notificação Toast Moderno - Quem Disse Isso
 * Baseado no sistema original do voalle-shortcuts
 * Compatível com Bootstrap 5.3
 * Posicionamento: Canto Superior Direito
 */

/* Toast moderno - sobrepõe o Bootstrap quando necessário */
.modern-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    transform: translateX(100px);
    /* Inicia fora da tela pela direita */
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    /* Sombra difusa e arredondada - elimina cantos quadrados */
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.06),
        0 12px 24px -16px rgba(0, 0, 0, 0.08),
        0 8px 16px -8px rgba(0, 0, 0, 0.04),
        0 4px 8px -4px rgba(0, 0, 0, 0.02);
    z-index: 3500;
    /* Maior que Bootstrap modals */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #10b981;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 40px));
    /* Previne overflow da viewport */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-bottom: 12px;
    /* Removido cursor pointer */
    word-wrap: break-word;
    /* Quebra palavras longas */
    overflow-wrap: break-word;
    /* Compatibilidade */
    backdrop-filter: blur(8px);
}

.modern-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Tipos de notificação */
.modern-notification.notification-success {
    border-left-color: #198754;
    /* Bootstrap success */
    color: #0f5132;
    background: linear-gradient(135deg, #ffffff 0%, #d1edff 100%);
}

.modern-notification.notification-success i {
    color: #198754;
    font-size: 18px;
}

.modern-notification.notification-error {
    border-left-color: #dc3545;
    /* Bootstrap danger */
    color: #721c24;
    background: linear-gradient(135deg, #ffffff 0%, #f8d7da 100%);
}

.modern-notification.notification-error i {
    color: #dc3545;
    font-size: 18px;
}

.modern-notification.notification-warning {
    border-left-color: #fd7e14;
    /* Bootstrap warning */
    color: #664d03;
    background: linear-gradient(135deg, #ffffff 0%, #fff3cd 100%);
}

.modern-notification.notification-warning i {
    color: #fd7e14;
    font-size: 18px;
}

.modern-notification.notification-info {
    border-left-color: #0dcaf0;
    /* Bootstrap info */
    color: #055160;
    background: linear-gradient(135deg, #ffffff 0%, #cff4fc 100%);
}

.modern-notification.notification-info i {
    color: #0dcaf0;
    font-size: 18px;
}

/* Hover effects */
.modern-notification:hover {
    /* Sombra mais destacada no hover - difusa e arredondada */
    box-shadow:
        0 28px 50px -16px rgba(0, 0, 0, 0.08),
        0 20px 32px -20px rgba(0, 0, 0, 0.12),
        0 12px 20px -12px rgba(0, 0, 0, 0.06),
        0 6px 12px -6px rgba(0, 0, 0, 0.04);
    transform: translateX(-5px) scale(1.02);
}

/* Animação de saída */
.modern-notification.notification-exit {
    transform: translateX(100px);
    opacity: 0;
}

/* Container para múltiplas notificações */
.modern-notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3500;
    pointer-events: none;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Previne scroll horizontal */
    max-width: calc(100vw - 40px);
    /* Previne overflow na viewport */
}

.modern-notifications-container .modern-notification {
    position: relative;
    top: auto;
    right: auto;
    pointer-events: all;
    margin-bottom: 10px;
    transform: none !important;
    /* Remove transforms que podem causar scroll */
}

/* Texto da notificação */
.modern-notification span {
    flex: 1;
    line-height: 1.4;
    font-size: 14px;
    word-wrap: break-word;
    /* Quebra palavras longas */
    overflow-wrap: break-word;
    /* Compatibilidade */
}

/* Ícone da notificação */
.modern-notification i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .modern-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        transform: translateY(-100px);
        /* No mobile, desliza de cima */
        padding: 14px 16px;
        font-size: 14px;
    }

    .modern-notification.show {
        transform: translateY(0);
    }

    .modern-notification:hover {
        transform: translateY(0) scale(1.01);
    }

    .modern-notification.notification-exit {
        transform: translateY(-100px);
        opacity: 0;
    }

    .modern-notifications-container {
        right: 10px;
        left: 10px;
    }
}

/* Integração com Bootstrap - ajustes para coexistir */
.toast-container .modern-notification {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    margin: 0 0 10px 0;
}

/* Melhorias para acessibilidade */
.modern-notification:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Animações específicas para entrada */
@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

    to {
        transform: translateX(100px);
        opacity: 0;
    }
}

/* Animações para mobile */
@media (max-width: 768px) {
    @keyframes slideInTop {
        from {
            transform: translateY(-100px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideOutTop {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(-100px);
            opacity: 0;
        }
    }
}