/**
 * FIX per Planetary Widget - Risolve problema tooltip
 * File: static/css/planetary-widget-fix.css
 * 
 * Questo file risolve il problema dei tooltip che non si mostrano al hover
 * ma appaiono solo al mouseout
 */

/* ===== RESET TOOLTIP SISTEMA ===== */

/* Rimuovi tutti i conflitti di z-index sui tooltip */
.planet-tooltip {
    position: absolute !important;
    bottom: calc(100% + 15px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: white !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
    z-index: 999999 !important; /* Z-index molto alto */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 200px !important;
    min-width: 150px !important;
}

/* Tooltip visibile al hover - FIX PRINCIPALE */
.planet-marker:hover .planet-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-5px) !important;
    z-index: 999999 !important;
}

/* Assicura che il planet-marker non interferisca */
.planet-marker {
    position: absolute !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: z-index 0.1s ease !important;
}

/* Quando in hover, il pianeta ha priorità ma sotto i tooltip */
.planet-marker:hover {
    z-index: 500 !important;
}

/* Il planet-body non deve bloccare gli eventi */
.planet-body {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: var(--planet-color) !important;
    pointer-events: auto !important; /* Assicura che riceva gli eventi mouse */
    transition: all 0.3s ease !important;
}

/* ===== FIX COLLISION SYSTEM ===== */

/* Disabilita temporaneamente il sistema di collision detection se causa problemi */
.planet-marker.collision-detected {
    /* Rimuovi animazioni che potrebbero interferire */
    animation: none !important;
}

/* Posizionamenti alternativi più semplici */
.planet-marker.tooltip-top .planet-tooltip {
    bottom: calc(100% + 20px) !important;
    top: auto !important;
}

.planet-marker.tooltip-bottom .planet-tooltip {
    top: calc(100% + 20px) !important;
    bottom: auto !important;
}

.planet-marker.tooltip-left .planet-tooltip {
    left: auto !important;
    right: calc(100% + 15px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

.planet-marker.tooltip-right .planet-tooltip {
    left: calc(100% + 15px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* ===== FIX RESPONSIVE ===== */

@media (max-width: 768px) {
    .planet-tooltip {
        font-size: 0.8rem !important;
        padding: 0.6rem !important;
        max-width: 180px !important;
        min-width: 120px !important;
    }
    
    .planet-marker:hover .planet-tooltip {
        transform: translateX(-50%) translateY(-3px) !important;
    }
}

@media (max-width: 480px) {
    .planet-tooltip {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
        max-width: 150px !important;
        min-width: 100px !important;
    }
}

/* ===== FIX CONTENUTO TOOLTIP ===== */

.tooltip-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
}

.tooltip-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
}

.tooltip-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    font-size: 0.85em !important;
}

.tooltip-row span:first-child {
    opacity: 0.8 !important;
    font-weight: 400 !important;
}

.tooltip-row span:last-child {
    font-weight: 600 !important;
    color: #e1d5f7 !important;
}

.retro-badge {
    background: #ff5252 !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
}

/* ===== FIX SISTEMA HOVER GLOBALE ===== */

/* Assicura che non ci siano elementi che bloccano il hover */
.planetary-wheel {
    position: relative !important;
    overflow: visible !important;
}

.planets-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* Importante: non blocca gli eventi */
}

/* Solo i pianeti ricevono eventi mouse */
.planet-marker {
    pointer-events: auto !important;
}

/* Il ring zodiacale non deve interferire */
.zodiac-ring,
.zodiac-segments,
.zodiac-segment {
    pointer-events: none !important;
}

/* Il centro del sistema non deve interferire */
.system-center {
    pointer-events: none !important;
}

/* ===== FIX ASPETTI SVG ===== */

/* L'overlay degli aspetti non deve interferire */
.aspects-overlay {
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ===== DEBUG HELPERS (rimuovi in produzione) ===== */

/* Uncomment queste righe per debug visivo
.planet-marker {
    border: 2px solid red !important;
}

.planet-tooltip {
    border: 2px solid yellow !important;
}

.planet-marker:hover {
    border: 2px solid green !important;
}
*/

/* ===== FIX PRESTAZIONI ===== */

/* Ottimizza le transizioni per evitare conflitti */
.planet-marker,
.planet-tooltip {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ===== FIX ACCESSIBILITÀ ===== */

/* Assicura che i tooltip siano accessibili via tastiera */
.planet-marker:focus .planet-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-5px) !important;
}

.planet-marker:focus {
    outline: 2px solid #ff9e44 !important;
    outline-offset: 2px !important;
}

/* ===== FIX PER TEMA SCURO ===== */

.planetary-widget[data-theme="cosmic"] .planet-tooltip {
    background: rgba(0, 0, 0, 0.95) !important;
    color: white !important;
}

.planetary-widget[data-theme="minimal"] .planet-tooltip {
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
}

.planetary-widget[data-theme="elegant"] .planet-tooltip {
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
}

/* ===== FALLBACK PER BROWSER VECCHI ===== */

/* Per browser che non supportano backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .planet-tooltip {
        background: rgba(0, 0, 0, 0.9) !important;
    }
}

/* ===== FIX COLLISION DETECTION ===== */

/* Semplifica il sistema di collision detection */
.planet-marker.tooltip-top .planet-tooltip,
.planet-marker.tooltip-bottom .planet-tooltip,
.planet-marker.tooltip-left .planet-tooltip,
.planet-marker.tooltip-right .planet-tooltip {
    transition: all 0.2s ease !important;
}

/* Assicura che tutti i tooltip abbiano la stessa priorità di z-index */
.planet-marker.tooltip-top:hover .planet-tooltip,
.planet-marker.tooltip-bottom:hover .planet-tooltip,
.planet-marker.tooltip-left:hover .planet-tooltip,
.planet-marker.tooltip-right:hover .planet-tooltip {
    z-index: 999999 !important;
}

/* ===== FIX FINALE - FORZA VISUALIZZAZIONE ===== */

/* Assicura che i tooltip siano sempre visibili al hover */
.planetary-widget .planet-marker:hover .planet-tooltip,
.planetary-widget .planet-marker:focus .planet-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 999999 !important;
}