/* ==========================================================================
   九尾狐 · 全端适配层  (mobile / tablet / desktop)
   只覆盖布局与图像呈现，不动任何业务逻辑、不碰接口。
   加载顺序：放在最后，覆盖 index.html 内联的桌面调优规则。
   ========================================================================== */

/* ---------------- 0. 基础：图像与图标适配 ---------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

/* 品牌 logo：等比缩放，绝不拉伸 */
img[src*="jw-logo"],
img[src*="eagle-logo"],
img[src*="kk-logo"] { object-fit: contain !important; }

/* 卡片里的应用图标 / 设备图标：不许撑破容器 */
img.rounded,
img[class*="rounded-"] { object-fit: cover; }

/* 长文本（设备 ID / 包名 / IP / 备注）在窄屏必须能断行，不许把卡片撑破 */
@media (max-width: 767px) {
  .break-all, [class*="font-mono"] { word-break: break-all !important; }
  /* iOS 上 background-attachment: fixed 会让背景拉伸/错位，改成 scroll */
  html body { background-attachment: scroll !important; }
}

/* ---------------- 1. 平板 768 ~ 1279：两栏压缩，基准宽度放宽 ----------------
   原规则窄于 1500 就锁 1420px，平板一样被逼横滚。这里放宽到 1080，
   平板竖屏也能正常看到左右两栏。 */
@media (min-width: 768px) and (max-width: 1279px) {
  main div.flex.gap-3.flex-1:has([role=tablist]) {
    min-width: 1080px !important;
  }
}

/* ---------------- 1.5 顶栏：手机 + 平板都不许撑破页面 ---------------- */
@media (max-width: 1279px) {
  header.flex {
    height: auto !important;
    min-height: 54px !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    padding: 8px 10px !important;
  }
  header > .flex-1.flex.justify-end {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  header > .flex-1.flex.justify-end > * { flex-shrink: 0 !important; }
}

/* 平板宽度够放下两行，直接换行显示完整，不用横向滚动 */
@media (min-width: 480px) and (max-width: 1279px) {
  header > .flex-1.flex.justify-end {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: flex-end !important;
  }
}

/* ---------------- 2. 手机 ≤ 767px：主体纵向堆叠 ---------------- */
@media (max-width: 767px) {

  html, body { overflow-x: hidden !important; }

  /* ---- 2.1 顶栏规则见 1.5 档（手机平板通用） ---- */

  /* ---- 2.2 首页：底部卡片不再被压成空条 ---- */
  /* 父级是 flex column + min-h-0，底部 grid 吃到 flex-1 就被压扁，这里放开自然高度 */
  .grid.flex-1.min-h-0,
  .grid.flex-1 { flex: 0 0 auto !important; min-height: auto !important; }
  .grid.flex-1.min-h-0 > * { min-height: auto !important; }
  div[class*="lg:col-span-"] { overflow: visible !important; min-height: auto !important; }
  div[class*="rounded-xl"][class*="h-full"][class*="overflow-hidden"] {
    height: auto !important;
    min-height: auto !important;
  }

  /* ---- 2.3 数据卡片：两列，间距收紧 ---- */
  .grid { gap: 10px !important; }
  .grid > * { min-width: 0 !important; }

  /* ---- 2.4 设备控制页：解除 1420px 锁定，左栏 / 右栏改上下排 ---- */
  main div.flex.gap-3.flex-1:has([role=tablist]) {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child,
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }
  /* 右栏 Tab 面板：单行横滚，不吃掉半屏 */
  main [role=tablist] { max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto !important; }

  /* 投屏区：竖屏下多块屏换行排列，屏体单块最大 320px */
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child .items-start {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child .items-start > div {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child .items-start .rounded-2xl:not(.shadow-2xl) {
    max-width: min(320px, 78vw) !important;
  }

  /* ---- 2.5 触控尺寸：小图标按钮放大到 30px+，防误触 ---- */
  main button svg { min-width: 14px; }
  main div[class*="gap-1"] > button,
  main div[class*="gap-2"] > button {
    min-height: 30px;
  }
  /* 图标型按钮（只有 svg 没有文字的）在手机上放大到 32x32 */
  main button:has(> svg):not(:has(span)):not(:has(div)) {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px !important;
  }
  main button:has(> svg) svg { width: 16px !important; height: 16px !important; }

  /* ---- 2.6 弹窗 / 抽屉 / 下拉：不许超出屏幕 ---- */
  [role="dialog"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: auto !important;
  }
  [role="menu"], [role="listbox"] { max-width: calc(100vw - 24px) !important; }

  /* ---- 2.7 底部固定元素：避开 iPhone home 条 ---- */
  [id="9t-switch"] {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    height: 34px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  /* ---- 2.8 正文与表格：字号不小于 12px，表格横滚不出界 ---- */
  main { font-size: 13px; }
  main .text-\[11px\] { font-size: 12px !important; line-height: 1.5 !important; }
  main .text-\[10px\] { font-size: 11px !important; line-height: 1.45 !important; }
  main table { min-width: 560px; }
  main > div { max-width: 100vw; }
  main .overflow-x-auto { max-width: 100vw; }
}

/* ---------------- 3. 超窄屏 ≤ 380：进一步压缩 ---------------- */
@media (max-width: 380px) {
  .grid { gap: 8px !important; }
  header.flex { padding: 6px 8px !important; }
  main div.flex.gap-3.flex-1:has([role=tablist]) > div:first-child .items-start .rounded-2xl:not(.shadow-2xl) {
    max-width: 70vw !important;
  }
}

/* ---------------- 4. 桌面 ≥ 1280：只做轻微优化 ---------------- */
@media (min-width: 1280px) {
  /* 大屏上内容不要拉得过散，右侧留一点呼吸 */
  main > div { max-width: 100%; }
  /* logo 尺寸保持清晰度，不做放大模糊 */
  aside img[src*="jw-logo"],
  aside img[src*="eagle-logo"] {
    max-width: 132px !important;
    max-height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* ---------------- 5. 横屏手机（高度很矮）：压缩纵向留白 ---------------- */
@media (max-height: 480px) and (orientation: landscape) {
  header.flex { min-height: 44px !important; padding: 4px 10px !important; }
  main div.flex.gap-3.flex-1:has([role=tablist]) { gap: 8px !important; }
  [id="9t-switch"] { display: none !important; }
}