/* 表格特定样式 */
table {
    min-width: 1200px; /* 设置最小宽度为1200像素 */
}
/* 定义全局样式 */
body {
    margin: 0; /* 移除默认外边距 */
    padding: 20px; /* 设置内边距为20像素 */
    background: linear-gradient(135deg, #1e3c72, #2a5298); /* 设置渐变背景色 */
    min-height: 100vh; /* 最小高度为视口高度 */
    font-family: Arial, sans-serif; /* 设置字体为Arial或默认无衬线字体 */
    color: #333; /* 设置文字颜色为深灰色 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
}

/* 头部样式 */
.header {
    position: fixed; /* 固定定位在顶部 */
    top: 20px; /* 距离顶部20像素 */
    left: 20px; /* 距离左侧20像素 */
    right: 20px; /* 距离右侧20像素 */
    background: rgba(255, 255, 255, 0.9); /* 设置半透明白色背景 */
    padding: 10px; /* 设置内边距为10像素 */
    z-index: 10; /* 设置层级为10 */
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 设置元素间距为8像素 */
    border-radius: 4px; /* 设置圆角为4像素 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
}

/* 表格容器样式 */
.table-container {
    margin-top: 8vh; /* 距离顶部 8vh，避开固定头部 */
    height: 88vh; /* 设置高度为视口高度的 88% */
    overflow-y: auto; /* 允许垂直滚动 */
    border-radius: 4px; /* 设置圆角为 4px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 表格样式 */
table {
    width: 100%; /* 宽度为100% */
    border-collapse: collapse; /* 合并边框 */
    background: white; /* 设置背景色为白色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    table-layout: fixed; /* 固定表格布局 */
}

/* 表格头部和单元格样式 */
th,
td {
    border: 1px solid #ddd; /* 设置边框为1像素灰色 */
    padding: 12px; /* 设置内边距为12像素 */
    text-align: center; /* 文字居中对齐 */
    vertical-align: middle; /* 垂直居中对齐 */
    white-space: nowrap; /* 文字不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

/* 表格头部样式 */
th {
    background: #f2f2f2; /* 设置背景色为浅灰色 */
    font-weight: bold; /* 设置字体加粗 */
    position: sticky; /* 固定表头 */
    top: 0; /* 固定在顶部 */
    z-index: 5; /* 设置层级为5 */
}

/* 表格行悬停效果 */
tr:hover {
    background-color: #e8f4ff; /* 悬停时背景色为浅蓝色 */
}

/* 模态框样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度为100% */
    height: 100%; /* 高度为100% */
    background: rgba(0, 0, 0, 0.5); /* 设置半透明黑色背景 */
    z-index: 1000; /* 设置层级为1000 */
}

/* 模态框内容样式 */
.modal-content {
    background: white; /* 设置背景色为白色 */
    margin: 50px auto; /* 设置上下外边距为50像素，左右居中 */
    padding: 20px; /* 设置内边距为20像素 */
    width: 80%; /* 宽度为80% */
    max-width: 90%; /* 最大宽度为90% */
    min-width: 90%; /* 最小宽度为90% */
    max-height: 90vh; /* 最大高度为视口高度的90% */
    overflow-y: auto; /* 允许垂直滚动 */
    border-radius: 8px; /* 设置圆角为8像素 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 设置阴影效果 */
}

/* 按钮样式 */
button {
    padding: 4px 6px; /* 设置内边距为4像素上下，6像素左右 */
    margin: 5px; /* 设置外边距为5像素 */
    background: #2a5298; /* 设置背景色为深蓝色 */
    color: white; /* 设置文字颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 设置圆角为4像素 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: background 0.3s; /* 设置背景色过渡效果为0.3秒 */
}

/* 按钮悬停效果 */
button:hover {
    background: #1e3c72; /* 悬停时背景色变为更深的蓝色 */
}

/* 表单容器样式 */
.form-container {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列，最小宽度250像素 */
    gap: 15px; /* 设置网格间距为15像素 */
    padding: 15px 0; /* 设置上下内边距为15像素 */
}

/* 表单组样式 */
.form-group {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 4px; /* 设置子元素间距为4像素 */
}

/* 表单标签样式 */
.form-group label {
    color: #666; /* 设置文字颜色为浅灰色 */
    font-size: 0.9em; /* 设置字体大小为0.9倍 */
    text-align: left; /* 文字左对齐 */
}

/* 表单输入框和选择框样式 */
.form-group input,
.form-group select {
    padding: 6px 10px; /* 设置内边距为6像素上下，10像素左右 */
    border: 1px solid #ddd; /* 设置边框为1像素灰色 */
    border-radius: 6px; /* 设置圆角为6像素 */
    font-size: 0.95em; /* 设置字体大小为0.95倍 */
    min-height: 32px; /* 最小高度为32像素 */
    box-sizing: border-box; /* 边框和内边距包含在宽高中 */
}

/* 表单输入框和选择框聚焦样式 */
.form-group input:focus,
.form-group select:focus {
    border-color: #2a5298; /* 聚焦时边框颜色为深蓝色 */
    outline: none; /* 移除默认轮廓 */
}

/* 过滤器容器样式 */
.filter-container {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 8px; /* 设置元素间距为8像素 */
    flex: 1; /* 占据剩余空间 */
    justify-content: space-between; /* 元素间平均分布 */
}

/* 过滤器输入框样式 */
.filter-group input {
    padding: 6px 10px; /* 设置内边距为6像素上下，10像素左右 */
    border: 1px solid #ddd; /* 设置边框为1像素灰色 */
    border-radius: 6px; /* 设置圆角为6像素 */
    font-size: 0.95em; /* 设置字体大小为0.95倍 */
    min-height: 32px; /* 最小高度为32像素 */
    text-align: center; /* 文字居中对齐 */
}

/* 标题样式 */
h2 {
    color: #2a5298; /* 设置颜色为深蓝色 */
    margin-top: 0; /* 移除顶部外边距 */
    border-bottom: 2px solid #2a5298; /* 设置底部边框为2像素深蓝色 */
    padding-bottom: 10px; /* 设置底部内边距为10像素 */
}

/* 历史记录表格样式 */
#historyTable {
    min-width: 100%; /* 最小宽度为100% */
}

/* 历史记录表格样式 */
#historyTable {
    table-layout: auto; /* 自动表格布局 */
}

/* 历史记录表格单元格样式 */
#historyTable th,
#historyTable td {
    border: 1px solid #ddd; /* 设置边框为1像素灰色 */
    padding: 8px; /* 设置内边距为8像素 */
    text-align: center; /* 文字居中对齐 */
    vertical-align: top; /* 垂直顶部对齐 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

/* 响应式调整表单容器 */
@media (max-width: 1200px) {
    .form-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列，最小宽度200像素 */
    }
}