/* ============================================================
 * report-common.css — 报表页共享样式：筛选区/分页/导出弹窗/数据卡片(tps·srs·cscan·uss·sscan)
 * 从 index.html 拆分（保持原样式顺序）
 * ============================================================ */

/* 查询筛选区 */
.filter-area { background: #fff; padding: 16px 24px 8px; border-radius: 6px; margin-bottom: 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.filter-item { display: flex; align-items: center; margin-bottom: 8px; }
.filter-label { flex-shrink: 0; width: 128px; text-align: right; padding-right: 8px; font-size: 14px; color: #4e5969; line-height: 32px; }
.filter-control { flex: 1; min-width: 0; }
.filter-actions { padding: 4px 0 12px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.filter-actions .toggle-expand { color: #0052d9; cursor: pointer; font-size: 14px; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.filter-actions .toggle-expand:hover { opacity: 0.8; }

.pagination-area { margin-top: 16px; padding: 8px 4px; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 6px; }
.pagination-total { font-size: 13px; color: #4e5969; margin-left: 12px; }

/* 导出弹窗 */
.export-dialog-content { padding: 8px 0 16px; display: flex; gap: 16px; align-items: flex-start; }
.export-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #e8f8f0; border-radius: 50%; }
.export-text { flex: 1; }
.export-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #1f2329; }
.export-desc { margin: 0 0 8px; font-size: 14px; color: #4e5969; line-height: 1.6; }
.export-link-row { margin: 0; font-size: 14px; color: #4e5969; line-height: 1.6; }
.export-link { color: #0052d9; font-weight: 500; cursor: pointer; text-decoration: underline; }
.export-link:hover { color: #0034a6; }

/* ===== 任务奖品统计（报表中心-消费者报表） ===== */
.tps-required { color: #d54941; margin-right: 2px; }
.tps-info-icon { color: #a9adb8; margin-left: 2px; font-size: 14px; vertical-align: -2px; cursor: help; transition: color .15s; }
.tps-info-icon:hover { color: #0052d9; }

/* 筛选区底行：分组条件（左） + 重置/查询（右） */
.tps-filter-actions { justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #f0f2f5; margin-top: 4px; padding: 12px 0 12px; }
.tps-group-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.tps-group-label { font-size: 14px; font-weight: 600; color: #1d2129; }
.tps-pending-hint { display: inline-flex; align-items: center; gap: 5px; color: #ed7b2f; font-size: 12px; }
.tps-pending-hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ed7b2f; }
.tps-action-btns { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* 合计数据卡片 */
.tps-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tps-stat-card { position: relative; background: #fff; border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px 18px 14px; overflow: hidden; animation: tpsFadeIn .4s ease both; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tps-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tps-accent, #0052d9); }
.tps-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 31, 79, .08); border-color: #dbe4f5; }
.tps-stat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tps-stat-label { font-size: 13px; color: #4e5969; display: flex; align-items: center; min-width: 0; }
.tps-stat-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--tps-accent, #0052d9); background: var(--tps-accent-bg, #0052d91a); }
.tps-stat-value { font-size: 28px; font-weight: 700; color: #1d2129; margin-top: 12px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.tps-stat-unit { font-size: 13px; color: #86909c; font-weight: 400; margin-left: 4px; }
.tps-stat-footer { font-size: 12px; color: #a9adb8; margin-top: 10px; }
.tps-stat-footer-hl { color: #d54941; font-weight: 600; }

/* 主体卡片 / 图表卡片 */
.tps-main-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 31, 79, .02); }
.tps-note { margin-bottom: 12px; }
.tps-chart-card { border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px 16px 8px; margin-bottom: 16px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); animation: tpsFadeIn .35s ease both; }
.tps-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tps-chart-title { font-size: 14px; font-weight: 600; color: #1d2129; display: flex; align-items: center; }
.tps-chart-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: #0052d9; margin-right: 8px; }
.tps-chart-sub { font-size: 12px; color: #86909c; margin-top: 6px; }
.tps-chart-wrap { width: 100%; height: 340px; margin-top: 8px; }
/* 一行并列两个饼图，各占50%宽度 */
.tps-pie-row { display: flex; gap: 16px; }
.tps-pie-card { flex: 1 1 50%; min-width: 0; }
.tps-pie-card .tps-chart-wrap { height: 300px; }

/* 列表标题行（导出按钮居右） */
.tps-table-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; }
.tps-table-head-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tps-table-title { font-size: 14px; font-weight: 600; color: #1d2129; display: flex; align-items: center; }
.tps-table-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: #0052d9; margin-right: 8px; }
/* 列表标题旁的当前排序说明（如「当前排序：产品占比 · 降序」） */
.tps-sort-text { font-size: 12px; color: #0052d9; background: #f2f7ff; border-radius: 3px; padding: 2px 8px; line-height: 18px; white-space: nowrap; margin-left: 4px; }

.tps-trend-up { color: #d54941; }
.tps-trend-down { color: #00a870; }
.tps-trend-flat { color: #86909c; }
@keyframes tpsFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 门店注册统计 */
.srs-note { margin-bottom: 12px; }
.srs-required { color: #d54941; margin-right: 2px; }
.srs-info-icon { color: #a9adb8; font-size: 14px; margin-left: 3px; cursor: help; }
.srs-filter-actions { justify-content: space-between; }
.srs-pending-hint { font-size: 12px; color: #ed7b2f; margin-top: 4px; }
.srs-action-btns { display: flex; gap: 8px; margin-left: auto; }
.srs-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.srs-stat-card { position: relative; background: #fff; border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px 18px 14px; overflow: hidden; animation: srsFadeIn .4s ease both; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.srs-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--srs-accent, #0052d9); }
.srs-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 31, 79, .08); border-color: #dbe4f5; }
.srs-stat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.srs-stat-label { font-size: 13px; color: #4e5969; display: flex; align-items: center; min-width: 0; }
.srs-stat-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--srs-accent, #0052d9); background: var(--srs-accent-bg, #0052d91a); }
.srs-stat-value { font-size: 26px; font-weight: 700; color: #1d2129; margin-top: 12px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.srs-stat-unit { font-size: 13px; color: #86909c; font-weight: 400; margin-left: 4px; }
.srs-stat-footer { font-size: 12px; color: #a9adb8; margin-top: 10px; }
.srs-main-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 31, 79, .02); }
.srs-chart-card { border: 1px solid #e7eaf0; border-radius: 8px; padding: 16px 16px 8px; margin-bottom: 16px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); animation: srsFadeIn .35s ease both; }
.srs-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.srs-chart-title { font-size: 14px; font-weight: 600; color: #1d2129; display: flex; align-items: center; }
.srs-chart-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: #0052d9; margin-right: 8px; }
.srs-chart-sub { font-size: 12px; color: #86909c; margin-top: 6px; }
.srs-chart-wrap { width: 100%; height: 360px; margin-top: 8px; }
.srs-pie-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.srs-pie-card { margin-bottom: 8px; }
.srs-pie-wrap { width: 100%; height: 230px; margin-top: 4px; }
.srs-table-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; }
.srs-table-head-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.srs-table-title { font-size: 14px; font-weight: 600; color: #1d2129; display: flex; align-items: center; }
.srs-table-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: #0052d9; margin-right: 8px; }
@keyframes srsFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 消费者扫码统计 */
.cscan-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cscan-rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cscan-rate-card { margin-bottom: 0; }
.cscan-rate-pie { width: 100%; height: 250px; margin-top: 4px; }
.cscan-group-controls { flex-wrap: wrap; row-gap: 8px; }
.cscan-total-bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; padding: 14px 16px; background: linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%); border: 1px solid #e7eaf0; border-radius: 8px; }
.cscan-total-box { text-align: center; min-width: 0; }
.cscan-total-value { font-size: 18px; font-weight: 700; color: #1d2129; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cscan-total-label { font-size: 12px; color: #86909c; margin-top: 4px; white-space: nowrap; }
/* 门店扫码统计 */
.sscan-total-bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; padding: 14px 16px; background: linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%); border: 1px solid #e7eaf0; border-radius: 8px; }

.sscan-total-box { text-align: center; min-width: 0; }
.sscan-total-sub { font-size: 12px; color: #00a870; margin-top: 2px; white-space: nowrap; }
.sscan-total-sub.tps-stat-footer-hl { color: #d54941; font-weight: 600; }

/* ===== 用户扫码统计（报表中心-消费者报表） ===== */
.uss-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.uss-group-sub { font-size: 12px; color: #86909c; }
.uss-money { color: #d54941; font-weight: 500; font-variant-numeric: tabular-nums; }
.uss-date-tip { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: #1d2129; }
.uss-id { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; color: #4b5b76; }
.uss-page-chart { width: 100%; height: 360px; margin-top: 8px; }

/* ===== 分组条件区（经销商报表 扫码/核销统计共用） ===== */
.tps-group-area { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0 4px; border-top: 1px dashed #f0f2f5; margin-top: 4px; }
.tps-group-label { flex-shrink: 0; width: 128px; text-align: right; padding-right: 8px; font-size: 14px; color: #4e5969; line-height: 32px; }
.tps-group-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.tps-group-item { display: inline-flex; align-items: center; gap: 10px; }