/* ============================================================
   LIVE DATA page
   ============================================================ */

/* ---------- controls toolbar ---------- */
.controls{
  display:flex;align-items:flex-end;gap:18px 22px;flex-wrap:wrap;
  padding:16px 20px;border-radius:var(--r);margin-bottom:22px;
  background:linear-gradient(160deg,rgba(16,24,40,.6),rgba(10,15,28,.4));
  border:1px solid var(--stroke);backdrop-filter:blur(10px);
}
.controls .field{min-width:0}
.controls .divider{width:1px;align-self:stretch;background:var(--stroke);margin:0 2px}
.controls .grow{flex:1}
.controls .range-field{min-width:190px}
.controls .range-row{display:flex;align-items:center;gap:10px}
.controls .range-val{font-family:var(--font-display);font-size:.8rem;color:var(--teal);min-width:34px;text-align:right}

/* jump-to bar */
.jump-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.jump-bar .control-label{white-space:nowrap}

/* ---------- monitor panels ---------- */
.monitors{display:flex;flex-direction:column;gap:26px}

.monitor{
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:linear-gradient(165deg,rgba(16,24,40,.62),rgba(9,13,24,.5));
  border:1px solid var(--stroke);box-shadow:var(--shadow);
}
.monitor::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:.75}

.monitor-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--stroke);
}
.monitor-head .mon-ic{width:42px;height:42px;border-radius:12px;flex:none;
  background:var(--grad-soft);border:1px solid var(--stroke-2);display:grid;place-items:center}
.monitor-head .mon-ic img{width:24px;height:24px;opacity:.9}
.monitor-title{min-width:0;flex:1}
.monitor-title h3{font-size:1.15rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.monitor-title h3 a{color:var(--text);transition:color .2s}
.monitor-title h3 a:hover{color:var(--teal)}
.monitor-title h3 .fa-dash{color:var(--dim);font-size:.8rem}
.monitor-title .last-report{font-size:.78rem;color:var(--dim);margin-top:3px}
.monitor-head .mon-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* latest readings strip */
.readings{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;border-bottom:1px solid var(--stroke)}
.reading{
  display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--stroke);transition:transform .2s,border-color .2s;
}
.reading:hover{transform:translateY(-2px);border-color:var(--stroke-2)}
.reading .r-meta{display:flex;flex-direction:column;line-height:1.15}
.reading .r-label{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.reading .r-val{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text)}
.reading .r-val .r-unit{font-size:.72rem;color:var(--muted);font-weight:500;margin-left:2px}
.reading .r-val.flash{animation:valflash .9s var(--ease)}
@keyframes valflash{0%{color:var(--lime);text-shadow:0 0 12px rgba(158,222,63,.7)}100%{color:var(--text)}}

/* sensorTypeIntelligence bin indicator (matches pulse chips) */
.reading.has-bin{
  position:relative;
  border-left:3px solid var(--bin-color);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--bin-color) 13%, transparent),
    color-mix(in srgb, var(--bin-color) 4%, transparent) 55%,
    var(--surface) 100%);
}
.reading.has-bin .r-val{color:color-mix(in srgb, var(--bin-color) 72%, #fff)}
.reading .bin-dot{
  width:8px;height:8px;border-radius:50%;flex:none;align-self:flex-start;margin-top:2px;
  background:var(--bin-color);box-shadow:0 0 8px var(--bin-color);
}

/* sensor-type icon (reused iconography from IoTCloudUI) */
.sensortype-icon{display:inline-block;width:30px;height:30px;flex:none;background-repeat:no-repeat;background-position:center;background-size:contain}
.sensortype-icon.sm{width:20px;height:20px}
.type-246,.type-243,.type-244,.type-245,.type-242{background-image:url('../img/sensortypes/temperature30x30.png')}
.type-248{background-image:url('../img/sensortypes/rh30x30.png')}
.type-181{background-image:url('../img/sensortypes/CO2-30x30.png')}
.type-182{background-image:url('../img/sensortypes/eCO2-30x30.png')}
.type-100,.type-99{background-image:url('../img/sensortypes/pressure.png')}
.type-96{background-image:url('../img/sensortypes/VOCicon.png')}
.type-64{background-image:url('../img/sensortypes/CO.png')}
.type-32,.type-33,.type-34,.type-35,.type-36,.type-37,.type-38,.type-39,.type-40{background-image:url('../img/sensortypes/PM icon.png')}
.type-49,.type-50,.type-51{background-image:url('../img/sensortypes/volume-icon.png')}
.type-115{background-image:url('../img/sensortypes/light-icon.png')}
.type-52,.type-53,.type-54{background-image:url('../img/sensortypes/vibration-30x30.png')}
.type-28{background-image:url('../img/sensortypes/AQI-30x30.png')}

/* chart */
.chart-wrap{padding:8px 12px 16px}
.chart-hint{font-size:.75rem;color:var(--dim);padding:2px 8px 8px;font-style:italic}
.live-chart{width:100%;height:380px}

/* stats table */
.stats-block{padding:6px 20px 22px}
.stats-block h5{font-size:1rem;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.stats-block .stats-note{font-size:.72rem;color:var(--dim);font-weight:400;font-family:var(--font-body)}
.stats-table{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:10px}
.stats-table thead th{
  text-align:left;font-family:var(--font-display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--stroke-2);
}
.stats-table tbody td{padding:9px 12px;border-bottom:1px solid var(--stroke);color:var(--muted)}
.stats-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.stats-table tbody tr:hover td{background:var(--surface)}
.stats-table .st-type{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:500;font-family:var(--font-display)}
.stats-table .st-num{font-variant-numeric:tabular-nums;color:var(--text)}
.stats-table .st-swatch{width:10px;height:10px;border-radius:3px;flex:none}

/* empty / loading states */
.state{display:grid;place-items:center;text-align:center;padding:70px 20px;color:var(--muted)}
.state .state-ic{font-size:2.4rem;margin-bottom:10px;opacity:.8}
.state h3{margin-bottom:6px}

.skeleton{position:relative;overflow:hidden;background:var(--surface)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* connection banner */
.conn-status{display:inline-flex;align-items:center;gap:8px}

@media(max-width:640px){
  .live-chart{height:280px}
  .controls{gap:14px}
  .monitor-head{padding:14px}
  .readings{padding:14px}
}