@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
        scrollbar-width: thin;
    }
}

/* 自定义徽章样式 */
.my_badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    text-decoration: none;
}

.my_badge_two {
    display: inline-block;
    padding: 0.35em 0.8em;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

.my_badge_two:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


.my_badge_three {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #020708;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .15rem
}

/* 背景颜色样式 */
.bg-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.bg-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.bg-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.bg-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* 深色主题适配 */
[data-bs-theme="dark"] .my_badge_two {
    border-width: 1px;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .my_badge_two:hover {
    box-shadow: 0 4px 8px rgba(255,255,255,0.15);
}

/* 可以添加更多自定义颜色 */
.bg-custom-orange {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

.bg-custom-purple {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}

.bg-custom-pink {
    background-color: #d63384 !important;
    border-color: #d63384 !important;
}
.text-dark-green {
    color: #006400 !important; /* 深绿色 (DarkGreen) */
}
.my_center-qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* 顶部导航栏强制主题色覆盖 - 使用高特异性选择器 */
html body .layout,
html body .layout.is-page,
html body .layout.has-sidebar,
html body .layout.has-sidebar.has-footer.is-fixed-tab.is-page,
html body section.layout {
    --bb-layout-header-background: #217D8D;
    --bb-layout-header-border-color: #217D8D;
    --bb-layout-header-color: #fff;
    --bb-layout-headerbar-color: #217D8D;
    --bb-layout-headerbar-background: #217D8D;
    --bb-layout-sidebar-banner-background: #217D8D;
    --bb-layout-banner-border-color: #217D8D;
    --bb-layout-menu-user-banner-background: #217D8D;
    --bb-layout-menu-user-border-color: #1a6570;
    --bb-layout-menu-item-hover-bg: #217D8D;
    --bb-primary-color: #217D8D;
    --bb-primary-color-rgb: 33, 125, 141;
}

:root {
    --bb-primary-color: #217D8D;
    --bb-primary-color-rgb: 33, 125, 141;
}

/* 侧边栏菜单选中和悬停状态 */
.menu,
.layout .layout-menu .menu {
    --bb-menu-active-color: #217D8D;
    --bb-menu-bar-bg: #217D8D;
    --bb-menu-item-hover-bg: #217D8D;
}

/* 侧边栏选中项背景 */
.layout .layout-menu .menu .nav-link.active,
.menu .nav-link.active {
    background-color: #217D8D !important;
    color: #fff !important;
}

/* 标签页选中状态 */
.tabs,
.tabs-chrome,
.layout .layout-header .tabs {
    --bb-tabs-item-active-color: #217D8D;
    --bb-tabs-item-hover-color: #217D8D;
    --bb-tabs-bar-bg: #217D8D;
    --bb-tabs-item-active-bg-color: #217D8D;
    --bb-tabs-header-bg-color: #217D8D;
}

/* 覆盖 .tabs 默认的蓝色变量 */
.tabs {
    --bb-tabs-item-active-color: #217D8D !important;
    --bb-tabs-item-hover-color: #217D8D !important;
    --bb-tabs-bar-bg: #217D8D !important;
}

/* 标签页选中项样式 - Chrome风格 - 强制覆盖 layout-header 的白色 */
html body .layout .layout-header .tabs-chrome .tabs-item.active,
html body .layout .layout-header .tabs-chrome .tabs-item.active *,
html body .layout-header .tabs-chrome .tabs-item.active,
html body .layout-header .tabs-chrome .tabs-item.active *,
.tabs-chrome .tabs-body .tabs-item.active,
.tabs-chrome .tabs-body .tabs-item.active * {
    color: #217D8D !important;
}

.tabs-chrome .tabs-item.active::before,
.tabs-chrome .tabs-item.active::after {
    background-color: #217D8D !important;
}

/* 标签页普通样式 */
.tabs .tabs-item.active {
    color: #217D8D !important;
}

.tabs .tabs-bar,
.tabs-chrome .tabs-bar {
    background-color: #217D8D !important;
}

.layout-header .nav-link,
.layout-header a:not(.tabs-item),
.layout-header > span {
    color: #ffffff !important;
}

/* 选中的标签页文字用深色 */
.layout-header .tabs-item.active,
.layout-header .tabs-item.active span,
.layout-header .tabs-item.active a,
.layout-header .tabs-item.active * {
    color: #217D8D !important;
}

.layout-header .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
}

/* 下拉菜单样式修复 - 确保文字可见 */
.dropdown-menu,
.layout-header .dropdown-menu {
    background-color: #ffffff !important;
}

.dropdown-menu .dropdown-item,
.layout-header .dropdown-menu .dropdown-item,
.dropdown-menu a,
.layout-header .dropdown-menu a {
    color: #212529 !important;
}

.dropdown-menu .dropdown-item:hover,
.layout-header .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #217D8D !important;
}