/**
 * UI CSS - 后台管理系统样式文件
 * v1.0.0
 * 说明：该文件包含了后台管理系统的所有自定义样式
 * 主要包括：查询条件、表格样式、弹出框、滚动条等 UI 组件
 */

/* ============================================
 * 查询条件区域样式
 * 说明：用于表格顶部的搜索条件区域
 * ============================================ */

/* 查询条件容器：使用相对定位以便于内部元素的绝对定位 */
.search-collapse {
    position: relative;  /* 相对定位 */
}

/* 查询条件标签颜色 */
.search-collapse .col-sm-6 .control-label {
    color: #333;  /* 深灰色，保证可读性 */
}

/* 响应式设计：屏幕宽度大于768px时，查询项目横向排列 */
/* 注：小屏幕时默认竖向排列 */
@media ( min-width : 768px) {
    .select-list li {
        display: inline-block;  /* 使用inline-block代替float，避免浮动高度问题 */
        vertical-align: top;    /* 顶部对齐，确保换行后从顶部开始 */
    }
}

/* 查询项目列表的基础样式重置 */
.select-list ul {
    margin: 0;   /* 清除默认外边距 */
    padding: 0.5em !important;  /* 默认内边距 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);  /* 移除移动端点击高亮 */
}

/* 查询项目列表项的样式 */
.select-list li {
    color: #333;                 /* 文本颜色 */
    margin: 5px 15px 5px 0px;   /* 外边距：上5px 右15px 下5px 左0px */
    list-style: none;            /* 移除列表样式符号 */
    min-height: 30px;            /* 最小高度30px，确保所有li高度一致 */
}

/* 查询条件中的 select 下拉框样式 */
.select-list li select {
    border: 1px solid #ddd;      /* 淡灰色边框 */
    border-radius: 4px;          /* 圆角4px */
    background: transparent;      /* 透明背景 */
    outline: none;                /* 移除默认焦点框 */
    height: 30px;                 /* 高度30px */
    width: 200px;                 /* 宽度200px */
}

/* 自定义 select 组件样式 */
.select-list li .select {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent;
    outline: none;
    height: 30px !important;      /* !important 提高优先级，确保样式生效 */
    width: 200px;
}

/* ============================================
 * Select2 组件样式调整
 * 说明：Select2 是一个 jQuery 下拉框增强插件
 * 以下样式用于调整 Select2 组件的高度和宽度
 * ============================================ */

/* 修改 select2 组件容器和内部元素的宽度与高度 */
.select-list li .select2-container ,
.select-list li .select2-selection .select2-selection--single,
.select-list li .select2-selection .select2-selection--single .select2-selection__rendered
{
    display: inline-block !important;  /* 内联块级显示 */
    height: 30px !important;            /* 高度统一30px */
    width: 200px !important;            /* 宽度统一200px */
}

/* select2 选择器的 span 容器最小高度 */
.select-list li span.selection,
.select-list li span.selection input{
    min-height: 30px !important;  /* 最小高度30px */
}

/* select2 搜索框的最小高度 */
.select-list li.select2-search.select2-search--inline{
    min-height: 30px !important;
}

/* select2 多选下拉框的样式调整 */
/* 注意：选中所有同时具有 select2-selection 和 select2-selection--multiple 两个 class 的元素 */
/* 方法：将多个class名连续书写，中间不加空格 */
.select-list li span.selection,
.select-list li select2-container--bootstrap4 .select2-selection.select2-selection--multiple
{
    min-height: 30px !important;
    display: flex !important;  /* 使用 flex 布局以便更好地处理多个选项 */
}

/* select2 单选下拉框的文本行高 */
.select-list li .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    line-height:  30px !important;  /* 行高30px，与高度一致以垂直居中 */
}

/* select2 多选下拉框渲染区域的最小高度 */
.select-list li .select2-selection.select2-selection--multiple .select2-selection__rendered
{
    min-height: 30px !important;
}

/* select2 单选下拉框的高度设置 */
.select-list li .select2-container--bootstrap4 .select2-selection--single {
    height: 30px !important;
    min-height: 30px !important;
}

/* select2 多选下拉框的最小高度 */
.select-list li .select2-container--bootstrap4 .select2-selection--multiple{
    min-height: 30px !important;
}

/* select2 下拉搜索框的内边距 */
.select2-search .select2-search--dropdown,  .select2-search--dropdown .select2-search__field{
    padding: 2px !important;  /* 内边距2px，使搜索框更紧凑 */
}

/* ============================================
 * 查询条件其他元素样式
 * ============================================ */

/* 查询项目的标签和文本样式 */
.select-list li p, .select-list li label:not(.radio-box){
    display: inline-block;       /* 改为inline-block，支持自动宽度 */
    margin: 0px 5px 0px 0px;     /* 上边距0px，右边距5px（与输入框间距），与输入框垂直对齐 */
    text-align: right;           /* 文本右对齐 */
    white-space: nowrap;         /* 防止文字换行 */
    vertical-align: middle;      /* 垂直居中对齐 */
}

/* 查询项目的输入框样式 */
.select-list li input {
    border: 1px solid #ced4da;  /* 浅灰色边框，与 Bootstrap 风格一致 */
    border-radius: 4px;          /* 圆角4px */
    background: transparent;      /* 透明背景 */
    outline: none;                /* 移除默认焦点框 */
    height: 30px;                 /* 高度30px */
    width: 200px;                 /* 宽度200px */
    padding-left: 5px;            /* 左内边距5px，美化输入 */
    vertical-align: middle;       /* 垂直居中对齐，与label对齐 */
}

/* 所有标签的字体粗细重置：设置为正常字体 */
.select-list label {
    font-weight: normal !important;
}

/* ============================================
 * 时间选择器样式
 * 说明：用于日期范围查询，如“开始时间 ~ 结束时间”
 * ============================================ */

/* 时间选择器的输入框宽度 */
.select-list .select-time input {
    width: 98px;  /* 缩小宽度以适应日期范围显示 */
}

/* 时间选择器的元素布局：标签、分隔符、输入框均左浮动 */
.select-time label,.select-time span,.select-time input {
    float: left !important;  /* 左浮动实现横向排列 */
}

/* 时间输入框的容器 */
.select-time .time-input {
    display: block;       /* 块级显示 */
    width: 100%;          /* 宽度100% */
    padding-left: 10px;   /* 左内边距10px */
}

/* 小屏幕响应式设计：屏幕宽度小于767px时 */
@media (max-width:767px) {
    /* 时间选择器元素不浮动，竖向排列 */
    .select-time label,.select-time span,.select-time input {
        float: none;  /* 取消浮动 */
    }
    /* 输入框宽度恢复为200px */
    .select-list .select-time input {
        width: 200px;
    }
}

/* 时间选择器标签的上边距 */
.select-time label {
    margin-top: 5px !important;  /* 上边距5px，与输入框垂直对齐 */
}

/* 时间选择器的分隔符（如 “~” 符号） */
.select-time span {
    display: block;         /* 块级显示 */
    margin: 5px 5px;       /* 外边距5px */
}

/* ============================================
 * 查询按钮和其他通用样式
 * ============================================ */

/* 查询按钮样式 */
.search-btn {
    background-color: #1ab394;  /* 青绿色背景 */
    border-color: #1ab394;       /* 青绿色边框 */
    color: #FFF;                 /* 白色文字 */
    margin-bottom: 5px;          /* 底边距5px */
    display: inline-block;       /* 内联块级显示 */
    padding: 6px 12px;           /* 内边距 */
    font-size: 14px;             /* 字体大小14px */
    font-weight: 400;            /* 正常字体 */
    line-height: 1.42857143;     /* 行高 */
    text-align: center;          /* 文本居中 */
    white-space: nowrap;         /* 不换行 */
    border-radius: 3px;          /* 圆角3px */
    vertical-align: middle;      /* 垂直居中对齐 */
    cursor: pointer;             /* 鼠标指针样式 */
}

/* 查询区域标题样式 */
.select-title{
    color:#3d5266;        /* 深蓝灰色 */
    padding:0px 0px;      /* 内边距为0 */
    font-weight: normal;  /* 正常字体 */
}

/* 所有 label 标签默认为正常字体 */
label {
    font-weight: normal;
}

/* ============================================
 * 表单必填项样式
 * 说明：为必填项的标签添加红色星号标识
 * ============================================ */

/* 表单标签响应式对齐：桌面端右对齐，移动端左对齐 */
.form-group .col-form-label {
    text-align: left;  /* 默认左对齐（移动端） */
}

/* 桌面端（屏幕宽度 >= 576px）：标签右对齐 */
@media (min-width: 576px) {
    .form-group .col-form-label {
        text-align: right;  /* 桌面端右对齐 */
    }
}

/* 必填项标签添加相对定位，为星号提供定位上下文 */
label.is-required {
    position: relative;
}

/* 必填项标签前添加红色星号 */
label.is-required::before {
    content: "* ";           /* 星号加空格 */
    color: #dc3545;          /* Bootstrap danger 红色 */
    font-weight: bold;       /* 加粗显示 */
}

/* ============================================
 * 容器布局样式
 * ============================================ */

/* 主内容区域容器 */
.container-div {
    padding: 0px 28px;  /* 左右内边距28px */
    height: 100%;        /* 高度100% */
}

/* 容器内的行元素 */
.container-div .row {
    height: 100%;  /* 高度100% */
}

/* ============================================
 * 图片样式
 * 说明：定义图片高宽
 * ============================================ */
.img-xs {
    width: 32px;
    height: 32px;
}
.img-sm {
    width: 64px;
    height: 64px;
}
.img-md {
    width: 96px;
    height: 96px;
}
.img-lg {
    width: 120px;
    height: 120px;
}
.card {
    margin-bottom: 0.35rem !important;
}

/*.card-body table{*/
/*    padding: 0.45rem !important;*/
/*}*/

/* ============================================
 * Bootstrap Table 工具栏样式
 * ============================================ */
/* Bootstrap Table 表格单元格紧凑样式 */
.bootstrap-table .table td,
.bootstrap-table .table th {
     padding: 0.45rem !important;  /* 原值0.75rem,改为0.5rem */
}
/* 表格工具栏中的按钮样式 */
.fixed-table-toolbar .btn.btn-secondary.btn-outline {
    background-color: #007bff;  /* 蓝色背景 */
    color: white;                /* 白色文字 */
    border: none;                /* 无边框 */
}

/* ============================================
 * 表格数据显示样式
 * 说明：以下样式用于美化表格外观和行为
 * ============================================ */

/* 表格容器的最小高度 */
.table-striped {
     min-height: 60%;  /* 最小高度60%，确保表格区域有足够高度 */
}

/* 移除表格和表格容器的边框 */
.table-striped .bootstrap-table, .table-striped .table-bordered {
    border: 0px!important;  /*  无边框，!important 提高优先级 */
}

/* 表头和表体的 th 元素样式 */
.table-bordered .table>thead>tr>th, .table-bordered .table>tbody>tr>th {
    font-weight: normal;  /* 正常字体，不加粗 */
    font-size: 13px       /* 字体大小13px */
}


/* 表格所有单元格的通用样式 */
.table-striped table>thead>tr>th,
.table-striped table>tbody>tr>th,
.table-striped table>tfoot>tr>th,
.table-striped table>thead>tr>td,
.table-striped table>tbody>tr>td,
.table-striped table>tfoot>tr>td {
    border-bottom: 1px solid #e7eaec!important;  /* 底边框：浅灰色 */
    background-color: transparent;                /* 透明背景 */
    /*border: 0px;                                  !* 其他边框为0 *!*/
}

/* 表格第一列的左边框 */
.table-bordered table>thead>tr>th:first-child,
.table-bordered table>tbody>tr>td:first-child {
    border-left: 1px solid #ddd;  /* 左边框：浅灰色 */
}



/* 表格最后一列的右边框 */
.table-bordered table>thead>tr>th:last-child,
.table-bordered table>tbody>tr>td:last-child {
    border-right: 1px solid #ddd;  /* 右边框：浅灰色 */
}

/* 表格单元格的上下边框 */
.table-bordered table>thead>tr>th,
.table-bordered table>tbody>tr>td {
    border-top: 1px solid #ddd!important;     /* 上边框 */
    border-bottom: 1px solid #ddd;             /* 下边框 */
}

/* 表格底部的边框 */
.fixed-table-footer {
    border-top: 0px solid #ddd;  /* 无上边框 */
}

/* 表格容器的边框 */
.fixed-table-container {
    border: 0px solid #ddd;  /* 无边框 */
}

.bootstrap-table .fixed-table-container .table .bs-checkbox .th-inner {
    overflow: visible !important;
    text-overflow: ellipsis !important;
}


/* 表头 th 元素的样式 */
.table-striped .table>thead>tr>th,
.table-striped .table>tbody>tr>th {
    border-bottom: 1px solid #ccc!important;  /* 底边框：中灰色 */
    border-top: 0px!important;                 /*  无上边框 */
    font-weight: normal;                       /* 正常字体 */
    font-size: 13px                            /* 字体大小13px */
}

/* 表头的背景颜色 */
.table-striped table thead {
     background-color: #eff3f8;  /* 淡蓝灰色背景 */
}

/* 表头排序图标的显示方式 */
.fixed-table-container thead th  >.both{
    display: inline-block  /* 内联块级显示 */
}

/* 表格行内编辑输入框的高度 */
.editable-input .input-sm {
    height: 32px!important;  /* 高度32px */
}
/* ============================================
 * 强制bootstrap-table-cm表格列宽并保持横向滚动条
 * 说明：这是关键样式！用于实现表格列宽可拖拽调整功能
 * 重要：如果这些样式被禁用或修改，列宽调整功能将无法正常工作
 * 目前直接在table定义style中定义min-width: 2500px !important; 也能生效
 * ============================================ */
/* 强制表格使用固定布局算法，这样width属性才会生效 */
.bootstrap-table-cm,
.bootstrap-table-cm .fixed-table-header table,
.bootstrap-table-cm .fixed-table-body table {
    table-layout: fixed !important;
    /* 设置最小宽度，确保列宽总和超过容器时出现横向滚动条 */
    /* 这个值应该大于等于所有列宽的总和 */
    min-width: 2500px !important;
}

/* 关键修复：强制表头内部元素换行 */
/* th 元素本身的样式在 headerStyle 中设置，但内部的 .th-inner 需要全局样式 */
.bootstrap-table .th-inner {
    white-space: normal !important;     /* 允许换行，覆盖默认的 nowrap */
    word-wrap: break-word !important;   /* 长单词自动换行 */
    word-break: break-all !important;   /* 强制换行，确保在窄列中也能换行 */
    line-height: 1 !important;        /* 行高1.5倍，使多行文字更易读 */
    /*padding: .75rem !important;*/
}

/* ============================================
 * 表格列宽拖动样式 (Resizable Columns)
 * 说明：这是关键样式！用于实现表格列宽可拖拽调整功能
 * 依赖：bootstrap-table-resizable.js 插件
 * 重要：如果这些样式被禁用或修改，列宽调整功能将无法正常工作
 * ============================================ */

/* 拖动手柄容器：包含所有列拖动手柄的容器 */
.rc-handle-container {
    position: relative;  /* 相对定位，使子元素可以绝对定位 */
}

/* 单个拖动手柄：显示在每个列的边界处 */
.rc-handle {
    position: absolute;     /* 绝对定位，相对于 .rc-handle-container */
    width: 7px;             /* 手柄宽度7px，提供足够的可点击区域 */
    cursor: ew-resize;      /* 鼠标样式：左右箭头，表示可左右拖动 */
    margin-left: -3px;      /* 左边距-3px，使手柄居中对齐列边界 */
    z-index: 2;             /* 层级为2，确保手柄显示在表格内容之上 */
}

/* 表格正在调整列宽时的样式 */
table.rc-table-resizing {
    cursor: ew-resize;  /* 整个表格的鼠标样式变为左右箭头 */
}

/* 调整列宽时，表头及表头元素的鼠标样式 */
table.rc-table-resizing thead,
table.rc-table-resizing thead > th,
table.rc-table-resizing thead > th > a {
    cursor: ew-resize;  /* 表头区域的鼠标样式也变为左右箭头 */
}

/* ============================================
 * 表格冻结列样式 (Fixed Columns)
 * 说明：用于固定表格的左侧或右侧列，滚动时不移动
 * 依赖：bootstrap-table-fixed-columns.js 插件
 * 重要修复：防止冻结列导致页面出现横向滚动条
 * ============================================ */

/* 修复：防止整个页面出现横向滚动条 */
body {
    overflow-x: hidden !important;  /* 禁止页面横向滚动 */
}

/* 修复：确保表格容器不超出其父容器 */
.fixed-table-container {
    overflow: hidden !important;  /* 隐藏超出部分 */
    position: relative !important; /* 相对定位，为冻结列提供定位上下文 */
}

/* 修复：确保主表格区域可以横向滚动，但不影响页面 */
.fixed-table-body {
    overflow-x: auto !important;   /* 允许表格内容横向滚动 */
    overflow-y: auto !important;   /* 允许表格内容纵向滚动 */
    position: relative;            /* 关键：为内部绝对定位元素提供上下文 */
    z-index: 1;                    /* 确保主表格在基础层级 */
}

/* 冻结列的通用样式(左侧和右侧) */
.fixed-columns, .fixed-columns-right {
    position: absolute;       /* 绝对定位 */
    top: 0;                   /* 顶部对齐 */
    height: 100%;             /* 高度100% */
    background-color: #fff;   /* 白色背景 */
    box-sizing: border-box;   /* 边框盒模型 */
    z-index: 2;               /* 层级为2，高于主表格(1)但不阻挡模态框等弹出层 */
    border-width: 0 0 0 1px;  /* 只有左边框 */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.12);  /* 阴影效果 */
    box-shadow: 0 0 10px rgba(0,0,0,.12);
    pointer-events: none;     /* 关键修复：让冻结列容器不拦截鼠标事件 */
}

/* 冻结列内部的所有元素恢复鼠标事件 */
.fixed-columns *,
.fixed-columns-right * {
    pointer-events: auto;     /* 恢复冻结列内部元素的鼠标事件 */
}

/* 左侧冻结列 */
.fixed-columns {
    left: 0;  /* 左边对齐 */
}

/* 左侧冻结列的表体隐藏滚动条 */
.fixed-columns .fixed-table-body {
    overflow: hidden !important;  /* 隐藏滚动条 */
}

/* 右侧冻结列 */
.fixed-columns-right {
    right: 0;  /* 右边对齐 */
}

/* 右侧冻结列的表体隐藏水平滚动条 */
.fixed-columns-right .fixed-table-body {
    overflow-x: hidden !important;  /* 隐藏水平滚动条 */
}

/* 表格行悬停时的背景色 */
.bootstrap-table .table-hover > tbody > tr.hover > td {
    background-color: #f5f5f5;  /* 浅灰色背景 */
}

/* 针对操作列中使用btn-group 组件的情况 */
/* 修复表格中下拉菜单被遮挡的问题 - 更精确的方法 */
/* 只针对操作列的下拉菜单进行特殊处理，不影响表格整体滚动功能 */
.fixed-table-body .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

/* 针对操作列单元格内的btn-group进行特殊处理 */
.fixed-table-body .table td .btn-group {
    position: static !important;
}

/* 确保操作列单元格允许内容溢出显示 */
.fixed-table-body .table td:last-child {
    overflow: visible !important;
}

/* 针对冻结列的情况，确保操作列的下拉菜单正常显示 */
.fixed-table-body .table td:last-child .dropdown-menu {
    transform: translateZ(0);
}

/* ============================================
 * 表格树样式 (Tree Table)
 * 说明：用于显示具有层级结构的数据，如组织架构、菜单树等
 * ============================================ */

/* 树表格的缩进空间 */
.bootstrap-tree-table .treetable-indent {
    width:16px;              /* 宽度16px */
    height: 16px;            /* 高度16px */
    display: inline-block;   /* 内联块级显示 */
    position: relative;      /* 相对定位 */
}

/* 树节点展开/收起按钮 */
.bootstrap-tree-table .treetable-expander {
    width:16px;
    height: 16px;
    display: inline-block;
    position: relative;
    cursor: pointer;  /* 鼠标指针样式 */
}

/* 树表格选中行的背景色 */
.bootstrap-tree-table .treetable-selected{
    background: #f5f5f5 !important;  /* 浅灰色背景 */
}

/* 树表格的边框和底边距 */
.bootstrap-tree-table .treetable-table{
    border:0 !important;       /* 无边框 */
    margin-bottom:0            /* 无底边距 */
}

/* 树表格表体的显示和滚动 */
.bootstrap-tree-table .treetable-table tbody {
    display:block;        /* 块级显示 */
    height:auto;          /* 自动高度 */
    overflow-y:auto;      /* 垂直滚动 */
}

/* 树表格表头和表体行的布局 */
.bootstrap-tree-table .treetable-table thead,
.treetable-table tbody tr {
    display:table;          /* 表格显示 */
    width:100%;             /* 宽度100% */
    table-layout:fixed;     /* 固定表格布局 */
}

/* 树表格表头单元格样式 */
.bootstrap-tree-table .treetable-thead th{
    line-height:24px;                         /* 行高24px */
    border: 0 !important;                     /* 无边框 */
    border-radius: 4px;                       /* 圆角4px */
    border-left:0px solid #e7eaec !important; /* 左边框为0 */
    border-bottom:1px solid #ccc!important;   /* 底边框 */
    text-align: left;                         /* 左对齐 */
}

/* 树表格表头第一列无左边框 */
.bootstrap-tree-table .treetable-thead tr :first-child{
    border-left:0 !important;
}

/* 树表格表体单元格样式 */
.bootstrap-tree-table .treetable-tbody td{
    border: 0 !important;                     /* 无边框 */
    border-left:0px solid #e7eaec !important; /* 左边框为0 */
    border-bottom:1px solid #e7eaec!important;/* 底边框 */
    white-space: nowrap;                      /* 不换行 */
    text-overflow: ellipsis;                  /* 文本溢出显示省略号 */
}

/* 树表格表体第一列无左边框 */
.bootstrap-tree-table .treetable-tbody tr :first-child{
    border-left:0 !important;
}

/* 树表格工具栏的外边距 */
.bootstrap-tree-table .treetable-bars .tool-left,
.bootstrap-tree-table .treetable-bars .tool-right{
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 工具栏左侧元素 */
.bootstrap-tree-table .treetable-bars .tool-left{
    float: left;  /* 左浮动 */
}

/* 工具栏右侧元素 */
.bootstrap-tree-table .treetable-bars .tool-right{
    float: right;  /* 右浮动 */
}

/* 树表格列选择下拉菜单中的标签 */
.bootstrap-tree-table .treetable-bars .columns li label{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.428571429;
    max-width: 100%;
    margin-bottom: 5px;
    cursor:pointer;
}

/* 树表格的底边框 */
.bootstrap-tree-table .table{
    border-bottom: 0px solid #e7eaec!important;
}

/* 有边框的树表格表头 */
.bootstrap-tree-table .table-bordered .treetable-thead th {
    border-left: 1px solid #e7eaec!important;
}

/* 有边框的树表格表体 */
.bootstrap-tree-table .table-bordered .treetable-tbody td {
    border-right: 1px solid #e7eaec!important;
}

/* 树表格分页信息的外边距 */
.bootstrap-tree-table .fixed-table-pagination .pagination-detail {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ============================================
 * 表格行拖拽样式 (Row Drag & Drop)
 * 说明：用于表格行拖拽排序功能
 * ============================================ */

/* 拖拽中的行样式：黄色文字、灰色背景、阴影效果 */
.reorder-rows-on-drag-class td {
    color:yellow!important;                  /* 黄色文字 */
    background-color:#999!important;         /* 灰色背景 */
    /* 文字阴影效果，增强可视性 */
    text-shadow:0 0 10px black,0 0 10px black,0 0 8px black,0 0 6px black,0 0 6px black;
    /* 盒子阴影，给予立体感 */
    box-shadow:0 12px 14px -12px #111 inset,0 -2px 2px -1px #333 inset
}

/* ============================================
 * 表格列拖拽样式 (Column Drag & Drop)
 * 说明：用于表格列拖拽排序功能
 * 注意：与列宽调整(resizable)是两个不同的功能
 * ============================================ */

/* 可拖拽表格的列表样式 */
.dragtable-sortable {
    list-style-type: none;     /* 无列表样式 */
    margin: 0;                 /* 无外边距 */
    padding: 0;                /* 无内边距 */
    -moz-user-select: none;    /* 禁止文本选中（Firefox） */
}

/* 可拖拽列表项的样式 */
.dragtable-sortable li {
    margin: 0;
    padding: 0;
    float: left;              /* 左浮动 */
    font-size: 1em;
    background: white;        /* 白色背景 */
}

/* 可拖拽表格的表头和表体单元格无左边框 */
.dragtable-sortable th, .dragtable-sortable td{
    border-left: 0px;
}

/* 可拖拽表格第一列有左边框 */
.dragtable-sortable li:first-child th,
.dragtable-sortable li:first-child td {
    border-left: 1px solid #CCC;
}

/* ============================================
 * 分页跳转组件样式
 * 说明：用于 Bootstrap Table 的页码跳转功能
 * ============================================ */
.pageGo {
    display: inline-block;  /* 行内块级显示，与其他分页元素在同一行 */
}

.pageGo .form-control {
    display: inline-block !important;  /* 关键：行内块级显示，与按钮在同一行 */
    width: 60px !important;            /* 宽度60px */
    height: calc(2px + 2.0rem);       /* 高度与按钮保持一致 */
    font-size: 1rem;                   /* 字体大小 */
    font-weight: 400;                  /* 字体粗细 */
    line-height: 1.2;                  /* 行高 */
    color: rgb(73, 80, 87);            /* 文字颜色 */
    background-color: rgb(255, 255, 255);  /* 背景颜色 */
    background-clip: padding-box;      /* 背景裁剪 */
    box-shadow: transparent 0px 0px 0px inset;  /* 内阴影 */
    padding: 0.375rem 0.75rem;         /* 内边距 */
    border-width: 1px;                 /* 边框宽度 */
    border-style: solid;               /* 边框样式 */
    border-color: rgb(206, 212, 218);  /* 边框颜色 */
    border-image: initial;             /* 边框图片 */
    border-radius: 0.25rem;            /* 圆角 */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;  /* 过渡动画 */
    vertical-align: middle;            /* 垂直居中对齐 */
    margin-right: 5px;                 /* 右边距，与按钮保持间距 */
}

.pageGo button {
    display: inline-block !important;  /* 行内块级显示 */
    vertical-align: middle;            /* 垂直居中对齐 */
}


/* jQuery UI 拖拽辅助元素的透明度 */
.ui-sortable-helper {
    opacity: 0.7;                /* 透明度70% */
    filter: alpha(opacity=70);   /* IE 滤镜兼容 */
}

/* jQuery UI 拖拽占位符样式 */
.ui-sortable-placeholder {
    -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;     /* Firefox 内阴影 */
    -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;  /* WebKit 内阴影 */
    box-shadow: 4px 5px 4px #C6C6C6 inset;          /* 标准内阴影 */
    border-bottom: 1px solid #CCCCCC;               /* 底边框 */
    border-top: 1px solid #CCCCCC;                  /* 顶边框 */
    visibility: visible !important;                 /* 可见 */
    background: #EFEFEF !important;                 /* 浅灰色背景 */
}

/* 拖拽占位符内部元素隐藏 */
.ui-sortable-placeholder * {
    opacity: 0.0;          /* 完全透明 */
    visibility: hidden;    /* 隐藏 */
}

/* ============================================
 * 表格选中样式
 * ============================================ */

/* 选中行的样式 */
.bootstrap-table .fixed-table-container .table tbody tr.selected td {
    background-color: #E8F7FD;  /* 浅蓝色背景 */
    color: #1890ff;              /* 蓝色文字 */
}

/* ============================================
 * 滚动条样式
 * ============================================ */

/* WebKit 浏览器的滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #F5F5F5;  /* 浅灰色背景 */
}

/* ============================================
 * 气泡弹出框样式 (Popover)
 * 说明：用于显示详细信息的悬浮框
 * ============================================ */

/* 气泡弹出框的字体和宽度 */
.popover {
    font-size: 13px;      /* 字体大小13px */
    max-width: unset;     /*取消最大宽度限制 */
}

/* 气泡弹出框标题 */
.popover-title {
    padding: 8px 14px;                 /* 内边距 */
    margin: 0 !important;              /* 无外边距 */
    font-size: 14px;                   /* 字体大小14px */
    background-color: #f7f7f7;         /* 浅灰色背景 */
    border-bottom: 1px solid #ebebeb;  /* 底边框 */
    border-radius: 5px 5px 0 0;        /* 顶部圆角 */
}

/* 气泡弹出框内容 */
.popover-content {
    padding: 5px;  /* 内边距5px */
}

/* ============================================
 * 向上滚动按钮样式 (Scroll to Top)
 * 说明：用于快速返回页面顶部
 * ============================================ */

/* 滚动按钮的默认样式（隐藏状态） */
#scroll-up {
    border-width: 0;                   /* 无边框 */
    position: fixed;                   /* 固定定位 */
    right: 2px;                        /* 右侧2px */
    z-index: 99;                       /* 高层级 */
    -webkit-transition-duration: .3s;  /* WebKit 过渡效果 */
    transition-duration: .3s;          /* 过渡效果0.3秒 */
    opacity: 0;                        /* 完全透明 */
    filter: alpha(opacity=0);          /* IE 滤镜兼容 */
    bottom: -24px;                     /* 底部负值，隐藏在屏幕外 */
    visibility: hidden;                /* 隐藏 */
    background-color: #aaa;            /* 灰色背景 */
    color: #fff;                       /* 白色文字 */
    font-size: 14px;                   /* 字体大小14px */
    display: none;                     /* 不显示 */
}

/* 滚动按钮的显示状态 */
#scroll-up.display {
    opacity: .7;                  /* 70%透明度 */
    filter: alpha(opacity=70);    /* IE 滤镜兼容 */
    bottom: 2px;                  /* 底部2px，显示在屏幕内 */
    visibility: visible;          /* 可见 */
}

/* ============================================
 * AdminLTE3 全屏模式样式
 * 说明：用于弹出框的全屏显示模式
 * ============================================ */

/* 全屏模式对话框样式 */
.modal-dialog.fullscreen-mode {
    width: 100vw !important;      /* 宽度为视口宽度100% */
    max-width: 100vw !important;  /* 最大宽度为视口宽度100% */
    height: 100vh !important;     /* 高度为视口高度100% */
    margin: 0 !important;         /* 无外边距 */
}

/* 全屏模式对话框的主体 */
.modal-dialog.fullscreen-mode .modal-body {
    padding: 0 !important;                 /* 无内边距 */
    height: calc(100vh - 56px) !important; /* 高度 = 视口高度 - 标题栏高度(56px) */
}

/* 全屏模式对话框的内容区 */
.modal-dialog.fullscreen-mode .modal-content {
    border-radius: 0 !important;  /* 无圆角 */
    border: none !important;      /* 无边框 */
    height: 100vh !important;     /* 高度为视口高度100% */
}

/* ============================================
 * 模态框按钮样式
 * ============================================ */

/* 模态框标题栏中的按钮间距 */
.modal-header .btn {
    margin-left: 0.5rem;  /* 左边距0.5rem */
}

/* 模态框标题栏按钮中的 Font Awesome 图标 */
.modal-header .btn i.fas {
    font-size: 1rem;              /* 字体大小1rem */
    vertical-align: -0.125em;     /* 垂直对齐调整,使图标与文字对齐 */
}

/* ============================================
 * 内容预览模态框样式
 * 说明：用于显示长文本内容，特别是JSON字符串等无空格的长文本
 * ============================================ */

/* 内容预览模态框的内容区域 */
#infoModalContent0 {
    word-wrap: break-word;        /* 长单词换行 */
    word-break: break-word;       /* 强制换行，确保长字符串也能换行 */
    white-space: pre-wrap;        /* 保留空白符但允许自动换行 */
    max-height: 60vh;             /* 最大高度为视口高度的60% */
    overflow-y: auto;             /* 垂直方向超出时显示滚动条 */
    overflow-x: auto;             /* 水平方向超出时显示滚动条 */
    font-family: 'Courier New', Courier, monospace;  /* 使用等宽字体，适合显示JSON */
    font-size: 13px;              /* 字体大小13px */
    line-height: 1.5;             /* 行高1.5倍，提高可读性 */
    padding: 10px;                /* 内边距10px */
    background-color: #f8f9fa;    /* 浅灰色背景，与纯白区分 */
    border-radius: 4px;           /* 圆角4px */
}

/* ============================================
 * iframe 模式下的内容区域样式
 * 说明：用于在模态框中显示的页面，减少边距
 * 使用：在 body 标签上添加 class="iframe-mode"
 * ============================================ */
/*body.iframe-mode .content-wrapper {*/
/*    margin-left: 0 !important;*/
/*    margin-top: 0 !important;*/
/*    padding-bottom: 0 !important;*/
/*}*/

/*body.iframe-mode .content-header {*/
/*    padding: 0 !important;*/
/*}*/

/*body.iframe-mode.text-sm .content-header {*/
/*    padding: 0 !important;*/
/*}*/

/*body.iframe-mode .content-wrapper > .content {*/
/*    padding: 0 !important;*/
/*}*/

/*body.iframe-mode .container,*/
/*body.iframe-mode .container-fluid,*/
/*body.iframe-mode .container-lg,*/
/*body.iframe-mode .container-md,*/
/*body.iframe-mode .container-sm,*/
/*body.iframe-mode .container-xl {*/
/*    width: 100%;*/
/*    padding-right: 1px !important;*/
/*    padding-left: 1px !important;*/
/*    padding-top: 1px !important;*/
/*    margin-right: auto;*/
/*    margin-left: auto;*/
/*}*/

/* ============================================
 * 模态框 iframe 模式下的内容区域样式
 * 说明：专门用于在模态框 iframe 中显示的页面，减少更多边距
 * 使用：在 body 标签上添加 class="modal-iframe-mode"
 * 或者 使用 Thymeleaf 条件判断：
 *<body class="hold-transition sidebar-mini text-sm"
 *     th:attr="class=${'hold-transition sidebar-mini text-sm' + (layout == 'modal' ? ' modal-iframe-mode' : layout == 'iframe' ? ' iframe-mode' : '')}">
 * ============================================ */
body.modal-iframe-mode {
    background-color: #fff !important;  /* 白色背景 */
    height: 100vh !important;  /* 占满视口高度 */
    overflow: hidden !important;  /* 防止双滚动条 */
}

body.modal-iframe-mode .wrapper {
    height: 100vh !important;  /* 占满视口高度 */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;  /* 允许flex子元素收缩 */
}

body.modal-iframe-mode .content-wrapper {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #fff !important;  /* 白色背景 */
    flex: 1 !important;  /* 占据剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;  /* 允许flex子元素收缩 */
}

body.modal-iframe-mode .content-header {
    padding: 0 !important;
    flex-shrink: 0 !important;  /* 不缩小 */
}

body.modal-iframe-mode.text-sm .content-header {
    padding: 0 !important;
}

body.modal-iframe-mode .content-wrapper > .content {
    padding: 0 !important;
    background-color: #fff !important;  /* 白色背景 */
    flex: 1 !important;  /* 占据剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;  /* 允许flex子元素收缩 */
}

body.modal-iframe-mode .container,
body.modal-iframe-mode .container-fluid,
body.modal-iframe-mode .container-lg,
body.modal-iframe-mode .container-md,
body.modal-iframe-mode .container-sm,
body.modal-iframe-mode .container-xl {
    width: 100%;
    padding-right: 2px !important;  /* 保留边框空间 */
    padding-left: 2px !important;   /* 保留边框空间 */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-right: auto;
    margin-left: auto;
    flex: 1 !important;  /* 占据剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;  /* 允许flex子元素收缩 */
}

/* row 也需要占满高度 */
body.modal-iframe-mode .row {
    flex: 1 !important;  /* 占据剩余空间 */
    margin-left: -5px !important;  /* 减小负边距 */
    margin-right: -5px !important;  /* 减小负边距 */
    min-height: 0 !important;  /* 允许flex子元素收缩 */
    max-height: 100% !important;  /* 限制最大高度 */
    display: flex !important;  /* 确保是flex容器 */
    flex-direction: row !important;  /* row默认是横向 */
}

/* col 也需要占满高度 */
body.modal-iframe-mode .row > [class*="col-"] {
    min-height: 0 !important;  /* 允许flex子元素收缩 */
    max-height: 100% !important;  /* 限制最大高度 */
    height: 100% !important;  /* 明确高度 */
    padding-left: 5px !important;  /* 减小列间距 */
    padding-right: 5px !important;  /* 减小列间距 */
    /* 不设置display: flex，保持默认的block布局 */
}

/* 表单行不要使用 flex，保持正常布局 */
body.modal-iframe-mode .form-group.row {
    display: flex !important;
    flex-direction: row !important;
    flex: none !important;  /* 不参与父容器的flex分配 */
    height: auto !important;  /* 高度自适应 */
    margin-left: -5px !important;  /* 减小负边距 */
    margin-right: -5px !important;  /* 减小负边距 */
}

body.modal-iframe-mode .card {
    margin-bottom: 0 !important;
    flex: 1 !important;  /* 占据剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;  /* 防止内容溢出 */
    min-height: 0 !important;  /* 允许flex子元素收缩 */
    max-height: 100% !important;  /* 限制最大高度为父容器高度 */
    height: 100% !important;  /* 明确设置高度 */
    position: relative !important;  /* 为绝对定位的子元素提供参考 */
}

/* card-header 固定在顶部 */
body.modal-iframe-mode .card-header {
    position: relative !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;  /* 不缩小 */
}

/* card-footer 固定在底部 */
body.modal-iframe-mode .card-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
    background-color: #fff !important;
    border-top: 1px solid rgba(0,0,0,.125) !important;
    padding: 0.75rem !important;
}

body.modal-iframe-mode .card-body {
    position: absolute !important;  /* 使用绝对定位 */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0.75rem !important;  /* 增加内边距，避免内容贴边 */
    overflow-y: auto !important;  /* 内容过多时滚动 */
    overflow-x: hidden !important;  /* 隐藏横向滚动条 */
}

/* 如果有 card-header，card-body 需要留出顶部空间 */
body.modal-iframe-mode .card-header + .card-body,
body.modal-iframe-mode .card-header ~ .card-body {
    top: auto !important;  /* 取消top定位 */
    position: relative !important;  /* 改为相对定位 */
    flex: 1 !important;  /* 占据剩余空间 */
}

/* 如果有 card-footer，card-body 需要留出底部空间 */
body.modal-iframe-mode .card:has(.card-footer) .card-body {
    bottom: auto !important;  /* 取消bottom定位，让footer自然占据底部 */
    padding-bottom: 60px !important;  /* 给footer留出空间，根据实际footer高度调整 */
}

/* form 元素不要使用 flex，以免影响内容滚动 */
body.modal-iframe-mode .card-body > form {
    display: block !important;  /* 保持默认块级元素 */
    height: auto !important;  /* form高度自适应内容 */
}

/* ========================================
 * 搜索卡片紧凑样式 - 用于模态框中的搜索条件区域
 * 使用方法: 在card元素上添加 search-card-compact 类
 * ======================================== */
body.modal-iframe-mode .row:has(.search-card-compact) {
    flex: 0 0 auto !important;
    margin-bottom: 0.5rem !important;
}

body.modal-iframe-mode .row:has(.search-card-compact) .col-12 {
    padding-bottom: 0 !important;
}

body.modal-iframe-mode .card.search-card-compact {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    display: block !important;  /* 确保使用块级布局 */
}

body.modal-iframe-mode .search-card-compact .card-body {
    position: static !important;
    padding: 0.5rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;  /* 覆盖绝对定位 */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

body.modal-iframe-mode .search-card-compact .select-list ul {
    margin-bottom: 0 !important;
}

body.modal-iframe-mode .search-card-compact .select-list li {
    margin-bottom: 0.3rem !important;
}