/*!
 * Critical Responsive Layout Fix - Prevents DOM Loading Layout Flash
 * Specifically addresses 1020px breakpoint layout reversion issue
 * Loaded immediately to prevent race condition with deferred CSS
 */

/* CRITICAL: Prevent layout flash during CSS loading */
.css-loading * {
    transition: none !important;
    animation: none !important;
}

/* Core responsive fixes for the problematic 1020px zone */
@media (max-width: 1024px) {
    /* Market insights grid - CRITICAL responsive fix for proper 2-column layout */
    .insights-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Two equal columns */
        grid-gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Individual insight cards - ensure equal width */
    .insight-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important; /* Prevent grid overflow */
    }
    
    /* Multi-timeframe footer - Clean 2x4 Grid Layout */
    #multi-timeframe-footer {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Force full width on any flex containers inside footer */
    #multi-timeframe-footer > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Performance stats container - Fix the actual flex structure */
    .performance-stats {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
    }
    
    /* Each flex row (Line 1 and Line 2) */
    .performance-stats > div {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Individual stat items - make them equal width */
    .performance-stats .stat-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        margin: 0 !important;
        min-height: 69px !important;
        height: 69px !important;
        width: auto !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
    }
    
    /* Hide the dividers - we don't need them in the new layout */
    .performance-stats .stat-divider {
        display: none !important;
    }
    
    /* Stat labels and values typography */
    .performance-stats .stat-item .stat-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 2px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .performance-stats .stat-item .stat-value {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    /* Color coding for different stat types */
    
    /* Win Rate Percentages - Green/Orange/Red based on performance */
    .stat-value.win-rate-excellent {
        color: #10b981 !important; /* Green for 60%+ */
    }
    
    .stat-value.win-rate-good {
        color: #f59e0b !important; /* Orange for 40-59% */
    }
    
    .stat-value.win-rate-poor {
        color: #ef4444 !important; /* Red for under 40% */
    }
    
    /* Win-Loss Ratios - Green if more wins, Red if more losses */
    .stat-value.wins-positive {
        color: #10b981 !important; /* Green when wins > losses */
    }
    
    .stat-value.wins-negative {
        color: #ef4444 !important; /* Red when losses > wins */
    }
    
    .stat-value.wins-neutral {
        color: #64748b !important; /* Gray when equal or no data */
    }
    
    /* Active Opportunities - Green if active, White if none */
    .stat-value.active-opportunities {
        color: #10b981 !important; /* Green when > 0 */
    }
    
    .stat-value.active-none {
        color: #ffffff !important; /* White when 0 */
    }
    
    /* Neutral stats - Total Trades, Success Today */
    .stat-value.neutral {
        color: #ffffff !important; /* White for neutral stats */
    }
    
    /* Action buttons row */
    .action-buttons-row {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }
    
    /* Button containers in action row */
    .action-buttons-row .btn,
    .action-buttons-row button {
        width: 100% !important;
        margin: 5px 0 !important;
        max-width: 300px !important;
    }
}

/* Specific fixes for the exact 1020px problematic zone */
@media (min-width: 1020px) and (max-width: 1028px) {
    /* Emergency stabilization for this exact breakpoint range */
    .market-stats-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .stat-item {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    /* Switch to single column layout on mobile */
    .insights-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        grid-gap: 12px !important;
        padding: 0 10px !important;
    }
    
    /* All insight cards in single column */
    .insight-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile footer - keep 2x4 format but make smaller */
    .performance-stats > div {
        flex-direction: row !important;
        gap: 4px !important;
    }
    
    /* Smaller stat items on mobile - still 4 per row */
    .performance-stats .stat-item {
        min-height: 55px !important;
        height: 55px !important;
        padding: 4px 2px !important;
        margin-bottom: 0 !important;
        flex: 1 !important;
    }
    
    .performance-stats .stat-item .stat-label {
        font-size: 11px !important;
    }
    
    .performance-stats .stat-item .stat-value {
        font-size: 13px !important;
    }
    
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ensure touch targets are at least 44px */
    button, .btn, a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Prevent text zoom on iOS */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Tablet responsiveness for footer */
@media (max-width: 1024px) and (min-width: 769px) {
    .performance-stats {
        gap: 6px !important;
    }
    
    .performance-stats > div {
        gap: 6px !important;
    }
    
    .performance-stats .stat-item {
        min-height: 48px !important;
        padding: 7px 3px !important;
    }
    
    .performance-stats .stat-item .stat-label {
        font-size: 11px !important;
    }
    
    .performance-stats .stat-item .stat-value {
        font-size: 13px !important;
    }
}

/* Mobile screens below 600px - smaller font sizes for better readability */
@media (max-width: 600px) {
    #multi-timeframe-footer {
        padding: 10px 15px !important;
    }
    
    /* Reduce font sizes for mobile */
    #multi-timeframe-footer .stat-label {
        font-size: 10px !important;
    }
    
    #multi-timeframe-footer .stat-value {
        font-size: 13px !important;
    }
    
    #multi-timeframe-footer .stat-divider {
        font-size: 12px !important;
        margin: 0 3px !important;
    }
    
    #multi-timeframe-footer .last-updated {
        font-size: 9px !important;
    }
    
    .performance-stats {
        gap: 5px !important;
    }
    
    .performance-stats > div {
        gap: 4px !important;
    }
    
    .performance-stats .stat-item {
        margin: 2px 3px !important;
        min-height: 50px !important;
        height: 50px !important;
        padding: 4px 2px !important;
    }
}

/* Mid-small screens around 760px - FORCE 2x4 layout */
@media (max-width: 760px) and (min-width: 601px) {
    .performance-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .performance-stats > div {
        display: flex !important;
        flex-direction: row !important; /* CRITICAL: Horizontal layout */
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .performance-stats .stat-item {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: calc(25% - 4px) !important; /* Ensure 4 per row */
        min-height: 53px !important;
        height: 53px !important;
        padding: 5px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .performance-stats .stat-item .stat-label {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    
    .performance-stats .stat-item .stat-value {
        font-size: 12px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }
}

/* Very small screens - adjust footer further but MAINTAIN 2x4 grid */
@media (max-width: 480px) {
    #multi-timeframe-footer {
        padding: 8px 10px !important;
    }
    
    /* Even smaller fonts for very small screens */
    #multi-timeframe-footer .stat-label {
        font-size: 9px !important;
        line-height: 1.1 !important;
        margin-bottom: 1px !important;
    }
    
    #multi-timeframe-footer .stat-value {
        font-size: 11px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
    }
    
    #multi-timeframe-footer .stat-divider {
        font-size: 10px !important;
        margin: 0 2px !important;
    }
    
    #multi-timeframe-footer .last-updated {
        font-size: 8px !important;
    }
    
    .performance-stats {
        gap: 3px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .performance-stats > div {
        gap: 3px !important;
        display: flex !important;
        flex-direction: row !important; /* CRITICAL: Keep horizontal layout */
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    .performance-stats .stat-item {
        min-height: 45px !important;
        height: 45px !important;
        padding: 3px 1px !important;
        flex: 1 !important; /* Each item takes equal width */
        min-width: 0 !important; /* Allow shrinking */
        font-size: 8px !important;
    }
}

/* Layout containment to prevent reflow during updates */
.market-stats-container,
#multi-timeframe-footer {
    contain: layout style;
    transform: translateZ(0); /* Force GPU acceleration */
}
/* Performance stats: preserve original behavior - no GPU acceleration forcing */

/* Smooth transitions after CSS loading completes */
.css-loaded * {
    transition: all 0.2s ease-in-out;
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Enhanced Target Achievement & Stop Loss Visual Styling */

/* TARGET HIT (Green) - Full card overlay with opacity */
.achievement-success, .opportunity-achieved {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25)) !important;
    border-color: rgba(16, 185, 129, 0.8) !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), inset 0 0 50px rgba(16, 185, 129, 0.1) !important;
    position: relative !important;
}

.achievement-success::before, .opportunity-achieved::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0.12);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* STOP HIT (Red) - Full card overlay with opacity */  
.achievement-failure, .opportunity-stopped-out {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25)) !important;
    border-color: rgba(239, 68, 68, 0.8) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5), inset 0 0 50px rgba(239, 68, 68, 0.1) !important;
    position: relative !important;
}

.achievement-failure::before, .opportunity-stopped-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(239, 68, 68, 0.12);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Ensure content stays above overlay */
.achievement-success > *, .opportunity-achieved > *,
.achievement-failure > *, .opportunity-stopped-out > * {
    position: relative;
    z-index: 2;
}

/* Achievement pulse animation */
.achievement-pulse {
    animation: achievementPulse 2s ease-in-out 3;
}

@keyframes achievementPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

/* Timer status styling - enhanced for TARGET HIT/STOP HIT */
.timer-target-hit {
    color: #10b981 !important;
    font-weight: bold !important;
    background: rgba(16, 185, 129, 0.15) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.timer-stop-hit {
    color: #ef4444 !important;
    font-weight: bold !important;
    background: rgba(239, 68, 68, 0.15) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Remove price border styling - cleaner look */
.opportunity-current-price {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}