/* พื้นฐานและการตั้งค่าฟอนต์ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none; user-select: none;
}

/* 2. กำหนดตัวแปรสี (Light Mode เป็นค่าเริ่มต้น) */
:root {
    --bg-color: #f0f2f5;          /* พื้นหลังเทาอ่อนเพื่อให้ Navbar สีขาวลอยเด่นขึ้น */
    --text-color: #1a1a1a;
    --card-bg: #ffffff;
    --card-text: #333333;
  
    --nav-text: #4b5563;          /* สีตัวอักษรเมนู */
    --nav-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --border-color: #e5e7eb;      /* เส้นขอบสำหรับโหมดสว่าง */

    --overlay-bg: rgba(255, 255, 255, 0.7); /* สีขาวจางๆ ในโหมดสว่าง */
    --blur-intensity: 8px; /* เพิ่มความเบลอให้เห็นความต่างชัดเจน */
}

/* 3. ตัวแปรสีสำหรับ Dark Mode */
body.dark-mode {
    --bg-color: #121212;
    --text-color: #ffffff;
    --card-bg: #ffffff;           /* การ์ดยังเป็นสีขาวตามความต้องการเดิม */
    --card-text: #333333;
    --nav-bg: rgba(255, 255, 255, 0.05);
    --nav-text: #cccccc;
    --nav-shadow: none;
    --border-color: rgba(255, 255, 255, 0.1);

    --overlay-bg: rgba(0, 0, 0, 0.6); /* สีดำจางๆ ในโหมดมืด */
    --blur-intensity: 5px;

}

/* 2. การตั้งค่าพื้นฐาน */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /*font-family: 'Kanit', sans-serif;*/
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    min-height: 100vh;
}

/* 3. ปุ่ม Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #555;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #27ae60; }
input:checked + .slider:before { transform: translateX(24px); }


header {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 20px 20px 0;
}


/* การจัดวาง Navbar ปกติ */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    position: relative;

    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color); 
    border-radius: 15px;
    box-shadow: var(--nav-shadow); 
    transition: all 0.3s ease;
}

.nav-menu {
    display: flex;
    gap: 20px;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ปุ่ม Menu Toggle (ซ่อนไว้ก่อนในจอคอม) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-color);
    cursor: pointer;
}


/* --- สำหรับหน้าจอมือถือ (ยุบจอ) --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* โชว์ปุ่มขีดๆ ตามภาพ */
    }

    .nav-menu {
        
        display: none; /* ซ่อนเมนูไว้ก่อน */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--nav-bg);
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--nav-shadow);
        z-index: 1000;
    }

    /* เมื่อกดเปิดเมนู  */
    .nav-menu.active {
        display: flex;
    }

    .nav-controls {
        gap: 10px;
    }

    /* ปรับปุ่มออกจากระบบให้เล็กลงในมือถือ */
    .logout-btn {
        padding: 6px 12px;
        font-size: 14px;
    }
}


.fake-link {
        color: #111111; /* สีน้ำเงินสำหรับหน้าจอปกติ */
        cursor: pointer;
        text-decoration: none;
        transition: color 0.3s ease; /* เพิ่มความสมูทตอนเปลี่ยนสี */
    }

    .fake-link:hover {
        color: #3db1fe;
    }

    /* --- ปรับแต่งสำหรับโหมดมืด (Dark Mode) --- */
  body.dark-mode .fake-link {
    color: #ffffff;
        cursor: pointer;
        text-decoration: none;
    transition: color 0.3s ease;

}
  body.dark-mode .fake-link:hover {
     color: #3db1fe;

}




/* สถานะปกติ: ไม่มีเส้นใต้ */
.nav-links a, .nav-menu a {
    text-decoration: none !important; 
    color: var(--nav-text);
    transition: all 0.3s ease;
}

/* สถานะเมื่อเอาเมาส์ชี้ (Hover) หรือกดลิงก์ (Active/Focus): ก็ยังไม่มีเส้นใต้ */
.nav-links a:hover, 
.nav-links a:active, 
.nav-links a:focus,
.nav-menu a:hover {
    text-decoration: none !important;
    color: #2563eb; /* เปลี่ยนสีแทนการใช้เส้นใต้เพื่อให้รู้ว่ากดได้ */
    opacity: 0.8;
}

/* สไตล์ของ Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg); /* ใช้ตัวแปรสีตามโหมด */
    backdrop-filter: blur(var(--blur-intensity)); /* ทำให้ฉากหลังเบลอ */
    -webkit-backdrop-filter: blur(var(--blur-intensity)); /* รองรับ Safari */
    display: none;
    z-index: 900; /* อยู่ใต้ Nav Menu แต่ทับส่วนแสดงรายการ */
    transition: all 0.4s ease;
}

.menu-overlay.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .nav-menu {
        /* ... สไตล์เดิม ... */
        background: var(--nav-bg);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* เพิ่มเงาให้เมนูดูแยกจาก Overlay */
        border-radius: 0 0 15px 15px;
        z-index: 1000; /* ต้องสูงกว่า Overlay */
    }
}





/* 6. ปุ่ม Toggle สลับโหมด */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}


.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #9ca3af;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #27ae60; }
input:checked + .slider:before { transform: translateX(24px); }

/* 7. การ์ดอุปกรณ์ (IoT Cards) */
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 50px;
}




/* 1. เพิ่มจุดหน้าคลาส device-grid */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    
}




.input-group-fix {
    margin-bottom: 15px;
    text-align: left;
}

.input-group-fix label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.device-card {
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* เงาการ์ดให้ดูนุ่มนวล */
    border: 1px solid var(--border-color);
}


.device-card-login {

    border-radius: 12px; 
    /* 2. ลด Padding ลงเพื่อให้การ์ดดูไม่ใหญ่เทอะทะ (จากเดิม 25px) */
    padding: 15px 20px; 
    /* 3. ปรับเงาให้เบาลงเพื่อให้เข้ากับขนาดที่เล็กลง */

    /* 4. เอาเส้นขอบออก */
    border: none; 
    /* 5. กำหนดความกว้างสูงสุดเพื่อไม่ให้มันขยายจนกว้างเกินไป */
    max-width: 300px; 
    margin: 0 auto; /* จัดกึ่งกลางหน้าจอ */
}


/* แสดงชื่อผู้ใช้ให้ดูพรีเมียม */
.user-display-login {
    background: var(--bg-color);
    padding: 12px 20px;
    border-radius: 12px;
    display: center;
   justify-content: center;
    align-items: center;
}



/* 2. คลาสสำหรับ Alarm ทั้งพื้นที่ Grid */
.card-alarm-active {
    animation: alarm-flash 0.8s infinite;
}

/* 3. คลาสสำหรับ Alarm เฉพาะตัวการ์ดอุปกรณ์ */
.alarm-active {
    animation: alarm-flash 0.8s infinite;
    border: 2px solid red !important;
}

/* 4. คลาส Alarm สำหรับ Dark Mode (แยกชื่อ Animation) */
/*
.dark-mode .alarm-active,
.dark-mode .card-alarm-active {
    animation: alarm-flash-dark 0.8s infinite;
    border: 2px solid #ff4d4d !important;
}
*/

/* --- ประกาศ Keyframes ไว้ด้านนอกทั้งหมด --- */

/* สำหรับ Light Mode */
@keyframes alarm-flash {
    0% { background-color: #ffffff; }
    50% { background-color: #ffcccc; } 
    100% { background-color: #ffffff; }
}

/* สำหรับ Dark Mode */
@keyframes alarm-flash-dark {
    0% { background-color: #1a1a1a; }
    50% { background-color: #441111; }
    100% { background-color: #1a1a1a; }
}



.button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
}

.btn {
    text-decoration: none;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
}


/* เอฟเฟกต์เมื่อเอาเมาส์ไปชี้ */
.btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: white; /* กันสีลิงก์เปลี่ยน */

}

/* ปุ่มควบคุมให้ยาวเต็มแถว */
.btn-control { 
    background-color: #27ae60; 
    grid-column: span 2; /* ยืดเต็ม 2 ช่อง */
    gap: 8px;
    font-size: 16px;
}

.btn-config-fix {
    background-color: #0070c0 !important; /* ปรับสีฟ้าให้เข้มขึ้น */
    color: #ffffff !important;
}
.btn-delete-fix {
    background-color: #c00000 !important; /* ปรับสีแดงให้เข้มและชัดขึ้น */
    color: #ffffff !important;
}

.btn-control-fix {
    background-color: #1f7a33 !important; /* ปรับให้เข้มขึ้น */
    grid-column: span 2;
    color: #ffffff;
}

.btn-boy-fix {
    background-color: #1f7a33 !important; /* ปรับให้เข้มขึ้น */
    color: #ffffff;
}

.btn-api-fix {
background-color: #C45500 !important; /* ส้มที่เข้มขึ้นเพื่อความชัดเจน */
    color: #FFFFFF !important;
    border: none;
}

.btn-config { background-color: #3498db; }
.btn-delete { background-color: #e74c3c; }
.btn-boy { background-color: #27ae60; }
.btn-api { background-color: #f8a711; }


.control-toggle-full {
    grid-column: span 2;
    background: #f8f9fa;
    padding: 10px 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
}


.user-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.avatar {
    width: 40px;
    height: 40px;
    background: white;
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


.logout-btn {
    background: #c0392b;
    color: white;
    border: 1px solid #e74c3c;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: white; /* กันสีลิงก์เปลี่ยน */
}

/* ส่วนปุ่มเพิ่มอุปกรณ์ */
.add-section {
    text-align: center;
    margin-bottom: 40px;
}

.add-device-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #27ae60;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
    transition: 0.3s;
}

.add-device-btn:hover { transform: scale(1.1); }


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}



/* กลุ่มปุ่มจัดวางแบบ Grid */
.button-group {
    display: grid;
    grid-template-columns: 1fr 1fr; /* แบ่ง 2 คอลัมน์ */
    gap: 10px;
    margin-top: 15px;
}



/* จัดระเบียบหัวการ์ดให้ชื่อและสถานะอยู่คนละฝั่ง */
.card-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-status-header h3 {
    font-size: 1.1rem;
    color: var(--card-text);
}

/* สไตล์ของ Badge สถานะ */
.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* จุดวงกลมเล็กๆ ข้างหน้าอักษร */
.status-badge i {
    font-size: 0.6rem;
}

/* สี Online - เขียว */
.online {
/*
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
   */
    background-color: #E8F5E9; /* พื้นหลังเดิม */
    color: #1B5E20;          /* เปลี่ยนเป็นสีเขียวเข้ม (ผ่านเกณฑ์ Contrast) */
    border: 1px solid #1B5E20;

}

/* สี Offline - แดง */
.offline {
  /*
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
*/
    background-color: #FDEDED; /* พื้นหลังเดิม */
    color: #B71C1C;          /* เปลี่ยนเป็นสีแดงเข้ม (ผ่านเกณฑ์ Contrast) */
    border: 1px solid #B71C1C;
}


/* เพิ่ม Effect กะพริบให้ Online (ถ้าต้องการ) */
.online i {
    animation: blink 2s infinite;
}

.offline i {
    animation: blink 2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/*  ส่วนที่2 */

/* การ์ดเปลี่ยนรหัสเฉพาะ */
.change-password-card {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px !important;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* แสดงชื่อผู้ใช้ให้ดูพรีเมียม */
.user-display {
    background: var(--bg-color);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed var(--border-color);
    transition: background-color 0.8s, color 0.8s;
}

.user-display .label { color: #666; font-size: 0.9rem;  transition: background-color 0.8s, color 0.8s; }
.user-display .value { font-weight: bold; color: var(--text-color);  transition: background-color 0.8s, color 0.8s;}

/* สไตล์ช่องกรอกข้อมูล */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ปรับแต่งกลุ่มตัวเลือกแสดงรหัส */
.show-pass-wrapper label {
    font-size: 1.2rem;       /* ปรับขนาดตัวอักษร (เช่น 18px - 20px) */
    display: flex;
    align-items: center;    /* จัดให้ติ๊กกับตัวหนังสืออยู่กึ่งกลางกัน */
    justify-content: center;
    cursor: pointer;
    margin-top: 10px;
}

/* ปรับขนาดช่อง Checkbox */
.show-pass-wrapper input[type="checkbox"] {
    width: 22px;            /* ปรับความกว้างช่องติ๊ก */
    height: 22px;           /* ปรับความสูงช่องติ๊ก */
    margin-right: 8px;      /* ระยะห่างระหว่างช่องติ๊กกับตัวหนังสือ */
    cursor: pointer;
}


.input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    color: #9ca3af;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 12px 12px 45px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fcfcfc;
    font-family: 'Kanit', sans-serif;
    transition: all 0.3s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    background: #fff;
}

/* ปุ่มยืนยันแบบเต็มความกว้าง */
.btn-submit-full {
    background: #27ae60;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-submit-full:hover {
    background: #219150;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}




/* ตู้ควบคุม  */
.controls-wrapper {
    display: flex;
      flex-direction: column;
       justify-content: space-between;
    align-items: center;
   margin-bottom: 20px;

}



/* คอนเทนเนอร์หลักสำหรับจัดกลุ่มไฟสถานะ */
/* แนวนอน */
.indicator-group {
    display: flex;
      gap: 12px;          /* ระยะห่างระหว่างสถานะ */
    align-items: center;
    flex-wrap: wrap;    /* ถ้าหน้าจอแคบให้ขึ้นบรรทัดใหม่ได้ */
    /* margin: 10px 0; */
}

/* แนวตั้ง */
.control-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*  gap: 25px;  */
      gap: 5px;      
}


/* ป้ายชื่อด้านล่าง F1, F2 */
.footer-label {
    margin-top: auto;
    background: white;
    border: 2px solid #555;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: bold;
}


/* สไตล์เพิ่มเติมสำหรับไฟใต้ F1/F2 */
.bottom-light {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ปรับสีตัวอักษรในป้าย F1, F2 ให้เป็นสีเขียวตามรูปใหม่ */
.footer-label {
    color: #2ecc71; /* สีเขียวสว่าง */
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
}

/* ข้อความ Label */
.label {
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #333;
    padding: 2px 10px;
    background: white;
    margin-bottom: 5px;
    text-align: center;
    min-width: 60px;
}

/* ไฟสัญญาณ (Lights) */
.light {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #333;
    background: radial-gradient(circle, #fff 10%, #999 90%);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.yellow { background: radial-gradient(circle, #ffff00, #b2b200); }
.red-check { background: conic-gradient(#ff3333 0deg 90deg, #fff 90deg 180deg, #ff3333 180deg 270deg, #fff 270deg); }
.grey-check { background: conic-gradient(#666 0deg 90deg, #fff 90deg 180deg, #666 180deg 270deg, #fff 270deg); }
.yellow-check { background: conic-gradient(#ffff00e8 0deg 90deg, #fff 90deg 180deg, #ffff00e8 180deg 270deg, #fff 270deg); }
.green-check { background: conic-gradient(#00ff00 0deg 90deg, #fff 90deg 180deg, #00ff00 180deg 270deg, #fff 270deg); }

.red-glow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #333;
    
    /* ไล่เฉดจากแดงชมพูสว่าง (ใจกลาง) ไปแดงเข้ม (ขอบ) */
    background: radial-gradient(circle, #ffaaaa 10%, #ff0000 60%, #8b0000 100%);
    
    /* เอฟเฟกต์เรืองแสงสีแดงฟุ้งกระจาย */
    box-shadow: 
        0 0 20px rgba(255, 0, 0, 0.8), 
        inset 0 0 12px rgba(255, 255, 255, 0.5);
    position: relative;
}

/* ไฟสีฟ้าอมเขียว (เปิดใช้งาน) */
.cyan-glow {
    background: radial-gradient(circle, #7ffffa 20%, #00a8a8 100%);
    box-shadow: 0 0 15px rgba(127, 255, 250, 0.6), inset 0 0 10px rgba(255,255,255,0.5);
    border: 3px solid #444;
}


/* ไฟสีเขียวอ่อนอมเขียวเข้ม (เปิดใช้งาน) */
.green-glow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #333;
    
    /* ไล่เฉดจากเขียวมะนาวสว่าง (ใจกลาง) ไปเขียวเข้ม (ขอบ) */
    background: radial-gradient(circle, #aaffaa 10%, #2ecc71 60%, #1b5e20 100%);
    
    /* เพิ่มเอฟเฟกต์เรืองแสงสีเขียวฟุ้งกระจาย */
    box-shadow: 
        0 0 20px rgba(46, 204, 113, 0.8), 
        inset 0 0 12px rgba(255, 255, 255, 0.6);
        
    position: relative;
}

/* ไฟสีเหลืองอมส้ม (เปิดใช้งาน) */
.amber-glow {
    /* ใช้ไล่เฉดสีจากขาวเหลืองไปจนถึงส้มเข้ม */
    background: radial-gradient(circle, #fff700 10%, #ff9d00 70%, #cc7a00 100%);
    
    /* เพิ่มเงาด้านนอก (Outer Glow) และเงาด้านใน (Inner Glow) เพื่อความนูน */
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 
                inset 0 0 12px rgba(255, 255, 255, 0.6);
    
    border: 3px solid #444;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* ไฟสีเทาอ่อนอมเทาเข้ม (ปิดใช้งาน/แบบมีลายข้างใน) */
.grey-off {
    background: radial-gradient(circle, #666 20%, transparent 100%);
    border: 3px solid #333;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.button-row { display: flex; gap: 20px; }


/* ปุ่มกด (Buttons) */
.btnplc {
    /* ใช้หน่วย rem หรือปรับขนาดผ่าน variable เพื่อให้คุมง่าย */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #555;
    cursor: pointer;
    transition: all 0.1s ease-in-out;

    /* --- ส่วนที่ต้องเพิ่มเพื่อให้แสดงผลเหมือนกันบนมือถือ --- */
    -webkit-appearance: none;      /* ลบสไตล์เริ่มต้นของปุ่มใน iOS/Android */
    appearance: none;
    -webkit-tap-highlight-color: transparent; /* ลบสีฟ้าๆ เวลาแตะปุ่มบนมือถือ */
    outline: none;                 /* ลบเส้นขอบสีฟ้าเวลาโฟกัส */
    display: flex;                 /* ใช้ flex เพื่อให้จัดเนื้อหาข้างในง่าย (ถ้ามี) */
    justify-content: center;
    align-items: center;
    touch-action: manipulation;    /* ลดความหน่วงเวลาแตะ */
    
    /* ป้องกันการเลือกข้อความเวลาเผลอกดค้าง */
    -webkit-user-select: none;
    user-select: none;
}

/* สถานะปกติ */
.btnplc.green { background: #2ecc71; box-shadow: 0 5px #27ae60; }
.btnplc.red { background: #e74c3c; box-shadow: 0 5px #c0392b; }

/* เอฟเฟกต์ตอนกด (Active) */
/* ใช้ :active สำหรับการกดทั่วไป และเพิ่ม Media query เพื่อจัดการเรื่อง Hover ค้างในมือถือ */
.btnplc:active { 
    transform: scale(0.85); /* ลดลงพอเหมาะ ไม่เล็กจนเกินไป */
}

.btnplc.green:active { box-shadow: 0 2px #27ae60; }
.btnplc.red:active { box-shadow: 0 2px #c0392b; }

/* --- ส่วนของ Responsive (สำคัญมาก) --- */


/* --- เพิ่มสไตล์เมื่อมีการกด (ผ่าน JS) --- */
.btnplc.clicked {
    transform: scale(0.85);
    box-shadow: 0 2px #27ae60 !important; /* ยุบเงาลง */
}
.btnplc.red.clicked {
    box-shadow: 0 2px #c0392b !important;
}



/* สำหรับมือถือขนาดกลาง (เช่น iPhone, Android ทั่วไป) */
@media screen and (max-width: 480px) {
    .btnplc {
        width: 60px;  /* ย่อขนาดปุ่มลงเพื่อให้ไม่เบียดกัน */
        height: 60px;
        border-width: 2px; /* ลดความหนาเส้นขอบ */
    }
    
    .btnplc.green, .btnplc.red {
        box-shadow: 0 4px #27ae60; /* ลดระยะเงาให้รับกับขนาดปุ่ม */
    }
}

.buzzer-text {
   
    /* ขยายให้เต็มพื้นที่กล่องสีดำเพื่อจัดตำแหน่งข้อความข้างใน */
    width: 20px;       /* ปรับความกว้างตามต้องการ */
    height: 35px;       /* ปรับความสูงตามต้องการ */
    
    /* ใช้ Flexbox อีกครั้งเพื่อจัดตัวอักษรให้อยู่กึ่งกลางกล่องขาว */
    display: flex; 
    justify-content: center; /* กลางแนวนอน */
    align-items: center;     /* กลางแนวตั้ง */
    
    /* border-radius: 2px; */
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #333;
    padding: 2px 10px;
    background: white;
    margin-bottom: 5px;
    text-align: center;
    min-width: 60px;
}


/*  เก่า */


.input.is-pri {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px; /* ขนาดนี้ช่วยให้ iOS ไม่ Zoom อัตโนมัติ */
    border: 1px solid #00d1b2;
    border-radius: 4px;
    outline: none;
    transition: box-shadow 0.2s;
}

.input.is-pri:focus {
    box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}


.color-button-green {
            background-color: green;
            color: white;
            padding: 7px 16px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
           transition: background-color 0.2s;

                text-decoration: none;
                /*display: flex;*/
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
        
        }

        .color-button-green:active {
            background-color: black;


            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);


        }


        .color-button-red {
            background-color: #C62828;
            color: white;
            padding: 7px 16px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;

                text-decoration: none;
                /*display: flex;*/
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
        }



        .color-button-red:active {
            background-color: black;

             opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .color-button-orange {
            background-color: orange;
            color: white;
            padding: 7px 16px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;

                text-decoration: none;
                /*display: flex;*/
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
        }

        .color-button-orange:active {
            background-color: black;

             opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .color-button-blue {
            background-color: blue;
            color: white;
            padding: 7px 16px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;

                text-decoration: none;
                /*display: flex;*/
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
        }

        .color-button-blue:active {
            background-color: black;

            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }


.selected {
    background-color: #e0f0ff;
    color: #0056b3;
    border-left: 4px solid #007bff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.2);
    transition: all 0.3s ease-in-out;
}

body.dark .selected {
    background-color: #223344;
    color: #66b2ff;
    border-left: 4px solid #339af0;
    box-shadow: inset 0 0 6px rgba(51, 154, 240, 0.3);
}

 .font12 {
	font-size: 12px;
	text-align: center;
	color: white;
}

.font13 {
	font-size: 13px;
	text-align: center;
}
  .font14 {
	font-size: 14px;
	text-align: center;
}
.font16 {
	font-size: 16px;
	text-align: center;
	color: white;
}
.font16-50px {
	font-size: 16px;
	text-align: left;
    margin-left: 50px;
}
.font16-80px {
	font-size: 16px;
	text-align: left;
    margin-left: 80px;
}

  .font18 {
	font-size: 18px;
	text-align: left;
}

  .font16-center {
	font-size: 16px;
	text-align: center;
}

  .font18-center {
	font-size: 18px;
	text-align: center;
}

.font18-50px {
	font-size: 18px;
	text-align: left;
    margin-left: 50px;
}

 .font20 {
	font-size: 20px;
	text-align: center;
}

.font20-left {
	font-size: 20px;
	text-align: left;
}

.font25 {
	font-size: 25px;
	text-align: center;
}

.font30 {
	font-size: 30px;
	text-align: center;
}



/* select  */
.select.is-primary {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100px;

}

.select.is-primary select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #3273dc;
  border-radius: 8px;
  background-color: #ffffff;
  color: #363636;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50l60 60 60-60' stroke='%233273dc' stroke-width='20' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  box-shadow: 0 2px 6px rgba(50, 115, 220, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.select.is-primary select:focus {
  outline: none;
  border-color: #2759c9;
  box-shadow: 0 0 0 3px rgba(50, 115, 220, 0.25);
}

/* textarea */
textarea.js-copyfilename {
  width: 100%;
  max-width: 500px;
  padding: 12px 16px;
  font-size: 16px;
  color: #363636;
  background-color: #f9f9f9;
  border: 2px solid #3273dc;
  border-radius: 8px;
  resize: none;
  box-shadow: 0 2px 6px rgba(50, 115, 220, 0.1);
  transition: all 0.3s ease;
  line-height: 1.6;
  cursor: default;
}

textarea.js-copyfilename:focus {
  outline: none;
  border-color: #2759c9;
  box-shadow: 0 0 0 3px rgba(50, 115, 220, 0.2);
}

textarea.js-copyfilename::selection {
  background: #cce4ff;
}

.mySlides
{

box-shadow: 0px 0px 20px 5px rgb(102,102,102);
overflow: hidden;
background-color: white;
color: black;
/* border: 10px solid rgb(51,0,51); */
 border-radius: 10px; 
height: 150px;
margin-top: auto;  
margin-bottom: auto; 
width: 200px;
}

.flex-container
{
display: flex;
flex-wrap: wrap; 
gap: 8px;
}


/*  เกจ  */

.flex-container
{
display: flex;
flex-wrap: wrap; 
gap: 8px;
}

table {
    margin-left: auto;
    margin-right: auto;
}


h2 { font-size: 2.5rem; }

.header {
	 padding: 1rem;
	 margin: 0 0 2rem 0;
	 background: #f2f2f2;
}

h1 {
    font-size: 2rem;
    font-family: Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.content {
    display: flex;
}


@media screen and (max-width: 500px) /* Mobile */ {
    .content {
        flex-direction: column;
    }
}

.mask {
    
    position: relative;
    overflow: hidden;
    display: block;
    width: 12.5rem;
    height: 6.25rem;
    margin: 1.25rem;
}

.semi-circle {
    position: relative;
    display: block;
    width: 12.5rem;
    height: 6.25rem;
    background: linear-gradient(to right, #3498db 0%, #05b027 33%, #f1c40f 70%, #c0392b 100%);
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.semi-circle::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    display: block;
    width: 8.75rem;
    height: 4.375rem;
    margin-left: -4.375rem;
    background: #fff;
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.semi-circle--mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5rem;
    height: 12.5rem;

    background: transparent;
    transform: rotate(120deg) translate3d(0, 0, 0);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.semi-circle--mask::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 2;
    display: block;
    width: 12.625rem;
    height: 6.375rem;
    margin: -1px 0 0 -1px;
    background: #f2f2f2;
 
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.gauge--2 .semi-circle { background: #3498db; }
.gauge--3 .semi-circle { background: #fac106; }

.gauge--2 .semi-circle--mask { transform: rotate(20deg) translate3d(0, 0, 0); }

.mySlides1
{
  color: black;
background-color: white;
box-shadow: 0px 0px 1px 0px rgb(102,102,102);
overflow: hidden;
/* border: 10px solid rgb(51,0,51); */
 border-radius: 10px; 
height: 90px;
margin-top: auto;  
margin-bottom: auto; 
width: 250px;
}

.mySlides2
{
  color: black;
background-color: white;
box-shadow: 0px 0px 1px 0px rgb(102,102,102);
overflow: hidden;
/* border: 10px solid rgb(51,0,51); */
 border-radius: 10px; 
height: 90px;
margin-top: auto;  
margin-bottom: auto; 
width: 300px;
}



#tableReadings { border-collapse: collapse; }

#tableReadings td, #tableReadings th {
    border: 1px solid #ddd;
    padding: 10px;
}

#tableReadings tr:nth-child(even){ background-color: #f2f2f2; }

#tableReadings tr:hover { background-color: #ddd; }

#tableReadings th {
    padding: 10px;
    background-color: #2f4468;
    color: white;
}