/* ============================================================
 * custom-report-create.css — 新建报表（报表中心/自定义报表）：步骤表单/图表配置/组合指标
 * 从 index.html 拆分（保持原样式顺序）
 * ============================================================ */

/* ===== 自定义报表 · 新建报表 ===== */
.cc-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 16px; border: 1px solid #e7e9ed; }
.cc-card-head { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; font-size: 15px; font-weight: 600; color: #1f2329; }
.cc-card-body { padding: 20px; }
.cc-dataset-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cc-dataset { border: 1px solid #e7e9ed; border-radius: 6px; padding: 12px 20px; cursor: pointer; background: #fff; transition: all .15s; min-width: 180px; }
.cc-dataset:hover { border-color: #0052d9; }
.cc-dataset.active { border-color: #0052d9; background: #f2f7ff; box-shadow: 0 0 0 1px #0052d9; }
.cc-dataset-title { font-size: 14px; font-weight: 500; color: #1f2329; }
.cc-dataset.active .cc-dataset-title { color: #0052d9; }
.cc-dataset-desc { font-size: 12px; color: #86909c; margin-top: 4px; }
.cc-tip { font-size: 13px; color: #86909c; margin: 0 0 12px; }
.cc-section { margin-top: 8px; }
.cc-section-title { font-size: 14px; font-weight: 500; color: #1f2329; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-tag { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #ecf2fe; color: #0052d9; font-size: 12px; line-height: 20px; font-weight: 400; }
.cc-divider { height: 1px; background: #f0f0f0; margin: 20px 0; }
.cc-drag { color: #c9cdd4; cursor: grab; display: inline-flex; align-items: center; }
.cc-drag:hover { color: #4e5969; }
.cc-danger-link { color: #d54941; cursor: pointer; font-size: 13px; text-decoration: none; }
.cc-danger-link:hover { color: #c63737; }
.cc-color { color: #4e5969; }
.cc-form-row { display: flex; align-items: flex-start; margin-bottom: 16px; }
.cc-form-label { flex-shrink: 0; width: 150px; display: flex; align-items: center; font-size: 14px; color: #4e5969; line-height: 32px; }
.cc-form-label .req { color: #d54941; margin-left: 4px; }
.cc-form-label .info-icon { display: inline-flex; align-items: center; margin-left: 6px; color: #86909c; cursor: help; }
.cc-form-tip { font-size: 12px; color: #86909c; margin-top: 6px; }
.cc-control { width: 320px; }
.cc-control-sm { width: 220px; }
.cc-metric-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-chart-block { border: 1px solid #eef0f3; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #fafbfc; }
.cc-chart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cc-chart-title { font-size: 14px; font-weight: 600; color: #1f2329; }
.cc-chart-head .cc-danger-link { margin-left: auto; }
.cc-chart-type-group { display: flex; gap: 12px; margin-bottom: 16px; }
.cc-chart-type { border: 1px solid #e7e9ed; border-radius: 6px; padding: 12px 20px; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 8px; transition: all .15s; }
.cc-chart-type svg { width: 26px; height: 26px; color: #4e5969; }
.cc-chart-type:hover { border-color: #0052d9; }
.cc-chart-type.active { border-color: #0052d9; background: #f2f7ff; }
.cc-chart-type.active svg { color: #0052d9; }
.cc-chart-type.active span { color: #0052d9; font-weight: 500; }
.cc-preview-title { font-size: 14px; font-weight: 500; color: #1f2329; margin-bottom: 12px; }
.cc-preview { background: #fff; border: 1px solid #f0f0f0; border-radius: 6px; padding: 16px 20px; }
.cc-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 200px; border-bottom: 1px solid #e7e7e7; border-left: 1px solid #e7e7e7; padding: 0 32px; }
.cc-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.cc-bar { width: 48px; background: #0052d9; border-radius: 3px 3px 0 0; }
.cc-bar-val { font-size: 12px; color: #181818; font-weight: 500; }
.cc-bar-labels { display: flex; justify-content: space-around; padding: 8px 32px 0; }
.cc-bar-labels span { font-size: 12px; color: #4e5969; width: 48px; text-align: center; }
.cc-pie-preview { display: flex; justify-content: space-around; gap: 24px; flex-wrap: wrap; }
.cc-pie-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc-pie-label { font-size: 13px; color: #4e5969; }
.cc-pie-config { display: flex; align-items: center; gap: 10px; border: 1px dashed #e7e9ed; border-radius: 6px; padding: 12px; margin-bottom: 10px; background: #fff; flex-wrap: wrap; }
.cc-pie-config-title { font-size: 13px; font-weight: 500; color: #1f2329; flex-shrink: 0; }
.cc-pie-config .cc-danger-link { flex-shrink: 0; }
.cc-token { display: inline-block; background: #e8f0ff; color: #0052d9; padding: 2px 8px; border-radius: 3px; font-family: Consolas, Menlo, monospace; font-size: 12px; margin: 0 2px; white-space: nowrap; }
.combo-form { padding: 4px 0 8px; }
.combo-calc { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.combo-item { flex: 0 0 160px; min-width: 0; }
.combo-op { flex: 0 0 56px; min-width: 0; }
.combo-op .t-select__wrap, .combo-op .t-select, .combo-op .t-input, .combo-op .t-fake-input { min-width: 0; width: 100%; }
.cc-action-bar { background: #fff; border: 1px solid #e7e9ed; border-radius: 8px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.cc-action-left, .cc-action-right { display: flex; align-items: center; gap: 8px; }

/* 步骤条吸顶 */
.cc-steps-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #f2f3f5;
  padding: 10px 0 14px;
  margin: -4px 0 8px;
}