/* Volatility Class Lock CSS
 * Prevents volatility tags from changing appearance on hover or interaction
 * This CSS file ensures volatility elements maintain their visual state
 */

/* ULTRA HIGH SPECIFICITY - Override any hover effects */
html body #price-table tbody tr td.volatility-cell .volatility-tag,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag,
html body #price-table tbody tr td.volatility-cell .volatility-tag:hover,
html body table#price-table tbody tr td.volatility-cell .volatility-tag,
html body table#price-table tbody tr:hover td.volatility-cell .volatility-tag,
html body table#price-table tbody tr td.volatility-cell .volatility-tag:hover {
    /* Lock all visual properties */
    background: transparent !important;
    border: inherit !important;
    box-shadow: inherit !important;
    transform: none !important;
    filter: none !important;
    opacity: inherit !important;
    color: inherit !important;
    
    /* Prevent any animations or transitions */
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    
    /* Disable interactions */
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
}

/* Ensure pseudo-elements maintain their styling */
html body #price-table tbody tr td.volatility-cell .volatility-tag::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag:hover::after {
    /* Maintain pseudo-element properties */
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 8px !important;
    opacity: 0.4 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* STABLE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-stable::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-stable::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-stable:hover::after {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    border: 1px solid #3B82F6 !important;
}

/* MODERATE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-moderate::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-moderate::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-moderate:hover::after {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: 1px solid #60A5FA !important;
}

/* ACTIVE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-active::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-active::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-active:hover::after {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    border: 1px solid #06b6d4 !important;
}

/* VOLATILE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-volatile::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-volatile::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-volatile:hover::after {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    border: 1px solid #fb923c !important;
}

/* HIGHLY VOLATILE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-highly-volatile::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-highly-volatile::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-highly-volatile:hover::after {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border: 1px solid #f87171 !important;
}

/* EXTREMELY VOLATILE class locking */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-extremely-volatile::after,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-extremely-volatile::after,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-extremely-volatile:hover::after {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
    border: 1px solid #ef4444 !important;
    animation: volatility-pulse 2s ease-in-out infinite !important;
}

/* Lock the warning icon for extremely volatile */
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-extremely-volatile::before,
html body #price-table tbody tr:hover td.volatility-cell .volatility-tag.volatility-extremely-volatile::before,
html body #price-table tbody tr td.volatility-cell .volatility-tag.volatility-extremely-volatile:hover::before {
    content: '⚠️' !important;
    margin-right: 3px !important;
    font-size: 0.7em !important;
}

/* Ensure the pulse animation is preserved */
@keyframes volatility-pulse {
    0%, 100% { 
        opacity: 0.4;
    }
    50% { 
        opacity: 0.7;
    }
}

/* Override any conflicting table styles */
#price-table tr:hover .volatility-tag,
#price-table tbody tr:hover .volatility-tag,
table#price-table tr:hover .volatility-tag,
table#price-table tbody tr:hover .volatility-tag {
    /* Ensure no changes to volatility tags on table row hover */
    background: inherit !important;
    color: inherit !important;
    border: inherit !important;
    box-shadow: inherit !important;
    transform: none !important;
    filter: none !important;
}

/* Nuclear option: prevent any style changes to volatility elements */
.volatility-tag,
.volatility-tag *,
.volatility-stable,
.volatility-moderate,
.volatility-active,
.volatility-volatile,
.volatility-highly-volatile,
.volatility-extremely-volatile {
    /* Lock all properties */
    will-change: auto !important;
    transition: none !important;
    animation-play-state: running !important;
    pointer-events: none !important;
}

/* Ensure volatility cells don't interfere with each other */
.volatility-cell {
    isolation: isolate !important;
    contain: style !important;
}