/* ECharts数据可视化交互平台 - 响应式样式文件 */

/* 大屏幕设备 (1200px以上) */
@media (min-width: 1200px) {
    main {
        grid-template-columns: 1fr 350px;
        gap: 2.5rem;
        padding: 2.5rem;
    }
    
    .chart-wrapper {
        height: 550px;
    }
}

/* 中等屏幕设备 (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    main {
        grid-template-columns: 1fr 300px;
        gap: 2rem;
        padding: 2rem;
    }
    
    .chart-wrapper {
        height: 500px;
    }
}

/* 平板设备 (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    main {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    aside {
        order: -1;
        margin-bottom: 1.5rem;
    }
    
    .chart-wrapper {
        height: 450px;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .chart-controls {
        width: 100%;
        justify-content: center;
    }
    
    nav ul {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

/* 手机设备 (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    main {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    aside {
        order: -1;
        margin-bottom: 1rem;
    }
    
    .chart-wrapper {
        height: 400px;
        padding: 1rem;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .chart-header h2 {
        font-size: 1.5rem;
    }
    
    .chart-controls {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .chart-controls button {
        width: 100%;
    }
    
    header {
        padding: 1.5rem;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    nav {
        padding: 0.8rem;
    }
    
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    
    nav li {
        margin: 0.3rem;
        width: 100%;
    }
    
    nav a {
        text-align: center;
        padding: 0.8rem;
    }
    
    .data-controls {
        flex-direction: column;
    }
    
    .data-controls button {
        width: 100%;
    }
}

/* 小手机设备 (575px以下) */
@media (max-width: 575px) {
    main {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 0.8rem;
    }
    
    aside {
        order: -1;
        margin-bottom: 0.8rem;
        padding: 1.5rem;
    }
    
    #chart-container,
    #data-panel {
        padding: 1.5rem;
    }
    
    .chart-wrapper {
        height: 350px;
        padding: 1rem;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
    }
    
    .chart-header h2 {
        font-size: 1.3rem;
    }
    
    .chart-controls {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .chart-controls button {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }
    
    header {
        padding: 1rem;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    header p {
        font-size: 1rem;
    }
    
    nav {
        padding: 0.5rem;
    }
    
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    
    nav li {
        margin: 0.2rem;
        width: 100%;
    }
    
    nav a {
        text-align: center;
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .data-table-container {
        max-height: 250px;
    }
    
    #data-table th,
    #data-table td {
        padding: 0.7rem;
        font-size: 0.9rem;
    }
    
    .data-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .data-controls button {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }
    
    .option-group {
        margin-bottom: 1rem;
    }
    
    .option-group label {
        font-size: 0.9rem;
    }
    
    .option-group select,
    .option-group input[type="range"] {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    footer {
        padding: 1.5rem;
    }
    
    footer p {
        font-size: 1rem;
    }
}

/* 横屏模式优化 */
@media (max-height: 600px) and (orientation: landscape) {
    .chart-wrapper {
        height: 300px;
    }
    
    main {
        padding: 1rem;
    }
    
    #chart-container,
    #data-panel,
    aside {
        padding: 1rem;
    }
}

/* 高分辨率屏幕优化 */
@media (min-resolution: 192dpi) {
    .chart-wrapper {
        border-width: 1px;
    }
    
    #data-table th,
    #data-table td {
        border-bottom-width: 0.5px;
    }
}

/* 打印样式 */
@media print {
    nav,
    .chart-controls,
    .data-controls,
    aside {
        display: none;
    }
    
    main {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .chart-wrapper {
        height: 400px;
        border: 1px solid #000;
    }
    
    body {
        background: white;
    }
    
    #chart-container,
    #data-panel {
        background: white;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}