/* ═══════════════════════════════════════════════════════════════════
 * Desktop Header Layout Fix
 *
 * Problem: header-content used `flex-wrap: wrap + justify-content: space-between`
 * which causes the Paper Trading card to wrap to a new row, leaving a huge
 * empty gap on the first row.
 *
 * Fix: 3-column grid (≥769px) with explicit ordering and proper alignment.
 * Mobile (≤768px) keeps the simplified single-pill layout from mobile.css.
 *
 *  RTL visual order (right → left):
 *      [ Title + logo ]   [ DXY block ]   [ Paper Trading ]
 * ═══════════════════════════════════════════════════════════════════ */


/* Apply only on tablets / desktop */
@media (min-width: 769px) {

    .header-content {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) minmax(360px, auto) minmax(280px, 1fr);
        align-items: center;
        gap: 20px !important;
        flex-wrap: nowrap !important; /* override the original wrap */
    }

    /* Order: title first (rightmost in RTL), DXY middle, Paper last (leftmost in RTL) */
    .header-title  { justify-self: start; }   /* sits in its own cell */
    .header-dxy    { justify-self: center; }
    .header-paper  { justify-self: stretch; width: 100%; }

    /* Trim DXY footprint so it doesn't dominate the row */
    .header-dxy {
        max-width: 100%;
    }

    /* Make Paper card a proper inline pill, not a tall block */
    .header-paper {
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 10px 14px !important;
        flex-wrap: wrap;
    }

    .header-paper-top {
        flex-direction: row !important;
        gap: 6px !important;
        flex: 0 0 auto;
    }

    .header-paper-equity {
        flex: 0 0 auto;
        gap: 6px !important;
    }

    /* Positions row stays compact */
    .header-paper-positions {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .header-paper-empty {
        font-size: 0.78rem;
        color: var(--text-muted);
    }

    /* Stat strip below — keep tight */
    .header-paper-footer {
        flex: 0 0 auto;
        gap: 14px !important;
    }
}


/* On narrower desktops (≤1280px) collapse to 2 columns: title+paper above, DXY below.
   This prevents the cramped middle column when the DXY pairs grid is wide. */
@media (min-width: 769px) and (max-width: 1280px) {

    .header-content {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: "title paper" "dxy dxy" !important;
        row-gap: 12px !important;
    }

    .header-title  { grid-area: title; }
    .header-dxy    { grid-area: dxy; justify-self: stretch; }
    .header-paper  { grid-area: paper; }
}