/* 设置html的基础字体大小 */
html {
    font-size: 16px; /* 默认字体大小为18px */
}
.nav-link {
    cursor: pointer;
}
/* 按钮的基础样式 */
.button-common {
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时指针变为手型 */
    padding: 1px 1px; /* 统一内边距 */
    font-size: 18px; /* 字体大小 */
    transition: background-color 0.8s; /* 背景颜色过渡效果 */
    margin: 5px; /* 按钮之间的间距 */
    width: 100px; /* 统一宽度 */
    height: 65px; /* 统一高度 */
    display: inline-block; /* 确保按钮在同一行显示 */
    vertical-align: middle; /* 垂直居中 */
}

/*不同按钮的具体样式*/
.LBS_Button {
    background-color: #0094ff; /* 背景色 */
    color: white; /* 文字颜色 */
    font-size: 11px; /* 字体大小 */
}

.sleep-button {
    background-color: deepskyblue; /* 背景色 */
    color: white; /* 文字颜色 */
}

.wake-up-button {
    background-color: #45a049; /* 背景色 */
    color: white; /* 文字颜色 */
}
.reboot-button {
    background-color: cornflowerblue; /* 背景色 */
    color: white; /* 文字颜色 */
}


.forceStart-button {
    background-color: cornflowerblue; /* 背景色 */
    color: white; /* 文字颜色 */
}

.heating-button {
    background-color: red; /* 保持红色背景色 */
    color: white; /* 文字颜色 */
}
.appointment-heating-button {
    background-color: red; /* 保持红色背景色 */
    color: white; /* 文字颜色 */
}

    /* 鼠标悬停按钮时的样式变化 */
    .reboot-button:hover,
    .forceStart-button:hover,
    .heating-button:hover,
    .appointment-heating-button:hover {
        opacity: 0.9; /* 修改透明度 */
    }
/* 小屏幕设备 (手机, 767px及以下) */
@media (max-width: 767px) {
    .button-container {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 居中对齐 */
    }

    .button-common {
        flex: 1 1 calc(33% - 10px); /* 更新为每行三个按钮，每个占据三分之一宽度减去间距 */
        max-width: calc(25% - 10px); /* 确保不超过三分之一宽度 */
        margin-bottom: 10px; /* 增加底部间距，避免按钮间过于紧凑 */
    }
    #DesktopDisplayOnly {
        display: none; /* 在大屏幕上隐藏特定元素 */
    }

    #MobileDisplayOnly {
        display: block; /* 在大屏幕上隐藏特定元素 */
    }

    .byteTest {
        width: 100%;
        border-collapse: collapse;
        overflow-x: auto; /* 允许水平滚动 */
    }

        .byteTest tr {
            display: table;
            width: 100%;
            table-layout: fixed; /* 固定表格布局 */
        }

        .byteTest th{
      
            width: calc(100%);
        }
        .byteTest td {
            display: table-cell;
            word-wrap: break-word;
            white-space: normal;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
            width: calc(100% / 4); /* 每个单元格占据4分之一宽度 */
            box-sizing: border-box; /* 确保padding和border包含在width内 */
            flex: 1 1 calc(25% - 1px); /* 每个单元格占据三分之一宽度减去间距 */
            max-width: calc(25% - 1px);
            margin-bottom: 10px; /* 增加底部间距，避免按钮间过于紧凑 */
        }
        /* 对于超过3列的情况，允许换行 */
        .byteTest tr {
            display: flex;
            flex-wrap: wrap;
        }


}

/* 平板设备 (横向, 大于768px且小于等于1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around; /* 调整为等宽间隔排列 */
    }

    .button-common {
        flex: 1 1 calc(25% - 10px); /* 每个按钮占据四分之一宽度减去间距 */
        max-width: calc(25% - 10px);
    }
    #DesktopDisplayOnly {
        display: block; /* 在大屏幕上隐藏特定元素 */
    }
    #MobileDisplayOnly {
        display: none; /* 在大屏幕上隐藏特定元素 */
    }

}

/* 桌面设备 (大于1024px) */
@media (min-width: 1025px) {
    .button-container {
        display: flex;
        flex-wrap: nowrap; /* 防止换行 */
        justify-content: flex-start; /* 左对齐 */
    }

    .button-common {
        flex: 1 1 calc(20% - 10px); /* 每个按钮占据五分之一宽度减去间距 */
        max-width: calc(20% - 10px);
    }
    #DesktopDisplayOnly {
        display: block; /* 在大屏幕上隐藏特定元素 */
    }
    #MobileDisplayOnly {
        display: none; /* 在大屏幕上隐藏特定元素 */
    }
}

html {
    position: relative; /* 相对定位 */
    min-height: 100%; /* 最小高度设为窗口高度 */
}

body {
    margin-bottom: 40px; /* 底部留白 */
}

/* 表格样式 */
#Details {
    width: 100%; /* 宽度自适应 */
    border-collapse: collapse; /* 边框合并 */
}

    #Details tr td {
        padding: 5px 10px; /* 内边距 */
        border: 1px solid #000000; /* 单元格边框 */
        width: 120px; /* 单元格宽度 */
    }

/* 浮动和宽度设置 */
#BatteryData {
    /*float: left;  左浮动 */
    /*width: 400px;*/ /* 宽度 */
}

template {
    display: block; /* 确保template标签被正确渲染 */
}

/* 页头样式 */
#headerbar {
    background-color: #45a049; /* 背景色 */
    box-shadow: 0 0 0 0 rgba(161, 175, 201, 4); /* 盒阴影（注意：这个阴影实际上是不可见的，因为扩展和模糊半径都是0） */
    font-size: 18px; /* 字体大小 */
    padding: 10px; /* 内边距 */
    /* margin: 5px; 这行代码被注释掉了，如果需要可以取消注释 */
}


.reference-location span {
    font-size: 14px;
}


table {
    border-collapse: collapse; /* 边框合并 */
}

td, th {
    border: 1px solid black; /* 单元格边框 */
    padding: 5px; /* 内边距 */
}

/* 表格的基本样式 */
table {
    width: 100%; /* 设置表格宽度为容器的100% */
    border-collapse: collapse; /* 合并表格边框 */
}

th, td { /* 表头和数据单元格的样式 */
    border: 1px solid #ccc; /* 灰色实线边框 */
    padding: 8px; /* 单元格内的填充 */
    text-align: left; /* 文本左对齐 */
}

th { /* 表头单元格的特定样式 */
    background-color: #cccccc; /* 灰色背景 */
}

/* 斑马条纹效果，提高可读性 */
tr:nth-child(even) { /* 每个偶数行都有浅灰色背景 */
    background-color: #f2f2f2;
}

/* 在容器内居中表格 */
.container {
    margin: 0 auto; /* 水平居中表格 */
    max-width: none; /* 移除任何最大宽度限制 */
}

/* 在较小屏幕上使表格可滚动 */
table.scrollable {
    display: block;
    overflow-x: auto;
    white-space: nowrap; /* 防止表格折行 */
}
/* 设置表格单元格的最大宽度，并使内容自动换行。*/
    table.scrollable.statistics-table th, table.scrollable td {
        max-width: 700px; /* 设置单元格的最大宽度为40px */
        word-wrap: break-word; /* 自动换行 */
        white-space: normal; /* 允许换行 */
    }



/* 导航链接居中 */
.navigation {
    text-align: center; /* 居中对齐导航链接 */
    margin-bottom: 20px; /* 可选：在导航下方添加一些空间 */
}
/* 简化后的搜索表单样式 */
.search-form {
    margin-top: 20px; /* 与导航链接保持一致的间距 */
    display: inline-block; /* 让表单与导航链接在同一行 */
    margin-bottom: 20px; /* 与导航链接保持一致的间距 */
    margin: 0 auto; /* 水平居中表单 */
}

    .search-form label {
        display: inline-block; /* 标签与输入框在同一行 */
        text-align: center; /* 居中文本 */
        width: 100px; /* 固定宽度，可以根据需要调整 */
    }

    .search-form input[type="text"] {
        padding: 5px; /* 输入框内填充 */
        width: 160px; /* 输入框宽度 */
        box-sizing: border-box; /* 包括边框和内边距 */
    }

    .search-form button {
        padding: 5px 10px; /* 按钮内填充 */
        margin-left: 10px; /* 按钮与输入框之间的间距 */
        border: none; /* 移除按钮边框 */
        background-color: #0094ff; /* 按钮背景颜色 */
        color: white; /* 按钮文字颜色 */
        cursor: pointer; /* 鼠标指针样式 */
    }

        .search-form button:hover {
            background-color: #45a049; /* 鼠标悬停时按钮背景颜色 */
        }

/* 通过背景颜色表示状态 */
.status-ok { /* 绿色背景表示正常状态 */
    background-color: green;
}

.status-fault { /* 红色背景表示不正常状态 */
    background-color: red;
}

.status-warning { /* 黄色背景表示需要注意状态 */
    background-color: yellow;
}

.status-unavailable { /* 灰色背景表示不可用状态 */
    background-color: #cccccc;
}
/* 无特殊状态的默认样式 */
.status-neutral {
    background-color: transparent; /* 透明，默认背景颜色 */
}

.dialog-button {
    margin-right: 5px;
    padding: 5px 10px;
    font-size: 14px;
}
#appointmentHeatingBackdrop, #appointmentHeatingDialog {
    display: none;
}

#appointmentHeatingBackdrop {
    position: fixed;
    top: 30%;
    left: 50%;
    width: 400px;
    height: 100%;
    margin-top: -200px;
    margin-left: -200px;
    background-color: rgba(0,0,0,0.5);
}

#appointmentHeatingDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    z-index: 1000;
    text-align: center;
}

/* 新增样式：为对话框中的列表容器添加滚动条 */
#appointmentListContainer {
    background-color:lightgray;
    max-height: 150px; /* 根据需要调整最大高度 */
    overflow-y: auto; /* 当内容超出容器高度时显示滚动条 */
}

/*图表显示异常时，才显示出刷新微信缓存的帮助超级链接。正常时链接被图表遮挡。 
*/
.chart-container {
    position: relative;
}

.chart-fallback {
    margin-top: 10px;
    text-align: center;
    color: #ff4d4d; /* 提示信息颜色 */
}
.statistics-table th, .statistics-table td {
    vertical-align: top;
}