/*
 * 全館溫濕度總覽，兩種版面：
 * - html.mode-wall：3480 x 1080 橫式電視牆版面（固定畫布、等比例縮放、不捲動）
 * - html.mode-rwd ：一般螢幕／平板／手機的響應式版面（可捲動）
 * 由 overview.js 依視窗比例自動切換，或用網址參數 ?mode=wall / ?mode=rwd 強制指定。
 */

/* ===================== 共用樣式（即 RWD 預設值） ===================== */

body {
  min-height: 100vh;
}

.stage {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 頂部標題列 */
.wall-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 16px 14px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: white;
}

.wall-bar h1 {
  margin: 8px 16px 0 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

.wall-sub {
  font-size: 0.9rem;
  opacity: 0.8;
}

.wall-bar-right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 以 margin 取代 flex gap，相容舊版瀏覽器 */
.wall-bar > * { margin: 8px 16px 0 0; }
.wall-bar > .wall-bar-right { margin-right: 0; margin-left: auto; }
.wall-bar-right > * { margin: 8px 12px 0 0; }
.wall-bar-right > *:last-child { margin-right: 0; }

.wall-clock {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wall-bar .status-text {
  color: rgba(255, 255, 255, 0.85);
}

.nav-link {
  color: white;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 7px 12px;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.15); }

.wall-error {
  margin: 12px 16px 0;
}

/* 樓層：依寬度自動排成多欄 */
.floor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
  gap: 16px;
  padding: 16px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  box-sizing: border-box;
}

.floor-section {
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.floor-section > * + * { margin-top: 12px; }

.floor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.floor-head > * + * { margin-left: 8px; }

.floor-name {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--blue-dark);
}

.floor-avg {
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.floor-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
  cursor: zoom-in;
  display: block;
}

.floor-thumb-missing {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  min-height: 200px;
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

/* 位置卡片：2 欄 */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sensor-card {
  min-width: 0;
  min-height: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sensor-card.wide {
  grid-column: 1 / -1;
}

.sensor-card.stale {
  opacity: 0.5;
}

.sensor-pos {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-dark);
  margin-bottom: 2px;
}

.sensor-row {
  display: flex;
  align-items: baseline;
  line-height: 1.3;
}

.sensor-row > * + * { margin-left: 6px; }

.sensor-row .icon { font-size: 1rem; width: 1.3rem; }

.sensor-row .val {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sensor-row .unit {
  font-size: 0.85rem;
  color: var(--muted);
}

.sensor-time {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

.sensor-card.stale .sensor-time {
  color: #b91c1c;
  font-weight: 700;
}

/* 手機 */
@media (max-width: 480px) {
  .wall-bar { padding: 12px; }
  .wall-bar h1 { font-size: 1.3rem; }
  .wall-sub { display: none; }
  .wall-bar > .wall-bar-right { margin-left: 0; width: 100%; }
  .wall-clock { font-size: 1rem; }
  .floor-list { padding: 12px; gap: 12px; grid-template-columns: 1fr; }
  .sensor-row .val { font-size: 1.45rem; }
}

/* ===================== 電視牆版面 3480 x 1080 ===================== */

.mode-wall body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #0f172a;
}

.mode-wall .stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 3480px;
  height: 1080px;
  min-height: 0;
  transform-origin: 0 0;
  overflow: hidden;
}

.mode-wall .wall-bar {
  flex: 0 0 76px;
  flex-wrap: nowrap;
  padding: 0 32px;
}

.mode-wall .wall-bar > * { margin: 0 20px 0 0; }
.mode-wall .wall-bar > .wall-bar-right { margin-right: 0; margin-left: auto; }
.mode-wall .wall-bar-right > * { margin: 0 18px 0 0; }
.mode-wall .wall-bar-right > *:last-child { margin-right: 0; }

.mode-wall .wall-bar h1 { font-size: 2.2rem; letter-spacing: 2px; }
.mode-wall .wall-sub { font-size: 1.1rem; }
.mode-wall .wall-bar-right { flex-wrap: nowrap; }
.mode-wall .wall-clock { font-size: 1.8rem; }
.mode-wall .wall-bar .status-text,
.mode-wall .wall-bar .refresh-btn,
.mode-wall .nav-link { font-size: 1.05rem; }

.mode-wall .wall-error {
  margin: 12px 24px 0;
  font-size: 1.1rem;
}

/* 7 個樓層橫向並排 */
.mode-wall .floor-list {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: 16px;
  padding: 18px 24px 22px;
}

.mode-wall .floor-section {
  min-height: 0;
  border-radius: 18px;
}

.mode-wall .floor-name { font-size: 2.6rem; }
.mode-wall .floor-avg { font-size: 1.05rem; }

/* 位置卡片固定 2 欄 x 3 列，填滿剩餘高度 */
.mode-wall .sensor-grid {
  flex: 1;
  min-height: 0;
  grid-template-rows: repeat(3, 1fr);
}

.mode-wall .sensor-card { border-radius: 14px; padding: 10px 14px; }
.mode-wall .sensor-pos { font-size: 1.35rem; }
.mode-wall .sensor-row { line-height: 1.25; }
.mode-wall .sensor-row .icon { font-size: 1.3rem; width: 1.6rem; }
.mode-wall .sensor-row .val { font-size: 2.3rem; }
.mode-wall .sensor-row .unit { font-size: 1.05rem; }
.mode-wall .sensor-time { font-size: 0.85rem; }

/* ===================== 放大平面圖 ===================== */

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
  z-index: 10;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  background: white;
}