/* === 变量定义 === */
:root {
    /* === 全局公共等级颜色 === */
    --Garde--0: #949595;
    --Garde--1: #cdd5d5;
    --Garde--2: #188D14;
    --Garde--3: #658BCE;
    --Garde--4: #9b61c8;
    --Garde--5: #e8a64e;
    --Garde--6: #cb464a;


    /* === 框架颜色（默认暗色模式） === */
    --background-color: #171622;
    --background-color-2: rgba(60, 60, 75, 0.2);
    --background-color-window: #2d3748;
    --color-h: #ffffff;
    --color-p: #dcdde1;

    /* === 侧边栏颜色（默认暗色模式） === */
    --sidebar-background-color: var(--background-color);
    --sidebar-color-text-1: #b3b3b3;
    --sidebar-color-text-2: #FFFFFF;
    --sidebar-a-hover-background-color: #0a53be;

    .pagination{
        /*=== 分页模块 ===*/
        /* 设置分页文字的颜色为默认值（取消自定义颜色） */
        --bs-pagination-color: #ffffff ;

        /* 设置鼠标悬停时分页组件的背景颜色为默认值（取消自定义悬停背景色） */
        --bs-pagination-hover-bg: rgba(60, 60, 75, 0.2);

        /* 设置焦点时分页组件的背景颜色为默认值（取消自定义焦点背景色） */
        --bs-pagination-focus-bg: rgba(60, 60, 75, 0.4);

        /* 设置活动页码文字的颜色为白色 */
        --bs-pagination-active-color: #fff;

        /* 设置活动页码组件的背景颜色为默认值（可根据需要自定义） */
        --bs-pagination-active-bg: rgba(60, 60, 75, 0.6);
    }

}

[data-theme="light"] {

    /* === 框架颜色（亮色模式） === */
    --background-color: #ffffff; /* 纯白背景 */
    --background-color-2: rgba(60, 60, 75, 0.2);
    --background-color-window: #2C3A47; /* 柔和窗口背景 */
    --color-h: #1a1a1a;         /* 深邃墨色标题 */
    --color-p: #3d3d3d;         /* 增强型深灰正文 */

    /* === 侧边栏颜色 === */
    --sidebar-background-color: #f8f9fa; /* 浅灰色侧边栏背景 */
    --sidebar-color-text-1: #666666;     /* 次级文本颜色（灰色） */
    --sidebar-color-text-2: #222222;     /* 主要文本颜色（深灰） */
    --sidebar-a-hover-background-color: #e2e6ea; /* 悬停背景颜色（浅灰蓝） */
    .pagination{
        /*=== 分页模块 ===*/
        /* 基础文本颜色（深空灰） */
        --bs-pagination-color: #2d2d2d; /* 比纯黑更柔和，对比度≈13:1 */

        /* 悬停状态（霓虹蓝） */
        --bs-pagination-hover-bg: rgba(58, 137, 255, 0.15); /* 8%透明度霓虹蓝 */
        --bs-pagination-hover-bg: linear-gradient(0deg, #3a89ff26, #3a89ff1a); /* 动态渐变 */

        /* 焦点状态（能量光效） */
        --bs-pagination-focus-bg: rgba(58, 137, 255, 0.3); /* 能量光晕效果 */
        --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(58, 137, 255, 0.4); /* 赛博朋克光圈 */

        /* 激活状态（赛博朋克紫） */
        --bs-pagination-active-color: #ffffff;
        --bs-pagination-active-bg: linear-gradient(45deg, #5c46f7, #9431f1); /* 紫色渐变 */
        --bs-pagination-active-bg: #7a3dfc; /* 实色备选方案 */
    }

}

body {
    background-color: var(--background-color);
    color: var(--color-p);
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /*margin-left: 60px;*/
}

h1, h2, h3, h4, h5, h6{
    color: var(--color-h);
    font-size: 16px;
}
p, a, span, i{
    color: var(--color-p);
    font-size: 12px;
}

input{
    background-color: var(--background-color-2) ;
    color: var(--color-p) ;
    border: 1px solid var(--Garde--0);
}

input::placeholder{
    color: var(--color-p);
    opacity: 0.3; /* 50% 透明度 */
}

.input-group span, .input-group input, .input-group textarea, .der-form input {
    background-color: var(--background-color-2) !important;
    color: var(--color-p) !important;
    border: 1px solid var(--Garde--0) !important;
}

.input-group input::placeholder, .der-form input::placeholder {
    color: var(--color-p) !important;
    opacity: 0.3; /* 50% 透明度 */
}

.input-group input[readonly] {
    /*background-color: #fff !important; !* 背景颜色 *!*/
    color: var(--Garde--0) !important;
    cursor: unset; /* 鼠标样式 */
    /*border: 1px solid #ced4da; !* 边框颜色 *!*/
}


/*========================================================================================================================*/
/* === 侧边导航基础样式 === */
.sidebar .dropdown-toggle::after {
    display: none; /* 移除默认的下拉箭头 */
}

.main-wrapper {
    display: flex;
    min-height: 100vh; /* 布局容器撑满整个视口高度 */
}

/* === 侧边栏样式 === */
.sidebar {
    padding: 0 10px;
    margin-right: 10px;
    background-color: var(--sidebar-background-color);
    transition: all 0.3s ease; /* 添加过渡效果 */
    height: 100%; /* 撑满高度 */
    position: fixed;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3); /* 右侧阴影 */
}

/* === 导航链接样式 === */
.sidebar a {
    color: var(--sidebar-color-text-1);
    transition: all 0.1s ease-in-out;
    display: inline-block; /* 让宽度自适应内容 */
    position: relative; /* 为伪元素定位提供参考 */
    padding: 15px 50px 15px 20px; /* 为箭头留出 50px 空间 */
    margin: 1px;
    width: 100%;
    font-size: 14px;
    border-radius: 10px;
    font-weight: bold;
}

.sidebar a:hover,
.sidebar a:focus {
    color: var(--sidebar-color-text-2);
    background-color: var(--sidebar-a-hover-background-color);
    transition: all 0.1s ease-in-out; /* 添加过渡效果 */
}

/* === 导航箭头样式 === */
.sidebar a .nav-caret:before {
    position: absolute;
    right: 20px; /* 距离右侧 10px */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
}

/* === 二级菜单样式 === */
.sidebar .submenu .nav-link {
    font-size: 12px;
    background-color: unset;
    color: var(--sidebar-color-text-1);
    margin-left: 20px;
    font-weight: unset;
}

/* === 二级菜单横杠样式 === */
.sidebar .submenu .nav-link i {
    display: inline-block;
    width: 10px; /* 默认宽度为 10px */
    height: 1px; /* 横杠高度 */
    background-color: #b3b3b3; /* 横杠颜色 */
    margin-right: 10px; /* 右侧外边距为 10px */
    vertical-align: middle; /* 垂直居中 */
    transition: width 0.1s ease; /* 添加过渡效果 */
}

.submenu .nav-link:hover i {
    width: 20px; /* 鼠标悬停时宽度增加 */
    transition: width 0.1s ease; /* 添加过渡效果 */
}

/* === 顶部图标样式 === */
.sidebar .avatar-icon i {
    background: linear-gradient(45deg, #8a2be2, #1e90ff); /* 紫色到蓝色的渐变色 */
    -webkit-background-clip: text; /* 将背景裁剪为文字 */
    background-clip: text;
    color: transparent; /* 文字颜色透明 */
}

/* === 侧边栏收缩样式 === */
.sidebar.collapsed {
    width: 60px; /* 收缩后的宽度 */
    padding: 0 5px; /* 减少内边距 */
    transition: width 0.3s ease; /* 添加过渡效果 */
    border-right: 1px solid #333; /* 右侧边框 */

}

/* === 收缩时隐藏文字和箭头 === */
.sidebar.collapsed a span,
.sidebar.collapsed .nav-caret:before,
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .submenu .nav-link {
    display: none;
}

/* === 收缩时调整链接的 padding 和文字居中 === */
.sidebar.collapsed a {
    padding: 15px 0; /* 上下 padding 保持不变，左右 padding 为 0 */
    text-align: center; /* 文字居中 */
    margin: 1px 0; /* 调整 margin */
}

/* === 收缩时修改图标默认的间距 === */
.sidebar.collapsed i {
    margin-right: 0 !important; /* 移除图标的右侧间距 */
}

/* === 收缩时二级菜单的横杠隐藏 === */
.sidebar.collapsed .submenu .nav-link i {
    display: none;
}

/* === 收缩时顶部图标保持不变 === */
.sidebar.collapsed .avatar-icon i {
    font-size: 24px; /* 保持图标大小 */
}

/* === 收缩时 hover 效果 === */
.sidebar.collapsed a:hover,
.sidebar.collapsed a:focus {
    background-color: unset; /* 移除背景色 */
    border-radius: 10px; /* 保持圆角 */
}

/* === 收缩时主内容区域调整 === */
.main-wrapper .sidebar.collapsed + main {
    margin-left: 60px; /* 主内容区域左边距与侧边栏收缩宽度一致 */
    transition: margin-left 0.3s ease; /* 添加过渡效果 */
}


/*========================================================================================================================*/
/*===表格===*/
.der-table {
    width: 100%; /* 占满屏幕宽度 */
    max-width: 100%; /* 确保不超过屏幕宽度 */
    white-space: nowrap; /* 禁止内容换行 */
    display: table; /* 恢复默认表格布局 */
}

.der-table-c {
    width: 100%; /* 占满屏幕宽度 */
    overflow-x: auto; /* 内容超出时显示水平滚动条 */
    display: block; /* 使容器表现为块级元素 */
}

.der-table th, .der-table td {
    background-color: var(--background-color) !important;
    color: var(--color-p);
    border: unset;
    padding: 10px !important;
    text-align: center !important;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}

.der-table tr:hover td{
    color: var(--color-h);
}

/* 直接控制图片的样式 */
.der-table img {
    width: 50px; /* 设置图片宽度 */
    height: 50px; /* 设置图片高度 */
    border-radius: 10px; /* 图片圆角 */
    object-fit: contain; /* 保持图片比例不变，完整显示在容器内 */
    overflow: hidden; /* 隐藏超出部分 */
}

/*分页按钮*/
.dt-paging {
    padding: 10px;
    margin-bottom: 30px !important;
}

/*定义颜色*/
.pagination {
    justify-content: center !important; /* 分页按钮居中 */
    background-color: unset;
    /* 设置分页组件的左右内边距为默认值（取消自定义内边距） */
    /*--bs-pagination-padding-x: unset;*/

    /* 设置分页组件的上下内边距为默认值（取消自定义内边距） */
    /*--bs-pagination-padding-y: unset;*/

    /* 设置分页文字的字体大小为默认值（取消自定义字体大小） */
    --bs-pagination-font-size: 12px;


    /* 设置分页组件的背景颜色为默认值（取消自定义背景色） */
    --bs-pagination-bg: unset;

    /* 设置分页组件边框的宽度为默认值（取消自定义边框宽度） */
    --bs-pagination-border-width: unset;

    /* 设置分页组件边框的颜色为默认值（取消自定义边框颜色） */
    --bs-pagination-border-color: unset;

    /* 设置分页组件边框的圆角为默认值（取消自定义圆角） */
    --bs-pagination-border-radius: unset;

    /* 设置鼠标悬停时分页文字的颜色为默认值（取消自定义悬停颜色） */
    --bs-pagination-hover-color: unset;

    /* 设置鼠标悬停时分页组件边框的颜色为默认值（取消自定义悬停边框颜色） */
    --bs-pagination-hover-border-color: unset;

    /* 设置焦点时分页文字的颜色为默认值（取消自定义焦点颜色） */
    --bs-pagination-focus-color: unset;


    /* 设置焦点时分页组件的盒子阴影为默认值（取消自定义盒子阴影） */
    --bs-pagination-focus-box-shadow: unset;


    /* 设置活动页码组件的边框颜色为默认值（可根据需要自定义） */
    --bs-pagination-active-border-color: unset;

    /* 设置禁用页码文字的颜色为默认次要色（取消自定义颜色） */
    --bs-pagination-disabled-color: unset;

    /* 设置禁用页码组件的背景颜色为默认次要背景色（取消自定义背景色） */
    --bs-pagination-disabled-bg: unset;

    /* 设置禁用页码组件的边框颜色为默认边框颜色（取消自定义边框颜色） */
    --bs-pagination-disabled-border-color: unset;
}

/*========================================================================================================================*/
/*滚动条定义*/
/* 针对 Webkit 浏览器（Chrome、Safari、Edge 等） */
::-webkit-scrollbar {
    width: 12px; /* 垂直滚动条宽度 */
    height: 12px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
    background: #1e1e1e; /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
    background: #444; /* 滚动条滑块颜色 */
    border-radius: 6px; /* 滑块圆角 */
    border: 3px solid #1e1e1e; /* 滑块边框 */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* 鼠标悬停时滑块颜色 */
}

/* 针对 Firefox 浏览器 */
* {
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: #444 #1e1e1e; /* 滑块颜色和轨道颜色 */
}