/* css/iot-pool-table.css · 03 物联网实测 · 127 座蓄水池动态实时监测大表 */

/* 实时流开关 */
.iot-stream-btn {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(161, 161, 170, 0.35); background: rgba(161, 161, 170, 0.1); color: #A1A1AA;
}
.iot-stream-btn.running { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.12); color: #34D399; }

/* 工具栏：搜索 + 胶囊 + 统计 */
.iot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.iot-search {
  flex: 0 1 260px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #E4E4E7;
  background: #0E131F; border: 1px solid rgba(255, 255, 255, 0.12); outline: none;
}
.iot-search:focus { border-color: rgba(0, 240, 255, 0.55); }
.iot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iot-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: #A1A1AA;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
}
.iot-chip:hover { color: #E4E4E7; border-color: rgba(0, 240, 255, 0.35); }
.iot-chip.active { color: #00F0FF; background: rgba(0, 240, 255, 0.12); border-color: rgba(0, 240, 255, 0.5); }
.iot-chip.warn.active { color: #FBBF24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.5); }
.iot-chip.live.active { color: #34D399; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.5); }
.iot-stats { margin-left: auto; display: flex; gap: 16px; font-size: 13px; color: #A1A1AA; }
.iot-stats b { color: #E4E4E7; font-variant-numeric: tabular-nums; }

/* 可滚动表格容器 + 吸顶表头 */
.iot-table-wrap { max-height: 460px; overflow-y: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); }
.iot-pool-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.iot-pool-table thead th { position: sticky; top: 0; z-index: 5; background: #0E131F; white-space: nowrap; }
.iot-pool-table tbody tr { cursor: pointer; }
.iot-pool-table tbody tr.row-low td { background: rgba(251, 191, 36, 0.04); }
.iot-pool-table td { font-variant-numeric: tabular-nums; vertical-align: middle; }
.iot-no { color: #00F0FF; font-weight: 600; white-space: nowrap; }
.iot-name { color: #E4E4E7; }
.iot-sub { font-size: 12px; color: #71717A; }
.iot-empty { text-align: center; color: #71717A; padding: 28px 0; }

/* 液位条 */
.iot-level { white-space: nowrap; }
.iot-bar { width: 110px; height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.iot-bar span { display: block; height: 100%; background: linear-gradient(90deg, #0EA5E9, #00F0FF); transition: width 0.6s ease; }
.iot-bar span.low { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.iot-trend { margin-left: 4px; font-weight: 700; }
.iot-trend.up { color: #34D399; }
.iot-trend.down { color: #F87171; }

/* 数据口径标签 */
.iot-tag { margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.iot-tag.real { color: #34D399; background: rgba(16, 185, 129, 0.12); }
.iot-tag.est { color: #A1A1AA; background: rgba(161, 161, 170, 0.1); }

/* 设备状态：ESP32 呼吸灯 / 孪生底座 */
.iot-dev { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.iot-dev i { width: 8px; height: 8px; border-radius: 50%; }
.iot-dev.live { color: #34D399; }
.iot-dev.live i { background: #10B981; animation: iotBreath 1.6s ease-in-out infinite; }
.iot-dev.twin { color: #7DD3FC; }
.iot-dev.twin i { background: #38BDF8; opacity: 0.7; }
@keyframes iotBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); opacity: 0.55; }
}

/* 告警徽章 */
.iot-alarm { padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.iot-alarm.low { color: #FBBF24; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.4); }
.iot-alarm.ok { color: #A1A1AA; background: rgba(255, 255, 255, 0.04); }

/* 操作按钮 */
.iot-twin-btn {
  padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; white-space: nowrap;
  color: #00F0FF; background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.35);
}
.iot-twin-btn:hover { background: rgba(0, 240, 255, 0.18); }

/* 变化行脉冲 */
.row-pulse td { animation: rowPulse 0.8s ease-out; }
@keyframes rowPulse {
  0% { background: rgba(0, 240, 255, 0.22); }
  100% { background: transparent; }
}

@media (max-width: 1366px) {
  .iot-stats { margin-left: 0; width: 100%; }
}