:root {
    --bb-header-dropdown-border-color: rgba(255,255,255,.5);
    --bb-header-dropdown-border-hover-color: rgba(255,255,255,.8);
    --bb-header-dropdown-color: #fff;
    --bb-header-dropdown-color-rgb: 255, 255, 255;
    --bb-header-font-size: 1rem;
}

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

html,body{
    height:100%;
}

.layout {
    --bb-layout-sidebar-collapse-width: 80px;
}
    .layout .layout-banner {
        padding: 0;
        min-width:160px;
        height:auto;
    }
        .layout .layout-banner .fa {
            margin-left: 20px;
            color: #eee;
            font-size: 20px;
        }
.layout-title a {
    font-size: 18px;
    color: #fff;
}
.layout .layout-logo {
    border: none !important;
    width: 32px !important;
}
.layout .bb-theme-mode .dropdown-toggle {
    color: var(--bs-navbar-color);
    border-left: 1px solid #dddddd40;
}
.layout .layout-side {
    z-index: 1000;
}
    .layout .layout-side .scroll {
        padding-top:35px;
    }

ul.submenu ul.submenu .menu-icon {
    list-style-type: none; /* 移除默认列表样式 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="4"  fill="rgba(0, 0, 0, 0.3)"/></svg>');
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: 0 center; /* 背景图片位置 */
    background-size: 5px 5px; /* 背景图片大小 */
    padding-left: 15px; /* 调整左侧内边距，让文字避开图片 */
}

.layout.is-collapsed .layout-title {
    opacity: 1;
}
/* 按钮组样式 */
.side-btn-group {
    display: flex; /* 使用 Flexbox 布局 */
    width: 100%; /* 按钮组宽度占满父容器 */
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    position: fixed;
    height: 40px;
}
    .side-btn-group .btn {border-radius:0;}
    /* 按钮样式 */
    .side-btn-group > .btn {
        flex: 1; /* 让每个按钮平均分配剩余空间，各占 50% */
        box-sizing: border-box; /* 使内边距和边框包含在宽度内 */
        text-align: center; /* 文字居中 */
    }
.checkbox-list {
    --bb-checkbox-item-width: 160px;
}
.help {color:#fff;}
    .help i {margin-right:5px;}
    .help:hover {
        text-decoration: underline;
    }
.breadcrumb {
    --bs-breadcrumb-divider-color: #fff;
}
.breadcrumb-item.active, .breadcrumb-item a {
    color: #fff;
}

.split {
    --bb-split-bar-width: 2px;
}

.split .split-right {
    padding-left:15px;
}

.menu-tree .tree-content:has(div div .level-3) {
    display: inline-flex;
}

.captcha-dialog {width:320px;}
    .captcha-dialog .modal-body {padding:0;}

.upload .upload-body.is-card .upload-item{width:30%;}

.tabs .tabs-body-content {height:100%;}

/* 标签页激活色跟随主色（--bb-primary 由主题切换器设置；未设置时保持组件默认值） */
.tabs {
    --bb-tabs-item-active-color: var(--bb-primary, #409eff);
    --bb-tabs-item-hover-color: var(--bb-primary, #409eff);
    --bb-tabs-bar-bg: var(--bb-primary, #409eff);
}

/* 顶栏边框色跟随主色（变量定义在 .layout 作用域，需在此作用域覆盖） */
.layout {
    --bb-layout-header-border-color: var(--bb-primary, var(--bs-border-color));
}

/* 顶栏用户信息区背景跟随主色（文字转白保证对比度） */
.layout .layout-header .dropdown-logout {
    --bb-logout-user-bg: color-mix(in srgb, var(--bb-primary, var(--bb-layout-menu-user-banner-background)) 70%, #fff);
}

/* 侧边栏用户区域边框跟随主色（dark 模式定义在 .layout 作用域） */
.layout {
    --bb-layout-menu-user-border-color: var(--bb-primary, #2c3034);
}

/* 主色按钮（含下拉按钮）跟随主题主色：覆盖 Bootstrap 硬编码的 btn-primary 色值 */
.btn-primary,
.dropdown .btn-primary {
    --bs-btn-bg: var(--bb-primary, #0d6efd);
    --bs-btn-border-color: var(--bb-primary, #0d6efd);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bb-primary, #0d6efd) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bb-primary, #0d6efd) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bb-primary, #0d6efd) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bb-primary, #0d6efd) 70%, #000);
    --bs-btn-disabled-bg: var(--bb-primary, #0d6efd);
    --bs-btn-disabled-border-color: var(--bb-primary, #0d6efd);
}

/* 次级按钮保持灰色（定义在 btn-primary 之后，确保同元素并存时 secondary 覆盖 primary） */
.btn-secondary,
.dropdown .btn-secondary {
    --bs-btn-bg: var(--bs-secondary, #6c757d);
    --bs-btn-border-color: var(--bs-secondary, #6c757d);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary, #6c757d) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary, #6c757d) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary, #6c757d) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary, #6c757d) 70%, #000);
    --bs-btn-disabled-bg: var(--bs-secondary, #6c757d);
    --bs-btn-disabled-border-color: var(--bs-secondary, #6c757d);
}

/* Info 色按钮（打印下拉等使用 Color.Info）跟随主题主色 */
.btn-info,
.dropdown .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bb-primary, #0dcaf0);
    --bs-btn-border-color: var(--bb-primary, #0dcaf0);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bb-primary, #0dcaf0) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bb-primary, #0dcaf0) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bb-primary, #0dcaf0) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bb-primary, #0dcaf0) 70%, #000);
    --bs-btn-disabled-bg: var(--bb-primary, #0dcaf0);
    --bs-btn-disabled-border-color: var(--bb-primary, #0dcaf0);
}

/* 下拉菜单选中项背景跟随主色（变量定义在 .dropdown-menu 作用域且为硬编码） */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bb-primary, #0d6efd);
}

/* 日期/时间选择器面板（今天按钮、悬停色）跟随主色 */
.picker-panel {
    --bb-picker-panel-today-bg: var(--bb-primary, #409eff);
    --bb-picker-hover-color: var(--bb-primary, #409eff);
}

/* ===== 批量覆盖：BootstrapBlazor 组件内硬编码主色（#409eff/#0d6efd）统一跟随 --bb-primary ===== */
.calendar {
    --bb-calendar-today-color: var(--bb-primary, #409eff);
    --bb-calendar-selected-bg: var(--bb-primary, #409eff);
    --bb-calendar-week-today-color: var(--bb-primary, #409eff);
    --bb-calendar-week-today-border-color: var(--bb-primary, #409eff);
    --bb-calendar-toolbar-hover-color: var(--bb-primary, #409eff);
    --bb-calendar-toolbar-focus-color: var(--bb-primary, #409eff);
    --bb-calendar-toolbar-active-color: var(--bb-primary, #409eff);
}
.bb-clock-picker {
    --bb-time-text-color: var(--bb-primary, #409eff);
    --bb-time-footer-btn-hover-border-color: var(--bb-primary, #409eff);
    --bb-time-footer-btn-hover-bg-color: var(--bb-primary, #409eff);
    --bb-time-footer-btn-active-color: var(--bb-primary, #409eff);
}
.menu {
    --bb-menu-active-color: var(--bb-primary, #409eff);
    --bb-menu-bar-bg: var(--bb-primary, #409eff);
}
.layout .layout-menu .menu {
    --bb-menu-item-hover-bg: var(--bb-primary, #409eff);
}
.drawer {
    --bb-drawer-bar-hover-color: var(--bb-primary, #409eff);
}
.filter-item {
    --bb-filter-item-btn-hover-color: var(--bb-primary, #409eff);
    --bb-filter-item-btn-hover-border-color: var(--bb-primary, #409eff);
}
.listview {
    --bb-lv-item-border-hover-color: var(--bb-primary, #409eff);
}
.upload {
    --bb-upload-body-list-item-hover-color: var(--bb-primary, #409eff);
}
.ribbon-tab {
    --bb-ribbon-menu-hover-color: var(--bb-primary, #409eff);
}
.slide-button {
    --bb-slide-item-active-bg: var(--bb-primary, #0d6efd);
}
.table-container {
    --bb-table-header-icon-active-color: var(--bb-primary, #409eff);
}
.bb-transfer {
    --bb-transfer-filter-focus-border-color: var(--bb-primary, #409eff);
}
[data-bs-theme="dark"] .layout {
    --bb-layout-menu-item-hover-bg: var(--bb-primary, #409eff);
}
[data-bs-theme="dark"] .split {
    --bb-split-bar-arrow-hover-border-color: var(--bb-primary, #0d6efd);
}
[data-bs-theme="dark"] .calendar {
    --bb-calendar-selected-bg: var(--bb-primary, #409eff);
}

/* 表单控件焦点边框跟随主色 */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bb-primary-color, var(--bb-primary, #86b7fe));
}

/* TinyMCE 编辑器聚焦边框跟随主色（覆盖皮肤里的硬编码 #2D6ADF） */
.tox.tox-edit-focus .tox-edit-area::before {
    border-color: var(--bb-primary, #2D6ADF) !important;
}

/* 复选框/穿梭框等组件焦点边框跟随主色 */
.form-check-input:focus,
.checkbox-input:focus {
    --bb-checkbox-input-focus-border-color: var(--bb-primary-color, var(--bb-primary, #86b7fe));
}
.transfer-filter:focus-within {
    --bb-transfer-filter-focus-border-color: var(--bb-primary-color, var(--bb-primary, #86b7fe));
}

.layout-main .table-container {
    height: calc(100vh - 122px);
}

.copyright {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    z-index: 1000;
}
    .copyright span {
        margin-left:16px;
        color: var(--bs-secondary-color);
        font-size: 10px;
    }
    .copyright a {
        color: var(--bs-secondary-color);
        font-size: 10px;
    }
        .copyright a:hover {
            font-weight: bold;
        }

.table-fixed .table-fixed-body {
    overflow-y: auto;
}

.table-container .table tr:last-child td {
    border-bottom: 1px var(--bs-border-color) solid;
}
.table-container .table-wrapper .table thead th {
    position: sticky;
    z-index: 4;
    top: 0;
}

.modal-dialog-centered, .tox .tox-dialog-wrap {
    align-items: flex-start !important;
}

    .modal-dialog-centered .form-footer {
        position: sticky;
        bottom: 0;
        background-color: var(--bs-body-bg);
        transform: translateZ(0);
        z-index: 100;
    }
    .swal {
        z-index: 2000;
    }
    .swal .swal2-content {
        word-wrap: break-word;
        word-break: break-all;
    }

.form-editor.is-invalid {
    border: 1px var(--bs-danger) solid;
    border-radius: 10px;
}
.form-item.is-invalid {
    border: 1px var(--bs-danger) solid;
    border-radius: .475rem;
}

.scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

    .scroll:hover {
        /* 鼠标悬停时显示垂直滚动条 */
        overflow-y: auto;
        overflow-x: auto;
    }

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.fa-bell.shake {
    animation: shake 0.8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .layout .layout-side .scroll {
        padding-top: 0 !important;
    }
    .table-container .scroll {
        overflow: auto !important;
    }
    .layout-main .table-container {
        height: auto !important;
    }
    .layout .layout-banner{
        min-width:100px;
    }
}