/**
 * MD3 Tab Bar — 统一选项卡组件
 * 适用：订单状态(order)、交易状态(trade)、资料分区(edit)、筛选分类(service)
 * Token：全部使用 --md3-* 变量
 *
 * 用法：
 *   <div class="md3-tabs" role="tablist">
 *     <a class="md3-tabs__tab is-active" role="tab">
 *       <span class="md3-tabs__label">全部</span>
 *       <span class="md3-tabs__badge">12</span>
 *     </a>
 *     <a class="md3-tabs__tab" role="tab">...</a>
 *   </div>
 *
 * 变体：
 *   .md3-tabs--scrollable   手机端横向滚动
 *   .md3-tabs--pills        药丸/chip 风格
 *   .md3-tabs--underline    下划线风格（默认）
 *   .md3-tabs--filled       填充背景风格
 *   .md3-tabs--vertical     纵向排列
 */

/* ====== 容器 ====== */
.md3-tabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--md3-spacing-1, 4px);
	padding: 0;
	margin: 0;
	min-height: 48px;
	border-bottom: var(--md3-border-thin, 1px) solid var(--md3-color-outline-variant, #c4c7c5);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.md3-tabs::-webkit-scrollbar {
	display: none;
}

/* ====== 单个 Tab ====== */
.md3-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--md3-spacing-2, 8px);
	padding: var(--md3-spacing-2, 8px) var(--md3-spacing-4, 16px);
	min-height: 48px;
	min-width: max-content;
	border: none;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--md3-color-on-surface-variant, #49454f);
	font-family: inherit;
	font-size: var(--md3-typescale-label-large-size, 14px);
	font-weight: var(--md3-typescale-label-large-weight, 500);
	line-height: var(--md3-typescale-label-large-line-height, 20px);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition:
		color var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
		border-color var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
		background var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.md3-tabs__tab:hover {
	color: var(--md3-color-on-surface, #1c1b1f);
	background: color-mix(in srgb, var(--md3-color-on-surface, #1c1b1f) 5%, transparent);
}

.md3-tabs__tab:focus-visible {
	outline: 2px solid var(--md3-color-primary, #1976d2);
	outline-offset: -2px;
	border-radius: var(--md3-shape-xs, 4px) var(--md3-shape-xs, 4px) 0 0;
}

/* 激活态 — 下划线风格（默认） */
.md3-tabs__tab.is-active,
.md3-tabs__tab[aria-selected="true"] {
	color: var(--md3-color-primary, #1976d2);
	border-bottom-color: var(--md3-color-primary, #1976d2);
	font-weight: 600;
}

/* ====== 标签文字 ====== */
.md3-tabs__label {
	pointer-events: none;
}

/* ====== 图标（可选） ====== */
.md3-tabs__icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

/* ====== 角标 Badge ====== */
.md3-tabs__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--md3-shape-full, 9999px);
	background: var(--md3-color-surface-container, #edf0f4);
	color: var(--md3-color-on-surface-variant, #49454f);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	flex-shrink: 0;
	pointer-events: none;
	transition: background var(--md3-motion-duration-short2, 150ms), color var(--md3-motion-duration-short2, 150ms);
}

/* 激活态角标 */
.md3-tabs__tab.is-active .md3-tabs__badge,
.md3-tabs__tab[aria-selected="true"] .md3-tabs__badge {
	background: var(--md3-color-primary-container, #d0e4ff);
	color: var(--md3-color-on-primary-container, #001d35);
}

/* 有数值时的"热"角标 */
.md3-tabs__badge--hot {
	background: var(--md3-color-error, #ba1a1a);
	color: var(--md3-color-on-error, #fff);
}

.md3-tabs__tab.is-active .md3-tabs__badge--hot,
.md3-tabs__tab[aria-selected="true"] .md3-tabs__badge--hot {
	background: var(--md3-color-error, #ba1a1a);
	color: var(--md3-color-on-error, #fff);
}


/* ===================================================================
 * 变体：药丸/Chip 风格（Pills）— 完整实现
 * 用法：<nav class="md3-tabs md3-tabs--pills" role="tablist">
 *         <a class="md3-tabs__tab">...</a>
 *       </nav>
 * =================================================================== */
.md3-tabs--pills {
	border-bottom: none;
	gap: 8px;
	padding: 10px 0;
	flex-wrap: wrap;
	min-height: unset;
	align-items: center;
	/* 覆盖 .md3-tabs 的 overflow-y:hidden，避免药丸边框/hover 位移被裁切成断弧 */
	overflow: visible;
}

/* 横向滑动（与 wrap 互斥）：CRM/会员中心窄屏 Tab */
.md3-tabs--pills.md3-tabs--scrollable {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	max-width: 100%;
}

.md3-tabs--pills.md3-tabs--scrollable::-webkit-scrollbar {
	display: none;
}

.md3-tabs--pills.md3-tabs--scrollable .md3-tabs__tab {
	flex-shrink: 0;
	white-space: nowrap;
}

.md3-tabs--pills .md3-tabs__tab {
	height: 34px;
	min-height: 34px;
	padding: 0 16px;
	border-bottom: none;
	border-radius: 9999px;
	border: 1.5px solid var(--md3-color-outline-variant, #c3c6cf);
	background: var(--md3-color-surface-container-highest, #e1e3e7);
	color: var(--md3-color-on-surface-variant, #43474e);
	font-size: 13px;
	font-weight: 600;
	gap: 5px;
	transition:
		background 0.2s cubic-bezier(0.2,0,0,1),
		border-color 0.2s cubic-bezier(0.2,0,0,1),
		color 0.2s cubic-bezier(0.2,0,0,1),
		box-shadow 0.2s cubic-bezier(0.2,0,0,1),
		transform 0.15s cubic-bezier(0.2,0,0,1);
}

.md3-tabs--pills button.md3-tabs__tab {
	margin: 0;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.md3-tabs--pills .md3-tabs__tab .material-symbols-outlined {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.md3-tabs--pills .md3-tabs__tab:hover {
	border-color: var(--md3-color-primary, #005fb8);
	color: var(--md3-color-primary, #005fb8);
	background: rgba(0, 95, 184, 0.06);
	/* 不用 translateY：父级曾 overflow 裁切时会出现四角断弧边框 */
	transform: none;
}

/* 当前激活 Tab */
.md3-tabs--pills .md3-tabs__tab.is-active,
.md3-tabs--pills .md3-tabs__tab[aria-selected="true"] {
	background: var(--md3-color-primary, #005fb8);
	color: var(--md3-color-on-primary, #fff);
	border-color: var(--md3-color-primary, #005fb8);
	box-shadow: 0 4px 12px rgba(0, 95, 184, 0.28);
	transform: none;
}

.md3-tabs--pills .md3-tabs__tab.is-active:hover,
.md3-tabs--pills .md3-tabs__tab[aria-selected="true"]:hover {
	background: var(--md3-color-primary-dark, #004578);
}

/* 激活 tab 中的 badge */
.md3-tabs--pills .md3-tabs__tab.is-active .md3-tabs__badge,
.md3-tabs--pills .md3-tabs__tab[aria-selected="true"] .md3-tabs__badge {
	background: rgba(255, 255, 255, 0.25);
	color: var(--md3-color-on-primary, #fff);
}

/* Dark Mode */
:root[data-theme="dark"] .md3-tabs--pills .md3-tabs__tab,
:root.theme-dark .md3-tabs--pills .md3-tabs__tab {
	border-color: var(--md3-color-outline-variant, #49454f);
	background: var(--md3-color-surface-container-high, #2b2930);
	color: var(--md3-color-on-surface-variant, #cac4d0);
}

:root[data-theme="dark"] .md3-tabs--pills .md3-tabs__tab.is-active,
:root.theme-dark .md3-tabs--pills .md3-tabs__tab.is-active,
:root[data-theme="dark"] .md3-tabs--pills .md3-tabs__tab[aria-selected="true"],
:root.theme-dark .md3-tabs--pills .md3-tabs__tab[aria-selected="true"] {
	background: var(--md3-color-primary, #90caf9);
	color: var(--md3-color-on-primary, #001d35);
	border-color: var(--md3-color-primary, #90caf9);
}




/* ===================================================================
 * 变体：填充背景风格
 * =================================================================== */
.md3-tabs--filled {
	border-bottom: none;
	gap: 0;
	background: var(--md3-color-surface-container-low, #f3f5f9);
	border-radius: var(--md3-shape-md, 12px);
	padding: var(--md3-spacing-1, 4px);
}

.md3-tabs--filled .md3-tabs__tab {
	border-bottom: none;
	border-radius: var(--md3-shape-sm, 8px);
	min-height: 40px;
	flex: 1;
}

.md3-tabs--filled .md3-tabs__tab.is-active,
.md3-tabs--filled .md3-tabs__tab[aria-selected="true"] {
	background: var(--md3-color-surface, #fafcff);
	color: var(--md3-color-primary, #1976d2);
	box-shadow: var(--md3-elevation-1, 0 1px 3px rgba(0,0,0,0.12));
}


/* ===================================================================
 * 变体：纵向排列
 * =================================================================== */
.md3-tabs--vertical {
	flex-direction: column;
	border-bottom: none;
	border-right: var(--md3-border-thin, 1px) solid var(--md3-color-outline-variant, #c4c7c5);
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 160px;
}

.md3-tabs--vertical .md3-tabs__tab {
	border-bottom: none;
	border-right: 3px solid transparent;
	justify-content: flex-start;
	border-radius: var(--md3-shape-sm, 8px) 0 0 var(--md3-shape-sm, 8px);
}

.md3-tabs--vertical .md3-tabs__tab.is-active,
.md3-tabs--vertical .md3-tabs__tab[aria-selected="true"] {
	border-right-color: var(--md3-color-primary, #1976d2);
	background: color-mix(in srgb, var(--md3-color-primary, #1976d2) 8%, transparent);
}


/* ===================================================================
 * Dark Mode
 * =================================================================== */
:root[data-theme="dark"] .md3-tabs,
:root.theme-dark .md3-tabs {
	border-bottom-color: var(--md3-color-outline-variant, #49454f);
}

:root[data-theme="dark"] .md3-tabs__tab,
:root.theme-dark .md3-tabs__tab {
	color: var(--md3-color-on-surface-variant, #cac4d0);
}

:root[data-theme="dark"] .md3-tabs__tab:hover,
:root.theme-dark .md3-tabs__tab:hover {
	color: var(--md3-color-on-surface, #e6e1e5);
	background: color-mix(in srgb, var(--md3-color-on-surface, #e6e1e5) 8%, transparent);
}

:root[data-theme="dark"] .md3-tabs__tab.is-active,
:root[data-theme="dark"] .md3-tabs__tab[aria-selected="true"],
:root.theme-dark .md3-tabs__tab.is-active,
:root.theme-dark .md3-tabs__tab[aria-selected="true"] {
	color: var(--md3-color-primary, #18ffff);
	border-bottom-color: var(--md3-color-primary, #18ffff);
}

:root[data-theme="dark"] .md3-tabs__badge,
:root.theme-dark .md3-tabs__badge {
	background: var(--md3-color-surface-container-high, #2b2930);
	color: var(--md3-color-on-surface-variant, #cac4d0);
}

:root[data-theme="dark"] .md3-tabs__tab.is-active .md3-tabs__badge,
:root[data-theme="dark"] .md3-tabs__tab[aria-selected="true"] .md3-tabs__badge,
:root.theme-dark .md3-tabs__tab.is-active .md3-tabs__badge,
:root.theme-dark .md3-tabs__tab[aria-selected="true"] .md3-tabs__badge {
	background: color-mix(in srgb, var(--md3-color-primary, #18ffff) 18%, transparent);
	color: var(--md3-color-primary, #18ffff);
}

:root[data-theme="dark"] .md3-tabs--pills .md3-tabs__tab,
:root.theme-dark .md3-tabs--pills .md3-tabs__tab {
	border-color: var(--md3-color-outline-variant, #49454f);
}

:root[data-theme="dark"] .md3-tabs--pills .md3-tabs__tab.is-active,
:root.theme-dark .md3-tabs--pills .md3-tabs__tab.is-active {
	background: var(--md3-color-primary, #18ffff);
	color: var(--md3-color-on-primary, #001218);
	border-color: var(--md3-color-primary, #18ffff);
}

:root[data-theme="dark"] .md3-tabs--filled,
:root.theme-dark .md3-tabs--filled {
	background: var(--md3-color-surface-container-high, #2b2930);
}

:root[data-theme="dark"] .md3-tabs--filled .md3-tabs__tab.is-active,
:root.theme-dark .md3-tabs--filled .md3-tabs__tab.is-active {
	background: var(--md3-color-surface-container, #1e1e1e);
}

:root[data-theme="dark"] .md3-tabs--vertical,
:root.theme-dark .md3-tabs--vertical {
	border-right-color: var(--md3-color-outline-variant, #49454f);
}

/* ===================================================================
 * Support for Destoon m(id) li structure
 * =================================================================== */
.md3-tabs li.tab,
.md3-tabs li.tab_on {
	list-style: none;
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

.md3-tabs li.tab a.md3-tabs__tab-link,
.md3-tabs li.tab_on a.md3-tabs__tab-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--md3-spacing-2, 8px);
	padding: var(--md3-spacing-2, 8px) var(--md3-spacing-4, 16px);
	min-height: 48px;
	min-width: max-content;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--md3-color-on-surface-variant, #49454f);
	font-family: inherit;
	font-size: var(--md3-typescale-label-large-size, 14px);
	font-weight: var(--md3-typescale-label-large-weight, 500);
	line-height: var(--md3-typescale-label-large-line-height, 20px);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition:
		color var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
		border-color var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
		background var(--md3-motion-duration-short2, 150ms) var(--md3-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.md3-tabs li.tab a.md3-tabs__tab-link:hover,
.md3-tabs li.tab_on a.md3-tabs__tab-link:hover {
	color: var(--md3-color-on-surface, #1c1b1f);
	background: color-mix(in srgb, var(--md3-color-on-surface, #1c1b1f) 5%, transparent);
}

.md3-tabs li.tab a.md3-tabs__tab-link:focus-visible,
.md3-tabs li.tab_on a.md3-tabs__tab-link:focus-visible {
	outline: 2px solid var(--md3-color-primary, #1976d2);
	outline-offset: -2px;
	border-radius: var(--md3-shape-xs, 4px) var(--md3-shape-xs, 4px) 0 0;
}

/* Active State (tab_on) */
.md3-tabs li.tab_on a.md3-tabs__tab-link {
	color: var(--md3-color-primary, #178a72) !important; /* Teal primary */
	border-bottom-color: var(--md3-color-primary, #178a72) !important;
	font-weight: 600;
}

/* Dark Mode Support */
:root[data-theme="dark"] .md3-tabs li.tab a.md3-tabs__tab-link,
:root.theme-dark .md3-tabs li.tab a.md3-tabs__tab-link {
	color: var(--md3-color-on-surface-variant, #cac4d0);
}

:root[data-theme="dark"] .md3-tabs li.tab a.md3-tabs__tab-link:hover,
:root.theme-dark .md3-tabs li.tab a.md3-tabs__tab-link:hover {
	color: var(--md3-color-on-surface, #e6e1e5);
	background: color-mix(in srgb, var(--md3-color-on-surface, #e6e1e5) 8%, transparent);
}

:root[data-theme="dark"] .md3-tabs li.tab_on a.md3-tabs__tab-link,
:root.theme-dark .md3-tabs li.tab_on a.md3-tabs__tab-link {
	color: var(--md3-color-primary, #18ffff) !important;
	border-bottom-color: var(--md3-color-primary, #18ffff) !important;
}

/* Override variables and container style for the order tabs to match other pages' card style */
.sanxio-order-module-tabs {
	background: var(--md-sys-color-surface, var(--md3-surface, #ffffff));
	border: 1px solid var(--md-sys-color-outline-variant, var(--md3-outline, rgba(0,0,0,0.12)));
	border-radius: var(--md-shape-corner-large, var(--md3-radius-sm, 24px));
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
	padding: 12px 24px;
	margin-bottom: 24px;
	box-sizing: border-box;
	transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.sanxio-order-module-tabs:hover {
	transform: translateY(-2px);
	border-color: var(--md-sys-color-outline, var(--md3-outline, rgba(0,0,0,0.2)));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.sanxio-order-module-tabs .md3-tabs {
	border-bottom: none;
	min-height: 40px;
	align-items: center;
	gap: 4px;
}

.sanxio-order-module-tabs .md3-tabs li.tab a.md3-tabs__tab-link,
.sanxio-order-module-tabs .md3-tabs li.tab_on a.md3-tabs__tab-link {
	border-bottom: none !important;
	border-radius: 999px !important;
	min-height: 38px;
	padding: 8px 16px;
	font-weight: 500;
	color: var(--md3-on-surface-variant, #49454f);
	transition: background 0.15s ease, color 0.15s ease;
}

.sanxio-order-module-tabs .md3-tabs li.tab a.md3-tabs__tab-link:hover {
	background: color-mix(in srgb, var(--md3-color-on-surface, #1c1b1f) 6%, transparent);
	color: var(--md3-color-on-surface, #1c1b1f);
}

/* Active State (tab_on) with Teal primary container styling to match default theme's card tabs */
.sanxio-order-module-tabs .md3-tabs li.tab_on a.md3-tabs__tab-link {
	background: var(--md-sys-color-primary-container, var(--md3-primary-container, #e0f2f1)) !important; /* Light Teal container */
	color: var(--md-sys-color-on-primary-container, var(--md3-on-primary-container, #004d40)) !important; /* Dark Teal text */
	font-weight: 600;
}

/* Dark Mode for the card container and tabs */
:root[data-theme="dark"] .sanxio-order-module-tabs,
:root.theme-dark .sanxio-order-module-tabs {
	background: var(--md-sys-color-surface, var(--md3-surface-2, #2b2930));
	border-color: var(--md-sys-color-outline-variant, var(--md3-outline, rgba(255,255,255,0.15)));
}

:root[data-theme="dark"] .sanxio-order-module-tabs .md3-tabs li.tab_on a.md3-tabs__tab-link,
:root.theme-dark .sanxio-order-module-tabs .md3-tabs li.tab_on a.md3-tabs__tab-link {
	background: color-mix(in srgb, var(--md-sys-color-primary, var(--md3-color-primary, #178a72)) 25%, transparent) !important;
	color: #80cbc4 !important; /* Light Teal for dark mode */
}