/* ============================================================
   审计报告管理系统 — 报告详情页(#/report/:id)样式覆盖
   目标：与客户总部「评估报告详情页」(bjqjcjpgsws.com/detail.html)视觉一致
   作用域：仅 ReportDetail.tsx 页面（用 code-path 属性限定），不影响后台其它页面
   做法：纯 CSS 覆盖，不动 React 源码、不改后端，可随时删此文件回滚
   ⚠️ 依赖打包产物里的 code-path 属性；若客户日后用源码重新打包，需复核选择器
   ============================================================ */

/* 背景图：换成总部那张大楼图、居中铺满 */
[code-path*="ReportDetail.tsx"][class*="min-h-screen"] {
  background-image: url('/VCG211387262365.jpg') !important;
  background-position: center !important;
  background-size: cover !important;
}

/* 顶部标题栏：135° 靛紫渐变、加高、与总部同款阴影 */
header[code-path*="ReportDetail.tsx"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 16px 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 正文区：内边距 24px + flex 列布局（让卡片纵向撑满，复刻总部"蓝色块延伸到页脚"效果） */
main[code-path*="ReportDetail.tsx"] {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
}
h1[code-path*="ReportDetail.tsx"] {
  font-size: 20px !important;
  font-weight: 600 !important;
}
header[code-path*="ReportDetail.tsx"] p {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 卡内标题「评估报告详情页」：20px/600 + 靛蓝下划线（对齐总部 .section-title.large-title） */
h2[code-path*="ReportDetail.tsx"] {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
}
[code-path*="ReportDetail.tsx"][class*="bg-blue-500/70"] {
  background: #667eea !important;
}

/* 信息卡片：满宽、蓝色调、圆角、内边距对齐总部 24px */
[code-path*="ReportDetail.tsx"][class*="max-w-md"] {
  max-width: none !important;
  width: 100% !important;
  background: rgba(131, 175, 221, 0.4) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  flex: 1 1 auto !important;   /* 纵向撑满正文区，与总部一致 */
}

/* 信息行：白底半透、标签左 / 值右两端对齐 */
[code-path*="ReportDetail.tsx"][class*="bg-white/60"] {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  min-height: 42px;
  justify-content: space-between !important;
  gap: 0 !important;
}

/* 标签：宽 200、13px、居中、灰、字重 500（对齐总部）；允许长标签换行（总部行为，避免窄屏溢出盖住值） */
[code-path*="ReportDetail.tsx"][class*="w-20"] {
  width: 200px !important;
  font-size: 13px !important;
  color: #666 !important;
  padding-right: 20px !important;
  font-weight: 500 !important;
  white-space: normal !important;
}

/* 字段值：14px、常规字重、深灰、左对齐 */
[code-path*="ReportDetail.tsx"][class*="flex-1"] {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 400 !important;
}

/* 页脚：内边距对齐总部 12px + 上方渐变细线 + 文字 @ 改成 © */
footer[code-path*="ReportDetail.tsx"] {
  position: relative;
  padding: 12px !important;
}
footer[code-path*="ReportDetail.tsx"]::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  margin: 0 auto 10px;
}
footer[code-path*="ReportDetail.tsx"] p {
  font-size: 0 !important;
}
footer[code-path*="ReportDetail.tsx"] p::after {
  content: "评估报告管理系统 © 2026";
  font-size: 12px;
  color: #999;
}

/* ============================================================
   移动端响应式（对齐总部 detail.html 的 @media）
   修复：之前标签列写死 200px 没做响应式，窄屏把值挤成多行
   ============================================================ */
@media (max-width: 768px) {
  main[code-path*="ReportDetail.tsx"] { padding: 12px !important; }
  /* 移动端卡片回到内容高度（不纵向撑满），对齐总部：卡片到最后一行就结束、下方露出背景 */
  [code-path*="ReportDetail.tsx"][class*="max-w-md"] { flex: 0 0 auto !important; }
  /* 信息行：收紧内边距 */
  [code-path*="ReportDetail.tsx"][class*="bg-white/60"] {
    padding: 8px 12px !important;
    min-height: 36px;
  }
  /* 标签列收窄到 100px，把宽度让给值 */
  [code-path*="ReportDetail.tsx"][class*="w-20"] {
    width: 100px !important;
    font-size: 12px !important;
    padding-right: 12px !important;
  }
  /* 值 13px */
  [code-path*="ReportDetail.tsx"][class*="flex-1"] { font-size: 13px !important; }
  /* 标题栏/卡内标题收一档 */
  header[code-path*="ReportDetail.tsx"] { padding: 12px !important; }
  h1[code-path*="ReportDetail.tsx"] { font-size: 16px !important; }
  header[code-path*="ReportDetail.tsx"] p { font-size: 11px !important; }
  h2[code-path*="ReportDetail.tsx"] { font-size: 16px !important; }
}
@media (max-width: 480px) {
  /* 更窄屏：标签 80px */
  [code-path*="ReportDetail.tsx"][class*="w-20"] {
    width: 80px !important;
    font-size: 11px !important;
    padding-right: 10px !important;
  }
  [code-path*="ReportDetail.tsx"][class*="flex-1"] { font-size: 12px !important; }
}