/*!
 * 后台面板多端自适应增强补丁
 * 覆盖：手机(<768) / 平板(768-1023) / 笔记本(1024-1439) / 桌面(>=1440)
 * 设计原则：只在窄屏生效，不改任何组件构建产物，桌面端视觉保持原样。
 */

/* ================= 通用：任何屏幕都不许横向溢出 ================= */
html, body { max-width: 100%; }
#root { max-width: 100%; }
img, video, canvas { max-width: 100%; height: auto; }

/* 弹窗永不超出屏幕（所有尺寸都适用，仅做上限约束） */
div[role="dialog"] {
  max-width: min(96vw, 100%) !important;
  max-height: 90vh !important;
  overflow: auto !important;
}

/* ================= 平板及以下：≤1023px ================= */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }

  main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 宽表格：容器内横向滑动，不撑破页面 */
  main div:has(> table) {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  main table { min-width: 560px; }

  /* 多列卡片：平板降为 2 列，避免挤压变形 */
  main [class*="grid-cols-3"],
  main [class*="grid-cols-4"],
  main [class*="grid-cols-5"],
  main [class*="grid-cols-6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 所有 flex 子项允许收缩，防止长英文/路径把容器顶宽 */
  main .flex > * { min-width: 0; }

  /* 顶部信息行、统计条：允许换行，不溢出 */
  main .flex.items-center.gap-3.w-full.font-normal.overflow-x-auto {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* 表单控件统一触控高度 */
  main input, main select, main textarea { min-height: 34px; }
  main button { min-height: 32px; }
}

/* ================= 平板竖屏 768-1023：两栏布局改上下堆叠 ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  main .flex.gap-3.flex-1 { flex-wrap: wrap !important; }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:last-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ================= 手机 ≤767px ================= */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }

  main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* 页头：标题与操作按钮分行，标题不换行截断 */
  main h1, main h2 { font-size: 16px !important; line-height: 1.35 !important; }
  main h2 div.flex { flex-wrap: wrap !important; gap: 6px !important; }

  /* 卡片：统一单列（原本 2 列的并排卡片在手机上过于拥挤） */
  main [class*="grid-cols-2"],
  main [class*="grid-cols-3"],
  main [class*="grid-cols-4"],
  main [class*="grid-cols-5"],
  main [class*="grid-cols-6"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 卡片内边距收紧，把宽度还给内容 */
  main .rounded-xl, main .rounded-2xl, main .rounded-lg {
    max-width: 100% !important;
  }
  main .p-6 { padding: 12px !important; }
  main .p-5 { padding: 10px !important; }
  main .p-4 { padding: 10px !important; }

  /* 长文本 / 路径 / 域名 / IP：允许断行，不顶宽 */
  main { overflow-wrap: anywhere; word-break: break-word; }

  /* 表格：字号降一档，保持横向滑动 */
  main table { min-width: 520px; font-size: 12px !important; }

  /* Tab 头：横向滑动，不换行挤压 */
  main [role="tablist"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  main [role="tablist"] > * { flex: 0 0 auto; }

  /* 弹窗：接近全屏，内部滚动 */
  div[role="dialog"] {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  /* 按钮组：允许换行 */
  main .flex.gap-2, main .flex.gap-3 { flex-wrap: wrap; }

  /* 图片/预览区不撑高页面 */
  main img { max-height: 60vh; object-fit: contain; }
}

/* ================= 超小屏 ≤399px ================= */
@media (max-width: 399px) {
  main { padding-left: 6px !important; padding-right: 6px !important; }
  main h1, main h2 { font-size: 15px !important; }
  main button { font-size: 11px !important; padding-left: 8px !important; padding-right: 8px !important; }
  main table { min-width: 480px; font-size: 11px !important; }
}

/* ================= 笔记本 1024-1439：两栏更紧凑，取消强制滚动 ================= */
@media (min-width: 1024px) and (max-width: 1439px) {
  main { padding-left: 12px !important; padding-right: 12px !important; }
  main div.flex.gap-3.flex-1:has([role=tablist]) {
    min-width: 0 !important;
    width: 100% !important;
  }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:last-child {
    min-width: 380px !important;
    flex: 1 1 380px !important;
  }
  main [class*="grid-cols-4"],
  main [class*="grid-cols-5"],
  main [class*="grid-cols-6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ================= 桌面 ≥1440：保持原布局，仅放宽内容区 ================= */
@media (min-width: 1440px) {
  main { max-width: 1920px; margin-left: auto; margin-right: auto; }
}

/* ================= 触屏 / 文本缩放 通用优化 ================= */
@media (hover: none) and (pointer: coarse) {
  main button, main a[role="button"] { min-height: 36px; }
  main input, main select { min-height: 36px; font-size: 15px; } /* 防 iOS 聚焦自动放大 */
}

/* 横屏手机：压缩纵向留白 */
@media (max-height: 480px) and (orientation: landscape) {
  main .p-6 { padding: 8px !important; }
  main h1, main h2 { font-size: 14px !important; }
}