/* ===== 响应式设计样式模块 ===== */

/* 回测报告响应式优化 */
@media (max-width: 1200px) {
    .report-details-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .summary-item {
        flex: 1 1 80px;
        min-width: 70px;
    }
    
    .summary-item .label {
        font-size: 12px;
    }
    
    .summary-item .value {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    #backtest-report-content {
        padding: 6px;
    }
    
    .report-summary {
        padding: 6px;
        margin-bottom: 6px;
    }
    
    .summary-item {
        flex: 1 1 60px;
        min-width: 60px;
        padding: 2px;
    }
    
    .summary-item .label {
        font-size: 12px;
    }

    .summary-item .value {
        font-size: 11px;
    }
    
    .report-chart, .trade-history-table {
        padding: 8px;
    }
    
    /* 回测结果表格响应式优化 - 移除重复样式，这些样式在workbench.css中已定义 */
    
    .report-chart h4, .trade-history-table h4 {
        font-size: 12px;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }
}

/* 响应式设计 - 简化版本，确保所有内容都可见 */

/* 大屏幕优化 - TradingView式紧凑布局 */
@media (min-width: 1400px) {
    .info-panel {
        width: 180px;
    }
    
    /* 为大屏幕优化，图表严格限制在父容器内 */
    .chart-container {
        height: 100%; /* 相对父容器高度，不使用绝对视口高度 */
        flex: 1;
    }
    
    .chart {
        height: 100%; /* 完全填充父容器 */
    }
    
    /* 确保底部面板在大屏幕上保持适当高度 */
    .bottom-panel {
        height: 350px;
        min-height: 350px;
    }
}

/* 中等屏幕 - 浏览器最大化优化 */
@media (max-width: 1399px) and (min-width: 1200px) {
    .info-panel {
        width: 160px;
    }
    
    .market-stats {
        display: none;
    }
    
    .toolbar h1 {
        font-size: 14px;
    }
    
    /* 浏览器最大化时的图表限制在父容器内 */
    .chart-container {
        height: 100%; /* 相对父容器高度 */
        flex: 1;
    }
    
    .chart {
        height: 100%; /* 完全填充父容器 */
    }
    
    .bottom-panel {
        height: 350px;
        min-height: 350px;
    }
}

/* 小屏幕笔记本 - 紧凑布局优化 */
@media (max-width: 1199px) and (min-width: 900px) {
    .info-panel {
        width: 140px;
        min-width: 140px;
        /* 置顶到工具栏下方 */
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        bottom: 350px;
        height: calc(100vh - 438px) !important; /* 减去顶部88px + 底部350px */
    }
    
    .bottom-panel {
        height: 350px; /* 使用新的高度 */
        min-height: 350px;
    }
    
    /* 笔记本屏幕的图表限制在父容器内 */
    .chart-container {
        height: 100%; /* 相对父容器高度 */
        flex: 1;
    }

    .chart {
        height: 100%; /* 完全填充父容器 */
    }
    
    .market-stats {
        display: none;
    }
    
    .toolbar h1 {
        font-size: 13px;
    }
    
    .timeframe-btn {
        padding: 3px 6px;
        font-size: 12px;
        min-width: 22px;
    }
    
    /* 压缩面板内容 */
    .stat-row .label,
    .orderbook-header,
    .trades-header {
        font-size: 12px;
    }
    
    .stat-row .value,
    .orderbook-row,
    .trade-item {
        font-size: 12px;
    }
    
    .panel-section h3 {
        font-size: 12px;
        height: 28px;
    }
}

/* 更小屏幕 */
@media (max-width: 899px) and (min-width: 768px) {
    .info-panel {
        width: 120px;
        min-width: 120px;
    }
    
    .bottom-panel {
        height: 28vh;
        min-height: 180px;
    }
    
    .market-stats,
    .trades-section {
        display: none;
    }
    
    .toolbar h1 {
        font-size: 12px;
    }
    
    .current-price .price {
        font-size: 14px;
    }
    
    .positions-section {
        min-height: 80px;
    }
    
    .orderbook-section {
        flex: 1;
    }
}

/* 平板和小设备 */
@media (max-width: 767px) {
    .main-layout {
        flex-direction: column;
    }
    
    .info-panel {
        width: 100%;
        height: 80px;
        min-height: 80px;
        border-left: none;
        border-top: 1px solid var(--border-color);
        flex-direction: row;
        overflow-x: auto;
    }
    
    .chart-section {
        border-right: none;
        flex: 1;
        min-height: 250px;
    }
    
    .bottom-panel {
        height: 25vh;
        min-height: 160px;
    }
    
    .toolbar-left {
        gap: 6px;
    }
    
    .toolbar h1 {
        font-size: 11px;
    }
    
    .market-stats {
        display: none;
    }
    
    .strategy-bar {
        padding: 0 8px;
    }
    
    .strategy-left, .strategy-right {
        gap: 6px;
    }
    
    /* 面板水平排列 */
    .panel-section {
        min-width: 120px;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
    }
    
    .trades-section,
    .positions-section {
        display: none;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .toolbar h1 {
        display: none;
    }
    
    .info-panel {
        height: 60px;
        min-height: 60px;
    }
    
    .bottom-panel {
        height: 22vh;
        min-height: 140px;
    }
    
    .chart-section {
        min-height: 200px;
    }
    
    .toolbar-left,
    .toolbar-right {
        gap: 4px;
    }
    
    .current-price .price {
        font-size: 12px;
    }
    
    .strategy-bar .menu-item {
        font-size: 12px;
    }
    
    .strategy-bar input {
        width: 50px;
        padding: 2px 4px;
        font-size: 12px;
    }
    
    .action-btn, .action-btn-live {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .panel-section {
        min-width: 100px;
    }
    
    .data-table th,
    .data-table td {
        padding: 2px 4px;
        font-size: 12px;
    }
}

/* 响应式优化 */
@media (max-width: 1199px) {
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .metric-item {
        padding: 4px;
    }
    
    .watchlist-section {
        max-height: 250px;
    }
    
    .large-trades-section {
        max-height: 150px;
    }
}

@media (max-width: 899px) {
    .watchlist-section,
    .funding-section,
    .metrics-section,
    .large-trades-section {
        display: none;
    }
}

@media (max-width: 767px) {
    .watchlist-header,
    .large-trades-header {
        font-size: 12px;
    }
    
    .watchlist-item,
    .large-trade-item {
        font-size: 12px;
        padding: 3px;
    }
    
    .funding-row {
        font-size: 12px;
    }
}

/* 面板响应式设计 - 确保所有断点都保持置顶效果 */
@media (max-width: 1599px) {
    .trading-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        left: 0 !important;
        width: 280px;
        min-width: 280px;
        height: calc(100vh - 88px) !important; /* 减去顶部工具栏高度 */
        z-index: 40;
    }

    .info-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        right: 0 !important;
        width: 300px;
        min-width: 300px;
        height: calc(100vh - 438px) !important; /* 减去顶部88px + 底部350px */
        z-index: 40;
    }
    
    .main-layout {
        margin-left: 280px !important;
        margin-right: 300px !important;
    }

    .wallet-address .address {
        max-width: 120px;
    }
}

@media (max-width: 1199px) {
    .trading-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        left: 0 !important;
        width: 260px;
        min-width: 260px;
        height: calc(100vh - 88px) !important; /* 减去顶部工具栏高度 */
        z-index: 40;
    }

    .info-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        right: 0 !important;
        width: 280px;
        min-width: 280px;
        height: calc(100vh - 438px) !important; /* 减去顶部88px + 底部350px */
        z-index: 40;
    }
    
    .main-layout {
        margin-left: 260px !important;
        margin-right: 280px !important;
    }

    .strategy-config-section {
        min-height: 250px;
    }

    .wallet-address .address {
        max-width: 100px;
    }

    .risk-controls {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .current-price-value {
        font-size: 18px;
    }

    .order-btn {
        padding: 10px 12px;
        font-size: 11px;
    }
}

@media (max-width: 899px) {
    .trading-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        left: 0 !important;
        width: 240px;
        min-width: 240px;
        height: calc(100vh - 88px) !important; /* 减去顶部工具栏高度 */
        z-index: 40;
    }

    .info-panel {
        position: fixed !important;
        top: 88px !important; /* 工具栏44px + 策略栏44px */
        right: 0 !important;
        width: 260px;
        min-width: 260px;
        height: calc(100vh - 438px) !important; /* 减去顶部88px + 底部350px */
        z-index: 40;
    }
    
    .main-layout {
        margin-left: 240px !important;
        margin-right: 260px !important;
    }

    .trading-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .active-orders-section,
    .btc-flow-section {
        max-height: 180px;
    }

    .watchlist-card {
        padding: 10px;
        margin-bottom: 6px;
    }

    .card-symbol {
        font-size: 12px;
    }

    .card-price {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .trading-panel,
    .info-panel {
        width: 100%;
        height: 30vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        overflow-y: auto;
    }

    .main-layout {
        flex-direction: column;
    }

    .chart-section {
        border-right: none;
        flex: 1;
        min-height: 40vh;
    }

    .trading-buttons {
        flex-direction: row;
        gap: 6px;
    }

    .trading-btn {
        flex: 1;
        padding: 6px 8px;
        font-size: 12px;
    }

    .orders-header,
    .flow-header {
        font-size: 12px;
    }

    .order-item,
    .flow-item {
        font-size: 12px;
        padding: 4px;
    }

    /* 订单面板移动端优化 */
    .order-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .order-btn {
        padding: 12px;
        font-size: 12px;
    }

    .quantity-presets {
        grid-template-columns: repeat(4, 1fr);
    }

    .watchlist-card {
        padding: 8px;
        margin-bottom: 4px;
    }

    .price-display-section {
        padding: 12px 8px;
    }

    .current-price-value {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .trading-panel,
    .info-panel {
        height: 25vh;
    }

    .chart-section {
        min-height: 50vh;
    }

    .form-group select,
    .form-group input {
        padding: 4px 6px;
        font-size: 12px;
    }

    .wallet-address .address {
        max-width: 80px;
        font-size: 12px;
    }

    .copy-btn {
        padding: 3px 4px;
        font-size: 12px;
    }

    .panel-section h3 {
        font-size: 12px;
        height: 28px;
    }

    .order-panel-header h3,
    .watchlist-header h3 {
        font-size: 12px;
    }

    .current-price-value {
        font-size: 14px;
    }

    .card-symbol {
        font-size: 11px;
    }

    .card-price {
        font-size: 12px;
    }

    .card-change {
        font-size: 12px;
    }

    .order-btn {
        padding: 10px;
        font-size: 11px;
    }
}

/* 响应式设计 */
@media (max-width: 1199px) {
    .config-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .strategy-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px;
    }
    
    .optimization-content {
        flex-direction: column;
    }
    
    .optimization-config {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
    }
}

@media (max-width: 899px) {
    .editor-content {
        flex-direction: column;
    }
    
    .code-editor {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        min-height: 200px;
    }
    
    .code-snippets {
        min-height: 150px;
    }
    
    .strategy-grid {
        grid-template-columns: 1fr;
        padding: 8px;
    }
    
    .range-inputs {
        grid-template-columns: 1fr;
        gap: 4px;
        margin: 0;
        padding: 0;
    }
    
    .input-with-unit {
        margin: 0;
        padding: 0;
    }
    
    .range-label {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .editor-toolbar,
    .library-toolbar,
    .config-header,
    .optimization-header,
    .log-header {
        height: 32px;
        padding: 0 8px;
    }
    
    .editor-toolbar-left,
    .search-filters,
    .log-controls {
        gap: 6px;
    }
    
    .strategy-card {
        padding: 8px;
    }
    
    .config-section {
        padding: 8px;
    }
    
    .log-entry {
        flex-direction: column;
        gap: 4px;
        padding: 6px 0;
    }
    
    .log-timestamp,
    .log-level {
        width: auto;
    }
}

@media (max-width: 480px) {
    .config-content,
    .parameter-ranges,
    .results-grid {
        padding: 8px;
    }
    
    .strategy-actions {
        flex-direction: column;
        gap: 4px;
    }
    
    .method-options {
        gap: 4px;
    }
    
    .log-stats {
        flex-direction: column;
        gap: 4px;
    }
}