/* 支付中心概览（jio_pay）：今日实时 + 筛选条 + 指标卡 + ECharts 图表 + 转化与退款 + 热销排行 + 待办 + 快捷入口。
 * 复用 native-ui.css 的 --an-* 令牌，规则限定在本页类名下。图表由 assets/js/admin-pay-overview.js 绘制。 */
.jio-po-page [hidden] { display: none !important; }

/* ---------- 今日实时 ---------- */
.jio-po-live {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0 0 16px;
	padding: 14px 20px;
	background: var(--an-card);
	border-radius: var(--an-radius);
	box-shadow: var(--an-shadow);
}
.jio-po-live__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jio-po-live__dot {
	width: 8px;
	height: 8px;
	background: var(--an-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--an-primary-soft);
	animation: jio-po-pulse 2s ease-in-out infinite;
}
@keyframes jio-po-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .jio-po-live__dot { animation: none; } }
.jio-po-live__label { color: var(--an-muted); }
.jio-po-live__value { color: var(--an-text); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jio-po-live__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--an-muted); font-size: 12px; }

/* ---------- 筛选条 ---------- */
.jio-po-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 16px;
}
.jio-po-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	background: var(--an-card);
	border-radius: var(--an-radius-sm);
	box-shadow: var(--an-shadow);
}
.jio-po-seg button {
	padding: 5px 12px;
	color: var(--an-text-2);
	font-size: 12px;
	line-height: 1.5;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.jio-po-seg button:hover { color: var(--an-primary); }
.jio-po-seg button[aria-pressed="true"] { color: var(--an-primary); font-weight: 600; background: var(--an-primary-soft); }
.jio-po-seg button:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 1px; }
.jio-po-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--an-muted); }
.jio-po-range label { display: inline-flex; margin: 0; }
.jio-po-range-label { color: var(--an-muted); font-size: 12px; }

/* ---------- 提示 ---------- */
.jio-po-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	color: var(--an-text-2);
	font-size: 12px;
	background: #fff8eb;
	border-left: 3px solid var(--an-warning);
	border-radius: var(--an-radius-sm);
}
.jio-po-page .jio-po-error { margin: 0 0 16px; }

/* ---------- 指标卡 ---------- */
.jio-po-kpis {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}
.jio-po-kpi {
	--po-tone: var(--an-primary);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 16px 18px 14px;
	background: var(--an-card);
	border-radius: var(--an-radius);
	box-shadow: var(--an-shadow);
	overflow: hidden;
}
.jio-po-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--po-tone); opacity: .85; }
.jio-po-kpi--success { --po-tone: var(--an-primary); }
.jio-po-kpi--info { --po-tone: var(--an-info); }
.jio-po-kpi--warning { --po-tone: var(--an-warning); }
.jio-po-kpi--danger { --po-tone: var(--an-danger); }
.jio-po-kpi--primary { --po-tone: #8a63d2; }
.jio-po-kpi__label { color: var(--an-muted); font-size: 13px; }
.jio-po-kpi__value {
	color: var(--an-text);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}
.jio-po-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.jio-po-kpi__meta { color: var(--an-muted); }

.jio-po-delta {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	border-radius: 4px;
}
.jio-po-delta.is-up { color: var(--an-primary); background: var(--an-primary-soft); }
.jio-po-delta.is-down { color: var(--an-danger); background: #fdf0f2; }
.jio-po-delta.is-flat { color: var(--an-muted); background: var(--an-bg-soft); }

/* ---------- 栅格 / 加载态 ---------- */
.jio-po-body { transition: opacity .15s; }
.jio-po-body.is-loading { opacity: .55; pointer-events: none; }
.jio-po-grid {
	display: grid;
	gap: 16px;
	align-items: stretch;
	margin: 0 0 16px;
}
.jio-po-grid--main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.jio-po-grid > .jio-native-card { margin: 0; }
.jio-po-card { display: flex; flex-direction: column; min-width: 0; }
.jio-po-card > .jio-native-card__body { flex: 1; }

/* ---------- 图表 ---------- */
.jio-po-chart { width: 100%; min-width: 0; }
.jio-po-chart--lg { height: 340px; }
.jio-po-chart--md { height: 280px; }

/* ---------- 转化与退款 ---------- */
.jio-po-funnel { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.jio-po-funnel li { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.jio-po-funnel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jio-po-funnel__label { color: var(--an-text-2); }
.jio-po-funnel__value { color: var(--an-text); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jio-po-funnel__bar { display: block; height: 6px; background: var(--an-bg-soft); border-radius: 3px; overflow: hidden; }
.jio-po-funnel__bar i { display: block; width: 0; height: 100%; background: var(--an-primary); border-radius: 3px; transition: width .3s; }
.jio-po-funnel li[data-metric="close_rate"] .jio-po-funnel__bar i { background: var(--an-warning); }
.jio-po-funnel li[data-metric="refund_rate"] .jio-po-funnel__bar i { background: var(--an-danger); }
.jio-po-funnel li[data-metric="created_count"] .jio-po-funnel__bar { display: none; }
.jio-po-funnel__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--an-muted); font-size: 12px; }

/* ---------- 热销排行 ---------- */
.jio-po-top .column-rank { width: 44px; text-align: center; }
.jio-po-top .column-num { width: 110px; text-align: right; }
.jio-po-top .column-share { width: 160px; }
.jio-po-top td { vertical-align: middle; }
.jio-po-top td.column-num { font-variant-numeric: tabular-nums; }
.jio-po-top td a { color: var(--an-text); font-weight: 500; text-decoration: none; }
.jio-po-top td a:hover { color: var(--an-primary); }
.jio-po-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--an-muted);
	font-size: 12px;
	font-weight: 600;
	background: var(--an-bg-soft);
	border-radius: 6px;
}
.jio-po-rank.is-top { color: #fff; background: var(--an-primary); }
.jio-po-share { display: flex; align-items: center; gap: 8px; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.jio-po-share > span { flex: 1; height: 6px; background: var(--an-bg-soft); border-radius: 3px; overflow: hidden; }
.jio-po-share > span > i { display: block; height: 100%; background: var(--an-primary); border-radius: 3px; }
.jio-po-top__empty { padding: 32px 12px !important; color: var(--an-muted); text-align: center; }

/* ---------- 待办 ---------- */
.jio-po-todo { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jio-po-todo li { margin: 0; }
.jio-po-todo__item {
	--po-tone: var(--an-muted);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--an-text-2);
	background: var(--an-bg-soft);
	border-radius: var(--an-radius-sm);
	text-decoration: none;
	transition: background .15s, color .15s;
}
.jio-po-todo__item:hover,
.jio-po-todo__item:focus { color: var(--an-text); background: color-mix(in srgb, var(--po-tone) 10%, #fff); }
.jio-po-todo__item--danger { --po-tone: var(--an-danger); }
.jio-po-todo__item--warning { --po-tone: var(--an-warning); }
.jio-po-todo__item--info { --po-tone: var(--an-info); }
.jio-po-todo__item--neutral { --po-tone: var(--an-muted); }
.jio-po-todo__icon.dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	color: var(--po-tone);
	font-size: 16px;
	background: color-mix(in srgb, var(--po-tone) 12%, #fff);
	border-radius: 8px;
}
.jio-po-todo__icon.dashicons:before { line-height: 30px; }
.jio-po-todo__label { flex: 1; min-width: 0; }
.jio-po-todo__value { color: var(--an-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jio-po-todo__item--danger .jio-po-todo__value { color: var(--an-danger); }
.jio-po-todo__item--warning .jio-po-todo__value { color: #c27c0e; }
.jio-po-todo__item--neutral .jio-po-todo__value { color: var(--an-muted); }

/* ---------- 快捷入口 ---------- */
.jio-po-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jio-po-links li { margin: 0; }
.jio-po-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 10px 12px;
	color: var(--an-text);
	border: 1px solid var(--an-border-soft);
	border-radius: var(--an-radius-sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .15s, background .15s;
}
.jio-po-links a:hover,
.jio-po-links a:focus { color: var(--an-text); background: var(--an-primary-soft); border-color: color-mix(in srgb, var(--an-primary) 30%, transparent); }
.jio-po-links__icon.dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--an-primary);
	font-size: 17px;
	background: var(--an-primary-soft);
	border-radius: 8px;
}
.jio-po-links__icon.dashicons:before { line-height: 32px; }
.jio-po-links__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jio-po-links__text strong { font-size: 13px; font-weight: 600; }
.jio-po-links__text span { color: var(--an-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 响应式 ---------- */
@media (max-width: 1440px) {
	.jio-po-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
	.jio-po-grid--main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 782px) {
	.jio-po-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.jio-po-kpi { padding: 12px 14px; }
	.jio-po-kpi__value { font-size: 19px; }
	.jio-po-chart--lg { height: 280px; }
	.jio-po-chart--md { height: 240px; }
	.jio-po-top .column-share { display: none; }
}