/* ═══════════════════════════════════════════════════════════════════
 * Center Content Fix
 * 
 * Problem: On tablet/landscape sizes (769-1200px), content inside the 
 * header box and paper trading widget is right-aligned (RTL space-between)
 * leaving big empty space on the left.
 * 
 * Solution: Center content within boxes when viewport is narrower than
 * desktop, but wider than mobile (the "tablet zone").
 * ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
 * Tablet zone: 769px - 1200px
 * Center content within header and paper trading boxes
 * ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1200px) {
    
    /* Header: center the title + DXY group */
    .header .header-content {
        justify-content: center !important;
        gap: 24px !important;
        flex-wrap: wrap;
    }
    
    /* Header title block: keep natural width */
    .header .header-title {
        flex: 0 0 auto;
    }
    
    /* DXY: center its content too */
    .header-dxy {
        align-items: center !important;
    }
    
    /* DXY value/changes: center horizontally */
    .header-dxy .header-dxy-value,
    .header-dxy .header-dxy-changes,
    .header-dxy .header-dxy-strength {
        justify-content: center !important;
        align-self: center !important;
    }
    
    /* Paper Trading: center its inner content */
    .header-paper {
        align-items: center !important;
    }
    
    .header-paper .header-paper-top,
    .header-paper .header-paper-bottom,
    .header-paper > * {
        width: 100%;
        justify-content: center !important;
    }
    
    /* Center the paper trading row of pairs */
    .header-paper .header-paper-pairs,
    .header-paper [class*="pairs-row"],
    .header-paper [class*="pair-list"] {
        display: flex;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }
    
    /* Center the trades/win-rate/floating row */
    .pt-summary-row {
        justify-content: center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
 * Larger tablets / smaller laptops: 1201-1500px
 * Just minor centering for cleanliness
 * ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1201px) and (max-width: 1500px) {
    
    /* Already centered via .container max-width: 1500px + margin: 0 auto */
    /* But ensure header contents don't have weird gaps */
    .header .header-content {
        gap: 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
 * Mobile (≤ 768px) - keep existing behavior, just ensure centering
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    
    /* Already covered by mobile_v2.css, but reinforce centering */
    .header .header-content {
        justify-content: center !important;
    }
}