/* ============================================
   Responsive Design for Mobile
   ============================================ */

@media (max-width: 1024px) {
    .sidebar-left { width: 240px; min-width: 240px; }
    .sidebar-right { width: 260px; min-width: 260px; }
    .timeframe-selector { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }

    .top-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 6px 8px;
        gap: 6px;
    }

    .top-bar-left { order: 1; flex: 1; min-width: 0; }
    .top-bar-center { order: 3; flex: 1 1 100%; justify-content: center; }
    .top-bar-right { order: 2; flex: 0 0 auto; }

    .timeframe-selector {
        display: none;
    }

    .instrument-selector .btn-instrument span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

    .account-info { display: none; }

    .main-layout {
        position: relative;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 600;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar-right {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .chart-area { width: 100%; }

    .bottom-panel { height: 150px; }

    .price { font-size: 14px; }

    /* Mobile timeframe bar */
    .mobile-tf-bar {
        display: flex !important;
        gap: 2px;
        padding: 4px 8px;
        overflow-x: auto;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
    }

    .btn-trade {
        padding: 14px 8px;
    }

    .trade-label { font-size: 16px; }
}

@media (max-width: 480px) {
    .login-container { padding: 24px 16px; }
    .login-logo h1 { font-size: 20px; }
    .regime-badge span { display: none; }
    .connection-status .broker-label { display: none; }
    .ping { display: none; }
}