@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600&display=swap');

/* --- 🌟 Neo's Master Style V.36 (Dashboard Optimized) 🌟 --- */

:root { 
  --bg-color: #fdfbf7; 
  --card-bg: #ffffff; 
  --text: #5d5d5d; 
  --shadow: rgba(0, 0, 0, 0.05); 
}

body { 
  font-family: 'Fredoka', 'Kanit', sans-serif; 
  text-align: center; 
  margin: 0; 
  background: var(--bg-color); 
  color: var(--text); 
  padding-bottom: 50px; 
}

.container { padding: 0 20px; max-width: 500px; margin: 0 auto; position: relative; }

.header { 
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
  padding: 25px 15px 40px 15px; 
  border-bottom-left-radius: 40px; 
  border-bottom-right-radius: 40px; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 
  margin-bottom: -30px; 
}

.header h2 { margin: 0; color: #555; font-size: 2rem; }
.header p { margin: 5px 0 0 0; color: #777; font-size: 0.9rem; }

.card { 
  background: var(--card-bg); 
  margin-bottom: 20px; 
  padding: 20px; 
  border-radius: 25px; 
  box-shadow: 0 8px 24px var(--shadow); 
  border: 2px solid #fff; 
}

/* --- ⏰ ส่วนจัดการเวลาและโลโก้ (Responsive) --- */
.clock-box { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding-bottom: 15px; 
  margin-bottom: 15px; 
  border-bottom: 1px dashed #eee; 
}

.clock-time { 
  font-size: 3.5rem; 
  font-weight: 600; 
  color: #84a9ac; 
  line-height: 1; 
}

/* 🌟 สไตล์โลโก้อัจฉริยะปรับตามหน้าจอ 🌟 */
.dashboard-logo {
    object-fit: contain;
    transition: all 0.3s ease; 
}

@media (max-width: 599px) { /* มือถือ: โลโก้อยู่บน ไม่บังใคร */
    .dashboard-logo {
        position: static;
        display: block;
        margin: 0 auto 10px;
        width: 80px;
        height: auto;
    }
    .clock-time { font-size: 2.8rem; }
}

@media (min-width: 600px) { /* iPad/Tablet: โลโก้อยู่ข้างๆ สวยๆ */
    .dashboard-logo {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 120px;
        height: auto;
    }
}

.wifi-status { font-size: 0.8rem; margin-top: 5px; font-weight: bold; }

/* --- 🤖 AI Assistant Box --- */
.ai-box { 
  background: #fcfcfc; 
  border-radius: 15px; 
  padding: 15px; 
  margin-top: 15px; 
  border-left: 8px solid #ddd; 
  text-align: left; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 
}
.ai-header { display: flex; align-items: center; margin-bottom: 8px; }

/* --- 🌡️ ส่วนจัดการกล่องเซนเซอร์ (Environment Grid) --- */
.env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }

.env-item { 
  padding: 15px 10px; 
  border-radius: 20px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  /* 🌟 ดันตัวเลขขึ้นบน เพื่อเว้นที่ให้กราฟด้านล่าง */
  justify-content: flex-start; 
  position: relative; 
  overflow: hidden; 
}

.bg-canvas { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.val-box, .env-lbl { position: relative; z-index: 1; }

.bg-t { background: #ffe5d9; color: #ff7043; } 
.bg-h { background: #e0f7fa; color: #26c6da; }
.bg-v { background: #f3e5f5; color: #ab47bc; } 
.bg-s { background: #e8f5e9; color: #66bb6a; }
.bg-soil { background: #efebe9; color: #8d6e63; grid-column: span 2; }

.val-box { display: flex; align-items: center; justify-content: center; width: 100%; }
.icon-env { font-size: 2.2rem; margin-right: 8px; line-height: 1; }
.env-val { font-size: 2.8rem; font-weight: 300; line-height: 1; letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(255,255,255,0.8); }

/* 🌟 ชื่อเซนเซอร์ ย้ายกลับมาอยู่ใต้ตัวเลข 🌟 */
.env-lbl { 
  font-size: 0.85rem; 
  margin-top: 5px; 
  opacity: 0.9; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  order: 0; 
}

/* --- ⚡ ส่วนควบคุมอุปกรณ์ (Relay Control) --- */
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.control-card { 
  background: var(--card-bg); 
  padding: 15px; 
  border-radius: 20px; 
  box-shadow: 0 5px 15px var(--shadow); 
  border: 2px solid #fff; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}

.control-title { margin: 0 0 10px 0; color: #ffb7b2; font-size: 1rem; font-weight: bold; }
.status-box { padding: 5px; border-radius: 8px; margin-bottom: 8px; font-weight: 600; font-size: 0.75rem; }
.st-man { background: #ffdac1; color: #e57373; } 
.st-tim { background: #e2f0cb; color: #7cb342; } 
.st-ai { background: #e1f5fe; color: #0288d1; }

.input-grp { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 10px; 
  background: #f9f9f9; 
  padding: 5px; 
  border-radius: 50px; 
  width: 100%; 
  box-sizing: border-box; 
}

.timer-input { 
  font-family: 'Fredoka', sans-serif; 
  font-size: 1rem; 
  width: 40px; 
  text-align: center; 
  border: none; 
  background: transparent; 
  color: #555; 
  outline: none; 
  font-weight: bold; 
}

.unit-lbl { font-size: 0.8rem; color: #aaa; margin-left: 5px; margin-right: 5px; }
.stat-text { font-size: 0.7rem; color: #999; margin-top: 8px; font-weight: bold; letter-spacing: 0.5px; }

.btn-step { 
  background: #fff; 
  border: 1px solid #ddd; 
  border-radius: 50%; 
  width: 25px; 
  height: 25px; 
  cursor: pointer; 
  color: #888; 
  font-weight: bold; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 2px 0 #eee; 
  transition: 0.1s; 
}
.btn-step:active { transform: translateY(2px); box-shadow: none; }

.btn-toggle { 
  border: none; 
  padding: 12px; 
  font-size: 0.9rem; 
  font-weight: 600; 
  cursor: pointer; 
  border-radius: 50px; 
  width: 100%; 
  transition: all 0.1s; 
  font-family: 'Fredoka', 'Kanit', sans-serif; 
}
.btn-off { background-color: #f0f0f0; color: #aaa; box-shadow: 0 3px 0 #dcdcdc; }
.btn-on { background-color: #b5ead7; color: #3b8772; box-shadow: 0 3px 0 #8dcbad; }

/* --- 📱 แถบเมนูหลัก (Menu Grid) --- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-menu { 
  background: #c7ceea; 
  color: #5d6481; 
  padding: 15px; 
  width: 100%; 
  border: none; 
  border-radius: 20px; 
  font-size: 1rem; 
  cursor: pointer; 
  font-family: 'Fredoka', 'Kanit', sans-serif; 
  font-weight: bold; 
  box-shadow: 0 4px 0 #aab2d6; 
}
.btn-net { background: #ff9aa2; color: white; box-shadow: 0 4px 0 #e57373; }
.btn-graph { background: #ffd1dc; color: #d87093; box-shadow: 0 4px 0 #ffb6c1; }
.btn-update { background: #b2ebf2; color: #00838f; box-shadow: 0 4px 0 #80deea; }
.btn-menu:active { transform: translateY(4px); box-shadow: none; }