/* ============================================================
   清华苑智检 V1.2 · UI 设计系统扩展
   覆盖：角色徽章 · 项目状态 · 页头面包屑 · 工作台布局
         活动流 · 快捷操作卡 · 审核流程组件
   ============================================================ */

/* ── 角色色彩系统 ─────────────────────────────────────────────── */
:root {
  --role-exec:    #7C3AED;   /* gm / deputy_gm */
  --role-tech:    #0369A1;   /* tech_director  */
  --role-quality: #065F46;   /* quality_director */
  --role-pmo:     #D97706;   /* pmo            */
  --role-admin:   #475569;   /* admin          */
  --role-rd:      #0F766E;   /* rd_center      */
  --role-member:  #374151;   /* member         */
  --role-client:  #9CA3AF;   /* client         */

  /* 项目状态色 */
  --s-opp:      #2563EB;   /* S1 商机 */
  --s-contract: #6D28D9;   /* S2 合同 */
  --s-setup:    #0F766E;   /* S3 立项 */
  --s-onsite:   #0369A1;   /* S4 外业 */
  --s-data:     #D97706;   /* S5 数据 */
  --s-report:   #B45309;   /* S6 报告 */
  --s-review:   #DC2626;   /* S7 审核 */
  --s-archive:  #16A34A;   /* S8 归档 */
  --s-payment:  #15803D;   /* S9 收款 */
  --s-closed:   #6B7280;   /* S10 关闭 */
}

/* ── 角色徽章 chip ────────────────────────────────────────────── */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.role-exec    { background: #EDE9FE; color: var(--role-exec); }
.role-tech    { background: #E0F2FE; color: var(--role-tech); }
.role-quality { background: #D1FAE5; color: var(--role-quality); }
.role-pmo     { background: #FEF3C7; color: var(--role-pmo); }
.role-admin   { background: #F1F5F9; color: var(--role-admin); }
.role-rd      { background: #CCFBF1; color: var(--role-rd); }
.role-member  { background: #F3F4F6; color: var(--role-member); }
.role-client  { background: #F9FAFB; color: var(--role-client); }

/* ── 项目状态徽章 ────────────────────────────────────────────── */
.s-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.s1 { background: #EFF6FF; color: var(--s-opp); }
.s2 { background: #F5F3FF; color: var(--s-contract); }
.s3 { background: #F0FDFA; color: var(--s-setup); }
.s4 { background: #E0F2FE; color: var(--s-onsite); }
.s5 { background: #FFFBEB; color: var(--s-data); }
.s6 { background: #FEF3C7; color: var(--s-report); }
.s7 { background: #FEF2F2; color: var(--s-review); }
.s8 { background: #F0FDF4; color: var(--s-archive); }
.s9 { background: #DCFCE7; color: var(--s-payment); }
.s10 { background: #F3F4F6; color: var(--s-closed); }

/* ── 页面头部（面包屑 + 标题 + 操作区） ─────────────────────── */
.v12-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.v12-page-head-left { flex: 1; min-width: 0; }

.v12-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.v12-breadcrumb a { color: var(--muted); }
.v12-breadcrumb a:hover { color: var(--accent); }
.v12-breadcrumb .sep { opacity: .4; }

.v12-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.v12-page-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.v12-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── 工作台布局（上部 KPI 行 + 主内容网格） ─────────────────── */
.v12-wb-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .v12-wb-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .v12-wb-kpi-row { grid-template-columns: 1fr 1fr; }
}

/* KPI 数字卡 (V1.2 统一版) */
.v12-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  border-top: 3px solid var(--accent);
  position: relative;
  overflow: hidden;
}
.v12-kpi.kpi-purple { border-top-color: var(--role-exec); }
.v12-kpi.kpi-green  { border-top-color: var(--ok); }
.v12-kpi.kpi-amber  { border-top-color: var(--warn); }
.v12-kpi.kpi-red    { border-top-color: var(--danger); }
.v12-kpi.kpi-teal   { border-top-color: var(--role-rd); }

.v12-kpi-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.v12-kpi-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
}
.v12-kpi-delta {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.v12-kpi-delta.up   { color: var(--ok); }
.v12-kpi-delta.down { color: var(--danger); }
.v12-kpi-icon {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 24px;
  opacity: .12;
}

/* ── 工作台主内容网格 ─────────────────────────────────────────── */
.v12-wb-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .v12-wb-grid { grid-template-columns: 1fr; }
}

/* ── 卡片头部（带强调线） ────────────────────────────────────── */
.v12-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.v12-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.v12-card-head a {
  font-size: 12px;
  color: var(--muted);
}
.v12-card-head a:hover { color: var(--accent); }

/* ── 列表行 ──────────────────────────────────────────────────── */
.v12-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #F1F5F9;
  gap: 8px;
  min-width: 0;
}
.v12-list-row:last-child { border-bottom: none; }
.v12-list-row .primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.v12-list-row .secondary {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.v12-list-row .meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 活动流 / 时间线 ─────────────────────────────────────────── */
.v12-timeline { padding: 0; margin: 0; list-style: none; }
.v12-timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
  position: relative;
}
.v12-timeline-item:last-child { border-bottom: none; }
.v12-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.v12-timeline-dot.green  { background: var(--ok); }
.v12-timeline-dot.amber  { background: var(--warn); }
.v12-timeline-dot.red    { background: var(--danger); }
.v12-timeline-dot.purple { background: var(--role-exec); }
.v12-timeline-content { font-size: 12.5px; color: var(--ink); flex: 1; min-width: 0; }
.v12-timeline-time { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ── 快捷操作卡 ──────────────────────────────────────────────── */
.v12-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .v12-action-grid { grid-template-columns: repeat(2, 1fr); }
}
.v12-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  line-height: 1.3;
}
.v12-action-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(56,189,248,.12);
  transform: translateY(-1px);
  color: var(--ink);
}
.v12-action-icon {
  font-size: 22px;
  display: block;
  line-height: 1;
}

/* ── 审核流程进度条 ──────────────────────────────────────────── */
.v12-flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 16px 0;
  overflow-x: auto;
}
.v12-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  flex: 1;
  position: relative;
}
.v12-flow-step::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 0;
  width: 50%;
  height: 2px;
  background: var(--border);
}
.v12-flow-step::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--border);
}
.v12-flow-step:first-child::after { display: none; }
.v12-flow-step:last-child::before { display: none; }
.v12-flow-step.done::before,
.v12-flow-step.done::after { background: var(--ok); }
.v12-flow-step.active::after { background: var(--ok); }
.v12-flow-node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.v12-flow-step.done .v12-flow-node {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.v12-flow-step.active .v12-flow-node {
  background: var(--accent);
  border-color: var(--accent);
  color: #020D18;
}
.v12-flow-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.v12-flow-step.done .v12-flow-label,
.v12-flow-step.active .v12-flow-label {
  color: var(--ink);
  font-weight: 600;
}

/* ── 信息描述列表 ────────────────────────────────────────────── */
.v12-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin: 0;
}
.v12-dl dt {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 0;
}
.v12-dl dd {
  color: var(--ink);
  margin: 0;
  padding: 3px 0;
  border-bottom: 1px solid #F1F5F9;
  min-width: 0;
  word-break: break-word;
}

/* ── 市场情报专属组件 ────────────────────────────────────────── */
.v12-signal-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  background: #fff;
  margin-bottom: 8px;
}
.v12-signal-card.high   { border-left-color: var(--danger); }
.v12-signal-card.medium { border-left-color: var(--warn); }
.v12-signal-card.low    { border-left-color: var(--ok); }

.v12-ai-disclaimer {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  color: #92400E;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

/* ── 审核结论区块 ────────────────────────────────────────────── */
.v12-review-result {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.v12-review-result.passed  { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.v12-review-result.pending { background: #F0F9FF; color: #075985; border: 1px solid #BAE6FD; }
.v12-review-result.rejected { background: #FFF1F2; color: #9F1239; border: 1px solid #FECDD3; }

/* ── 数据安全级别指示器 ──────────────────────────────────────── */
.v12-sens-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.v12-sens-normal    { background: #DCFCE7; color: #15803D; }
.v12-sens-sensitive { background: #FEE2E2; color: #991B1B; }
.v12-sens-internal  { background: #FEF3C7; color: #92400E; }

/* ── 响应式布局修正 ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .v12-page-head { gap: 10px; }
  .v12-page-title { font-size: 18px; }
  .v12-wb-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .v12-kpi-num { font-size: 22px; }
  .v12-action-grid { grid-template-columns: repeat(3, 1fr); }
}