/* ============================================================
 * dapanz.com · 用户标签组件 (.user-tag)
 *
 * 用途：全站登录态显示当前用户的 PERMISSION 标签（7 档）
 *   - index.php / user.php 顶栏
 *   - user.php 个人资料「角色」行
 *   - admin/index.php 顶栏（admin/assets/css/admin.css 同步追加）
 *
 * 7 档定义（与 api/auth.php getUserPermissionLabel() 一致）：
 *   99=监管员 / 90=审核员 / 80=研究员 / 50=分析员
 *   20=调查员 / 10=观测员 / 0=隐匿者
 *
 * 颜色按 WCAG AA 对比度调校（暗色背景适配 cyber-classic / admin-dark）
 * 单点定义：增删档位时同步修改 api/auth.php PERMISSION_LABELS 字典
 * ============================================================ */

/* ---- 基类 ---- */
.user-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.5px;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: opacity .2s;
    /* 暗色背景默认 fg；具体档位覆盖 color */
    color: var(--fg, #cfd8dc);
}
.user-tag:hover {
    opacity: 0.85;
}
.user-tag-icon {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}
.user-tag-label {
    font-size: 12px;
    line-height: 1;
}

/* ---- 7 档颜色（暗色背景调过，浅色 fg + 12% 透明底）---- */
.tag-perm-99 { /* 监管员：紫金 #9c27b0 */
    color: #ce93d8;
    border-color: rgba(156, 39, 176, 0.65);
    background: rgba(156, 39, 176, 0.12);
}
.tag-perm-90 { /* 审核员：金 #ff9800 */
    color: #ffb74d;
    border-color: rgba(255, 152, 0, 0.65);
    background: rgba(255, 152, 0, 0.12);
}
.tag-perm-80 { /* 研究员：蓝 #2196f3 */
    color: #64b5f6;
    border-color: rgba(33, 150, 243, 0.65);
    background: rgba(33, 150, 243, 0.12);
}
.tag-perm-50 { /* 分析员：青 #00bcd4 */
    color: #4dd0e1;
    border-color: rgba(0, 188, 212, 0.65);
    background: rgba(0, 188, 212, 0.12);
}
.tag-perm-20 { /* 调查员：橙 #ff5722 */
    color: #ff8a65;
    border-color: rgba(255, 87, 34, 0.65);
    background: rgba(255, 87, 34, 0.12);
}
.tag-perm-10 { /* 观测员：灰 #607d8b */
    color: #90a4ae;
    border-color: rgba(96, 125, 139, 0.65);
    background: rgba(96, 125, 139, 0.12);
}
.tag-perm-0  { /* 隐匿者：深灰 #37474f */
    color: #78909c;
    border-color: rgba(120, 144, 156, 0.55);
    background: rgba(55, 71, 79, 0.25);
}

/* ---- 尺寸变体 ---- */
.user-tag.user-tag-sm {
    padding: 1px 6px;
    font-size: 11px;
    gap: 3px;
}
.user-tag.user-tag-sm .user-tag-icon,
.user-tag.user-tag-sm .user-tag-label {
    font-size: 11px;
}

.user-tag.user-tag-lg {
    padding: 3px 12px;
    font-size: 13px;
    gap: 5px;
}
.user-tag.user-tag-lg .user-tag-icon,
.user-tag.user-tag-lg .user-tag-label {
    font-size: 13px;
}

/* ---- 顶栏模式（紧凑 + 与 hdr-badge / uc-userbar 同行不打架）---- */
.user-tag.user-tag-topbar {
    padding: 1px 7px;
    font-size: 11px;
    gap: 3px;
    /* 略缩小行高让顶栏对齐更自然 */
    line-height: 1.6;
}
.user-tag.user-tag-topbar .user-tag-icon,
.user-tag.user-tag-topbar .user-tag-label {
    font-size: 11px;
}

/* ---- 内联模式（next to user-name in admin/user 顶栏）---- */
.user-tag-inline {
    margin-left: 8px;
    vertical-align: middle;
}