/* 小程序页（数据分析 / 筛选查询）原型样式 —— 作用域隔离，不污染平台全局 */
#page-miniapp {
  --primary: #00B578;
  --primary-dark: #009E6B;
  --primary-light: #E6F7F0;
  --text-main: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --text-primary: #1F2937;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --bg: #F7F9FB;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text: #92400E;
  --error-text: #DC2626;
}

#page-miniapp .tabs { display: flex; gap: 8px; margin: 6px 0 18px; }
#page-miniapp .tab { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 16px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 6px; }
#page-miniapp .tab:hover { color: #34B599; }
#page-miniapp .tab.active { background: #34B599; border-color: #34B599; color: #fff; font-weight: 600; }
#page-miniapp .tab-panel { display: none; animation: fadeIn .25s ease; }
#page-miniapp .tab-panel.active { display: block; }

/* KPI */
#page-miniapp .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
#page-miniapp .metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
#page-miniapp .metric-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
#page-miniapp .metric-value { font-size: 28px; font-weight: 600; color: var(--text-main); }
#page-miniapp .metric-change { font-size: 12px; margin-top: 6px; font-weight: 500; }
#page-miniapp .metric-change.up { color: var(--primary-dark); }
#page-miniapp .metric-change.down { color: var(--error-text); }

/* 图表卡片 */
#page-miniapp .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
#page-miniapp .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
#page-miniapp .chart-title { font-size: 15px; font-weight: 600; color: var(--text-main); }
#page-miniapp .chart-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); }
#page-miniapp .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* 智能分析洞察 */
#page-miniapp .analysis-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
#page-miniapp .analysis-card .card-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--text-main); }
#page-miniapp .analysis-sub { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
#page-miniapp .analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#page-miniapp .analysis-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: #FAFBFC; }
#page-miniapp .analysis-block-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text-main); }
#page-miniapp .analysis-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }
#page-miniapp .analysis-summary b { color: var(--text-main); }
#page-miniapp .analysis-summary .delta-up { color: var(--primary-dark); font-weight: 600; }
#page-miniapp .analysis-summary .delta-down { color: var(--error-text); font-weight: 600; }
#page-miniapp .ana-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
#page-miniapp .ana-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
#page-miniapp .ana-bar { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 3px; transition: height .3s; }
#page-miniapp .ana-bar-val { font-size: 10px; color: var(--text-secondary); line-height: 1; }
#page-miniapp .ana-bar-label { font-size: 10px; color: var(--text-tertiary); line-height: 1; }
#page-miniapp .ana-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); }
#page-miniapp .ana-row:last-child { border-bottom: none; }
#page-miniapp .ana-row-name { color: var(--text-main); font-weight: 500; font-size: 13px; }
#page-miniapp .ana-row-val { color: var(--text-secondary); font-size: 13px; }
#page-miniapp .ana-row .share { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; }
#page-miniapp .ana-delta { font-size: 11px; margin-left: 8px; font-weight: 600; }
#page-miniapp .ana-delta.up { color: var(--primary-dark); }
#page-miniapp .ana-delta.down { color: var(--error-text); }

/* 预警面板 */
#page-miniapp .alert-panel { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; }
#page-miniapp .alert-panel.ok { background: var(--primary-light); border-color: #A7F3D0; }
#page-miniapp .alert-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--warning-text); margin-bottom: 8px; }
#page-miniapp .alert-panel.ok .alert-title { color: var(--primary-dark); }
#page-miniapp .alert-list { margin: 0; padding-left: 22px; font-size: 13px; color: var(--text-main); line-height: 1.8; }
#page-miniapp .alert-list li { margin: 0; }
#page-miniapp .alert-list .level-high { color: #DC2626; font-weight: 600; }
#page-miniapp .alert-list .level-mid { color: #D97706; font-weight: 500; }

/* 筛选查询 tab */
#page-miniapp .filter-bar-vertical { flex-direction: column; align-items: stretch; gap: 16px; padding: 0; border: none; background: transparent; margin-bottom: 0; }
#page-miniapp .filter-bar-vertical .filter-field { display: flex; flex-direction: row; align-items: center; gap: 12px; }
#page-miniapp .filter-bar-vertical .filter-label { min-width: 80px; margin-bottom: 0; font-size: 13px; color: var(--text-secondary); }
#page-miniapp .filter-bar-vertical .filter-input,
#page-miniapp .filter-bar-vertical .filter-select { flex: 1; }
#page-miniapp .filter-field { display: flex; flex-direction: column; gap: 4px; }
#page-miniapp .filter-label { font-size: 12px; color: var(--text-secondary); }
#page-miniapp .filter-input, #page-miniapp .filter-select { height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px; outline: none; background: #fff; min-width: 130px; }
#page-miniapp .filter-input:focus, #page-miniapp .filter-select:focus { border-color: var(--primary); }
#page-miniapp .filter-actions-bottom { margin-left: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
#page-miniapp .filter-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#page-miniapp .filter-card-header .card-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-main); }
#page-miniapp .filter-preview { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); }
#page-miniapp .filter-preview-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
#page-miniapp .filter-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
#page-miniapp .insight-section { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
#page-miniapp .insight-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
#page-miniapp .insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#page-miniapp .funnel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
#page-miniapp .funnel-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 10px; }
#page-miniapp .funnel { display: flex; flex-direction: column; gap: 8px; }
#page-miniapp .funnel-step { display: flex; align-items: center; gap: 10px; }
#page-miniapp .funnel-bar-wrap { flex: 1; height: 24px; background: var(--bg); border-radius: 4px; overflow: hidden; position: relative; }
#page-miniapp .funnel-bar { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: #fff; font-size: 11px; font-weight: 600; transition: width .3s; }
#page-miniapp .funnel-label { width: 56px; font-size: 12px; color: var(--text-secondary); }
#page-miniapp .funnel-value { width: 48px; text-align: right; font-size: 12px; font-weight: 500; color: var(--text-primary); }
#page-miniapp .advice-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
#page-miniapp .advice-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 10px; }
#page-miniapp .advice-list { display: flex; flex-direction: column; gap: 8px; }
#page-miniapp .advice-item { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
#page-miniapp .advice-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
#page-miniapp .advice-tag.up { background: #DCFCE7; color: #166534; }
#page-miniapp .advice-tag.down { background: #FEE2E2; color: #991B1B; }
#page-miniapp .advice-tag.tip { background: #DBEAFE; color: #1E40AF; }
#page-miniapp .comparison-row { display: flex; gap: 12px; margin-top: 10px; }
#page-miniapp .comparison-item { flex: 1; background: var(--bg); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
#page-miniapp .comparison-val { font-size: 18px; font-weight: 700; color: var(--text-primary); }
#page-miniapp .comparison-label { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
#page-miniapp .filter-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
#page-miniapp .filter-chart-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* 趋势图日期筛选器 */
#page-miniapp .chart-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#page-miniapp .mini-date-filter { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
#page-miniapp .mini-date-input { height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; font-size: 12px; color: var(--text-main); background: var(--surface); outline: none; }
#page-miniapp .mini-date-input:focus { border-color: var(--primary); }
#page-miniapp .mini-date-sep { color: var(--text-tertiary); }
#page-miniapp .mini-range-btn { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all .15s; }
#page-miniapp .mini-range-btn:hover { border-color: var(--primary); color: var(--primary); }
#page-miniapp .mini-range-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 筛选查询：横向筛选条件（并排一行） */
#page-miniapp .filter-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
#page-miniapp .filter-single { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; flex-wrap: wrap; max-width: 100%; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
#page-miniapp .filter-single .filter-field { flex: 1; min-width: 200px; }
#page-miniapp .filter-preview-count { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }

/* 多选盒子 */
#page-miniapp .multi-select-box { display: flex; flex-wrap: wrap; gap: 8px; }
#page-miniapp .ms-chip { user-select: none; cursor: pointer; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-secondary); background: #fff; transition: all .15s; }
#page-miniapp .ms-chip:hover { border-color: var(--primary); }
#page-miniapp .ms-chip.sel { background: var(--primary); border-color: var(--primary); color: #fff; }
#page-miniapp .ms-chip.ms-all { font-weight: 600; }
#page-miniapp .ms-chip.ms-all:hover { color: var(--primary); }

/* 自定义下拉多选（来源渠道 / 预约医生） */
#page-miniapp .ms-dropdown { position: relative; flex: 1; min-width: 200px; }
#page-miniapp .ms-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px; background: #fff; cursor: pointer; color: var(--text); }
#page-miniapp .ms-dropdown-toggle:hover { border-color: var(--primary); }
#page-miniapp .ms-caret { color: var(--text-secondary); font-size: 12px; }
#page-miniapp .ms-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px; display: none; }
#page-miniapp .ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 13px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; }
#page-miniapp .ms-opt:hover { background: rgba(48,192,180,.08); }
#page-miniapp .ms-opt input { accent-color: var(--primary); margin: 0; }
#page-miniapp .ms-opt-all { font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 8px; }

/* 自定义时间段构建器 */
#page-miniapp .custom-period-builder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#page-miniapp .custom-period-builder .filter-select { flex: 0 0 auto; min-width: 96px; width: auto; }
#page-miniapp .period-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#page-miniapp .picker-hint { font-size:12px; color:var(--text-tertiary); margin-left:8px; }

/* ===== 双月日历弹窗 ===== */
#mfDatePickerModal { display:none; }
#page-miniapp .dual-calendar-dialog {
  background: #fff; border-radius: 12px; padding: 20px 24px; min-width: 680px; max-width: 760px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#page-miniapp .dual-cal-header { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; }
#page-miniapp .dual-cal-header .cal-nav-btn { background:none; border:1px solid var(--border); border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:16px; color:var(--text-secondary); }
#page-miniapp .dual-cal-header .cal-month-label { font-size:15px; font-weight:600; color:var(--text-primary); min-width:120px; text-align:center; }
#page-miniapp .dual-cal-body { display:flex; gap:24px; }
#page-miniapp .cal-month { flex:1; }
#page-miniapp .cal-weekdays { display:flex; gap:0; margin-bottom:4px; }
#page-miniapp .cal-weekdays span { flex:1; text-align:center; font-size:11px; color:var(--text-tertiary); padding:4px 0; }
#page-miniapp .cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
#page-miniapp .cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; border-radius:6px; cursor:pointer; color:var(--text-primary); }
#page-miniapp .cal-day:hover { background: var(--bg); }
#page-miniapp .cal-day-empty { cursor:default; }
#page-miniapp .cal-today { font-weight:700; border:1px solid var(--primary); }
#page-miniapp .cal-start, #page-miniapp .cal-end { background:var(--primary); color:#fff; border-radius:6px; }
#page-miniapp .cal-single { background:var(--primary); color:#fff; border-radius:6px; }
#page-miniapp .cal-in-range { background:#d4f5f2; border-radius:0; }
#page-miniapp .cal-preview { background:#e8f7f5; border-radius:0; }
#page-miniapp .cal-preview-end { background:var(--primary); color:#fff; border-radius:6px; opacity:0.6; }
#page-miniapp .dual-cal-footer { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
#page-miniapp .btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }

@media (max-width: 900px) {
  #page-miniapp .metric-grid, #page-miniapp .analysis-grid, #page-miniapp .filter-charts, #page-miniapp .insight-grid { grid-template-columns: 1fr; }
}