<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
import { fetchGetProject, fetchGetProjectMembers, fetchGetProjectSettings } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import { useCurrentProject } from '../../shared/use-current-project';
import {
  buildProjectHomepageBanner,
  buildProjectHomepageTimeline,
  buildProjectScheduleOverview,
  buildProjectTeamOverview,
  getProjectHomepageExtensionModules
} from './homepage';
import { projectHomepageExtensionMock } from './mock';

defineOptions({ name: 'ProjectOverview' });

const { currentObjectId, currentProject } = useCurrentProject();
const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);

const pageLoading = ref(false);
const projectDetail = ref<Api.Project.Project | null>(null);
const settings = ref<Api.Project.ProjectSettings | null>(null);
const members = ref<Api.Project.ProjectMember[]>([]);
const latestActivityTime = ref('');

const timelineItems = computed(() => buildProjectHomepageTimeline(projectDetail.value, settings.value, members.value));
const displayTimelineItems = computed(() => timelineItems.value.slice(0, 5));
const scheduleOverview = computed(() => buildProjectScheduleOverview(projectDetail.value));
const teamOverview = computed(() => buildProjectTeamOverview(members.value));
const homepageBanner = computed(() =>
  buildProjectHomepageBanner({
    project: projectDetail.value,
    settings: settings.value,
    members: members.value,
    latestActivityTime: latestActivityTime.value
  })
);
const extensionModules = computed(() => getProjectHomepageExtensionModules(projectHomepageExtensionMock));
const directionLabel = computed(() => getDirectionLabel(homepageBanner.value.identity.directionCode, '--'));
const projectTypeLabel = computed(() => getProjectTypeLabel(homepageBanner.value.identity.projectType, '--'));

const productFact = computed(() => homepageBanner.value.identity.facts[0]);
const managerFact = computed(() => homepageBanner.value.identity.facts[1]);
const roleFact = computed(() => homepageBanner.value.identity.facts[2]);

const progressValue = computed(() => {
  const value = projectDetail.value?.progressRate ?? 0;
  if (!Number.isFinite(value)) return 0;
  return Math.min(100, Math.max(0, value));
});

const identityToneClass = computed(() => {
  const statusCode = homepageBanner.value.identity.statusCode;
  return statusCode ? `project-overview__identity--${statusCode}` : 'project-overview__identity--default';
});

const statusBadgeClass = computed(() => {
  const statusCode = homepageBanner.value.identity.statusCode;
  return statusCode ? `project-overview__identity-status--${statusCode}` : 'project-overview__identity-status--default';
});

interface KpiCard {
  key: string;
  label: string;
  value: string;
  hint: string;
  icon: string;
  tone: 'teal' | 'emerald' | 'amber' | 'slate';
  compact: boolean;
}

const kpiTones: Array<KpiCard['tone']> = ['teal', 'emerald', 'amber', 'slate'];
const kpiIcons = [
  'mdi:account-group-outline',
  'mdi:progress-check',
  'mdi:calendar-range-outline',
  'mdi:clock-time-eight-outline'
];

const kpiCards = computed<KpiCard[]>(() =>
  homepageBanner.value.metrics.map((metric, index) => ({
    key: metric.label,
    label: metric.label,
    value: metric.value,
    hint: metric.hint,
    icon: kpiIcons[index] || 'mdi:chart-line',
    tone: kpiTones[index] || 'slate',
    compact: index >= 2
  }))
);

const progressProgressColor = computed(() => [
  { color: '#f59e0b', percentage: 30 },
  { color: '#0ea5e9', percentage: 60 },
  { color: '#10b981', percentage: 100 }
]);

const timelineTagToneMap: Record<string, 'sky' | 'emerald' | 'amber' | 'rose' | 'slate'> = {
  对象: 'sky',
  状态: 'emerald',
  计划: 'amber',
  团队: 'slate'
};

function getTimelineTagTone(tag: string) {
  return timelineTagToneMap[tag] || 'slate';
}

const teamMetricTones: Array<'teal' | 'emerald' | 'amber' | 'slate'> = ['teal', 'emerald', 'amber', 'slate'];
const teamMetricIcons = [
  'mdi:account-check-outline',
  'mdi:account-off-outline',
  'mdi:account-star-outline',
  'mdi:account-cog-outline'
];

const teamMetricCards = computed(() =>
  teamOverview.value.metrics.map((metric, index) => ({
    ...metric,
    icon: teamMetricIcons[index] || 'mdi:account',
    tone: teamMetricTones[index] || 'slate',
    compact: metric.label === '项目经理'
  }))
);

const extensionMeta: Record<string, { icon: string; tone: 'amber' | 'rose' | 'sky' }> = {
  milestone: { icon: 'mdi:flag-checkered', tone: 'amber' },
  risk: { icon: 'mdi:alert-octagon-outline', tone: 'rose' },
  document: { icon: 'mdi:file-document-outline', tone: 'sky' }
};

function getExtensionMeta(key: string) {
  return extensionMeta[key] || { icon: 'mdi:dots-grid', tone: 'sky' };
}

async function loadOverviewData(objectId: string) {
  pageLoading.value = true;

  try {
    const [projectResult, settingsResult, membersResult] = await Promise.all([
      fetchGetProject(objectId),
      fetchGetProjectSettings(objectId),
      fetchGetProjectMembers(objectId)
    ]);

    projectDetail.value = projectResult.error ? null : projectResult.data || null;
    settings.value = settingsResult.error ? null : settingsResult.data || null;
    members.value = membersResult.error ? [] : membersResult.data || [];
    latestActivityTime.value = timelineItems.value[0]?.time || '';
  } finally {
    pageLoading.value = false;
  }
}

watch(
  () => currentObjectId.value,
  async objectId => {
    if (!objectId) {
      projectDetail.value = null;
      settings.value = null;
      members.value = [];
      latestActivityTime.value = '';
      return;
    }

    await loadOverviewData(objectId);
  },
  { immediate: true }
);
</script>

<template>
  <div v-loading="pageLoading" class="project-overview">
    <!-- Row A: 身份 + KPI -->
    <section class="project-overview__hero">
      <article class="project-overview__identity" :class="identityToneClass">
        <div class="project-overview__identity-watermark">
          <SvgIcon icon="mdi:briefcase-outline" />
        </div>

        <header class="project-overview__identity-head">
          <span class="project-overview__identity-eyebrow">PROJECT · OVERVIEW</span>
          <span class="project-overview__identity-status" :class="statusBadgeClass">
            <span class="project-overview__identity-status-dot" />
            {{ homepageBanner.identity.statusLabel }}
          </span>
        </header>

        <h1 class="project-overview__identity-name">
          {{ homepageBanner.identity.name || currentProject?.projectName || '--' }}
        </h1>

        <div class="project-overview__identity-code">
          <SvgIcon icon="mdi:pound" />
          <span>{{ homepageBanner.identity.code }}</span>
        </div>

        <p v-if="homepageBanner.identity.description" class="project-overview__identity-desc">
          {{ homepageBanner.identity.description }}
        </p>

        <div class="project-overview__identity-chips">
          <div class="project-overview__chip">
            <span class="project-overview__chip-icon"><SvgIcon icon="mdi:compass-outline" /></span>
            <div class="project-overview__chip-body">
              <em>项目方向</em>
              <strong>{{ directionLabel }}</strong>
            </div>
          </div>
          <div class="project-overview__chip">
            <span class="project-overview__chip-icon"><SvgIcon icon="mdi:shape-outline" /></span>
            <div class="project-overview__chip-body">
              <em>项目类型</em>
              <strong>{{ projectTypeLabel }}</strong>
            </div>
          </div>
          <div class="project-overview__chip">
            <span class="project-overview__chip-icon"><SvgIcon icon="mdi:cube-outline" /></span>
            <div class="project-overview__chip-body">
              <em>{{ productFact?.label || '所属产品' }}</em>
              <strong>{{ productFact?.value || '--' }}</strong>
            </div>
          </div>
          <div class="project-overview__chip">
            <span class="project-overview__chip-icon"><SvgIcon icon="mdi:account-star-outline" /></span>
            <div class="project-overview__chip-body">
              <em>{{ managerFact?.label || '项目经理' }}</em>
              <strong>{{ managerFact?.value || '--' }}</strong>
            </div>
          </div>
          <div class="project-overview__chip project-overview__chip--wide">
            <span class="project-overview__chip-icon"><SvgIcon icon="mdi:account-multiple-outline" /></span>
            <div class="project-overview__chip-body">
              <em>{{ roleFact?.label || '角色摘要' }}</em>
              <strong>{{ roleFact?.value || '--' }}</strong>
            </div>
          </div>
        </div>
      </article>

      <div class="project-overview__kpi-grid">
        <article
          v-for="kpi in kpiCards"
          :key="kpi.key"
          class="project-overview__kpi"
          :class="`project-overview__kpi--${kpi.tone}`"
        >
          <div class="project-overview__kpi-bg" />
          <div class="project-overview__kpi-head">
            <span class="project-overview__kpi-label">{{ kpi.label }}</span>
            <span class="project-overview__kpi-icon">
              <SvgIcon :icon="kpi.icon" />
            </span>
          </div>
          <strong class="project-overview__kpi-value" :class="{ 'project-overview__kpi-value--compact': kpi.compact }">
            {{ kpi.value }}
          </strong>
          <p class="project-overview__kpi-hint">{{ kpi.hint }}</p>
        </article>
      </div>
    </section>

    <!-- Row B: 时间线 + 计划进展概览 -->
    <section class="project-overview__middle">
      <ElCard class="project-overview__timeline card-wrapper" shadow="never">
        <template #header>
          <div class="project-overview__panel-head">
            <span class="project-overview__panel-head-icon project-overview__panel-head-icon--sky">
              <SvgIcon icon="mdi:timeline-clock-outline" />
            </span>
            <div class="project-overview__panel-head-text">
              <h3>项目动态时间线</h3>
              <p>对象、状态、计划与团队的最近活动</p>
            </div>
          </div>
        </template>

        <div v-if="displayTimelineItems.length" class="project-overview__timeline-list">
          <article v-for="item in displayTimelineItems" :key="item.key" class="project-overview__timeline-item">
            <div class="project-overview__timeline-rail">
              <span class="project-overview__timeline-dot" :class="`project-overview__timeline-dot--${item.tone}`" />
              <span class="project-overview__timeline-line" />
            </div>

            <div class="project-overview__timeline-content">
              <div class="project-overview__timeline-meta">
                <ElTag
                  effect="plain"
                  size="small"
                  :type="getTimelineTagTone(item.tag) === 'rose' ? 'danger' : undefined"
                >
                  {{ item.tag }}
                </ElTag>
                <time>{{ item.time }}</time>
              </div>
              <p class="project-overview__timeline-sentence">
                <strong>{{ item.title }}</strong>
                <span>{{ item.content }}</span>
              </p>
            </div>
          </article>
        </div>

        <ElEmpty v-else description="当前暂无可展示的项目动态" :image-size="72" />
      </ElCard>

      <ElCard class="project-overview__plan card-wrapper" shadow="never">
        <template #header>
          <div class="project-overview__panel-head">
            <span class="project-overview__panel-head-icon project-overview__panel-head-icon--teal">
              <SvgIcon icon="mdi:chart-timeline-variant" />
            </span>
            <div class="project-overview__panel-head-text">
              <h3>计划进展概览</h3>
              <p>进度、计划周期与实际执行</p>
            </div>
          </div>
        </template>

        <div class="project-overview__plan-progress">
          <ElProgress
            type="circle"
            :percentage="progressValue"
            :width="124"
            :stroke-width="10"
            :color="progressProgressColor"
          >
            <template #default="{ percentage }">
              <div class="project-overview__plan-progress-inner">
                <strong>{{ percentage }}%</strong>
                <span>当前进度</span>
              </div>
            </template>
          </ElProgress>

          <div class="project-overview__plan-numbers">
            <div v-for="metric in scheduleOverview.metrics" :key="metric.label" class="project-overview__plan-number">
              <em>{{ metric.label }}</em>
              <strong>{{ metric.value }}</strong>
            </div>
          </div>
        </div>

        <ul class="project-overview__plan-dates">
          <li v-for="(date, idx) in scheduleOverview.dates" :key="date.label">
            <span
              class="project-overview__plan-date-icon"
              :class="`project-overview__plan-date-icon--${['sky', 'sky', 'emerald', 'emerald'][idx]}`"
            >
              <SvgIcon :icon="idx < 2 ? 'mdi:calendar-blank-outline' : 'mdi:calendar-check-outline'" />
            </span>
            <span class="project-overview__plan-date-label">{{ date.label }}</span>
            <strong class="project-overview__plan-date-value">{{ date.value }}</strong>
          </li>
        </ul>
      </ElCard>
    </section>

    <!-- Row C: 团队概览 + 扩展模块 -->
    <section class="project-overview__bottom">
      <ElCard class="project-overview__team card-wrapper" shadow="never">
        <template #header>
          <div class="project-overview__panel-head">
            <span class="project-overview__panel-head-icon project-overview__panel-head-icon--emerald">
              <SvgIcon icon="mdi:account-group" />
            </span>
            <div class="project-overview__panel-head-text">
              <h3>项目团队概览</h3>
              <p>成员规模、负责人与角色结构</p>
            </div>
          </div>
        </template>

        <div class="project-overview__team-grid">
          <article
            v-for="metric in teamMetricCards"
            :key="metric.label"
            class="project-overview__team-metric"
            :class="`project-overview__team-metric--${metric.tone}`"
          >
            <div class="project-overview__team-metric-head">
              <span class="project-overview__team-metric-label">{{ metric.label }}</span>
              <span class="project-overview__team-metric-icon">
                <SvgIcon :icon="metric.icon" />
              </span>
            </div>
            <strong
              class="project-overview__team-metric-value"
              :class="{ 'project-overview__team-metric-value--compact': metric.compact }"
            >
              {{ metric.value }}
            </strong>
          </article>
        </div>

        <div v-if="teamOverview.roles.length" class="project-overview__team-roles">
          <span class="project-overview__team-roles-title">角色分布</span>
          <ul>
            <li v-for="role in teamOverview.roles" :key="role.label">
              <span class="project-overview__team-role-dot" />
              <span class="project-overview__team-role-label">{{ role.label }}</span>
              <strong class="project-overview__team-role-value">{{ role.value }}</strong>
            </li>
          </ul>
        </div>
      </ElCard>

      <ElCard class="project-overview__extensions card-wrapper" shadow="never">
        <template #header>
          <div class="project-overview__panel-head">
            <span class="project-overview__panel-head-icon project-overview__panel-head-icon--amber">
              <SvgIcon icon="mdi:rocket-launch-outline" />
            </span>
            <div class="project-overview__panel-head-text">
              <h3>关键扩展模块</h3>
              <p>里程碑 · 风险 · 文档</p>
            </div>
          </div>
        </template>

        <div class="project-overview__extension-list">
          <div
            v-for="moduleItem in extensionModules"
            :key="moduleItem.key"
            class="project-overview__extension"
            :class="`project-overview__extension--${getExtensionMeta(moduleItem.key).tone}`"
          >
            <div class="project-overview__extension-head">
              <span class="project-overview__extension-icon">
                <SvgIcon :icon="getExtensionMeta(moduleItem.key).icon" />
              </span>
              <div class="project-overview__extension-title">
                <strong>{{ moduleItem.title }}</strong>
                <p>{{ moduleItem.description }}</p>
              </div>
            </div>
            <ul class="project-overview__extension-items">
              <li v-for="item in moduleItem.items" :key="item">
                <span class="project-overview__extension-bullet" />
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>
      </ElCard>
    </section>
  </div>
</template>

<style scoped>
.project-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============ Row A: Hero ============ */
.project-overview__hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: 16px;
  align-items: stretch;
}

.project-overview__identity {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 30px 24px 36px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 24px;
  overflow: hidden;
  color: rgb(15 23 42 / 98%);
  background:
    radial-gradient(circle at 100% 0%, rgb(20 184 166 / 14%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(16 185 129 / 10%), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
}

.project-overview__identity::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #14b8a6, #10b981);
}

.project-overview__identity--paused {
  background:
    radial-gradient(circle at 100% 0%, rgb(245 158 11 / 14%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(217 119 6 / 10%), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

.project-overview__identity--paused::before {
  background: linear-gradient(180deg, #fbbf24, #d97706);
}

.project-overview__identity--pending,
.project-overview__identity--archived {
  background:
    radial-gradient(circle at 100% 0%, rgb(148 163 184 / 14%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(100 116 139 / 10%), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.project-overview__identity--pending::before,
.project-overview__identity--archived::before {
  background: linear-gradient(180deg, #94a3b8, #475569);
}

.project-overview__identity--cancelled {
  background:
    radial-gradient(circle at 100% 0%, rgb(244 63 94 / 14%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(225 29 72 / 10%), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
}

.project-overview__identity--cancelled::before {
  background: linear-gradient(180deg, #fb7185, #be123c);
}

.project-overview__identity--completed {
  background:
    radial-gradient(circle at 100% 0%, rgb(16 185 129 / 18%), transparent 50%),
    radial-gradient(circle at 0% 100%, rgb(5 150 105 / 12%), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.project-overview__identity--completed::before {
  background: linear-gradient(180deg, #34d399, #047857);
}

.project-overview__identity-watermark {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 132px;
  line-height: 1;
  color: rgb(15 118 110 / 6%);
  pointer-events: none;
}

.project-overview__identity--paused .project-overview__identity-watermark {
  color: rgb(180 83 9 / 7%);
}

.project-overview__identity--pending .project-overview__identity-watermark,
.project-overview__identity--archived .project-overview__identity-watermark {
  color: rgb(71 85 105 / 7%);
}

.project-overview__identity--cancelled .project-overview__identity-watermark {
  color: rgb(190 18 60 / 7%);
}

.project-overview__identity--completed .project-overview__identity-watermark {
  color: rgb(4 120 87 / 8%);
}

.project-overview__identity-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-overview__identity-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgb(15 118 110 / 88%);
}

.project-overview__identity--paused .project-overview__identity-eyebrow {
  color: rgb(180 83 9 / 88%);
}

.project-overview__identity--pending .project-overview__identity-eyebrow,
.project-overview__identity--archived .project-overview__identity-eyebrow {
  color: rgb(71 85 105 / 88%);
}

.project-overview__identity--cancelled .project-overview__identity-eyebrow {
  color: rgb(190 18 60 / 88%);
}

.project-overview__identity--completed .project-overview__identity-eyebrow {
  color: rgb(4 120 87 / 92%);
}

.project-overview__identity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgb(20 184 166 / 12%);
  color: #0f766e;
  border: 1px solid rgb(20 184 166 / 22%);
}

.project-overview__identity-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 3px rgb(20 184 166 / 22%);
}

.project-overview__identity-status--paused {
  background: rgb(245 158 11 / 14%);
  color: #b45309;
  border-color: rgb(245 158 11 / 28%);
}

.project-overview__identity-status--paused .project-overview__identity-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgb(245 158 11 / 22%);
}

.project-overview__identity-status--pending,
.project-overview__identity-status--archived {
  background: rgb(148 163 184 / 14%);
  color: #475569;
  border-color: rgb(148 163 184 / 28%);
}

.project-overview__identity-status--pending .project-overview__identity-status-dot,
.project-overview__identity-status--archived .project-overview__identity-status-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgb(148 163 184 / 22%);
}

.project-overview__identity-status--cancelled {
  background: rgb(244 63 94 / 14%);
  color: #be123c;
  border-color: rgb(244 63 94 / 28%);
}

.project-overview__identity-status--cancelled .project-overview__identity-status-dot {
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgb(244 63 94 / 22%);
}

.project-overview__identity-status--completed {
  background: rgb(16 185 129 / 14%);
  color: #047857;
  border-color: rgb(16 185 129 / 28%);
}

.project-overview__identity-status--completed .project-overview__identity-status-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 22%);
}

.project-overview__identity-name {
  position: relative;
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgb(15 23 42 / 98%);
  word-break: break-word;
}

.project-overview__identity-code {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  width: fit-content;
  border-radius: 999px;
  background: rgb(241 245 249 / 96%);
  color: rgb(71 85 105 / 96%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-overview__identity-desc {
  position: relative;
  max-width: 78%;
  margin: 2px 0 0;
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  line-height: 1.75;
}

.project-overview__identity-chips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.project-overview__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(226 232 240 / 92%);
  min-height: 56px;
}

.project-overview__chip--wide {
  grid-column: 1 / -1;
}

.project-overview__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.project-overview__chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.project-overview__chip-body em {
  font-style: normal;
  font-size: 11px;
  color: rgb(100 116 139 / 92%);
  letter-spacing: 0.04em;
}

.project-overview__chip-body strong {
  font-size: 13px;
  font-weight: 600;
  color: rgb(15 23 42 / 98%);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-overview__chip--wide .project-overview__chip-body strong {
  white-space: normal;
}

/* ---- KPI 2x2 ---- */
.project-overview__kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-overview__kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  border: 1px solid rgb(226 232 240 / 92%);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.project-overview__kpi::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}

.project-overview__kpi--teal {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
}

.project-overview__kpi--teal::after {
  background: linear-gradient(90deg, #14b8a6, #0f766e);
}

.project-overview__kpi--emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.project-overview__kpi--emerald::after {
  background: linear-gradient(90deg, #10b981, #047857);
}

.project-overview__kpi--amber {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.project-overview__kpi--amber::after {
  background: linear-gradient(90deg, #f59e0b, #b45309);
}

.project-overview__kpi--slate {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.project-overview__kpi--slate::after {
  background: linear-gradient(90deg, #64748b, #334155);
}

.project-overview__kpi:hover {
  transform: translateY(-2px);
}

.project-overview__kpi--teal:hover {
  box-shadow: 0 14px 26px -18px rgb(15 118 110 / 50%);
}

.project-overview__kpi--emerald:hover {
  box-shadow: 0 14px 26px -18px rgb(4 120 87 / 50%);
}

.project-overview__kpi--amber:hover {
  box-shadow: 0 14px 26px -18px rgb(180 83 9 / 50%);
}

.project-overview__kpi--slate:hover {
  box-shadow: 0 14px 26px -18px rgb(51 65 85 / 50%);
}

.project-overview__kpi-bg {
  position: absolute;
  top: -35%;
  right: -25%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
}

.project-overview__kpi--teal .project-overview__kpi-bg {
  background: radial-gradient(circle, rgb(20 184 166 / 32%), transparent 65%);
}

.project-overview__kpi--emerald .project-overview__kpi-bg {
  background: radial-gradient(circle, rgb(16 185 129 / 32%), transparent 65%);
}

.project-overview__kpi--amber .project-overview__kpi-bg {
  background: radial-gradient(circle, rgb(245 158 11 / 32%), transparent 65%);
}

.project-overview__kpi--slate .project-overview__kpi-bg {
  background: radial-gradient(circle, rgb(100 116 139 / 26%), transparent 65%);
}

.project-overview__kpi-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-overview__kpi-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.project-overview__kpi--teal .project-overview__kpi-label {
  color: #0f766e;
}

.project-overview__kpi--emerald .project-overview__kpi-label {
  color: #047857;
}

.project-overview__kpi--amber .project-overview__kpi-label {
  color: #b45309;
}

.project-overview__kpi--slate .project-overview__kpi-label {
  color: #475569;
}

.project-overview__kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgb(15 23 42 / 32%);
}

.project-overview__kpi--teal .project-overview__kpi-icon {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.project-overview__kpi--emerald .project-overview__kpi-icon {
  background: linear-gradient(135deg, #10b981, #047857);
}

.project-overview__kpi--amber .project-overview__kpi-icon {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}

.project-overview__kpi--slate .project-overview__kpi-icon {
  background: linear-gradient(135deg, #64748b, #334155);
}

.project-overview__kpi-value {
  position: relative;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-overview__kpi--teal .project-overview__kpi-value {
  background-image: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.project-overview__kpi--emerald .project-overview__kpi-value {
  background-image: linear-gradient(135deg, #047857 0%, #10b981 100%);
}

.project-overview__kpi--amber .project-overview__kpi-value {
  background-image: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.project-overview__kpi--slate .project-overview__kpi-value {
  background-image: linear-gradient(135deg, #334155 0%, #64748b 100%);
}

.project-overview__kpi-value--compact {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.project-overview__kpi-hint {
  position: relative;
  margin: 0;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  line-height: 1.6;
}

/* ============ Row B: 中部 ============ */
.project-overview__middle {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr);
  gap: 16px;
  align-items: start;
}

/* 公共面板头部 */
.project-overview__panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-overview__panel-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
}

.project-overview__panel-head-icon--teal {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  box-shadow: 0 6px 14px -8px rgb(15 118 110 / 55%);
}

.project-overview__panel-head-icon--sky {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  box-shadow: 0 6px 14px -8px rgb(2 132 199 / 55%);
}

.project-overview__panel-head-icon--emerald {
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 6px 14px -8px rgb(4 120 87 / 55%);
}

.project-overview__panel-head-icon--amber {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 6px 14px -8px rgb(217 119 6 / 55%);
}

.project-overview__panel-head-text h3 {
  margin: 0;
  color: rgb(15 23 42 / 98%);
  font-size: 16px;
  font-weight: 700;
}

.project-overview__panel-head-text p {
  margin: 3px 0 0;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  line-height: 1.6;
}

/* 时间线 */
.project-overview__timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-overview__timeline-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}

.project-overview__timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-overview__timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 96%);
}

.project-overview__timeline-dot--sky {
  background-color: rgb(14 165 233 / 88%);
}

.project-overview__timeline-dot--emerald {
  background-color: rgb(5 150 105 / 88%);
}

.project-overview__timeline-dot--amber {
  background-color: rgb(217 119 6 / 88%);
}

.project-overview__timeline-dot--rose {
  background-color: rgb(225 29 72 / 88%);
}

.project-overview__timeline-dot--slate {
  background-color: rgb(100 116 139 / 88%);
}

.project-overview__timeline-line {
  flex: 1;
  width: 2px;
  min-height: 24px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgb(203 213 225 / 96%), rgb(226 232 240 / 28%));
}

.project-overview__timeline-item:last-child .project-overview__timeline-line {
  opacity: 0;
}

.project-overview__timeline-content {
  padding: 10px 12px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 98%);
}

.project-overview__timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-overview__timeline-meta time {
  color: rgb(100 116 139 / 90%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.project-overview__timeline-sentence {
  margin: 6px 0 0;
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  line-height: 1.65;
}

.project-overview__timeline-sentence strong {
  margin-right: 6px;
  color: rgb(15 23 42 / 98%);
  font-weight: 700;
}

/* 计划进展概览 */
.project-overview__plan-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 4px 16px;
  border-bottom: 1px dashed rgb(226 232 240 / 80%);
}

.project-overview__plan-progress-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.project-overview__plan-progress-inner strong {
  font-size: 22px;
  font-weight: 700;
  color: rgb(15 23 42 / 98%);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.project-overview__plan-progress-inner span {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.project-overview__plan-numbers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.project-overview__plan-number {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(241 245 249 / 70%);
  min-width: 0;
}

.project-overview__plan-number em {
  font-style: normal;
  color: rgb(71 85 105 / 96%);
  font-size: 12px;
}

.project-overview__plan-number strong {
  font-size: 14px;
  font-weight: 700;
  color: rgb(15 23 42 / 98%);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-overview__plan-dates {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-overview__plan-dates li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgb(248 250 252 / 96%);
  border: 1px solid rgb(226 232 240 / 60%);
}

.project-overview__plan-date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}

.project-overview__plan-date-icon--sky {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.project-overview__plan-date-icon--emerald {
  background: linear-gradient(135deg, #34d399, #059669);
}

.project-overview__plan-date-label {
  flex: 1;
  color: rgb(51 65 85 / 96%);
  font-size: 13px;
}

.project-overview__plan-date-value {
  color: rgb(15 23 42 / 98%);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============ Row C: 底部 ============ */
.project-overview__bottom {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 16px;
  align-items: start;
}

/* 团队概览 */
.project-overview__team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-overview__team-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgb(226 232 240 / 92%);
  overflow: hidden;
}

.project-overview__team-metric--teal {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
}

.project-overview__team-metric--emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.project-overview__team-metric--amber {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.project-overview__team-metric--slate {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.project-overview__team-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-overview__team-metric-label {
  font-size: 12px;
  font-weight: 600;
}

.project-overview__team-metric--teal .project-overview__team-metric-label {
  color: #0f766e;
}

.project-overview__team-metric--emerald .project-overview__team-metric-label {
  color: #047857;
}

.project-overview__team-metric--amber .project-overview__team-metric-label {
  color: #b45309;
}

.project-overview__team-metric--slate .project-overview__team-metric-label {
  color: #475569;
}

.project-overview__team-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 15px;
  color: #fff;
}

.project-overview__team-metric--teal .project-overview__team-metric-icon {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.project-overview__team-metric--emerald .project-overview__team-metric-icon {
  background: linear-gradient(135deg, #10b981, #047857);
}

.project-overview__team-metric--amber .project-overview__team-metric-icon {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}

.project-overview__team-metric--slate .project-overview__team-metric-icon {
  background: linear-gradient(135deg, #64748b, #334155);
}

.project-overview__team-metric-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-overview__team-metric--teal .project-overview__team-metric-value {
  background-image: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.project-overview__team-metric--emerald .project-overview__team-metric-value {
  background-image: linear-gradient(135deg, #047857 0%, #10b981 100%);
}

.project-overview__team-metric--amber .project-overview__team-metric-value {
  background-image: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.project-overview__team-metric--slate .project-overview__team-metric-value {
  background-image: linear-gradient(135deg, #334155 0%, #64748b 100%);
}

.project-overview__team-metric-value--compact {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.project-overview__team-roles {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgb(226 232 240 / 80%);
}

.project-overview__team-roles-title {
  display: block;
  margin-bottom: 8px;
  color: rgb(71 85 105 / 96%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-overview__team-roles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-overview__team-roles li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(248 250 252 / 96%);
}

.project-overview__team-role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #10b981);
  flex-shrink: 0;
}

.project-overview__team-role-label {
  flex: 1;
  color: rgb(51 65 85 / 96%);
  font-size: 13px;
}

.project-overview__team-role-value {
  color: rgb(15 23 42 / 98%);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 扩展模块 */
.project-overview__extension-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-overview__extension {
  padding: 14px 16px;
  border: 1px solid rgb(226 232 240 / 90%);
  border-radius: 16px;
  background: #fff;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.project-overview__extension:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -16px rgb(15 23 42 / 24%);
}

.project-overview__extension-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.project-overview__extension-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
}

.project-overview__extension--amber .project-overview__extension-icon {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}

.project-overview__extension--rose .project-overview__extension-icon {
  background: linear-gradient(135deg, #fb7185, #be123c);
}

.project-overview__extension--sky .project-overview__extension-icon {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.project-overview__extension-title strong {
  display: block;
  color: rgb(15 23 42 / 98%);
  font-size: 14px;
  font-weight: 700;
}

.project-overview__extension-title p {
  margin: 2px 0 0;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  line-height: 1.5;
}

.project-overview__extension-items {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-overview__extension-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgb(248 250 252 / 96%);
  color: rgb(51 65 85 / 96%);
  font-size: 13px;
  line-height: 1.5;
}

.project-overview__extension-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.4;
  flex-shrink: 0;
}

.project-overview__extension--amber .project-overview__extension-items li {
  color: rgb(120 53 15 / 92%);
  background: rgb(254 243 199 / 60%);
}

.project-overview__extension--rose .project-overview__extension-items li {
  color: rgb(136 19 55 / 92%);
  background: rgb(255 228 230 / 60%);
}

.project-overview__extension--sky .project-overview__extension-items li {
  color: rgb(7 89 133 / 94%);
  background: rgb(224 242 254 / 60%);
}

/* ============ 响应式 ============ */
@media (width <= 1280px) {
  .project-overview__hero,
  .project-overview__middle,
  .project-overview__bottom {
    grid-template-columns: 1fr;
  }

  .project-overview__identity-desc {
    max-width: 100%;
  }
}

@media (width <= 768px) {
  .project-overview__identity {
    padding: 22px;
  }

  .project-overview__identity-name {
    font-size: 28px;
  }

  .project-overview__identity-chips {
    grid-template-columns: 1fr;
  }

  .project-overview__chip--wide {
    grid-column: 1;
  }

  .project-overview__kpi-grid,
  .project-overview__team-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .project-overview__plan-progress {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
