/* RedTeam.Blue */

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-badge {
    @apply px-3 py-1 rounded-full text-xs font-semibold;
}

.category-network-security {
    @apply bg-red-500/20 text-red-400 border border-red-500/30;
}

.category-network-analysis {
    @apply bg-purple-500/20 text-purple-400 border border-purple-500/30;
}

.category-penetration-testing {
    @apply bg-blue-500/20 text-blue-400 border border-blue-500/30;
}

.category-web-security {
    @apply bg-indigo-500/20 text-indigo-400 border border-indigo-500/30;
}

.category-vulnerability-assessment {
    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
}

.category-forensics {
    @apply bg-green-500/20 text-green-400 border border-green-500/30;
}

.category-malware-analysis {
    @apply bg-pink-500/20 text-pink-400 border border-pink-500/30;
}

.category-cryptography {
    @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30;
}

.category-social-engineering {
    @apply bg-orange-500/20 text-orange-400 border border-orange-500/30;
}

.category-mobile-security {
    @apply bg-teal-500/20 text-teal-400 border border-teal-500/30;
}

.category-cloud-security {
    @apply bg-sky-500/20 text-sky-400 border border-sky-500/30;
}

.category-osint {
    @apply bg-violet-500/20 text-violet-400 border border-violet-500/30;
}

.category-reverse-engineering {
    @apply bg-rose-500/20 text-rose-400 border border-rose-500/30;
}

.category-wireless-security {
    @apply bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
}

.category-database-security {
    @apply bg-amber-500/20 text-amber-400 border border-amber-500/30;
}

.category-default {
    @apply bg-gray-500/20 text-gray-400 border border-gray-500/30;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc2626, #2563eb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ef4444, #3b82f6);
}

/* Animações */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Sidebar responsivo */
@media (max-width: 1023px) {
    #sidebar {
        top: 73px; /* Altura do header */
    }
}

/* Transições suaves */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-2px);
}

/* Focus states */
.focus-ring:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #3b82f6;
}

// CSS para animação de fade out e estilo de favoritos
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeOut {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.95); }
    }
    
    /* Base do botão favorito */
    .favorite-btn {
        background-color: transparent;
        border: none;
        color: #9ca3af; /* text-gray-400 */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Wrapper do ícone - sem contorno */
    .favorite-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    /* Estado NÃO FAVORITADO - apenas ícone laranja */
    .favorite-btn.not-favorited .favorite-icon {
        color: #f97316; /* text-orange-500 */
        font-size: 25px; /* Ícone maior */
    }
    
    .favorite-btn.not-favorited .favorite-text {
        color: #9ca3af; /* text-gray-400 */
    }
    
    /* Hover do não favoritado */
    .favorite-btn.not-favorited:hover .favorite-icon {
        color: #ea580c; /* Laranja mais escuro */
        transform: scale(1.1); /* Efeito de aumento no hover */
    }
    
    .favorite-btn.not-favorited:hover .favorite-text {
        color: #f97316;
    }
    
    /* Estado FAVORITADO - background laranja completo */
    .favorite-btn.favorited {
        background: linear-gradient(to right, #f97316, #ea580c);
        color: white;
        border-radius: 8px;
    }
    
    .favorite-btn.favorited .favorite-icon {
        color: white;
        font-size: 16px; /* Ícone maior */
    }
    
    .favorite-btn.favorited .favorite-text {
        color: white;
    }
    
    /* Hover do favoritado */
    .favorite-btn.favorited:hover {
        background: linear-gradient(to right, #ea580c, #c2410c);
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
    }
    
    .favorite-btn.favorited:hover .favorite-icon {
        transform: scale(1.1); /* Efeito de aumento no hover */
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
`;
document.head.appendChild(style);