/*
 * xyX 模板覆盖系统默认UI样式
 * 确保xyX模板样式优先级高于 public/home 和 public/user 下的默认样式
 */

/* ==================== 第一部分：基础元素覆盖 ==================== */

/* 覆盖 public/home/css/style.css 和 public/user/css/style.css 的基础样式 */
html {
    background-color: var(--xyx-bg-gradient, #f5f7fa) !important;
}

body {
    background-color: transparent !important;
    color: var(--xyx-text-color, #333) !important;
    font-size: var(--xyx-font-size-base, 14px) !important;
    line-height: 1.5 !important;
    font-family: var(--xyx-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
}

/* 列表样式覆盖 */
ul, li, dl, dt, dd {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==================== 第二部分：表单元素覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的表单样式 */
.form-control {
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;  /* 增强边框可见性，在白色背景上清晰可见 */
    font-size: var(--xyx-font-size-sm, 14px) !important;
    padding: 12px 16px !important;
    color: var(--xyx-text-color, #333) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;  /* 添加轻微阴影增强轮廓 */
    -webkit-box-shadow: none !important;
    background: var(--xyx-input-bg, rgba(255, 255, 255, 0.9)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: var(--xyx-accent-color, #007bff) !important;
    box-shadow: 0 0 0 3px var(--xyx-accent-color-alpha-10, rgba(0, 123, 255, 0.1)) !important;
    outline: none !important;
}

/* ==================== 第三部分：按钮样式覆盖 ==================== */

/* 覆盖 public/home/css/style.css 和 public/user/css/style.css 的按钮样式 */
.btn {
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
    padding: 10px 20px !important;
    font-size: var(--xyx-font-size-sm, 14px) !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

/* 移除所有按钮的蓝色outline和边框 */
.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn:active:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--xyx-accent-color, #0071e3) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    border: 1px solid var(--xyx-accent-color, #0071e3) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2) !important;
}

.btn-primary:hover {
    background: var(--xyx-accent-color-hover, #0077ed) !important;
    border-color: var(--xyx-accent-color-hover, #0077ed) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3) !important;
}

.btn-primary:active {
    background: var(--xyx-accent-color-active, #0066cc) !important;
    border-color: var(--xyx-accent-color-active, #0066cc) !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.2) !important;
}

/* ==================== 第四部分：导航样式覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的导航样式 */
.nav-primary {
    background-color: transparent !important;
}

.nav-primary > ul > li > a {
    color: var(--xyx-text-color, #333) !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease !important;
}

.nav-primary > ul > li > a:hover,
.nav-primary > ul > li.active > a {
    color: var(--xyx-accent-color, #007bff) !important;
    background-color: transparent !important;
}

/* ==================== 第五部分：面板和卡片覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的面板样式 */
.panel {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow, rgba(0, 0, 0, 0.04)) !important;
    margin-bottom: var(--xyx-spacing-lg, 24px) !important;
    margin-left: 0 !important;  /* 确保与导航栏左对齐 */
    margin-right: 0 !important;
}

.panel-heading {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: var(--xyx-spacing-md, 15px) var(--xyx-spacing-lg, 20px) !important;
    border-radius: var(--xyx-glass-radius, 16px) var(--xyx-glass-radius, 16px) 0 0 !important;
}

.panel-body {
    padding: var(--xyx-spacing-lg, 20px) !important;
}

/* ==================== 第六部分：表格样式覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的表格样式 */
.table {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    overflow: hidden !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
}

.table thead th {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    color: var(--xyx-text-color, #333) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}

.table tbody td {
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.05)) !important;
    padding: 12px 16px !important;
    color: var(--xyx-text-color, #333) !important;
}

.table tbody tr:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

/* ==================== 第七部分：文本颜色覆盖（UI组件状态类） ==================== */

/* 覆盖 public/home/css/style.css 和 public/user/css/style.css 的文本颜色（仅UI组件状态） */
.text-danger,
.text-red {
    color: var(--xyx-danger-color, #dc3545) !important;
}

.text-success {
    color: var(--xyx-success-color, #28a745) !important;
}

.text-warning {
    color: var(--xyx-warning-color, #ffc107) !important;
}

.text-info {
    color: var(--xyx-info-color, #17a2b8) !important;
}

.text-muted,
.text-gray {
    color: var(--xyx-text-color-muted, #999) !important;
}

/* ==================== 第八部分：输入组和下拉菜单覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的输入组样式 */
.input-group {
    display: flex !important;
    align-items: stretch !important;
}

.input-group-addon {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    color: var(--xyx-accent-color, #007bff) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
}

/* 下拉菜单覆盖 */
.dropdown-menu {
    background: var(--xyx-dropdown-bg, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow-hover, rgba(0, 0, 0, 0.08)) !important;
    padding: var(--xyx-spacing-sm, 8px) 0 !important;
}

.dropdown-menu > li > a {
    color: var(--xyx-text-color, #333) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

/* ==================== 第九部分：标签页覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的标签页样式 */
.nav-tabs {
    border-bottom: 2px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    margin-bottom: 20px !important;
}

.nav-tabs > li > a {
    color: var(--xyx-text-color-light, #666) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
    margin-bottom: -2px !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--xyx-accent-color, #007bff) !important;
    border-bottom-color: var(--xyx-accent-color, #007bff) !important;
    background: transparent !important;
}

/* ==================== 第十部分：警告框覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的警告框样式 */
.alert {
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
    border: none !important;
    padding: var(--xyx-spacing-md, 16px) var(--xyx-spacing-lg, 24px) !important;
    margin-bottom: var(--xyx-spacing-lg, 24px) !important;
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-left: 4px solid !important;
}

.alert-success {
    border-left-color: var(--xyx-success-color, #28a745) !important;
    color: var(--xyx-success-color, #28a745) !important;
    background: var(--xyx-success-bg, rgba(40, 167, 69, 0.1)) !important;
}

.alert-danger {
    border-left-color: var(--xyx-danger-color, #dc3545) !important;
    color: var(--xyx-danger-color, #dc3545) !important;
    background: var(--xyx-danger-bg, rgba(220, 53, 69, 0.1)) !important;
}

.alert-warning {
    border-left-color: var(--xyx-warning-color, #ffc107) !important;
    color: var(--xyx-warning-color, #ffc107) !important;
    background: var(--xyx-warning-bg, rgba(255, 193, 7, 0.1)) !important;
}

.alert-info {
    border-left-color: var(--xyx-info-color, #17a2b8) !important;
    color: var(--xyx-info-color, #17a2b8) !important;
    background: var(--xyx-info-bg, rgba(23, 162, 184, 0.1)) !important;
}

/* ==================== 第十一部分：徽章和标签覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的徽章样式 */
.badge {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.badge-success {
    background: var(--xyx-success-color, #28a745) !important;
}

.badge-danger {
    background: var(--xyx-danger-color, #dc3545) !important;
}

.badge-warning {
    background: var(--xyx-warning-color, #ffc107) !important;
    color: #333 !important;
}

.badge-info {
    background: var(--xyx-info-color, #17a2b8) !important;
}

/* ==================== 第十二部分：列表组覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的列表组样式 */
.list-group-item {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
    padding: var(--xyx-spacing-sm, 8px) var(--xyx-spacing-md, 16px) !important;
    margin-bottom: var(--xyx-spacing-sm, 8px) !important;
    transition: all var(--xyx-transition-speed, 0.25s) ease !important;
}

.list-group-item:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
    border-color: var(--xyx-accent-color-alpha-30, rgba(0, 123, 255, 0.3)) !important;
}

.list-group-item.active {
    background: var(--xyx-accent-color, #007bff) !important;
    border-color: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

/* ==================== 第十三部分：表单扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的表单静态控件 */
.form-control-static {
    min-height: 40px !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    color: var(--xyx-text-color, #333) !important;
}

/* ==================== 第十四部分：面板扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的面板底部 */
.panel-footer {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-top: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: var(--xyx-spacing-md, 15px) var(--xyx-spacing-lg, 20px) !important;
    border-radius: 0 0 var(--xyx-glass-radius, 16px) var(--xyx-glass-radius, 16px) !important;
}

/* 覆盖 public/user/css/style.css 的默认面板 */
.panel-default {
    border-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

.panel-default .panel-heading {
    border-left: 3px solid var(--xyx-accent-color, #007bff) !important;
}

/* 覆盖 public/user/css/style.css 的卡片面板 */
.panel-card {
    border-radius: var(--xyx-glass-radius, 16px) !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
}

.panel-card .card-heading {
    font-size: 16px !important;
    color: var(--xyx-text-color-light, #666) !important;
    font-weight: normal !important;
    padding: 15px 20px !important;
}

.panel-card .card-body {
    padding: 15px 20px !important;
}

/* 覆盖 public/user/css/style.css 的卡片项 */
.card-item {
    display: block !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    text-align: center !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    transition: all 0.2s ease !important;
}

.card-item .card-heading {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    padding: 12px 16px !important;
    color: var(--xyx-text-color, #333) !important;
}

.card-item .card-body {
    padding: 15px 20px !important;
    color: var(--xyx-text-color-light, #666) !important;
}

.card-item.active {
    border-color: var(--xyx-accent-color, #007bff) !important;
}

.card-item.active .card-heading {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

/* 覆盖 public/user/css/style.css 的折叠面板 */
.panel-collapse {
    padding-bottom: 0 !important;
}

.panel-collapse .panel-content {
    display: none !important;
}

.panel-collapse .panel-heading {
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* ==================== 第十五部分：表格扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的条纹表格 */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.table-striped > thead > tr > th {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-right: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

/* ==================== 第十六部分：标签覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的标签样式（不是badge） */
.label {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.label-default {
    background-color: var(--xyx-text-color-muted, #999) !important;
}

.label-primary {
    background-color: var(--xyx-accent-color, #007bff) !important;
}

.label-success {
    background-color: var(--xyx-success-color, #28a745) !important;
}

.label-info {
    background-color: var(--xyx-info-color, #17a2b8) !important;
}

.label-warning {
    background-color: var(--xyx-warning-color, #ffc107) !important;
    color: #333 !important;
}

.label-danger {
    background-color: var(--xyx-danger-color, #dc3545) !important;
}

/* ==================== 第十七部分：模态框覆盖 ==================== */

/* 覆盖 Bootstrap 模态框样式 */
.modal {
    background: rgba(0, 0, 0, 0.5) !important;
}

.modal-content {
    background: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow-hover, rgba(0, 0, 0, 0.08)) !important;
}

.modal-header {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: 20px !important;
    border-radius: var(--xyx-glass-radius, 16px) var(--xyx-glass-radius, 16px) 0 0 !important;
}

.modal-body {
    padding: 20px !important;
}

.modal-footer {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-top: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: 15px 20px !important;
    border-radius: 0 0 var(--xyx-glass-radius, 16px) var(--xyx-glass-radius, 16px) !important;
}

/* ==================== 第十八部分：分页覆盖 ==================== */

/* 覆盖分页容器 - 右对齐到内容区域右边缘 */
.head-pagination {
    text-align: right !important;  /* 强制右对齐 */
    display: flex !important;
    justify-content: flex-end !important;  /* 使用flexbox确保右对齐 */
    align-items: center !important;
    width: 100% !important;  /* 确保占满容器宽度 */
    margin-left: auto !important;  /* 确保右对齐 */
}

/* 分页信息文本右对齐 */
.head-pagination li.head-pagination-text,
.head-pagination .head-pagination-total {
    margin-left: auto !important;  /* 将分页信息推到右侧 */
    text-align: right !important;
}

/* 覆盖 Bootstrap 分页样式 */
.pagination {
    display: flex !important;
    gap: 8px !important;
    margin: 20px 0 !important;
    justify-content: flex-end !important;  /* 分页控件右对齐 */
}

.pagination > li > a,
.pagination > li > span {
    color: var(--xyx-text-color, #333) !important;
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.8)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
    border-color: var(--xyx-accent-color, #007bff) !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--xyx-accent-color, #007bff) !important;
    border-color: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

/* ==================== 第十九部分：面包屑覆盖 ==================== */

/* 覆盖 Bootstrap 面包屑样式 */
.breadcrumb {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
    padding: var(--xyx-spacing-sm, 8px) var(--xyx-spacing-md, 16px) !important;
    margin-bottom: var(--xyx-spacing-lg, 24px) !important;
}

.breadcrumb > li + li:before {
    color: var(--xyx-text-color-muted, #999) !important;
    content: "/" !important;
    padding: 0 8px !important;
}

.breadcrumb > li > a {
    color: var(--xyx-accent-color, #007bff) !important;
}

.breadcrumb > .active {
    color: var(--xyx-text-color, #333) !important;
}

/* ==================== 第二十部分：进度条覆盖 ==================== */

/* 覆盖 Bootstrap 进度条样式 */
.progress {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    height: 20px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.progress-bar {
    background: var(--xyx-accent-color, #007bff) !important;
    transition: width 0.6s ease !important;
}

.progress-bar-success {
    background: var(--xyx-success-color, #28a745) !important;
}

.progress-bar-info {
    background: var(--xyx-info-color, #17a2b8) !important;
}

.progress-bar-warning {
    background: var(--xyx-warning-color, #ffc107) !important;
}

.progress-bar-danger {
    background: var(--xyx-danger-color, #dc3545) !important;
}

/* ==================== 第二十一部分：工具提示和弹出框覆盖 ==================== */

/* 覆盖 Bootstrap 工具提示样式 */
.tooltip {
    font-size: 12px !important;
}

.tooltip-inner {
    background: var(--xyx-text-color, #333) !important;
    color: #fff !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    padding: 6px 12px !important;
}

.tooltip-arrow {
    border-top-color: var(--xyx-text-color, #333) !important;
}

/* 覆盖 Bootstrap 弹出框样式 */
.popover {
    background: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow-hover, rgba(0, 0, 0, 0.08)) !important;
}

.popover-title {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: var(--xyx-glass-radius, 16px) var(--xyx-glass-radius, 16px) 0 0 !important;
    padding: 12px 16px !important;
}

.popover-content {
    padding: 12px 16px !important;
}

/* ==================== 第二十二部分：自定义控件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的自定义单选复选框 */
.radio-custom,
.checkbox-custom {
    margin-left: 0 !important;
}

.radio-custom > i:before,
.checkbox-custom > i:before {
    font-size: 18px !important;
    color: var(--xyx-text-color-muted, #999) !important;
    transition: color 0.2s ease !important;
}

.radio-custom > i.checked:before,
.checkbox-custom > i.checked:before {
    color: var(--xyx-accent-color, #007bff) !important;
}

.radio-custom > i.disabled:before,
.checkbox-custom > i.disabled:before {
    color: var(--xyx-text-color-muted, #999) !important;
    opacity: 0.5 !important;
}

/* ==================== 第二十三部分：微调器覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的微调器样式 */
.spinner .input-group-btn {
    display: table-cell !important;
    min-width: 30px !important;
}

.spinner .input-group-btn .btn {
    width: 30px !important;
    padding: 0 !important;
    font-size: 12px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    color: var(--xyx-text-color, #333) !important;
}

.spinner .input-group-btn .btn:hover {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

/* ==================== 第二十四部分：灰色列表覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的灰色列表 */
.list_gray {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.list_gray .list-group-item {
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    margin-bottom: 8px !important;
    color: var(--xyx-text-color, #333) !important;
}

.list_gray .list-group-item:last-child {
    margin-bottom: 0 !important;
}

.list_gray .list-group-item:hover {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.8)) !important;
    color: var(--xyx-text-color, #333) !important;
    border-color: var(--xyx-accent-color, #007bff) !important;
}

/* ==================== 第二十五部分：Well和Jumbotron覆盖 ==================== */

/* 覆盖 Bootstrap Well 样式 */
.well {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    padding: var(--xyx-spacing-lg, 24px) !important;
    box-shadow: none !important;
}

.well-lg {
    padding: 30px !important;
}

.well-sm {
    padding: 15px !important;
}

/* 覆盖 Bootstrap Jumbotron 样式 */
.jumbotron {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius-lg, 24px) !important;
    padding: var(--xyx-section-gap, 32px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow, rgba(0, 0, 0, 0.04)) !important;
}

/* ==================== 第二十六部分：缩略图覆盖 ==================== */

/* 覆盖 Bootstrap 缩略图样式 */
.thumbnail {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    padding: var(--xyx-spacing-sm, 8px) !important;
    transition: all var(--xyx-transition-speed, 0.25s) ease !important;
}

.thumbnail:hover,
.thumbnail:focus {
    border-color: var(--xyx-accent-color, #007bff) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

.thumbnail > img {
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.thumbnail .caption {
    padding: 10px 0 0 0 !important;
    color: var(--xyx-text-color, #333) !important;
}

/* ==================== 第二十七部分：导航扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的导航扩展 */
.nav-primary.bg-light > ul > li > a {
    border-bottom-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    color: var(--xyx-text-color-light, #666) !important;
    border: 0 !important;
    font-size: 14px !important;
}

.nav-primary.bg-light > ul > .dropdown-submenu:hover > a,
.nav-primary.bg-light > ul > .dropdown-submenu:focus > a,
.nav-primary.bg-light > ul > li > a:hover,
.nav-primary.bg-light > ul > li > a:focus,
.nav-primary.bg-light > ul > li > a:active {
    color: var(--xyx-text-color, #333) !important;
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

.nav-primary.bg-light > ul > li.active > a {
    color: var(--xyx-accent-color, #007bff) !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

/* ==================== 第二十八部分：面板内导航覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的面板内导航 */
.panel-heading .nav {
    font-size: 13px !important;
    margin: -10px -15px !important;
}

.panel-heading .nav > li > a {
    border-radius: 0 !important;
    margin: 0 !important;
    border-width: 0 1px !important;
    line-height: 19px !important;
    color: var(--xyx-text-color-light, #666) !important;
}

.panel-heading .nav > li > a:hover {
    border-width: 0 1px !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

.panel-heading .nav-tabs > li.active > a,
.panel-heading .nav-tabs > li.active > a:hover,
.panel-heading .nav-tabs > li.active > a:focus {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.8)) !important;
    border-width: 0 1px !important;
    border-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

/* ==================== 第二十九部分：按钮扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的按钮变体 - 大厂标准配色 */
.btn-default {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    color: var(--xyx-text-color, #1d1d1f) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;  /* 非常subtle的浅灰色边框，参考图片 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;  /* 更subtle的阴影 */
}

.btn-default:hover {
    background: var(--xyx-glass-bg-hover, rgba(255, 255, 255, 0.8)) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;  /* hover时稍微加深边框，不使用蓝色 */
    color: var(--xyx-text-color, #1d1d1f) !important;  /* hover时保持深色文字 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;  /* 更subtle的hover阴影 */
    transform: translateY(-1px) !important;
}

.btn-default:active {
    background: var(--xyx-glass-bg-active, rgba(255, 255, 255, 0.9)) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;  /* active时保持subtle边框 */
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;  /* active时更subtle的阴影 */
}

.btn-success {
    background: var(--xyx-success-color, #34c759) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    border: 1px solid var(--xyx-success-color, #34c759) !important;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2) !important;
}

.btn-success:hover {
    background: var(--xyx-success-color-hover, #30d158) !important;
    border-color: var(--xyx-success-color-hover, #30d158) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-success:active {
    background: #30d158 !important;
    border-color: #30d158 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(52, 199, 89, 0.2) !important;
}

.btn-info {
    background: var(--xyx-info-color, #5ac8fa) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    border: 1px solid var(--xyx-info-color, #5ac8fa) !important;
    box-shadow: 0 2px 8px rgba(90, 200, 250, 0.2) !important;
}

.btn-info:hover {
    background: var(--xyx-info-color-hover, #64d2ff) !important;
    border-color: var(--xyx-info-color-hover, #64d2ff) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-info:active {
    background: #64d2ff !important;
    border-color: #64d2ff !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(90, 200, 250, 0.2) !important;
}

.btn-warning {
    background: var(--xyx-warning-color, #ff9500) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    border: 1px solid var(--xyx-warning-color, #ff9500) !important;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2) !important;
}

.btn-warning:hover {
    background: var(--xyx-warning-color-hover, #ff9f0a) !important;
    border-color: var(--xyx-warning-color-hover, #ff9f0a) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-warning:active {
    background: #ff9f0a !important;
    border-color: #ff9f0a !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(255, 149, 0, 0.2) !important;
}

.btn-danger {
    background: var(--xyx-danger-color, #ff3b30) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    border: 1px solid var(--xyx-danger-color, #ff3b30) !important;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2) !important;
}

.btn-danger:hover {
    background: var(--xyx-danger-color-hover, #ff453a) !important;
    border-color: var(--xyx-danger-color-hover, #ff453a) !important;
    color: var(--xyx-text-color-inverse, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-danger:active {
    background: #ff2d20 !important;
    border-color: #ff2d20 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(255, 59, 48, 0.2) !important;
}

.btn-white {
    background: #fff !important;
    color: var(--xyx-text-color, #333) !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    border: none !important;
    background: transparent !important;
    color: var(--xyx-accent-color, #007bff) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* 按钮尺寸 */
.btn-small {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.btn-large {
    padding: 15px 16px !important;
    font-size: 16px !important;
}

.btn-mini,
.btn-xs {
    padding: 3px 6px !important;
    font-size: 11px !important;
}

.btn-block {
    display: block !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ==================== 第三十部分：文本颜色扩展覆盖（UI组件状态类） ==================== */

/* 覆盖 public/user/css/style.css 的文本颜色扩展（仅UI组件状态） */
.text-white {
    color: #fff !important;
}

.text-primary {
    color: var(--xyx-accent-color, #007bff) !important;
}

.text-light {
    color: var(--xyx-text-color-muted, #999) !important;
}

.text-default {
    color: var(--xyx-text-color-light, #666) !important;
}

.text-color {
    color: var(--xyx-text-color, #333) !important;
}

.text-black {
    color: #333 !important;
}

.text-orange {
    color: orange !important;
}

/* ==================== 第三十一部分：背景色覆盖（UI组件状态类） ==================== */

/* 覆盖 public/user/css/style.css 的背景色类（仅UI组件状态） */
.bg-white {
    background: #fff !important;
}

.bg-black {
    background: #2b3f7e !important;
}

.bg-light {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.bg-lighter {
    background: var(--xyx-section-bg, #f5f7fa) !important;
}

.bg-primary {
    background: var(--xyx-accent-color, #007bff) !important;
}

.bg-success {
    background: var(--xyx-success-color, #28a745) !important;
}

.bg-info {
    background: var(--xyx-info-color, #17a2b8) !important;
}

.bg-warning {
    background: var(--xyx-warning-color, #ffc107) !important;
}

.bg-danger {
    background: var(--xyx-danger-color, #dc3545) !important;
}

.bg-default {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.bg-blue {
    background: #2183c9 !important;
}

.bg-green {
    background: #6bcbab !important;
}

.bg {
    background-color: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

/* ==================== 第三十二部分：导航扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的导航切换 */
.nav-switch {
    display: block !important;
    padding: 5px 0 0 0 !important;
    font-size: 24px !important;
    text-align: center !important;
    color: var(--xyx-text-color, #333) !important;
    transition: color 0.2s ease !important;
}

.nav-switch:hover {
    color: var(--xyx-accent-color, #007bff) !important;
}

/* 覆盖 public/user/css/style.css 的下拉子菜单 */
.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu > .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -1px !important;
}

/* 覆盖 public/user/css/style.css 的打开状态 */
.open {
    z-index: 1050 !important;
}

/* 覆盖 public/user/css/style.css 的导航栏 */
.navbar {
    background-color: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.95)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

/* ==================== 第三十三部分：面板扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的大面板 */
.panel-large {
    min-width: 300px !important;
}

/* 覆盖 public/user/css/style.css 的可排序表头 */
.th-sortable {
    cursor: pointer !important;
}

.th-sortable:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

/* ==================== 第三十四部分：进度条扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的进度条尺寸 */
.progress-mini {
    height: 6px !important;
}

.progress-small {
    height: 10px !important;
}

/* ==================== 第三十五部分：列表扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的普通列表 */
.list-normal {
    background: transparent !important;
}

/* ==================== 第三十六部分：手风琴覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的手风琴 */
.accordion-group,
.accordion-inner {
    border-color: var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

.accordion-inner {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.8)) !important;
    border-radius: 0 0 var(--xyx-glass-radius-sm, 8px) var(--xyx-glass-radius-sm, 8px) !important;
    padding: 15px 20px !important;
}

/* ==================== 第三十七部分：模态框扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的模态框背景 */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* ==================== 第三十八部分：提示框覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的提示框 */
.tip-warning {
    background: var(--xyx-warning-bg, rgba(255, 193, 7, 0.1)) !important;
    color: var(--xyx-warning-color, #ffc107) !important;
    padding: 7px 20px !important;
    font-size: 12px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.tip-success {
    background: var(--xyx-success-bg, rgba(40, 167, 69, 0.1)) !important;
    color: var(--xyx-success-color, #28a745) !important;
    padding: 7px 20px !important;
    font-size: 12px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.tip-info {
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: 10px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    font-size: 12px !important;
    background: var(--xyx-info-bg, rgba(23, 162, 184, 0.1)) !important;
    color: var(--xyx-info-color, #17a2b8) !important;
}

/* ==================== 第三十九部分：加载状态覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的加载状态 */
.loading {
    text-align: center !important;
    padding: 20px !important;
}

.loading i {
    display: block !important;
    height: 16px !important;
    width: 16px !important;
    margin: 0 auto !important;
}

/* ==================== 第四十部分：页面标题覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的页面标题 */
.page-title {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    padding: 35px 30px !important;
    border-radius: var(--xyx-glass-radius, 16px) !important;
    margin-bottom: 20px !important;
}

.page-title h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    color: var(--xyx-text-color, #333) !important;
    text-align: center !important;
}

/* ==================== 第四十一部分：药丸盒覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的药丸盒 */
.pillbox {
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    padding: 10px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.pillbox li {
    display: inline-block !important;
    font-size: 12px !important;
    color: #fff !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    margin: 2px !important;
    float: left !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

/* ==================== 第四十二部分：媒体对象覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的媒体对象 */
.media,
.media .media {
    margin-top: 10px !important;
}

.media-body {
    color: var(--xyx-text-color, #333) !important;
}

.media-heading {
    color: var(--xyx-text-color, #333) !important;
    font-weight: 600 !important;
}

/* ==================== 第四十三部分：分页扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的大分页 */
.pagination-large > li > a,
.pagination-large > li > span {
    padding: 10px 14px !important;
}

/* ==================== 第四十四部分：按钮特殊样式覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的特殊按钮 */
.btn-inverse {
    background: #233445 !important;
    color: #fff !important;
}

.btn-inverse:hover {
    background: #314355 !important;
    color: #fff !important;
}

.btn-twitter {
    background: #00c7f7 !important;
    color: #fff !important;
}

.btn-facebook {
    background: #335397 !important;
    color: #fff !important;
}

.btn-gplus {
    background: #dd4a38 !important;
    color: #fff !important;
}

.btn-on.active {
    color: #fff !important;
    border: 1px solid #767676 !important;
    background: #8e9eae !important;
}

/* 覆盖 public/user/css/style.css 的圆形按钮 */
.btn.btn-circle {
    padding: 2px 5px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    color: var(--xyx-text-color, #333) !important;
    transition: none !important;
}

.btn.btn-circle:hover,
.btn.btn-circle:active,
.btn.btn-circle.active {
    box-shadow: none !important;
    background: transparent !important;
}

.btn-circle > i {
    color: var(--xyx-text-color-muted, #999) !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.btn-circle:hover > i {
    color: var(--xyx-accent-color, #007bff) !important;
    background: var(--xyx-accent-color-alpha-10, rgba(0, 123, 255, 0.1)) !important;
}

/* ==================== 第四十五部分：文本状态覆盖（UI组件状态类） ==================== */

/* 覆盖 public/user/css/style.css 的文本激活状态（仅UI组件状态） */
.text-active,
.active .text {
    display: none !important;
}

.active > .text-active {
    display: inline-block !important;
}

/* ==================== 第四十六部分：列表组扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的列表组标题 */
.list-group-item.heading {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-left: 4px solid var(--xyx-accent-color, #007bff) !important;
}

.list-normal > .list-group-item {
    border-radius: 0 !important;
    border-width: 1px 0 !important;
}

.list-normal > .list-group-item .badge {
    margin-right: -5px !important;
}

/* ==================== 第四十七部分：下拉菜单扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的下拉菜单扩展 */
.dropdown-menu > .panel {
    border: none !important;
    margin: -5px 0 !important;
}

.dropdown-menu > li > a > i {
    display: inline-block !important;
    width: 24px !important;
    text-align: center !important;
}

.dropdown-menu > li > a:hover i {
    color: #fff !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

.dropdown-menu.bg-inverse > .divider {
    height: 1px !important;
    background-color: #2a3b4c !important;
    border: none !important;
}

.dropdown-menu.bg-inverse > li > a {
    color: #8e9eae !important;
}

.dropdown-menu.bg-inverse > li > a:hover,
.dropdown-menu.bg-inverse > li > a:focus,
.dropdown-menu.bg-inverse > li > a:active,
.dropdown-menu.bg-inverse > li.active > a {
    color: #fff !important;
}

.dropdown-menu .badge {
    margin-top: 1px !important;
}

.dropdown-select > li > a input {
    position: absolute !important;
    left: -9999em !important;
}

/* ==================== 第四十八部分：面包屑扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的路径面包屑 */
.breadcrumb.path > li + li:before {
    content: '\f105' !important;
}

/* ==================== 第四十九部分：关闭按钮覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的关闭按钮 */
.close {
    color: var(--xyx-text-color-muted, #999) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.close:hover {
    opacity: 1 !important;
    color: var(--xyx-text-color, #333) !important;
}

.close i {
    font-size: 12px !important;
    font-weight: normal !important;
    display: block !important;
    line-height: 1.5 !important;
}

/* ==================== 第五十部分：徽章扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的白色背景徽章 */
.badge.bg-white {
    color: var(--xyx-text-color-muted, #999) !important;
    background: #fff !important;
}

/* ==================== 第五十一部分：进度条扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的小进度条 */
.progress-small .progress-bar {
    font-size: 10px !important;
    line-height: 1em !important;
}

/* ==================== 第五十二部分：工具提示方向覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的工具提示方向 */
.tooltip.top .tooltip-arrow {
    border-top-color: var(--xyx-text-color, #333) !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--xyx-text-color, #333) !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--xyx-text-color, #333) !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--xyx-text-color, #333) !important;
}

/* ==================== 第五十三部分：数据网格组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的数据网格 */
.datagrid {
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    overflow: hidden !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
}

.datagrid tfoot th {
    font-weight: normal !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    padding: 12px 16px !important;
}

.datagrid tfoot .grid-pager .combobox {
    max-width: 80px !important;
    position: relative !important;
    top: 10px !important;
}

.datagrid tfoot .dropdown-menu {
    min-width: 60px !important;
    text-align: left !important;
}

.datagrid tbody {
    height: 256px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}

/* ==================== 第五十四部分：向导组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的向导 */
.wizard {
    font-size: var(--xyx-font-size-xs, 12px) !important;
    padding: 0 !important;
    background-color: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    margin: -15px !important;
    border-radius: var(--xyx-glass-radius-sm, 10px) !important;
}

.wizard .badge {
    margin-right: 4px !important;
}

.wizard .badge-info {
    background-color: var(--xyx-info-color, #17a2b8) !important;
}

.wizard .badge-success {
    background-color: var(--xyx-success-color, #28a745) !important;
}

.wizard ul li.complete,
.wizard ul li.complete:hover {
    cursor: pointer !important;
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

.wizard ul li.complete:after {
    border-left-color: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

.wizard ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none outside none !important;
}

.wizard ul li {
    position: relative !important;
    float: left !important;
    padding: 0 10px 0 20px !important;
    margin: 0 !important;
    color: var(--xyx-text-color-muted, #999) !important;
    cursor: default !important;
    height: 32px !important;
    line-height: 32px !important;
}

.wizard.wizard-vertical {
    float: left !important;
    border-bottom: none !important;
}

.wizard.wizard-vertical + .step-content {
    zoom: 1 !important;
    overflow: hidden !important;
    padding-left: 40px !important;
}

.wizard ul li.active {
    color: var(--xyx-accent-color, #007bff) !important;
}

.wizard ul li.active:after {
    border-left-color: var(--xyx-accent-color, #007bff) !important;
}

/* ==================== 第五十五部分：步骤内容组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的步骤内容 */
.step-content {
    padding: var(--xyx-spacing-lg, 24px) !important;
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.72)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
}

.step-content .step-pane {
    display: none !important;
}

.step-content .step-pane.active {
    display: block !important;
}

/* ==================== 第五十六部分：滑块组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的滑块 */
.slider {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    height: 20px !important;
}

.slider.slider-horizontal {
    width: 100% !important;
    height: 20px !important;
}

.slider.slider-horizontal .slider-track {
    height: 6px !important;
    width: 100% !important;
    margin-top: -3px !important;
    top: 50% !important;
    left: 0 !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider.slider-horizontal .slider-selection {
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider.slider-horizontal .slider-handle {
    margin-left: -10px !important;
    margin-top: -7px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: 50% !important;
}

.slider-handle {
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.slider-handle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important;
}

.slider .tooltip-inner {
    background-color: var(--xyx-text-color, #333) !important;
    color: #fff !important;
}

/* ==================== 第五十七部分：日期选择器组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的日期选择器 */
.datepicker {
    background: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    -webkit-backdrop-filter: blur(var(--xyx-glass-blur, 30px)) !important;
    border: 1px solid var(--xyx-glass-border, rgba(255, 255, 255, 0.18)) !important;
    border-radius: var(--xyx-glass-radius, 18px) !important;
    box-shadow: 0 8px 32px 0 var(--xyx-glass-shadow-hover, rgba(0, 0, 0, 0.08)) !important;
    padding: var(--xyx-spacing-sm, 8px) !important;
}

.datepicker table {
    width: 100% !important;
    margin: 0 !important;
}

.datepicker td,
.datepicker th {
    text-align: center !important;
    padding: 8px !important;
    color: var(--xyx-text-color, #333) !important;
}

.datepicker td.day:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
    cursor: pointer !important;
}

.datepicker td.day.disabled {
    color: var(--xyx-text-color-muted, #999) !important;
    cursor: not-allowed !important;
}

.datepicker td.active,
.datepicker td.active:hover {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

/* ==================== 第五十八部分：面板内组件覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的面板内列表组和表格 */
.panel .list-group {
    background: transparent !important;
}

.panel .list-group.m-t-n .list-group-item:first-child {
    border-top: 0 !important;
}

.panel .table td,
.panel .table th {
    padding: 6px 15px !important;
    border-top: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.05)) !important;
}

.panel .table tr:last-child td,
.panel .table tr:last-child th {
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.05)) !important;
}

.panel .table-striped > tbody > tr:nth-child(odd) > td,
.panel .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.panel .table-striped > thead > tr > th {
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-right: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

.panel .table-striped > thead > tr > th:last-child {
    border-right: none !important;
}

.panel.bg {
    border: none !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}

.panel.bg .panel-heading.bg {
    margin: -16px !important;
    margin-bottom: 15px !important;
    border: none !important;
}

.panel.bg .list-group-item {
    border-color: transparent !important;
}

.panel.bg .list-group-item a {
    color: var(--xyx-text-color, #333) !important;
}

.panel.no-bg {
    border: 0 !important;
    background: var(--xyx-glass-bg, rgba(255, 255, 255, 0.8)) !important;
}

.panel.no-bg .panel-heading {
    background: none !important;
    border: 0 !important;
}

.panel-heading.bg {
    margin: -16px !important;
    margin-bottom: 15px !important;
    border: none !important;
}

.panel-heading .label-large {
    vertical-align: 10% !important;
}

/* ==================== 第五十九部分：导航扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的导航品牌和分组 */
.nav-primary .nav-brand {
    display: inline-block !important;
    text-align: center !important;
    padding: 15px 15px 10px !important;
}

.nav-primary .nav-brand img {
    max-width: 100% !important;
}

.nav-primary .nav-brand .txt {
    font-size: 20px !important;
    color: var(--xyx-text-color-light, #666) !important;
    font-style: italic !important;
    font-weight: bold !important;
}

.nav-primary li.group {
    padding: 10px 0 10px !important;
}

.nav-primary li.group span {
    padding-left: 15px !important;
    color: var(--xyx-text-color-muted, #999) !important;
}

/* ==================== 第六十部分：列表组扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的媒体列表项 */
.list-group-item.media {
    margin-top: 0 !important;
}

/* ==================== 第六十一部分：按钮内徽章覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的按钮内徽章 */
.btn .badge {
    padding: 1px 5px !important;
    background: var(--xyx-danger-color, #dc3545) !important;
    font-weight: normal !important;
}

.btn-warning .badge {
    background: #fff !important;
    color: var(--xyx-warning-color, #ffc107) !important;
}

/* ==================== 第六十二部分：评论列表组件覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的评论列表 */
.comment-list .panel-heading {
    border-left: 0 !important;
}

/* ==================== 第六十三部分：支付组件覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的支付方式 */
.pay-payment .radio {
    height: 40px !important;
    overflow: hidden !important;
    margin-top: 10px !important;
}

.pay-payment .radio .media-radio {
    padding-top: 9px !important;
}

.pay-payment .media-body {
    padding-top: 4px !important;
}

.pay-payment .media-heading {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-bottom: 3px !important;
    color: var(--xyx-text-color, #333) !important;
}

.pay-payment .media-desc {
    color: var(--xyx-text-color-muted, #999) !important;
    font-size: 12px !important;
}

/* ==================== 第六十四部分：现金支付组件覆盖 ==================== */

/* 覆盖 public/home/css/style.css 的现金支付 */
.cash .cash_price {
    font-size: 18px !important;
    margin-bottom: 15px !important;
    color: var(--xyx-text-color, #333) !important;
}

.cash .wx-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    color: var(--xyx-text-color, #333) !important;
}

.cash .wx-title b {
    padding: 0 5px !important;
}

.cash .wx-qrbox {
    padding: 10px 0 10px !important;
    text-align: center !important;
}

.cash .wx-qrbox > dt img {
    width: 300px !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    margin-bottom: 20px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.cash .wx-qrbox > dt > dl {
    background: var(--xyx-danger-color, #dc3545) !important;
    padding: 0 !important;
    color: #fff !important;
    height: 61px !important;
    font-size: 16px !important;
    width: 300px !important;
    margin: 0 auto !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.cash .wx-qrbox > dt > dl > dd {
    padding: 9px 0 0 50px !important;
}

.cash .wx-bottom {
    font-size: 16px !important;
    padding-top: 20px !important;
    color: var(--xyx-text-color, #333) !important;
}

/* ==================== 第六十五部分：面板内标签页扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的面板内标签页扩展 */
.panel-heading .nav-tabs.nav-justified {
    width: auto !important;
}

.panel-heading .nav-tabs.pull-left > li:first-child > a,
.panel-heading .nav-tabs.nav-justified > li:first-child > a {
    border-radius: var(--xyx-glass-radius-sm, 8px) 0 0 !important;
}

.panel-heading .nav-tabs.pull-right > li:last-child > a,
.panel-heading .nav-tabs.nav-justified > li:last-child > a {
    border-radius: 0 var(--xyx-glass-radius-sm, 8px) 0 0 !important;
}

/* ==================== 第六十六部分：列表组图标和徽章覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的列表组图标和徽章 */
.list-group-item .icon-chevron-right {
    float: right !important;
    margin-top: 4px !important;
    margin-right: -5px !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

.list-group-item > .icon-chevron-right + .badge {
    margin-right: 5px !important;
}

/* ==================== 第六十七部分：可排序表头扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的可排序表头扩展 */
.th-sortable .th-sort {
    float: right !important;
    position: relative !important;
}

/* ==================== 第六十八部分：下拉菜单扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的下拉菜单扩展 */
.dropdown-menu.pull-left {
    left: 100% !important;
}

.dropdown-submenu.pull-left {
    float: none !important;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100% !important;
    margin-left: 20px !important;
}

.dropdown-menu.bg-inverse > .divider {
    height: 1px !important;
    background-color: #2a3b4c !important;
    border: none !important;
}

/* ==================== 第六十九部分：模态框扩展覆盖 ==================== */

/* 覆盖 public/user/css/style.css 的模态框扩展 */
.modal-backdrop.fade.in {
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
}

.modal-header .close {
    margin-top: 3px !important;
}

/* ==================== 第七十部分：选择器组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的选择器 */
.select {
    position: relative !important;
    display: inline-block !important;
}

/* ==================== 第七十一部分：滑块扩展组件覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的垂直滑块 */
.slider.slider-vertical {
    height: 210px !important;
    width: 20px !important;
}

.slider.slider-vertical .slider-track {
    width: 10px !important;
    height: 100% !important;
    margin-left: -5px !important;
    left: 50% !important;
    top: 0 !important;
    background: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider.slider-vertical .slider-selection {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider.slider-vertical .slider-handle {
    margin-left: -5px !important;
    margin-top: -10px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--xyx-accent-color, #007bff) !important;
    border-radius: 50% !important;
}

.slider.slider-horizontal .slider-handle.triangle,
.slider.slider-vertical .slider-handle.triangle {
    background: transparent none !important;
}

.slider-handle.round {
    border-radius: 20px !important;
}

.slider-handle.triangle {
    background: transparent none !important;
}

/* 覆盖 public/user/css/plugin.css 的滑块输入 */
.slider-input {
    display: -webkit-flex !important;
    display: flex !important;
}

.slider-input .input-box {
    margin: 3px 0 3px 20px !important;
}

.slider-input.no_slider .input-box {
    margin-left: 0 !important;
}

/* 覆盖 public/user/css/plugin.css 的大滑块 */
.slider-large .slider {
    height: 40px !important;
}

.slider-large .slider .slider-track {
    height: 34px !important;
    border: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    background: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.95)) !important;
    box-shadow: none !important;
    top: 0 !important;
    margin-top: 3px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider-large .slider .slider-selection {
    background: var(--xyx-accent-color, #007bff) !important;
}

.slider-large .slider .slider-handle {
    width: 20px !important;
    height: 40px !important;
    margin-top: 0 !important;
    top: 0 !important;
    background: var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.95)) !important;
    border: 1px solid var(--xyx-accent-color, #007bff) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

.slider-large .slider .slider-handle:before {
    content: '' !important;
    position: absolute !important;
    top: 9px !important;
    left: 5px !important;
    height: 20px !important;
    width: 7px !important;
    border-left: 1px solid var(--xyx-accent-color, #007bff) !important;
    border-right: 1px solid var(--xyx-accent-color, #007bff) !important;
}

.slider-large .slider .slider-handle:after {
    content: '' !important;
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    width: 1px !important;
    height: 20px !important;
    background: var(--xyx-accent-color, #007bff) !important;
}

.slider input {
    display: none !important;
}

/* ==================== 第七十二部分：向导组件扩展覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的向导扩展 */
.wizard .actions {
    float: right !important;
    margin: 8px 10px 0 0 !important;
}

.wizard ul li:first-child {
    padding-left: 15px !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) 0 0 0 !important;
}

.wizard ul li:before,
.wizard ul li:after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    bottom: -1px !important;
    right: -10px !important;
    border: 15px solid transparent !important;
    border-right: 0 !important;
    border-left: 10px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
    z-index: 1 !important;
}

.wizard ul li:after {
    right: -9px !important;
    border-left-color: var(--xyx-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
    z-index: 2 !important;
}

.wizard.wizard-vertical ul li:last-child {
    border-bottom: 1px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

/* ==================== 第七十三部分：日期选择器扩展覆盖 ==================== */

/* 覆盖 public/user/css/plugin.css 的日期选择器扩展 */
.datepicker:before {
    content: '' !important;
    display: inline-block !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid var(--xyx-glass-border, rgba(0, 0, 0, 0.2)) !important;
    position: absolute !important;
    top: -7px !important;
    left: 6px !important;
}

.datepicker:after {
    content: '' !important;
    display: inline-block !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid var(--xyx-glass-bg-solid, rgba(255, 255, 255, 0.95)) !important;
    position: absolute !important;
    top: -6px !important;
    left: 7px !important;
}

.datepicker > div {
    display: none !important;
}

.datepicker td span {
    display: block !important;
    width: 23% !important;
    height: 54px !important;
    line-height: 54px !important;
    float: left !important;
    margin: 1% !important;
    cursor: pointer !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
    color: var(--xyx-text-color, #333) !important;
}

.datepicker td span:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
}

.datepicker td span.active {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] {
    background: var(--xyx-accent-color, #007bff) !important;
    color: #fff !important;
}

.datepicker td span.old {
    color: var(--xyx-text-color-muted, #999) !important;
}

.datepicker td.old,
.datepicker td.new {
    color: var(--xyx-text-color-muted, #999) !important;
}

.datepicker th.switch {
    width: 145px !important;
}

.datepicker th.next,
.datepicker th.prev {
    cursor: pointer !important;
    color: var(--xyx-accent-color, #007bff) !important;
}

.datepicker thead tr:first-child th {
    cursor: pointer !important;
    color: var(--xyx-text-color, #333) !important;
}

.datepicker thead tr:first-child th:hover {
    background: var(--xyx-glass-bg-hover, rgba(250, 250, 252, 0.95)) !important;
    border-radius: var(--xyx-glass-radius-sm, 8px) !important;
}

/* ==================== 主内容区域对齐覆盖 ==================== */

/* 确保主内容区域与导航栏左对齐 - 移除所有左边距和内边距 */
.inside-right,
.col-sm-9,
.col-md-9,
.col-lg-9,
.head-rwd .col-sm-9,
.head-rwd .col-md-9,
.head-rwd .col-lg-9 {
    margin-left: 0 !important;  /* 与导航栏左对齐 */
    padding-left: 0 !important;  /* 移除左边距，直接对齐 */
}

/* 确保侧边栏也没有右边距 */
.inside-side,
.col-sm-3,
.col-md-3,
.col-lg-3,
.head-rwd .col-sm-3,
.head-rwd .col-md-3,
.head-rwd .col-lg-3 {
    padding-right: 0 !important;  /* 移除右边距 */
    margin-right: 0 !important;
}

/* 确保主内容区域容器与导航栏对齐 */
.sy_inner > .row > .col-sm-9,
.sy_inner > .row > .col-md-9,
.sy_inner > .row > .col-lg-9,
.row > .col-sm-9,
.row > .col-md-9,
.row > .col-lg-9 {
    padding-left: 0 !important;  /* 移除左边距 */
    margin-left: 0 !important;
}

/* 确保面板与导航栏对齐 */
.panel {
    margin-left: 0 !important;  /* 确保与导航栏左对齐 */
    margin-right: 0 !important;
    padding-left: var(--xyx-spacing-lg, 20px) !important;  /* 面板内部有内边距 */
}

/* 面板内容区域 */
.panel-body,
.panel-heading {
    padding-left: var(--xyx-spacing-lg, 20px) !important;  /* 保持内部内边距 */
    padding-right: var(--xyx-spacing-lg, 20px) !important;
}

/* ==================== 卡片垂直高度对齐 ==================== */

/* 确保同一行的卡片高度一致 - 使用flexbox */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;  /* 让同一行的卡片高度一致 */
}

/* 确保列容器使用flex布局，让卡片填充整个高度 */
.row > [class*="col-"],
.row > .col-lg-4,
.row > .col-md-4,
.row > .col-sm-4 {
    display: flex !important;
    flex-direction: column !important;
}

/* 确保面板卡片填充列的高度 */
.row > [class*="col-"] > .panel,
.row > .col-lg-4 > .panel,
.row > .col-md-4 > .panel,
.row > .col-sm-4 > .panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;  /* 填充可用空间，使同一行的卡片高度一致 */
    height: 100% !important;
}

/* 确保面板底部按钮区域水平对齐 */
.panel-footer .row {
    display: flex !important;
    flex-direction: row !important;  /* 水平排列，覆盖卡片对齐的 column 设置 */
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;  /* 按钮在左，分页在右 */
}

.panel-footer .form-inline {
    display: flex !important;
    flex-direction: row !important;  /* 水平排列 */
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: var(--xyx-spacing-sm, 8px) !important;  /* 按钮之间的间距调短（8px） */
}

/* 确保按钮列表水平排列，间距调短 */
.panel-footer .form-inline > *,
.panel-footer .form-inline > a,
.panel-footer .form-inline > button,
.panel-footer .form-inline > span {
    display: inline-block !important;
    margin-right: var(--xyx-spacing-sm, 8px) !important;  /* 按钮之间的间距调短（8px） */
    vertical-align: middle !important;
}

.panel-footer .form-inline > *:last-child {
    margin-right: 0 !important;
}

/* 分页模块移至最右侧 */
.panel-footer .col-lg-8,
.panel-footer .col-md-8,
.panel-footer .col-sm-8,
.panel-footer [class*="col-"]:has(.head-pagination),
.panel-footer [class*="col-"]:has(.pagination) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;  /* 右对齐 */
    margin-left: auto !important;  /* 推至最右侧 */
}

/* 分页信息右对齐 */
.panel-footer .head-pagination,
.panel-footer .pagination {
    margin-left: auto !important;  /* 推至最右侧 */
    text-align: right !important;
}