/* ============================================================
   响应式优化补丁 - 自适应浏览器尺寸变化
   覆盖所有页面，解决大屏留白、小屏拥挤等问题
   ============================================================ */

/* ===== 大屏优化（>1280px）：撑满内容区 ===== */
@media (min-width: 1281px) {
  /* 大屏下放宽主内容区最大宽度限制 */
  .max-w-7xl {
    max-width: 100% !important;
  }
  /* 保留适度两侧留白 */
  .max-w-7xl.mx-auto {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* 超大屏（>1536px）：网格显示更多列 */
@media (min-width: 1536px) {
  .max-w-7xl.mx-auto {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  /* 5列网格适配超宽屏 */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ===== 中屏优化（1024px-1280px）===== */
@media (max-width: 1280px) and (min-width: 1024px) {
  .max-w-7xl.mx-auto {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ===== 平板优化（768px-1024px）===== */
@media (max-width: 1023px) and (min-width: 768px) {
  .max-w-7xl.mx-auto {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 平板下顶部栏减少内边距 */
  header.px-6 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== 手机优化（<768px）===== */
@media (max-width: 767px) {
  /* 主内容区撑满宽度，减少内边距 */
  .max-w-7xl.mx-auto {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* 顶部栏紧凑化 */
  header.px-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 卡片内边距紧凑化 */
  .app-card.p-5 {
    padding: 16px !important;
  }
  /* 标题字号适配 */
  h1.text-2xl {
    font-size: 1.25rem !important;
  }
  /* 隐藏非必要元素，释放空间 */
  .hidden.md\:block {
    display: none !important;
  }
}

/* ===== 小屏手机优化（<480px）===== */
@media (max-width: 480px) {
  .max-w-7xl.mx-auto {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 卡片进一步紧凑 */
  .app-card.p-5,
  .app-card .p-5 {
    padding: 12px !important;
  }
  /* 顶部栏紧凑化 */
  header.px-6 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* 字体紧凑 */
  .text-sm {
    font-size: 0.8125rem !important;
  }
}

/* ===== 表格响应式优化 ===== */
@media (max-width: 767px) {
  /* 表格容器横向滚动 */
  .table-container, .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 表格最小宽度，避免挤压 */
  table {
    min-width: 600px !important;
  }
}

/* ===== 弹窗响应式优化 ===== */
@media (max-width: 640px) {
  /* 弹窗撑满屏幕 */
  .modal-content, [class*="max-w-md"], [class*="max-w-lg"], [class*="max-w-2xl"] {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }
  /* 弹窗内边距紧凑 */
  .modal-content .p-6, .modal-content .p-7 {
    padding: 16px !important;
  }
}

/* ===== 侧边栏响应式优化 ===== */
/* 平板及以下：侧边栏改为抽屉式（已有实现，此处仅补充过渡） */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed !important;
    z-index: 40 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) !important;
  }
}

/* ===== 栅格响应式增强 ===== */
/* 自动适配列数（备用方案，当 Tailwind 断点不满足时生效） */
@media (max-width: 640px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 字体响应式 ===== */
@media (max-width: 480px) {
  html {
    font-size: 15px !important;
  }
}

/* ===== 图片和媒体响应式 ===== */
img, video, canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ===== Flex/Grid 容器自动换行 ===== */
@media (max-width: 640px) {
  .flex.items-center.gap-2,
  .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
  }
}

/* ===== 按钮响应式 ===== */
@media (max-width: 480px) {
  .btn, button[class*="px-4"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}