<template>
  <view class="sub-page">
    <TopBar title="任务详情" show-back />

    <view v-if="loading" class="py-10 text-center">
      <text class="empty-text">加载中...</text>
    </view>

    <view v-else-if="task" class="px-4 py-4 pb-8">
      <view class="flex justify-end mb-3">
        <view class="toggle-all-btn" @click="toggleAllSections">
          <text class="uni-icons" :class="allExpanded ? 'uniui-arrow-up' : 'uniui-arrow-down'"></text>
          <text class="toggle-all-text">{{ allExpanded ? '一键收起' : '一键展示' }}</text>
        </view>
      </view>

      <!-- 任务进度 -->
      <view class="detail-block">
        <view class="detail-block-header">
          <text class="uni-icons uniui-compose header-icon text-purple-500 mr-2"></text>
          <text class="header-title flex-1">任务进度</text>
          <view class="flex items-center">
            <StatusTag :status="task.status" />
            <text v-if="isEmergency" class="emergency-tag ml-2">应急</text>
          </view>
        </view>
        <view class="progress-container">
          <view class="progress-track">
            <view class="progress-fill" :style="{ width: progressWidth }"></view>
            <view
              v-for="i in 4"
              :key="i"
              class="progress-step"
              :class="{ 'progress-step-completed': i <= progressStep, 'progress-step-active': i === progressStep && i !== 4 }"
            >
            </view>
          </view>
          <view class="progress-labels">
            <text
              v-for="(label, i) in progressLabels"
              :key="i"
              class="progress-label"
              :class="i < progressStep ? 'progress-label-active' : ''"
            >{{ label }}</text>
          </view>
        </view>
      </view>

      <!-- 项目信息 -->
      <view v-if="project" class="detail-block">
        <view class="detail-block-header" @click="projectExpanded = !projectExpanded">
          <text class="uni-icons uniui-home-filled header-icon text-blue-500 mr-2"></text>
          <text class="header-title flex-1">项目信息</text>
          <text
            class="uni-icons uniui-arrow-down header-toggle transition-transform"
            :class="projectExpanded ? 'rotate-180' : ''"
          ></text>
        </view>
        <view v-if="projectExpanded">
          <view class="detail-row">
            <text class="detail-label">项目名称</text>
          <text class="detail-value font-medium">{{ project.projectName || '-' }}</text>
        </view>
        <view v-if="coopTypeText" class="detail-row">
          <text class="detail-label">合作类型</text>
          <text class="detail-value">
            <text class="tag tag-blue">{{ coopTypeText }}</text>
          </text>
        </view>
        <view v-if="facilityTypeText" class="detail-row">
          <text class="detail-label">设施类型</text>
          <text class="detail-value">{{ facilityTypeText }}</text>
        </view>
        <view v-if="projectAddress" class="detail-row">
          <text class="detail-label">项目地址</text>
          <text class="detail-value">{{ projectAddress }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">合同总价格</text>
          <text class="detail-value text-orange-500 font-bold">{{ contractAmountText }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">服务有效期</text>
          <text class="detail-value">{{ servicePeriodText }}</text>
        </view>
        <view v-if="locationContacts.length > 0" class="detail-row detail-row-column">
          <text class="detail-label mb-2">联系人列表</text>
          <view class="w-full">
            <view
              v-for="(contact, index) in locationContacts"
              :key="index"
              class="contact-item"
            >
              <text class="text-sm text-gray-800">{{ contact.name }}</text>
              <text
                v-if="contact.phone"
                class="text-sm text-blue-500"
                @click="callPhone(contact.phone)"
              >{{ contact.phone }}</text>
            </view>
          </view>
        </view>
        </view>
      </view>

      <!-- 施工信息 -->
      <view class="detail-block">
        <view class="detail-block-header" @click="constructionExpanded = !constructionExpanded">
          <text class="uni-icons uniui-settings-filled header-icon text-green-500 mr-2"></text>
          <text class="header-title flex-1">施工信息</text>
          <text
            class="uni-icons uniui-arrow-down header-toggle transition-transform"
            :class="constructionExpanded ? 'rotate-180' : ''"
          ></text>
        </view>
        <view v-if="constructionExpanded">
          <view v-if="serviceTimeText" class="detail-row">
          <text class="detail-label">服务时间</text>
          <text class="detail-value">{{ serviceTimeText }}</text>
        </view>
        <view v-if="task.faultLocation" class="detail-row">
          <text class="detail-label">故障位置</text>
          <text class="detail-value">{{ task.faultLocation }}</text>
        </view>
        <view v-if="geoLocationText" class="detail-row">
          <text class="detail-label">地理位置</text>
          <text class="detail-value text-blue-500" @click="openMap">
            <text class="uni-icons uniui-location-filled mr-1"></text>
            点击查看地图
          </text>
        </view>
        <view v-if="faultDescription" class="detail-row detail-row-column">
          <text class="detail-label mb-1">故障描述</text>
          <text class="detail-value text-gray-600 text-sm text-left">{{ faultDescription }}</text>
        </view>
        <view v-if="faultMedia.length > 0" class="detail-row detail-row-column">
          <text class="detail-label mb-2">故障图片/视频</text>
          <view class="flex flex-wrap gap-2">
            <image
              v-for="(url, index) in faultMedia"
              :key="index"
              :src="url"
              class="media-thumb"
              mode="aspectFill"
              @click="previewMedia(index)"
            />
          </view>
        </view>
        <view v-if="constructionTypeText" class="detail-row">
          <text class="detail-label">施工类型</text>
          <text class="detail-value">{{ constructionTypeText }}</text>
        </view>
        <view v-if="task.constructionFacility" class="detail-row">
          <text class="detail-label">施工设施</text>
          <text class="detail-value">{{ getFacilityTypeText(task.constructionFacility) }}</text>
        </view>
        <view v-if="task.serviceMethod" class="detail-row">
          <text class="detail-label">服务方式</text>
          <text class="detail-value">{{ getServiceMethodText(task.serviceMethod) }}</text>
        </view>
        <view v-if="toolRequirementText" class="detail-row">
          <text class="detail-label">建议出车</text>
          <text class="detail-value">{{ toolRequirementText }}</text>
        </view>
        <view v-if="task.waterDistance" class="detail-row">
          <text class="detail-label">取水距离</text>
          <text class="detail-value">{{ getWaterDistanceText(task.waterDistance) }}</text>
        </view>
        <view v-if="task.outletNormal !== undefined && task.outletNormal !== null" class="detail-row">
          <text class="detail-label">化粪池排口</text>
          <text class="detail-value">{{ task.outletNormal === 1 ? '正常' : '异常' }}</text>
        </view>
        <view v-if="task.assistantInfo" class="detail-row detail-row-column">
          <text class="detail-label mb-1">施工助力信息</text>
          <text class="detail-value text-gray-600 text-sm text-left">{{ task.assistantInfo }}</text>
        </view>
        <view v-if="task.estimatedWorkload" class="detail-row">
          <text class="detail-label">预计作业量</text>
          <text class="detail-value">{{ task.estimatedWorkload }}</text>
        </view>
        <view v-if="task.estimatedDuration" class="detail-row">
          <text class="detail-label">预计工时</text>
          <text class="detail-value">{{ task.estimatedDuration }}</text>
        </view>
        <view v-if="task.acceptanceRequirement" class="detail-row">
          <text class="detail-label">验收要求</text>
          <text class="detail-value">{{ task.acceptanceRequirement }}</text>
        </view>
        <view v-if="task.hasPreviousWork !== undefined && task.hasPreviousWork !== null" class="detail-row">
          <text class="detail-label">前期施工关联</text>
          <text class="detail-value">{{ task.hasPreviousWork === 1 ? '是' : '否' }}</text>
        </view>
        <view v-if="task.acceptanceMethod" class="detail-row">
          <text class="detail-label">验收方式</text>
          <text class="detail-value">{{ getAcceptanceMethodText(task.acceptanceMethod) }}</text>
        </view>
        <view v-if="partyAContacts.length > 0" class="detail-row detail-row-column">
          <text class="detail-label mb-2">甲方当事人</text>
          <view class="w-full">
            <view
              v-for="(contact, index) in partyAContacts"
              :key="index"
              class="contact-item"
            >
              <view class="flex-1">
                <text class="text-sm text-gray-800">{{ contact.name }}</text>
                <text v-if="contact.phone" class="text-xs text-gray-500 ml-2">{{ maskPhone(contact.phone) }}</text>
              </view>
              <button
                v-if="contact.phone"
                class="phone-circle"
                @click="callPhone(contact.phone)"
              >
                <text class="uni-icons uniui-phone-filled phone-icon"></text>
              </button>
            </view>
          </view>
        </view>
        <view v-if="task.remark" class="detail-row detail-row-column">
          <text class="detail-label mb-1">备注</text>
          <text class="detail-value text-red-500 text-sm text-left">{{ task.remark }}</text>
        </view>
        </view>
      </view>

      <!-- 处理记录 -->
      <view v-if="timelineRecords.length > 0" class="detail-block">
        <view class="detail-block-header" @click="timelineExpanded = !timelineExpanded">
          <text class="uni-icons uniui-reload header-icon text-orange-500 mr-2"></text>
          <text class="header-title flex-1">处理记录</text>
          <text
            class="uni-icons uniui-arrow-down header-toggle transition-transform"
            :class="timelineExpanded ? 'rotate-180' : ''"
          ></text>
        </view>
        <view v-if="timelineExpanded" class="p-4">
          <Timeline :records="timelineRecords" />
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view v-if="showActions" class="bottom-actions">
        <view class="action-btn action-btn-cancel" @click="handleCancel">取消任务</view>
        <view class="action-btn action-btn-urge" @click="handleUrge">
          <text class="uni-icons uniui-notification-filled action-btn-icon"></text>
          催单
        </view>
      </view>
    </view>

    <EmptyState v-else message="任务不存在" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useTaskStore } from '@/stores/task'
import { useAuthStore } from '@/stores/auth'
import TopBar from '@/components/common/TopBar.vue'
import StatusTag from '@/components/common/StatusTag.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Timeline from '@/components/common/Timeline.vue'
import type { TimelineRecord } from '@/components/common/Timeline.vue'
import { getTaskDetail, urgeTask, cancelTask } from '@/api/task'
import { getProjectDetail } from '@/api/project'
import { formatDate, formatMoney, getCooperationTypeText, getConstructionTypeText, getFacilityTypeText, getServiceMethodText, getSuggestedVehicleText, getWaterDistanceText, getAcceptanceMethodText, parseJsonArray, formatTaskLogAction, getTaskLogRole } from '@/utils'
import type { Project, LocationContact } from '@/types'

const taskStore = useTaskStore()
const authStore = useAuthStore()

const task = ref<any>(null)
const project = ref<Project | null>(null)
const loading = ref(false)
const projectExpanded = ref(true)
const constructionExpanded = ref(true)
const timelineExpanded = ref(true)

const allExpanded = computed(() => {
  return projectExpanded.value && constructionExpanded.value && timelineExpanded.value
})

const extra = computed(() => {
  if (!task.value?.extraData) return {} as any
  try {
    return JSON.parse(task.value.extraData)
  } catch {
    return {} as any
  }
})

const isEmergency = computed(() => {
  const t = task.value
  if (!t) return false
  return t.taskType === 'emergency' || t.serviceMethod === '应急' || ['urgent', 'very_urgent'].includes(t.urgencyLevel)
})

const constructionTypeText = computed(() => {
  const t = task.value
  if (!t) return '-'
  const map: Record<string, string> = { dredge: '疏通', clean: '清掏', inspect: '排查', repair: '维修', emergency: '应急' }
  const raw = t.constructionType || (t.taskType ? map[t.taskType] || t.taskType : '')
  return raw ? getConstructionTypeText(raw) : '-'
})

const serviceTimeText = computed(() => {
  const t = task.value
  if (!t) return '待定'
  const time = t.serviceTime || t.expectedArrivalTime || ''
  if (time) return formatDate(time, 'YYYY-MM-DD HH:mm')
  const date = t.planDate || ''
  const rangeMap: Record<string, string> = { morning: '上午', afternoon: '下午', evening: '晚上' }
  const range = rangeMap[t.planTimeRange] || t.planTimeRange || ''
  return date || range ? `${date} ${range}`.trim() : '待定'
})

const coopTypeText = computed(() => {
  return project.value?.cooperationType ? getCooperationTypeText(project.value.cooperationType) : ''
})

const facilityTypeText = computed(() => {
  const raw = project.value?.facilityTypes || task.value?.facilityType
  if (!raw) return ''
  const list = parseJsonArray<string>(raw)
  if (list.length > 0) {
    return list.map(t => getFacilityTypeText(t)).join('、')
  }
  return typeof raw === 'string' ? raw : ''
})

const projectAddress = computed(() => {
  if (!project.value) return task.value?.address || ''
  const p = project.value
  return [p.province, p.city, p.district, p.street, p.detailAddress || p.address].filter(Boolean).join('') || p.address || task.value?.address || ''
})

const contractAmountText = computed(() => {
  const amount = project.value?.contractAmount
  return amount !== undefined && amount !== null ? formatMoney(amount) : '-'
})

const servicePeriodText = computed(() => {
  const p = project.value
  if (!p) return '-'
  const start = p.serviceStartDate || ''
  const end = p.serviceEndDate || ''
  if (start && end) return `${start} 至 ${end}`
  return start || end || '-'
})

const locationContacts = computed<LocationContact[]>(() => {
  const raw = project.value?.locationContacts
  if (!raw) return []
  return parseJsonArray<LocationContact>(raw)
})

const faultDescription = computed(() => {
  return task.value?.serviceContent || task.value?.faultDesc || task.value?.faultDescription || ''
})

const geoLocationText = computed(() => {
  if (extra.value.geoLocation) return extra.value.geoLocation
  if (task.value?.geoLocation) return task.value.geoLocation
  if (extra.value.latitude && extra.value.longitude) return `${extra.value.latitude}, ${extra.value.longitude}`
  return ''
})

const faultMedia = computed<string[]>(() => {
  const photos = extra.value.faultPhotos || extra.value.photos || extra.value.media
  if (!photos) return []
  if (Array.isArray(photos)) return photos
  return String(photos).split(',').filter(Boolean)
})

const toolRequirementText = computed(() => {
  const raw = task.value?.toolRequirement || extra.value.suggestedVehicle || extra.value.toolRequirement || ''
  return raw ? getSuggestedVehicleText(raw) : ''
})

const partyAContacts = computed<Array<{ name: string; phone: string }>>(() => {
  const list = task.value?.partyAContacts || extra.value.partyAContacts || extra.value.partyA
  if (!list) return []
  if (Array.isArray(list)) return list
  return []
})

const canUrge = computed(() => {
  return task.value && !['completed', 'cancelled', 'rejected'].includes(task.value.status)
})

const showActions = computed(() => {
  return task.value && !['completed', 'cancelled', 'rejected'].includes(task.value.status)
})

const progressLabels = ['发布', '调度确认', '施工', '完成']
const progressStep = computed(() => {
  const status = task.value?.status
  if (!status) return 0
  switch (status) {
    case 'pending':
    case 'auditing':
    case 'rejected':
    case 'cancelled':
      return 1
    case 'approved':
      return 2
    case 'assigned':
    case 'in_progress':
    case 'confirmed':
    case 'scheduled':
    case 'departed':
    case 'arrived':
    case 'constructing':
    case 'inspecting':
      return 3
    case 'completed':
      return 4
    default:
      return 1
  }
})

const progressWidth = computed(() => {
  const step = progressStep.value
  if (step <= 1) return '0%'
  if (step >= 4) return '100%'
  // 4 个节点分成 3 段
  const positions = ['0%', '0%', '50%', '100%']
  return positions[step - 1] || '0%'
})

const timelineRecords = computed<TimelineRecord[]>(() => {
  const logs: any[] = task.value?.logList || []
  return logs.map(log => ({
    action: formatTaskLogAction(log.operationType || log.action, log.operation),
    time: log.createTime ? formatDate(log.createTime, 'YYYY-MM-DD HH:mm') : '',
    operator: log.operatorName || log.operator || log.createBy || '系统',
    role: log.operatorRole || getTaskLogRole(log.operationType || log.action),
  }))
})

function toggleAllSections() {
  const next = !allExpanded.value
  projectExpanded.value = next
  constructionExpanded.value = next
  timelineExpanded.value = next
}

function maskPhone(phone: string): string {
  if (!phone) return ''
  if (phone.length === 11) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  }
  return phone
}

function callPhone(phone: string) {
  if (!phone) return
  uni.makePhoneCall({ phoneNumber: phone })
}

function openMap() {
  const lat = Number(extra.value.latitude)
  const lng = Number(extra.value.longitude)
  if (!lat || !lng) return
  uni.openLocation({ latitude: lat, longitude: lng, name: task.value?.faultLocation || '故障位置' })
}

function previewMedia(index: number) {
  uni.previewImage({ urls: faultMedia.value, current: index })
}

async function handleUrge() {
  if (!task.value?.taskId) return
  const res = await new Promise<any>((resolve) => {
    uni.showModal({
      title: '催单',
      editable: true,
      placeholderText: '请输入催单原因',
      confirmText: '确认催单',
      cancelText: '取消',
      success: resolve,
      fail: () => resolve({ confirm: false }),
    })
  })
  if (!res.confirm) return
  try {
    await urgeTask(task.value.taskId, res.content || '用户催单',
      authStore.user?.id ? Number(authStore.user.id) : 0,
      authStore.user?.name || '')
    uni.showToast({ title: '催单成功', icon: 'success' })
    loadDetail(task.value.taskId)
  } catch (error) {
    console.error('催单失败', error)
  }
}

async function handleCancel() {
  if (!task.value?.taskId) return
  const res = await new Promise<any>((resolve) => {
    uni.showModal({
      title: '取消任务',
      editable: true,
      placeholderText: '请输入取消原因（必填）',
      confirmText: '确认取消',
      cancelText: '暂不取消',
      success: resolve,
      fail: () => resolve({ confirm: false }),
    })
  })
  if (!res.confirm) return
  const reason = (res.content || '').trim()
  if (!reason) {
    uni.showToast({ title: '取消原因不能为空', icon: 'none' })
    return
  }
  try {
    await cancelTask(
      task.value.taskId,
      reason,
      authStore.user?.id ? Number(authStore.user.id) : 0,
      authStore.user?.name || ''
    )
    uni.showToast({ title: '任务已取消', icon: 'success' })
    loadDetail(task.value.taskId)
  } catch (error) {
    console.error('取消任务失败', error)
    uni.showToast({ title: '取消任务失败', icon: 'none' })
  }
}

onLoad((options) => {
  if (options?.id && options.id !== 'NaN') {
    loadDetail(Number(options.id))
  } else if (taskStore.currentTask) {
    task.value = taskStore.currentTask
    loadProject(taskStore.currentTask.projectId)
  }
})

async function loadDetail(taskId: number) {
  loading.value = true
  try {
    const res: any = await getTaskDetail(taskId)
    task.value = res
    loadProject(res?.projectId)
  } catch (e) {
    console.error('加载任务详情失败', e)
  } finally {
    loading.value = false
  }
}

function loadProject(projectId: number | string | undefined) {
  if (!projectId) return
  getProjectDetail(projectId)
    .then(p => { project.value = p as Project })
    .catch(() => {})
}
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6f7f9;
  padding-bottom: 80px;
}

.emergency-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #dc2626;
  background-color: #fef2f2;
}

.toggle-all-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.toggle-all-text {
  font-size: 12px;
  color: #666666;
  margin-left: 3px;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  z-index: 20;
  box-sizing: border-box;
}

.action-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-cancel {
  color: #666666;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.action-btn-urge {
  color: #ffffff;
  background-color: #3b82f6;
}

.action-btn-icon {
  font-size: 15px;
  margin-right: 4px;
}

.detail-block {
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.detail-block-header {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.header-icon {
  font-size: 16px;
}

.header-toggle {
  font-size: 13px;
  color: #999999;
  padding: 4px;
}

.transition-transform {
  transition: transform 0.2s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

.header-title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}

.detail-row {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row-column {
  flex-direction: column;
  align-items: flex-start;
}

.detail-label {
  color: #666666;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 12px;
}

.detail-row-column .detail-label {
  margin-right: 0;
}

.detail-value {
  color: #333333;
  font-size: 14px;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}

.detail-row-column .detail-value {
  margin-left: 0;
  width: 100%;
}

.text-blue-500 {
  color: #3b82f6;
}

.text-red-500 {
  color: #ef4444;
}

.text-orange-500 {
  color: #f97316;
}

.font-bold {
  font-weight: 700;
}

.text-gray-600 {
  color: #4b5563;
}

.text-left {
  text-align: left;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.tag-blue {
  background-color: #e6f0ff;
  color: #2563eb;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.contact-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.phone-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(164, 216, 152, 0.24);
}

.phone-circle::after {
  border: none;
}

.phone-icon {
  font-size: 13px;
  color: #368f6f;
}

.media-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: #f3f4f6;
}

.progress-container {
  padding: 16px;
}

.progress-track {
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progress-step {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e5e7eb;
  border: 2px solid #ffffff;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.progress-step-completed {
  background-color: #3b82f6;
}

.progress-step-active {
  background-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.progress-label {
  font-size: 11px;
  color: #999999;
  text-align: center;
  flex: 1;
}

.progress-label-active {
  color: #3b82f6;
  font-weight: 500;
}

.empty-text {
  font-size: 13px;
  color: #9ca3af;
}
</style>
