:root{
  --bg-main:#090f1a;
  --bg-panel:#111827;
  --bg-panel-soft:#151b27;
  --bg-card:#0f172a;
  --text-main:#f9fafb;
  --text-muted:#9ca3af;
  --border:rgba(255,255,255,.08);
  --blue:#3b82f6;
  --purple:#a855f7;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#eab308;
  --orange:#f97316;
  --r-lg:18px;
  --r-xl:24px;
}

*{box-sizing:border-box}

body{
  margin:0;
  padding:10px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#162033 0,#08101c 52%,#050914 100%);
  color:var(--text-main);
}

.dashboard-shell{
  max-width:1540px;
  margin:0 auto;
  background:rgba(8,13,24,.92);
  border:1px solid rgba(255,255,255,.05);
  border-radius:0;
  padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* ===== Верхняя SCADA-панель ===== */
.top-status-bar{
  display:grid;
  grid-template-columns:1.4fr auto 1.2fr;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  padding:14px 18px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.92));
  border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 30px rgba(0,0,0,.32);
}

.top-left{min-width:0}

.dashboard-header{
  margin:0;
  font-size:28px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#dbe4f2;
}

.top-subtitle{
  margin-top:5px;
  font-size:12px;
  color:#94a3b8;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.top-center{
  display:flex;
  align-items:center;
  gap:10px;
}

.status-live,
.norm-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.status-live{
  color:#bbf7d0;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.36);
}

.norm-pill{
  color:#dbeafe;
  background:rgba(59,130,246,.16);
  border:1px solid rgba(59,130,246,.36);
}

.live-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 14px rgba(34,197,94,.85);
  animation:livePulse 1.4s infinite;
}

@keyframes livePulse{
  0%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
  100%{opacity:.45;transform:scale(.85)}
}

.top-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.time-box{
  min-width:118px;
  padding:7px 12px;
  border-radius:14px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(148,163,184,.18);
  text-align:right;
}

.top-clock{
  font-size:20px;
  font-weight:900;
  color:#f8fafc;
  font-variant-numeric:tabular-nums;
}

.top-date{
  margin-top:2px;
  font-size:11px;
  color:#94a3b8;
  font-variant-numeric:tabular-nums;
}

.settings-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:#e5e7eb;
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.settings-link img{width:18px;height:18px;opacity:.9}
.settings-link:hover{background:rgba(255,255,255,.12);transform:rotate(10deg)}


/* ===== Основная сетка ===== */
.dashboard-grid{
  display:grid;
  grid-template-columns:1.15fr 1.25fr;
  grid-template-areas:
    "temp daily"
    "temp map"
    "metrics map"
    "metrics side";
  gap:12px;
  align-items:start;
}

.panel-large{
  grid-area:temp;
}

.panel-right-top{
  grid-area:daily;
}

.panel-bottom-left{
  grid-area:metrics;
}

.panel-map{
  grid-area:map;
}

.side-stack{
  grid-area:side;
  display:grid;
  gap:12px;
  align-content:start;
}

.panel-current,
.panel-alarms{
  display:none;
}




.split-charts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-container{position:relative;height:320px}
.chart-container-small{position:relative;height:142px}

.live-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 18px;
  border-radius:8px;
  background:rgba(34,197,94,.22);
  color:#86efac;
  font-weight:800;
  letter-spacing:.04em;
  font-size:12px;
}
.live-pill.small{padding:4px 11px;font-size:11px}

/* ===== Легенды ===== */
.legend-ids{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:8px;font-size:13px}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-color{width:10px;height:10px;border-radius:999px}
.blue{background:var(--blue)}
.purple{background:var(--purple)}
.white{background:#fff}
.green{background:var(--green)}
.orange{background:var(--orange)}
.latest-row{font-size:13px;color:#cbd5e1;line-height:1.4;margin-bottom:6px}

.map-legend-inline{display:flex;gap:12px;flex-wrap:wrap;color:#cbd5e1;font-size:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:5px}
.dot.ok{background:var(--green)}
.dot.alarm{background:var(--red)}
.dot.nodata{background:#64748b}

.legend-status{display:flex;align-items:center;gap:10px;margin:11px 0;color:#e5e7eb}
.legend-status small{color:var(--text-muted)}
.status-icon{font-size:25px;line-height:1}
.status-icon.ok{color:var(--green)}
.status-icon.alarm{color:var(--red)}
.status-icon.nodata{color:#64748b}

/* ===== Метрики влажности и батареи ===== */
.metric-row{display:flex;align-items:center;margin-bottom:8px;font-size:13px}
.metric-label{width:44px;font-weight:700}
.metric-bar-bg{flex:1;height:10px;border-radius:999px;background:#020617;overflow:hidden;margin:0 9px}
.metric-bar-fill{height:100%;border-radius:inherit;background:var(--blue)}
.metric-bar-fill-batt{height:100%;border-radius:inherit}
.batt-good{background:var(--green)}
.batt-mid{background:var(--yellow)}
.batt-low{background:var(--red)}
.batt-label-low{color:var(--red);border:1px solid var(--red);border-radius:999px;padding:1px 6px}
.metric-value{width:45px;text-align:right;font-weight:700}
.offline-text{color:#f87171!important}
.offline-dot{opacity:.55!important;filter:grayscale(1)}
.offline-zone{opacity:.35!important}

/* ===== Боковые панели тревог/статистики, если используются ===== */
.current-readings{display:flex;flex-direction:column;gap:6px}
.reading-row{display:grid;grid-template-columns:52px 1fr 52px 24px;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums}
.reading-row.ok{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
.reading-row.alarm{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.42)}
.reading-row.nodata,.reading-row.offline{color:#cbd5e1;opacity:.7}
.alarm-title{color:#f87171}
.active-alarms{display:flex;flex-direction:column;gap:8px}
.alarm-card{border:1px solid rgba(239,68,68,.55);background:linear-gradient(135deg,rgba(127,29,29,.34),rgba(15,23,42,.80));border-radius:10px;padding:12px;color:#fee2e2}
.alarm-head{font-weight:900;color:#f87171;margin-bottom:6px}
.alarm-card b{display:block;color:#ff6b6b;margin:5px 0}
.alarm-card small{color:#cbd5e1}
.no-alarm{padding:14px;border:1px solid rgba(34,197,94,.30);background:rgba(34,197,94,.10);border-radius:10px;color:#86efac}
.stats-box{display:grid;gap:9px}
.stats-box div{display:flex;justify-content:space-between;color:#cbd5e1}
.stats-box .ok{color:#86efac}
.stats-box .alarm{color:#f87171}
.norm-big{font-size:29px;font-weight:900;color:#4ade80;text-align:center;margin-top:8px}
.norm-caption{text-align:center;color:var(--text-muted);font-size:13px}

/* ===== Карта склада ===== */
.room-layout{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#0b1120;
}

.room-layout img{
  width:100%;
  height:auto;
  display:block;
}

/* Светящиеся зоны вокруг датчиков */
.zone-overlay{
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:8;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .25s ease;
}

#zone-id1{left:12%;top:55%;width:180px;height:180px}
#zone-id2{left:50%;top:60%;width:180px;height:180px}
#zone-id3{left:88%;top:50%;width:180px;height:180px}
#zone-id4{left:50%;top:30%;width:180px;height:180px}
#zone-id5{left:20%;top:10%;width:180px;height:180px}

.zone-overlay.ok{
  opacity:1;
  background:radial-gradient(circle,rgba(34,197,94,.38) 0%,rgba(34,197,94,.20) 34%,rgba(34,197,94,.08) 58%,rgba(34,197,94,0) 76%);
  filter:blur(2px);
  box-shadow:0 0 35px rgba(34,197,94,.32),0 0 85px rgba(34,197,94,.22);
}

.zone-overlay.alert{
  opacity:1;
  background:radial-gradient(circle,rgba(239,68,68,.52) 0%,rgba(239,68,68,.30) 34%,rgba(239,68,68,.12) 58%,rgba(239,68,68,0) 78%);
  filter:blur(2px);
  box-shadow:0 0 40px rgba(239,68,68,.55),0 0 110px rgba(239,68,68,.40);
  animation:glowAlarmPulse 1.35s infinite;
}

.zone-overlay.offline-zone{
  opacity:.35;
  background:radial-gradient(circle,rgba(148,163,184,.28) 0%,rgba(148,163,184,.10) 50%,rgba(148,163,184,0) 75%);
  filter:blur(2px) grayscale(1);
}

@keyframes glowAlarmPulse{
  0%{transform:translate(-50%,-50%) scale(.92);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.10);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.92);opacity:.55}
}

/* Карточки датчиков */
.sensor-dot-label{
  position:absolute;
  min-width:116px;
  padding:8px 12px 9px;
  border-radius:13px;
  background:rgba(15,23,42,.93);
  border:2px solid rgba(148,163,184,.45);
  box-shadow:0 12px 26px rgba(0,0,0,.42);
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  z-index:20!important;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  color:#e5e7eb;
}

.sensor-dot-label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-25px;
  transform:translateX(-50%);
  width:17px;
  height:17px;
  background:currentColor;
  border:3px solid rgba(255,255,255,.95);
  border-radius:50% 50% 50% 0;
  rotate:-45deg;
  box-shadow:0 5px 12px rgba(0,0,0,.45);
}

.sensor-dot-label .sensor-id{font-size:13px;letter-spacing:.12em;line-height:1}
.sensor-dot-label .sensor-temp{font-size:21px;line-height:1.05}
.sensor-dot-label .sensor-rh{font-size:14px;color:#cbd5e1}

.sensor-dot-label.sensor-ok{
  border-color:#22c55e;
  color:#4ade80;
  box-shadow:0 0 0 1px rgba(34,197,94,.22),0 0 25px rgba(34,197,94,.32),0 12px 26px rgba(0,0,0,.42);
}

.sensor-dot-label.sensor-alarm{
  border-color:#ef4444;
  color:#f87171;
  animation:sensorAlarmPulse 1.25s infinite;
  box-shadow:0 0 0 1px rgba(239,68,68,.30),0 0 30px rgba(239,68,68,.60),0 12px 26px rgba(0,0,0,.42);
}

.sensor-dot-label.sensor-nodata{border-color:#64748b;color:#cbd5e1;opacity:.75}
.sensor-dot-label.sensor-offline{border-color:#f87171;color:#fecaca;opacity:.65;filter:grayscale(1)}

@keyframes sensorAlarmPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.06)}
}

#dot-id1{left:13%;top:57%}
#dot-id2{left:50%;top:65%}
#dot-id3{left:84%;top:52%}
#dot-id4{left:53%;top:34%}
#dot-id5{left:25%;top:16%}

/* Tooltip */
.sensor-tooltip{
  position:absolute;
  z-index:50;
  pointer-events:none;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 120ms ease,transform 120ms ease;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(17,24,39,.96);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  min-width:190px;
  backdrop-filter:blur(6px);
  font-size:13px;
}
.sensor-tooltip.show{opacity:1;transform:translateY(0)}
.sensor-tooltip .tt-title{font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.sensor-tooltip .tt-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35);color:#bbf7d0}
.sensor-tooltip.alert .tt-badge{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35);color:#fecaca}
.sensor-tooltip .tt-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-top:1px dashed rgba(255,255,255,.08)}
.sensor-tooltip .tt-k{color:rgba(229,231,235,.75)}
.sensor-tooltip .tt-v{color:#fff;font-variant-numeric:tabular-nums}

/* ===== Адаптив ===== */
@media(max-width:1100px){
  .dashboard-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "temp"
      "daily"
      "metrics"
      "map"
      "side";
  }
  .panel-large,.panel-right-top,.panel-bottom-left,.panel-map,.side-stack{grid-column:1/-1;grid-row:auto}
  .panel-map{width:100%;margin:0}
  .split-charts{grid-template-columns:1fr}
  .dashboard-header{font-size:23px}
  .chart-container{height:310px}
}

@media(max-width:900px){
  .top-status-bar{grid-template-columns:1fr;gap:12px}
  .top-center,.top-right{justify-content:flex-start;flex-wrap:wrap}
  .time-box{text-align:left}
}

@media(max-width:768px){
  body{padding:0}
  .dashboard-shell{padding:12px}
  .sensor-dot-label{min-width:78px;padding:5px 7px}
  .sensor-dot-label .sensor-temp{font-size:15px}
  .sensor-dot-label .sensor-id{font-size:10px}
  .sensor-dot-label .sensor-rh{font-size:11px}
  .sensor-dot-label::after{width:12px;height:12px;bottom:-19px}
  .panel{padding:12px}
  .chart-container{height:320px}
  .chart-container-small{height:220px}
  .current-readings{font-size:13px}
  #zone-id1,#zone-id2,#zone-id3,#zone-id4,#zone-id5{width:110px;height:110px}
}

/* ===== FORCE LAYOUT OVERRIDE 20260603 ===== */

.dashboard-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) !important;
  grid-template-areas:
    "temp daily"
    "temp map"
    "metrics map"
    "metrics side" !important;
  gap:12px !important;
  align-items:start !important;
}

.panel-large{
  grid-area:temp !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

.panel-right-top{
  grid-area:daily !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

.panel-bottom-left{
  grid-area:metrics !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

.panel-map{
  grid-area:map !important;
  grid-column:auto !important;
  grid-row:auto !important;
  width:100% !important;
  margin:0 !important;
}

.side-stack{
  grid-area:side !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

.panel-current,
.panel-alarms{
  display:none !important;
}

.room-layout img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
}

@media(max-width:1100px){
  .dashboard-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "temp"
      "daily"
      "metrics"
      "map"
      "side" !important;
  }
}

/* ===== Подтянуть карту склада вверх справа ===== */

.panel-right-top{
  padding:10px 14px !important;
}

.panel-right-top .panel-title{
  margin-bottom:4px !important;
  font-size:13px !important;
  line-height:1.15 !important;
}

.panel-right-top .split-charts{
  gap:14px !important;
}

.panel-right-top .chart-container-small{
  height:105px !important;
}

.panel-map{
  align-self:start !important;
  margin-top:-24px !important;
  padding:12px !important;
}

.panel-map .panel-title-row{
  margin-bottom:6px !important;
}

.panel-map .panel-title{
  margin-bottom:0 !important;
  font-size:13px !important;
}

.panel-map .room-layout{
  max-height:430px !important;
}

.panel-map .room-layout img{
  width:100% !important;
  display:block !important;
}

/* ===== FINAL RIGHT COLUMN LAYOUT ===== */

.dashboard-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) !important;
  grid-template-areas:
    "temp right"
    "metrics right" !important;
  gap:12px !important;
  align-items:start !important;
}

.panel-large{
  grid-area:temp !important;
}

.panel-bottom-left{
  grid-area:metrics !important;
}

.right-column{
  grid-area:right !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  min-width:0 !important;
}

.panel-right-top,
.panel-map{
  width:100% !important;
  margin:0 !important;
}

.panel-right-top{
  padding:10px 14px !important;
}

.panel-right-top .chart-container-small{
  height:105px !important;
}

.panel-map{
  padding:12px !important;
}

.panel-map .room-layout{
  max-height:520px !important;
}

.panel-map .room-layout img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}

@media(max-width:1100px){
  .dashboard-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "temp"
      "right"
      "metrics" !important;
  }
}