/* 响应式设计样式 - 增强版设备类型支持 */

/* 屏幕断点定义 */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* 设备特定变量 */
    --mobile-padding: 1rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
    
    /* 触摸友好尺寸 */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
}

/* 基础设备类型样式 */
.device-mobile {
    /* 移动设备特定样式 */
    --main-padding: var(--mobile-padding);
    --font-size-base: 14px;
    --line-height-base: 1.5;
}

.device-tablet {
    /* 平板设备特定样式 */
    --main-padding: var(--tablet-padding);
    --font-size-base: 15px;
    --line-height-base: 1.6;
}

.device-desktop {
    /* 桌面设备特定样式 */
    --main-padding: var(--desktop-padding);
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

/* 断点类样式 */
.breakpoint-xs {
    /* 超小屏幕 */
}

.breakpoint-sm {
    /* 小屏幕 */
}

.breakpoint-md {
    /* 中等屏幕 */
}

.breakpoint-lg {
    /* 大屏幕 */
}

.breakpoint-xl {
    /* 超大屏幕 */
}

.breakpoint-2xl {
    /* 2K屏幕 */
}

/* 触摸设备优化 */
.touch-device {
    /* 增加触摸目标大小 */
}

.touch-device button,
.touch-device .btn,
.touch-device input[type="submit"],
.touch-device input[type="button"] {
    min-height: var(--touch-target-comfortable);
    padding: 12px 20px;
}

.touch-device a {
    padding: 8px 12px;
    display: inline-block;
    min-height: var(--touch-target-min);
}

/* 高DPI屏幕优化 */
.high-dpi {
    /* 高分辨率屏幕优化 */
}

.high-dpi .tech-card {
    border-width: 0.5px;
}

.high-dpi .tech-input {
    border-width: 1px;
}

/* 微信浏览器特定样式 */
.wechat-browser {
    /* 微信浏览器优化 */
}

.wechat-browser .navbar {
    /* 导航栏适配 */
}

.wechat-browser .modal {
    /* 模态框适配 */
}

/* 通用响应式布局 */
.responsive-container {
    width: 100%;
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
    margin-left: auto;
    margin-right: auto;
}

.responsive-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.responsive-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.responsive-flex > * {
    flex: 1;
    min-width: 200px;
}

/* 响应式字体大小 */
.responsive-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.responsive-text-sm {
    font-size: calc(var(--font-size-base) * 0.875);
}

.responsive-text-lg {
    font-size: calc(var(--font-size-base) * 1.125);
}

.responsive-text-xl {
    font-size: calc(var(--font-size-base) * 1.25);
}

/* 响应式间距 */
.responsive-margin {
    margin: var(--main-padding);
}

.responsive-padding {
    padding: var(--main-padding);
}

.responsive-gap {
    gap: var(--main-padding);
}

/* 设备特定布局调整 */

/* 移动设备优化 */
@media (max-width: 768px) {
    .device-mobile .navbar {
        padding: 0.75rem 1rem;
    }
    
    .device-mobile .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 50;
        width: 280px;
    }
    
    .device-mobile .sidebar.open {
        transform: translateX(0);
    }
    
    .device-mobile .main-content {
        padding: 1rem;
    }
    
    .device-mobile .tech-card {
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .device-mobile .form-group {
        margin-bottom: 1.5rem;
    }
    
    .device-mobile .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .device-mobile .responsive-grid {
        grid-template-columns: 1fr;
    }
    
    .device-mobile .responsive-flex {
        flex-direction: column;
    }
    
    .device-mobile .responsive-flex > * {
        width: 100%;
    }
}

/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    .device-tablet .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .device-tablet .tech-card {
        padding: 1.25rem;
    }
    
    .device-tablet .form-group {
        margin-bottom: 1.25rem;
    }
}

/* 桌面设备优化 */
@media (min-width: 1025px) {
    .device-desktop .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .device-desktop .sidebar {
        position: static;
        transform: none;
        height: auto;
        width: auto;
    }
    
    .device-desktop .main-content {
        margin-left: 0;
    }
    
    .device-desktop .navbar {
        position: sticky;
        top: 0;
        z-index: 40;
    }
}

/* 超小屏幕优化 (xs) */
@media (max-width: 639px) {
    .breakpoint-xs .responsive-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .breakpoint-xs .tech-card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .breakpoint-xs .form-group {
        margin-bottom: 1rem;
    }
    
    .breakpoint-xs .btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* 小屏幕优化 (sm) */
@media (min-width: 640px) and (max-width: 767px) {
    .breakpoint-sm .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 中等屏幕优化 (md) */
@media (min-width: 768px) and (max-width: 1023px) {
    .breakpoint-md .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 大屏幕优化 (lg) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .breakpoint-lg .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 超大屏幕优化 (xl) */
@media (min-width: 1280px) and (max-width: 1535px) {
    .breakpoint-xl .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 2K屏幕优化 (2xl) */
@media (min-width: 1536px) {
    .breakpoint-2xl .responsive-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .breakpoint-2xl .responsive-container {
        max-width: 1400px;
    }
}

/* 横屏和竖屏适配 */
@media (orientation: portrait) {
    .device-mobile.breakpoint-xs .responsive-grid,
    .device-mobile.breakpoint-sm .responsive-grid {
        grid-template-columns: 1fr;
    }
}

@media (orientation: landscape) {
    .device-mobile.breakpoint-xs .responsive-grid,
    .device-mobile.breakpoint-sm .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 打印样式 */
@media print {
    .device-mobile,
    .device-tablet,
    .device-desktop {
        --main-padding: 0;
    }
    
    .navbar,
    .sidebar,
    .btn,
    .tech-button {
        display: none !important;
    }
    
    .tech-card {
        border: 1px solid #000;
        break-inside: avoid;
    }
    
    .responsive-container {
        max-width: none;
        padding: 0;
    }
}

/* 性能优化 */
.device-mobile * {
    /* 减少移动设备的动画复杂度 */
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
}

.device-mobile .tech-grid {
    /* 减少移动设备的背景网格复杂度 */
    background-size: 10px 10px;
}

/* 可访问性优化 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    /* 暗色主题适配 */
    :root {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
    }
}

@media (prefers-color-scheme: light) {
    /* 亮色主题适配 */
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f1f5f9;
        --text-primary: #0f172a;
        --text-secondary: #475569;
    }
}

/* 滚动优化 */
@media (max-width: 768px) {
    .device-mobile {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .device-mobile .main-content {
        overflow-x: hidden;
    }
}

/* 焦点管理 */
.touch-device *:focus {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

@media (pointer: coarse) {
    /* 粗指针设备（如触摸设备） */
    .tech-card:hover {
        transform: none;
    }
}

@media (pointer: fine) {
    /* 细指针设备（如鼠标） */
    .tech-card:hover {
        transform: translateY(-5px);
    }
}