<template>
  <div class="screen-page cp-page" :class="{ 'is-loading': loading }">
    <div v-if="loadError" class="cp-error" @click="fetchDashboard">{{ loadError }}（点击重试）</div>

    <!-- <div class="cp-year-bar">
      <label class="cp-year-bar__label">统计年份</label>
      <select
        v-model="statYear"
        class="cp-year-bar__select"
        :disabled="loading"
        @change="onYearChange"
      >
        <option v-for="y in availableYears" :key="y" :value="String(y)">{{ y }}年</option>
      </select>
    </div> -->

    <div class="screen-page--home-column">
      <div class="screen-page--home-column-top">
        <div class="top_title">共同富裕 མཉམ་འདུས་འབྲིག་སྐྱིད།</div>
        <template v-if="hasAchievementData">
          <div class="top_content">
            <div class="content_1">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.collectiveEconomyIncome" format="money" />
                万元
              </div>
              <div class="content_title"><div>集体经济收入</div></div>
            </div>
            <div class="content_2">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.employmentDrivenCount" />
                人
              </div>
              <div class="content_title"><div>带动就业人数</div></div>
            </div>
            <div class="content_3">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.newJobPositions" />
                个
              </div>
              <div class="content_title"><div>新增就业岗位</div></div>
            </div>
            <div class="content_4">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.envProjectCount" />
                个
              </div>
              <div class="content_title"><div>环境治理项目数</div></div>
            </div>
          </div>
          <div class="top_content">
            <div class="content_1">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.newGreenArea" format="area" />
                亩
              </div>
              <div class="content_title"><div>新增绿化面积</div></div>
            </div>
            <div class="content_2">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.culturalHeritageCount" />
                人
              </div>
              <div class="content_title"><div>文化传承人数</div></div>
            </div>
            <div class="content_3">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.ethnicIntegrationProjectCount" />
                个
              </div>
              <div class="content_title"><div>民族融合项目数</div></div>
            </div>
            <div class="content_4">
              <div class="content_num">
                <ScreenScrollNumber :value="summary?.regionalPublicBrandCount" />
                个
              </div>
              <div class="content_title"><div>区域公共品牌数</div></div>
            </div>
          </div>
        </template>
        <div v-else class="cp-overview-empty">
          <p>暂无该年度共富成果数据</p>
          <p class="cp-overview-empty__hint">请在共同富裕成果中维护</p>
        </div>
      </div>

      <div class="screen-page--home-column-flex">
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">经济收入对比 དཔལ་འབྱོར་ཡོང་འབབ་ཀྱི་གཤུགས་བསྡུར།</div>
          <div class="flex_content flex_content--income">
            <ScreenChart :option="incomeChartOption" />
          </div>
        </div>
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">就业带动 ལས་རྩོམ་སྐྱོད་འཁྲིད།</div>
          <div class="flex_content">
            <ScreenChart :option="employmentChartOption" />
          </div>
        </div>
      </div>

      <div class="screen-page--home-column-flex">
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">环境治理 ཁམས་ཡུལ་དོ་དམ་བྱ་སྤྱོད།</div>
          <div class="flex_content">
            <ScreenChart :option="envChartOption" />
          </div>
        </div>
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">绿化建设 ཤིང་ཚོགས་རྒྱ་སྐྱེད་གསར་རྩོམ།</div>
          <div class="flex_content">
            <ScreenChart :option="greenChartOption" />
          </div>
        </div>
      </div>
    </div>

    <div class="screen-page--home-column">
      <div class="screen-page--home-column-right cp-digital-panel">
        <div class="top_title">数字赋能 གྲངས་ཀ་སྟོབས་སྦྱོང་།</div>
        <div v-if="hasAchievementData" class="cp-digital-body">
          <div class="cp-digital-group">
            <div class="cp-digital-group__title">品牌增值</div>
            <div class="cp-rings">
              <div class="cp-ring">
                <div class="cp-ring__figure">
                  <div class="cp-ring__outer">
                    <div class="cp-ring__inner">
                      <div class="cp-ring__val">
                        <strong>{{ display(summary?.regionalPublicBrandCount) }}</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cp-ring__label">区域公共品牌数</div>
              </div>
              <div class="cp-ring">
                <div class="cp-ring__figure">
                  <div class="cp-ring__outer">
                    <div class="cp-ring__inner">
                      <div class="cp-ring__val">
                        <strong>{{ formatRate(summary?.brandPremiumRate) }}</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cp-ring__label">品牌产品溢价率</div>
              </div>
            </div>
          </div>
          <div class="cp-digital-group">
            <div class="cp-digital-group__title">数字化普及</div>
            <div class="cp-rings">
              <div class="cp-ring cp-ring--single">
                <div class="cp-ring__figure">
                  <div class="cp-ring__outer">
                    <div class="cp-ring__inner">
                      <div class="cp-ring__val">
                        <strong>{{ formatRate(summary?.digitalPlatformUsageRate) }}</strong>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cp-ring__label">数字平台使用率</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="cp-digital-empty">
          <p>暂无该年度共富成果数据</p>
          <p class="cp-digital-empty__hint">请在共同富裕成果中维护</p>
        </div>
      </div>

      <div class="screen-page--home-column-flex">
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">文化传承 རིག་གནས་རྒྱུན་འཛིན།</div>
          <div class="flex_content">
            <ScreenChart :option="culturalChartOption" />
          </div>
        </div>
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">民族团结 མི་རིགས་མཉམ་འདུས།</div>
          <div class="flex_content">
            <ScreenChart :option="ethnicChartOption" />
          </div>
        </div>
      </div>

      <div class="screen-page--home-column-flex">
        <div class="screen-page--home-column-flex-item">
          <div
            class="flex_title flex_title--clickable"
            role="button"
            tabindex="0"
            @click="projectTypeDetailDialogVisible = true"
            @keyup.enter="projectTypeDetailDialogVisible = true"
          >
            共富项目分类 མཉམ་འབྲིག་སྐྱིད་ཀྱི་ལས་གཞི་རིགས་དབྱེ་བ།
          </div>
          <div class="flex_content">
            <ScreenChart :option="projectTypeChartOption" />
          </div>
        </div>
        <div class="screen-page--home-column-flex-item">
          <div class="flex_title">共富项目 མཉམ་འདུས་འབྲིག་སྐྱིད་ལས་གཞི།</div>
          <div class="flex_content flex_content--projects">
            <div class="cp-project-scroll" @scroll="onProjectScroll">
              <div v-if="projectLoading && !projectRows.length" class="cp-project-empty">加载中…</div>
              <div v-else-if="!projectRows.length" class="cp-project-empty">本年度暂无共富项目</div>
              <div
                v-for="row in projectRows"
                :key="row.id"
                class="cp-project-row cp-project-row--clickable"
                role="button"
                tabindex="0"
                @click="openProjectDetail(row)"
                @keyup.enter="openProjectDetail(row)"
              >
                <div class="cp-project-row__main">
                  <div class="cp-project-row__name" :title="row.projectName">
                    {{ row.projectName || '—' }}
                  </div>
                  <div class="cp-project-row__meta">
                    <span class="cp-project-row__type">{{ row.projectTypeName }}</span>
                    <span>{{ row.investmentAmount }} 万元</span>
                  </div>
                </div>
              </div>
              <div v-if="projectLoadingMore" class="cp-project-more">加载下一页…</div>
            </div>
            <div class="cp-project-footer">
              <span v-if="projectLoadingMore">加载中…</span>
              <span v-else-if="projectHasMore">上滑加载更多</span>
              <span v-else-if="projectRows.length">已加载全部 {{ projectRows.length }} 条</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Teleport to="body">
      <div
        v-if="projectDetailVisible && selectedProject"
        class="cp-detail-mask"
        @click.self="closeProjectDetail"
      >
        <div class="cp-detail-panel" role="dialog" aria-modal="true">
          <button type="button" class="cp-detail-close" aria-label="关闭" @click="closeProjectDetail">
            ×
          </button>
          <div class="cp-detail-title">共富项目详情</div>
          <div class="cp-detail-body">
            <div class="cp-detail-name">{{ selectedProject.projectName || '—' }}</div>
            <div class="cp-detail-grid">
              <div class="cp-detail-item">
                <span class="cp-detail-label">项目类型</span>
                <span class="cp-detail-value">{{ selectedProject.projectTypeName || '—' }}</span>
              </div>
              <div class="cp-detail-item">
                <span class="cp-detail-label">实施年限</span>
                <span class="cp-detail-value">{{ selectedProject.implYear ?? '—' }}</span>
              </div>
              <div class="cp-detail-item">
                <span class="cp-detail-label">投资金额</span>
                <span class="cp-detail-value">
                  {{
                    selectedProject.investmentAmount != null && selectedProject.investmentAmount !== ''
                      ? `${selectedProject.investmentAmount} 万元`
                      : '—'
                  }}
                </span>
              </div>
            </div>
            <div class="cp-detail-block">
              <div class="cp-detail-label">项目简介</div>
              <div class="cp-detail-text">{{ selectedProject.introduction || '—' }}</div>
            </div>
            <div class="cp-detail-block">
              <div class="cp-detail-label">建设规模及内容</div>
              <div class="cp-detail-text">{{ selectedProject.projectContent || '—' }}</div>
            </div>
            <div class="cp-detail-block">
              <div class="cp-detail-label">实施情况</div>
              <div class="cp-detail-text">{{ selectedProject.implStatus || '—' }}</div>
            </div>
            <div v-if="selectedProject.coverFileUrl" class="cp-detail-block">
              <div class="cp-detail-label">封面</div>
              <img
                class="cp-detail-cover"
                :src="mediaUrl(selectedProject.coverFileUrl)"
                alt="封面"
              />
            </div>
            <div v-if="selectedProject.videoFileUrl" class="cp-detail-block">
              <div class="cp-detail-label">运营视频</div>
              <video
                class="cp-detail-video"
                :src="mediaUrl(selectedProject.videoFileUrl)"
                controls
                preload="metadata"
              />
            </div>
          </div>
        </div>
      </div>
    </Teleport>

    <ProjectTypeDetailDialog v-model="projectTypeDetailDialogVisible" />
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import ScreenChart from '@/components/ScreenChart.vue'
import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
import { getCommonProsperityDashboard, getCommonProsperityProjects } from '@/api/commonProsperity'
import { useStatYear } from '@/stores/statYear'
import ProjectTypeDetailDialog from './ProjectTypeDetailDialog.vue'
import {
  buildCollectiveIncomeBarOption,
  buildCulturalHeritageOption,
  buildEmploymentOption,
  buildEnvGovernanceOption,
  buildEthnicUnityStackedOption,
  buildGreenAreaOption,
  buildProjectTypePieOption
} from './chartOptions'

const PROJECT_PAGE_SIZE = 8

const loading = ref(false)
const projectLoading = ref(false)
const loadError = ref('')
const { statYear, mergeAvailableYears } = useStatYear()

const achievement = ref(null)
const hasProjectData = ref(false)
const projectTypeStats = ref([])

const projectPageNum = ref(1)
const projectPageSize = PROJECT_PAGE_SIZE
const projectRows = ref([])
const projectTotal = ref(0)
const projectLoadingMore = ref(false)
const projectScrollLoading = ref(false)

const projectDetailVisible = ref(false)
const selectedProject = ref(null)
const projectTypeDetailDialogVisible = ref(false)

const summary = computed(() =>
  achievement.value?.hasData ? achievement.value.summary : null
)
const monthly = computed(() => achievement.value?.monthly || [])
const hasAchievementData = computed(() => !!achievement.value?.hasData)

const incomeChartOption = computed(() =>
  buildCollectiveIncomeBarOption(monthly.value, hasAchievementData.value)
)
const employmentChartOption = computed(() =>
  buildEmploymentOption(monthly.value, hasAchievementData.value)
)
const envChartOption = computed(() =>
  buildEnvGovernanceOption(monthly.value, hasAchievementData.value)
)
const greenChartOption = computed(() =>
  buildGreenAreaOption(monthly.value, hasAchievementData.value)
)
const culturalChartOption = computed(() =>
  buildCulturalHeritageOption(monthly.value, hasAchievementData.value)
)
const ethnicChartOption = computed(() =>
  buildEthnicUnityStackedOption(monthly.value, hasAchievementData.value)
)
const projectTypeChartOption = computed(() =>
  buildProjectTypePieOption(projectTypeStats.value, hasProjectData.value)
)

const projectHasMore = computed(() => projectRows.value.length < projectTotal.value)

function formatNum(val) {
  if (val === null || val === undefined || val === '') {
    return '0'
  }
  const n = Number(val)
  if (Number.isNaN(n)) {
    return '0'
  }
  return n.toLocaleString('zh-CN')
}

function display(val) {
  return formatNum(val)
}

function formatRate(rate) {
  if (rate === null || rate === undefined || rate === '') {
    return '0%'
  }
  const n = Number(rate)
  if (Number.isNaN(n)) {
    return '0%'
  }
  const pct = n <= 1 ? n * 100 : n
  return `${pct.toFixed(1)}%`
}

function applyDashboard(data) {
  if (!data) {
    return
  }
  mergeAvailableYears(data.availableYears)
  achievement.value = data.achievement || null
  hasProjectData.value = !!data.hasProjectData
  projectTypeStats.value = data.projectTypeStats || []
}

async function fetchDashboard() {
  loading.value = true
  loadError.value = ''
  try {
    const res = await getCommonProsperityDashboard(statYear.value)
    applyDashboard(res.data)
    await fetchProjects(true)
  } catch (e) {
    loadError.value = e?.message || '看板数据加载失败'
  } finally {
    loading.value = false
  }
}

async function fetchProjects(reset = true) {
  if (reset) {
    projectPageNum.value = 1
    projectRows.value = []
    projectLoading.value = true
  } else {
    if (!projectHasMore.value || projectLoadingMore.value || projectScrollLoading.value) {
      return
    }
    projectLoadingMore.value = true
  }

  try {
    const res = await getCommonProsperityProjects({
      statYear: statYear.value,
      pageNum: projectPageNum.value,
      pageSize: projectPageSize
    })
    const rows = res.rows || []
    projectTotal.value = res.total ?? 0
    if (reset) {
      projectRows.value = rows
    } else {
      projectRows.value = [...projectRows.value, ...rows]
    }
  } catch (e) {
    if (reset) {
      projectRows.value = []
      projectTotal.value = 0
    }
    if (!loadError.value) {
      loadError.value = e?.message || '项目列表加载失败'
    }
  } finally {
    projectLoading.value = false
    projectLoadingMore.value = false
  }
}

async function loadMoreProjects() {
  if (
    !projectHasMore.value ||
    projectLoading.value ||
    projectLoadingMore.value ||
    projectScrollLoading.value
  ) {
    return
  }
  projectScrollLoading.value = true
  projectPageNum.value += 1
  try {
    await fetchProjects(false)
  } finally {
    projectScrollLoading.value = false
  }
}

function onProjectScroll(event) {
  const el = event.target
  if (!el || el.scrollHeight <= el.clientHeight) {
    return
  }
  const distance = el.scrollHeight - el.scrollTop - el.clientHeight
  if (distance > 28) {
    return
  }
  loadMoreProjects()
}

function mediaUrl(url) {
  if (!url) {
    return ''
  }
  if (/^https?:\/\//i.test(url)) {
    return url
  }
  const base = import.meta.env.VITE_APP_BASE_API || ''
  return url.startsWith('/') ? `${base}${url}` : `${base}/${url}`
}

function openProjectDetail(row) {
  if (!row) {
    return
  }
  selectedProject.value = row
  projectDetailVisible.value = true
}

function closeProjectDetail() {
  projectDetailVisible.value = false
  selectedProject.value = null
}

function onYearChange() {
  fetchDashboard()
}

watch(statYear, () => {
  fetchDashboard()
})

onMounted(() => {
  fetchDashboard()
})
</script>

<style scoped>
.cp-page {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cp-page.is-loading {
  opacity: 0.92;
}

.cp-error {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 4px 12px;
  font-size: 12px;
  color: #ffb4b4;
  background: rgba(80, 20, 20, 0.75);
  border-radius: 4px;
  cursor: pointer;
}

.cp-year-bar {
  position: absolute;
  top: 8px;
  right: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-year-bar__label {
  font-size: 12px;
  color: var(--screen-text-secondary, #a8d4c8);
}

.cp-year-bar__select {
  min-width: 88px;
  height: 28px;
  padding: 0 8px;
  font-size: 13px;
  color: #e8eef5;
  background: rgba(4, 48, 40, 0.85);
  border: 1px solid var(--screen-line-dim, rgba(61, 217, 176, 0.42));
  border-radius: 4px;
  outline: none;
}

.screen-page--home-column {
  width: 617px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.screen-page--home-column-top {
  width: 617px;
  height: 201px;
  background: url('../../assets/home/big_box.png') no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}

.cp-overview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 12px;
  text-align: center;
}

.cp-overview-empty p {
  margin: 0;
  font-size: 13px;
  color: rgba(168, 212, 200, 0.85);
}

.cp-overview-empty__hint {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: rgba(106, 159, 144, 0.9) !important;
}

.cp-digital-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
}

.cp-digital-empty p {
  margin: 0;
  font-size: 13px;
  color: rgba(168, 212, 200, 0.85);
}

.cp-digital-empty__hint {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: rgba(106, 159, 144, 0.9) !important;
}

.screen-page--home-column-right {
  width: 617px;
  background: url('../../assets/pro/pro.png') no-repeat center center;
  background-size: 100% 100%;
}

.cp-digital-panel {
  height: 248px;
  display: flex;
  flex-direction: column;
}

.cp-digital-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 20px 16px 10px 10px;
  box-sizing: border-box;
}

.cp-digital-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-digital-group__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: #e8eef5;
  text-align: center;
  flex-shrink: 0;
}

/* 左右间隔竖线，对齐 big_box 发光分隔效果 */
.cp-digital-group__title::before,
.cp-digital-group__title::after {
  content: '';
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(69, 240, 184, 0.2) 18%,
    rgba(94, 240, 200, 0.95) 50%,
    rgba(69, 240, 184, 0.2) 82%,
    transparent 100%
  );
  box-shadow: 0 0 5px rgba(69, 240, 184, 0.55);
}

.cp-rings {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.cp-ring {
  flex: 1;
  min-width: 0;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cp-ring--single {
  flex: 0 1 auto;
  margin: 0 auto;
}

.cp-ring__figure {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-ring__outer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid rgba(236, 210, 123, 0.22);
  background: transparent;
}

/* 内圈：比外圈小、留间隔，描边略粗 */
.cp-ring__inner {
  position: relative;
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.cp-ring__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(160deg, #45f0b8 0%, #1d9a7a 42%, #ecd27b 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cp-ring__val {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.15;
  color: #e8eef5;
}

.cp-ring__val strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ecd27b;
}

.cp-ring__label {
  margin-top: 8px;
  width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: 10px;
  color: #a8d4c8;
  text-align: center;
  line-height: 1.35;
}

.screen-page--home-column-flex {
  width: 617px;
  height: 223px;
  display: flex;
  justify-content: space-between;
}

.screen-page--home-column-flex-item {
  width: 304px;
  height: 223px;
  background: url('../../assets/home/mini_box.png') no-repeat center center;
  background-size: 100% 100%;
}

.top_title {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  font-size: 18px;
  color: #fff;
  line-height: 35px;
  padding-left: 100px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.top_content {
  width: 100%;
  height: 75px;
  display: flex;
  flex-direction: row;
}

.content_1 {
  width: 180px;
  height: 100%;
}

.content_2 {
  width: 116px;
  height: 100%;
}

.content_3 {
  width: 190px;
  height: 100%;
}

.content_4 {
  width: 116px;
  height: 100%;
}

.content_num {
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 30px;
  margin: 10px 0;
}

.content_num :deep(.screen-scroll-number) {
  font-size: 20px;
}

.content_num :deep(.screen-scroll-number__strip),
.content_num :deep(.screen-scroll-number__sep) {
  background: linear-gradient(to bottom, #98e9aa, #ecd27b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.content_title {
  text-align: center;
  font-size: 12px;
  color: #fff;
}

.flex_title {
  width: 100%;
  box-sizing: border-box;
  height: 35px;
  font-size: 16px;
  color: #fff;
  line-height: 35px;
  padding-left: 45px;
  margin-bottom: 5px;
}

.flex_title--clickable {
  cursor: pointer;
}

.flex_title--clickable:hover {
  color: #ecd27b;
}

.flex_content {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  padding: 5px;
}

.flex_content--income {
  padding: 0 4px 2px;
}

.flex_content--projects {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
}

.cp-project-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 240, 184, 0.45) rgba(4, 30, 26, 0.35);
}

.cp-project-scroll::-webkit-scrollbar {
  width: 4px;
}

.cp-project-scroll::-webkit-scrollbar-thumb {
  background: rgba(69, 240, 184, 0.42);
  border-radius: 2px;
}

.cp-project-row {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(61, 217, 176, 0.15);
}

.cp-project-row--clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.cp-project-row--clickable:hover {
  background: rgba(69, 240, 184, 0.08);
}

.cp-project-row--clickable:active {
  background: rgba(69, 240, 184, 0.14);
}

.cp-project-row__name {
  font-size: 12px;
  color: #e8eef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-project-row__meta {
  margin-top: 2px;
  font-size: 10px;
  color: #a8d4c8;
  display: flex;
  gap: 8px;
}

.cp-project-row__type {
  color: #5ef0c8;
}

.cp-project-empty {
  text-align: center;
  padding: 24px 0;
  font-size: 12px;
  color: #6a9f90;
}

.cp-project-more {
  text-align: center;
  padding: 8px 0;
  font-size: 10px;
  color: #6a9f90;
}

.cp-project-footer {
  flex-shrink: 0;
  text-align: center;
  padding-top: 4px;
  font-size: 10px;
  color: #6a9f90;
}

.cp-detail-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(2, 18, 15, 0.72);
  backdrop-filter: blur(2px);
}

.cp-detail-panel {
  position: relative;
  width: min(920px, calc(100vw - 48px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid rgba(69, 240, 184, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(4, 48, 40, 0.96) 0%, rgba(3, 28, 24, 0.98) 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.cp-detail-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  font-size: 22px;
  line-height: 1;
  color: #a8d4c8;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.cp-detail-close:hover {
  color: #e8eef5;
  background: rgba(69, 240, 184, 0.15);
}

.cp-detail-title {
  flex-shrink: 0;
  padding: 14px 48px 10px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(61, 217, 176, 0.2);
}

.cp-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 28px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 240, 184, 0.45) rgba(4, 30, 26, 0.35);
}

.cp-detail-body::-webkit-scrollbar {
  width: 4px;
}

.cp-detail-body::-webkit-scrollbar-thumb {
  background: rgba(69, 240, 184, 0.42);
  border-radius: 2px;
}

.cp-detail-name {
  font-size: 15px;
  font-weight: 600;
  color: #ecd27b;
  line-height: 1.4;
  margin-bottom: 12px;
}

.cp-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  margin-bottom: 14px;
}

.cp-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cp-detail-label {
  font-size: 11px;
  color: #6a9f90;
}

.cp-detail-value {
  font-size: 12px;
  color: #e8eef5;
  line-height: 1.45;
  word-break: break-word;
}

.cp-detail-block {
  margin-bottom: 14px;
}

.cp-detail-block:last-child {
  margin-bottom: 0;
}

.cp-detail-block > .cp-detail-label {
  margin-bottom: 6px;
}

.cp-detail-text {
  font-size: 12px;
  line-height: 1.6;
  color: #c8ddd6;
  white-space: pre-wrap;
  word-break: break-word;
}

.cp-detail-cover {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(61, 217, 176, 0.25);
}

.cp-detail-video {
  display: block;
  width: 100%;
  max-height: 320px;
  border-radius: 6px;
  background: #000;
}
</style>
