<template>
  <ModalDialog :visible="visible" title="查看详情" @close="handleClose">
    <div class="problem-detail">
      <!-- 基本情况 -->
      <div class="section">
        <div class="section-header">基本情况</div>
        <div class="basic-info">
          <!-- 左侧：基本信息 -->
          <div class="basic-info-left">
            <div class="info-grid">
              <div class="info-item">
                <span class="label">问题编号：</span>
                <span class="value">WT-2026-0326-FX001</span>
              </div>
              <div class="info-item">
                <span class="label">预警时间：</span>
                <span class="value">2026-03-26 09:00</span>
              </div>
              <div class="info-item">
                <span class="label">预警对象：</span>
                <span class="value">淮阳区民政局</span>
              </div>
              <div class="info-item">
                <span class="label">预警对象：</span>
                <span class="value">淮阳区安全局</span>
              </div>
              <div class="info-item">
                <span class="label">问题类型：</span>
                <span class="value">消防安全隐患</span>
              </div>
              <div class="info-item full-width">
                <span class="label">具体问题：</span>
                <span class="value"
                  >淮阳区第二综合养老服务中心屡次出现疏散通道杂物占用等消防安全隐患问题且整改不到位，区民政局存在监管不到位、整改督促不力的问题。</span
                >
              </div>
              <div class="info-item">
                <span class="label">风险等级：</span>
                <span class="value highlight-high">高</span>
              </div>
              <div class="info-item">
                <span class="label">问题来源：</span>
                <span class="value">廉政风险AI监督员</span>
              </div>
            </div>
          </div>

          <!-- 右侧：当前整改进度 -->
          <div class="basic-info-right">
            <span class="label">当前整改进度：</span>
            <div class="progress-timeline">
              <div class="progress-item active">
                <div class="progress-dot"></div>
                <div class="progress-content">
                  <div class="progress-label">问题预警</div>
                  <div class="progress-info">
                    <div class="progress-time">2026-03-26 09:00</div>
                    <div class="progress-source">廉政风险AI监督员</div>
                  </div>
                </div>
              </div>
              <div class="progress-item active">
                <div class="progress-dot"></div>
                <div class="progress-content">
                  <div class="progress-label">发布廉政令</div>
                  <div class="progress-info">
                    <div class="progress-time">2026-03-26 09:32</div>
                    <div class="progress-source">区纪委监委</div>
                  </div>
                </div>
              </div>
              <div class="progress-item current">
                <div class="progress-dot"></div>
                <div class="progress-content">
                  <div class="progress-label">整改反馈</div>
                  <div class="progress-info">
                    <div class="progress-time">2026-03-27 15:08</div>
                    <div class="progress-source">淮阳区民政局</div>
                  </div>
                </div>
              </div>
              <div class="progress-item pending">
                <div class="progress-dot"></div>
                <div class="progress-content">
                  <div class="progress-label">审核评估</div>
                  <div class="progress-info">
                    <div class="progress-time"></div>
                    <div class="progress-source"></div>
                  </div>
                </div>
              </div>
              <div class="progress-item pending">
                <div class="progress-dot"></div>
                <div class="progress-content">
                  <div class="progress-label">归档</div>
                  <div class="progress-info">
                    <div class="progress-time"></div>
                    <div class="progress-source"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 问题详情 -->
      <div class="section">
        <div class="section-header">问题详情</div>

        <!-- 预警通知时间线 -->
        <div class="timeline">
          <!-- 第一次预警 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-header">
                <span class="timeline-time">2026-03-01 14:30</span>
                <span class="timeline-title">首次预警通知</span>
              </div>
              <div class="timeline-body">
                <div class="detail-row">
                  <span class="detail-label">所涉机构：</span>
                  <span class="detail-value">淮阳区第二综合养老服务中心</span>
                  <span class="detail-label">发现主体：</span>
                  <span class="detail-value">消防安全AI监管员</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">具体问题：</span>
                  <span class="detail-value"
                    >3号楼1层疏散通道堆放大量的废旧纸箱、旧家具，占用疏散通道</span
                  >
                </div>
                <div class="detail-row">
                  <span class="detail-label">附件：</span>
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fire%20escape%20blocked%20by%20boxes%20and%20furniture%20in%20nursing%20home&image_size=square"
                    class="attachment-img"
                  />
                </div>
                <div class="detail-row">
                  <span class="detail-label">处置主体：</span>
                  <span class="detail-value">区民政局</span>
                  <span class="detail-label">处置时间：</span>
                  <span class="detail-value">2026-03-02</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">整改要求：</span>
                  <span class="detail-value">要求立即清理杂物，并于3月5日前书面报告整改情况</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">整改时限：</span>
                  <span class="detail-value">2026年3月5日</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">整改主体：</span>
                  <span class="detail-value">淮阳区第二综合养老服务中心</span>
                  <span class="detail-label">处置时间：</span>
                  <span class="detail-value">2026-03-04</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">反馈主体：</span>
                  <span class="detail-value">淮阳区第二综合养老服务中心</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">整改内容：</span>
                  <span class="detail-value">已完成杂物清理</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">附件：</span>
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=clean%20fire%20escape%20in%20nursing%20home&image_size=square"
                    class="attachment-img"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 第二次预警 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-header">
                <span class="timeline-time">2026-03-24 08:30</span>
                <span class="timeline-title">第二次预警通知</span>
              </div>
              <div class="timeline-body">
                <div class="detail-row">
                  <span class="detail-label">发现主体：</span>
                  <span class="detail-value">消防安全AI监管员</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">具体问题：</span>
                  <span class="detail-value">1号楼大厅北侧疏散通道堆放轮椅、拐杖等杂物</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">附件：</span>
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=wheelchairs%20and%20walking%20sticks%20blocking%20corridor&image_size=square"
                    class="attachment-img"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 第三次预警 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-header">
                <span class="timeline-time">2026-03-26 08:30</span>
                <span class="timeline-title">第三次预警通知</span>
              </div>
              <div class="timeline-body">
                <div class="detail-row">
                  <span class="detail-label">发现主体：</span>
                  <span class="detail-value">消防安全AI监管员</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">具体问题：</span>
                  <span class="detail-value">2号楼1层疏散通道堆放废弃床垫、纸箱等杂物</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">附件：</span>
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=mattress%20and%20cardboard%20boxes%20blocking%20emergency%20exit&image_size=square"
                    class="attachment-img"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 第四次预警 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-header">
                <span class="timeline-time">2026-03-26 09:00</span>
                <span class="timeline-title">第四次预警通知</span>
              </div>
              <div class="timeline-body">
                <div class="detail-row">
                  <span class="detail-label">发现主体：</span>
                  <span class="detail-value">廉政风险AI监督员</span>
                  <span class="detail-label">预警对象：</span>
                  <span class="detail-value">淮阳区民政局</span>
                </div>
                <div class="detail-row">
                  <span class="detail-label">具体问题：</span>
                  <span class="detail-value"
                    >淮阳区第二综合养老服务中心屡次出现疏散通道杂物占用等消防安全隐患问题且整改不到位，区民政局存在监管不到位、整改督促不力的问题。</span
                  >
                </div>
                <div class="detail-row">
                  <span class="detail-label">风险分析：</span>
                  <span class="detail-value"
                    >整改审查流于形式：区民政局对首次整改情况仅做表面核查，未深究问题根源，导致机构"应付式整改"。跟踪监管与长效机制双缺位：日常巡查频次不足，未对整改成效开展持续性跟踪监测，亦未督促机构建立常态化管理制度，导致问题反复反弹缺乏约束力。风险后果：同一问题屡次出现，既留下消防安全隐患，也暴露出区民政局监管督促流于表面，存在形式主义倾向</span
                  >
                </div>
                <div class="detail-row">
                  <span class="detail-label">附件：</span>
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fire%20escape%20blocked%20by%20various%20items%20in%20elderly%20care%20facility&image_size=square"
                    class="attachment-img"
                  />
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=wheelchairs%20blocking%20hallway%20in%20nursing%20home&image_size=square"
                    class="attachment-img"
                  />
                  <img
                    src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=mattress%20blocking%20emergency%20exit&image_size=square"
                    class="attachment-img"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 发布廉政令 -->
      <div class="section">
        <div class="section-header">发布廉政令</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">发布时间：</span>
            <span class="value">2026-03-26 09:32</span>
            <span class="label">发布主体：</span>
            <span class="value">区纪委监委</span>
          </div>
          <div class="info-item">
            <span class="label">预警对象：</span>
            <span class="value">淮阳区民政局</span>
          </div>
          <div class="info-item">
            <span class="label">整改期限：</span>
            <span class="value">2026年03月28日</span>
          </div>
          <div class="info-item full-width">
            <span class="label">整改要求：</span>
            <span class="value"
              >立即督促淮阳区第二综合养老服务中心清理全院疏散通道杂物，确保24小时畅通，消除现实安全隐患，并对相关人员提醒谈话，压实行业监管责任，切实建立养老机构安全隐患整改跟踪问效机制，完善全流程监管闭环，并于整改期限前通过平台报送监管履职整改情况。</span
            >
          </div>
        </div>
      </div>

      <!-- 整改反馈 -->
      <div class="section">
        <div class="section-header">整改反馈</div>
        <div class="feedback-section">
          <div class="feedback-header">
            <div class="feedback-badge">整改情况</div>
            <div class="info-row">
              <span class="label">整改时间：</span>
              <span class="value">2026-03-27 15:08</span>
            </div>
            <div class="info-row highlight">
              <span class="label">具体落实人：</span>
              <span class="value">王闯（区民政局养老股股长，联系电话：15612238465）</span>
            </div>
          </div>

          <div class="feedback-body">
            <div class="feedback-title">具体整改措施：</div>
            <div class="feedback-content">
              <div class="measure-item">
                <span class="measure-title">压实监管责任，强化行业督导：</span>
                <span class="measure-desc"
                  >督促机构整改：立即责令淮阳区第二综合养老服务中心清理全院疏散通道，排查整改全院12处通道隐患，共清理杂物点位5处，消除安全隐患；</span
                >
              </div>
              <div class="measure-item">
                <span class="measure-title">严肃追责问责：</span>
                <span class="measure-desc"
                  >对养老机构负责人进行约谈，对安全员进行批评教育，压实机构主体责任；</span
                >
              </div>
              <div class="measure-item">
                <span class="measure-title">健全监管机制：</span>
                <span class="measure-desc"
                  >建立养老机构安全隐患"日巡查、周通报、月回头看"制度，完善"发现-整改-验收-销号"全流程监管闭环，防止问题反弹；</span
                >
              </div>
              <div class="measure-item">
                <span class="measure-title">开展专项检查：</span>
                <span class="measure-desc"
                  >举一反三，对全区19家养老机构开展疏散通道专项排查，共发现并整改同类隐患23处。</span
                >
              </div>
            </div>
            <div class="feedback-images">
              <img
                src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=clean%20emergency%20exit%20in%20nursing%20home&image_size=square"
                class="attachment-img"
              />
              <img
                src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=empty%20corridor%20in%20elderly%20care%20facility&image_size=square"
                class="attachment-img"
              />
              <img
                src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=clear%20fire%20escape%20stairs&image_size=square"
                class="attachment-img"
              />
            </div>
          </div>

          <!-- 警示教育开展情况 -->
          <div class="sub-section">
            <div class="sub-section-title">警示教育开展情况：</div>
            <div class="sub-section-content">
              <div class="info-row">
                <span class="label">时间：</span>
                <span class="value">2026-03-27</span>
              </div>
              <div class="info-row">
                <span class="label">内容：</span>
                <span class="value"
                  >3月27日，区民政局召开安全警示教育会，通报淮阳区第二综合养老服务中心"通道隐患反复出现"典型案例，组织全区34家养老机构负责人开展消防安全专题培训，要求养老机构负责人落实消防安全主体责任，筑牢安全防线。</span
                >
              </div>
              <img
                src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=safety%20education%20meeting%20in%20conference%20room&image_size=landscape_16_9"
                class="attachment-img-large"
              />
            </div>
          </div>

          <!-- 人员处理情况 -->
          <div class="sub-section">
            <div class="sub-section-title">人员处理情况：</div>
            <div class="sub-section-content">
              <div class="info-row">
                <span class="label">运用时间：</span>
                <span class="value">2026-03-27</span>
              </div>
              <div class="info-row">
                <span class="label">涉及干部：</span>
                <span class="value">张爱国（院长）</span>
              </div>
              <div class="info-row">
                <span class="label">采用四种形态：</span>
                <span class="value">提醒谈话</span>
              </div>
              <div class="info-row">
                <span class="label">具体情况说明：</span>
                <span class="value"
                  >2026年3月27日，对淮阳区第二综合养老服务中心院长张爱国进行提醒谈话，指出其在消防安全隐患整改工作中主体责任落实不力、整改闭环不严格的问题，责令深刻反思，切实扛起养老机构安全管理第一责任人职责，确保同类问题不再发生。</span
                >
              </div>
              <img
                src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=official%20conversation%20in%20office&image_size=square"
                class="attachment-img"
              />
              <div class="doc-link">谈话记录.doc</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 制度建设等长效机制建设 -->
      <div class="section">
        <div class="section-header">制度建设等长效机制建设：</div>
        <div class="mechanism-card">
          <div class="mechanism-header">
            <div class="mechanism-badge">1</div>
            <div class="mechanism-info">
              <div class="info-row">
                <span class="label">制度建设类型：</span>
                <span class="value">新增制度</span>
                <span class="label">建设时间：</span>
                <span class="value">2026-03-27</span>
              </div>
              <div class="info-row">
                <span class="label">制度名称：</span>
                <span class="value">《淮阳区养老机构消防安全通道管理办法》</span>
              </div>
            </div>
          </div>
          <div class="mechanism-body">
            <div class="info-row">
              <span class="label">具体说明：</span>
              <span class="value">
                1. 要求全区养老机构建立每日通道巡查制度，及时发现并处置杂物堵塞隐患； 2.
                明确隐患整改时限：一般问题2小时内、复杂问题4小时内清理完毕； 3. 区民政局强化随机抽查
                + 考核问责，对整改不力、隐患反复的机构严肃处理。
              </span>
            </div>
            <div class="info-row">
              <span class="label">具体制度：</span>
              <span class="value doc-link">《淮阳区养老机构消防安全通道管理办法》制度原文.doc</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 自动审核与评估 -->
      <div class="section">
        <div class="section-header">自动审核与评估</div>
        <div class="assessment-section">
          <div class="assessment-header">
            <div class="assessment-item">
              <span class="label">审核结论：</span>
              <span class="value badge-passed">审核通过</span>
            </div>
            <div class="assessment-item">
              <span class="label">质量得分：</span>
              <div class="score-bar">
                <div class="score-fill" style="width: 85%"></div>
              </div>
              <span class="value score">85分（满分100分）</span>
            </div>
          </div>

          <div class="assessment-body">
            <div class="assessment-title">质量评估（AI自动分析）</div>
            <div class="assessment-subtitle">以案促改情况</div>

            <div class="assessment-grid">
              <div class="assessment-row">
                <span class="label">整改措施针对性：</span>
                <span class="value">措施与原因高度对应，责任人与时限明确，操作性强。</span>
                <span class="rating excellent">优秀</span>
              </div>
              <div class="assessment-row">
                <span class="label">长效机制建设：</span>
                <span class="value">完成全面排查，并建立新制度，有效预防复发。</span>
                <span class="rating good">良好</span>
              </div>
              <div class="assessment-row">
                <span class="label">警示教育开展情况：</span>
                <span class="value">已召开全员警示大会，案例典型，佐证材料充分。</span>
                <span class="rating excellent">优秀</span>
              </div>
              <div class="assessment-row">
                <span class="label">人员处理适当性：</span>
                <span class="value"
                  >对直接和基层管理人员处理符合规定，未追究更高层级监管领导责任。</span
                >
                <span class="rating qualified">合格</span>
              </div>
              <div class="assessment-row">
                <span class="label">资金追缴情况：</span>
                <span class="value">本次问题不涉及资金流失。</span>
                <span class="rating not-applicable">不适用</span>
              </div>
              <div class="assessment-row">
                <span class="label">整体材料完整性：</span>
                <span class="value">表格填写完整，逻辑清晰，关键附件齐全。</span>
                <span class="rating excellent">优秀</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ModalDialog>
</template>

<script setup lang="ts">
import ModalDialog from './ModalDialog.vue'

interface Props {
  visible: boolean
  rowData?: any
}

const props = withDefaults(defineProps<Props>(), {
  rowData: () => ({}),
})
const emit = defineEmits<{
  close: []
}>()

const handleClose = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.problem-detail {
  font-size: 30px;
  color: #00d6c0;

  .section {
    margin-bottom: 40px;
  }

  .section-header {
    font-size: 36px;
    font-weight: 600;
    color: #00ffe6;
    background: linear-gradient(to right, rgba(0, 214, 192, 0.3), rgba(0, 214, 192, 0.1));
    padding: 20px 30px;
    margin-bottom: 20px;
    border-left: 4px solid #00ffe6;
  }

  .basic-info {
    display: flex;
    gap: 30px;
    padding: 20px 60px 20px 20px;
  }

  .basic-info-left {
    flex: 1.5;
  }

  .basic-info-right {
    flex: 1;
    border-left: 2px solid rgba(0, 255, 230, 0.2);
    padding-left: 60px;
  }

  .info-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .label {
      color: #00ffe6;
      font-weight: 500;
    }

    .value {
      color: #00d6c0;
      flex: 1;
    }

    .highlight-high {
      color: #ff6b6b;
      font-weight: 600;
    }
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;

    &.highlight {
      padding: 15px;
      background: rgba(255, 107, 107, 0.1);
      border: 2px solid #ff6b6b;
      margin: 15px 0;
    }

    .label {
      color: #00ffe6;
      font-weight: 500;
    }

    .value {
      color: #00d6c0;
    }
  }

  .label {
    color: #00ffe6;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
  }

  .progress-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  .progress-item {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    padding: 26px 0;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 9px;
      top: 55px;
      width: 2px;
      height: 100%;
      background: #28a745;
    }

    &.active {
      .progress-dot {
        background: #28a745;
        box-shadow: 0 0 10px #28a745;
        border-color: #28a745;
      }

      .progress-label {
        background: #28a745;
        color: #fff;
      }
    }

    &.current {
      .progress-dot {
        background: #009989;
        box-shadow: 0 0 15px #009989;
        border-color: #009989;
      }

      .progress-label {
        background: #009989;
        color: #fff;
      }
    }

    &.pending {
      .progress-dot {
        background: #808080;
        border-color: #808080;
      }

      .progress-label {
        background: #808080;
        color: #fff;
        opacity: 0.8;
      }

      .progress-time,
      .progress-source {
        color: #666666;
        opacity: 0.8;
      }
    }

    .progress-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #28a745;
      border: 2px solid #28a745;
      flex-shrink: 0;
      z-index: 1;
    }

    .progress-content {
      display: flex;
      align-items: center;
      gap: 36px;
      flex: 1;
    }

    .progress-label {
      width: 200px;
      text-align: center;
      background: #28a745;
      color: #fff;
      font-size: 28px;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
      padding: 10px 30px;
      border-radius: 6px;
    }

    .progress-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      flex: 1;
    }

    .progress-time,
    .progress-source {
      font-size: 28px;
      color: #00d6c0;
      text-align: center;
    }
  }

  .timeline {
    position: relative;
  }

  .timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 9px;
      top: 30px;
      bottom: -30px;
      width: 2px;
      background: linear-gradient(to bottom, #00ffe6, #00d6c0);
    }

    &:last-child::before {
      display: none;
    }
  }

  .timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00ffe6;
    border: 3px solid #004b47;
    flex-shrink: 0;
    z-index: 1;
    margin-top: 5px;
  }

  .timeline-content {
    flex: 1;
    background: rgba(0, 63, 66, 0.5);
    border-radius: 8px;
    overflow: hidden;
  }

  .timeline-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 255, 230, 0.1);
    border-bottom: 1px solid rgba(0, 255, 230, 0.2);

    .timeline-time {
      color: #00ffe6;
      font-weight: 600;
      font-size: 28px;
    }

    .timeline-title {
      color: #00ffe6;
      font-weight: 600;
      font-size: 30px;
    }
  }

  .timeline-body {
    padding: 20px;
  }

  .detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
    line-height: 42px;

    .detail-label {
      color: #00ffe6;
      font-weight: 500;
      min-width: 150px;
    }

    .detail-value {
      color: #00d6c0;
      flex: 1;
    }
  }

  .attachment-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 2px solid rgba(0, 255, 230, 0.3);
    border-radius: 4px;
    margin-right: 15px;
    margin-top: 10px;
  }

  .attachment-img-large {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border: 2px solid rgba(0, 255, 230, 0.3);
    border-radius: 4px;
    margin-top: 10px;
  }

  .doc-link {
    color: #00bfff;
    text-decoration: underline;
    font-size: 28px;
    margin-top: 10px;
    display: inline-block;
  }

  .feedback-section {
    background: rgba(0, 63, 66, 0.5);
    border-radius: 8px;
    overflow: hidden;
  }

  .feedback-header {
    padding: 20px;
    background: rgba(0, 255, 230, 0.1);
    border-bottom: 1px solid rgba(0, 255, 230, 0.2);
  }

  .feedback-badge {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ffe6, #00d6c0);
    color: #004b47;
    font-weight: 600;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .feedback-body {
    padding: 20px;
  }

  .feedback-title {
    color: #00ffe6;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 20px;
  }

  .feedback-content {
    margin-bottom: 20px;
  }

  .measure-item {
    margin-bottom: 15px;

    .measure-title {
      color: #00ffe6;
      font-weight: 500;
      display: block;
      margin-bottom: 5px;
    }

    .measure-desc {
      color: #00d6c0;
      padding-left: 20px;
    }
  }

  .feedback-images {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  .sub-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 255, 230, 0.2);
  }

  .sub-section-title {
    color: #00ffe6;
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 15px;
  }

  .sub-section-content {
    padding: 20px;
    background: rgba(0, 214, 192, 0.1);
    border-radius: 8px;
  }

  .mechanism-card {
    background: rgba(0, 63, 66, 0.5);
    border-radius: 8px;
    border: 2px solid #00ffe6;
    overflow: hidden;
  }

  .mechanism-header {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 255, 230, 0.1);
  }

  .mechanism-badge {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #004b47;
    font-weight: 700;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mechanism-info {
    flex: 1;
  }

  .mechanism-body {
    padding: 20px;
  }

  .assessment-section {
    background: rgba(0, 63, 66, 0.5);
    border-radius: 8px;
    overflow: hidden;
  }

  .assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 255, 230, 0.1);
    border-bottom: 1px solid rgba(0, 255, 230, 0.2);
  }

  .assessment-item {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .badge-passed {
    background: #28a745;
    color: #fff;
    padding: 10px 30px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 28px;
  }

  .score-bar {
    width: 300px;
    height: 20px;
    background: rgba(0, 255, 230, 0.2);
    border-radius: 10px;
    overflow: hidden;
  }

  .score-fill {
    height: 100%;
    background: linear-gradient(to right, #28a745, #00ffe6);
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .score {
    color: #00ffe6;
    font-weight: 600;
    font-size: 32px;
  }

  .assessment-body {
    padding: 20px;
  }

  .assessment-title {
    color: #00ffe6;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 4px solid #00ffe6;
  }

  .assessment-subtitle {
    color: #00d6c0;
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
    padding: 10px;
    background: rgba(0, 255, 230, 0.1);
    border-radius: 4px;
  }

  .assessment-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .assessment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding: 15px;
    background: rgba(0, 255, 230, 0.05);
    border-radius: 4px;

    .label {
      color: #00ffe6;
      font-weight: 500;
      min-width: 200px;
    }

    .value {
      color: #00d6c0;
      flex: 1;
    }

    .rating {
      font-weight: 600;
      font-size: 28px;
      padding: 5px 20px;
      border-radius: 15px;
      white-space: nowrap;

      &.excellent {
        color: #28a745;
        background: rgba(40, 167, 69, 0.2);
      }

      &.good {
        color: #00bfff;
        background: rgba(0, 191, 255, 0.2);
      }

      &.qualified {
        color: #ffa500;
        background: rgba(255, 165, 0, 0.2);
      }

      &.not-applicable {
        color: #6c757d;
        background: rgba(108, 117, 125, 0.2);
      }
    }
  }
}
</style>
