/**
 * Simple Tooltip Styles
 * Estilos simples e robustos para o sistema de tooltip
 */

/* Tooltip Container */
.modern-tooltip {
    position: fixed;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    min-width: 280px;
    max-width: 320px;
}

/* Tooltip Ativo */
.modern-tooltip.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Tooltip Content */
.tooltip-content {
    background: #f9fafb; /* bg-gray-50 */
    color: #111827; /* text-gray-900 */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1rem; /* p-4 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

/* Dark mode */
.dark .tooltip-content {
    background: #374151; /* bg-gray-700 */
    color: #f9fafb; /* text-gray-100 */
    border-color: #4b5563; /* border-gray-600 */
}

/* Tooltip Arrow - Removido */

/* Tooltip Header */
.tooltip-header {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0.75rem; /* mb-3 */
    padding-bottom: 0.5rem; /* pb-2 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

/* Dark mode header */
.dark .tooltip-header {
    color: #f9fafb; /* text-gray-100 */
    border-color: #4b5563; /* border-gray-600 */
}

/* Tags Grid */
.tooltip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem; /* gap-1.5 */
    max-height: 200px;
    overflow-y: auto;
}

/* Tag Styles */
.tooltip-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid;
    transition: all 0.2s ease-in-out;
}

/* Tag Color Variants */
.tooltip-tag.pink {
    background: #fdf2f8; /* bg-pink-50 */
    color: #be185d; /* text-pink-700 */
    border: 1px solid #fce7f3; /* border-pink-200 */
}

/* Dark mode tag */
.dark .tooltip-tag.pink {
    background: rgba(190, 24, 93, 0.3); /* bg-pink-900/30 */
    color: #f9a8d4; /* text-pink-300 */
    border-color: #be185d; /* border-pink-700 */
}

.tooltip-tag.blue {
    @apply bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700;
}

.tooltip-tag.green {
    @apply bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700;
}

.tooltip-tag.purple {
    @apply bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700;
}

.tooltip-tag.yellow {
    @apply bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700;
}

.tooltip-tag.indigo {
    @apply bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border-indigo-200 dark:border-indigo-700;
}

.tooltip-tag.red {
    @apply bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-700;
}

.tooltip-tag.orange {
    @apply bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-700;
}

/* Trigger Button */
.tooltip-trigger {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tooltip-trigger:hover {
    transform: translateY(-1px);
}

.tooltip-trigger.tooltip-active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .modern-tooltip {
        min-width: 260px;
        max-width: 300px;
    }
    
    .tooltip-content {
        padding: 0.875rem; /* p-3.5 */
    }
    
    .tooltip-tags {
        max-height: 150px;
    }
}

/* Scrollbar styling for tooltip tags */
.tooltip-tags::-webkit-scrollbar {
    width: 4px;
}

.tooltip-tags::-webkit-scrollbar-track {
    background: transparent;
}

.tooltip-tags::-webkit-scrollbar-thumb {
    background: rgb(107 114 128); /* gray-500 */
    border-radius: 2px;
}

.dark .tooltip-tags::-webkit-scrollbar-thumb {
    background: rgb(156 163 175); /* gray-400 */
}