@import 'header.css';
@import 'components.css';

:root {
  /* 优化主色调 */
  --primary-blue: #1976d2;
  --secondary-blue: #2196f3;
  --primary-gray: #455a64;
  --light-gray: #eceff1;
  --highlight: #ffc107;
  --success-green: #4caf50;
  --warning-orange: #ff9800;
  --danger-red: #f44336;
  --card-shadow: 0 3px 10px rgba(0,0,0,0.08);
  
  /* 字体设置 */
  --heading-font: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --body-font: 'Noto Sans SC', 'SimSun', serif;
}

/* 确保主体内容使用正确的字体 */
body {
  font-family: var(--body-font);
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  color: var(--primary-gray);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--primary-gray);
}

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 25px;
  background-color: var(--light-gray);
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

.data-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.data-card h2 {
  margin-top: 0;
  font-size: 18px;
  color: var(--primary-blue);
  border-bottom: 2px solid var(--light-gray);
  padding-bottom: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* 添加图标到标题 */
.data-card h2:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
}

.data-card:nth-child(1) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M11,2V22C5.9,21.5 2,17.2 2,12C2,6.8 5.9,2.5 11,2M13,2V11H22C21.5,6.2 17.8,2.5 13,2M13,13V22C17.7,21.5 21.5,17.8 22,13H13Z"/></svg>');
}

.data-card:nth-child(2) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"/></svg>');
}

.data-card:nth-child(3) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M3.5,18.5L9.5,12.5L13.5,16.5L22,6.92L20.59,5.5L13.5,13.5L9.5,9.5L2,17L3.5,18.5Z"/></svg>');
}

.data-card:nth-child(4) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"/></svg>');
}

.data-card:nth-child(5) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z M11,7H13V9H11V7M11,11H13V17H11V11Z"/></svg>');
}

.data-card:nth-child(6) h2:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231976d2"><path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z"/></svg>');
}

.data-card:nth-child(1) { animation-delay: 0.1s; }
.data-card:nth-child(2) { animation-delay: 0.2s; }
.data-card:nth-child(3) { animation-delay: 0.3s; }
.data-card:nth-child(4) { animation-delay: 0.4s; }
.data-card:nth-child(5) { animation-delay: 0.5s; }
.data-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 优化图表容器样式 */
.chart-container {
  height: 300px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
  padding: 10px;
}

/* 添加图表加载动画 */
.chart-container.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 添加图表标题样式 */
.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-blue);
  margin-bottom: 15px;
  text-align: center;
}

/* 添加图表底部标注样式 */
.chart-footer {
  font-size: 12px;
  color: var(--primary-gray);
  text-align: right;
  margin-top: 5px;
  font-style: italic;
}

/* 数字突出显示样式 */
.highlight-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-blue);
}

/* 企业分布热力图容器样式 */
#enterpriseDistributionMap {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* 确保图表容器有足够的高度 */
.chart-container {
  height: 300px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
  padding: 10px;
}

/* ... 其他样式定义 ... */