/* Unified Background Styling for All Insight Cards */

/* Override inline styles with higher specificity */
body .market-insights .insights-grid .insight-card,
body .insight-card {
    background: rgba(31, 33, 40, 0.6) !important;
    background-image: none !important;
    background-color: rgba(31, 33, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* Override any existing background styles for specific cards */
.insight-card[data-card="sentiment"],
.insight-card[data-card="confidence"],
.insight-card[data-card="market-cap"],
.insight-card[data-card="volatility"],
.insight-card[data-card="defi-usage"],
.insight-card[data-card="network-activity"],
.insight-card[data-card="whale-activity"],
.insight-card[data-card="exchange-flows"],
.insight-card[data-card="futures-sentiment"],
.insight-card[data-card="health-score"] {
    background: rgba(31, 33, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure special cards also get the same treatment */
.insight-card.special-card {
    background: rgba(31, 33, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Remove any gradient backgrounds that might override */
.insight-card::before,
.insight-card::after {
    display: none !important;
}

/* Ensure hover states maintain the consistent background */
.insight-card:hover {
    background: rgba(31, 33, 40, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

/* Specific overrides for cards that might have inline styles */
.market-insights .insight-card {
    background: rgba(31, 33, 40, 0.6) !important;
}

/* Ensure text remains visible with the dark background */
.insight-card .card-title,
.insight-card .main-value,
.insight-card .stat-change,
.insight-card .metric-label,
.insight-card .metric-value,
.insight-card .card-value,
.insight-card .change-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Subtle inner glow for depth */
.insight-card {
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure progress bars and other elements remain visible */
.insight-card .progress-bar,
.insight-card .intensity-track,
.insight-card .metric-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Fix any potential z-index issues */
.insight-card {
    position: relative;
    z-index: 1;
}

/* Ensure the grid gap is visible with subtle separators */
.insights-grid {
    gap: 12px !important;
}

/* Add subtle animation on load */
@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insight-card {
    animation: fadeInCard 0.5s ease-out;
}

/* Ensure all card content is properly layered */
.insight-card > * {
    position: relative;
    z-index: 2;
}

/* Special styling for active/highlighted cards */
.insight-card.active,
.insight-card.highlighted {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.02) !important;
}

/* Ensure compatibility with existing themes */
.dark-theme .insight-card,
.light-theme .insight-card,
body .insight-card {
    background: rgba(31, 33, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
}

/* Override any background images */
.insight-card {
    background-image: none !important;
}

/* Ensure metric rows have proper contrast */
.insight-card .metric-row {
    background: rgba(255, 255, 255, 0.02);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 2px 0;
}

/* Subtle hover effect for interactive elements */
.insight-card .metric-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Ensure badges and labels are visible */
.insight-card .activity-label,
.insight-card .sentiment-tag,
.insight-card .badge {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
}

/* Fix any potential backdrop-filter issues on Safari */
@supports not (backdrop-filter: blur(10px)) {
    .insight-card {
        background: rgba(31, 33, 40, 0.9) !important;
    }
}