/* index/iot-tp/iot-tp.css */

/* =========================================
   IoT Accordion & UI
========================================= */
.iot-accordion {
    background: var(--white);
    padding: 15px 20px;
    border-radius: var(--radius);
    margin-bottom: 15px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
.iot-accordion:hover { border-color: var(--primary-main); }
.iot-accordion summary {
    font-weight: bold; cursor: pointer; font-size: 1.1em;
    color: var(--primary-dark); outline: none; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.iot-accordion summary::-webkit-details-marker { display:none; }
.iot-accordion summary::after { content: "▼"; font-size: 0.8em; color: var(--primary-main); transition: transform 0.3s; }
.iot-accordion[open] summary::after { transform: rotate(180deg); }

.iot-accordion-content { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); }

/* กล่องแสดงข้อมูล Real-time */
.rt-box { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.rt-box:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(5, 150, 105, 0.15); border-color: var(--primary-main) !important; }

/* กล่องย่อยด้านใน */
.sub-box {
    border: 1px solid var(--border-color);
    padding: 15px; border-radius: 8px; margin-bottom: 15px;
    background: #fafdfa;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.sub-box:hover { border-color: var(--primary-main); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* =========================================
   Node Card (สถานะเซ็นเซอร์รายตัว)
========================================= */
.node-card { display: flex; align-items: center; padding: 12px 5px; border-bottom: 1px solid var(--border-color); gap: 10px; }
.node-card:last-child { border-bottom: none; }
.node-id { font-weight: bold; color: var(--primary-dark); flex-basis: 60px; text-align: center; }
.node-data { flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.node-data p { margin: 0; font-size: 0.9em; }
.node-age { font-size: 0.8em; color: var(--text-muted); text-align: right; flex-basis: 80px; }

/* =========================================
   Custom Checkbox (Dot Style) for IoT
========================================= */
#iotSection input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--white);
    position: relative;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    transition: all 0.2s ease;
    margin: 0 8px 0 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transform: none !important; /* ยกเลิก scale() เดิมที่ฝังใน HTML */
}

#iotSection input[type="checkbox"]:hover:not(:disabled) { border-color: var(--primary-main); }

#iotSection input[type="checkbox"]:checked {
    background-color: var(--primary-main);
    border-color: var(--primary-main);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

#iotSection input[type="checkbox"]::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 10px; height: 10px; background-color: var(--white);
    border-radius: 50%; transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#iotSection input[type="checkbox"]:checked::after { transform: translate(-50%, -50%) scale(1); }
#iotSection input[type="checkbox"]:disabled { background-color: #f3f4f6; border-color: #d1d5db; cursor: not-allowed; }
#iotSection input[type="checkbox"]:disabled:checked { background-color: #9ca3af; border-color: #9ca3af; }

/* =========================================
   TP04 Valve Layout 
========================================= */
.tp04-valve-days, .tp04-valve-time, .tp04-valve-moisen, .tp04-valve-mois-setting .mois-setting-row, .tp04-valve-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.tp04-valve-days { align-items: flex-start; }

/* =========================================
   Responsive (Mobile < 768px)
========================================= */
@media (max-width: 768px) {
    /* ลดขอบของ accordion ในมือถือเพื่อให้มีพื้นที่แสดงผลกราฟมากขึ้น */
    .iot-accordion { padding-left: 5px; padding-right: 5px; }
    
    /* ปรับหน้าปัด IoT สำหรับจอมือถือเล็ก */
    #iotRealtimeGrid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; }
    #iotRealtimeGrid .rt-box { padding: 8px 5px !important; }
    #iotRealtimeGrid .rt-box h4 { font-size: 0.65em !important; line-height: 1.2; letter-spacing: -0.3px; }
    #iotRealtimeGrid .rt-box p { font-size: 0.9em !important; margin-top: 4px !important; }

    /* ปรับขนาด Checkbox ในหน้าจอมือถือ */
    #iotSection input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }
    #iotSection input[type="checkbox"]::after {
        width: 8px !important;
        height: 8px !important;
    }

    /* ปรับขนาดช่องกรอกเวลา (Timer) ในหน้าจอมือถือเพื่อไม่ให้ล้นบรรทัด */
    #iotSection input[type="time"] {
        padding: 4px 6px !important;
        font-size: 0.85em !important;
        max-width: 105px !important;
    }

    /* ปรับลดช่องว่างของการ์ดย่อยให้มีพื้นที่แสดงผลมากขึ้น */
    .sub-box { padding: 10px !important; }

    /* จัดปุ่มเดี่ยวให้กึ่งกลางในมือถือ (เช่น ปุ่มเพิ่มวาล์ว, บันทึกเวลา, บันทึกความชื้น) */
    #btnAddTp04Valve, #btnSaveTimer, #btnSaveMoisture, #btnToggleVP1 {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-top: 15px !important;
    }

    /* จัดเนื้อหาในวาล์วย่อยให้อยู่กึ่งกลางในมือถือ */
    .tp04-valve-days, .tp04-valve-time, .tp04-valve-moisen, .tp04-valve-mois-setting .mois-setting-row, .tp04-valve-actions {
        justify-content: center !important;
    }
    .tp04-valve-mois-setting select {
        width: 100% !important;
        max-width: none !important;
    }
}