/* ==================================================================
   溪潮视觉规则层 v8 · 2026-10-19
   目标：解决「不清晰、对比不突出、不美观」
   1. 色彩收口 —— 散落的蓝橙红全部映射到令牌，杜绝自造色
   2. 层级建立 —— 标题/正文/辅助信息各有明确字号字重与颜色深度
   3. 对比强化 —— 卡片有边界与轻阴影，正文墨色加深，重要数据用主色点出
   4. 节奏统一 —— 一套圆角阶梯、一套间距阶梯
   ================================================================== */

/* ---------- 一、色彩收口 ---------- */
:root {
    /* 主色阶（收编 #7EB8E8 / #90CAF9 / #4A7BA8 / #2980B9 / #2E86C1 等） */
    --xc-primary:        #1A5276;
    --xc-primary-hover:  #21618C;
    --xc-primary-deep:   #154360;
    --xc-primary-mid:    #2E6E96;   /* 原 #4A7BA8 / #2980B9 */
    --xc-primary-soft:   #E8F0F7;
    --xc-primary-softer: #F2F7FB;   /* 原 #E6EFFB / #F8F9FA */
    --xc-primary-line:   #C8DCEB;
    --xc-primary-tint:   #A8CBE4;   /* 原 #7EB8E8 */

    /* 强调色（收编 #E67E22 橙） */
    --xc-accent:      #B9770E;
    --xc-accent-soft: #FDF4E3;
    --xc-accent-line: #EFDCB0;

    /* 语义色 */
    --xc-success:      #1E8449;
    --xc-success-soft: #E9F6EF;
    --xc-success-line: #C4E6D2;
    --xc-warn:         #B9770E;
    --xc-warn-soft:    #FDF6E7;
    --xc-danger:       #B03A3A;
    --xc-danger-soft:  #FCEDED;
    --xc-danger-line:  #EFC9C9;
    --xc-purple:       #5B4B8A;
    --xc-purple-soft:  #F0EEF7;

    /* 墨色四阶（原 #1A1A2E / #333 / #666 / #888 / #999 全部收编） */
    --xc-ink:    #1C2530;   /* 标题与强调文字，最深 */
    --xc-ink-2:  #38444F;   /* 正文 */
    --xc-ink-3:  #62707D;   /* 次要说明 */
    --xc-ink-4:  #8D99A5;   /* 辅助信息、占位 */

    /* 中性 */
    --xc-bg:        #F5F7F9;
    --xc-bg-2:      #EDF1F5;
    --xc-card:      #FFFFFF;
    --xc-line:      #DCE3E9;
    --xc-line-2:    #E9EEF2;

    /* 阴影阶梯（更克制，边界靠线条不靠阴影） */
    --xc-sh-xs: 0 1px 2px rgba(28,37,48,.05);
    --xc-sh-sm: 0 2px 6px rgba(28,37,48,.07);
    --xc-sh-md: 0 4px 12px rgba(28,37,48,.08);
    --xc-sh-lg: 0 8px 26px rgba(28,37,48,.11);

    /* 圆角阶梯（全站统一） */
    --xc-r-xs: 4px;
    --xc-r-sm: 6px;
    --xc-r:    8px;
    --xc-r-md: 10px;
    --xc-r-lg: 12px;
    --xc-r-xl: 16px;
    --xc-r-full: 999px;

    /* 间距阶梯 */
    --xc-s1: 4px;   --xc-s2: 8px;   --xc-s3: 12px;  --xc-s4: 16px;
    --xc-s5: 20px;  --xc-s6: 24px;  --xc-s7: 32px;  --xc-s8: 44px;
}

/* ---------- 二、正文层级（对比强化） ---------- */
body {
    color: var(--xc-ink-2);
    -webkit-font-smoothing: antialiased;
}

/* 标题：越靠上越深、越大 */
h1, h2, h3, h4, h5 { color: var(--xc-ink); letter-spacing: -.2px; }

/* 全站小标题统一 */
.page-title, .card-title, .section-title, h2, h3 {
    color: var(--xc-ink);
}

/* 标签与徽章：统一底+深字，保证在浅底上可读 */
.badge, .tag, .label, .status, .pill, .chip {
    border-radius: var(--xc-r-full);
    font-weight: 500;
    letter-spacing: .2px;
}

/* ---------- 三、卡片：靠边界，不靠阴影 ---------- */
.card, .panel, .box, .item-card, .stat-card, .info-card {
    background: var(--xc-card);
    border: 0.5px solid var(--xc-line);
    border-radius: var(--xc-r-lg);
    box-shadow: var(--xc-sh-xs);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover, .panel:hover, .info-card:hover {
    border-color: var(--xc-primary-line);
    box-shadow: var(--xc-sh-md);
}

/* ---------- 四、表格：行分隔清楚，表头有底 ---------- */
table {
    border-collapse: separate;
    border-spacing: 0;
}
thead th, th {
    background: var(--xc-bg-2);
    color: var(--xc-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--xc-line);
}
tbody td, td {
    border-bottom: 0.5px solid var(--xc-line-2);
    color: var(--xc-ink-2);
}
tbody tr:hover td { background: var(--xc-primary-softer); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 五、按钮：主次分明 ---------- */
.btn, button, .btn-primary, .btn-secondary {
    border-radius: var(--xc-r);
    font-weight: 500;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.btn-primary, .btn-primary:visited {
    background: var(--xc-primary);
    border-color: var(--xc-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--xc-primary-hover);
    border-color: var(--xc-primary-hover);
    box-shadow: var(--xc-sh-sm);
}
.btn-secondary {
    background: var(--xc-card);
    border: 0.5px solid var(--xc-line);
    color: var(--xc-ink-2);
}
.btn-secondary:hover {
    border-color: var(--xc-primary);
    color: var(--xc-primary);
}

/* ---------- 六、表单：聚焦有反馈 ---------- */
input, textarea, select {
    background: var(--xc-card);
    color: var(--xc-ink);
    border: 0.5px solid var(--xc-line);
    border-radius: var(--xc-r);
    transition: border-color .16s, box-shadow .16s;
}
input::placeholder, textarea::placeholder { color: var(--xc-ink-4); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--xc-primary);
    box-shadow: 0 0 0 3px rgba(26,82,118,.12);
}

/* ---------- 七、关键数据突出 ---------- */
.stat-num, .stat-value, .num, .count {
    color: var(--xc-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

/* ---------- 八、链接 ---------- */
a { color: var(--xc-primary); }
a:hover { color: var(--xc-primary-hover); }

/* ==================================================================
   散落自造色收口映射
   把页面里硬写的浅蓝/中蓝/橙/红统一到令牌，彻底消除同色多深浅
   ================================================================== */

/* 蓝色家族 → 主色阶 */
.is-blue, .badge-blue, .tag-blue,
.el-tag--info, .xc-badge-info {
    background: var(--xc-primary-soft) !important;
    color: var(--xc-primary-deep) !important;
    border-color: var(--xc-primary-line) !important;
}
.is-blue-light {
    background: var(--xc-primary-softer) !important;
    color: var(--xc-primary) !important;
}

/* 橙色家族 → 强调色 */
.is-orange, .badge-orange, .tag-orange, .el-tag--warning {
    background: var(--xc-accent-soft) !important;
    color: var(--xc-accent) !important;
    border-color: var(--xc-accent-line) !important;
}

/* 红色家族 → 危险色 */
.is-red, .badge-red, .tag-red, .el-tag--danger {
    background: var(--xc-danger-soft) !important;
    color: var(--xc-danger) !important;
    border-color: var(--xc-danger-line) !important;
}

/* 绿色家族 → 成功色 */
.is-green, .badge-green, .tag-green, .el-tag--success {
    background: var(--xc-success-soft) !important;
    color: var(--xc-success) !important;
    border-color: var(--xc-success-line) !important;
}

/* Element UI 主色（原先的 #409EFF 系列）统一到溪潮主色 */
.el-button--primary, .el-tag {
    background: var(--xc-primary);
    border-color: var(--xc-primary);
}
.el-button--primary:hover { background: var(--xc-primary-hover); }

/* ---------- 九、文本对比强化 ---------- */
.text-muted, .muted, .sub, .hint, .desc { color: var(--xc-ink-3) !important; }
.text-light, .light, .placeholder { color: var(--xc-ink-4) !important; }
.text-strong, .strong { color: var(--xc-ink) !important; font-weight: 500; }
.text-primary { color: var(--xc-primary) !important; }
.text-danger { color: var(--xc-danger) !important; }
.text-success { color: var(--xc-success) !important; }
.text-warn { color: var(--xc-warn) !important; }

/* ---------- 十、打印：去掉交互装饰 ---------- */
@media print {
    .btn, button, .no-print { display: none !important; }
    .card, .panel { box-shadow: none !important; border: 0.5px solid #ccc !important; }
    body { background: #fff; }
}

/* ==================================================================
   首页动作卡 · 对比强化
   原来图标用浅色描边、卡片背景与页面底色接近，视觉上"糊"在一起
   ================================================================== */
.action-cards{
    gap:var(--xc-s3);
}
.action-card{
    border:0.5px solid var(--xc-line)!important;
    background:var(--xc-card)!important;
    border-radius:var(--xc-r-lg)!important;
    box-shadow:var(--xc-sh-xs);
    padding:18px 14px!important;
}
.action-card:hover{
    box-shadow:var(--xc-sh-md)!important;
    transform:translateY(-2px);
}

/* 图标：加粗描边 + 用所属语义色的深一档，不再是浅灰 */
.action-card .action-icon,
.action-card .xc-ico{
    stroke-width:2!important;
    opacity:1!important;
    filter:none!important;   /* 抵消可能存在的降饱和处理 */
}
.action-submit .action-icon,.action-submit .xc-ico{color:var(--xc-primary)!important;stroke:var(--xc-primary)!important}
.action-track  .action-icon,.action-track  .xc-ico{color:var(--xc-primary-mid)!important;stroke:var(--xc-primary-mid)!important}
.action-my     .action-icon,.action-my     .xc-ico{color:var(--xc-accent)!important;stroke:var(--xc-accent)!important}
.action-claim  .action-icon,.action-claim  .xc-ico{color:var(--xc-success)!important;stroke:var(--xc-success)!important}
.action-announce .action-icon,.action-announce .xc-ico{color:var(--xc-danger)!important;stroke:var(--xc-danger)!important}

/* 卡标题：加深加粗，与图标形成层级 */
.action-card b,.action-card strong,.action-card .ac-title{
    color:var(--xc-ink)!important;
    font-weight:600!important;
}
.action-card span:not(.action-icon),
.action-card small{
    color:var(--xc-ink-3)!important;
}

/* 顶部色条：给每张卡一个身份标识 */
.action-card{
    position:relative;
    overflow:hidden;
}
.action-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
}
.action-submit::before   {background:var(--xc-primary)}
.action-track::before    {background:var(--xc-primary-mid)}
.action-my::before       {background:var(--xc-accent)}
.action-claim::before    {background:var(--xc-success)}
.action-announce::before {background:var(--xc-danger)}

/* ==================================================================
   首页统计卡 · 对比强化
   ================================================================== */
.stat-card{
    border:0.5px solid var(--xc-line)!important;
    border-radius:var(--xc-r-lg)!important;
    box-shadow:var(--xc-sh-xs);
    background:var(--xc-card)!important;
    position:relative;overflow:hidden;
}
.stat-card:hover{box-shadow:var(--xc-sh-sm)!important;transform:translateY(-1px)}
.stat-card .num,.stat-card .n,.stat-card .stat-num{
    color:var(--xc-primary)!important;
    font-weight:600!important;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.6px;
}
.stat-card .label,.stat-card .l,.stat-card small{
    color:var(--xc-ink-3)!important;
}
/* 左侧语义色条 */
.stat-card::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--xc-primary-tint);
}
.stat-card.s-total::after{background:var(--xc-primary)}
.stat-card.s-review::after{background:var(--xc-accent)}
.stat-card.s-approve::after{background:var(--xc-warn)}
.stat-card.s-pass::after{background:var(--xc-success)}
.stat-card.s-doing::after{background:var(--xc-primary-mid)}
.stat-card.s-done::after{background:var(--xc-success)}