/**
 * QMS-DataSync 全局UI样式标准库
 * 
 * 版本: 1.0.0
 * 创建日期: 2026/04/23
 * 说明: 此文件包含项目统一的UI样式标准，所有模块自动继承
 * 
 * 使用方式: 通过 run.php 自动加载，无需手动引入
 */

/* ========================================
   CSS变量定义 - 主题色系统
   ======================================== */
:root {
    --primary: var(--bs-primary, #0d6efd);
    --primary-hover: var(--bs-primary-hover, #0b5ed7);
    --primary-bg-subtle: var(--bs-primary-bg-subtle, #cfe2ff);
    --primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --table-row-hover: color-mix(in srgb, var(--bs-primary) 4%, transparent);
    
    --success: var(--bs-success, #198754);
    --warning: var(--bs-warning, #ffc107);
    --danger: var(--bs-danger, #dc3545);
    --secondary: var(--bs-secondary, #6c757d);
    
    --border-color: var(--bs-border-color, #dee2e6);
    --text-color: var(--bs-body-color, #212529);
    --text-secondary: var(--bs-secondary-color, #6c757d);
    --card-bg: var(--bs-card-bg, #ffffff);
    --light: #f8f9fa;

    /* ════════════════════════════════════
       统计卡片最小高度标准
       以【印章管理】统计区卡片高度为基准
       确保各应用统计卡片视觉高度统一
       ════════════════════════════════════ */
    --stat-card-min-height: 95px;
}

/* ========================================
   全局容器宽度规范
   ======================================== */

/**
 * ✅ 模块主容器智能宽度控制（Module Container Width Standard）
 * 
 * 使用场景：所有应用模块的主内容容器
 * 特点：小屏占满95%，大屏限制最大宽度并居中
 * 
 * 支持的容器类：
 * - .main-container（CDN模块）
 * - .sync-module-container（Sync模块）
 * 
 * 注意：.content-wrapper（框架主内容区）已移除此限制，以占满全部可用空间
 * 
 * HTML结构示例：
 * <div class="main-container">
 *     <!-- 模块内容 -->
 * </div>
 */

.main-container,
.sync-module-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
    box-sizing: border-box;
}

/* Access Code 模块 - 为 container-fluid 添加宽度限制 */
.container-fluid.module-content {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
    float: none !important;
    box-sizing: border-box;
}

/* Sync模块特殊处理 - 保持原有的padding */
.sync-module-container,
.sync-ajax-content {
    padding: 0 20px;
}

/* ========================================
   统计面板样式
   ======================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    text-align: center;
    padding: 20px;
    border-radius: var(--bs-border-radius);
    background-color: white;
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
    min-height: var(--stat-card-min-height);
}

/* 印章管理统计卡片统一高度（使用 Bootstrap card-body 样式，非 .stat-card） */
#sealStatsCards .card.card-body {
    min-height: var(--stat-card-min-height);
}

/* 统计面板容器统一最小高度 */
.card:has(.card-header-standard .bi-bar-chart) {
    min-height: 180px;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-value {
    font-size: 2em;
    font-weight: bold;
    color: var(--bs-primary);
    margin-bottom: 8px;
}

.stat-label {
    color: var(--bs-secondary);
    font-size: 0.9em;
    margin-top: 5px;
    opacity: 0.9;
    font-weight: 500;
}

/* ========================================
   表格样式规范
   ======================================== */

.table-responsive {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

/* ✅ 已移除通用 thead th 样式，统一使用 .table-header-simple 定义表头样式 */

tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    color: var(--text-color);
    font-size: 13px;
}

/* ✅ 表格行悬停效果 - 全局统一（CDN 资源列表 / 各应用列表通用）
   使用 color-mix 基于主题色取极浅底，克制且随主题自适应；
   如需调整整体强弱，改 :root 的 --table-row-hover 一处即可。 */
tbody tr:hover,
.table-header-simple tbody tr:hover {
    background-color: var(--table-row-hover, color-mix(in srgb, var(--bs-primary) 4%, transparent));
    transition: background-color 0.2s ease;
}

/* ========================================
   分页控件样式（响应式优化版）
   ======================================== */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;  /* 允许自动换行，防止溢出 */
    gap: 12px;
    margin-top: 24px;
    padding: 16px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- 每页条数选择器 ---- */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.page-size-selector label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ---- 下拉选择器 ---- */
.page-size-select {
    padding: 4px 8px;
    border: 1px solid var(--bs-primary);
    background-color: white;
    color: var(--bs-primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
    min-width: 44px;
    outline: none;
    height: 28px;
    box-sizing: border-box;
}

.page-size-select:hover {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.page-size-select:focus,
.page-size-select:focus-visible,
.page-size-select:active {
    outline: none;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
    background-color: white;
}

/* ---- 页码按钮组容器 ---- */
.page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* ---- 页码按钮 ---- */
.page-num-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--bs-primary);
    background-color: white;
    color: var(--bs-primary);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.page-num-btn:hover:not(.active) {
    background-color: var(--bs-primary-bg-subtle);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.page-num-btn:active:not(.active) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
}

.page-num-btn.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    cursor: default;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.35);
}

/* ---- 页码省略号（不可点击） ---- */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 36px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 2px;
    user-select: none;
    cursor: default;
}

/* ---- 首/末页按钮（字小，与数字按钮同方形） ---- */
.page-edge-btn {
    font-size: 12px;
    min-width: 40px;
}


/* ---- 内联跳转组 ---- */
.page-jump-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- 跳转输入框（与翻页按钮一致的正方形） ---- */
.page-jump-input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bs-primary);
    border-radius: 6px;
    background-color: white;
    color: var(--bs-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.page-jump-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
}

.page-jump-input::-webkit-outer-spin-button,
.page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-jump-input:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.page-jump-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
}

/* ---- 跳转标签（跳至 / 页） ---- */
.page-jump-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- 跳转按钮（基础样式） ---- */
.page-jump-btn {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--bs-primary);
    border-radius: 6px;
    background-color: white;
    color: var(--bs-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
}

.page-jump-btn:hover {
    background-color: var(--bs-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.page-jump-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
}

/* ========================================
   分页响应式断点
   三层渐进式适配：中屏 → 小屏 → 超小屏
   ======================================== */

/* ── 第一层：中屏设备（577px - 768px）──
   元素等比缩小，保持完整功能，允许换行 */
@media (max-width: 768px) {
    .pagination-container {
        gap: 10px;
        padding: 12px 0;
    }

    .page-size-selector {
        gap: 6px;
    }

    .page-size-selector label {
        font-size: 12px;
    }

    .page-size-select {
        padding: 5px 10px;
        font-size: 12px;
        min-width: 54px;
        height: 32px;
    }

    .page-num-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 6px;
    }

    .page-ellipsis {
        min-width: 28px;
        height: 32px;
        font-size: 14px;
    }

    .page-jump-input {
        width: 52px;
        font-size: 12px;
    }

    .page-jump-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ── 第二层：小屏设备（≤576px）──
   精简标签文字，适配小屏空间 */
@media (max-width: 576px) {
    .pagination-container {
        gap: 6px;
        padding: 10px 0;
    }

    /* 每页条数选择器：隐藏标签文字，仅保留下拉框 */
    .page-size-selector {
        gap: 0;
    }

    .page-size-selector label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* 统一按钮容器样式（移动端淡化边框） */
    .page-size-select,
    .page-num-btn,
    .page-jump-btn {
        box-sizing: border-box;
        font-size: 13px;
        font-weight: 500;
        padding: 6px 8px;
        border-radius: 6px;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: none;
        white-space: nowrap;
    }

    .page-num-btn {
        min-width: 32px;
        height: 32px;
        border: 1px solid var(--border-color);
        background: var(--light);
        color: var(--text-secondary);
        font-weight: 500;
    }

    .page-num-btn:hover:not(.active) {
        background: var(--light);
        color: var(--text-secondary);
        transform: none;
        box-shadow: none;
        border-color: var(--border-color);
    }

    .page-num-btn.active {
        background: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
        font-weight: 600;
    }

    .page-edge-btn {
        min-width: auto;
        padding: 4px 6px;
        font-size: 11px;
    }

    .page-jump-group {
        gap: 4px;
    }

    .page-jump-input {
        width: 48px;
        font-size: 12px;
        padding: 5px 6px;
        border: 1px solid var(--border-color);
        background: var(--light);
        color: var(--text-secondary);
    }

    .page-jump-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
    }

    .page-jump-btn {
        min-width: auto;
        height: 32px;
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        background: var(--light);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
    }

    .page-jump-btn:hover {
        border-color: var(--border-color);
        background: var(--light);
        color: var(--text-secondary);
        transform: none;
        box-shadow: none;
    }

    /* 每页条数下拉 */
    .page-size-select {
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        padding-right: 28px;
        min-width: 56px;
        border: 1px solid var(--border-color);
        background-color: var(--light);
        color: var(--text-secondary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236c757d'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    .page-size-select:hover,
    .page-size-select:focus,
    .page-size-select:active {
        border-color: var(--border-color);
        background-color: var(--light);
        color: var(--text-secondary);
        box-shadow: none;
    }
}

/* ── 第三层：超小屏设备（≤400px）──
   极简模式：仅缩小整体尺寸 */
@media (max-width: 400px) {
    .pagination-container {
        gap: 4px;
        padding: 8px 0;
    }

    .page-size-select,
    .page-num-btn,
    .page-jump-btn {
        padding: 5px 6px;
        font-size: 12px;
    }

    .page-num-btn {
        min-width: 28px;
        height: 28px;
    }

    .page-ellipsis {
        min-width: 20px;
        height: 28px;
        font-size: 12px;
    }

    .page-jump-btn {
        min-width: auto;
        height: 28px;
        padding: 4px 8px;
    }

    .page-size-select {
        padding-right: 24px;
        min-width: 50px;
        background-position: right 8px center;
    }

    .page-jump-input {
        width: 44px;
        font-size: 12px;
        padding: 4px 6px;
        height: 28px;
    }

    .page-edge-btn {
        min-width: auto;
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* ── 翻页器在卡片 footer 内的高度压缩 ──
   card-footer 自带 padding，与 .pagination-container 的 margin/padding 叠加后过高 */
.card-footer .pagination-container {
    margin-top: 0;
    padding: 6px 0;
    gap: 8px;
}
.card-footer .pagination-container .page-size-select {
    padding: 3px 8px;
    font-size: 12px;
}
.card-footer .pagination-container .page-num-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
}
.card-footer .pagination-container .page-edge-btn {
    min-width: auto;
    padding: 3px 6px;
    font-size: 11px;
    height: 28px;
}
.card-footer .pagination-container .page-jump-group {
    gap: 4px;
}
.card-footer .pagination-container .page-jump-input {
    padding: 3px 6px;
    font-size: 12px;
    width: 46px;
}
.card-footer .pagination-container .page-jump-btn {
    padding: 3px 8px;
    font-size: 12px;
    min-width: auto;
    height: 28px;
}

/* ========================================
   优化版分页样式（v2.1.0）——左区域 + 右区域布局
   ======================================== */
.pagination-optimized {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    margin-top: 16px;
}

/* 左区域：第 X-Y 条，共 N 条 */
.page-info-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 28px;
}

/* 右区域包裹 */
.page-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* 每页条数选择器（优化版） */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.page-size-selector label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.page-size-unit {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 翻页按钮组：[<][P][>] 外包容器 */
.page-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* <、P、> 翻页按钮：主题蓝色 */
.page-nav-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bs-primary);
    border-radius: 6px;
    background: white;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
    user-select: none;
    white-space: nowrap;
}










/* 当前页按钮：蓝色高亮 */
.page-nav-btn.page-current-btn {
    background: var(--bs-primary);
    color: white;
    cursor: default;
}

.page-nav-btn.page-current-btn:hover {
    background: var(--bs-primary);
    color: white;
    transform: none;
    box-shadow: none;
}

/* hover 效果（非当前页按钮） */
.page-nav-btn:hover:not(.page-current-btn) {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    transform: none;
    box-shadow: none;
}

.page-nav-btn:active:not(.page-current-btn) {
    transform: none;
    box-shadow: none;
}

/* 隐藏状态（首/末页时 display:none） */
.page-nav-btn:disabled {
    display: none;
}

/* ── 优化版分页：页码输入跳转组适配 ── */
.pagination-optimized .page-jump-group {
    gap: 6px;
}
.pagination-optimized .page-jump-input {
    width: 52px;
}
.pagination-optimized .page-jump-btn {
    height: 28px;
    padding: 0 12px;
}


/* ── 优化版分页响应式：中屏（≤768px）── */
@media (max-width: 768px) {
    .pagination-optimized {
        gap: 10px;
        padding: 10px 0;
    }
    .page-controls-right {
        gap: 12px;
    }
    .page-info-text {
        font-size: 12px;
        line-height: 28px;
    }
    .page-size-selector label,
    .page-size-unit {
        font-size: 12px;
    }
    .page-nav-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        font-size: 12px;
    }

}

/* ── 优化版分页响应式：小屏（≤576px）── */
@media (max-width: 576px) {
    .pagination-optimized {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 0;
    }
    .page-controls-right {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .page-info-text {
        font-size: 12px;
        display: none;
    }
    .page-size-selector label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .page-size-unit {
        font-size: 12px;
    }

    .page-nav-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        font-size: 12px;
    }

    .pagination-optimized .page-jump-label {
        font-size: 12px;
    }
    .pagination-optimized .page-jump-input {
        width: 44px;
        height: 26px;
    }
    .pagination-optimized .page-jump-btn {
        height: 26px;
        padding: 0 10px;
    }

}

/* ── 优化版分页响应式：超小屏（≤400px）── */
@media (max-width: 400px) {
    .pagination-optimized {
        gap: 6px;
        padding: 8px 0;
    }
    .page-controls-right {
        gap: 8px;
    }
    .page-info-text {
        font-size: 11px;
        display: none;
    }
    .page-size-unit {
        font-size: 11px;
    }
    .page-nav-btn {
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 11px;
    }

    .pagination-optimized .page-jump-label {
        font-size: 11px;
    }
    .pagination-optimized .page-jump-input {
        width: 40px;
        height: 24px;
    }
    .pagination-optimized .page-jump-btn {
        height: 24px;
        padding: 0 8px;
    }

}

/* ========================================
   旧版分页样式（向后兼容，已废弃）
   以下样式保留供 pricing.js 等独立分页实现使用
   ======================================== */

.pagination-btn {
    padding: 6px 14px;
    border: 1px solid var(--bs-primary);
    background-color: white;
    color: var(--bs-primary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--bs-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

.pagination-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.2);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
    box-shadow: none;
}

.page-info {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    background: var(--light);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-width: 120px;
    text-align: center;
    white-space: nowrap;
}

/* ========================================
   按钮交互规范
   ======================================== */

.btn {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--bs-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--bs-primary-hover, var(--primary-hover, var(--bs-primary)));
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
}

.btn-primary:active:not(:disabled) {
    background: var(--bs-primary-hover, var(--primary-hover, var(--bs-primary))) !important;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.2) !important;
}

.btn-success {
    background: var(--bs-success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: #157347;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.btn-warning {
    background: var(--bs-warning);
    color: #212529;
}

.btn-warning:hover:not(:disabled) {
    background: #ffca2c;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}



/* ========================================
   次要按钮（Secondary Button）
   场景：模态框中的取消/关闭等次要操作
   使用 Bootstrap 5.3 CSS 变量机制实现
   ======================================== */
.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
}

/* ========================================
   信息按钮（Info Button）
   场景：标记已复、物流查询等信息类操作
   ======================================== */
.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: #0aa2c0;
    --bs-btn-hover-border-color: #0a96b3;
    --bs-btn-active-bg: #0a96b3;
    --bs-btn-active-border-color: #0a8ba6;
}

/* ========================================
   描边按钮系列（Outline Buttons）
   使用 Bootstrap 5.3 CSS 变量机制实现
   ======================================== */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}
.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
}
.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
}
.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
}

/* ========================================
   导航标签样式
   ======================================== */

.sync-nav-tabs {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sync-nav-tab {
    padding: 12px 24px !important;
    border: 1px solid var(--bs-primary) !important;
    background: var(--bs-primary) !important;
    color: white !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.2);
    text-decoration: none !important;
    outline: none !important;
}

.sync-nav-tab:hover,
.sync-nav-tab:active,
.sync-nav-tab:focus,
.sync-nav-tab.active {
    background: white !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3);
}

/* ========================================
   卡片标题栏按钮样式
   ======================================== */



/* ========================================
   实心底色按钮样式（与 qms-btn qms-btn--primary 相反）
   ======================================== */

/**
 * ✅ 实心底色按钮（Solid Button Standard）
 * 
 * 使用场景：需要强调的主要操作按钮，与卡片标题栏按钮（qms-btn qms-btn--primary）配色相反
 * - 常态：主题色背景 + 白字
 * - 悬停：白底 + 主题色边框 + 主题色文字
 * 
 * HTML结构示例：
 * <button class="qms-btn qms-btn--solid">主要操作</button>
 */



/* ========================================
   标准卡片标题样式
   ======================================== */

/**
 * ✅ 标准卡片标题样式（Card Header Standard）
 * 
 * 使用场景：所有卡片的标题区域，统一视觉风格
 * HTML结构示例：
 * <div class="card">
 *     <div class="card-header card-header-standard d-flex justify-content-between align-items-center">
 *         <span><i class="bi bi-list-ul"></i> 卡片标题</span>
 *         <button class="qms-btn qms-btn--primary">
 *             <i class="bi bi-plus-lg"></i> 添加
 *         </button>
 *     </div>
 *     <div class="card-body">
 *         <!-- 卡片内容 -->
 *     </div>
 * </div>
 * 
 * 设计特点：
 * - 主题色背景，突出模块识别
 * - 白色文字，确保对比度和可读性
 * - 底部主题色边框，增强视觉层次
 * - 默认左右分布布局（标题在左，按钮在右）
 * - 支持Flexbox布局，可放置按钮等元素
 */

.card-header-standard {
    background-color: var(--bs-primary-bg-subtle) !important; /* 淡主题色背景 */
    color: var(--bs-body-color) !important; /* 黑色文字，保持可读性 */
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 默认左右分布 */
    gap: 8px !important;
    text-transform: none !important; /* 移除大写转换 */
    letter-spacing: normal !important; /* 移除字间距 */
}

/* 深色模式适配 */

/* 卡片标题左侧文字区域 */
.card-header-standard > span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header-standard > span:first-child i {
    font-size: 16px;
}

/* 右侧按钮区域 */
.card-header-standard > div {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ========================================
   标准模态框标题样式
   ======================================== */

/**
 * ✅ 标准模态框标题样式（Modal Header Standard）
 * 
 * 使用场景：所有模态框的标题区域，统一视觉风格
 * HTML结构示例：
 * <div class="modal fade" id="myModal">
 *     <div class="modal-dialog">
 *         <div class="modal-content">
 *             <div class="modal-header modal-header-standard">
 *                 <h5 class="modal-title"><i class="bi bi-plus-lg"></i> 模态框标题</h5>
 *                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
 *             </div>
 *             <div class="modal-body">
 *                 <!-- 模态框内容 -->
 *             </div>
 *         </div>
 *     </div>
 * </div>
 * 
 * 设计特点：
 * - 主题色纯色背景，突出标题
 * - 白色文字和关闭按钮，确保可读性
 * - 支持图标 + 文字的标题格式
 * - 自动适配深色模式
 */

.modal-header-standard {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
}

.modal-header-standard .modal-title {
    color: white !important;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header-standard .modal-title i {
    font-size: 1.2em;
}

.modal-header-standard .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.modal-header-standard .btn-close:hover {
    opacity: 1 !important;
}

/* 深色模式适配 - 模态框头部 */

/* ========================================
   表格操作区按钮样式
   ======================================== */

/**
 * ✅ 表格操作列宽度规范
 * 
 * 使用场景：包含多个操作按钮的表格列
 * 特点：固定宽度、不换行、图标完整显示
 * HTML结构示例：
 * <table class="table-header-simple">
 *     <thead>
 *         <tr>
 *             <th style="width: 180px;">操作</th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td class="action-column" style="white-space: nowrap;">
 *                 <button class="btn-action">...</button>
 *             </td>
 *         </tr>
 *     </tbody>
 * </table>
 */

/* 操作列单元格 - 防止换行 */
.action-column,
table td.action-column,
.table-header-simple tbody td.action-column {
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 操作列中的按钮容器 - 保持按钮在一行 */
.action-column .btn-group,
.action-column .d-flex,
.action-column > button,
.action-column > a {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.btn-action,
.table td.text-end .btn-outline-primary,
.table td.text-end .btn-outline-info,
.table td.text-end .btn-outline-secondary {
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 2px !important;
    border: 1px solid var(--bs-primary) !important;
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: none !important;
    white-space: nowrap !important; /* 防止按钮文字换行 */
}

.btn-action:hover:not(:disabled),
.table td.text-end .btn-outline-primary:hover:not(:disabled),
.table td.text-end .btn-outline-info:hover:not(:disabled),
.table td.text-end .btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.btn-action:active:not(:disabled),
.table td.text-end .btn-outline-primary:active:not(:disabled),
.table td.text-end .btn-outline-info:active:not(:disabled),
.table td.text-end .btn-outline-secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.2) !important;
}

.btn-action:disabled,
.table td.text-end .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-secondary) !important;
    box-shadow: none !important;
}

.btn-action.btn-outline-danger,
.table td.text-end .btn-outline-danger {
    border: 1px solid var(--bs-danger) !important;
    color: var(--bs-danger) !important;
    background-color: transparent !important;
}

.btn-action.btn-outline-danger:hover:not(:disabled),
.table td.text-end .btn-outline-danger:hover:not(:disabled) {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.btn-action.btn-outline-danger:active:not(:disabled),
.table td.text-end .btn-outline-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2) !important;
}

.btn-action.btn-outline-success {
    border: 1px solid var(--bs-success) !important;
    color: var(--bs-success) !important;
    background-color: transparent !important;
}

.btn-action.btn-outline-success:hover:not(:disabled) {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3) !important;
}

/* 补充：secondary / info / warning 语义色（与 danger/success 同构） */
.btn-action.btn-outline-secondary {
    border: 1px solid var(--bs-secondary) !important;
    color: var(--bs-secondary) !important;
    background-color: transparent !important;
}
.btn-action.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

.btn-action.btn-outline-info {
    border: 1px solid var(--bs-info) !important;
    color: var(--bs-info) !important;
    background-color: transparent !important;
}
.btn-action.btn-outline-info:hover:not(:disabled) {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3) !important;
}

.btn-action.btn-outline-warning {
    border: 1px solid var(--bs-warning) !important;
    color: #997404 !important;
    background-color: transparent !important;
}
.btn-action.btn-outline-warning:hover:not(:disabled) {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #212529 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important;
}

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

/**
 * ✅ 模态框中的主要操作按钮
 * 
 * 使用场景：模态框 footer 中的确认/保存按钮
 * 说明：直接使用 .qms-btn qms-btn--primary 类，自动继承标准样式（白色背景 + 主题色边框 + 悬停反色效果）
 * HTML结构示例：
 * <div class="modal-footer">
 *     <button type="button" class="qms-btn qms-btn--secondary" data-bs-dismiss="modal">
 *         <i class="bi bi-x-lg"></i> 取消
 *     </button>
 *     <button type="button" class="qms-btn qms-btn--primary">
 *         <i class="bi bi-check-lg"></i> 确认
 *     </button>
 * </div>
 */

/**
 * ✅ 模态框中的次要操作按钮（取消/关闭）
 * 
 * 使用场景：模态框 footer 中的取消/关闭按钮
 * 特点：灰色边框、灰色文字、悬停时加深
 * HTML结构示例：
 * <button type="button" class="qms-btn qms-btn--secondary" data-bs-dismiss="modal">
 *     <i class="bi bi-x-lg"></i> 取消
 * </button>
 */



/* 暗黑模式适配 */


/* ========================================
   卡片表格布局规范
   ======================================== */

/**
 * ✅ 卡片表格样式（Card-Table Pattern）
 * 
 * 使用场景：表格包裹在卡片中，卡片标题作为表头的视觉延伸
 * HTML结构示例：
 * <div class="card">
 *     <div class="card-header card-header-standard d-flex justify-content-between align-items-center">
 *         <span><i class="bi bi-list-ul"></i> 表格标题</span>
 *         <button class="qms-btn qms-btn--primary">添加</button>
 *     </div>
 *     <div class="card-body p-0">
 *         <div class="table-responsive-simple">
 *             <table class="table-header-simple">
 *                 <thead>...</thead>
 *                 <tbody>...</tbody>
 *             </table>
 *         </div>
 *     </div>
 * </div>
 */

/* 注意：.card-header-standard 已在全局“标准卡片标题样式”章节定义 */

.card .table-responsive-simple {
    overflow-x: auto;
    border-radius: 0 0 8px 8px;
    border: none;
    margin-top: 0;
}

.card .card-body.p-0 .table-responsive-simple {
    border-radius: 0 0 8px 8px;
}

.table-header-simple thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--body-color) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    text-align: center !important;  /* ✅ 表头居中对齐 */
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
    vertical-align: middle !important;  /* ✅ 表头垂直居中 */
    text-transform: none !important; /* 移除大写转换 */
    letter-spacing: normal !important; /* 移除字间距 */
}

/* ✅ 表格所有单元格居中对齐（全局标准） */
.table-header-simple tbody td {
    text-align: center !important;  /* ✅ 水平居中 */
    vertical-align: middle !important;  /* ✅ 垂直居中 */
}

/* 确保表格中的内联元素也居中 */
.table-header-simple tbody td > * {
    display: inline-block;
    vertical-align: middle;
}

/* 允许个别列通过 inline style 覆盖居中（兼容 text-align:left 和 text-align: left） */
.table-header-simple tbody td[style*="text-align:left"],
.table-header-simple tbody td[style*="text-align: left"],
.table-header-simple tbody td.text-left {
    text-align: left !important;
}
.table-header-simple tbody td[style*="text-align:right"],
.table-header-simple tbody td[style*="text-align: right"],
.table-header-simple tbody td.text-right {
    text-align: right !important;
}

.table-header-simple thead tr:hover,
.table-header-simple thead th:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* ========================================
   ✅ 经典表格样式（Classic Table）
   ======================================== */

/**
 * ✅ 经典表格样式 - 基于卡片表格，将标题应用到表头
 * 
 * 设计特点：
 * - 无卡片容器，直接使用表格
 * - 表头使用淡主题色背景（类似 card-header-standard）
 * - 保留 table-header-simple 的所有特性（居中对齐、Badge样式等）
 * - 适合需要简洁表格展示的场景
 * 
 * HTML结构示例：
 * <div class="table-responsive-simple">
 *     <table class="table-classic">
 *         <thead>
 *             <tr>
 *                 <th>列1</th>
 *                 <th>列2</th>
 *             </tr>
 *         </thead>
 *         <tbody>
 *             <tr>
 *                 <td>数据1</td>
 *                 <td>数据2</td>
 *             </tr>
 *         </tbody>
 *     </table>
 * </div>
 */

.table-classic {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

/* 经典表格表头 - 应用卡片标题样式 */
.table-classic thead th {
    background-color: var(--bs-primary-bg-subtle) !important; /* 淡主题色背景 */
    color: var(--bs-body-color) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    text-align: center !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    border-top: none !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* 深色模式适配 */

/* 经典表格单元格 - 继承 table-header-simple 的居中特性 */
.table-classic tbody td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/* ✅ 允许通过内联样式覆盖对齐方式 */
.table-classic tbody td[style*="text-align: left"] {
    text-align: left !important;
}

.table-classic tbody td[style*="text-align: right"] {
    text-align: right !important;
}

/* 确保表格中的内联元素也居中 */
.table-classic tbody td > * {
    display: inline-block;
    vertical-align: middle;
}

/* 经典表格行悬停效果（与全局统一，走 --table-row-hover） */
.table-classic tbody tr:hover {
    background-color: var(--table-row-hover, color-mix(in srgb, var(--bs-primary) 4%, transparent));
}

/* 深色模式下悬停效果 */

/* 经典表格中的 Badge 样式 - 继承 table-header-simple */
.table-classic .badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    min-width: 50px !important;
    text-align: center !important;
}

/* 深色模式下的单元格边框 */

/* ========================================
   表格中的 Badge 样式规范
   ======================================== */

/**
 * ✅ 表格中 Badge 统一样式（Table Badge Standard）
 * 
 * 使用场景：表格单元格中显示状态、类型等标签信息
 * HTML结构示例：
 * <td class="text-center">
 *     <span class="badge badge-table">CSS</span>
 * </td>
 * 
 * 设计特点：
 * - 合适的字高和内边距，与表格行高协调
 * - 圆角设计，视觉柔和
 * - 支持各种 Bootstrap 背景色类（bg-success, bg-warning, bg-info 等）
 * - 自动垂直居中对齐
 */

.table-header-simple .badge,
table .badge.badge-table {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    min-width: 50px !important;
    text-align: center !important;
}

/* 确保 Badge 在表格单元格中垂直居中 */
table td .badge {
    vertical-align: middle !important;
}

/* ========================================
   表格输入框+按钮组统一样式（统一整体）
   ======================================== */

/**
 * ✅ 表格输入框+复制按钮组样式（Unified Input-Copy Group）
 * 
 * 使用场景：表格单元格中包含输入框和操作按钮的组合控件
 * HTML结构示例：
 * <td class="text-center">
 *     <div class="input-copy-btn-group">
 *         <input type="text" class="form-control form-control-sm" readonly value="...">
 *         <button class="btn btn-sm" type="button">
 *             <i class="bi bi-clipboard"></i>
 *         </button>
 *     </div>
 * </td>
 * 
 * 设计特点：
 * - 视觉上完全融合为单一控件组
 * - 统一边框、背景、圆角，无视觉割裂感
 * - 悬停/聚焦/点击状态整个控件组同步联动
 * - 适合表格中的紧凑布局
 */

/* 容器样式 - 统一整体 */
.input-copy-btn-group {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    max-width: 350px !important;
    height: 30px !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    background-color: var(--bs-border-color, #dee2e6) !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

/* 整体悬停效果 - 边框颜色变化 */
.input-copy-btn-group:hover {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15) !important;
}

/* 整体聚焦效果 */
.input-copy-btn-group:focus-within {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

/* 输入框样式 - 融入整体，无独立边框 */
.input-copy-btn-group .form-control,
.input-copy-btn-group input[type="text"],
.input-copy-btn-group input[type="text"]:read-only {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: white !important;
    color: var(--bs-body-color, #212529) !important;
    cursor: default !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 输入框只读态背景 */
.input-copy-btn-group .form-control:read-only,
.input-copy-btn-group input[type="text"]:read-only {
    background-color: white !important;
}

/* 按钮样式 - 融入整体 */
.input-copy-btn-group .btn,
.input-copy-btn-group button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 0.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--bs-border-color, #dee2e6) !important;
    background-color: var(--bs-light, #f8f9fa) !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: nowrap !important;
}

/* 按钮图标大小 */
.input-copy-btn-group .btn i,
.input-copy-btn-group .btn svg,
.input-copy-btn-group button i,
.input-copy-btn-group button svg {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* 整体悬停时按钮状态变化 */
.input-copy-btn-group:hover .btn,
.input-copy-btn-group:hover button {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
    border-left-color: var(--bs-primary, #0d6efd) !important;
    color: var(--bs-primary, #0d6efd) !important;
}

/* 按钮悬停状态 */
.input-copy-btn-group .btn:hover,
.input-copy-btn-group button:hover {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-left-color: var(--bs-primary, #0d6efd) !important;
    color: white !important;
}

/* 按钮点击/激活状态 */
.input-copy-btn-group .btn:active,
.input-copy-btn-group .btn:focus,
.input-copy-btn-group button:active,
.input-copy-btn-group button:focus {
    background-color: var(--bs-primary-hover, #0b5ed7) !important;
    border-left-color: var(--bs-primary-hover, #0b5ed7) !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 按钮点击成功反馈 - 可通过 JS 添加 .copied 类实现 */
.input-copy-btn-group .btn.copied,
.input-copy-btn-group button.copied {
    background-color: var(--bs-success, #198754) !important;
    border-left-color: var(--bs-success, #198754) !important;
    color: white !important;
}

/* 深色模式适配 */







/* 小屏幕响应式 */
@media (max-width: 768px) {
    .input-copy-btn-group {
        max-width: 250px !important;
    }
    
    .input-copy-btn-group .form-control,
    .input-copy-btn-group input[type="text"] {
        font-size: 11px !important;
    }
}

/* ✅ URL 输入框组样式优化 */
.url-input-group {
    max-width: 100%;
}

.url-input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.url-input-group .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding: 0.25rem 0.5rem !important;
}

/* ✅ 复制附加件（input-group-text[data-qms-copy]）悬停/点击反馈
   作用范围：明文 Token 与访问 URL 的复制按钮，共用同一反馈；
   仅作用于带 data-qms-copy 的 input-group-text，不影响其它输入组附加件。
   采用主题色取极浅底 + 主色文字，克制且随主题（含深色模式）自适应。 */
.input-group-text[data-qms-copy] {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group-text[data-qms-copy]:hover {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary, #0d6efd);
}

.input-group-text[data-qms-copy]:active {
    background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, transparent);
    color: var(--bs-primary, #0d6efd);
}

.input-group-text[data-qms-copy]:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* ========================================
   深色模式适配
   ======================================== */














/* ✅ 深色模式下 qms-btn qms-btn--solid 按钮样式 */








/* 注意：.card-header-standard 深色模式已在全局章节定义 */


/* ✅ 深色主题下的表格行悬停效果 */

/* ========================================
   搜索表单组件样式
   ======================================== */

/**
 * ✅ 标准搜索表单组件（Search Form Standard）
 * 
 * 使用场景：带快捷键提示的搜索输入框
 * HTML结构示例：
 * <form class="search-form">
 *     <div class="search-input-wrapper">
 *         <input type="text" class="search-input" placeholder="输入关键词" />
 *         <span class="shortcut-hint-inline">
 *             <span class="shortcut-key-inline">
 *                 <span class="key-inline">Ctrl</span>
 *                 <span class="plus-inline">+</span>
 *                 <span class="key-inline">K</span>
 *             </span>
 *         </span>
 *     </div>
 *     <button type="submit" class="search-btn">查询</button>
 * </form>
 */

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 12px 14px;
    padding-right: 95px;
    font-size: 0.9375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-white);
    color: var(--bs-body-color);
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.15s ease;
    height: 44px;
    box-sizing: border-box;
}

.search-input:focus {
    border-color: var(--bs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.search-input:hover:not(:focus) {
    border-color: #9ca3af;
}

.shortcut-hint-inline {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--bs-text-muted);
    pointer-events: none;
}

.shortcut-key-inline {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.key-inline {
    background: var(--bs-light);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--bs-border-color);
    font-family: monospace;
}

.plus-inline {
    color: var(--bs-text-muted);
}

.search-btn {
    padding: 10px 28px;
    font-size: 0.9375rem;
    font-weight: 500;
    border: 1px solid var(--bs-primary);
    border-radius: 8px;
    background: var(--bs-primary);
    color: var(--bs-white);
    cursor: pointer;
    transition: all 0.15s ease;
    height: 44px;
    box-sizing: border-box;
}

.search-btn:hover {
    background: var(--bs-primary-hover, #0b5ed7);
    border-color: var(--bs-primary-hover, #0b5ed7);
    color: var(--bs-white);
}

/* 深色模式适配 - 搜索表单 */



/* ========================================
   开关控件样式
   ======================================== */

/**
 * ✅ 标准开关控件（Toggle Switch Standard）
 * 
 * 使用场景：二元状态切换（启用/禁用、显示/隐藏等）
 * HTML结构示例：
 * <div class="toggle-controls">
 *     <div class="toggle-item">
 *         <span class="switch" id="toggleExample"></span>
 *         <label class="toggle-label" for="toggleExample">选项名称</label>
 *     </div>
 * </div>
 */

.toggle-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--bs-secondary-bg);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.switch.active {
    background: var(--bs-primary);
}

.switch.active::after {
    transform: translateX(18px);
}

.toggle-label {
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
}

/* 深色模式适配 - 开关控件 */


/* ========================================
   日志容器样式
   ======================================== */

/**
 * ✅ 标准日志容器（Log Container Standard）
 * 
 * 使用场景：显示操作日志、同步记录等文本内容
 * HTML结构示例：
 * <div id="sync-log" class="log-container">
 *     <div class="log-entry">[2026-04-24 10:30:00] 开始同步...</div>
 *     <div class="log-entry log-success">✓ 同步成功</div>
 * </div>
 */

.log-container {
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 20px;
}

.log-entry {
    padding: 4px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry.log-success {
    color: var(--bs-success);
}

.log-entry.log-error {
    color: var(--bs-danger);
}

.log-entry.log-warning {
    color: var(--bs-warning);
}

/* 深色模式适配 - 日志容器 */

/* ========================================
   设置按钮样式
   ======================================== */

/**
 * ✅ 标准设置按钮（Settings Button Standard）
 * 
 * 使用场景：触发设置面板或配置对话框
 * HTML结构示例：
 * <button type="button" class="settings-btn" id="settingsBtn">
 *     <i class="bi bi-gear"></i> 设置
 * </button>
 */

.settings-btn {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    min-width: 60px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.settings-btn:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.settings-btn.show {
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* 深色模式适配 - 设置按钮 */


/* ========================================
   表格筛选组件样式
   ======================================== */

/**
 * ✅ 标准表格筛选组件（Table Filter Standard）
 * 
 * 使用场景：表格上方的多条件筛选区域，支持输入框、下拉选择、日期等筛选项
 * HTML结构示例：
 * <div class="table-filter-container">
 *     <div class="filter-row">
 *         <div class="filter-item">
 *             <label class="filter-label">状态：</label>
 *             <select class="filter-select">
 *                 <option value="">全部</option>
 *                 <option value="active">启用</option>
 *                 <option value="inactive">禁用</option>
 *             </select>
 *         </div>
 *         <div class="filter-item">
 *             <label class="filter-label">类型：</label>
 *             <input type="text" class="filter-input" placeholder="输入类型" />
 *         </div>
 *         <div class="filter-actions">
 *             <button class="qms-btn qms-btn--solid">查询</button>
 *             <button class="qms-btn qms-btn--secondary">重置</button>
 *         </div>
 *     </div>
 * </div>
 * 
 * 设计特点：
 * - 卡片式布局，与表格视觉统一
 * - 响应式设计，自动换行
 * - 统一的输入控件样式
 * - 清晰的标签和按钮分组
 */

.table-filter-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    flex: 1;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.filter-input,
.filter-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-color);
    transition: all 0.2s ease;
    height: 38px;
    box-sizing: border-box;
    outline: none;
}

/* 修复浏览器原生 date/datetime/datetime-local 输入框高度失效问题 */
.filter-input[type="date"],
.filter-input[type="datetime"],
.filter-input[type="datetime-local"],
.filter-select[type="date"],
.filter-select[type="datetime"],
.filter-select[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    line-height: normal;
    padding: 8px 12px;
    height: 38px;
}

.filter-input:focus,
.filter-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.filter-input:hover:not(:focus),
.filter-select:hover:not(:focus) {
    border-color: #9ca3af;
}

.filter-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* 小尺寸变体 - 用于内嵌折叠筛选器（统一高度 34px） */
.filter-input-sm,
.filter-select-sm {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-color);
    transition: all 0.2s ease;
    height: 34px;
    box-sizing: border-box;
    outline: none;
}

.filter-input-sm:focus,
.filter-select-sm:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.filter-input-sm:hover:not(:focus),
.filter-select-sm:hover:not(:focus) {
    border-color: #9ca3af;
}

.filter-select-sm {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* 修复浏览器原生 date 输入框在小尺寸变体下的高度失效问题 */
.filter-input-sm[type="date"],
.filter-input-sm[type="datetime"],
.filter-input-sm[type="datetime-local"],
.filter-select-sm[type="date"],
.filter-select-sm[type="datetime"],
.filter-select-sm[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    line-height: normal;
    padding: 6px 10px;
    height: 34px;
}

/* 小尺寸标签 */
.filter-label-sm {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

/* 深色模式 - 小尺寸变体 */




.filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}



/* ========================================
   表格筛选折叠区域样式
   ======================================== */

/**
 * ✅ 筛选器折叠区域内部样式（Filter Collapse Inner）
 * 
 * 使用场景：内嵌在卡片内的可折叠筛选区域
 * 特点：浅色背景、底部边框、紧凑内边距
 * 
 * HTML结构示例：
 * <div class="collapse" id="filterCollapse">
 *     <div class="filter-collapse-inner">
 *         <form>...</form>
 *     </div>
 * </div>
 */

.filter-collapse-inner {
    background: var(--light);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}


/* 筛选器标签样式 - 紧凑型 */
.filter-collapse-inner .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* ========================================
   筛选器开关按钮全局样式
   ======================================== */

/**
 * ✅ 筛选器折叠开关按钮（Button Filter Toggle）
 * 
 * 使用场景：卡片 header 中的筛选器展开/折叠开关
 * 特点：outline 风格，与全局按钮体系一致
 * 
 * HTML结构示例：
 * <button class="qms-btn qms-btn--toggle" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
 *     <i class="bi bi-funnel"></i> 筛选
 * </button>
 */



/* 深色模式适配 */

/* 筛选激活数量徽标（默认折叠增强：有激活筛选时显示计数） */
.filter-active-badge {
    margin-left: 4px;
    font-weight: 600;
    line-height: 1;
}


/* ========================================
   卡片标题栏"更多"按钮样式
   与 .qms-btn qms-btn--toggle 风格一致
   ======================================== */



/* 深色模式 —— 与筛选按钮深色适配一致 */


/* 下拉菜单项样式 */
.card-more-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

.card-more-dropdown .dropdown-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.card-more-dropdown .dropdown-item:hover {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff);
    color: var(--bs-primary);
}

/* 折叠时隐藏原始按钮 */
.card-header-standard .btn-folded {
    display: none !important;
}

/* ============================================================
   QMS 基础按钮体系（统一形态 + 语义变体）—— 规范命名（全项目已迁移）
   - .qms-btn                  基础形态（尺寸/排版/交互），所有按钮通用，必须显式携带
   - .qms-btn--primary         描边主题色 · 主操作
   - .qms-btn--secondary       描边灰 · 次操作/取消
   - .qms-btn--danger          描边红 · 危险操作
   - .qms-btn--solid           实心主题色 · 强调主操作
   - .qms-btn--toggle          描边灰 · 折叠/更多（支持 aria-expanded 展开态）
   用法：<button class="qms-btn qms-btn--primary">主操作</button>
   小尺寸：追加 .btn-sm（通用 34px；--toggle 的 .btn-sm 为紧凑 28px）；.btn-xs 超小 28px
   历史别名（.qms-btn qms-btn--primary 等）已弃用，请勿再使用。
   ============================================================ */

.qms-btn,
.qms-btn--primary,
.qms-btn--secondary,
.qms-btn--danger,
.qms-btn--solid,
.qms-btn--toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

/* 主操作：描边主题色 */
.qms-btn--primary {
    background: #fff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
}
.qms-btn--primary:hover:not(:disabled) {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}
.qms-btn--primary:active:not(:disabled) {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.3);
}

/* 次操作 / 取消：描边灰 */
.qms-btn--secondary {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.qms-btn--secondary:hover:not(:disabled),
.qms-btn--secondary:active:not(:disabled) {
    background: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--text-secondary);
    color: var(--text-color);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.2);
}

/* 危险操作：描边红 */
.qms-btn--danger {
    background: #fff;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
    font-weight: 600;
}
.qms-btn--danger:hover:not(:disabled) {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.qms-btn--danger:active:not(:disabled) {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);
}

/* 强调主操作：实心主题色（与描边主操作相反） */
.qms-btn--solid {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}
.qms-btn--solid:hover:not(:disabled) {
    background: #fff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}
.qms-btn--solid:active:not(:disabled) {
    background: #fff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.3);
}
.qms-btn--solid:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 筛选搜索 / 重置按钮分别沿用 .qms-btn--solid（实心主色）/ .qms-btn--secondary（描边灰），
   不再单独定义，避免与上方语义变体重复。 */

/* 小尺寸：通用 34px（创建/取消/危险/实心/筛选 等任意变体的 .btn-sm） */
.qms-btn.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    height: 34px;
}
/* 折叠/更多 的 .btn-sm：更紧凑 28px */
.qms-btn--toggle.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    height: 28px;
}
/* 超小尺寸（.btn-xs） */
.qms-btn.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    height: 28px;
}

/* 折叠开关 / 卡片更多：描边灰，hover / aria-expanded 填充 */
.qms-btn--toggle {
    padding: 8px 16px;
    background: transparent;
    border-color: var(--bs-secondary, #6c757d);
    color: var(--bs-secondary, #6c757d);
}
.qms-btn--toggle:hover,
.qms-btn--toggle:focus {
    background: var(--bs-secondary, #6c757d);
    color: #fff;
    border-color: var(--bs-secondary, #6c757d);
}
.qms-btn--toggle:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}
.qms-btn--toggle:disabled,
.qms-btn--toggle[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    border-color: var(--bs-secondary, #6c757d);
    box-shadow: none;
    pointer-events: none;
}
.qms-btn--toggle[aria-expanded="true"] {
    background: var(--bs-secondary, #6c757d);
    color: #fff;
    border-color: var(--bs-secondary, #6c757d);
}
.qms-btn--toggle .badge {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* 深色模式适配 - 操作按钮 */




/* 深色模式适配 - 表格筛选组件 */
[dat-bs-theme="dark"] .table-filter-container {
    background: var(--card-bg);
    border-color: var(--border-color);
}






/* ========================================
   Checkbox & Radio 主题色兼容规范
   ======================================== */

/**
 * ✅ 表单控件主题色适配标准（Form Controls Theme Compatibility）
 * 
 * 使用场景：所有模块的 checkbox、radio 等表单控件
 * 特点：自动适配主题色，支持亮色/暗色模式
 * 
 * 支持的控件类型：
 * - .form-check-input[type="checkbox"] - 复选框
 * - .form-check-input[type="radio"] - 单选框
 * - .form-check-input:checked - 选中状态
 * 
 * 使用说明：
 * 1. 所有 checkbox/radio 自动继承主题色
 * 2. 不需要添加额外的类名
 * 3. 支持亮色/暗色模式自动切换
 * 4. 如果需要特殊颜色，可添加 .theme-switch-* 类
 */

/* 基础样式：选中的 checkbox/radio 使用主题色 */
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* 焦点状态：使用主题色高亮 */
.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* 选中且焦点状态 */
.form-check-input:checked:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* 禁用状态：降低透明度 */
.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-check-input:disabled:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 0.5;
}

/**
 * 特殊主题色变体（可选）
 * 使用方式：在 form-check-input 上添加对应的类
 * 示例：<input class="form-check-input theme-switch-success" type="checkbox">
 */

/* 成功色变体 */
.form-check-input.theme-switch-success:checked {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.form-check-input.theme-switch-success:focus {
    border-color: var(--bs-success) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb, 25, 135, 84), 0.25) !important;
}

/* 警告色变体 */
.form-check-input.theme-switch-warning:checked {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.form-check-input.theme-switch-warning:focus {
    border-color: var(--bs-warning) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb, 255, 193, 7), 0.25) !important;
}

/* 危险色变体 */
.form-check-input.theme-switch-danger:checked {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.form-check-input.theme-switch-danger:focus {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25) !important;
}

/* 信息色变体 */
.form-check-input.theme-switch-info:checked {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

.form-check-input.theme-switch-info:focus {
    border-color: var(--bs-info) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-info-rgb, 13, 202, 240), 0.25) !important;
}

/* 次要色变体 */
.form-check-input.theme-switch-secondary:checked {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.form-check-input.theme-switch-secondary:focus {
    border-color: var(--bs-secondary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.25) !important;
}

/* 主色变体（明确指定） */
.form-check-input.theme-switch-primary:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input.theme-switch-primary:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/**
 * 暗黑模式适配
 * 暗黑模式下保持相同的主题色逻辑
 */




/**
 * ✅ 可点击表格行样式标准（Clickable Table Rows）
 * 
 * 使用场景：需要整行点击交互的表格
 * 特点：悬停时显示视觉反馈，提升用户体验
 * 
 * 使用说明：
 * 1. 在 tbody 上添加 class="clickable-rows"
 * 2. 每个 tr 自动获得悬停效果和 pointer 光标
 * 3. 支持亮色/暗色模式
 */

/* 基础悬停效果 */
.clickable-rows .clickable-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    transition: background-color 0.2s ease;
}

/* 暗黑模式适配 */

/**
 * ✅ 可执行字段（行内可点击字段）样式标准（Inline Executable Field）
 *
 * 使用场景：列表表格中"绑定了点击操作"的单个字段（如用户列表的
 *   角色 / 资源点 / 状态列），区别于整行点击（.clickable-rows）。
 * 特点：悬停时极浅主题色底 + 虚线描边，明确提示"可点击执行"，
 *   克制且不喧宾夺主，随主题自适应。
 * 用法：在可点击的行内字段外层包一个 <span class="field-inline-link" ...>
 *   各列表表格（用户/授权码等）共用此一处定义，保证视觉一致。
 */
.field-inline-link {
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background-color 0.12s ease;
}
.field-inline-link:hover {
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    outline: 1px dashed var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}
.field-inline-link .badge { cursor: pointer; }

/* 深色模式适配：虚线描边与极浅底在暗色下改用主题色微透明，保证可读 */
[data-bs-theme="dark"] .field-inline-link:hover {
    background: rgba(var(--bs-primary-rgb), 0.18);
    outline-color: var(--bs-primary);
}

/**
 * ✅ 输入框控件主题色适配标准（Input Controls Theme Compatibility）
 * 
 * 使用场景：所有模块的 text、number、date、textarea 等表单控件
 * 特点：自动适配主题色，支持亮色/暗色模式
 * 
 * 支持的控件类型：
 * - .form-control[type="text"] - 文本输入框
 * - .form-control[type="number"] - 数字输入框
 * - .form-control[type="date"] - 日期选择器
 * - .form-control[type="email"] - 邮箱输入框
 * - textarea.form-control - 多行文本框
 * 
 * 使用说明：
 * 1. 所有 form-control 自动继承主题色边框和焦点效果
 * 2. 不需要添加额外的类名
 * 3. 支持亮色/暗色模式自动切换
 * 4. 焦点状态使用主题色高亮
 */

/* 基础样式：输入框焦点状态使用主题色 */
.form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* 禁用状态：降低透明度 */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 0.7;
    cursor: not-allowed;
}

/* 错误状态：红色边框 */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-danger) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25) !important;
}

/* 成功状态：绿色边框 */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--bs-success) !important;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--bs-success) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb, 25, 135, 84), 0.25) !important;
}

/**
 * 暗黑模式适配
 * 暗黑模式下保持相同的主题色逻辑
 */


/**
 * ✅ 选择框控件主题色适配标准（Select Controls Theme Compatibility）
 * 
 * 使用场景：所有模块的 select、form-select 等下拉选择框
 * 特点：自动适配主题色，支持亮色/暗色模式
 * 
 * 支持的控件类型：
 * - .form-select - Bootstrap 标准选择框
 * - select.form-select - 选择框元素
 * 
 * 使用说明：
 * 1. 所有 form-select 自动继承主题色边框和焦点效果
 * 2. 不需要添加额外的类名
 * 3. 支持亮色/暗色模式自动切换
 * 4. 焦点状态使用主题色高亮
 */

/* 基础样式：选择框焦点状态使用主题色 */
.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* 禁用状态：降低透明度 */
.form-select:disabled {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 0.7;
    cursor: not-allowed;
}

/**
 * 暗黑模式适配
 * 暗黑模式下保持相同的主题色逻辑
 */



/* ========================================
   开关按钮组样式（Switch Button Group）
   ======================================== */

/**
 * ✅ 标准开关按钮组（Switch Button Group Standard）
 * 
 * 使用场景：二元或多选项的切换选择器，如认证方式、模式选择等
 * HTML结构示例：
 * <div class="btn-group w-100 btn-group-toggle" role="group">
 *     <input type="radio" class="btn-check" name="optionGroup" id="option1" value="value1" checked>
 *     <label class="btn btn-outline-primary btn-toggle" for="option1">
 *         <i class="bi bi-icon-name"></i> 选项1
 *     </label>
 *     
 *     <input type="radio" class="btn-check" name="optionGroup" id="option2" value="value2">
 *     <label class="btn btn-outline-primary btn-toggle" for="option2">
 *         <i class="bi bi-icon-name"></i> 选项2
 *     </label>
 * </div>
 * 
 * 设计特点：
 * - 扁平化设计，无边框阴影
 * - 无位移变形效果（transform: none）
 * - 点击时保持配色不被覆盖
 * - 文字和图标居中对齐
 * - 支持亮色/深色模式自动切换
 * - 快速响应（0.15s 过渡时间）
 * 
 * 交互状态：
 * - 常态：白底 + 主题色边框 + 主题色文字
 * - 悬停：淡主题色背景
 * - 选中：实心底色 + 白字
 * - 选中悬停：透明度降低至 0.9
 * - 选中点击：透明度降低至 0.85
 */

/* 基础样式 */
.btn-group-toggle .btn-toggle {
    border: 1px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    background-color: white !important;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 悬停状态 - 仅背景色变化 */
.btn-group-toggle .btn-toggle:hover {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 点击/激活状态 - 保持配色，无变形 */
.btn-group-toggle .btn-toggle:active,
.btn-group-toggle .btn-toggle:focus,
.btn-group-toggle .btn-check:checked + .btn-toggle:focus {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* 选中状态 - 实心底色 + 白字 */
.btn-group-toggle .btn-check:checked + .btn-toggle {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 选中状态的悬停效果 */
.btn-group-toggle .btn-check:checked + .btn-toggle:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.9;
}

/* 选中状态的点击/激活效果 - 保持配色 */
.btn-group-toggle .btn-check:checked + .btn-toggle:active,
.btn-group-toggle .btn-check:checked + .btn-toggle:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    opacity: 0.85;
}

/* 深色模式适配 */



/* 深色模式下选中状态 */




/* ========================================
   通用呈现原语（QMS Common Primitives）
   新增日期: 2026/09/04   |   样式库版本: v1.1.0
   ------------------------------------------------
   设计约定（新增样式必须遵守）：
   1. 类名一律 .qms- 前缀，避免与业务模块样式冲突；
   2. 颜色一律走 Bootstrap CSS 变量（--bs-*），禁止写死色值，
      从而天然跟随主题色切换与 [data-bs-theme="dark"] 深色模式；
   3. 不新增裸元素选择器（table/td/button 等），避免污染存量页面；
   4. 仅提供"骨架与语义"，具体尺寸由业务在模块样式中微调。
   配套 JS: core/Components/QmsUI/QmsUI.js（空状态/骨架屏/加载遮罩/确认框/复制）
   ======================================== */

/* ----------------------------------------
   1. 文本与滚动工具类
   ---------------------------------------- */

/* 单行省略（父级 flex/grid 中需配合 min-width:0） */
.qms-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 多行截断 */
.qms-clamp-2,
.qms-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qms-clamp-2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.qms-clamp-3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.qms-mono {
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
    font-size: 0.9em;
}
.qms-nowrap { white-space: nowrap; }
.qms-text-secondary { color: var(--bs-secondary-color, #6c757d); }

/* 细滚动条容器（长列表、抽屉、侧栏可用） */
.qms-scroll {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}
.qms-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.qms-scroll::-webkit-scrollbar-track { background: transparent; }
.qms-scroll::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 4px;
}
.qms-scroll::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color, #6c757d); }

/* ----------------------------------------
   2. 页面头部与工具条
   ---------------------------------------- */

/**
 * 页面头部：标题 + 描述 与 右侧工具条
 * <div class="qms-page-header">
 *     <div>
 *         <h5 class="qms-page-title"><i class="bi bi-list-ul"></i> 资源列表</h5>
 *         <p class="qms-page-desc">共 128 条记录</p>
 *     </div>
 *     <div class="qms-toolbar">
 *         <button class="qms-btn qms-btn--primary"><i class="bi bi-plus-lg"></i> 新增</button>
 *     </div>
 * </div>
 */
.qms-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.qms-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.qms-page-desc {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
}
.qms-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.qms-toolbar-spacer { flex: 1 1 auto; }

/* ----------------------------------------
   3. 空状态（Empty State）
   ---------------------------------------- */

/**
 * 统一空状态：列表无数据 / 搜索无结果 / 筛选无命中
 * HTML 可由 QmsUI.empty(target, {...}) 一键渲染
 * <div class="qms-empty">
 *     <i class="bi bi-inbox qms-empty-icon"></i>
 *     <div class="qms-empty-title">暂无数据</div>
 *     <div class="qms-empty-desc">调整筛选条件后重试</div>
 *     <div class="qms-empty-action"><button class="qms-btn qms-btn--primary">重置筛选</button></div>
 * </div>
 */
.qms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-body-bg, #fff);
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
}
/* 紧凑型：用于卡片内、表格占位 */
.qms-empty.qms-empty--sm { padding: 24px 16px; }
.qms-empty-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0.55;
}
.qms-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}
.qms-empty-desc {
    font-size: 0.875rem;
    max-width: 420px;
}
.qms-empty-action { margin-top: 4px; }

/* ----------------------------------------
   4. 加载态：骨架屏 / 旋转指示器 / 遮罩
   ---------------------------------------- */

@keyframes qmsSkeletonFlash {
    0%   { opacity: 1; }
    50%  { opacity: 0.45; }
    100% { opacity: 1; }
}
@keyframes qmsSpin {
    to { transform: rotate(360deg); }
}

/* 骨架块（配合 .qms-skeleton-text / -title / -avatar / -btn 使用） */
.qms-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bs-secondary-color, #6c757d) 18%, transparent);
    animation: qmsSkeletonFlash 1.2s ease-in-out infinite;
}
.qms-skeleton-text  { height: 12px; margin: 8px 0; }
.qms-skeleton-title { height: 20px; width: 40%; margin-bottom: 12px; }
.qms-skeleton-avatar{ width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.qms-skeleton-btn   { width: 88px; height: 32px; border-radius: 6px; }

/* 行内旋转指示器 */
.qms-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 25%, transparent);
    border-top-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
    animation: qmsSpin 0.7s linear infinite;
    vertical-align: -0.125em;
}

/* 加载遮罩：宿主元素需为 position:relative，可用 .qms-loading-host 补足 */
.qms-loading-host { position: relative; }
.qms-loading-mask {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 72%, transparent);
    border-radius: inherit;
}
.qms-loading-text {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ----------------------------------------
   5. 状态点 / 状态标签
   ---------------------------------------- */

/**
 * <span class="qms-status qms-status--success"><i class="qms-dot"></i> 已完成</span>
 * 语义色：--success / --warning / --danger / --info / --primary（缺省中性）
 */
.qms-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}
.qms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-secondary-color, #6c757d);
    flex: 0 0 auto;
}
.qms-status--primary { color: var(--bs-primary, #0d6efd); }
.qms-status--primary .qms-dot { background: var(--bs-primary, #0d6efd); }
.qms-status--success { color: var(--bs-success, #198754); }
.qms-status--success .qms-dot { background: var(--bs-success, #198754); }
.qms-status--warning { color: var(--bs-warning-text-emphasis, #997404); }
.qms-status--warning .qms-dot { background: var(--bs-warning, #ffc107); }
.qms-status--danger  { color: var(--bs-danger, #dc3545); }
.qms-status--danger .qms-dot { background: var(--bs-danger, #dc3545); }
.qms-status--info    { color: var(--bs-info-text-emphasis, #087990); }
.qms-status--info .qms-dot { background: var(--bs-info, #0dcaf0); }

/* 软底状态徽标（表格状态列推荐） */
.qms-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
}
.qms-status-pill--primary { background: var(--bs-primary-bg-subtle, #cfe2ff); color: var(--bs-primary-text-emphasis, #084298); }
.qms-status-pill--success { background: var(--bs-success-bg-subtle, #d1e7dd); color: var(--bs-success-text-emphasis, #0f5132); }
.qms-status-pill--warning { background: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #664d03); }
.qms-status-pill--danger  { background: var(--bs-danger-bg-subtle, #f8d7da);  color: var(--bs-danger-text-emphasis, #842029); }
.qms-status-pill--info    { background: var(--bs-info-bg-subtle, #cff4fc);    color: var(--bs-info-text-emphasis, #055160); }

/* ----------------------------------------
   6. 描述列表（键値详情）
   ---------------------------------------- */

/**
 * 详情展示：工程信息、日志详情、授权码详情等
 * <div class="qms-desc">
 *     <div class="qms-desc-item">
 *         <span class="qms-desc-label">工程编号</span>
 *         <span class="qms-desc-value">QMS-2026-001</span>
 *     </div>
 *     <div class="qms-desc-item qms-desc-item--full"> ... </div>
 * </div>
 */
.qms-desc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--bs-border-color, #dee2e6);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
}
.qms-desc-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 14px;
    background: var(--bs-body-bg, #fff);
}
.qms-desc-item--full { grid-column: 1 / -1; }
.qms-desc-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}
.qms-desc-value {
    font-size: 0.9375rem;
    color: var(--bs-body-color, #212529);
    word-break: break-word;
}

/* ----------------------------------------
   7. 时间线（操作日志 / 审批流）
   ---------------------------------------- */

/**
 * <ul class="qms-timeline">
 *     <li class="qms-timeline-item">
 *         <i class="qms-timeline-dot qms-timeline-dot--success"></i>
 *         <div class="qms-timeline-title">已同步</div>
 *         <div class="qms-timeline-meta">2026-09-04 10:12 · 系统</div>
 *         <div class="qms-timeline-body">同步 128 条记录</div>
 *     </li>
 * </ul>
 */
.qms-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.qms-timeline-item {
    position: relative;
    padding: 0 0 18px 26px;
}
.qms-timeline-item:last-child { padding-bottom: 0; }
/* 连接线 */
.qms-timeline-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--bs-border-color, #dee2e6);
}
.qms-timeline-item:last-child::before { display: none; }
.qms-timeline-dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    border: 2px solid var(--bs-primary, #0d6efd);
    box-sizing: border-box;
}
.qms-timeline-dot--success { border-color: var(--bs-success, #198754); }
.qms-timeline-dot--warning { border-color: var(--bs-warning, #ffc107); }
.qms-timeline-dot--danger  { border-color: var(--bs-danger, #dc3545); }
.qms-timeline-dot--info    { border-color: var(--bs-info, #0dcaf0); }
.qms-timeline-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}
.qms-timeline-meta {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}
.qms-timeline-body {
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
}

/* ----------------------------------------
   8. 分段标题 / 行内代码 / 快捷键
   ---------------------------------------- */

.qms-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}
.qms-section-title::before {
    content: '';
    width: 3px;
    height: 1em;
    border-radius: 2px;
    background: var(--bs-primary, #0d6efd);
}

.qms-code {
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
    font-size: 0.8125rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bs-secondary-bg, #e9ecef);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
    word-break: break-all;
}

.qms-kbd {
    display: inline-block;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bs-secondary-bg, #e9ecef);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom-width: 2px;
    color: var(--bs-body-color, #212529);
}

/* ----------------------------------------
   9. 头像与头像组
   ---------------------------------------- */

.qms-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #084298);
    user-select: none;
}
.qms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qms-avatar--sm { width: 24px; height: 24px; font-size: 0.6875rem; }
.qms-avatar--lg { width: 40px; height: 40px; font-size: 1rem; }
.qms-avatar-group { display: inline-flex; align-items: center; }
.qms-avatar-group .qms-avatar {
    margin-left: -8px;
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
}
.qms-avatar-group .qms-avatar:first-child { margin-left: 0; }

/* ----------------------------------------
   10. 复制按钮（配合 QmsUI.copy / data-qms-copy）
   ---------------------------------------- */

/* 声明式：元素上加 data-qms-copy="待复制文本"，点击即复制并提示 */
[data-qms-copy] { cursor: pointer; }
.qms-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
    line-height: 1.2;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.qms-copy:hover {
    color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #cfe2ff);
}

/* ----------------------------------------
   11. 入场动效与无障碍
   ---------------------------------------- */

@keyframes qmsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes qmsSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.qms-fade-in  { animation: qmsFadeIn 0.25s ease-out both; }
.qms-slide-up { animation: qmsSlideUp 0.28s ease-out both; }

/* 键盘可达性：统一的焦点环 */
.qms-copy:focus-visible,
[data-qms-copy]:focus-visible,
.qms-page-header button:focus-visible,
.qms-toolbar button:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
    .qms-fade-in,
    .qms-slide-up { animation: none; }
    .qms-skeleton { animation: none; }
    .qms-spinner  { animation-duration: 1.6s; }
}

/* ----------------------------------------
   12. 打印适配
   ---------------------------------------- */

@media print {
    /* 交互元素不进打印稿 */
    .qms-no-print,
    .qms-toolbar,
    .standard-navbar,
    .pagination-container,
    .btn-action,
    .qms-copy { display: none !important; }

    body { background: #fff !important; }
    .card,
    .qms-empty,
    .qms-desc { box-shadow: none !important; break-inside: avoid; }
    .qms-page-header { margin-bottom: 8px; }
}

/* ==========================================================================
   QmsUI 统一工具类层（Utilities）
   --------------------------------------------------------------------------
   目标：替代散落在各应用视图中的内联 style="..." ，实现一处定义、全系统复用。
   命名：全部以 qms- 前缀，避免与 Bootstrap 及业务类名冲突（纯新增，零覆盖）。
   主题：取值一律走 --bs-* 令牌，自动适配浅色与 [data-bs-theme="dark"] 深色模式。

   数据来源：对 apps/ 全量视图统计内联样式属性频次所得 Top 需求
             width/min-width > font-size > color > display > padding > flex
             > white-space > background > font-weight > gap > cursor > text-align

   使用约定：
             1) 新增页面一律优先使用本层工具类，不得再写内联 style；
             2) 本层只提供「通用呈现原语」，业务专属样式仍留在各自模块的语义化类名中；
             3) 需要复用 ≥2 次的业务样式，应下沉到本库，不得在各应用内部重复声明。
   ========================================================================== */

/* ---- 1. 文本：字号阶梯（依据 font-size 159 次内联统计）---- */
.qms-fs-xs.qms-fs-xs { font-size: 0.75rem; }    /* 12px */
.qms-fs-sm.qms-fs-sm { font-size: 0.8125rem; }  /* 13px */
.qms-fs-md.qms-fs-md { font-size: 0.875rem; }   /* 14px */
.qms-fs-base.qms-fs-base { font-size: 1rem; }       /* 16px */
.qms-fs-lg.qms-fs-lg { font-size: 1.125rem; }   /* 18px */
.qms-fs-xl.qms-fs-xl { font-size: 1.25rem; }    /* 20px */

/* ---- 2. 文本：字重（font-weight 35 次）---- */
.qms-fw-normal.qms-fw-normal { font-weight: 400; }
.qms-fw-medium.qms-fw-medium { font-weight: 500; }
.qms-fw-semibold.qms-fw-semibold { font-weight: 600; }
.qms-fw-bold.qms-fw-bold { font-weight: 700; }

/* ---- 3. 文本：颜色，统一走令牌以适配深色模式（color 96 次）---- */
.qms-text-body.qms-text-body { color: var(--bs-body-color); }
.qms-text-muted.qms-text-muted { color: var(--bs-secondary-color); }
.qms-text-primary.qms-text-primary { color: var(--bs-primary); }
.qms-text-success.qms-text-success { color: var(--bs-success); }
.qms-text-warning.qms-text-warning { color: var(--bs-warning); }
.qms-text-danger.qms-text-danger { color: var(--bs-danger); }
.qms-text-secondary.qms-text-secondary { color: var(--bs-secondary); }

/* ---- 4. 文本：对齐（text-align 21 次）---- */
.qms-text-left.qms-text-left { text-align: left; }
.qms-text-center.qms-text-center { text-align: center; }
.qms-text-right.qms-text-right { text-align: right; }

/* ---- 5. 空白处理（white-space 42 次，多为表格单元格与按钮防换行）---- */
.qms-nowrap.qms-nowrap { white-space: nowrap; }
.qms-wrap.qms-wrap { white-space: normal; }
/* 单行省略号：需配合宽度约束使用 */
.qms-ellipsis.qms-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 6. 显示与弹性布局（display 79 / flex 46 / gap 24 次）---- */
.qms-d-none.qms-d-none { display: none; }
.qms-d-block.qms-d-block { display: block; }
.qms-flex.qms-flex { display: flex; }
.qms-inline-flex.qms-inline-flex { display: inline-flex; }
.qms-flex-column.qms-flex-column { flex-direction: column; }
.qms-items-center.qms-items-center { align-items: center; }
.qms-items-start.qms-items-start { align-items: flex-start; }
.qms-justify-center.qms-justify-center { justify-content: center; }
.qms-justify-between.qms-justify-between { justify-content: space-between; }
.qms-justify-end.qms-justify-end { justify-content: flex-end; }
.qms-flex-wrap.qms-flex-wrap { flex-wrap: wrap; }
.qms-flex-1.qms-flex-1 { flex: 1 1 0%; }
.qms-flex-none.qms-flex-none { flex: 0 0 auto; }

/* 间距阶梯：0.25rem 递进 */
.qms-gap-1.qms-gap-1 { gap: 0.25rem; }
.qms-gap-2.qms-gap-2 { gap: 0.5rem; }
.qms-gap-3.qms-gap-3 { gap: 0.75rem; }
.qms-gap-4.qms-gap-4 { gap: 1rem; }
.qms-gap-5.qms-gap-5 { gap: 1.5rem; }

/* ---- 7. 内外边距（padding 53 / margin 17 次）---- */
.qms-p-0.qms-p-0 { padding: 0; }
.qms-p-1.qms-p-1 { padding: 0.25rem; }
.qms-p-2.qms-p-2 { padding: 0.5rem; }
.qms-p-3.qms-p-3 { padding: 0.75rem; }
.qms-p-4.qms-p-4 { padding: 1rem; }
.qms-m-0.qms-m-0 { margin: 0; }
.qms-mt-1.qms-mt-1 { margin-top: 0.25rem; }
.qms-mt-2.qms-mt-2 { margin-top: 0.5rem; }
.qms-mt-3.qms-mt-3 { margin-top: 0.75rem; }
.qms-mb-1.qms-mb-1 { margin-bottom: 0.25rem; }
.qms-mb-2.qms-mb-2 { margin-bottom: 0.5rem; }
.qms-mb-3.qms-mb-3 { margin-bottom: 0.75rem; }

/* ---- 8. 尺寸辅助（width/min-width 多用于表格列宽，此处提供通用档位）---- */
.qms-w-full.qms-w-full { width: 100%; }
.qms-w-auto.qms-w-auto { width: auto; }
.qms-minw-0.qms-minw-0 { min-width: 0; }
.qms-minw-sm.qms-minw-sm { min-width: 4rem; }
.qms-minw-md.qms-minw-md { min-width: 8rem; }
.qms-minw-lg.qms-minw-lg { min-width: 12rem; }
.qms-maxh-sm.qms-maxh-sm { max-height: 12rem; overflow-y: auto; }
.qms-maxh-md.qms-maxh-md { max-height: 24rem; overflow-y: auto; }

/* ---- 9. 背景（background 39 次，走令牌以适配主题）---- */
.qms-bg-body.qms-bg-body { background-color: var(--bs-body-bg); }
.qms-bg-card.qms-bg-card { background-color: var(--bs-card-bg); }
.qms-bg-subtle.qms-bg-subtle { background-color: var(--bs-tertiary-bg); }
.qms-bg-transparent.qms-bg-transparent { background-color: transparent; }

/* ---- 10. 交互与其它高频项（cursor 23 / border-radius / box-shadow / overflow）---- */
.qms-cursor-pointer.qms-cursor-pointer { cursor: pointer; }
.qms-cursor-default.qms-cursor-default { cursor: default; }
.qms-rounded.qms-rounded { border-radius: var(--bs-border-radius); }
.qms-rounded-0.qms-rounded-0 { border-radius: 0; }
.qms-shadow-none.qms-shadow-none { box-shadow: none; }
.qms-overflow-auto.qms-overflow-auto { overflow: auto; }
.qms-overflow-hidden.qms-overflow-hidden { overflow: hidden; }
.qms-align-middle.qms-align-middle { vertical-align: middle; }
.qms-word-break.qms-word-break { word-break: break-all; }

/* ---- 11. 组合型：表格单元格与按钮防换行（最高频组合）---- */
/* 表格操作列：不换行 + 垂直居中 + 紧凑行距 */
.qms-cell-actions.qms-cell-actions {
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.2;
}
/* 紧凑行内组合：图标 + 文字同行不换行 */
.qms-inline-group.qms-inline-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ==========================================================================
   QmsUI 工具类层 · 第二批（依据剩余内联样式频次统计补充）
   --------------------------------------------------------------------------
   补充原则：
     1) 只对「重复出现 ≥6 次」的取值建立工具类，避免为个案值污染类库；
     2) 取宽度/最小宽度类针对表格列宽场景集中提供，避免各处散写魔法数字；
     3) 选择器双写（.qms-x.qms-x）以保持与内联样式同等的优先级，替换后外观不变；
     4) 颜色一律改为令牌引用，自动适配深色模式（替换后不再出现硬编码色值）。
   ========================================================================== */

/* ---- 大字号（font-size:2rem/3rem 各 10/19 次，多用于空状态图标与统计数字）---- */
.qms-fs-2xl.qms-fs-2xl { font-size: 2rem; }
.qms-fs-3xl.qms-fs-3xl { font-size: 3rem; }

/* ---- 间距补齐（gap 10px/8px/12px/16px 高频）---- */
.qms-gap-10.qms-gap-10 { gap: 0.625rem; }   /* 10px */

/* ---- 文本溢出省略三件套之补充成员（配合 qms-overflow-hidden / qms-nowrap 使用）---- */
.qms-to-ellipsis.qms-to-ellipsis { text-overflow: ellipsis; }

/* ---- 垂直对齐（vertical-align:top 6 次）---- */
.qms-align-top.qms-align-top { vertical-align: top; }

/* ---- 表格列宽档位：仅收录重复出现 ≥6 次的取值，杜绝各处散写魔法数字 ---- */
.qms-w-60.qms-w-60   { width: 60px; }
.qms-w-70.qms-w-70   { width: 70px; }
.qms-w-90.qms-w-90   { width: 90px; }
.qms-w-100.qms-w-100 { width: 100px; }
.qms-w-110.qms-w-110 { width: 110px; }
.qms-w-120.qms-w-120 { width: 120px; }
.qms-w-130.qms-w-130 { width: 130px; }
.qms-w-150.qms-w-150 { width: 150px; }
.qms-w-20p.qms-w-20p { width: 20%; }

/* ---- 表格最小列宽档位（同口径：仅收录高频取值）---- */
.qms-minw-100.qms-minw-100 { min-width: 100px; }
.qms-minw-120.qms-minw-120 { min-width: 120px; }
.qms-minw-130.qms-minw-130 { min-width: 130px; }
.qms-minw-140.qms-minw-140 { min-width: 140px; }
.qms-minw-160.qms-minw-160 { min-width: 160px; }
.qms-minw-200.qms-minw-200 { min-width: 200px; }
.qms-minw-220.qms-minw-220 { min-width: 220px; }

/* ==========================================================================
   QmsUI 统一组件：表格操作按钮组 .action-btn-group
   --------------------------------------------------------------------------
   背景：该组件原在各应用散落 12 种不同实现（间距 2/4/10px、hover 位移 -1/-2px、
        按钮尺寸与配色各异），且 notifications 内部还存有两份完全相同的副本。
        本处为归一化后的唯一权威定义，已移除各应用私有副本。

   统一口径（以 seal 与 project_archive 原已一致的口径为准）：
     - 容器：inline-flex、垂直居中、间距 8px、不换行、不可收缩
     - 按钮：32×32（min-width 保证，文字型可横向撑开）主色线框圆角 4px
     - 悬停：主色实心 + 上浮 1px + 主色投影
     - 图标：14px，继承文字色

   覆盖范围：.table-action-btn（图标按钮主类）与 .btn（兼容 notifications 标记，
             其按钮同时带 .btn 与 .table-action-btn），因此**无需改动任何业务标记**。

   有意保留在各应用的语义变体（口径不同，未强行统一）：
     - seal：.solid（主色实心）、.disabled、.status-text、深色模式适配
     - project_archive：.danger（危险）、.solid（成功色）、:disabled
     - project_letter：容器间距 2px（文字型按钮更紧凑）、.btn-action 响应式缩放、
                      打印隐藏

   选择器双写说明：容器写作 .action-btn-group.action-btn-group，用于抬高特异度
                  至 (0,2,0)，压过本文件上文 .table-header-simple tbody td > *
                  （(0,1,2) 将 display 设为 inline-block、vertical-align: middle），
                  从而替代 seal 原先依赖的 display: inline-flex !important。
   ========================================================================== */
.action-btn-group.action-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.action-btn-group .table-action-btn,
.action-btn-group .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    background-color: transparent;
    color: var(--bs-primary);
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-btn-group .table-action-btn:hover,
.action-btn-group .btn:hover {
    color: #fff;
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(var(--bs-primary-rgb), 0.25);
}
.action-btn-group .table-action-btn i,
.action-btn-group .btn i {
    font-size: 14px;
    color: inherit;
}

/* ==========================================================================
   QmsUI 工具类层 · 第三批（依据第三轮剩余内联样式统计补充）
   --------------------------------------------------------------------------
   本批新增两条原则（在此前「仅收录 ≥6 次取值」之上）：

     1) 字号就近收敛：0.70~0.95rem 区间存在 0.7/0.75/0.78/0.8/0.82/0.85/0.875/
        0.9/0.95 共 9 个近似值，若逐个建档会污染类库且毫无可读性收益。故一律就近
        收敛到既有阶梯 xs/sm/md/base（差值均 ≤1px，视觉不可辨），仅为区间外确有
        规模的取值新增 0.65rem 与 1.5rem 两档。
     2) 冗余声明直接丢弃：padding:0.35em 0.65em 与 Bootstrap 5 的 .badge 默认值
        完全相同，属无效声明，替换时直接删去而不另建工具类。

   替换规则：仍沿用「全部声明均可映射才替换」，不可映射的内联样式保持原样，
             避免因部分替换造成观感漂移。
   ========================================================================== */

/* ---- 1. 字号：区间外新增两档（区间内见上条原则，就近收敛至既有阶梯）---- */
.qms-fs-2xs.qms-fs-2xs { font-size: 0.65rem; }  /* 10.4px */
.qms-fs-1p5.qms-fs-1p5 { font-size: 1.5rem; }   /* 24px */

/* ---- 2. 文本颜色：补齐纯白/纯黑（多用于徽章与按钮上的高对比文字）---- */
.qms-text-white.qms-text-white { color: #fff; }
.qms-text-black.qms-text-black { color: #000; }

/* ---- 3. 宽度：补齐 40/50px 与 26.67%（20%+26.67%*3 的明细表列宽组合）---- */
.qms-w-40.qms-w-40 { width: 40px; }
.qms-w-50.qms-w-50 { width: 50px; }
.qms-w-26p.qms-w-26p { width: 26.67%; }
.qms-w-50p.qms-w-50p { width: 50%; }

/* ---- 4. 高度：补齐空状态图标与紧凑控件常用的 32/40px ---- */
.qms-h-32.qms-h-32 { height: 32px; }
.qms-h-40.qms-h-40 { height: 40px; }

/* ---- 5. 内边距：拆出水平/垂直/单边档位，承接高频的双值写法 padding: Y X ---- */
.qms-px-0.qms-px-0 { padding-left: 0; padding-right: 0; }
.qms-px-1.qms-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.qms-px-2.qms-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.qms-px-3.qms-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.qms-px-4.qms-px-4 { padding-left: 1rem; padding-right: 1rem; }
.qms-py-0.qms-py-0 { padding-top: 0; padding-bottom: 0; }
.qms-py-1.qms-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.qms-py-2.qms-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.qms-py-3.qms-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.qms-py-4.qms-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.qms-pt-1.qms-pt-1 { padding-top: 0.25rem; }
.qms-pt-2.qms-pt-2 { padding-top: 0.5rem; }
.qms-pb-1.qms-pb-1 { padding-bottom: 0.25rem; }
.qms-pb-2.qms-pb-2 { padding-bottom: 0.5rem; }

/* ---- 6. 外边距：补齐左右两侧（此前仅有 mt/mb/m-0）---- */
.qms-ms-1.qms-ms-1 { margin-left: 0.25rem; }
.qms-ms-2.qms-ms-2 { margin-left: 0.5rem; }
.qms-ms-3.qms-ms-3 { margin-left: 0.75rem; }
.qms-me-1.qms-me-1 { margin-right: 0.25rem; }
.qms-me-2.qms-me-2 { margin-right: 0.5rem; }
.qms-me-3.qms-me-3 { margin-right: 0.75rem; }

/* ---- 7. 溢出 / 透明度 / 光标 / 显示 / 空白 ---- */
.qms-oy-auto.qms-oy-auto { overflow-y: auto; }
.qms-oy-hidden.qms-oy-hidden { overflow-y: hidden; }
.qms-opacity-40.qms-opacity-40 { opacity: 0.4; }   /* 空状态图标统一淡出 */
.qms-cursor-not-allowed.qms-cursor-not-allowed { cursor: not-allowed; }
.qms-d-inline.qms-d-inline { display: inline; }
.qms-pre-wrap.qms-pre-wrap { white-space: pre-wrap; }

/* ---- 8. 边框与圆角：走 --bs-border-color 令牌以适配深色模式 ---- */
.qms-border.qms-border { border: 1px solid var(--bs-border-color); }
.qms-border-0.qms-border-0 { border: 0; }
.qms-rounded-4.qms-rounded-4 { border-radius: 4px; }
.qms-rounded-20.qms-rounded-20 { border-radius: 20px; }
.qms-rounded-circle.qms-rounded-circle { border-radius: 50%; }

/* ==========================================================================
   QmsUI 工具类层 · 第五批（第四轮局部转换后仍残留的"干净且语义清晰"声明）
   --------------------------------------------------------------------------
   第四轮后剩余 457 条声明分散在 270 种取值，绝大多数低于 ≥6 阈值或为不可收敛值
   （z-index、font-family 打印体、linear-gradient、打印专用 border 等）。本批仅补
   录入"深色模式安全 + 语义清晰 + 频率接近阈值"的少量类，作为收口：
     - position:relative / opacity:0.3 / line-height:1.6：纯布局与排版，深色模式无关
     - font-family 等宽：代码/日志展示，深色模式无关
     - background-color:var(--bs-danger)：走 BS 令牌，深色模式自动适配
     - margin:0 auto：水平居中惯用法
     - padding:0.5em 1em：用 em 原样封装，保留相对字号行为，不强行并入 rem 阶梯
   ========================================================================== */

/* ---- 定位 / 透明度 / 行高：纯布局与排版，深色模式无关 ---- */
.qms-position-relative.qms-position-relative { position: relative; }
.qms-opacity-30.qms-opacity-30 { opacity: 0.3; }
.qms-lh-160.qms-lh-160 { line-height: 1.6; }

/* ---- 等宽字体：代码 / 日志展示 ---- */
.qms-font-mono.qms-font-mono { font-family: 'courier new', courier, monospace; }

/* ---- 背景色：走 BS 令牌以适配深色模式 ---- */
.qms-bg-danger.qms-bg-danger { background-color: var(--bs-danger); }

/* ---- 水平居中（margin:0 auto 惯用法）---- */
.qms-mx-auto.qms-mx-auto { margin-left: auto; margin-right: auto; }

/* ---- 按钮型内边距：用 em 原样封装，保留相对字号行为 ---- */
.qms-pad-btn.qms-pad-btn { padding: 0.5em 1em; }