/* 默认风格 */

.table-container {
    overflow-x: auto; /* 启用水平滚动 */
    max-width: 100%; /* 限制容器宽度 */
    margin-bottom: 20px;
}

/* 
    1、固定表头FIFA风格表格样式
    （1）第一列位置固定
    （2）支持分页，需要配合分页方法
    （3）支持排序
    （4）网页端要实现：
        （4.1）引用common.js调用支持分页的方法，并且onload时，loadPageDataOnLoad(url);
        （4.2）实现createRow(item)
        （4.3）<div class="table-container">
                <table id="userTable" class="sticky-page-table">
        （4.4）添加分页控件：<div class="pagination" id="paginationControls">
        （4.5）添加加载控件：<div id="loadingOverlay" 
*/
.sticky-sort-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sticky-sort-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* 固定第一列 */
.sticky-sort-table th:first-child,
.sticky-sort-table td:first-child {
    position: sticky;
    left: 0;
    background-color: inherit;
    /* font-weight: bold; */
    z-index: 2;
    min-width: 80px; /* 保持第一列80px */
    color: inherit;
}

.sticky-sort-table th:first-child {
    background-color: #0a2463;
    border-radius: 8px 0 0 0;
    color: white;
}

.sticky-sort-table th {
    background-color: #0a2463;
    color: white;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    position: relative;
    cursor: pointer;
    min-width: auto;
    white-space: nowrap;
}

.sticky-sort-table th:hover {
    background-color: #1e3a8a;
}

/* 排序指示器 */
.sticky-sort-table th::after {
    /* content: '\f0dc'; */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 8px;
    font-size: 12px;
    opacity: 0.6;
}

.sticky-sort-table th.asc::after {
    content: '\f0de';
    opacity: 1;
}

.sticky-sort-table th.desc::after {
    content: '\f0dd';
    opacity: 1;
}

.sticky-sort-table tr {
    background-color: white;
}

.sticky-sort-table tr:hover {
    /* background-color: gray; */
}

.sticky-sort-table tbody tr:nth-child(odd) {
    /* background-color: #333333; */
    color: black;
}
.sticky-sort-table tbody tr:nth-child(even) {
    /* background-color: black; */
    color: black;
}

.sticky-sort-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    min-width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 创建时间列特殊宽度 (第3列) */
/* #userTable th:nth-child(3),
#userTable td:nth-child(3) {
    min-width: 180px; 
} */

/* 添加表格行深色交替背景  */
/* #userTable tbody tr:nth-child(odd) {
    background-color: #333333;
    color: white;
}
#userTable tbody tr:nth-child(even) {
    background-color: black;
    color: white;
} */

/* 表格风格样式1结束 */

/* 分页控件样式 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    gap: 8px; /* 减小间距 */
    flex-wrap: nowrap; /* 禁止换行 */
    overflow-x: auto; /* 横向溢出时允许滚动 */
    padding: 5px 0; /* 添加上下内边距 */
}
.pagination::-webkit-scrollbar {
    height: 4px; /* 滚动条高度 */
}
.pagination::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 滚动条颜色 */
    border-radius: 2px;
}
.pagination-arrow {
    padding: 4px 10px; /* 减小按钮内边距 */
    border: 1px solid #007BFF;
    background-color: white;
    color: #007BFF;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.page-input {
    width: 45px; /* 减小输入框宽度 */
    padding: 4px; /* 减小内边距 */
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
.page-size-select {
    padding: 4px; /* 减小下拉框内边距 */
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    white-space: nowrap;
}
#paginationInfo {
    margin-right: 5px;
    white-space: nowrap;
    font-size: 14px; /* 减小字体大小 */
}
/* 分页控件样式结束 */

/* 默认风格结束 */

/* 暗黑科技风 */

/* 暗黑科技风结束 */

/* 极简主义样式 */

/* 极简主义样式结束 */

/* 活力色彩风样式 */

/* 活力色彩风样式结束 */

/* 复古像素风样式 */

/* 复古像素风样式结束 */

/* 自然有机风样式 */

/* 自然有机风样式结束 */

/* FIFA足球风格颜色变量 */

/* FIFA风格结束 */