* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft JhengHei', sans-serif;
        }
        
        body {
            background-color: #f0f5f0;
            color: #333;
        }
        #chartdiv {
                width: 100%;
                height: 350px;
                max-width: 100%;
                background-color: #f9fdf9; /* 柔和的背景颜色 */
                border-radius: 5px;
                padding: 5px;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        /* ==========================================================================
        工具列主要樣式
        ========================================================================== */

        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2d6e3a;
            color: white;
            padding: 0.5rem 1rem;
            min-height: 100px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            gap: 5px;
            transition: all 0.5s ease-in-out; /* 平滑過渡效果 */
        }

        /* ==========================================================================
        工具列狀態變色效果
        ========================================================================== */

        /* 當溫度過高時工具列變黃 */
        /* ==========================================================================
   工具列狀態變色效果 - 優化版本
   ========================================================================== */

/* 當溫度過高時工具列 - 溫暖橙黃色調 */
.toolbar.high-temperature {
    background: linear-gradient(135deg, #ff9500 0%, #ffb347 25%, #ffa500 50%, #ffb347 75%, #ff9500 100%);
    color: #1a1a1a;
    box-shadow: 
        0 2px 8px rgba(255, 149, 0, 0.25),
        0 4px 20px rgba(255, 149, 0, 0.15);
    border-bottom: 2px solid rgba(255, 140, 0, 0.3);
}

.toolbar.high-temperature .logo-icon {
    color: #e67e00;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toolbar.high-temperature .view-btn.active {
    background: linear-gradient(135deg, #e67e00 0%, #ff8c00 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px rgba(230, 126, 0, 0.3);
}

.toolbar.high-temperature .action-btn {
    background: linear-gradient(135deg, rgba(230, 126, 0, 0.15) 0%, rgba(255, 140, 0, 0.25) 100%);
    border: 1px solid rgba(230, 126, 0, 0.4);
    color: #1a1a1a;
    backdrop-filter: blur(10px);
}

.toolbar.high-temperature .action-btn:hover {
    background: linear-gradient(135deg, rgba(230, 126, 0, 0.25) 0%, rgba(255, 140, 0, 0.4) 100%);
    box-shadow: 0 2px 8px rgba(230, 126, 0, 0.2);
    transform: translateY(-1px);
}

/* 當摔倒發生時工具列 - 現代紅色調 */
.toolbar.fall-detected {
    background: linear-gradient(135deg, #e53e3e 0%, #fc8181 25%, #e53e3e 50%, #fc8181 75%, #e53e3e 100%);
    color: white;
    box-shadow: 
        0 2px 8px rgba(229, 62, 62, 0.3),
        0 4px 20px rgba(229, 62, 62, 0.2);
    animation: alertPulse 2s infinite;
    border-bottom: 2px solid rgba(220, 53, 69, 0.4);
}

.toolbar.fall-detected .logo-icon {
    color: #fed7d7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toolbar.fall-detected .view-btn.active {
    background: linear-gradient(135deg, #c53030 0%, #e53e3e 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 6px rgba(197, 48, 48, 0.4);
}

.toolbar.fall-detected .action-btn {
    background: linear-gradient(135deg, rgba(197, 48, 48, 0.2) 0%, rgba(229, 62, 62, 0.3) 100%);
    border: 1px solid rgba(197, 48, 48, 0.5);
    color: white;
    backdrop-filter: blur(10px);
}

.toolbar.fall-detected .action-btn:hover {
    background: linear-gradient(135deg, rgba(197, 48, 48, 0.3) 0%, rgba(229, 62, 62, 0.5) 100%);
    box-shadow: 0 2px 8px rgba(197, 48, 48, 0.3);
    transform: translateY(-1px);
}

/* 當高溫且摔倒時工具列 - 活力橙紅色調 */
.toolbar.fall-and-high {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 25%, #ff7043 50%, #ff8e53 75%, #ff6b35 100%);
    color: white;
    box-shadow: 
        0 2px 8px rgba(255, 107, 53, 0.35),
        0 4px 20px rgba(255, 107, 53, 0.25),
        0 6px 30px rgba(255, 112, 67, 0.15);
    animation: criticalAlert 1.5s infinite;
    border-bottom: 2px solid rgba(255, 107, 53, 0.5);
}

.toolbar.fall-and-high .logo-icon {
    color: #ffe4d3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toolbar.fall-and-high .view-btn.active {
    background: linear-gradient(135deg, #e55100 0%, #ff6b35 100%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(229, 81, 0, 0.4);
}

.toolbar.fall-and-high .action-btn {
    background: linear-gradient(135deg, rgba(229, 81, 0, 0.2) 0%, rgba(255, 107, 53, 0.35) 100%);
    border: 1px solid rgba(229, 81, 0, 0.5);
    color: white;
    backdrop-filter: blur(10px);
}

.toolbar.fall-and-high .action-btn:hover {
    background: linear-gradient(135deg, rgba(229, 81, 0, 0.35) 0%, rgba(255, 107, 53, 0.55) 100%);
    box-shadow: 0 2px 10px rgba(229, 81, 0, 0.4);
    transform: translateY(-1px);
}

/* ==========================================================================
   增強的動畫效果
   ========================================================================== */

@keyframes alertPulse {
    0% { 
        box-shadow: 
            0 2px 8px rgba(229, 62, 62, 0.3),
            0 4px 20px rgba(229, 62, 62, 0.2);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 4px 16px rgba(229, 62, 62, 0.5),
            0 8px 32px rgba(229, 62, 62, 0.3);
        transform: scale(1.001);
    }
    100% { 
        box-shadow: 
            0 2px 8px rgba(229, 62, 62, 0.3),
            0 4px 20px rgba(229, 62, 62, 0.2);
        transform: scale(1);
    }
}

@keyframes criticalAlert {
    0% { 
        box-shadow: 
            0 2px 8px rgba(255, 107, 53, 0.35),
            0 4px 20px rgba(255, 107, 53, 0.25),
            0 6px 30px rgba(255, 112, 67, 0.15);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 6px 20px rgba(255, 107, 53, 0.6),
            0 12px 40px rgba(255, 107, 53, 0.4),
            0 18px 60px rgba(255, 112, 67, 0.25);
        transform: scale(1.002);
    }
    100% { 
        box-shadow: 
            0 2px 8px rgba(255, 107, 53, 0.35),
            0 4px 20px rgba(255, 107, 53, 0.25),
            0 6px 30px rgba(255, 112, 67, 0.15);
        transform: scale(1);
    }
}

        /* ==========================================================================
        Logo 區域
        ========================================================================== */

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            margin-right: 2rem;
            display: flex;
            align-items: center;
            min-width: 15vw;
            flex-shrink: 0;
        }

        .logo-icon {
            margin-right: 0.5rem;
            color: #8ad858;
            transition: color 0.3s ease;
        }

        /* ==========================================================================
        視圖切換器
        ========================================================================== */

        .view-switcher {
            display: flex;
            margin-right: 2rem;
        }

        .view-btn {
            padding: 1.6rem 1.2rem;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: #ccebc8;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 24px;
            white-space: nowrap; 
        }

        .view-btn.active {
            background-color: #8ad858;
            color: #2d6e3a;
            font-weight: bold;
            font-size: 24px;
        }

        .view-btn:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.15);
        }

        /* ==========================================================================
        動作按鈕
        ========================================================================== */

        .action-buttons {
            display: flex;
            margin-left: auto;
        }

        .action-btn {
            padding: 0.5rem 1rem;
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            border-radius: 4px;
            margin-left: 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            min-width: 7vw;
        }

        .action-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
        }

        .action-btn span {
            font-size: 18px;
        }

        /* ==========================================================================
        狀態顯示框
        ========================================================================== */

        .status-box {
            position: fixed;
            bottom: 5px;
            left: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            z-index: 999;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* ==========================================================================
        動畫效果
        ========================================================================== */

        @keyframes alertPulse {
            0% { 
                box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4); 
            }
            50% { 
                box-shadow: 0 4px 16px rgba(220, 53, 69, 0.8); 
            }
            100% { 
                box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4); 
            }
        }

        @keyframes criticalAlert {
            0% { 
                box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
            }
            50% { 
                box-shadow: 0 6px 20px rgba(255, 107, 53, 0.9);
            }
            100% { 
                box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
            }
        }

        /* ==========================================================================
        響應式設計 - 手機版本 (小於 480px)
        ========================================================================== */

        @media screen and (max-width: 480px) {
            .toolbar {
                max-width: 480px;
                flex-wrap: wrap;
                height: 50vh;
                gap: 5px;
                padding: 0.5rem;
            }
            
            .toolbar * {
                flex: 1 1 auto;
                min-width: 0;
            }
            
            .action-icon {
                display: none;
            }
            
            .logo {
                min-width: 120px;
                margin-right: 1rem;
                font-size: 1.2rem;
            }
            
            .view-btn {
                font-size: 16px;
                padding: 0.4rem 0.8rem;
            }
            
            .action-btn {
                min-width: 15vw;
                padding: 0.4rem 0.6rem;
            }
            
            .action-btn span {
                font-size: 16px;
            }
        }
        
        /* 主要內容區 */
        .content {
            width: 100%;         /* 使容器寬度彈性，填滿父元素 */
            height: 100%;       /* 固定高度 */
            overflow: auto;      /* 在內容超出時顯示滾動條 */
            margin: 0 auto;      /* 水平置中 */
            position: relative;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            height: 95%; 
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .sensor-card {
            background-color: white;
            margin-top: 1%; 
            margin-bottom: 0px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 1.2rem;
            display: flex;
            flex-direction: column;
            justify-content: center; /* ?�直置中 */
            align-items: center; /* 水平置中 */
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;

            width: auto; 
            max-width: 100%; 
            
            height: auto;
            min-height: 35%;  
            max-height: 100%;  
        }

        /*手機 (小於 480px) 時調整 */
        @media screen and (max-width: 480px) {
            .sensor-card {
                margin: 5px; 
                padding: 5px; 
                display: flex;
                flex-wrap: wrap; 
                justify-content: center; 
                min-height: 180px; 
                min-width: 100px; 
                box-sizing: border-box;
            }
            .dashboard {
                grid-template-columns: repeat(2, 1fr);
                height: 63.5vh;
            }
        }

        .sensor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .sensor-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #2d6e3a;
        }
        
        .sensor-value {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .sensor-unit {
            font-size: 24px;
            color: #777;
        }
        
        .sensor-status {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #8ad858;
        }
        
        .sensor-bg {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 120px;
            height: 120px;
            opacity: 0.05;
        }
        
        
        /* 詳細版特有元素 */
        .detailed-section {
            display: none;
            margin-top: 1rem;
            background-color: #f9fdf9;
        }
        
        .detailed-tabs {
            display: flex;
            border-bottom: 1px solid #2d6e3a;
            margin-bottom: 1rem;
        }
        
        .detailed-tab {
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            font-weight: bold;
            color: #777;
            transition: all 0.3s;
        }
        
        .detailed-tab.active {
            border-bottom-color: #8ad858;
            color: #2d6e3a;
        }
        
        .detailed-tab:hover:not(.active) {
            border-bottom-color: #e6f4e6;
            color: #555;
        }
        
        .detailed-content {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.25rem;
        }
        
        .chart-container {
            height: 300px;
            position: relative;
            margin-bottom: 1rem;
        }
        
        .chart-placeholder {
            width: 100%;
            height: 100%;
            background-color: #f9fdf9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2d6e3a;
        }
        
        .greenhouse-map {
            width: 100%;
            height: 250px;
            background-color: #f9fdf9;
            border: 1px dashed #ccebc8;
            border-radius: 8px;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .sensor-point {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #8ad858;
            border: 2px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .sensor-point:hover {
            transform: translate(-50%, -50%) scale(1.2);
            z-index: 10;
        }
        .button-container {
            display: flex; /* 讓按鈕橫向排列 */
            flex-wrap: wrap; /* 若按鈕過多，自動換行 */
            gap: 30px 20px; /* 設定垂直（上下）與水平（左右）間距 */
            justify-content: space-between; /* 讓按鈕均勻分布 */
            align-items: center; /* 讓按鈕在交錯時對齊 */
            padding: 20px 0; /* 增加上下的內邊距 */
        }

        .button-style {
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            background-color: #3498db;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            flex: 1; /* 讓按鈕佔據等比例空間 */
            min-width: 150px; /* 設定最小寬度，避免過小 */
            text-align: center;
            margin-top: 10px; /* 增加按鈕之間的上下距離 */
            margin-bottom: 10px;
        }

        .button-style:hover {
            transform:scale(1.1); 
            opacity:0.8;    
        }
        .sensor-point.temperature { top: 30%; left: 20%; background-color: #ff7c7c; }
        .sensor-point.humidity { top: 50%; left: 40%; background-color: #7cb8ff; }
        .sensor-point.wind { top: 20%; left: 60%; background-color: #b39ddb; }
        .sensor-point.rain { top: 70%; left: 80%; background-color: #4fc3f7; }
        .sensor-point.dewpoint { top: 60%; left: 25%; background-color: #81c784; }
        
        /* 版本切換效果 */
        body.detailed-mode .detailed-section {
            display: block;
        }
        
        body.detailed-mode .dashboard {
            grid-template-columns: repeat(6, 1fr);
            height: 25vh;
        }
        body.detailed-mode .sensor-icon{
            display: none;
        }
        body.detailed-mode .sensor-card{
            height: auto;  
            min-height: 140px; 
            max-height: 24vh; 
 
        }
        @media screen and (max-width: 480px) {
            body.detailed-mode .sensor-card{
                margin: 5px; 
                padding: 5px; 
                display: flex;
                flex-wrap: wrap; 
                justify-content: center; 
                min-height: 20vh;
                max-height: 25vh; 
                min-width: 25vw; 
                box-sizing: border-box;
            }

            body.detailed-mode .dashboard {
                grid-template-columns: repeat(3, 1fr);
                height: 45vh;
                width: 100%; /* 確保在手機上填滿寬度 */
            }
            body.detailed-mode .sensor-unit{
                font-size: 12px;
            }
            
        }
        /* 動畫效果 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .animate-pulse {
            animation: pulse 2s infinite ease-in-out;
        }
        
        .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}


.modal-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2d4f6e;
}
        
        .ipcamera {
            display: none;
            position: absolute;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.85);
            justify-content: center;
            align-items: center;
        }

        /* 影像容器 */
        .ipcamera .modal-content {
            width: 80%;
            aspect-ratio: 16 / 9;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            overflow: hidden;
        }

        .ipcamera iframe {
            border: none;
            width: 100%;
            height: 100%;
            display: block;
        }

    /* 關閉按鈕 */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 20px;
        color: white;
        cursor: pointer;
    }

    /* 視頻大小 */
    video {
        width: 100%;
        border-radius: 5px;
    }
        .aaa {
                position: fixed;
                right: 10px;
                bottom:0;
                font-size: 10px;
                color: gray;
        }
        .dashboard2 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .sensor-card2 {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .sensor-card2.expanded {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            width: 80%;
            height: 80%;
            max-width: 800px;
        }
        
        .sensor-status2 {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4CAF50;
            position: absolute;
            top: 15px;
            right: 15px;
        }
        
        .sensor-title2 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .chart-container2 {
            height: 200px;
            position: relative;
        }
        
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        
        .close-btn2 {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            z-index: 1001;
        }

       .chart-wrapper {
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-title {
            text-align: center;
            color: #333;
        }

        .chart-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        .chart-item {
            flex: 1 1 calc(50% - 20px);
            min-width: 300px;
        }

        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            padding: 15px;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        .dropdown, .update-button {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background-color: white;
            font-size: 14px;
        }

        .update-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .update-button:hover {
            background-color: #45a049;
        }