/* 统计模态框样式 */

/* 统计模态框整体样式 */
#stats-modal {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#stats-modal .modal-content {
  max-width: 800px;
  width: 92%;
  margin: 30px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  background: #fff;
  border: none;
}

/* 模态框标题栏 */
#stats-modal .modal-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#stats-modal .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  flex-grow: 1;
}

/* 顶部关闭按钮样式 */
#stats-modal .modal-header .close-modal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0;
  position: relative;
}

#stats-modal .modal-header .close-modal::before,
#stats-modal .modal-header .close-modal::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: #666;
  border-radius: 1px;
  transition: background 0.2s;
}

#stats-modal .modal-header .close-modal::before {
  transform: rotate(45deg);
}

#stats-modal .modal-header .close-modal::after {
  transform: rotate(-45deg);
}

#stats-modal .modal-header .close-modal:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
}

#stats-modal .modal-header .close-modal:hover::before,
#stats-modal .modal-header .close-modal:hover::after {
  background: #333;
}

/* 统计内容主体样式优化 */
#stats-modal .modal-body {
  padding: 20px 24px;
}

/* 时间范围选择器美化 */
#stats-modal .time-range-selector {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  gap: 8px;
}

#stats-modal .time-btn {
  padding: 8px 20px;
  border: none;
  background: #f1f3f5;
  color: #495057;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

#stats-modal .time-btn:hover {
  background: #e9ecef;
}

#stats-modal .time-btn.active {
  background: #4361ee;
  color: white;
  box-shadow: 0 2px 6px rgba(67, 97, 238, 0.2);
}

/* 统计卡片样式美化 */
#stats-modal .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

#stats-modal .stats-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 象限分布图所在卡片的特殊样式 */
#stats-modal .stats-card:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#stats-modal .stats-card:nth-child(2) h4 {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}

/* 加载状态样式优化 */
#stats-modal .stats-card.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  z-index: 5;
}

#stats-modal .stats-card.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4361ee;
  border-radius: 50%;
  z-index: 6;
  animation: spin 1s linear infinite;
}

/* 修复：为已加载状态添加样式，确保loading样式被覆盖 */
#stats-modal .stats-card[data-loaded="true"] {
  position: relative;
}

#stats-modal .stats-card[data-loaded="true"]::before,
#stats-modal .stats-card[data-loaded="true"]::after {
  display: none !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#stats-modal .stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

#stats-modal .stats-card h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-weight: 600;
  font-size: 16px;
}

/* 错误状态样式 */
#stats-modal .stats-card.error::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 248, 248, 0.9);
  border-radius: 12px;
  z-index: 5;
}

#stats-modal .error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e63946;
  font-weight: 500;
  text-align: center;
  z-index: 6;
  width: 80%;
}

/* 自定义滚动条 */
#stats-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

#stats-modal .modal-body::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}

#stats-modal .modal-body::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 4px;
}

#stats-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* 完成率环形图样式 */
.progress-ring-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 120px;
  height: 120px;
  position: relative;
}

.progress-ring {
  display: block;
  margin: 0 auto;
  transform: rotate(-90deg); /* 使进度从顶部开始 */
  transform-origin: center;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.8s ease-in-out;
  transform-origin: center;
}

.progress-text {
  fill: #333;
  font-size: 18px;
  font-weight: bold;
  /* 取消旋转，通过绝对定位处理 */
  transform: rotate(90deg);
  transform-origin: center;
}

/* 深色主题适配 */
.dark-theme .progress-text {
  fill: #fff;
}

.dark-theme .progress-ring-circle-bg {
  stroke: #444;
}

/* 象限分布图样式 */
#stats-modal #quadrant-distribution-wrapper {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  position: relative;
  box-sizing: content-box;
}

#stats-modal #quadrant-distribution {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  box-sizing: content-box;
}

#stats-modal #quadrant-distribution svg {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  display: block;
}

/* 象限图例颜色 */
#stats-modal .quadrant-legend-item.q1 .legend-color { background-color: #FF6B6B; }
#stats-modal .quadrant-legend-item.q2 .legend-color { background-color: #4ECDC4; }
#stats-modal .quadrant-legend-item.q3 .legend-color { background-color: #FFD166; }
#stats-modal .quadrant-legend-item.q4 .legend-color { background-color: #6979F8; }

/* 象限百分比标签样式 */
#stats-modal #quadrant-distribution text {
  font-family: Arial, sans-serif;
  font-size: 5px;
  font-weight: bold;
  fill: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* 象限图例样式 */
#stats-modal .quadrant-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  font-size: 12px;
  padding: 0 10px;
}

#stats-modal .quadrant-legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(245, 245, 245, 0.5);
  transition: background-color 0.2s;
}

#stats-modal .quadrant-legend-item:hover {
  background-color: rgba(235, 235, 235, 0.8);
}

#stats-modal .quadrant-legend-item .legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
}

#stats-modal .quadrant-legend-item .legend-label {
  margin-right: 5px;
}

#stats-modal .quadrant-legend-item .count {
  font-weight: bold;
  color: #555;
}

/* 饼图图例样式 */
#stats-modal .pie-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#stats-modal .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

#stats-modal .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* 象限颜色 */
#stats-modal .q1 .legend-color { background-color: #FF6B6B; }
#stats-modal .q2 .legend-color { background-color: #4ECDC4; }
#stats-modal .q3 .legend-color { background-color: #FFD166; }
#stats-modal .q4 .legend-color { background-color: #6979F8; }

/* 数据洞察部分 */
#stats-modal .insights-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

#stats-modal .insights-section h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-weight: 600;
  font-size: 16px;
}

#stats-modal .insights-container {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  color: #495057;
  font-size: 14px;
  line-height: 1.5;
}

/* 空状态提示 */
.empty-chart, .empty-insights {
  text-align: center;
  padding: 20px;
  color: #adb5bd;
  font-size: 14px;
}