/* 基金详情页样式 */

/* 导航栏 */
.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.nav-image {
  width: 20px;
  height: 20px;
}

/* 基金基础信息 */
.fund-info {
  margin-bottom: 16px;
}

.fund-header {
  margin-bottom: 12px;
}

.fund-name {
  display: block;
  margin-bottom: 4px;
}

.fund-code {
  display: block;
}

.fund-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.meta-item {
  width: 33.33%;
  margin-bottom: 8px;
}

.meta-label {
  display: block;
  margin-bottom: 2px;
}

.meta-value {
  display: block;
}

/* 收益数据区 */
.fund-returns {
  margin-bottom: 16px;
}

.section-header {
  margin-bottom: 12px;
}

.return-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.return-item {
  flex: 1;
  text-align: center;
}

.return-label {
  display: block;
  margin-bottom: 4px;
}

.return-value {
  display: block;
}

.return-details {
  display: flex;
  justify-content: space-between;
}

.return-detail-item {
  flex: 1;
  text-align: center;
}

.detail-label {
  display: block;
  margin-bottom: 4px;
}

.detail-value {
  display: block;
}

/* 走势图表区 */
.fund-chart {
  margin-bottom: 16px;
}

.chart-tabs {
  display: flex;
  margin-top: 8px;
}

.chart-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  color: #4E5969;
  border-bottom: 2px solid #F2F3F5;
}

.chart-tab.active {
  color: #165DFF;
  border-bottom-color: #165DFF;
}

.chart-container {
  height: 200px;
  background-color: #F2F3F5;
  border-radius: 8px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
}

/* 核心资料区 */
.fund-materials {
  margin-bottom: 16px;
}

.material-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F2F3F5;
}

.material-item:last-child {
  border-bottom: none;
}

/* 风险指标区 */
.risk-indicators {
  margin-bottom: 16px;
}

.indicator-item {
  margin-bottom: 12px;
}

.indicator-label {
  display: block;
  margin-bottom: 4px;
}

.indicator-bar {
  height: 8px;
  background-color: #F2F3F5;
  border-radius: 4px;
  overflow: hidden;
}

.indicator-fill {
  height: 100%;
  background-color: #165DFF;
  border-radius: 4px;
}

/* 操作区 */
.action-area {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.action-area button {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.btn-primary {
  background-color: #165DFF;
  color: #FFFFFF;
}

.btn-secondary {
  background-color: #E8F3FF;
  color: #165DFF;
  border: 1px solid #165DFF;
}

/* 风险提示 */
.risk-tip {
  padding: 12px;
  background-color: #F2F3F5;
  border-radius: 8px;
  text-align: center;
  margin-top: 16px;
}

.tip-text {
  font-size: 11px;
  line-height: 1.3;
}

/* 持仓股票区 */
.fund-holdings {
  margin-bottom: 16px;
}

.holdings-list {
  margin-top: 8px;
}

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

.holding-item:last-child {
  border-bottom: none;
}

.holding-info {
  flex: 1;
}

.holding-name {
  display: block;
  margin-bottom: 2px;
}

.holding-code {
  display: block;
}

.holding-weight {
  text-align: right;
}

.weight-value {
  display: block;
  margin-bottom: 2px;
}

.weight-change {
  display: block;
}

.empty-holdings {
  text-align: center;
  padding: 24px 0;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .chart-container {
    background-color: #333333;
  }

  .risk-tip {
    background-color: #333333;
  }

  .material-item {
    border-bottom-color: #333333;
  }

  .indicator-bar {
    background-color: #333333;
  }

  .btn-secondary {
    background-color: #1E3A8A;
  }

  .chart-tab {
    border-bottom-color: #333333;
  }

  .holding-item {
    border-bottom-color: #333333;
  }
}