/* ========================================
   移动端 - 宏观数据详情页专用样式 v2.0
   ======================================== */

/* === 标题区 === */
.data-header-card {
  background: #fff;
  padding: 16px 12px 14px;
  border-bottom: 1px solid var(--border-color);
}

.data-title {
  font-size: 17px;
  font-weight: 700;
  color: #1D2129;
  margin: 0 0 8px;
  line-height: 1.45;
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}

.data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-light);
}

.data-meta span {
  display: flex;
  align-items: center;
}

/* === 图表区域 === */
.chart-card {
  background: #fff;
  margin-bottom: 0;
}

/* === 图表工具栏：左=图表类型下拉，右=快捷操作均分 === */
.chart-toolbar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
  height: 42px;
}

/* --- 图表类型触发按钮（展示当前类型：文案+图标，点开底部抽屉选择） --- */
.chart-type-dropdown {
  flex-shrink: 0;
  display: flex;
}

.chart-type-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}

.chart-type-tab .iconfont {
  font-size: 12px;
  color: var(--text-light);
}

/* 抽屉内图表类型选项的选中态复用 .action-sheet-item.active（勾选标记） */

/* --- 图表快捷操作（右对齐，仅图表维度动作） --- */
.chart-quick-actions {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}

.chart-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  border-left: 1px solid var(--border-color);
  padding: 4px 20px;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.chart-quick-btn .iconfont {
  font-size: 17px;
  line-height: 1;
}

.chart-quick-btn span {
  font-size: 10px;
  font-family: var(--font-ui);
  line-height: 1;
}

.chart-quick-btn:active {
  color: var(--primary-color);
}

/* 收藏/监控激活态：与 JS 的 .active 对齐，主题色（同 PC .btn-pro.active 字色逻辑） */
.chart-quick-btn.active,
.chart-quick-btn.active .iconfont {
  color: var(--primary-color);
}

/* 预测按钮：品牌主色高亮 + AI 角标 */
.chart-quick-btn--forecast {
  color: var(--primary-color);
}

/* action-sheet-list / action-sheet-item / action-sheet-arrow
   已迁移至 mobile-common.css 统一管理 */

/* --- 图表画布 --- */
.chart-container {
  height: 220px;
  position: relative;
  padding: 12px 12px 4px;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* === 时间范围滑块 === */
.chart-range-controls {
  padding: 8px 10px 12px;
  min-height: 64px;
}

.range-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.range-value {
  color: var(--primary-color);
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
  font-size: 12px;
}

.range-label-slider{
  padding: 0 10px;
}
/* #slider-range-min 时间滑块样式已统一移至 mobile-common.css（详情/频道首页/区域页/房价共用同一 ID） */

/* === 数据表格 === */
.table-card {
  background: #fff;
}

.table-header {
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border-color);
}

.table-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.table-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.table-note {
  font-size: 12px;
  color: var(--text-light);
  padding: 6px 0 0;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 加载更多按钮（极简文字风格） */
.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 2px 0 8px;
  border-top: 1px solid var(--border-color);
}

/* === 数据概览（报价网格 Quote Grid） === */
.data-overview-card {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
}

/* 数据概览区操作：对比 / 高级分析 / 保存图表（原「更多」抽屉迁入，克制文字+图标行，无色块） */
.data-overview-actions {
  display: flex;
}
.overview-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 6px;
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
}
.overview-action-btn .iconfont {
  font-size: 15px;
  color: var(--text-light);
}
.overview-action-btn:active {
  color: var(--primary-color);
}

/* 1×4 报价网格：以极细十字线分隔，无独立卡片底色 */
.pro-quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 10px;
  padding-left: 12px
}

.pro-quote-item {
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
}

.pro-quote-item.pq-border-end {
  border-right: 1px solid var(--border-color);
}

.pro-quote-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-quote-value-group {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

.pro-quote-value {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  font-feature-settings: "tnum" on, "lnum" on;
  word-break: break-all;
}

.pro-quote-unit {
  font-size: 11px;
  color: #909399;
}


/* 底部抽屉样式由 mobile-common.css 中 .modal.bottom-sheet 统一管理 */

/* === 图表权限提示 === */
/* 与 PC detail-consolidated.css 保持一致，由 JS addLockOverlay() 共用 */
.chart-lock-hint {
  display: none;          /* JS 控制：有限制时 display:flex，否则 none */
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 12px;
  color: #86909C;
  padding: 6px 10px 2px;
}

.chart-lock-hint-btn i {
  font-size: 11px;
  flex-shrink: 0;
}

.chart-lock-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  height: 20px;
  line-height: 18px;
  font-size: 11px;
  font-weight: 500;
  color: #1A4FBE;
  background: transparent;
  border: 1px solid #C8D5EF;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chart-lock-hint-btn:active {
  background: #EEF2FB;
  border-color: #1A4FBE;
  color: #1240A0;
}

/* 详情页顶部搜索条样式定义在 mobile-common.css 中 */
/* 弹窗、表单、辅助类等公共样式已移至 mobile-common.css */

/* 抽屉网格布局（drawer-grid / drawer-grid-primary / drawer-grid-item / drawer-icon-box）已移至 mobile-common.css 统一管理 */