/**
 * 页头纯 MD3 样式（全站通用）
 * 仅使用 --md-sys-* 设计令牌与 mdc-* 类名，不依赖旧模板样式。
 * 适用于所有引用 header 的页面。
 */

:root {
	/* 合站前台右上头像：统一按首页尺寸 */
	--sanxio-topbar-avatar-btn-size: 48px;
	--sanxio-topbar-avatar-size: 40px;
}

/* ========== Top App Bar：Logo ========== */
.mdc-top-app-bar__title .mdc-top-app-bar__logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--md-sys-color-on-surface, #1c1c1c);
	height: 40px;
}
.mdc-top-app-bar__title .mdc-top-app-bar__logo-img {
	height: 40px;
	max-width: 200px;
	object-fit: contain;
	display: block;
	max-height: 100%;
}
.mdc-top-app-bar__title .mdc-top-app-bar__logo-link img {
	display: block;
	max-height: 100%;
}
.mdc-top-app-bar__title .mdc-top-app-bar__logo-fallback {
	display: none;
	font-family: var(--md-sys-typescale-label-large-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface, #1c1c1c);
}
.mdc-top-app-bar__title .mdc-top-app-bar__logo-fallback.mdc-top-app-bar__logo-fallback--visible {
	display: inline;
}

/* ========== Top App Bar：用户头像 ========== */
.mdc-top-app-bar__user-avatar {
	position: relative;
	padding: 0;
	overflow: visible;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--sanxio-topbar-avatar-btn-size, 48px) !important;
	height: var(--sanxio-topbar-avatar-btn-size, 48px) !important;
	box-sizing: border-box;
}
.mdc-top-app-bar__user-avatar-img {
	width: var(--sanxio-topbar-avatar-size, 40px) !important;
	height: var(--sanxio-topbar-avatar-size, 40px) !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	border: 2px solid var(--md-sys-color-outline-variant, #bdbdbd) !important;
	transition: border-color 0.2s, transform 0.2s;
	margin: 0 !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2 !important;
	background-color: var(--md-sys-color-surface-container, #f5f5f5) !important;
	flex-shrink: 0 !important;
}
.mdc-top-app-bar__user-avatar:hover .mdc-top-app-bar__user-avatar-img {
	border-color: var(--md-sys-color-primary, #1976d2) !important;
	transform: translate(-50%, -50%) scale(1.05) !important;
	box-shadow: var(--md-sys-elevation-level1) !important;
}
.mdc-top-app-bar__user-avatar:hover .mdc-top-app-bar__user-avatar-fallback {
	color: var(--md-sys-color-primary, #1976d2) !important;
	transform: translate(-50%, -50%) scale(1.05) !important;
}
.mdc-top-app-bar__user-avatar:focus .mdc-top-app-bar__user-avatar-img,
.mdc-top-app-bar__user-avatar:focus .mdc-top-app-bar__user-avatar-fallback {
	outline: 2px solid var(--md-sys-color-primary, #1976d2) !important;
	outline-offset: 2px;
}
.mdc-top-app-bar__user-avatar-fallback {
	width: var(--sanxio-topbar-avatar-size, 40px) !important;
	height: var(--sanxio-topbar-avatar-size, 40px) !important;
	font-size: var(--sanxio-topbar-avatar-size, 40px) !important;
	line-height: 1 !important;
	color: var(--md-sys-color-on-surface-variant, #424242) !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	background-color: transparent !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1 !important;
}
/* 未登录时仅显示图标，无头像图 */
.mdc-top-app-bar__user-avatar--fallback-only .mdc-top-app-bar__user-avatar-fallback {
	display: inline-flex !important;
}

/* 顶栏头像角标：未读聊天（与底栏、抽屉同源） */
.mdc-top-app-bar__user-chat-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 5;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	border-radius: 9px;
	background: var(--md-sys-color-error, #b3261e);
	color: var(--md-sys-color-on-error, #fff);
	border: 2px solid var(--md-sys-color-surface, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.mdc-top-app-bar__user-chat-badge:not(:empty) {
	display: inline-flex;
}

/* ========== Drawer：Logo（移动端主导航抽屉） ========== */
.mdc-drawer__logo .mdc-drawer__logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--md-sys-color-on-surface, #1c1c1c);
}
.mdc-drawer__logo .mdc-drawer__logo-img {
	max-height: 40px;
	max-width: 160px;
	object-fit: contain;
	display: block;
}
.mdc-drawer__logo .mdc-drawer__logo-fallback {
	display: none;
	font-family: var(--md-sys-typescale-label-large-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface, #1c1c1c);
}
.mdc-drawer__logo .mdc-drawer__logo-fallback.mdc-drawer__logo-fallback--visible {
	display: inline;
}

/* 深色主题 */
:root[data-theme="dark"] .mdc-top-app-bar__title .mdc-top-app-bar__logo-link,
:root.theme-dark .mdc-top-app-bar__title .mdc-top-app-bar__logo-link {
	color: var(--md-sys-color-on-surface, #f5f5f5);
}
:root[data-theme="dark"] .mdc-top-app-bar__title .mdc-top-app-bar__logo-fallback,
:root.theme-dark .mdc-top-app-bar__title .mdc-top-app-bar__logo-fallback {
	color: var(--md-sys-color-on-surface, #f5f5f5);
}
:root[data-theme="dark"] .mdc-top-app-bar__user-avatar:hover .mdc-top-app-bar__user-avatar-img,
:root.theme-dark .mdc-top-app-bar__user-avatar:hover .mdc-top-app-bar__user-avatar-img {
	border-color: var(--md-sys-color-primary) !important;
}
:root[data-theme="dark"] .mdc-top-app-bar__user-avatar-fallback,
:root.theme-dark .mdc-top-app-bar__user-avatar-fallback {
	color: var(--md-sys-color-on-surface-variant, #e8e8e8) !important;
}
:root[data-theme="dark"] .mdc-drawer__logo .mdc-drawer__logo-link,
:root.theme-dark .mdc-drawer__logo .mdc-drawer__logo-link {
	color: var(--md-sys-color-on-surface, #f5f5f5);
}
:root[data-theme="dark"] .mdc-drawer__logo .mdc-drawer__logo-fallback,
:root.theme-dark .mdc-drawer__logo .mdc-drawer__logo-fallback {
	color: var(--md-sys-color-on-surface, #f5f5f5);
}

/* ========== 页头搜索：清空按钮（与版本库 header 一致，#search-cls） ========== */
.mdc-search-field-wrapper {
	position: relative;
}
#search-cls.mdc-search-cls {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--md-sys-color-on-surface-variant, #49454f);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 28px;
	z-index: 2;
	transition: background-color .2s, color .2s;
}
#search-cls.mdc-search-cls[style*="display: block"],
#search-cls.mdc-search-cls[style*="display:flex"] {
	display: flex !important;
}
#search-cls.mdc-search-cls:hover {
	background-color: var(--md-sys-color-surface-variant, #e7e0ec);
	color: var(--md-sys-color-on-surface, #1c1c1c);
}
#search-cls.mdc-search-cls .material-symbols-outlined {
	font-size: 18px;
	width: 18px;
	height: 18px;
}
/* 为清空按钮预留空间，避免输入文字与按钮重叠 */
.mdc-search-field-wrapper .mdc-text-field__input {
	padding-right: 44px !important;
}

/* 深色模式：页头搜索框背景与主体一致（不再单独变色） */
:root[data-theme="dark"] .mdc-top-app-bar .mdc-text-field--outlined,
:root.theme-dark .mdc-top-app-bar .mdc-text-field--outlined {
	background-color: var(--md-sys-color-surface, #121212) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}
:root[data-theme="dark"] .mdc-top-app-bar .mdc-text-field--outlined:hover,
:root[data-theme="dark"] .mdc-top-app-bar .mdc-text-field--outlined:focus-within,
:root.theme-dark .mdc-top-app-bar .mdc-text-field--outlined:hover,
:root.theme-dark .mdc-top-app-bar .mdc-text-field--outlined:focus-within {
	/* hover/聚焦时与普通状态保持一致 */
	background-color: var(--md-sys-color-surface, #121212) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}
:root[data-theme="dark"] .mdc-top-app-bar .mdc-text-field--outlined .mdc-text-field__input,
:root.theme-dark .mdc-top-app-bar .mdc-text-field--outlined .mdc-text-field__input {
	background-color: transparent !important;
	color: var(--md-sys-color-on-surface, #ffffff) !important;
}
:root[data-theme="dark"] .mdc-top-app-bar .mdc-text-field--outlined .mdc-text-field__input::placeholder,
:root.theme-dark .mdc-top-app-bar .mdc-text-field--outlined .mdc-text-field__input::placeholder {
	color: var(--md-sys-color-on-surface-variant, #c0c0c0) !important;
	opacity: 0.75;
}

/* 深色模式：搜索模块下拉（最左侧选择框）去掉白色 hover 底色 */
:root[data-theme="dark"] .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select,
:root.theme-dark .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select {
	background-color: var(--md-sys-color-surface, #121212) !important;
	color: var(--md-sys-color-on-surface, #ffffff) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
:root[data-theme="dark"] .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select:hover,
:root[data-theme="dark"] .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select:focus,
:root.theme-dark .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select:hover,
:root.theme-dark .mdc-top-app-bar .mdc-search-form .mdc-search-module-select select#search-module-select:focus {
	background-color: var(--md-sys-color-surface, #121212) !important;
	color: var(--md-sys-color-on-surface, #ffffff) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ========== 清除热门搜索（扩展配置：不显示热门搜索区块） ========== */
.search-hot {
	display: none !important;
}
/* 页头搜索框聚焦时下拉里的“热门搜索”及其关键词列表一并隐藏（红框内不再显示） */
#search-rec p.hot,
#search-rec p.hot + div,
#search-rec-mobile p.hot,
#search-rec-mobile p.hot + div {
	display: none !important;
}
/* 新模板不用下拉：隐藏搜索联想/最近搜索下拉容器（responsive 不展示 search-tip、search-rec） */
#search-tip,
#search-rec,
#search-tip-mobile,
#search-rec-mobile {
	display: none !important;
}

/* ========== 页头有模块菜单时：减弱页头下方阴影，避免遮挡菜单按钮上边框 ========== */
body:has(.mdc-module-menu) .mdc-top-app-bar {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}

/* ========== 页头模块菜单：左右按钮使用全站统一 sanxio-scroll-arrow（仅覆盖尺寸） ========== */
.mdc-module-menu .sanxio-scroll-arrow {
	width: 32px;
	height: 32px;
}
.mdc-module-menu .sanxio-scroll-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* 模块菜单：上下留白 */
.mdc-module-menu__scroll-inner {
	padding: 4px 8px !important;
}

/* ========== 模块菜单：md3-btn 配色统一（消除与 module-menu 伪元素冲突） ========== */
/* 使用 md3-btn 时，移除 module-menu 的 ::before/::after，避免浅蓝/深蓝/红边等混搭 */
.mdc-module-menu__link.md3-btn::before,
.mdc-module-menu__link.md3-btn::after {
	display: none !important;
}
/* 模块菜单按钮：高度 30px（菜单 56px 后内容区 40px，足够容纳） */
.mdc-module-menu__link.md3-btn {
	--md3-btn-height: 30px;
	min-height: 30px !important;
	height: 30px !important;
	padding: 0 14px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}
/* 真正原因：hover 时 translateY(-1px) 使按钮上移，顶部被裁切。取消该 transform */
.mdc-module-menu__link.md3-btn:hover {
	transform: none !important;
}
/* 非活动态：用 inset box-shadow 模拟边框，避免 1px border 被 overflow 裁切上边 */
.mdc-module-menu__link.md3-btn.md3-btn--outlined {
	border: none !important;
	box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, #c7d7ea) !important;
	background: var(--md-sys-color-surface, #ffffff) !important;
	color: var(--md-sys-color-on-surface-variant, #49454f) !important;
}
.mdc-module-menu__link.md3-btn.md3-btn--outlined:hover {
	/* hover 时不再改变颜色，保持与普通状态一致 */
	box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, #c7d7ea) !important;
	background: var(--md-sys-color-surface, #ffffff) !important;
	color: var(--md-sys-color-on-surface-variant, #49454f) !important;
}
/* 活动态 filled：统一主色 */
.mdc-module-menu__link.md3-btn.md3-btn--filled {
	background: var(--md-sys-color-primary, #1976d2);
	color: var(--md-sys-color-on-primary, #ffffff);
}

/* ========== 电脑版：隐藏顶部返回按钮（仅移动端显示） ========== */
@media (min-width: 768px) {
	#navToggle[data-nav-mode="back"] {
		display: none !important;
	}
}