/* Кастомные тултипы */
.custom-tooltip {
    position: fixed;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    color: var(--color-text);
    font-size: 0.85em;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    max-width: 300px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 
                0 0 0 1px rgba(212, 165, 116, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    animation: tooltipFadeIn 0.2s ease-out;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.custom-tooltip.hidden {
    display: none;
}

.custom-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-accent);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.98);
}

@keyframes tooltipFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(6px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Стилизация элементов с тултипами */
[title], [data-tooltip] {
    cursor: help;
}

/* Улучшенный вид для stat-compact с тултипами */
.stat-compact[title]:hover,
.stat-compact[data-tooltip]:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--color-accent-bright);
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.25);
}