/* custom-layui.css */

/* 覆盖表头样式 */
.layui-table-header th {
    /*background: linear-gradient(135deg, #6ab7ff, #4caf50) !important; !* 渐变色背景 *!*/
    background: #1890ff;
    color: #ffffff !important; /* 白色文字 */
    font-weight: bold !important;
    padding: 12px 0 !important; /* 增加内边距 */
    border-bottom: 2px solid #eeeeee !important; /* 浅灰色底部边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    text-align: center; /* 文字居中 */
}

.layui-table-body {
    position: relative;
    overflow: auto;
    margin-right: -1px;
    margin-bottom: -1px;
}
/* 覆盖表格单元格样式 */
.layui-table-body td {
    /*background-color: #ffffff !important; !* 白色背景 *!*/
    color: #333333 !important; /* 深灰色文字 */
    padding: 12px 0 !important; /* 增加内边距 */
    border-bottom: 1px solid #eeeeee !important; /* 浅灰色底部边框 */
    text-align: center; /* 文字居中 */
    width: auto
}

/* 增加行间距 */
.layui-table-view .layui-table {
    border-spacing: 0 10px !important; /* 行间距 */
    border-collapse: separate !important; /* 分离边框 */
    /*width: 100% !important; !* 确保表格占满100%宽度 *!*/
    table-layout: auto !important; /* 自动调整表格布局 */
}

/* 自定义hover效果 */
.layui-table-hover {
    background-color: #e0f7fa !important; /* 浅青色背景 */
}

/* 自定义选中行样式 */
.layui-table-click {
    background-color: #b2ebf2 !important; /* 更深的浅青色背景 */
}

/* 优化分页样式 */
.layui-table-page {
    margin-top: 20px !important; /* 增加上边距，避免被表格遮挡 */
    display: flex !important; /* 使用flex布局 */
    justify-content: center !important; /* 居中分页 */
    height: 70px;
    padding: 0 !important;
}

.layui-laypage {
    background-color: #ffffff !important; /* 白色背景 */
    border-radius: 20px !important; /* 圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* 添加阴影效果 */
    padding: 10px 20px !important; /* 增加内边距 */
    display: inline-flex !important; /* 使用inline-flex布局 */
    align-items: center !important; /* 垂直居中 */
    font-size: 16px !important; /* 增加字体大小 */
}

.layui-laypage a, .layui-laypage span {
    color: #333333 !important; /* 深灰色文字 */
    padding: 10px 15px !important; /* 增加内边距 */
    margin: 0 5px !important; /* 增加外边距 */
    border-radius: 10px !important; /* 圆角边框 */
    transition: background-color 0.3s !important; /* 背景色过渡效果 */
}

.layui-laypage a:hover {
    background-color: red !important; /* 青色背景 */
    color: #ffffff !important; /* 白色文字 */
}

.layui-laypage .layui-laypage-curr {
    background-color: #00acc1 !important; /* 青色背景 */
    color: #ffffff !important; /* 白色文字 */
    font-weight: bold !important; /* 加粗字体 */
}

/* 鼠标移动到列时变灰 */
.layui-table-body tr:hover {
    background-color: #b4b1b1 !important; /* 灰色背景 */
    z-index: 1; /* 提高层级，确保背景色显示 */
}

.layui-laypage-limits {
    display: none !important;
}

.layui-table-body tr:nth-child(odd) {
    background-color: #f7f7f7 ; /* 灰色背景 */
}

.layui-table-body tr:nth-child(even) {
    background-color: #ffffff ; /* 白色背景 */
}