/* Responsive layout — drives layout decisions per data-layout attribute set on by responsive.js. Loaded as a separate stylesheet so it can be cached, versioned, and inspected independently of dashboard.css. Breakpoints (matching responsive.js classify()): xs : < 600 px stack everything vertically sm : < 960 px pair rows side-by-side, 1-2 cards per row md : < 1440 px full side-by-side, 2-3 cards per row lg : >=1440 px wide layout, 4+ cards, generous halves */ [data-layout] { transition: none; } /* ---------- xs (< 600px) ---------- */ [data-layout="xs"] .pair-row { flex-direction: column !important; } [data-layout="xs"] .live-half, [data-layout="xs"] .range-half, [data-layout="xs"] .strategy-half { flex: 1 1 100% !important; max-width: 100% !important; } [data-layout="xs"] .positions-grid-fluid { grid-template-columns: 1fr !important; } [data-layout="xs"] .acct-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } [data-layout="xs"] body { font-size: 11px !important; } /* ---------- sm (600 – 960) ---------- */ [data-layout="sm"] .pair-row { flex-direction: row !important; flex-wrap: wrap !important; } [data-layout="sm"] .live-half, [data-layout="sm"] .range-half, [data-layout="sm"] .strategy-half { flex: 1 1 280px !important; max-width: 100% !important; } [data-layout="sm"] .positions-grid-fluid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; } [data-layout="sm"] .acct-stats-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; } [data-layout="sm"] body { font-size: 12px !important; } /* ---------- md (960 – 1440) ---------- */ [data-layout="md"] .pair-row { flex-direction: row !important; flex-wrap: nowrap !important; } [data-layout="md"] .live-half, [data-layout="md"] .range-half, [data-layout="md"] .strategy-half { flex: 1 1 45% !important; max-width: 50% !important; } [data-layout="md"] .positions-grid-fluid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; } [data-layout="md"] .acct-stats-grid { grid-template-columns: repeat(4, 1fr) !important; } [data-layout="md"] body { font-size: 13px !important; } /* ---------- lg (>= 1440) ---------- */ [data-layout="lg"] .pair-row { flex-direction: row !important; flex-wrap: nowrap !important; } [data-layout="lg"] .live-half, [data-layout="lg"] .range-half, [data-layout="lg"] .strategy-half { flex: 1 1 45% !important; max-width: 50% !important; } [data-layout="lg"] .positions-grid-fluid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; } [data-layout="lg"] .acct-stats-grid { grid-template-columns: repeat(4, 1fr) !important; } [data-layout="lg"] body { font-size: 14px !important; } /* On wider screens the live-half had 45% and range-half 45%. Now that the live-grid is compact, give range-half more room so the chips column has breathing space. */ [data-layout="md"] .live-half { flex: 0 1 38% !important; max-width: 42% !important; } [data-layout="md"] .range-half { flex: 1 1 58% !important; max-width: 62% !important; } [data-layout="lg"] .live-half { flex: 0 1 38% !important; max-width: 42% !important; } [data-layout="lg"] .range-half { flex: 1 1 58% !important; max-width: 62% !important; }