/**
 * Enhanced tooltips with descriptions - Fixed version
 */

/* Base tooltip styling */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip content - High specificity */
.tooltip::before,
button.tooltip::before,
.tool-btn.tooltip::before,
.translate-btn.tooltip::before,
.advanced-btn.tooltip::before {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1f2937 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    max-width: 250px !important;
    text-align: center !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 8px !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
}

/* Tooltip arrow - High specificity */
.tooltip::after,
button.tooltip::after,
.tool-btn.tooltip::after,
.translate-btn.tooltip::after,
.advanced-btn.tooltip::after {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 5px solid transparent !important;
    border-top-color: #1f2937 !important;
    margin-bottom: 3px !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
}

/* Show tooltip on hover - High specificity */
.tooltip:hover::before,
.tooltip:hover::after,
button.tooltip:hover::before,
button.tooltip:hover::after,
.tool-btn.tooltip:hover::before,
.tool-btn.tooltip:hover::after,
.translate-btn.tooltip:hover::before,
.translate-btn.tooltip:hover::after,
.advanced-btn.tooltip:hover::before,
.advanced-btn.tooltip:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-2px) !important;
}

/* Keyboard shortcut tooltips */
.tooltip-shortcut::before {
    content: attr(data-tooltip) " (" attr(data-shortcut) ")";
    white-space: normal;
    max-width: 280px;
}

/* Long tooltips */
.tooltip-long::before {
    white-space: normal;
    max-width: 200px;
    text-align: left;
}

/* Fallback for tooltips without content */
.tooltip:not([data-tooltip])::before,
.tooltip[data-tooltip=""]::before {
    content: "Tooltip mangler";
    background: #dc2626;
    color: white;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .tooltip::before {
        background: #f8fafc;
        color: #1f2937;
    }
    
    .tooltip::after {
        border-top-color: #f8fafc;
    }
}

/* Disable on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
    .tooltip::before,
    .tooltip::after {
        display: none !important;
    }
}