@charset "utf-8";
/* ============================================================
   zero-devcards.css — 设备列表（卡片 / 工具栏）整体重构 2026-11-02
   仅做布局与视觉：不改任何 React 节点、不改任何业务交互
   所有字段 100% 保留
   ============================================================ */

/* ---------------- 网格 ---------------- */
main div.grid.gap-4.zd-grid{
  grid-template-columns:repeat(auto-fill,minmax(392px,1fr)) !important;
  gap:14px !important;
  align-items:start;
}

/* ---------------- 卡片外壳 ---------------- */
main .zd-card[data-slot="card"]{
  position:relative !important;
  border-radius:16px !important;
  border:1px solid #e5ebf7 !important;
  background:linear-gradient(180deg,#ffffff 0%,#fdfefe 55%,#fbfcff 100%) !important;
  box-shadow:0 1px 2px rgba(15,32,64,.04),0 12px 28px -24px rgba(15,32,64,.5) !important;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease !important;
  min-width:0;
  overflow:visible !important;
}
main .zd-card[data-slot="card"]::before{
  content:"";position:absolute;left:1px;right:1px;top:0;height:3px;
  border-radius:15px 15px 0 0;pointer-events:none;
  background:linear-gradient(90deg,#2155ff 0%,#4f8bff 42%,#7cc4ff 100%);
  opacity:.92;
}
main .zd-card[data-zd-state="offline"][data-slot="card"]::before{
  background:linear-gradient(90deg,#b7c2d6 0%,#d3dbe8 60%,#e4eaf3 100%);opacity:.85;
}
main .zd-card[data-slot="card"]:hover,
main .zd-card[data-slot="card"]:focus-within{
  z-index:6;
  border-color:#bed4ff !important;
  box-shadow:0 2px 4px rgba(15,32,64,.05),0 26px 42px -30px rgba(33,85,255,.65) !important;
  transform:translateY(-2px);
}

/* ---------------- 卡内骨架 ---------------- */
main .zd-card [data-slot="card-content"]{
  padding:15px 15px 13px !important;
  display:flex !important;flex-direction:column;
  height:100%;
}
main .zd-card .zd-head{
  margin-bottom:9px !important;
  padding-bottom:10px;
  border-bottom:1px solid #eef2f9;
}
main .zd-card .zd-head .zd-acts{gap:1px !important}

/* 设备图标 */
main .zd-card .zd-dev{
  width:44px !important;height:44px !important;border-radius:13px !important;
  background:linear-gradient(150deg,#f2f7ff,#e5eeff) !important;
  border:1px solid #d7e4ff !important;
  display:grid !important;place-items:center;
  transition:box-shadow .18s ease,transform .18s ease;
}
main .zd-card .zd-dev svg{width:23px !important;height:23px !important;color:#2155ff !important}
main .zd-card .zd-dev:hover{box-shadow:0 8px 18px -12px rgba(33,85,255,.95);transform:translateY(-1px)}
main .zd-card .zd-dev > span[class*="rounded-full"]{
  width:11px !important;height:11px !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 3px rgba(250,204,21,.16);
  animation:zd-pulse 2.4s ease-in-out infinite;
}
main .zd-card .zd-dev > span[class*="bg-gray-400"],
main .zd-card .zd-dev > span[class*="bg-slate-400"]{
  background:#b6c0d1 !important;box-shadow:0 0 0 3px rgba(148,160,180,.12) !important;animation:none;
}
@keyframes zd-pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(250,204,21,.16)}
  50%{box-shadow:0 0 0 5px rgba(250,204,21,.05)}
}

/* 右上 8 个操作 */
main .zd-card .zd-acts .zd-ico[data-slot="button"]{
  width:29px !important;height:29px !important;min-width:29px;
  padding:0 !important;border-radius:9px !important;
  color:#94a1b6 !important;background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  opacity:.9;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
main .zd-card .zd-acts .zd-ico[data-slot="button"] svg{width:15px !important;height:15px !important}
main .zd-card .zd-acts .zd-ico[data-slot="button"]:hover{
  background:#eef4ff !important;border-color:#dbe7ff !important;
  color:#2155ff !important;opacity:1;transform:translateY(-1px);
}
main .zd-card:hover .zd-ico{opacity:1}

/* 标题区 */
main .zd-card .zd-title{margin-bottom:9px !important}
main .zd-card .zd-title p:first-child{
  font-size:15.5px !important;font-weight:650 !important;letter-spacing:-.01em;
  color:#0e1a33 !important;line-height:1.25;
}
main .zd-card:hover .zd-title p:first-child{color:#2155ff !important}
main .zd-card .zd-title p:last-child{
  font-size:11px !important;font-weight:500;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.055em;color:#98a5ba !important;line-height:1.5;margin-top:2px;
}

/* ---------------- 徽标行 ---------------- */
main .zd-card .zd-badges{
  gap:4px !important;margin-bottom:9px !important;overflow:visible !important;
  flex-wrap:wrap !important;
}
main .zd-card .zd-badge{
  height:21px !important;padding:0 8px !important;
  border-radius:7px !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.01em;border-width:1px !important;border-style:solid !important;
  background:#f4f7fd !important;color:#5b6880 !important;border-color:#e8eef8 !important;
}
main .zd-card .zd-badge[class*="bg-blue-500"]{background:#e9f1ff !important;color:#2155ff !important;border-color:#cfe0ff !important}
main .zd-card .zd-badge[class*="bg-green-500"]{background:#e8f9f0 !important;color:#0f8a4d !important;border-color:#c3ecd7 !important}
main .zd-card .zd-badge[class*="bg-orange-500"]{background:#fef3e4 !important;color:#b96a05 !important;border-color:#ffdcb2 !important}
main .zd-card .zd-badge[class*="bg-purple-500"]{background:#f2ecff !important;color:#6f3fd6 !important;border-color:#e0d3ff !important}
main .zd-card .zd-badge[class*="bg-red-500"]{background:#ffecec !important;color:#d02b20 !important;border-color:#ffd2ce !important}
main .zd-card .zd-badge[class*="bg-yellow-500"]{background:#fff6e0 !important;color:#a87500 !important;border-color:#ffe7ad !important}
main .zd-card .zd-badge[class*="bg-white/15"],
main .zd-card .zd-badge[class*="bg-slate-"],
main .zd-card .zd-badge[class*="bg-gray-"]{background:#f2f5fa !important;color:#64708a !important;border-color:#e6ecf6 !important}

/* 电量 */
main .zd-card .zd-batt{margin-left:auto !important;gap:5px !important;padding-left:6px}
main .zd-card .zd-batt > div[class*="w-7"]{
  width:40px !important;height:6px !important;border-radius:99px !important;
  background:#e9eef7 !important;box-shadow:inset 0 0 0 1px #e2e9f4;overflow:hidden;
}
main .zd-card .zd-batt > div > div{border-radius:99px !important;transition:width .3s ease;background:#9db3d0 !important}
main .zd-card .zd-batt > div > div[class*="bg-green-500"]{background:linear-gradient(90deg,#34d399,#10b981) !important}
main .zd-card .zd-batt > div > div[class*="bg-yellow-500"],
main .zd-card .zd-batt > div > div[class*="bg-amber-500"]{background:linear-gradient(90deg,#fbbf24,#f59e0b) !important}
main .zd-card .zd-batt > div > div[class*="bg-red-500"]{background:linear-gradient(90deg,#fb7185,#ef4444) !important}
main .zd-card .zd-batt span{font-size:11.5px !important;font-weight:700;color:#42506a !important;min-width:30px;text-align:right;letter-spacing:.01em}
main .zd-card .zd-batt svg{width:15px !important;height:15px !important;color:#9dabc0 !important}

/* ---------------- 信息网格 3×3 ---------------- */
main .zd-card .zd-grid-info{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px !important;
  margin-bottom:8px !important;
}
main .zd-card .zd-cell{
  display:flex !important;flex-direction:column !important;gap:1px !important;
  padding:5px 8px !important;border-radius:8px !important;
  background:#f7f9fd !important;border:1px solid #eff3fa !important;
  min-width:0;font-size:12px !important;line-height:1.2;
  transition:background .15s ease,border-color .15s ease;
}
main .zd-card .zd-cell:hover{background:#f2f7ff !important;border-color:#e0ebff !important}
main .zd-card .zd-cell > span:first-child{
  font-size:10px !important;font-weight:500;color:#96a3b8 !important;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
main .zd-card .zd-cell > span:last-child{
  margin-left:0 !important;
  font-size:12.5px !important;font-weight:600;color:#1b2537 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
main .zd-card .zd-cell > span[class*="text-orange-400"]{color:#b96a05 !important}
main .zd-card .zd-cell > span[class*="text-red-400"]{color:#d02b20 !important}
main .zd-card .zd-cell > span[class*="text-green-400"]{color:#0f8a4d !important}
main .zd-card .zd-cell > span[class*="text-blue-400"]{color:#2155ff !important}
main .zd-card .zd-cell > span[class*="text-muted-foreground"]{color:#96a3b8 !important}

/* ---------------- 底部信息行 ---------------- */
main .zd-card .zd-row{
  display:flex !important;align-items:center;gap:8px;
  padding:6px 9px !important;margin-bottom:6px !important;
  border-radius:9px !important;
  background:#f8faff !important;border:1px solid #edf2fb !important;
  min-width:0;
}
main .zd-card .zd-row > span:first-child{
  display:inline-flex !important;align-items:center;gap:5px;flex:none;
  font-size:10.5px !important;font-weight:600;color:#8b98ad !important;letter-spacing:.02em;
}
main .zd-card .zd-row > span:first-child::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#b9c4d6;flex:none;
}
main .zd-card .zd-row-ip > span:first-child::before{background:#2155ff;box-shadow:0 0 0 2px rgba(33,85,255,.12)}
main .zd-card .zd-row-phone > span:first-child::before{background:#0f8a4d;box-shadow:0 0 0 2px rgba(15,138,77,.12)}
main .zd-card .zd-row-note > span:first-child::before{background:#e29a1a;box-shadow:0 0 0 2px rgba(226,154,26,.14)}
main .zd-card .zd-row-ip > span:last-child{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px !important;font-weight:600;color:#2f6fe4 !important;
  letter-spacing:.01em;
}
main .zd-card .zd-row-phone > span:last-child{
  font-size:12px !important;font-weight:600;color:#166a41 !important;
}
main .zd-card .zd-row-note{margin-top:auto !important;margin-bottom:0 !important;padding:5px 8px !important;border-style:dashed !important}
main .zd-card .zd-note{
  width:100%;height:27px;
  background:#fff !important;border:1px solid #e6ecf7 !important;
  border-radius:7px !important;padding:0 8px !important;
  font-size:12px !important;color:#1b2537 !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
main .zd-card .zd-note::placeholder{color:#aab5c6}
main .zd-card .zd-note:hover{border-color:#d3dff2 !important}
main .zd-card .zd-note:focus{
  border-color:#8fb4ff !important;background:#fff !important;outline:none;
  box-shadow:0 0 0 3px rgba(33,85,255,.1);
}

/* 窄屏：卡片略紧一点，保证徽标 + 电量能排在同一行 */
@media (max-width:1500px){
  main div.grid.gap-4.zd-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important}
  main .zd-card .zd-badge{padding:0 6px !important;font-size:10.5px !important;height:20px !important}
  main .zd-card .zd-badges{gap:3px !important}
  main .zd-card .zd-batt > div[class*="w-7"]{width:34px !important}
  main .zd-card .zd-batt span{min-width:27px;font-size:11px !important}
}

/* ============================================================
   顶部工具栏
   ============================================================ */
main .zd-tb{
  display:flex !important;flex-wrap:wrap !important;align-items:center;
  gap:7px !important;row-gap:0 !important;
  padding:9px 10px !important;margin-bottom:14px !important;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#fafcff) !important;
  border:1px solid #e6edf9 !important;
  box-shadow:0 1px 2px rgba(15,32,64,.03),0 12px 26px -22px rgba(15,32,64,.45);
  position:relative;
}
/* 换行断点（伪元素作为 flex item，order 卡在两排中间） */
main .zd-tb::before{
  content:"";order:15;flex:0 0 100%;height:0;margin:0;padding:0;border:0;pointer-events:none;
}
main .zd-tb > *{margin-bottom:0}

/* 分段视图切换 */
main .zd-tb .zd-seg{
  display:flex !important;align-items:center;gap:2px;
  padding:2px !important;border-radius:10px;
  background:#f2f6fd !important;border:1px solid #e4ebf7 !important;
  overflow:visible !important;
}
main .zd-tb .zd-seg button{
  width:30px !important;height:26px !important;padding:0 !important;
  border:0 !important;border-radius:7px !important;background:transparent !important;
  color:#8b98ad !important;box-shadow:none !important;
}
main .zd-tb .zd-seg button svg{width:15px !important;height:15px !important}
main .zd-tb .zd-seg button:hover{background:#e7eeff !important;color:#2155ff !important}
main .zd-tb .zd-seg button[class*="text-red-400"]{
  background:#fff !important;color:#2155ff !important;
  box-shadow:0 1px 3px rgba(15,32,64,.14) !important;
}

/* 搜索 */
main .zd-tb .zd-search{flex:1 1 260px !important;min-width:200px;max-width:none !important;position:relative}
main .zd-tb .zd-search input{
  width:100% !important;height:32px !important;
  border-radius:9px !important;border:1px solid #e4ebf7 !important;
  background:#f9fbff !important;
  padding:0 12px 0 32px !important;
  font-size:12.5px !important;color:#1b2537 !important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
main .zd-tb .zd-search input::placeholder{color:#a6b2c4}
main .zd-tb .zd-search input:focus{
  background:#fff !important;border-color:#8fb4ff !important;
  box-shadow:0 0 0 3px rgba(33,85,255,.1) !important;outline:none;
}
main .zd-tb .zd-search svg{left:10px !important;width:14px !important;height:14px !important;color:#9dabc0 !important}

/* 通用胶囊按钮 */
main .zd-tb > button,
main .zd-tb .zd-filter > button{
  height:32px !important;border-radius:9px !important;
  padding:0 11px !important;gap:6px !important;
  font-size:12.5px !important;font-weight:500 !important;letter-spacing:.01em;
  border:1px solid #e4ebf7 !important;background:#fff !important;color:#4b5870 !important;
  box-shadow:0 1px 0 rgba(15,32,64,.02);
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  white-space:nowrap;
}
main .zd-tb > button svg,
main .zd-tb .zd-filter > button svg{width:15px !important;height:15px !important;opacity:.85}
main .zd-tb > button:hover,
main .zd-tb .zd-filter > button:hover{
  background:#f4f8ff !important;border-color:#c8daff !important;color:#2155ff !important;
}
main .zd-tb > button:active{transform:translateY(1px)}

/* 下拉小箭头 */
main .zd-tb .zd-filter > button::after{
  content:"";width:0;height:0;flex:none;margin-left:1px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4.5px solid currentColor;opacity:.45;
}

/* 竖向分隔线隐藏（改用整行断点） */
main .zd-tb > div[class*="w-px"]{display:none !important}

/* 第二排 */
main .zd-tb > .zd-r2{margin-top:8px !important}

/* 动作色 */
main .zd-tb .zd-a-notify{background:#f8f3ff !important;border-color:#e7d9ff !important;color:#6f3fd6 !important}
main .zd-tb .zd-a-notify:hover{background:#f2e9ff !important;border-color:#d5bcff !important;color:#5c2fc4 !important}
main .zd-tb .zd-a-move{color:#2155ff !important}
main .zd-tb .zd-a-send{color:#0f8a4d !important}
main .zd-tb .zd-a-black{color:#b96a05 !important}
main .zd-tb .zd-a-del{color:#d02b20 !important}
main .zd-tb .zd-a-del:hover{background:#fff4f3 !important;border-color:#ffc9c4 !important;color:#b42318 !important}
main .zd-tb .zd-a-all,
main .zd-tb .zd-a-alloff{border-style:dashed !important;color:#5b6880 !important}
main .zd-tb .zd-a-all{margin-left:auto !important}
main .zd-tb .zd-a-all:hover,
main .zd-tb .zd-a-alloff:hover{background:#f4f8ff !important;border-color:#c8daff !important;color:#2155ff !important}

/* 顺序 */
main .zd-tb > .zd-o1{order:1}
main .zd-tb > .zd-o2{order:2}
main .zd-tb > .zd-o3{order:3}
main .zd-tb > .zd-o4{order:4}
main .zd-tb > .zd-o5{order:5}
main .zd-tb > .zd-o6{order:6}
main .zd-tb > .zd-o7{order:7}
main .zd-tb > .zd-o8{order:8}
main .zd-tb > .zd-o9{order:9}
main .zd-tb > .zd-o20{order:20}
main .zd-tb > .zd-o21{order:21}
main .zd-tb > .zd-o22{order:22}
main .zd-tb > .zd-o23{order:23}
main .zd-tb > .zd-o24{order:24}
main .zd-tb > .zd-o25{order:25}
main .zd-tb > .zd-o26{order:26}
main .zd-tb > .zd-o27{order:27}
main .zd-tb > .zd-o28{order:28}

/* ---------------- 统计卡统一 ---------------- */
main .hb-dev-tiles.zd-kpi{gap:12px !important;margin-bottom:12px !important}
main .hb-dev-tiles.zd-kpi .hb-stat{
  border-radius:14px !important;border-color:#e6edf9 !important;
  box-shadow:0 1px 2px rgba(15,32,64,.03),0 10px 22px -20px rgba(15,32,64,.45) !important;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease !important;
}
main .hb-dev-tiles.zd-kpi .hb-stat:hover{
  border-color:#c8daff !important;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,32,64,.05),0 18px 30px -24px rgba(33,85,255,.7) !important;
}
main .hb-dev-tiles.zd-kpi .hb-stat-num{font-size:20px !important;font-variant-numeric:tabular-nums}
main .hb-dev-tiles.zd-kpi .hb-stat-lbl{font-size:11.5px !important;color:#7f8ca1 !important}

/* 单元格数量为 7 / 10 时，末格独占一行，避免半行空洞 */
main .zd-card .zd-grid-info:has(> .zd-cell:nth-child(7)):not(:has(> .zd-cell:nth-child(8))) > .zd-cell:nth-child(7),
main .zd-card .zd-grid-info:has(> .zd-cell:nth-child(10)):not(:has(> .zd-cell:nth-child(11))) > .zd-cell:nth-child(10){
  grid-column:1 / -1;
}