/* ========================================
   优化版 DataGridNew 组件样式
   目标：提升视觉舒适度、增强可读性、美化布局
======================================== */

/* === 主容器样式 === */
div.data-grid-new {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

div.data-grid-container {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
    position: relative;
}

/* === 表头样式优化 === */
div.data-grid-header {
    width: 100%;
    height: 45px;
    border-bottom: 2px solid #f0f0f0;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
    position: relative;
    z-index: 10;
    overflow: hidden; /* 隐藏溢出，由 JS 同步 scrollLeft 实现表头随 viewport 横向滚动 */
    border-radius: 4px 4px 0 0;
}

div.data-grid-header ul.data-grid-columns {
    width: 9999px;
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
}

div.data-grid-header ul.data-grid-columns > li {
    display: block;
    float: left;
    line-height: 45px;
    height: 45px;
    list-style: none;
    padding: 0px 12px;
    margin: 0px;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    background: transparent;
    transition: all 0.3s ease;
}

div.data-grid-header ul.data-grid-columns > li:hover {
    background: rgba(24, 144, 255, 0.08);
    color: #1890ff;
}

div.data-grid-header ul.data-grid-columns > li > span.data-grid-columns-label {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    cursor: default;
    text-align: center;
    letter-spacing: 0.5px;
}

div.data-grid-header li {
    position: relative;
}

div.data-grid-header i.fa-sort-up,
div.data-grid-header i.fa-sort-down {
    position: absolute;
    right: 10px;
    color: #bfbfbf;
    height: 5px;
    transition: color 0.3s ease;
}

div.data-grid-header i.fa-sort-down {
    z-index: 1;
    top: 22px;
    line-height: 0px;
}

div.data-grid-header i.fa-sort-up {
    top: 14px;
    z-index: 4;
    line-height: 12px;
}

div.data-grid-header i:hover {
    color: #1890ff;
}

div.data-grid-header span.grid-sort-up.active,
div.data-grid-header span.grid-sort-down.active {
    color: #1890ff;
}

/* === 表格主体样式优化 === */
/* 提高选择器优先级，覆盖 layout.css 中的 root-modal 样式 */
.data-grid-new div.data-grid-body {
    width: 100%;
    height: 100%;
    padding: 45px 0px 0px 40px; /* 移除 !important，让 JavaScript 可以设置 paddingRight */
    margin-top: -45px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

div.data-grid-viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    border-width: 0px 0px 1px 1px;
    border-color: #f0f0f0;
    border-style: solid;
    position: relative;
    background: #ffffff;
    max-width: 100%;
}

/* 自定义滚动条样式 */
div.data-grid-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

div.data-grid-viewport::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

div.data-grid-viewport::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 4px;
    transition: background 0.3s ease;
}

div.data-grid-viewport::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* 水平滚动条角落按钮样式 */
div.data-grid-viewport::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* === 列调整大小指示器 === */
div.data-grid-column-resize {
    width: 0px;
    height: 100%;
    position: absolute;
    border-width: 0px 1px;
    border-style: dashed;
    border-color: #1890ff;
    top: 0px;
    left: -9999px;
    margin-left: -1px;
    background: rgba(24, 144, 255, 0.1);
    pointer-events: none;
    z-index: 9999;
}

/* === 数据行样式优化 === */
div.data-grid-main > ul.data-grid-row {
    display: block;
    height: 42px;
    padding: 0px;
    margin: 0px;
    transition: all 0.3s ease;
    width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #e8e8e8; /* 增强边框颜色，从#f5f5f5 改为#e8e8e8 */
    box-sizing: border-box;
    position: relative;
}

/* maxLines=2 时行高自适应 */
div.data-grid-main > ul.data-grid-row-multiline {
    height: auto;
    min-height: 42px;
    white-space: normal;
}

/* 确保 data-grid-content 和 data-grid-main 背景透明，让 viewport 背景透出 */
div.data-grid-content {
    background: transparent;
}

div.data-grid-main {
    background: transparent;
    width: 100%; /* 让 data-grid-main 填满 data-grid-content 的宽度 */
    min-width: 100%; /* 确保至少填满 viewport 宽度，让斑马纹延伸到整个可视区域 */
}

/* 斑马纹效果 - 由 JavaScript 动态控制，确保滚动时一致性 */
/* 不再使用 CSS :nth-child() 选择器，改用行内联样式统一控制 */

/* 悬停效果 - 增强视觉反馈 */
div.data-grid-main > ul:hover {
    background: #e6f7ff;
}

div.data-grid-main > ul:hover li {
    background: transparent; /* 移除单元格背景，让行背景生效 */
    cursor: pointer;
    transition: background 0.2s ease;
}

/* 选中状态 */
div.data-grid-main > ul.data-grid-selected {
    background: #bae7ff;
}

div.data-grid-main > ul.data-grid-selected li {
    background: transparent; /* 移除单元格背景，让行背景生效 */
}

div.data-grid-main > ul > li {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    border-width: 0px 1px 0px 0px;
    border-color: #f0f0f0;
    border-style: solid;
    padding: 0px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #333333;
    transition: all 0.2s ease;
    background: transparent; /* 确保单元格背景透明，让行背景生效 */
}

/* maxLines=2 时单元格高度自适应 */
div.data-grid-main > ul.data-grid-row-multiline > li {
    height: auto;
    min-height: 42px;
    line-height: normal;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    vertical-align: middle;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* 第一列（序号列）样式 */
div.data-grid-main > ul > li:first-child {
    text-align: center;
    font-weight: 500;
    color: #666666;
    background: rgba(0, 0, 0, 0.02);
}

/* === 复选框列样式 - 增强分隔效果 === */
div.data-grid-selects-wrapper {
    width: 40px;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 45px;
    margin-top: -45px;
    z-index: 100; /* 关键修复：提高到 100，确保覆盖在滚动条上方 */
    background: transparent; /* 修改为透明，让斑马纹背景生效 */
    border-right: 1px solid #d9d9d9; /* 增强右边框 */
}

div.data-grid-selects {
    width: 40px;
    height: 100%;
    overflow: hidden;
    position: relative; /* 作为 absolute 子元素（ul.data-grid-body-checkeds）的 containing block */
    box-shadow: 3px 0 3px -2px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #d9d9d9; /* 增强下边框 */
}

div.data-grid-selects ul {
    padding: 0px;
    margin: 0px;
}

div.data-grid-selects li {
    display: block;
    float: left;
    width: 40px;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    border-width: 0px 0px 1px;
    border-color: #e8e8e8; /* 增强下边框 */
    border-style: solid;
    padding: 0px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    background: transparent; /* 确保背景透明，由父组件通过 JS 控制斑马纹 */
}

div.data-grid-selects li.first-child {
    display: block;
    float: left;
    line-height: 45px;
    height: 45px;
    list-style: none;
    padding: 0px 10px;
    margin: 0px;
    border-style: solid;
    border-width: 0px;
    border-color: #e8e8e8;
    box-sizing: border-box;
    font-weight: 600;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
    font-size: 14px;
    color: #333333;
}

ul.data-grid-header-checkeds {
    position: relative;
    z-index: 2;
}

ul.data-grid-body-checkeds {
    position: relative;
    z-index: 1;
}

/* === 复选框列中的 Checkbox 样式 - 确保垂直居中 === */
ul.data-grid-body-checkeds .ant-checkbox-wrapper,
ul.data-grid-header-checkeds .ant-checkbox-wrapper {
    display: inline-block;
    text-align: center;
    width: 100%;
   line-height: normal !important; /* ⭐ 关键修复：使用 normal 避免继承问题，防止点击时高度变化 */
    vertical-align: middle; /* ⭐ 垂直居中对齐 */
}

ul.data-grid-body-checkeds > li {
    display: flex;         /* ⭐ 使用 flex 布局 */
    align-items: center;   /* ⭐ 垂直居中对齐 */
    justify-content: center; /* ⭐ 水平居中对齐 */
    height: 42px;          /* ⭐ 默认高度，由 JS rowHeights 精确覆盖 */
    box-sizing: border-box;
}

/* === 操作列样式优化 - 增强分隔 === */
div.data-grid-actions-wrapper {
    width: 100px;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100; /* 关键修复：提高到 100，确保覆盖在滚动条上方 */
    background: transparent; /* 修改为透明，让斑马纹背景生效 */
    border-left: 1px solid #d9d9d9; /* 增强左边框 */
}

/* 表头操作列单元格样式 */
li.data-grid-header-action-cell {
    display: block;
    float: right;
    line-height: 45px;
    height: 45px;
    list-style: none;
    padding: 0px 10px;
    margin: 0px;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    box-sizing: border-box;
    font-weight: 600;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
    font-size: 14px;
    color: #333333;
}

/* === 兼容 DataGridMul 的操作列样式 === */
div.data-grid-actions-wrapper .data-grid-header-actions li.first-child {
    text-align: center !important;
    font-weight: 600;
}

div.data-grid-actions {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative; /* 作为 absolute 子元素（ul.data-grid-body-actions）的 containing block */
    box-shadow: -3px 0 3px -2px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #d9d9d9; /* 增强下边框 */
}

div.data-grid-actions ul {
    padding: 0px;
    margin: 0px;
}

div.data-grid-actions li {
    display: block;
    float: left;
    width: 100%;
    height: 42px;          /* ⭐ 默认高度，由 JS rowHeights 精确覆盖 */
    line-height: normal; /* ⭐ 关键修复：移除 line-height 限制，让 flex 布局控制对齐 */
    box-sizing: border-box;
    border-width: 0px 1px 1px 0px;
    border-color: #e8e8e8; /* 增强边框 */
    border-style: solid;
    padding: 0px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    background: transparent; /* 确保背景透明，由父组件通过 JS 控制斑马纹 */
    display: flex;         /* ⭐ 使用 flex 布局 */
    align-items: center;   /* ⭐ 垂直居中对齐 */
}

div.data-grid-actions li.first-child {
    display: block;
    float: left;
    line-height: 45px;
    height: 45px;
    list-style: none;
    padding: 0px 10px;
    margin: 0px;
    border-width: 0px 0px 1px;
    border-color: #e8e8e8;
    border-style: solid;
    box-sizing: border-box;
    font-weight: 600;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
    font-size: 14px;
    color: #333333;
    text-align: center;
}

ul.data-grid-header-actions {
    position: relative;
    z-index: 2;
}

ul.data-grid-body-actions {
    position: relative;
    z-index: 1;
}

/* === 操作列链接按钮样式优化 === */
ul.data-grid-body-actions a.action-link {
    outline: none;
    margin: 0px 4px;
    color: #1890ff;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;      /* ⭐ 使用 inline-flex 布局 */
    align-items: center;       /* ⭐ 图标在按钮内垂直居中 */
    justify-content: center;   /* ⭐ 图标在按钮内水平居中 */
    padding: 0;                /* ⭐ 移除 padding，让图标自然显示 */
    border-radius: 3px;
    line-height: normal;       /* ⭐ 不干扰内部对齐 */
    vertical-align: middle;    /* ⭐ 确保按钮本身垂直对齐 */
    height: 32px;              /* ⭐ 固定高度 */
    min-width: 32px;           /* ⭐ 最小宽度 */
}

ul.data-grid-body-actions a.action-link:hover {
    color: #40a9ff;
    background: rgba(24, 144, 255, 0.1);
    text-decoration: none;
}

ul.data-grid-body-actions a.action-link.edit i {
    font-size: 16px;           /* ⭐ 调整为 16px */
    vertical-align: middle;    /* ⭐ 确保图标垂直对齐 */
}

ul.data-grid-body-actions a.action-link.delete i {
    font-size: 16px;           /* ⭐ 调整为 16px */
    vertical-align: middle;    /* ⭐ 确保图标垂直对齐 */
}

ul.data-grid-body-actions a.action-link.view {
    color: #1890ff;
}

ul.data-grid-body-actions a.action-link.view i {
    font-size: 16px;
    vertical-align: middle;
}

ul.data-grid-body-actions a {
    outline: none;
    margin: 0px 8px;
    color: #1890ff;
    transition: color 0.3s ease;
    text-decoration: none;
}

ul.data-grid-body-actions a:hover {
    color: #40a9ff;
    text-decoration: underline;
}

ul.data-grid-body-actions a i.fa-eye-slash {
    color: #52c41a;
}

ul.data-grid-body-actions a i.fa-file-pdf-o {
    color: #f5222d;
}

/* === 自定义行操作列样式 === */
div.data-grid-rowactions-wrapper {
    width: 130px;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top: 45px;
    margin-top: -45px;
    z-index: 100; /* 关键修复：提高到 100，确保覆盖在滚动条上方 */
    background: transparent; /* 修改为透明，让斑马纹背景生效 */
    display: block;
    border-left: 2px solid #f0f0f0;
}

div.data-grid-rowactions-wrapper .data-grid-actions {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: -3px 0 3px -2px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e8e8e8;
    border-left: none;
}

div.data-grid-rowactions-wrapper .data-grid-body-actions li {
    text-align: center;
    overflow: visible;
    padding: 0 4px;
    line-height: normal; /* ⭐ 移除 line-height 限制 */
    display: flex;       /* ⭐ 使用 flex 布局 */
    align-items: center; /* ⭐ 垂直居中对齐 */
    justify-content: center; /* ⭐ 水平居中对齐 */
}

/* === 分页器样式优化 === */
div.data-grid-footer {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 10px 12px 0;
    margin-top: 0; /* 覆盖 grid.css 全局 margin-top:-35px（旧 Grid.js 专用定位技巧，DataGridNew 不需要） */
    text-align: right;
    position: relative;
    z-index: 100;
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    /* ⭐ 新增：flex 布局，footerExtra 在左、Pagination 在右 */
    display: flex;
    align-items: center;
}

/* ⭐ 新增：分页行左侧附加内容样式（如最高分/最低分等红色统计信息） */
div.data-grid-footer-extra {
    flex: 1;
    text-align: left;
    color: #f00;
    font-size: 13px;
    min-width: 0;
    line-height: 20px;
}

div.data-grid-footer ul {
    display: inline-block;
    /* ⭐ 新增：让分页在 flex 容器中靠右（无论是否有 footerExtra 都能保持靠右） */
    margin-left: auto;
}

/* === 加载状态样式 === */
div.ant-spin-nested-loading {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

div.ant-spin-container {
    width: 100%;
    height: 100%;
}

/* === 特殊评估模式样式 === */
div.data-grid-evals > ul.data-grid-row,
ul.data-grid-body-evals {
    height: 120px;
}

div.data-grid-evals > ul[data-disable="1"],
div.data-grid-evals > ul[data-disable="1"] li {
    background: #f5f5f5;
    opacity: 0.7;
}

div.data-grid-evals > ul > li,
ul.data-grid-evals > li,
ul.data-grid-body-evals > li {
    height: 120px;
    line-height: 120px;
}

ul.data-grid-body-evals > li[data-disable="1"] {
    background: #f5f5f5;
}

/* === 响应式设计支持 === */
@media screen and (max-width: 768px) {
    div.data-grid-header ul.data-grid-columns > li {
        font-size: 13px;
        padding: 0px 8px;
    }
    
    div.data-grid-main > ul > li {
        font-size: 13px;
        padding: 0px 6px;
    }
    
    div.data-grid-actions-wrapper,
    div.data-grid-selects-wrapper {
        width: 35px;
    }
}

/* === 空数据提示样式 === */
div.data-notify {
    width: 500px;
    box-sizing: border-box;
    padding: 30px 15px;
    text-align: center;
    color: #999999;
    font-size: 14px;
    background: #fafafa;
    border-radius: 4px;
    margin: 20px auto;
}

/* === 列宽调整手柄 === */
span.data-grid-inline {
    width: 20px;
    height: 45px;
    background: rgba(255, 177, 0, 0);
    position: absolute;
    top: 0px;
    display: inline-block;
    z-index: 100;
    margin-left: 5px;
    cursor: col-resize;
    transition: background 0.2s ease;
}

/* 最后一列拖拽手柄：已在 JS 中向左偏移 20px 定位到列右边界内侧，margin-left 置 0 避免额外偏移 */
span.data-grid-inline.data-grid-inline-last {
    margin-left: 0;
}

span.data-grid-inline:hover {
    background: rgba(24, 144, 255, 0.2);
}

/* === 固定左侧列样式 === */
div.data-grid-fixed-left-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    box-sizing: border-box;
    z-index: 60;
    background: #ffffff;
    overflow: hidden;
    border-right: 2px solid #e8e8e8;
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.1);
}

div.data-grid-fixed-left {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

ul.data-grid-header-fixed-columns {
    padding: 0px;
    margin: 0px;
    list-style: none;
    height: 45px;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
    border-bottom: 2px solid #f0f0f0;
    white-space: nowrap;
    position: relative;
    z-index: 70;
    box-sizing: border-box;
}

ul.data-grid-header-fixed-columns > li {
    display: block;
    float: left;
    line-height: 45px;
    height: 45px;
    list-style: none;
    padding: 0px 12px;
    margin: 0px;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    text-align: center;
    position: relative;
    overflow: hidden;
}

ul.data-grid-body-fixed-columns {
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: absolute;
    top: 0px;  /* 与主表格数据行对齐 */
    left: 0px;
    z-index: 60;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}

ul.data-grid-body-fixed-columns > li {
    display: block;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
    transition: all 0.3s ease;
    width: 100%;
}

ul.data-grid-body-fixed-columns > li:nth-child(even) {
    background: #fafafa;
}

ul.data-grid-body-fixed-columns > li:nth-child(odd) {
    background: #ffffff;
}

ul.data-grid-body-fixed-columns > li:hover {
    background: #e6f7ff;
}

ul.data-grid-body-fixed-columns > li.data-grid-selected {
    background: #bae7ff;
}

ul.data-grid-body-fixed-columns > li > span {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #333333;
    box-sizing: border-box;
}

/* 序号列居中对齐 */
ul.data-grid-body-fixed-columns > li > span[style*="text-align: center"],
ul.data-grid-header-fixed-columns > li:first-child .data-grid-columns-label {
    text-align: center !important;
}

/* 固定列中的复选框样式 */
ul.data-grid-body-fixed-columns .ant-checkbox-wrapper,
ul.data-grid-header-fixed-columns .ant-checkbox-wrapper {
    display: inline-block;
    text-align: center;
    width: 100%;
}

/* 复选框列单元格样式 */
ul.data-grid-body-fixed-columns > li > span[key*="checkbox"],
ul.data-grid-header-fixed-columns > li[key*="checkbox"] {
    padding: 0;
    display: inline-block;
    text-align: center;
}

/* 复选框列单元格的 line-height */
ul.data-grid-body-fixed-columns > li > span[key*="checkbox"] {
    line-height: 42px;
}

/* 表头复选框列特殊样式 */
ul.data-grid-header-fixed-columns > li[key*="checkbox"] {
    line-height: 45px;
    height: 45px;
}

/* === 确保主表格内容从固定列右侧开始渲染 === */
/* 当有固定列时，主表格区域的 padding-left 确保内容从正确位置开始 */
div.data-grid-body[style*="paddingLeft"],
div.data-grid-body[style*="padding-left"] {
    /* padding-left 已经在行内样式中设置，这里不需要覆盖 */
}

/* 主表格内容容器不应该有额外的 margin */
div.data-grid-content > div.data-grid-main {
    margin-left: 0;
}

/* === 移除固定列相关样式（已恢复原始 Grid 布局）=== */
/* 以下样式保留但不再使用，以备将来可能的功能恢复 */

/* === 排序按钮样式增强 === */
div.data-grid-header span.grid-sort-up,
div.data-grid-header span.grid-sort-down {
    width: 10px;
    height: 10px;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 12px;
    right: 10px;
    transition: all 0.3s ease;
}

div.data-grid-header span.grid-sort-down {
    top: 17px;
}

/* 最后一列排序按钮向左偏移，让出拖拽手柄区域（手柄宽20px，贴列右边界内侧） */
div.data-grid-header li.data-grid-col-last span.grid-sort-up,
div.data-grid-header li.data-grid-col-last span.grid-sort-down {
    right: 22px;
}

div.data-grid-header span.grid-sort-up i,
div.data-grid-header span.grid-sort-down i {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease;
}

div.data-grid-header span.grid-sort-up i {
    top: -10px;
    left: 0px;
}

div.data-grid-header span.grid-sort-down i {
    top: -15px;
    left: 0px;
}

/* === 列配置按钮（内嵌在第一数据列表头左侧） === */
a.dg-col-setting-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    transition: color 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

/* 左侧定位变体：绝对定位在所属 <li>（position:relative）内的左上角 */
a.dg-col-setting-btn.dg-col-setting-btn-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 45px;
    z-index: 200;
    border-right: 1px solid #e8e8e8;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
}

/* 固定定位变体：绝对定位在 data-grid-container 内（position:relative），脱离 data-grid-header 的 overflow:hidden 和 scrollLeft 影响，真正固定在左侧不随水平滚动移动 */
a.dg-col-setting-btn.dg-col-setting-btn-fixed {
    position: absolute;
    top: 0;
    /* left 由 JS 内联样式设置（= grid.left，即复选框列宽度），确保紧贴复选框列右侧 */
    width: 22px;
    height: 45px;
    z-index: 20; /* 高于 data-grid-header 的 z-index:10 */
    border-right: 1px solid #e8e8e8;
    background: linear-gradient(to bottom, #fafafa, #f5f5f5);
}

a.dg-col-setting-btn:hover {
    color: #1890ff;
    background: rgba(24, 144, 255, 0.08);
    text-decoration: none;
}

a.dg-col-setting-btn .anticon-setting {
    font-size: 15px;
}

/* === 列配置 Popover 面板 === */
.dg-col-setting-popover .ant-popover-inner-content {
    padding: 0;
}

div.dg-col-setting-panel {
    width: 200px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

div.dg-col-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    flex-shrink: 0;
}

a.dg-col-setting-reset {
    font-size: 12px;
    font-weight: 400;
    color: #1890ff;
    cursor: pointer;
    transition: color 0.2s;
}

a.dg-col-setting-reset:hover {
    color: #40a9ff;
    text-decoration: none;
}

ul.dg-col-setting-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 260px;
}

ul.dg-col-setting-list > li {
    padding: 5px 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

ul.dg-col-setting-list > li:hover {
    background: #f5f5f5;
}

ul.dg-col-setting-list > li .ant-checkbox-wrapper {
    width: 100%;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    line-height: normal !important;
}

ul.dg-col-setting-list > li .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
    color: #999;
}


a.sumbit-button,
a.undo-button {
    border: 1px solid #d9d9d9;
    padding: 5px 10px;
    border-radius: 4px;
    background: #ffffff;
    color: #333333;
    transition: all 0.3s ease;
    font-size: 13px;
}

a.sumbit-button:focus,
a.undo-button:focus {
    border-color: #40a9ff;
    color: #1890ff;
    text-decoration: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}

a.sumbit-button:hover,
a.undo-button:hover {
    border-color: #40a9ff;
    color: #1890ff;
    background: #e6f7ff;
}

/* === 颜色主题变量（便于后期主题定制）=== */
:root {
    --primary-color: #1890ff;
    --success-color: #52c41a;
    --warning-color: #faad14;
    --error-color: #f5222d;
    --border-color: #e8e8e8;
    --background-light: #fafafa;
    --hover-background: #e6f7ff;
    --selected-background: #bae7ff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-disabled: #999999;
}