/**
 * 磁检测仪器网页版 - 响应式样式
 * 适配不同屏幕尺寸和设备
 */

/* ==================== 超大屏幕 (1920px+) ==================== */
@media (min-width: 1920px) {
    .device-container {
        max-width: 1600px;
    }
    
    .main-screen {
        width: 1200px;
        height: 800px;
    }
    
    .waveform-canvas {
        width: 100%;
        height: 600px;
    }
}

/* ==================== 大屏幕 (1440px - 1919px) ==================== */
@media (min-width: 1440px) and (max-width: 1919px) {
    .device-container {
        max-width: 1400px;
    }
}

/* ==================== 标准桌面 (1024px - 1439px) ==================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    .device-container {
        max-width: 1200px;
    }
    
    .side-btn {
        width: 100px;
        height: 50px;
        font-size: 16px;
    }
    
    .rotary-knob {
        width: 70px;
        height: 70px;
    }
}

/* ==================== 平板横屏 (768px - 1023px) ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .device-container {
        max-width: 100%;
        margin: 10px;
    }
    
    .main-screen {
        width: calc(100% - 40px);
        height: 500px;
    }
    
    .left-buttons,
    .right-buttons {
        gap: 10px;
    }
    
    .side-btn {
        width: 80px;
        height: 45px;
        font-size: 14px;
    }
    
    .data-table {
        font-size: 10px;
    }
    
    .menu-tree {
        width: 150px;
    }
    
    .submenu {
        width: 160px;
    }
    
    .rotary-knob {
        width: 60px;
        height: 60px;
        border-width: 4px;
    }
    
    /* 简化边角装饰 */
    .corner-decoration {
        width: 100px;
        height: 100px;
    }
}

/* ==================== 平板竖屏 (481px - 767px) ==================== */
@media (min-width: 481px) and (max-width: 767px) {
    body {
        overflow-x: auto;
    }
    
    .device-container {
        min-width: 768px;
        margin: 10px;
        transform-origin: top left;
        transform: scale(0.9);
    }
    
    .main-screen {
        width: 600px;
        height: 450px;
    }
    
    .left-buttons {
        left: 20px;
    }
    
    .right-buttons {
        right: 20px;
    }
    
    .side-btn {
        width: 70px;
        height: 40px;
        font-size: 12px;
    }
    
    .data-table th,
    .table td {
        padding: 6px;
        font-size: 9px;
    }
    
    .menu-tree {
        width: 120px;
    }
    
    .menu-item {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .submenu {
        width: 140px;
    }
    
    .submenu-item {
        padding: 8px 15px;
        font-size: 11px;
    }
    
    .bottom-controls {
        height: 40px;
        padding: 0 10px;
    }
    
    .control-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    /* 隐藏部分装饰元素以节省空间 */
    .screw {
        width: 15px;
        height: 15px;
    }
    
    .corner-decoration {
        width: 80px;
        height: 80px;
    }
}

/* ==================== 手机 (最大480px) ==================== */
@media (max-width: 480px) {
    body {
        overflow-x: auto;
        overflow-y: auto;
    }
    
    /* 强制最小宽度以保持布局 */
    .device-container {
        min-width: 768px;
        margin: 5px;
        transform-origin: top left;
        transform: scale(0.7);
    }
    
    /* 或者使用滚动方案 */
    .scroll-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    /* 提示用户横屏查看 */
    .rotate-notice {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        z-index: 10000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
    }
    
    @media (orientation: portrait) {
        .rotate-notice {
            display: flex;
        }
    }
    
    .rotate-icon {
        font-size: 64px;
        margin-bottom: 20px;
        animation: rotate 2s linear infinite;
    }
    
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(90deg); }
    }
}

/* ==================== 触摸设备优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大可点击区域 */
    .btn,
    .side-btn,
    .control-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 禁用悬停效果 */
    .btn:hover,
    .side-btn:hover,
    .control-btn:hover {
        transform: none;
    }
    
    /* 优化触摸反馈 */
    .btn:active,
    .side-btn:active,
    .control-btn:active {
        transform: scale(0.95);
    }
    
    /* 增大滚动条宽度 */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    
    /* 移除工具提示 */
    .tooltip .tooltip-text {
        display: none;
    }
}

/* ==================== 高DPI屏幕优化 ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Canvas 高清渲染 */
    .waveform-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* 文字抗锯齿 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==================== 打印样式 ==================== */
@media print {
    body {
        background: white;
    }
    
    .device-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    /* 隐藏交互元素 */
    .left-buttons,
    .right-buttons,
    .rotary-knob,
    .bottom-controls,
    .btn,
    .control-btn {
        display: none !important;
    }
    
    /* 优化打印布局 */
    .main-screen {
        width: 100%;
        height: auto;
    }
    
    .waveform-area {
        page-break-inside: avoid;
    }
    
    /* 确保颜色正确显示 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==================== 暗黑模式适配 ==================== */
@media (prefers-color-scheme: dark) {
    /* 已经是暗色主题，无需额外调整 */
}

/* ==================== 减少动画（用户偏好） ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading,
    .loading-spinner {
        animation: none;
        border-top-color: var(--primary-orange);
    }
}

/* ==================== 横屏优化 ==================== */
@media (orientation: landscape) and (max-height: 600px) {
    .device-container {
        margin: 5px auto;
    }
    
    .main-screen {
        height: calc(100vh - 100px);
    }
    
    .top-buttons {
        gap: 10px;
    }
}

/* ==================== 特定设备优化 ==================== */
/* iPad Pro 12.9" */
@media only screen 
    and (min-width: 1024px) 
    and (max-height: 1366px) 
    and (-webkit-min-device-pixel-ratio: 2) {
    .device-container {
        max-width: 1200px;
    }
}

/* iPad Air / iPad Pro 11" */
@media only screen 
    and (min-width: 820px) 
    and (max-width: 1180px) {
    .device-container {
        max-width: 1000px;
    }
}

/* Surface Pro */
@media screen 
    and (min-width: 912px) 
    and (max-width: 1368px) {
    .device-container {
        max-width: 1200px;
    }
}

/* ==================== 辅助功能优化 ==================== */
@media (prefers-contrast: high) {
    /* 高对比度模式 */
    .btn,
    .side-btn {
        border: 2px solid currentColor;
    }
    
    .waveform-path {
        stroke-width: 3;
    }
}

/* ==================== 网络状态适配 ==================== */
@media (prefers-reduced-data: reduce) {
    /* 低数据模式：减少不必要的资源加载 */
    .background-image {
        background-image: none;
    }
}

/* ==================== 灵活布局辅助类 ==================== */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none;
    }
    
    .show-mobile {
        display: block;
    }
}

.hide-tablet {
    display: block;
}

.show-tablet {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none;
    }
    
    .show-tablet {
        display: block;
    }
}

.hide-desktop {
    display: block;
}

.show-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
    
    .show-desktop {
        display: block;
    }
}