/* =========================================================================
   IR เฝ้าระวัง — /ir-online (การ์ดสรุป) และ /IR-xxxxxx (หน้าอุปกรณ์)
   ใช้โทเคนของ theme.css ล้วน (โทนเขียว) ไม่ตั้งพาเลตต์ใหม่
   ออกแบบจากจอมือถือขึ้นไป: ทุกอย่าง 1 คอลัมน์เป็นค่าตั้งต้น
   ========================================================================= */

/* สีสถานะความร้อน — ใช้ร่วมกันทั้งสองหน้า ไล่ตามระดับความน่ากังวล */
.ir-scope {
  --heat-ok:   var(--ok);
  --heat-warm: #d99514;
  --heat-hot:  var(--bad);
}

/* ---------------------------------------------------------------- การ์ด */
.ir-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ir-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } }

.ir-card {
  position: relative; display: block; overflow: hidden;
  padding: 18px; border: 1px solid var(--line); border-radius: 18px;
  background: #fff; box-shadow: var(--shadow); color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ir-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,48,31,.11); text-decoration: none; }
/* แถบสถานะบางๆ ด้านบนการ์ด บอกระดับได้ตั้งแต่ยังไม่อ่านตัวเลข */
.ir-card:before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--heat-ok);
}
.ir-card.warm:before { background: var(--heat-warm); }
.ir-card.hot:before  { background: var(--heat-hot); }
.ir-card.hot { border-color: #e8bdb4; }
.ir-card.stale:before { background: var(--line2); }

.ir-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.ir-card-head b { color: var(--brand); font-family: var(--mono); font-size: 14px; letter-spacing: -.2px; }
.ir-ic {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px; background: var(--mint); font-size: 16px;
}
.ir-card.hot .ir-ic { background: #fbe6e0; }
.ir-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.ir-badge.live { background: #eaf7ea; color: #22694a; }
.ir-badge.alarm { background: #fbe6e0; color: #8f3021; }

/* ตัวเลขพระเอก */
.ir-hero { display: flex; align-items: flex-end; gap: 10px; }
.ir-hero-val {
  font-size: 44px; font-weight: 800; line-height: .92; color: var(--brand);
  font-variant-numeric: tabular-nums; letter-spacing: -1.5px;
}
.ir-card.warm .ir-hero-val { color: #a86d09; }
.ir-card.hot .ir-hero-val  { color: var(--heat-hot); }
.ir-hero-unit { font-size: 15px; font-weight: 700; color: var(--muted); padding-bottom: 5px; }
.ir-hero-cap { margin-left: auto; text-align: right; color: var(--muted); font-size: 11px; font-weight: 700; padding-bottom: 4px; }

/* รางบอกระยะห่างจากเกณฑ์ — ไม่ใช่กราฟ เป็นมาตรวัดสถานะจุดเดียว */
.ir-track {
  position: relative; height: 7px; margin: 13px 0 7px;
  background: var(--surface2); border-radius: 99px; overflow: hidden;
}
.ir-track i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #7abd50, #1f8b62); transition: width .4s ease;
}
.ir-card.warm .ir-track i { background: linear-gradient(90deg, #e8c161, #d99514); }
.ir-card.hot .ir-track i  { background: linear-gradient(90deg, #e8927b, #c8452f); }
.ir-track-cap { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }

/* จุดร้อนสุด */
.ir-spot {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 12px;
  padding: 9px 11px; border-radius: 11px; background: var(--surface);
  font-size: 12.5px; color: var(--ink);
}
.ir-card.hot .ir-spot { background: #fdf0ec; }
.ir-spot svg { flex: 0 0 auto; color: var(--brand2); }
.ir-card.hot .ir-spot svg { color: var(--heat-hot); }
.ir-spot b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-spot span { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; flex: 0 0 auto; }

/* คู่ตัวเลขรอง */
.ir-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ir-pair div { padding: 9px 11px; border-radius: 11px; background: var(--surface); }
.ir-pair span { display: block; color: var(--muted); font-size: 11px; }
.ir-pair b { display: block; margin-top: 1px; color: var(--brand2); font-size: 16px; font-variant-numeric: tabular-nums; }

.ir-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.ir-card-foot .go { color: var(--brand2); font-weight: 800; }

/* --------------------------------------------------------- หน้าอุปกรณ์ */
.ir-head { display: flex; align-items: center; gap: 11px; margin: 4px 0 16px; flex-wrap: wrap; }
.ir-head p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.ir-head h1 { margin: 0; color: var(--brand); font: 800 22px var(--mono); word-break: break-all; }
.ir-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 560px) { .ir-head-actions { margin-left: 0; width: 100%; } }

.ir-alert {
  display: none; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 15px; margin-bottom: 16px;
  font-size: 14px; font-weight: 700; line-height: 1.45;
}
.ir-alert.on { display: flex; }
.ir-alert.hot   { background: #fbe6e0; border: 1px solid #e8bdb4; color: #8f3021; }
.ir-alert.warn  { background: #fdf3e0; border: 1px solid #eddcb4; color: #7d5406; }
.ir-alert .ir-ic { background: rgba(255,255,255,.65); }

/* มือถือ: เรียงลง · เดสก์ท็อป: ภาพซ้าย ตัวเลขขวา */
.ir-main { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) { .ir-main { grid-template-columns: minmax(320px, 460px) 1fr; } }

.ir-panel {
  padding: 16px; border: 1px solid var(--line); border-radius: 20px;
  background: #fff; box-shadow: var(--shadow);
}
.ir-panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.ir-panel-head h2 { margin: 0; color: var(--brand); font-size: 16px; }
.ir-panel-head small { margin-left: auto; color: var(--muted); font-size: 11.5px; }

/* แผนที่ความร้อน — เต็มความกว้างเสมอ และเป็นสี่เหลี่ยมจัตุรัสพอดี */
.ir-canvas-box { position: relative; }
#ir-canvas {
  width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 14px;
  background: #0e1c14; touch-action: manipulation; cursor: crosshair;
}
/* ป้ายพิกัดรอบภาพ ช่วยอ่านว่าช่องไหนคือช่องไหนโดยไม่ต้องนับ */
.ir-axis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin-top: 5px; }
.ir-axis span { text-align: center; color: var(--muted); font-size: 10px; font-family: var(--mono); }

.ir-scale { height: 13px; border-radius: 99px; margin-top: 13px; border: 1px solid var(--line); }
.ir-scale-row { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ปุ่มสลับโหมด — เป็นเม็ดยา แตะง่ายบนมือถือ */
.ir-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ir-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px;
  padding: 8px 14px; border: 1px solid var(--line2); border-radius: 999px;
  background: #fff; color: var(--muted); font: 700 12.5px inherit; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.ir-chip:hover { background: #f8fcf6; }
.ir-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ir-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ตารางชื่อจุด — เลขหมุดตรงกับเลขบนภาพ และจุดสีตรงกับสีในภาพ ณ สเกลปัจจุบัน */
.ir-legend { display: grid; gap: 6px; margin-top: 13px; }
.ir-legend-empty {
  padding: 11px 13px; border: 1px dashed var(--line2); border-radius: 12px;
  background: var(--surface); color: var(--muted); font-size: 12.5px; line-height: 1.6;
}
.ir-legend-empty b { color: var(--brand); }
.ir-leg {
  display: grid; grid-template-columns: 22px 12px 1fr auto; gap: 9px; align-items: center;
  padding: 8px 11px; border-radius: 11px; background: var(--surface); font-size: 13px;
}
.ir-leg.over { background: #fdf0ec; }
.ir-leg-n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #0c1c14; color: #fff; font: 800 11px var(--mono);
}
.ir-leg.over .ir-leg-n { background: var(--heat-hot); }
.ir-leg-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.ir-leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-leg-name small { display: block; color: var(--muted); font-size: 11px; font-family: var(--mono); }
.ir-leg-val { font-weight: 800; color: var(--brand2); font-variant-numeric: tabular-nums; }
.ir-leg.over .ir-leg-val { color: var(--heat-hot); }

.ir-pick {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 11px 13px; border-radius: 13px; background: var(--surface);
  color: var(--ink); font-size: 13px; min-height: 44px;
}
.ir-pick svg { flex: 0 0 auto; color: var(--brand2); }
.ir-pick b { font-variant-numeric: tabular-nums; }

/* ตัวเลขสรุป */
.ir-hero-panel { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, #f8fcf6, #eef7ea); box-shadow: var(--shadow); margin-bottom: 14px; }
.ir-hero-panel.hot { background: linear-gradient(135deg, #fff6f3, #fbe9e3); border-color: #e8bdb4; }
.ir-hero-row { display: flex; align-items: flex-end; gap: 12px; }
.ir-big { font-size: 56px; font-weight: 800; line-height: .9; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.ir-hero-panel.hot .ir-big { color: var(--heat-hot); }
.ir-big-unit { font-size: 17px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.ir-big-cap { margin-left: auto; text-align: right; }
.ir-big-cap span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ir-big-cap b { display: block; color: var(--brand2); font-size: 14px; margin-top: 2px; }

.ir-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 480px) { .ir-tiles { grid-template-columns: repeat(4, 1fr); } }
.ir-tile { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ir-tile-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.ir-tile-head svg { flex: 0 0 auto; }
.ir-tile b { display: block; margin-top: 5px; color: var(--brand); font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ir-tile small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-tile.hot b { color: var(--heat-hot); }
.ir-tile.cold b { color: var(--info); }

/* อันดับจุดร้อน */
.ir-rank { display: grid; gap: 7px; }
.ir-rank-row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 13px;
}
.ir-rank-row.over { background: #fdf0ec; }
.ir-rank-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; color: var(--muted); font: 800 11px var(--mono); }
.ir-rank-row.over .ir-rank-n { background: var(--heat-hot); color: #fff; }
.ir-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-rank-name small { display: block; color: var(--muted); font-size: 11px; font-family: var(--mono); }
.ir-rank-val { font-weight: 800; color: var(--brand2); font-variant-numeric: tabular-nums; }
.ir-rank-row.over .ir-rank-val { color: var(--heat-hot); }

.ir-note {
  margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line2);
  border-radius: 16px; background: var(--surface);
  color: var(--muted); font-size: 12.5px; line-height: 1.75;
}
.ir-note b { color: var(--brand); }

@media (max-width: 400px) {
  .ir-big { font-size: 46px; }
  .ir-hero-val { font-size: 38px; }
  .ir-head h1 { font-size: 18px; }
}