/* ============================================
   响应式设计增强
   优化移动端和不同屏幕尺寸的用户体验
   ============================================ */

/* 移动端优先的响应式设计 */

/* 超小屏幕 - 手机竖屏 */
@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }
  
  /* 卡片布局优化 */
  .card {
    padding: 1rem;
    margin: 0 -0.5rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  
  .card:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* 按钮尺寸优化 */
  .btn {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 44px; /* 触摸友好的最小尺寸 */
  }
  
  /* 表单元素优化 */
  .form-input {
    padding: 1rem;
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
  }
  
  /* 导航栏优化 */
  .navbar-content {
    padding: 0.75rem 0;
  }
  
  .navbar-title {
    font-size: 1.125rem;
  }
  
  /* 隐藏非必要元素 */
  .mobile-hidden {
    display: none !important;
  }
  
/* 触摸友好的交互区域 */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 移动端触摸优化 */
@media (max-width: 767px) {
    /* 触摸友好的按钮和链接 */
    .btn, .card, .form-input, .nav-link {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* 防止双击缩放 */
    button, a, input, select, textarea {
        touch-action: manipulation;
    }
    
    /* 触摸反馈效果 */
    .touch-feedback:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* 表单元素优化 */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px; /* 防止iOS缩放 */
        min-height: 44px;
    }
    
    /* 卡片触摸优化 */
    .card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* 防止长按选择文本 */
    .no-select {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* 移动端字体优化 */
    html {
        font-size: 14px; /* 移动端基础字体大小 */
    }
    
    /* 标题字体优化 */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    /* 卡片内间距优化 */
    .card {
        padding: 1rem;
    }
    
    /* 按钮尺寸优化 */
    .btn {
        padding: 0.75rem 1rem;
        min-height: 44px;
        font-size: 1rem;
    }
    
    /* 表单间距优化 */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* 导航栏优化 */
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    /* 列表项间距优化 */
    .list-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    /* 图标大小优化 */
    .icon {
        font-size: 1.25rem;
    }
}

/* 移动端滚动优化 */
@media (max-width: 767px) {
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        overscroll-behavior-y: contain;
    }
}

/* 小屏幕 - 手机横屏/小平板 */
@media (min-width: 481px) and (max-width: 767px) {
  .container {
    padding: 0 0.75rem;
  }
  
  .card {
    padding: 1.25rem;
  }
  
  /* 两列网格 */
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  /* 调整字体大小 */
  .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
}

/* 中等屏幕 - 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 0 1rem;
  }
  
  /* 三列网格 */
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 卡片悬停效果 */
  .card:hover {
    transform: translateY(-2px);
  }
  
  /* 显示桌面端元素 */
  .desktop-only {
    display: block !important;
  }
  
  .mobile-only {
    display: none !important;
  }
}

/* 大屏幕 - 桌面 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 1024px;
  }
  
  /* 四列网格 */
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* 更丰富的悬停效果 */
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

/* 超大屏幕 */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
  
  /* 五列网格 */
  .grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 特殊设备适配 */

/* 折叠屏设备 */
@media (max-width: 480px) and (max-height: 600px) {
  .container {
    padding: 0 0.25rem;
  }
  
  .card {
    padding: 0.75rem;
    margin: 0 -0.25rem;
  }
  
  /* 紧凑布局 */
  .compact {
    gap: 0.5rem;
  }
  
  .compact .card {
    padding: 0.5rem;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 更清晰的边框 */
  .card {
    border-width: 0.5px;
  }
  
  /* 更精细的阴影 */
  .shadow-md {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}

/* 打印样式 */
@media print {
  .navbar,
  .btn,
  .toast {
    display: none !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  /* 移动端暗色模式优化 */
  @media (max-width: 767px) {
    body {
      background-color: #0f172a;
    }
    
    .card {
      background-color: #1e293b;
      border-color: #334155;
      color: #e2e8f0;
    }
    
    .form-input {
      background-color: #1e293b;
      border-color: #475569;
      color: #e2e8f0;
    }
    
    .form-input:focus {
      border-color: #60a5fa;
      box-shadow: 0 0 0 3px rgb(96 165 250 / 0.1);
    }
  }
}

/* 无障碍功能支持 */

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .card:hover {
    transform: none !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid;
  }
  
  .btn {
    border: 2px solid;
  }
  
  .form-input {
    border: 2px solid;
  }
}

/* 布局工具类 */

/* 移动端专用的布局类 */
.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 平板端布局 */
.tablet-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* 桌面端布局 */
.desktop-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* 响应式间距 */
.responsive-gap {
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .responsive-gap {
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .responsive-gap {
    gap: 1.5rem;
  }
}

/* 响应式字体大小 */
.responsive-text {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .responsive-text {
    font-size: 1.125rem;
  }
}

/* 响应式图片 */
.responsive-image {
  max-width: 100%;
  height: auto;
}

/* 响应式iframe */
.responsive-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 滚动条优化 */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
  }
}

/* 安全区域支持（iPhone X+） */
@supports(padding: max(0px)) {
  .safe-area {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
  
  .navbar {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
}

/* 性能优化类 */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* 强制GPU加速 */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}