/* ============================================================================
   SISTEMA DE NOTIFICAÇÕES - MOBILE-FIRST & MODERN
   ============================================================================
   Toast notifications otimizadas para mobile e desktop
   ============================================================================ */

/* Container Principal da Notificação */
#notification {
    position: fixed;
    bottom: -100px; /* Começa escondido */
    left: 50%;
    transform: translateX(-50%);
    
    /* Layout */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    min-width: 280px;
    max-width: 90vw;
    
    /* Design Moderno */
    background: linear-gradient(135deg, 
                rgba(26, 26, 26, 0.98), 
                rgba(18, 18, 18, 0.98));
    border: 1px solid rgba(230, 126, 34, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(230, 126, 34, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* Animação e Transição */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: 999999; /* Acima de tudo */
    
    /* Backdrop Blur para modernidade */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Safe area para iOS */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Estado Ativo (visível) */
#notification.show {
    bottom: 2rem;
    opacity: 1;
    animation: slideUpBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animação de Entrada */
@keyframes slideUpBounce {
    0% {
        bottom: -100px;
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
    60% {
        bottom: 2.2rem;
        transform: translateX(-50%) scale(1.02);
    }
    100% {
        bottom: 2rem;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* Ícone da Notificação */
#notification-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    
    /* Se for imagem */
    display: flex;
    align-items: center;
    justify-content: center;
}

#notification-icon img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

/* Texto da Notificação */
#notification-text {
    font-family: var(--font-principal, 'Roboto', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: #f0f0f0;
    line-height: 1.4;
    flex: 1;
    text-align: left;
    word-wrap: break-word;
}

/* Variantes de Cores (opcional, via classes) */
#notification.success {
    border-color: rgba(46, 204, 113, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(46, 204, 113, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#notification.error {
    border-color: rgba(231, 76, 60, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(231, 76, 60, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#notification.warning {
    border-color: rgba(241, 196, 15, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(241, 196, 15, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#notification.info {
    border-color: rgba(52, 152, 219, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(52, 152, 219, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

/* Smartphones (portrait) */
@media (max-width: 480px) {
    #notification {
        min-width: 85vw;
        max-width: 90vw;
        padding: 0.875rem 1.25rem;
        bottom: -100px;
        border-radius: 10px;
    }
    
    #notification.show {
        bottom: 1.5rem; /* Mais próximo do fundo em mobile */
    }
    
    @keyframes slideUpBounce {
        0% {
            bottom: -100px;
            opacity: 0;
            transform: translateX(-50%) scale(0.9);
        }
        60% {
            bottom: 1.7rem;
            transform: translateX(-50%) scale(1.02);
        }
        100% {
            bottom: 1.5rem;
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
    }
    
    #notification-icon {
        font-size: 1.25rem;
    }
    
    #notification-text {
        font-size: 0.9rem;
    }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    #notification {
        min-width: 350px;
        max-width: 80vw;
    }
}

/* Desktop */
@media (min-width: 769px) {
    #notification {
        min-width: 380px;
        max-width: 500px;
    }
    
    /* Hover effect no desktop (para quando tiver botão de fechar) */
    #notification:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7),
                    0 0 25px rgba(230, 126, 34, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* ============================================================================
   LANDSCAPE MODE (mobile)
   ============================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    #notification {
        bottom: -80px;
        padding: 0.75rem 1rem;
    }
    
    #notification.show {
        bottom: 1rem;
    }
    
    #notification-icon {
        font-size: 1.1rem;
    }
    
    #notification-text {
        font-size: 0.85rem;
    }
}

/* ============================================================================
   DARK MODE ADJUSTMENTS (se implementado)
   ============================================================================ */

[data-theme="light"] #notification {
    background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.98), 
                rgba(245, 245, 245, 0.98));
    border-color: rgba(230, 126, 34, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
                0 0 20px rgba(230, 126, 34, 0.15),
                inset 0 1px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="light"] #notification-text {
    color: #2c3e50;
}

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

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    #notification {
        transition: opacity 0.2s ease, bottom 0.2s ease;
        animation: none !important;
    }
    
    #notification.show {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    #notification {
        border-width: 2px;
    }
}

/* ============================================================================
   PRINT (esconde em impressão)
   ============================================================================ */

@media print {
    #notification {
        display: none !important;
    }
}

/* ============================================================================
   VARIAÇÕES ESPECIAIS (se necessário)
   ============================================================================ */

/* Notificação de Loading (durabilidade maior) */
#notification.loading {
    border-color: rgba(52, 152, 219, 0.5);
}

#notification.loading #notification-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Notificação Persistente (não auto-hide) */
#notification.persistent {
    /* Poderia adicionar botão de fechar */
    cursor: pointer;
}

/* ============================================================================
   TOUCH FEEDBACK
   ============================================================================ */

#notification {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Swipe to dismiss (futuro enhancement) */
#notification.swiping {
    transition: transform 0.1s ease;
}

/* ============================================================================
   NOTAS DE IMPLEMENTAÇÃO
   ============================================================================
   
   1. USAR:
      App.showNotification("Mensagem", "🎉")
   
   2. CLASSES OPCIONAIS:
      - .success → Verde
      - .error → Vermelho
      - .warning → Amarelo
      - .info → Azul
      - .loading → Com spinner
   
   3. MOBILE-FIRST:
      - Touch-friendly (safe areas)
      - Responsivo
      - Animações suaves
      - Leve e performático
   
   4. ACESSIBILIDADE:
      - Respects reduced motion
      - High contrast support
      - Readable font size
   
   ============================================================================ */