/* ── 设备页视觉优化（v1）────────────────────────────────────────────
   作用域：main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."]))
           —— 卡片模式 / 表格模式两条页面钩子，任一命中才生效，其余页面零影响。
   思路：不改 DOM、不改配色身份，只压字号行高、给数字与标签定宽、表头吸顶、操作列吸右，
         让 17 列表格在 1280–1920 下可扫读，卡片靠「64px 标签列 + 值列」形成两栏节奏。
   位置：接在编译产物 <link> 之后，同特异性即可覆盖，因此与既有覆盖层一致统一用 !important。
   限定：不新增色相、无渐变/毛玻璃/发光/循环动画；transition ≤160ms；不隐藏任何数据。
────────────────────────────────────────────────────────────────── */

  /* 无障碍焦点：只加不删，保留既有焦点样式 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid #58a6ff !important;
    outline-offset: 1px !important;
  }

  /* 统计药丸（两模式共用）：32px 高、数字与标签同号，数字加粗等宽 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-3.mb-4 {
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-3.mb-4 > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-3.mb-4 > button > span {
    font-size: 12.5px !important;
    line-height: 1 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-3.mb-4 > button > span:first-of-type {
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
  }

  /* 工具按钮（两模式共用）：30px 高，保持换行，不压掉筛选下拉 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-2.mb-4 > button,
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-2.mb-4 > div.relative > button {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) div.flex.flex-wrap.items-center.gap-2.mb-4 > div.relative > input {
    height: 30px !important;
    font-size: 12.5px !important;
  }

  /* 表格 · 表头：11.5px 小字距，17 列不再吵 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead th {
    padding: 10px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    color: #7d8590 !important;
    white-space: nowrap !important;
  }

  /* 表格 · 表头吸顶（单独成节，改回滚只删这一段即可） */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #161b22 !important;
    box-shadow: inset 0 -1px 0 #30363d !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead tr {
    border-bottom: 0 !important;
  }

  /* 表格 · 行：13px 字号、更亮一档的 hover 底 + 左侧 2px 蓝标（选中行不动） */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td {
    padding: 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-variant-numeric: tabular-nums;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody tr:hover:not([class*="bg-red-500/5"]) {
    background: #1c2128 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody tr:hover:not([class*="bg-red-500/5"]) > td:first-child {
    box-shadow: inset 2px 0 0 #58a6ff;
  }

  /* 表格 · 首列全选框：固定 40px 居中 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead th:first-child {
    width: 40px !important;
    min-width: 40px !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:first-child {
    width: 40px !important;
    min-width: 40px !important;
    padding: 9px 0 !important;
    text-align: center !important;
  }

  /* 表格 · 列级排版：设备列给 176px 下限（否则 1280 下名字折成 4 行）、ID、IP/地区、空值 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(4) {
    min-width: 176px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(4) > span {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #e6edf3 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(5) {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    color: #6e7681 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(7) {
    font-size: 12px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(7) > span.ml-2 {
    margin-left: 6px !important;
    font-size: 11px !important;
    color: #6e7681 !important;
  }
  /* 表格 · 电量列：条 + 百分比 + 闪电图标必须同排，否则行高被撑成两档 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(8) {
    white-space: nowrap !important;
    min-width: 104px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(8) > div {
    flex-wrap: nowrap !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table span[class~="text-[#484f58]"]:not([data-slot=badge]) {
    opacity: .7;
  }

  /* 表格 · 备注输入：常态隐形，hover 虚线，focus 蓝框 + 画布底 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) input[placeholder="输入备注..."] {
    padding: 2px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #c9d1d9 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) input[placeholder="输入备注..."]:hover {
    border-style: dashed !important;
    border-color: #30363d !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) input[placeholder="输入备注..."]:focus {
    border-style: solid !important;
    border-color: rgba(88, 166, 255, .4) !important;
    background: #0d1117 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) input[placeholder="输入备注..."]::placeholder {
    color: #484f58 !important;
  }

  /* 表格 · 操作列吸右：横滚时按钮始终可见，选中行用同色叠加不露底 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background: #161b22 !important;
    padding: 9px 10px !important;
    box-shadow: inset 1px 0 0 #21262d, -7px 0 9px -7px rgba(1, 4, 9, .95) !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead th:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 3 !important;
    box-shadow: inset 1px 0 0 #21262d, inset 0 -1px 0 #30363d !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody tr:hover:not([class*="bg-red-500/5"]) > td:last-child {
    background: #1c2128 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody tr[class*="bg-red-500/5"] > td:last-child::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    background: rgba(248, 81, 73, .05);
    pointer-events: none;
  }

  /* 操作图标按钮（表格末列与卡片头部共用）：统一 32px 方块、8px 圆角、15px 图标 */
  /* 操作图标按钮（表格末列与卡片头部共用）：统一 28px 方块、7px 圆角、15px 图标 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevacts button.h-8.w-8,
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table td:last-child button.h-8.w-8 {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevacts button.h-8.w-8 svg,
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table td:last-child button.h-8.w-8 svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* 徽章（表格与卡片同一套尺寸，颜色交给原有语义类） */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table span[data-slot=badge],
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid span[data-slot=badge] {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* 卡片 · 容器与头部：内容内缩 + 头部一条细分隔，hover 只抬 1px */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card] {
    transition: border-color 140ms ease, transform 140ms cubic-bezier(.2, .8, .25, 1) !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card]:hover:not([class*="opacity-60"]):not([class*="1a1a12"]) {
    border-color: rgba(34, 197, 94, .35) !important;
    transform: translateY(-1px);
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] {
    padding: 12px 14px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] > div:has(.zqdevname) {
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #21262d !important;
  }

  /* 卡片 · 名称与 ID：14px 名 / 11px 等宽 ID */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid .zqdevname p {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #6e7681 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid .zqdevname p:first-child {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  /* 卡片 · 设备图标按钮：40px、10px 圆角；选中态（aria-checked）不覆盖红色 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid .zqdevname > button[aria-checked=false] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #21262d !important;
    border: 1px solid #30363d !important;
  }

  /* 卡片 · 标签值行：22px 行高、64px 右对齐标签列、值可换行不再截断 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] > div.mb-1\.5:not(.flex) > div {
    min-height: 22px !important;
    padding: 0 !important;
    line-height: 20px !important;
    border-bottom: 1px solid transparent !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] > div.mb-1\.5:not(.flex) > div:nth-child(even) {
    border-bottom-color: #21262d !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] > div.mb-1\.5:not(.flex) > div > span:first-child {
    flex: 0 0 64px !important;
    width: 64px !important;
    padding-right: 8px !important;
    text-align: right !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: #6e7681 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid [data-slot=card-content] > div.mb-1\.5:not(.flex) > div > span:last-child {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-variant-numeric: tabular-nums;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  /* 电量条：卡片 28×4、表格 44×5（w-7 / w-10 / h-2.5 之外再给死尺寸） */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .zqdevgrid .zqbadges .w-7.h-2 {
    width: 28px !important;
    height: 4px !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table .w-10.h-2\.5 {
    width: 44px !important;
    height: 5px !important;
  }
  /* ── 合并「状态」与「锁屏」两列 ──────────────────────────────────
     状态列只有一颗 12px 圆点，锁屏列已是「亮屏 / 锁屏 / 离线」三态徽章，
     并排等于同一件事说两遍，还白吃 48px 横向空间。
     做法：状态列压成 0 宽（th 字号归零、td 内距归零），圆点绝对定位到
     锁屏徽章左侧；列数不变，所以上面按 nth-child 写的列级规则全不受影响。 */
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table thead th:nth-child(2) {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(2) {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(2) > span {
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  main:is(:has(.zqdevgrid), :has(input[placeholder="输入备注..."])) .overflow-x-auto table tbody td:nth-child(3) {
    padding-left: 22px !important;
  }