/* ============================================================
   kk-mobile.css  v2  —  手机端紧凑排版
   v2 改动：
     1. 信息条（型号/电量/IMSI…一行行）字号再降一档、行距压到 14px
     2. 工具条按钮（保存/测试连接/A包图标…）高度和上下间距收小
     3. 首页底部大片留白：卡片撑满剩余高度，不再留一块空地
     4. 长列表（上百台设备）加 content-visibility，滑动不掉帧
   只在窄屏（<=860px）生效，桌面端完全不受影响。
   ============================================================ */

@media (max-width: 860px) {

  /* ---------- 1. 列表区不再内部滚动 ---------- */
  main div.flex-1.overflow-y-auto.min-h-0 {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  main div.flex.flex-col:has(> div.flex-1.overflow-y-auto) {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  main { -webkit-overflow-scrolling: touch; }

  main div.grid.gap-4 { gap: 8px !important; }

  /* ---------- 2. 信息条：小号字 + 行距收紧（v2 再压一档） ----------
     实测原行高 18px（11.5px 字/15px 行高），现在 14px：
     一台设备十几行，一屏能多出一整台机器的信息量。 */
  div.flex.items-center.py-1.border-b {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    line-height: 13px !important;
  }
  div.flex.items-center.py-1.border-b > span {
    font-size: 10.5px !important;
    line-height: 13px !important;
  }
  div.flex.items-center.py-1.border-b > span:first-child {
    width: 56px !important;
    font-size: 10px !important;
  }
  /* 信息条整块的上下外边距也收掉 */
  main div.mb-1\.5 { margin-bottom: 4px !important; }
  main textarea {
    min-height: 40px !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  /* ---------- 3. 卡片本体：内边距收紧 ---------- */
  [data-slot="card"] {
    border-radius: 10px !important;
    gap: 0 !important;
  }
  [data-slot="card-content"] { padding: 8px 10px !important; }
  main [data-slot="card"] > div.px-3.py-4,
  main [data-slot="card"] > div.p-4 {
    padding: 6px 8px !important;
  }
  main [data-slot="card"] { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* ---------- 4. 长列表渲染优化：屏幕外的卡片跳过排版/绘制 ---------- */
  main [data-slot="card"] {
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
  }

  /* ---------- 5. 工具条按钮（保存 / 测试连接 / A包图标 / B包图标 …）----------
     这些是用户看着最碍眼的一排：原来 26px 高、py 2px、上下还各带一段间距。
     现在压到 22px，行距 3px，整条不再撑高。 */
  main button {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  main button[class*="py-0.5"], main button[class*="py-1"],
  main button[class*="py-1.5"], main button[class*="py-2"],
  main button[class*="py-2.5"] {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
  main button[class*="h-7"], main button[class*="h-8"],
  main button[class*="h-9"], main button[class*="h-10"],
  main button[class*="size-8"], main button[class*="size-9"] {
    height: 22px !important;
    min-height: 22px !important;
  }
  main button[class*="gap-2"] { gap: 3px !important; }

  /* 按钮成排出现时的行间距（flex-wrap 的工具条） */
  main div[class*="flex-wrap"] { row-gap: 3px !important; column-gap: 4px !important; }
  main div[class*="flex-wrap"][class*="gap-2"],
  main div[class*="flex-wrap"][class*="gap-3"] { gap: 3px 4px !important; }
  main div[class*="mb-3"], main div[class*="mb-4"] { margin-bottom: 6px !important; }
  main div[class*="mt-3"], main div[class*="mt-4"] { margin-top: 6px !important; }

  /* ---------- 6. 页头 / 顶部条框：上下留白收小 ---------- */
  header.flex {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  main h2 { margin-bottom: 0 !important; }

  /* ---------- 7. 首页底部大片留白：把富余高度给指标卡，底部两块自然贴底 ----------
     实测：手机上 6 张指标卡只有 103px 高、底部两块卡片却撑到 370px 空着，
     整页头重脚轻。改成：指标卡吃掉富余高度（大数字垂直居中，看着更舒服），
     底部两块回到内容自然高度，页面就填满了，不会底下空一大块。 */
  main div.grid.grid-cols-2.lg\:grid-cols-6 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: stretch !important;
    grid-auto-rows: 1fr !important;
  }
  main div.grid.grid-cols-2.lg\:grid-cols-6 > [data-slot="card"] {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  main div.grid.grid-cols-2.lg\:grid-cols-6 > [data-slot="card"] > div {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* 底部两块：不再拉伸，按内容高度贴底 */
  main div.grid.flex-1.min-h-0 { flex: 0 0 auto !important; height: auto !important; }
  main div.grid.flex-1.min-h-0 > div { height: auto !important; }
  main div.grid.flex-1.min-h-0 > div > [data-slot="card"] { height: auto !important; }
  main div.grid.flex-1.min-h-0 > div > [data-slot="card"] > div[class*="overflow-y-auto"] {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: 30vh !important;
    display: block !important;
  }
  main div.grid.flex-1.min-h-0 { margin-bottom: 2px !important; }

  /* ---------- 8. 分页条：贴住列表 ---------- */
  main div.flex.justify-center,
  main div.flex.items-center.justify-center {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  main div.flex.justify-center button,
  main div.flex.items-center.justify-center button {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /* ---------- 9. 标签 / 徽章 ---------- */
  [data-slot="badge"] {
    font-size: 10px !important;
    padding: 1px 4px !important;
    height: auto !important;
  }

  /* ---------- 10. 输入框高度统一收小 ---------- */
  main input[class*="h-10"], main select[class*="h-10"],
  main input[class*="h-9"], main select[class*="h-9"] {
    height: 28px !important;
    font-size: 11px !important;
  }

  /* ---------- 11. 图标 / 背景选择弹窗：手机不溢出，格子两列 ---------- */
  .kk-asset-modal { max-width: 94vw !important; }
  .kk-asset-modal .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .kk-asset-modal .overflow-y-auto { max-height: 46vh !important; }

  /* ---------- 12. 分页条吸底 ---------- */
  .kk-pager {
    position: sticky !important;
    bottom: 0 !important;
    background: #0d1117 !important;
    border-top: 1px solid #21262d !important;
    padding: 4px 0 !important;
    margin-top: 2px !important;
    z-index: 30 !important;
  }

  /* ---------- 13. 顶部汇率/时间条：手机上换行收缩 ---------- */
  main header.flex { flex-wrap: wrap !important; }
  main div.flex-1.flex.justify-end {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  main div.flex.items-center.gap-2.shrink-0 {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  main span.whitespace-nowrap { white-space: normal !important; }
  main { overflow-x: hidden !important; }

  /* ---------- 14. 手机上藏掉顶部时钟 ---------- */
  main header div.flex-1.flex.justify-end span.whitespace-nowrap { display: none !important; }

  /* ---------- 15. 卡片右上角图标按钮收窄 ---------- */
  main [data-slot="card"] button[class*="size-8"],
  main [data-slot="card"] button[class*="h-8"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
  }
  main [data-slot="card"] div.flex.items-center.gap-1 { gap: 0 !important; }

  main header div.flex.items-center.gap-2.shrink-0 { flex-wrap: nowrap !important; min-width: 0 !important; }
  main header div.flex.items-center.gap-2.shrink-0 button {
    padding: 1px 6px !important;
    font-size: 10.5px !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
  main header div.flex-1.flex.justify-end { min-width: 0 !important; overflow: hidden !important; }
  main header div.flex-1.flex.justify-end span { font-size: 10.5px !important; }
  main header h1, main header .text-base { font-size: 12px !important; }

  /* ---------- 16. 构建页「套壳开关」浮层 ---------- */
  #kk-wrap-opt-bar {
    top: auto !important;
    bottom: 10px !important;
    right: 8px !important;
    left: auto !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    max-width: 78vw !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5) !important;
  }
  #kk-wrap-opt-bar input { width: 14px !important; height: 14px !important; }
  #kk-wrap-opt-tip { display: none !important; }
}

/* ---------- 17. 图标上传落点：让覆盖层输入框稳稳盖住按钮（所有浏览器都能弹选择器）---------- */
.kk-upload-drop { position: relative; display: block; width: 100%; }
.kk-upload-drop > .kk-file-input {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;   /* iOS 上小于 16px 会触发缩放 */
  z-index: 2;
}
.kk-upload-drop:active { opacity: .85; }

@media (max-width: 860px) {
  /* 提高优先级压过 kk-adaptive.css 里的 main button 字号（同为 !important 时按选择器强度决胜） */
  #root main button, body main button, html body #root main button {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  #root main button *, body main button * { font-size: inherit !important; }
}