/**
 * 先手共创 HRM - 全站标签统一样式表 v2.0
 * update_v12 | 2026-07-10
 * 
 * 管理范围：角色标签 / 状态标签 / 操作类型徽章 / 审核类型标签 / 
 *          收益比例标签 / 支付标签 / 通用 Bootstrap badge 圆角覆盖
 * 
 * 引用方式：在 header.php 中 mobile.css 之后引入
 * <link rel="stylesheet" href="/assets/css/tags.css">
 */

/* ============================================
   一、全局圆角覆盖 - Bootstrap .badge 统一圆角
   让所有使用 badge bg-xxx 的标签都有圆角
   ============================================ */
.badge {
    border-radius: 6px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}

/* ============================================
   二、角色标签（Role Tags）
   用于：users.php / interview/all.php / interview/list.php / audit.php 等
   支持两种命名方式：m-role-{role_key} 和短类名 sa/admin/branch/partner/emp
   ============================================ */

.m-role-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* 命名方式A：完整角色名 m-role-{role_key} */
.m-role-tag.m-role-super_admin {
    background: rgba(124, 58, 237, 0.15);
    color: #7C3AED;
}
.m-role-tag.m-role-admin {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}
.m-role-tag.m-role-branch {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}
.m-role-tag.m-role-partner {
    background: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}
.m-role-tag.m-role-employee {
    background: rgba(20, 184, 166, 0.15);
    color: #0D9488;
}
.m-role-tag.m-role-secondary {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

/* 命名方式B：短类名（resume/index.php 用） */
.m-role-tag.sa      { background: rgba(124, 58, 237, 0.15); color: #7C3AED; }
.m-role-tag.admin   { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.m-role-tag.branch  { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.m-role-tag.partner { background: rgba(59, 130, 246, 0.15); color: #2563EB; }
.m-role-tag.emp     { background: rgba(20, 184, 166, 0.15); color: #0D9488; }


/* ============================================
   三、状态标签（Status Tags）
   用于：面试状态、审核状态、计费状态、账号状态等
   ============================================ */

.m-status-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.m-status-success   { background: #d1fae5; color: #059669; }
.m-status-danger    { background: #fee2e2; color: #dc2626; }
.m-status-warning   { background: #fef3c7; color: #d97706; }
.m-status-info      { background: #dbeafe; color: #2563eb; }
.m-status-primary   { background: #ede9fe; color: #7c3aed; }
.m-status-secondary { background: #f3f4f6; color: #6b7280; }
.m-status-cyan      { background: #cffafe; color: #0891b2; }


/* ============================================
   四、操作类型标签（Operation Type Tags）
   用于：login_logs.php / logs.php 等操作日志页面
   按操作性质分色：成功操作=绿 / 退出=橙 / 失败=红 / 修改=蓝 / 删除=深灰
   ============================================ */

.m-op-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 登录 - 绿色（正常操作） */
.m-op-tag.m-op-login {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
/* 退出 - 橙色（离开） */
.m-op-tag.m-op-logout {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}
/* 登录失败 - 红色 */
.m-op-tag.m-op-fail,
.m-op-tag.m-op-login_fail {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}
/* 修改 - 蓝色 */
.m-op-tag.m-op-edit {
    background: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}
/* 删除 - 深灰色 */
.m-op-tag.m-op-delete {
    background: rgba(75, 85, 99, 0.15);
    color: #374151;
}
/* 审核通过 - 绿色 */
.m-op-tag.m-op-approve,
.m-op-tag.m-op-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
/* 审核拒绝 - 红色 */
.m-op-tag.m-op-reject,
.m-op-tag.m-op-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}
/* 面试报名 - 紫色 */
.m-op-tag.m-op-signup {
    background: rgba(124, 58, 237, 0.15);
    color: #7C3AED;
}
/* 已入职 - 深绿色 */
.m-op-tag.m-op-onboard {
    background: rgba(5, 150, 105, 0.15);
    color: #065F46;
}
/* 清空 - 灰色 */
.m-op-tag.m-op-clear {
    background: rgba(107, 114, 128, 0.12);
    color: #6B7280;
}


/* ============================================
   五、审核类型标签（Audit Type Tags）
   用于：audit_logs.php / audit.php 审核记录页
   ============================================ */

.m-type-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
}

.m-type-register { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.m-type-edit     { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.m-type-delete   { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.m-type-login    { background: rgba(20, 184, 166, 0.12); color: #0D9488; }
.m-type-logout   { background: rgba(108, 117, 125, 0.12); color: #6c757d; }
.m-type-fail     { background: rgba(239, 68, 68, 0.12); color: #EF4444; }


/* ============================================
   六、收益比例标签（Rate Tags）
   用于：users.php PC端表格 / billingaudit 等
   比例越高颜色越深（绿色渐变）
   ============================================ */

.m-badge-rate {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1.4;
    text-align: center;
    min-width: 40px;
}

.m-badge-rate.rate-0  { background: #e9ecef; color: #6c757d; }
.m-badge-rate.rate-50 { background: #d1fae5; color: #065f46; }
.m-badge-rate.rate-60 { background: #a7f3d0; color: #065f46; }
.m-badge-rate.rate-70 { background: #6ee7b7; color: #064e3b; }
.m-badge-rate.rate-80 { background: #34d399; color: #064e3b; }
.m-badge-rate.rate-90 { background: #10b981; color: #fff; }


/* ============================================
   七、卡片徽章（Card Badges）
   用于：mobile 卡片内的各类小标签
   ============================================ */

.m-card-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
}

.m-card-badge.badge-success   { background: #d1fae5; color: #059669; }
.m-card-badge.badge-secondary { background: #f3f4f6; color: #6b7280; }
.m-card-badge.badge-danger    { background: #fee2e2; color: #dc2626; }
.m-card-badge.badge-warning   { background: #fef3c7; color: #d97706; }
.m-card-badge.badge-info      { background: #dbeafe; color: #2563eb; }
.m-card-badge.badge-primary   { background: #ede9fe; color: #7c3aed; }


/* ============================================
   八、支付方式标签（Payment Tags）
   用于：payment_orders.php
   ============================================ */

.m-pay-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.4;
}

.m-pay-tag.m-pay-alipay  { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.m-pay-tag.m-pay-wechat  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.m-pay-tag.m-pay-other   { background: rgba(108, 117, 125, 0.12); color: #6c757d; }


/* ============================================
   九、列表图标颜色（Card Info Icons）
   用于：移动端卡片列表中不同含义的图标颜色区分
   ============================================ */

.m-card-info i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
}

/* 用户/姓名 - 蓝色 */
.m-card-info .fa-user { color: #3B82F6; }
/* 金额/比例 - 绿色 */
.m-card-info .fa-percent,
.m-card-info .fa-coins,
.m-card-info .fa-money-bill { color: #10B981; }
/* 上级/管理 - 紫色 */
.m-card-info .fa-user-tie { color: #7C3AED; }
/* 状态正常 - 绿色 */
.m-card-info .fa-circle-check { color: #10B981; }
/* 状态异常 - 红色 */
.m-card-info .fa-circle-xmark { color: #EF4444; }
/* 时间/日期 - 灰色 */
.m-card-info .fa-clock,
.m-card-info .fa-calendar { color: #9CA3AF; }
/* 电话 - 青色 */
.m-card-info .fa-phone { color: #06B6D4; }
/* 公司/企业 - 橙色 */
.m-card-info .fa-building { color: #F59E0B; }
/* 位置/城市 - 蓝紫色 */
.m-card-info .fa-location-dot,
.m-card-info .fa-map-location-dot { color: #6366F1; }
/* 职位 - 靛蓝 */
.m-card-info .fa-briefcase { color: #4F46E5; }
/* 邮箱 - 粉色 */
.m-card-info .fa-envelope { color: #EC4899; }
/* 搜索 - 灰色 */
.m-card-info .fa-magnifying-glass { color: #9CA3AF; }
/* 收藏/星标 - 金色 */
.m-card-info .fa-star,
.m-card-info .fa-heart { color: #F59E0B; }
/* 日志/内容 - 灰色 */
.m-card-info .fa-file-lines,
.m-card-info .fa-clipboard { color: #6B7280; }
/* 链接 - 蓝色 */
.m-card-info .fa-link { color: #3B82F6; }
/* 数量/统计 - 蓝紫色 */
.m-card-info .fa-hashtag { color: #6366F1; }


/* ============================================
   十、移动端自适应缩小
   ============================================ */

@media (max-width: 768px) {
    .m-role-tag {
        padding: 2px 8px;
        font-size: 11px;
    }
    .m-status-tag {
        padding: 2px 8px;
        font-size: 11px;
    }
    .m-op-tag {
        padding: 2px 8px;
        font-size: 10px;
    }
    .m-type-tag {
        padding: 1px 6px;
        font-size: 10px;
    }
    .m-badge-rate {
        padding: 2px 8px;
        font-size: 11px;
        min-width: 36px;
    }
    .m-card-badge {
        padding: 2px 8px;
        font-size: 10px;
    }
    .m-pay-tag {
        padding: 2px 8px;
        font-size: 10px;
    }
    .badge {
        font-size: 11px !important;
    }
}

/* 超小屏幕进一步缩小 */
@media (max-width: 375px) {
    .m-role-tag  { padding: 1px 6px; font-size: 10px; }
    .m-status-tag { padding: 1px 6px; font-size: 10px; }
    .m-op-tag    { padding: 1px 6px; font-size: 9px; }
}


/* ============================================
   十一、浅色主题适配
   ============================================ */

[data-theme="light"] .m-role-tag.m-role-super_admin,
[data-theme="light"] .m-role-tag.sa {
    background: rgba(124, 58, 237, 0.1);
}
[data-theme="light"] .m-role-tag.m-role-admin,
[data-theme="light"] .m-role-tag.admin {
    background: rgba(239, 68, 68, 0.1);
}
[data-theme="light"] .m-role-tag.m-role-branch,
[data-theme="light"] .m-role-tag.branch {
    background: rgba(245, 158, 11, 0.1);
}
[data-theme="light"] .m-role-tag.m-role-partner,
[data-theme="light"] .m-role-tag.partner {
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .m-role-tag.m-role-employee,
[data-theme="light"] .m-role-tag.emp {
    background: rgba(20, 184, 166, 0.1);
}

[data-theme="light"] .m-status-success   { background: #ecfdf5; }
[data-theme="light"] .m-status-danger    { background: #fef2f2; }
[data-theme="light"] .m-status-warning   { background: #fffbeb; }
[data-theme="light"] .m-status-info      { background: #eff6ff; }
[data-theme="light"] .m-status-primary   { background: #f5f3ff; }
[data-theme="light"] .m-status-secondary { background: #f9fafb; }


/* ============================================
   十二、PC端 Bootstrap badge 统一覆盖
   覆盖所有 badge bg-{color} 的配色和圆角
   只覆盖 .badge.bg-xxx 组合，不影响 bg-xxx 在其他地方的使用
   ============================================ */

.badge.bg-success  { background-color: #d1fae5 !important; color: #059669 !important; border-radius: 6px !important; }
.badge.bg-danger   { background-color: #fee2e2 !important; color: #dc2626 !important; border-radius: 6px !important; }
.badge.bg-warning  { background-color: #fef3c7 !important; color: #d97706 !important; border-radius: 6px !important; }
.badge.bg-info     { background-color: #dbeafe !important; color: #2563eb !important; border-radius: 6px !important; }
.badge.bg-primary  { background-color: #ede9fe !important; color: #7c3aed !important; border-radius: 6px !important; }
.badge.bg-secondary { background-color: #f3f4f6 !important; color: #6b7280 !important; border-radius: 6px !important; }

/* 自定义角色色（audit.php / billing_audit.php 修复后用） */
.badge.bg-super_admin { background-color: rgba(124, 58, 237, 0.15) !important; color: #7C3AED !important; border-radius: 6px !important; }
.badge.bg-admin       { background-color: rgba(239, 68, 68, 0.15) !important; color: #EF4444 !important; border-radius: 6px !important; }
.badge.bg-branch      { background-color: rgba(245, 158, 11, 0.15) !important; color: #D97706 !important; border-radius: 6px !important; }
.badge.bg-partner     { background-color: rgba(59, 130, 246, 0.15) !important; color: #2563EB !important; border-radius: 6px !important; }
.badge.bg-employee    { background-color: rgba(20, 184, 166, 0.15) !important; color: #0D9488 !important; border-radius: 6px !important; }

/* 兼容旧命名（不改PHP也能正常显示） */
.badge.bg-super { background-color: rgba(124, 58, 237, 0.15) !important; color: #7C3AED !important; border-radius: 6px !important; }

/* badge-rate 圆角 */
.badge-rate { border-radius: 10px !important; }