/* Multi-Timeframe Price Overflow Fix */
/* Fixes text overflow for tokens with long decimal prices on screens above 600px */

/* Fix grid items to allow shrinking below content size */
.multi-timeframe-opportunity-item .stop-loss,
.multi-timeframe-opportunity-item .buy-price,
.multi-timeframe-opportunity-item .sell-target {
    min-width: 0 !important; /* Allow shrinking below content width */
    overflow: hidden !important; /* Prevent overflow */
}

/* Ensure price values can wrap if needed */
.multi-timeframe-opportunity-item .detail-value {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Override font-size-standardization.css with reduced sizes */
/* Base size for all screens */
.multi-timeframe-opportunity-item .detail-value,
.multi-timeframe-opportunity-item .stop-loss .detail-value,
.multi-timeframe-opportunity-item .buy-price .detail-value,
.multi-timeframe-opportunity-item .sell-target .detail-value,
.price-row .detail-value {
    font-size: 13px !important; /* Reduced from 15px baseline */
}

/* Tablet and desktop (769px+) */
@media (min-width: 769px) {
    .multi-timeframe-opportunity-item .detail-value,
    .multi-timeframe-opportunity-item .stop-loss .detail-value,
    .multi-timeframe-opportunity-item .buy-price .detail-value,
    .multi-timeframe-opportunity-item .sell-target .detail-value,
    .price-row .detail-value {
        font-size: 13px !important; /* Consistent 13px for tablet/desktop */
    }
}

/* Large desktop (1200px+) */
@media (min-width: 1200px) {
    .multi-timeframe-opportunity-item .detail-value,
    .multi-timeframe-opportunity-item .stop-loss .detail-value,
    .multi-timeframe-opportunity-item .buy-price .detail-value,
    .multi-timeframe-opportunity-item .sell-target .detail-value,
    .price-row .detail-value {
        font-size: 14px !important; /* Slightly larger on big screens */
    }
}

/* Reduce percentage font size proportionally to match smaller price values */
@media (min-width: 600px) and (max-width: 900px) {
    .multi-timeframe-opportunity-item .detail-percentage {
        font-size: 10px !important;
    }
}

@media (min-width: 900px) {
    .multi-timeframe-opportunity-item .detail-percentage {
        font-size: 11px !important;
    }
}