/* 共享样式文件 - 包含所有页面通用的样式 */

/* CSS 变量定义 */
:root {
    /* 颜色变量 */
    --primary-color: #409eff;
    --primary-hover: #66b1ff;
    --success-color: #67c23a;
    --success-hover: #85ce61;
    --danger-color: #f56c6c;
    --danger-hover: #f78989;
    --warning-color: #e6a23c;
    --info-color: #909399;
    --text-primary: #303133;
    --text-secondary: #606266;
    --text-light: #909399;
    --border-color: #dcdfe6;
    --border-light: #ebeef5;
    --bg-light: #f5f7fa;
    --bg-white: #ffffff;
    
    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 边框半径 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
    
    /* 字体 */
    --font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 24px;
    
    /* 过渡 */
    --transition: all 0.3s ease;
    --admin-control-height: 34px;
    --admin-control-height-lg: 36px;
    --admin-control-padding-x: 12px;
    --admin-width-xs: 80px;
    --admin-width-sm: 120px;
    --admin-width-md: 180px;
    --admin-width-lg: 200px;
    --admin-width-xl: 250px;
    /* iframe 后台子页：外边距与顶栏标题（仅一处定义，避免各页叠边距） */
    --admin-page-outer-padding: var(--spacing-md);
    --admin-page-title-size: 17px;
}

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--bg-light);
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    min-height: 100vh;
}

/* 容器样式 */
.container {
    max-width: 100%;
    margin: var(--spacing-md);
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* 标题栏样式 */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.header p {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-md);
    opacity: 0.9;
}

.header-stats {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-md);
}

.header-stats strong {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* 按钮样式 */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 500;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

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

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

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

.btn-danger:hover {
    background: var(--danger-hover);
}

.btn-secondary {
    background: var(--bg-light);
    color: var(--text-light);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: #e6e8eb;
    border-color: #c0c4cc;
}

.btn-default {
    background: var(--bg-white);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-default:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: #ecf5ff;
}

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

.btn-success:hover {
    background: var(--success-hover);
}

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

.btn-warning:hover {
    filter: brightness(1.05);
}

/* 后台工具栏：加 admin-toolbar-action；图标键名写在 data-admin-toolbar-icon，由 shared.js hydrateAdminToolbarIcons 注入线框 SVG（动态插入的按钮需手动调用 hydrateAdminToolbarIcons(容器)） */
.btn.admin-toolbar-action {
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.admin-toolbar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* 用于行内图标（按钮内 flex + 普通文本场景） */
    display: inline-block;
    pointer-events: none;
}

/* 通用“emoji/文本图标”替换出来的 SVG */
.admin-emoji-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: -3px;
    display: inline-block;
    flex-shrink: 0;
    pointer-events: none;
}

/* 表格样式 */
.table-container {
    overflow-x: auto;
}

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

th {
    background: var(--bg-light);
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
}

td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

/* 表单样式 */
.form-item {
    margin-bottom: var(--spacing-md);
}

.form-item label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.form-item input,
.form-item select,
.form-item textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    transition: border-color 0.3s;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 消息提示样式 */
.message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 32px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 10000;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
    max-width: 400px;
    text-align: center;
}

.message.success {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #52c41a;
}

.message.error {
    background: #fff1f0;
    border: 1px solid #ffccc7;
    color: #ff4d4f;
}

.message.warning {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #faad14;
}

.message.info {
    background: #ecf5ff;
    border: 1px solid #adc6ff;
    color: #409eff;
}

/* 加载状态 */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-light);
}

/* 用户标签样式 */
.user-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #ecf5ff;
    color: var(--primary-color);
    border-radius: 10px;
    font-size: var(--font-size-sm);
    margin-right: 4px;
    margin-bottom: 4px;
}

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 徽章样式 */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--danger-color);
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/* 列设置样式 */
.column-toggle {
    position: relative;
}

.column-toggle-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        border: 1px solid var(--primary-color);
        border-radius: var(--border-radius-sm);
        background: var(--primary-color);
        color: white;
        font-size: var(--font-size-md);
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
    }
    
    .column-toggle-btn:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.column-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

.column-dropdown.show {
    display: block;
    animation: dropdownFadeIn 0.2s ease-out;
}

.column-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    transition: var(--transition);
}

.column-option:hover {
    color: var(--primary-color);
}

.column-option input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 表头宽度调整样式 */
th {
    position: relative;
    user-select: none;
}

/* 排序图标样式 */
.sort-icon {
    margin-left: 5px;
    font-size: 11px;
    color: #909399;
    opacity: 0.5;
    display: inline-block;
    transition: transform 0.2s;
}

th.sort-asc .sort-icon::after,
th.sort-desc .sort-icon::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

th.sort-asc .sort-icon::after {
    border-bottom: 6px solid var(--primary-color);
}

th.sort-desc .sort-icon::after {
    border-top: 6px solid var(--primary-color);
}

th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary-color);
}

.resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.2s;
}

.resize-handle:hover {
    background-color: var(--primary-color);
    opacity: 0.3;
}

th.resizing {
    background-color: rgba(64, 158, 255, 0.1);
}

/* 表格基础样式 */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}

/* 表头样式 */
th {
    background: var(--bg-light);
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
    position: relative;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th:hover {
    background: #edf2fc;
}

/* 单元格样式 */
td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    word-break: break-word;
    max-width: 300px;
}

/* 行悬停效果 */
tr:hover {
    background: var(--bg-light);
}

/* 排序图标样式 */
.sort-icon {
    margin-left: 5px;
    font-size: 11px;
    color: #909399;
    opacity: 0.5;
    display: inline-block;
    transition: all 0.2s;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    position: relative;
}

.sort-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

th.sort-asc .sort-icon::after {
    content: "↑";
    opacity: 1;
    color: var(--primary-color);
}

th.sort-desc .sort-icon::after {
    content: "↓";
    opacity: 1;
    color: var(--primary-color);
}

th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary-color);
}

/* 操作按钮样式 */
.action-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

/* admin 页面：行内操作列仅控制尺寸与对齐，颜色与 hover 与全局 .btn / .btn-* 一致 */
.admin-page .action-buttons {
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.admin-page .action-buttons .btn {
    padding: 0 var(--admin-control-padding-x);
    font-size: var(--font-size-sm);
    min-width: 64px;
    height: var(--admin-control-height);
    gap: 4px;
}

.action-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-white);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.action-btn:hover {
    background: var(--bg-light);
    border-color: var(--border-light);
}

.action-btn.edit,
.action-btn.view {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.action-btn.edit:hover,
.action-btn.view:hover {
    background: #ecf5ff;
}

.action-btn.copy {
    border-color: var(--success-color);
    color: var(--success-color);
}

.action-btn.copy:hover {
    background: #f0f9eb;
}

.action-btn.delete {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.action-btn.delete:hover {
    background: #fef0f0;
}

/* 表格工具栏样式 */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.table-info {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

/* 后台 iframe 页面统一头部：白底 + 左侧主色带 + 浅底统计标签 */
.header.admin-page-header {
    background: var(--bg-white);
    background-image: none;
    color: var(--text-primary);
    padding: 12px 16px 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 16px;
    row-gap: 10px;
    border-bottom: 1px solid var(--border-light);
    border-left: 4px solid var(--primary-color);
}

.header.admin-page-header h1 {
    margin: 0;
    font-size: var(--admin-page-title-size);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.header.admin-page-header h1 svg.admin-emoji-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -3px;
    background: rgba(64, 158, 255, 0.08);
    border: 1px solid rgba(64, 158, 255, 0.22);
    padding: 2px;
    border-radius: 6px;
}

.header.admin-page-header .header-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 10px;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.header.admin-page-header .header-stats span {
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.header.admin-page-header .header-stats strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 500px;
    padding: var(--spacing-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: var(--spacing-lg);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
}

/* ===========================
   Admin pages unified styles
   Enable by adding: <body class="admin-page">
   =========================== */
.admin-page {
    background: var(--bg-light);
    color: var(--text-secondary);
}

/* 子页外边距只由 body 内边距承担，.container 不再 margin，避免与 manage.css 等叠成「双份留白」 */
body.admin-page {
    padding: var(--admin-page-outer-padding);
    box-sizing: border-box;
}

.admin-page .container {
    margin: 0;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    background: var(--bg-white);
}

.admin-page .search-section {
    background: var(--bg-light);
    /* 左缘与 .header.admin-page-header 内标题对齐：4px 主色条 + 14px 内边距 */
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 18px;
    border-bottom: 1px solid var(--border-light);
}

/* 搜索栏内按钮：非主色用次要字色，主按钮保持白字（原 manage / quotes / shares 各写一份，此处统一） */
.admin-page .search-section .btn {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

.admin-page .search-section .btn-primary {
    color: white;
}

.admin-page .search-section .btn-success,
.admin-page .search-section .btn-danger,
.admin-page .search-section .btn-warning {
    color: #fff;
}

.admin-page .search-section .btn-secondary {
    color: var(--text-light);
}

.admin-page .search-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.admin-page .search-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.admin-page .search-item label {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    white-space: nowrap;
}

.admin-page .search-item .admin-w-80,
.admin-page .search-item .admin-w-120,
.admin-page .search-item .admin-w-180,
.admin-page .search-item .admin-w-200,
.admin-page .search-item .admin-w-250 {
    flex: 0 0 auto;
}

.admin-page .search-item input[type="text"],
.admin-page .search-item input[type="number"],
.admin-page .search-item input[type="date"],
.admin-page .search-item select {
    height: var(--admin-control-height);
    padding: 0 var(--admin-control-padding-x);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    outline: none;
    background: var(--bg-white);
}

.admin-page .btn {
    min-height: var(--admin-control-height);
    padding: 0 var(--admin-control-padding-x);
    gap: 6px;
}

.admin-page .search-item input:focus,
.admin-page .search-item select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.admin-page .table-section {
    padding: var(--spacing-md);
}

.admin-page .table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);
    background: var(--bg-white);
}

.admin-page .content-section {
    padding: var(--spacing-md);
}

/* admin 区块/卡片统一（用于清理行内样式） */
.admin-page .admin-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}
.admin-page .admin-section--soft {
    background: var(--bg);
}
.admin-page .admin-section-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* 模块/分区标题（如报价信息维护 section-title），与顶栏 h1 区分层级 */
.admin-page .section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(64, 158, 255, 0.07);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    line-height: 1.4;
}
.admin-page .admin-subtitle {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-light);
}
.admin-page .admin-subtitle svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    flex-shrink: 0;
}
.admin-page .admin-card {
    background: var(--panel);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
}
.admin-page .admin-card--muted { background: var(--bg); }
.admin-page .admin-card--warn { background: #fff8e6; border-color: #ffe8a6; }
.admin-page .admin-card--success { background: #f0f9eb; border-color: #cfe9c7; }

.admin-page .admin-pre {
    background: #263238;
    color: #aed581;
    padding: 12px 14px;
    border-radius: var(--border-radius-md);
    font-size: 13px;
    overflow-x: auto;
}

.admin-page .admin-scrollbox {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);
    padding: 10px;
    overflow-y: auto;
}

.admin-page .admin-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
}
.admin-page .admin-check-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.admin-page .admin-check-item label {
    cursor: pointer;
}

/* admin 规则编辑器 */
.admin-page .admin-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--panel);
    margin-bottom: 10px;
}
.admin-page .admin-rule-row select,
.admin-page .admin-rule-row input[type="number"] {
    height: var(--admin-control-height);
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    outline: none;
    background: var(--bg-white);
}
.admin-page .admin-rule-row select:focus,
.admin-page .admin-rule-row input[type="number"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}
.admin-page .admin-rule-type { width: 140px; }
.admin-page .admin-rule-resource { width: 220px; }
.admin-page .admin-rule-value { width: 90px; }
.admin-page .admin-icon-btn {
    height: var(--admin-control-height);
    min-width: var(--admin-control-height);
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.admin-page .admin-icon-btn:hover { filter: brightness(0.98); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.admin-page .admin-icon-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.admin-page .admin-icon-btn--danger { background: #f56c6c; color: #fff; }

.admin-page .admin-empty-hint {
    color: var(--text-light);
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.02);
    border: 1px dashed var(--border-light);
}
.admin-page .admin-preview-empty { color: var(--text-light); }
.admin-page .admin-preview-line { margin: 6px 0; }
.admin-page .admin-preview-type { font-weight: 700; }

/* admin 资源平衡结果 */
.admin-page .admin-balance-card {
    background: var(--panel);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    margin-top: 15px;
}
.admin-page .admin-balance-title {
    margin: 0 0 12px 0;
    color: var(--text);
}
.admin-page .admin-balance-empty { color: var(--text-light); }
.admin-page .admin-balance-item {
    margin: 8px 0;
    font-size: 14px;
}
.admin-page .admin-balance-item strong { font-weight: 700; }
.admin-page .admin-balance-detail-title {
    margin: 16px 0 12px 0;
    color: var(--text);
}
.admin-page .admin-balance-detail-card {
    margin: 10px 0;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.admin-page .admin-balance-chip {
    display: inline-block;
    margin-right: 10px;
}

/* admin 宽度小工具 */
.admin-page .admin-w-80 { width: var(--admin-width-xs); }
.admin-page .admin-w-120 { width: var(--admin-width-sm); }
.admin-page .admin-w-180 { width: var(--admin-width-md); }
.admin-page .admin-w-200 { width: var(--admin-width-lg); }
.admin-page .admin-w-250 { width: var(--admin-width-xl); }
.admin-page .admin-mt-10 { margin-top: 8px; }
.admin-page .admin-m-10y { margin: 8px 0; }

/* admin 双栏分割布局（指派/选择类页面） */
.admin-page .admin-split {
    display: flex;
    gap: 15px;
}
.admin-page .admin-split-col {
    flex: 1;
    min-width: 0;
}
.admin-page .admin-help-row {
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.admin-page .admin-pane-title {
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 600;
}
.admin-page .admin-pane-footer {
    margin-top: 10px;
    text-align: right;
}
.admin-page .admin-pane-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-light);
}

/* 资源规则管理 – 规则指派 */
.admin-page .admin-assign-card {
    padding: var(--spacing-md);
}
.admin-page .admin-assign-step-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 1px 2px rgba(64, 158, 255, 0.35);
}
.admin-page .admin-assign-step {
    gap: 10px;
}
.admin-page .admin-assign-step--stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.admin-page .admin-assign-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-page .admin-assign-step-head--spaced {
    margin-bottom: 12px;
}
.admin-page .admin-assign-step-label {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}
.admin-page .admin-assign-step--stack select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: var(--admin-control-height);
    padding: 0 var(--admin-control-padding-x);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    outline: none;
    background: var(--bg-white);
}
.admin-page .admin-assign-step--stack select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}
.admin-page .admin-assign-filters {
    display: grid;
    grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 10px;
}
.admin-page .admin-assign-filters .search-item {
    display: contents;
}
.admin-page .admin-assign-filters .search-item label {
    justify-self: end;
    text-align: right;
    font-weight: 500;
    color: var(--text-secondary);
}
.admin-page .admin-assign-filters .search-item select,
.admin-page .admin-assign-filters .search-item input[type="text"] {
    width: 100%;
    min-width: 0;
}
.admin-page .admin-assign-split.admin-split {
    align-items: stretch;
}
.admin-page .admin-assign-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.admin-page .admin-assign-pane .admin-help-row,
.admin-page .admin-assign-pane .admin-pane-title {
    flex-shrink: 0;
}
.admin-page .admin-assign-pane .admin-pane-footer {
    flex-shrink: 0;
    margin-top: auto;
}
.admin-page .admin-assign-pane .admin-assign-scroll {
    flex: 1 1 auto;
    min-height: 240px;
    max-height: none;
    overflow-y: auto;
}
.admin-page .admin-assign-submit {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    text-align: center;
}
.admin-page .admin-assign-scroll[aria-busy="true"] {
    opacity: 0.88;
    pointer-events: none;
}
.admin-page #assignSubmitBtn[aria-busy="true"] {
    cursor: wait;
}
.admin-page .admin-assign-parts-pagination {
    flex-shrink: 0;
    padding: 8px 4px 0;
    border-top: 1px solid var(--border-light);
}
.admin-page .admin-assign-parts-pager-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.admin-page .admin-assign-parts-pager-meta {
    font-size: 12px;
    color: var(--text-secondary);
}
@media (max-width: 768px) {
    .admin-page .admin-assign-split.admin-split {
        flex-direction: column;
    }
    .admin-page .admin-assign-filters {
        grid-template-columns: 1fr;
    }
    .admin-page .admin-assign-filters .search-item label {
        justify-self: start;
        text-align: left;
    }
}

.admin-page .admin-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.admin-page .admin-h3 {
    margin: 0;
    color: var(--text);
}

/* admin 弹窗统一样式 */
.admin-page .admin-modal-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.admin-page .admin-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: calc(100vw - 24px);
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    padding: 24px 28px 28px;
}
.admin-page .admin-modal-dialog--xl {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(1200px, 92vw);
    margin: 5vh auto;
    border-radius: var(--border-radius-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
}
.admin-page .admin-modal-title {
    margin: 0 0 20px 0;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}
.admin-page .admin-modal-field { margin-bottom: 16px; }
.admin-page .admin-modal-field--lg { margin-bottom: 20px; }
.admin-page .admin-modal-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
}
.admin-page .admin-modal-field .admin-required {
    margin-left: 2px;
    color: var(--danger-color);
    font-weight: 600;
}
.admin-page .admin-modal-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
}
.admin-page .admin-modal-help {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-light);
}
.admin-page .admin-modal-input,
.admin-page .admin-modal-select {
    width: 100%;
    min-height: var(--admin-control-height-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    line-height: 1.5;
    padding: 8px 12px;
    outline: none;
    box-sizing: border-box;
    background: var(--bg-white);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-page .admin-modal-input[type='number'] {
    font-variant-numeric: tabular-nums;
}
.admin-page .admin-modal-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    background: var(--bg-white);
    color: var(--text-primary);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-page .admin-modal-input:focus,
.admin-page .admin-modal-textarea:focus,
.admin-page .admin-modal-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}
.admin-page .admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}
.admin-page .btn-muted {
    background: var(--info-color);
    color: #fff;
}

/* admin 模板编辑弹窗 */
.admin-page .admin-modal-xscroll { overflow-y: auto; }
.admin-page .admin-modal-head-pad { padding: 20px 25px; }
.admin-page .admin-modal-body-pad {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
}
.admin-page .admin-template-top-row { margin-bottom: 12px; }
.admin-page .admin-parent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.admin-page .admin-template-main {
    flex: 1;
    overflow: hidden;
    min-height: 350px;
    gap: 0;
}
.admin-page .admin-template-pane {
    padding: 20px;
    overflow-y: auto;
}
.admin-page .admin-template-pane--preview {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    border-right: 1px solid var(--border-light);
}
.admin-page .admin-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.admin-page .admin-chip svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}
.admin-page .admin-chip--blue {
    background: #f0f7ff;
    color: #409eff;
    border-color: rgba(64, 158, 255, 0.35);
}
.admin-page .admin-chip--green {
    background: #f0f9eb;
    color: #67c23a;
    border-color: rgba(103, 194, 58, 0.35);
}
.admin-page .admin-chip--orange {
    background: #fff7e6;
    color: #e6a23c;
    border-color: rgba(230, 162, 60, 0.35);
}
.admin-page .admin-section-gap-sm { margin-bottom: 8px; }
.admin-page .admin-section-gap-md { margin-bottom: 12px; }
.admin-page .admin-section-gap-top-md { margin-top: 12px; }
.admin-page .admin-template-preview-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.admin-page .admin-template-empty {
    color: var(--text-light);
    text-align: center;
    padding: 30px;
}
.admin-page .admin-template-json {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    margin: 0;
    overflow-x: auto;
    max-height: 150px;
}
.admin-page .admin-template-rules { min-height: 200px; }
.admin-page .admin-parent-empty {
    color: var(--text-light);
    font-size: 13px;
}
.admin-page .admin-parent-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #e6a23c;
    background: rgba(230, 162, 60, 0.12);
    border-radius: 4px;
    font-size: 13px;
    color: #e6a23c;
}
.admin-page .admin-parent-tag-remove {
    margin-left: 6px;
    cursor: pointer;
    color: #e6a23c;
    font-weight: 700;
}
.admin-page .admin-template-rule-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
    background: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}
.admin-page .admin-template-rule-type,
.admin-page .admin-template-rule-resource,
.admin-page .admin-template-rule-value {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    padding: 8px;
}
.admin-page .admin-template-rule-type { flex: 1; }
.admin-page .admin-template-rule-resource { flex: 2; }
.admin-page .admin-template-rule-value { width: 70px; }
.admin-page .admin-template-rule-remove {
    background: #f56c6c;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.admin-page .admin-preview-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: #fff;
}
.admin-page .admin-preview-badge--inherit { background: #909399; }
.admin-page .admin-preview-badge--own { background: #409eff; }
.admin-page .admin-preview-group-gap { margin-bottom: 8px; }
.admin-page .admin-preview-group-gap-top { margin: 12px 0 8px 0; }
.admin-page .admin-preview-rule {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid #909399;
    background: #f5f7fa;
}
.admin-page .admin-preview-rule--inherited { opacity: 0.7; }
.admin-page .admin-preview-type-text { font-weight: 600; }
.admin-page .admin-preview-value-text { color: var(--text-secondary); }
.admin-page .admin-preview-value-text--strong { color: var(--text-primary); }

/* admin 表格内动态渲染工具类 */
.admin-page .admin-table-empty-cell {
    padding: 30px !important;
    text-align: center;
    color: var(--text-light);
}
.admin-page .admin-td-center { text-align: center; }
.admin-page .admin-td-code {
    font-weight: 500;
    color: var(--text-primary);
}
.admin-page .admin-td-muted {
    color: var(--text-light);
    font-size: 13px;
}
.admin-page .admin-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* 列表末列「操作」：左对齐，避免仅「编辑」一行与「编辑+删除」一行视觉不一致 */
.admin-page .scp-table .admin-row-actions,
.admin-page .ehp-table .admin-row-actions,
.admin-page .qes-table .admin-row-actions {
    justify-content: flex-start;
}
.admin-page .btn-xs {
    padding: 0 10px;
    font-size: 12px;
    min-height: var(--admin-control-height);
}
.admin-page .btn-copy {
    background: var(--info-color);
    color: #fff;
}
.admin-page .admin-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.admin-page .admin-tag--count {
    background: #ecf5ff;
    color: #409eff;
}
.admin-page .admin-tag--nodel {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    background: #f4f4f5;
    border: 1px dashed var(--border-color);
    user-select: none;
    cursor: default;
}
.admin-page .admin-table-rule-types td.admin-td-desc-wrap {
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    max-width: 42em;
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
}
.admin-page .admin-td-placeholder {
    color: var(--text-light);
}
.admin-page .admin-page-title-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    vertical-align: middle;
    color: currentColor;
}
.admin-page .admin-page-title-ico svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.admin-page .admin-ruletype-table-wrap {
    border-radius: var(--border-radius-sm);
}
.admin-page .admin-ruletype-color-cell {
    overflow: visible;
    text-overflow: clip;
}
/* 资源规则类型列表颜色列风格对齐角色标识列表：扁平文字标签 */
.admin-page .admin-table-rule-types .admin-ruletype-color-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}
.admin-page .admin-required { color: #f56c6c; }
.admin-page .admin-note-list {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
    padding-left: 20px;
}
.admin-page .admin-color-cyan { color: #409eff; }
.admin-page .admin-color-green { color: #67c23a; }
.admin-page .admin-color-orange { color: #e6a23c; }
.admin-page .admin-color-purple { color: #722ed1; }

.admin-page .admin-mb-20 { margin-bottom: 20px; }
.admin-page .admin-mb-15 { margin-bottom: 12px; }
.admin-page .admin-mb-10 { margin-bottom: 8px; }
.admin-page .admin-mt-20 { margin-top: 20px; }
.admin-page .admin-center { text-align: center; }
.admin-page .admin-color-input { width: 60px; height: var(--admin-control-height); }

.admin-page .admin-assign-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-light);
}
.admin-page .admin-part-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-page .admin-part-row--selected { background: #f0f9eb; }
.admin-page .admin-part-spec {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-page .admin-part-type {
    color: var(--text-light);
    font-size: 12px;
    margin-right: 8px;
}
.admin-page .admin-part-actions {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.admin-page .admin-added-tag {
    background: #67c23a;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}
.admin-page .admin-add-btn {
    background: #409eff;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1.2;
}
.admin-page .admin-add-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.admin-page .admin-selected-part-row {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-light);
}
.admin-page .admin-selected-part-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.admin-page .admin-selected-part-spec {
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-page .admin-remove-btn {
    background: none;
    border: none;
    color: #f56c6c;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}
.admin-page .admin-selected-part-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-light);
}
.admin-page .admin-scrollbox--parts { max-height: 280px; }
.admin-page .admin-scrollbox--selected {
    max-height: 350px;
    word-break: break-all;
}
.admin-page .admin-scrollbox--h180 { max-height: 180px; }
.admin-page .admin-scrollbox--h120 { max-height: 120px; }
.admin-page .admin-ruletype-color-chip {
    display: inline-block;
    width: 60px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background: var(--admin-dynamic-bg, #909399);
}
.admin-page .admin-preview-rule--dynamic {
    background: var(--admin-preview-rule-bg, #f5f7fa);
    border-left-color: var(--admin-preview-rule-border, #909399);
}
.admin-page .admin-preview-type-text--dynamic {
    color: var(--admin-preview-type-color, #909399);
}
.admin-page .admin-td-parent-has { color: #e6a23c; }
.admin-page .admin-td-parent-none { color: #909399; }
.admin-page .admin-preview-type-text--inherit { color: #909399; }
.admin-page .admin-meta-ok { color: #67c23a; }
.admin-page .admin-meta-bad { color: #f56c6c; }
.admin-page .admin-meta-role { color: #409eff; }
.admin-page .admin-meta-muted { color: #909399; }

/* admin 资源规则等页补充工具类 */
.admin-page .admin-my-20 { margin: 20px 0; }
.admin-page .admin-mt-15 { margin-top: 12px; }
.admin-page .admin-fs-12 { font-size: 12px; }
.admin-page .admin-note-list-compact {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
    padding-left: 20px;
}
.admin-page .admin-color-danger { color: #f56c6c; }
.admin-page .admin-balance-item--ok { color: #67c23a; }
.admin-page .admin-balance-item--bad { color: #f56c6c; }
.admin-page .admin-balance-chip--ok { color: #67c23a; }
.admin-page .admin-balance-chip--bad { color: #f56c6c; }

/* admin 统一模态框变体 */
.admin-page .admin-modal-compact {
    width: 420px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border: none;
}
.admin-page .admin-modal-medium {
    width: 450px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border: none;
}
.admin-page .admin-modal-large {
    width: 500px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border: none;
}

/* 配件信息维护：编辑配件模态框宽度加倍 */
#edit-part-modal .modal-content.admin-modal-large {
    width: min(96vw, 1000px);
    max-width: 1000px;
}
.admin-page .admin-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.admin-page .admin-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}
.admin-page .admin-modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.admin-page .admin-modal-body {
    padding: 24px;
}
.admin-page .admin-modal-body-scroll {
    max-height: 60vh;
    overflow-y: auto;
}
.admin-page .admin-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.admin-page .admin-form-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}
.admin-page .admin-form-input,
.admin-page .admin-form-select {
    width: 100%;
    height: var(--admin-control-height-lg);
    padding: 0 var(--admin-control-padding-x);
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.admin-page .admin-form-input[readonly] {
    background: #f9f9f9;
    color: #666;
}
.admin-page .admin-form-label-subtle {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.admin-page .admin-form-group { margin-bottom: 16px; }
.admin-page .admin-form-row {
    display: flex;
    gap: 16px;
}
.admin-page .admin-form-col {
    flex: 1;
    min-width: 0;
}
.admin-page .admin-panel-soft {
    margin-bottom: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}
.admin-page .admin-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}
.admin-page .admin-profile-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
}
.admin-page .admin-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
}
.admin-page .admin-profile-meta { margin-left: 16px; }
.admin-page .admin-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}
.admin-page .admin-profile-sub {
    font-size: 13px;
    color: #888;
}

.admin-page .admin-column-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
}
.admin-page .admin-column-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.admin-page .admin-column-row input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}
.admin-page .admin-column-row label {
    font-size: 14px;
    color: #606266;
}

/* user-manage 非模态框通用 */
.admin-page .admin-hidden { display: none; }
.admin-page .admin-ml-16 { margin-left: 16px; }
.admin-page .admin-hint-text {
    color: #666;
    font-size: 14px;
}
.admin-page .admin-th-60 { width: 60px; }
.admin-page .admin-th-80 { width: 80px; }
.admin-page .admin-th-100 { width: 100px; }
.admin-page .admin-th-120 { width: 120px; }
.admin-page .admin-th-140 { width: 140px; }
.admin-page .admin-th-150 { width: 150px; }
.admin-page .admin-th-180 { width: 180px; }
.admin-page .admin-th-280 { width: 280px; }
.admin-page .admin-th-340 { width: 340px; }
.admin-page .admin-td-center { text-align: center; }
.admin-page .admin-td-strong { font-weight: 500; }
.admin-page .admin-action-nowrap {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.admin-page .admin-dept-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    justify-content: center;
    align-items: center;
}
/* 资源规则管理–规则模板：操作列固定宽度 + 单行按钮，避免 overflow:visible 撑出横向滚动条 */
.admin-page #templateTable th.col-template-actions {
    width: 220px;
    min-width: 220px;
    box-sizing: border-box;
}
.admin-page #templateTable .admin-action-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.admin-page #templateTable .admin-row-actions {
    flex-wrap: nowrap;
    justify-content: center;
}
.admin-page #ruleTypeTable.table-wrapper,
.admin-page #roleTable.table-wrapper {
    overflow-x: hidden;
}
.admin-page #ruleTypeTable .admin-action-nowrap,
.admin-page #roleTable .admin-action-nowrap {
    width: 120px;
    min-width: 120px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.admin-page #ruleTypeTable .admin-row-actions,
.admin-page #roleTable .admin-row-actions {
    flex-wrap: nowrap;
    justify-content: center;
}
.admin-page .admin-btn-gap-right { margin-right: 4px; }
/* width utils are defined once in admin 宽度小工具 */

/* user-manage 页面样式迁移 */
.admin-page .tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e8e8e8;
}
.admin-page .tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.admin-page .tab-btn:hover { color: #333; }
.admin-page .tab-btn.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    font-weight: 500;
}
.admin-page .tab-content { animation: adminFadeIn 0.3s; }
@keyframes adminFadeIn { from { opacity: 0; } to { opacity: 1; } }

.admin-page .role-permissions-grid { display: grid; gap: 16px; }
.admin-page .role-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
}
.admin-page .role-users {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.admin-page .role-users-title { font-size: 13px; color: #666; margin-bottom: 8px; }
.admin-page .role-users-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-page .user-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f5ff;
    color: #1890ff;
    border-radius: 4px;
    font-size: 12px;
}
.admin-page .user-tag-more {
    display: inline-block;
    padding: 2px 8px;
    background: #f5f5f5;
    color: #999;
    border-radius: 4px;
    font-size: 12px;
}
.admin-page .user-tag-none { color: #999; font-size: 12px; font-style: italic; }
.admin-page .modal-content-lg { width: 520px; }

/* 宽版编辑模态（汇总预设 / 抬头 / 导出方案等）：统一为抬头方案同宽，纵向多给可视区 */
.admin-page .modal .modal-content.admin-modal-xwide {
    width: min(96vw, 1200px);
    max-width: 1200px;
}
.admin-page .modal .modal-content.admin-modal-xwide .admin-modal-body-scroll {
    max-height: min(78vh, 880px);
}

/* 用户与权限：添加/编辑用户（单列表单，沿用 xwide 的纵向可视区，宽度适中避免一行过长） */
.admin-page #addModal .modal-content.admin-modal-xwide,
.admin-page #editModal .modal-content.admin-modal-xwide {
    width: min(96vw, 720px);
    max-width: 720px;
}

/* 用户与权限：部门成员 / 添加用户到部门（表格列多，需明显宽于默认 520px） */
.admin-page #deptMembersModal .modal-content.admin-modal-xwide,
.admin-page #deptAddUsersModal .modal-content.admin-modal-xwide {
    width: min(96vw, 920px);
    max-width: 920px;
}

.admin-page .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.admin-page .status-badge.active { background: #f6ffed; color: #52c41a; }
.admin-page .status-badge.inactive { background: #fff1f0; color: #f5222d; }
.admin-page .status-badge.pending { background: #fff7e6; color: #fa8c16; }

/* admin：status-badge.normal / default-badge（quote-info-manage 专用） */
.admin-page .status-badge.normal {
    background: var(--bg-white);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.admin-page .status-badge.normal:hover {
    transform: translateY(-1px);
    color: var(--success-color);
    border-color: rgba(103, 194, 58, 0.4);
    background: #f0f9eb;
    box-shadow: 0 2px 6px rgba(103, 194, 58, 0.16);
}

.admin-page .default-badge {
    display: inline-block;
    background: #f0f9eb;
    color: #67c23a;
    border: 1px solid rgba(103, 194, 58, 0.35);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.admin-page .default-badge:hover {
    transform: translateY(-1px);
    background: #f0f9eb;
    border-color: rgba(103, 194, 58, 0.4);
    box-shadow: 0 2px 6px rgba(103, 194, 58, 0.16);
    color: #52c41a;
}

.admin-page .role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}
.admin-page .role-title { font-size: 16px; font-weight: 600; color: #333; }
.admin-page .role-title.super_admin { color: #fa541c; }
.admin-page .role-title.admin { color: #1890ff; }
.admin-page .role-title.data_admin { color: #52c41a; }
.admin-page .role-title.user { color: #999; }
.admin-page .role-desc { font-size: 13px; color: #666; margin-top: 4px; }
.admin-page .lock-icon {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--text-secondary, #8c8c8c);
}
.admin-page .lock-icon svg.admin-toolbar-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.admin-page .permissions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-page .permissions-list-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-page .permission-group {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafafa;
}
.admin-page .permission-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.admin-page .permission-group-title {
    font-size: 13px;
    font-weight: 600;
    color: #595959;
}
.admin-page .permission-group-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.admin-page .permission-group-actions .btn-sm {
    padding: 2px 8px;
    font-size: 12px;
}
.admin-page .role-perm-dirty-banner {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ffe58f;
    background: #fffbe6;
    color: #ad6800;
    font-size: 13px;
    font-weight: 500;
}
.admin-page .role-perm-toolbar-row {
    margin-top: 8px;
}
.admin-page .permission-item.disabled { opacity: 0.5; cursor: not-allowed; }
.admin-page .permission-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.admin-page .permission-item:hover { background: #e6f7ff; }
.admin-page .permission-item.checked {
    background: #e6f7ff;
    border: 1px solid #1890ff;
    color: #1890ff;
}
.admin-page .permission-item input { display: none; }
.admin-page .permission-item .check-icon {
    width: 14px;
    height: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}
.admin-page .permission-item.checked .check-icon {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
}
.admin-page .role-card.super-admin-card { border-left: 4px solid #fa541c; }
.admin-page .role-card.admin-card { border-left: 4px solid #1890ff; }
.admin-page .role-card.data-admin-card { border-left: 4px solid #52c41a; }
.admin-page .role-card.user-card { border-left: 4px solid #999; }

.admin-page table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-page th,
.admin-page td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* admin 表格列对齐/宽度工具类 */
.admin-page .col-left { text-align: left; }
.admin-page .col-center { text-align: center; }
.admin-page .col-right { text-align: right; }
.admin-page .col-w-50 { width: 50px; }
.admin-page .col-w-60 { width: 60px; }
.admin-page .col-w-90 { width: 90px; }
.admin-page .col-w-120 { width: 120px; }

.admin-page th {
    background: var(--bg-light);
    color: var(--text-primary);
    font-weight: 600;
}

.admin-page tbody tr:nth-child(odd) td {
    background: rgba(0, 0, 0, 0.01);
}

.admin-page tbody tr:hover td {
    background: rgba(64, 158, 255, 0.10);
}

.admin-page .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.admin-page .empty-state .icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.admin-page .empty-state .icon svg {
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-bottom: 0;
    opacity: 0.6;
}

/* 部分页面使用单独 empty-icon 容器（与 empty-state 类似） */
.admin-page .empty-icon svg {
    width: 48px;
    height: 48px;
    display: inline-block;
    opacity: 0.6;
}

/* 通用：section 标题/小标题带 svg 图标时统一尺寸 */
.admin-page .admin-section-title svg,
.admin-page h3.admin-section-title svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    flex-shrink: 0;
}
.admin-page .empty-state .icon svg {
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-bottom: 0;
    opacity: 0.6;
}

/* 部分页面使用单独 empty-icon 容器 */
.admin-page .empty-icon svg {
    width: 48px;
    height: 48px;
    display: inline-block;
    opacity: 0.6;
}

.admin-page .admin-section-title svg,
.admin-page h3.admin-section-title svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    flex-shrink: 0;
}

.admin-page .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.admin-page .pagination-info {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

.admin-page .page-btn {
    height: var(--admin-control-height);
    padding: 0 var(--admin-control-padding-x);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-white);
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.admin-page .page-btn:hover {
    border-color: #c0c4cc;
}

.admin-page .page-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.admin-page .page-btn:disabled {
    cursor: not-allowed;
    color: #c0c4cc;
    background: var(--bg-light);
}

.admin-page .page-size-select {
    height: var(--admin-control-height);
    padding: 0 var(--admin-control-padding-x);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-white);
    font-size: var(--font-size-sm);
    outline: none;
}

.admin-page .page-size-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.admin-page .admin-pagination-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.admin-page .admin-pagination-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-page .admin-pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-page .admin-pagination-size-label {
    font-size: 13px;
    color: #606266;
}
.admin-page .admin-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-page .page-btn-num {
    display: inline-block;
    min-width: 24px;
    text-align: center;
}
.admin-page .page-ellipsis {
    color: var(--text-light);
    padding: 0 4px;
}

/* admin：页面内二级 Tab（resource-attributes 等） */
.admin-page .admin-subnav {
    padding: 12px 16px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.admin-page .admin-subnav-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-page .admin-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--admin-control-height);
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition);
}
.admin-page .admin-tab-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.admin-page .admin-tab-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(64, 158, 255, 0.06);
}

.admin-page .admin-tab-btn.admin-tab-btn--active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    body.admin-page {
        padding: var(--spacing-sm);
    }

    .container {
        margin: var(--spacing-sm);
    }

    .admin-page .container {
        margin: 0;
    }
    
    .header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .header-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    th, td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
    
    .header.admin-page-header h1 {
        font-size: var(--font-size-md);
    }
    
    .modal-content {
        width: 95%;
        padding: var(--spacing-md);
    }
}

/* 全站轻提示（shared.js showMessage） */
.global-message-host {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 32px));
}

.global-message {
    pointer-events: auto;
    padding: 10px 14px;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    line-height: 1.45;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    word-break: break-word;
}

.global-message--show {
    opacity: 1;
    transform: translateX(0);
}

.global-message--success {
    background: #f0f9eb;
    color: #529b2e;
    border: 1px solid #cfe9c7;
}

.global-message--error {
    background: #fef0f0;
    color: #c45656;
    border: 1px solid #fbc4c4;
}

.global-message--warning {
    background: #fdf6ec;
    color: #b88230;
    border: 1px solid #f5dab1;
}

.global-message--info {
    background: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}