/* vc.css — 站点级 Tabler 覆盖层
 * 加载顺序：tabler.min.css → vc.css；只在本文件追加/覆盖，不修改 Tabler 原始文件。
 * 容器断点（移动优先）：576 / 768 / 992 / 1200 / 1400 / 1600。
 */

:root {
	/* 设计断点（移动优先） */
	--vc-breakpoint-sm: 576px;
	--vc-breakpoint-md: 768px;
	--vc-breakpoint-lg: 992px;
	--vc-breakpoint-xl: 1200px;
	--vc-breakpoint-xxl: 1400px;
	--vc-breakpoint-xxxl: 1600px;

	/* 各断点下容器最大宽度：跟随设计稿，按设计稿在此调整 */
	--vc-container-sm: 540px;
	--vc-container-md: 720px;
	--vc-container-lg: 960px;
	--vc-container-xl: 1140px;
	--vc-container-xxl: 1320px;
	--vc-container-xxxl: 1560px;
}

/* 导航栏：nav 独占一行，背景色横贯整宽；内容由内部 container 对齐 */
.navbar {
	background-color: var(--tblr-bg-surface, #fff);
}

/* 品牌区：LOGO 与标题 */
.navbar-brand-title {
	font-weight: 600;
}

.navbar-brand-image + .navbar-brand-title {
	margin-left: .5rem;
}

/* 导航下拉：二级菜单/面板在父菜单项上悬停展开（不依赖额外 js） */
.dropdown-menu .dropdown > .dropdown-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	z-index: 1055;
}

.dropdown-menu .dropdown:hover > .dropdown-menu {
	display: block;
}

/* 面板型下拉：较宽，内容由使用方自由填充 */
.dropdown-menu-panel {
	width: 20rem;
}


/* 容器基类：小屏全宽，达到断点后限宽（移动优先） */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl,
.vc-container {
	--tblr-gutter-x: calc(var(--tblr-page-padding, 1.5rem) * 2);
	--tblr-gutter-y: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--tblr-gutter-x) * .5);
	padding-left: calc(var(--tblr-gutter-x) * .5);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container,
	.container-sm,
	.vc-container {
		max-width: var(--vc-container-sm);
	}
}

@media (min-width: 768px) {
	.container,
	.container-sm,
	.container-md,
	.vc-container {
		max-width: var(--vc-container-md);
	}
}

@media (min-width: 992px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.vc-container {
		max-width: var(--vc-container-lg);
	}
}

@media (min-width: 1200px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.vc-container {
		max-width: var(--vc-container-xl);
	}
}

@media (min-width: 1400px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl,
	.vc-container {
		max-width: var(--vc-container-xxl);
	}
}

/* 1600 断点：Tabler 原生没有该档，由本就对齐设计稿 */
@media (min-width: 1600px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl,
	.container-xxxl,
	.vc-container {
		max-width: var(--vc-container-xxxl);
	}
}

/* 全宽容器：任何断点都保持 100% */
.container-fluid {
	max-width: 100%;
}

/* 导航栏内的 xxxl / vc 容器与 Tabler 原生容器同排版 */
.navbar > .container-xxxl,
.navbar > .vc-container {
	display: flex;
	flex-wrap: inherit;
	align-items: center;
	justify-content: space-between;
}

/* layout-fluid 下所有容器全宽（与 Tabler 原生行为一致） */
.layout-fluid .container-xxxl,
.layout-fluid .vc-container {
	max-width: 100%;
}

/* ---------------- 主题：护眼模式（data-vc-theme="eye"） ----------------
 * 低饱和豆沙绿背景 + 深绿文字，避免 filter 影响图片。
 * 深色/护眼模式下同步导航栏文字色，抵消 navbar-light 的固定深色变量。
 */
html[data-vc-theme="eye"] {
	--tblr-body-bg: #eaf1e2;
	--tblr-body-color: #2f3b2c;
	--tblr-bg-surface: #f6f9f0;
	--tblr-border-color: #ccd8c2;
	--bs-body-bg: #eaf1e2;
	--bs-body-color: #2f3b2c;
	--bs-border-color: #ccd8c2;
}

html[data-bs-theme="dark"] .navbar,
html[data-vc-theme="eye"] .navbar {
	--bs-navbar-color: var(--tblr-body-color);
	--bs-navbar-hover-color: var(--tblr-body-color);
	--bs-navbar-active-color: var(--tblr-primary, #066fd1);
}

/* ======================================================================
 * navbar 精致现代风格（不写死颜色，三套主题各自一套 --vc-* 变量）
 * ====================================================================== */

:root {
	--vc-navbar-bg: rgba(255, 255, 255, .86);
	--vc-navbar-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 30px -22px rgba(15, 23, 42, .45);
	--vc-navbar-hover-bg: rgba(6, 111, 209, .09);
	--vc-navbar-active-bg: rgba(6, 111, 209, .12);
	--vc-brand-from: #0b5ed7;
	--vc-brand-to: #7c3aed;
}

html[data-bs-theme="dark"] {
	--vc-navbar-bg: rgba(22, 28, 41, .82);
	--vc-navbar-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 30px -22px rgba(0, 0, 0, .9);
	--vc-navbar-hover-bg: rgba(255, 255, 255, .08);
	--vc-navbar-active-bg: rgba(255, 255, 255, .12);
	--vc-brand-from: #60a5fa;
	--vc-brand-to: #c084fc;
}

html[data-vc-theme="eye"] {
	--vc-navbar-bg: rgba(246, 249, 240, .86);
	--vc-navbar-shadow: 0 1px 0 rgba(47, 59, 44, .05), 0 10px 30px -22px rgba(47, 59, 44, .35);
	--vc-navbar-hover-bg: rgba(88, 128, 70, .10);
	--vc-navbar-active-bg: rgba(88, 128, 70, .16);
	--vc-brand-from: #2f6b34;
	--vc-brand-to: #6b8e23;
}

/* 导航栏壳体：吸顶 + 半透明模糊 + 细底边 + 柔和投影 */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--vc-navbar-bg);
	border-bottom: 1px solid var(--tblr-border-color);
	box-shadow: var(--vc-navbar-shadow);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	/* 高度固定 4.5rem（72px），内容区保持 48px */
	min-height: 4.5rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.navbar > .container {
	gap: .75rem;
}

.navbar .navbar-nav {
	align-items: center;
}

/* 品牌区：渐变标题 + 圆角 LOGO */
.navbar-brand-title {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	color: var(--vc-brand-from);
	letter-spacing: .01em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.navbar-brand-title {
		background-image: linear-gradient(90deg, var(--vc-brand-from), var(--vc-brand-to));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.navbar-brand-image {
	height: 3rem;
	width: auto;
	border-radius: .55rem;
}

/* 导航栏菜单与下拉项文字不自动换行 */
.navbar .nav-link,
.navbar .dropdown-item {
	white-space: nowrap;
}

/* 左侧菜单：胶囊悬停 / 当前页高亮 */
ul.navbar-nav:not(.ms-auto) > .nav-item > .nav-link {
	margin: 0 .1rem;
	padding: .5rem .8rem;
	border-radius: .55rem;
	font-weight: 500;
	color: var(--tblr-body-color);
	transition: background-color .18s, color .18s;
}

ul.navbar-nav:not(.ms-auto) > .nav-item > .nav-link:hover,
ul.navbar-nav:not(.ms-auto) > .nav-item > .nav-link:focus,
ul.navbar-nav:not(.ms-auto) > .nav-item.show > .nav-link {
	background-color: var(--vc-navbar-hover-bg);
	color: var(--tblr-primary);
}

ul.navbar-nav:not(.ms-auto) > .nav-item > .nav-link.active {
	background-color: var(--vc-navbar-active-bg);
	color: var(--tblr-primary);
	font-weight: 600;
}

/* 右侧图标项间距 */
.navbar-nav.ms-auto {
	gap: .25rem;
}

/* 右侧图标下拉不显示下拉箭头 */
.navbar-nav.ms-auto > .nav-item > .nav-link.dropdown-toggle::after {
	display: none;
}

/* 用户菜单按钮（无 title）：hover 背景与内容留白
 * 组件默认带 Bootstrap 的 .p-0 工具类（!important），这里必须用 !important 覆盖 */
.navbar-nav.ms-auto .nav-item > .nav-link:not([title]) {
	padding: .5rem .5rem !important;
	border-radius: .55rem;
}

/* 右侧工具图标：圆形悬停 */
.navbar-nav.ms-auto .nav-item > .nav-link[title] {
	width: 2.3rem;
	height: 2.3rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color .18s, color .18s;
}

.navbar-nav.ms-auto .nav-item > .nav-link:hover,
.navbar-nav.ms-auto .nav-item > .nav-link:focus,
.navbar-nav.ms-auto .nav-item.show > .nav-link {
	background-color: var(--vc-navbar-hover-bg);
	color: var(--tblr-primary);
}

.navbar .nav-link > .ti {
	font-size: 1.15rem;
}

/* 下拉菜单：圆角、轻边框、层叠投影 */
.navbar .dropdown-menu {
	margin-top: .5rem;
	padding: .35rem;
	border: 1px solid var(--tblr-border-color);
	border-radius: .8rem;
	box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .45), 0 2px 8px rgba(15, 23, 42, .06);
}

.navbar .dropdown-item {
	padding: .5rem .7rem;
	border-radius: .55rem;
	font-weight: 500;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--vc-navbar-hover-bg);
	color: var(--tblr-primary);
}

.navbar .dropdown-menu .dropdown-item.active {
	background-color: var(--vc-navbar-active-bg);
	color: var(--tblr-primary);
	font-weight: 600;
}

.navbar .dropdown-divider {
	margin: .3rem .5rem;
}

/* 下拉悬停展开：仅精确指针 + 支持悬停的设备生效，触屏仍只走点击 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.navbar .nav-item.dropdown:hover > .dropdown-menu,
	.navbar .nav-item.dropdown:focus-within > .dropdown-menu {
		display: block;
	}

	/* 悬停展开时锚定到入口正下方；点击展开仍由 Bootstrap 定位 */
	.navbar .nav-item.dropdown > .dropdown-menu {
		top: 100%;
		left: 0;
		right: auto;
		margin-top: .35rem;
	}

	.navbar .nav-item.dropdown > .dropdown-menu-end {
		left: auto;
		right: 0;
	}

	/* 入口与菜单之间的悬停桥接，避免移向菜单时菜单闪退 */
	.navbar .nav-item.dropdown > .dropdown-menu::before {
		content: '';
		position: absolute;
		top: -.5rem;
		left: 0;
		right: 0;
		height: .5rem;
	}
}

/* 可访问性：键盘焦点统一品牌色外描边 */
.navbar .nav-link:focus-visible,
.navbar .dropdown-item:focus-visible,
.navbar .navbar-toggler:focus-visible {
	outline: 2px solid var(--tblr-primary);
	outline-offset: 2px;
}

/* 移动端折叠面板：增加内边距，图标恢复胶囊 */
@media (max-width: 767.98px) {
	.navbar .navbar-collapse {
		padding: .6rem 0 .35rem;
	}

	.navbar-nav.ms-auto .nav-item > .nav-link[title] {
		width: auto;
		height: auto;
		padding: .5rem .8rem;
		border-radius: .55rem;
	}
}

/* ======================================================================
 * 面包屑：图标与文字基线对齐，链接/当前页层级分明（颜色全部走变量，
 * 白天 / 夜间 / 护眼三主题自动继承）
 * ====================================================================== */

.breadcrumb {
	--tblr-breadcrumb-item-padding-x: .55rem;
	--tblr-breadcrumb-item-active-color: var(--tblr-body-color);
	--tblr-breadcrumb-item-active-font-weight: inherit;
	--tblr-breadcrumb-divider-color: var(--tblr-secondary, #6c7a91);
	--tblr-breadcrumb-divider: '\203A';
	margin-bottom: 1rem;
	padding: .5rem 0;
	font-size: .95rem;
	border-bottom: 1px solid var(--tblr-border-color);
}

/* 所有 item 统一为 inline-flex：active / 非 active 渲染框完全一致，零位移 */
.breadcrumb-item,
.breadcrumb-item > a,
.breadcrumb-item > span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	line-height: 1.2;
	vertical-align: middle;
}

.breadcrumb-item > a {
	color: var(--tblr-secondary, #6c7a91);
	text-decoration: none;
	transition: color .18s;
}

.breadcrumb-item > a:hover,
.breadcrumb-item > a:focus {
	color: var(--tblr-primary);
	text-decoration: none;
}

/* 当前页：加深并加粗；若是链接（根路由的房子）仍保持可点击 */
.breadcrumb-item.active {
	color: var(--tblr-body-color);
}

.breadcrumb-item.active > a {
	color: var(--tblr-body-color);
	pointer-events: auto;
}

.breadcrumb-item.active > a:hover,
.breadcrumb-item.active > a:focus {
	color: var(--tblr-primary);
}

.breadcrumb-item .ti {
	font-size: 1.05rem;
}

/* ======================================================================
 * 夜间模式 Modal：增强边框、阴影与遮罩对比
 * 暗色下弹窗背景与页面背景色差很小、默认边框透明，需单独提亮轮廓。
 * 仅命中 data-bs-theme="dark"，白天/护眼模式不受影响。
 * ====================================================================== */
html[data-bs-theme="dark"] .modal {
	--tblr-modal-bg: var(--tblr-bg-surface-secondary, #1b293a);
	--tblr-modal-border-color: #3d5674;
	--tblr-modal-header-border-color: #3d5674;
	--tblr-modal-footer-border-color: #3d5674;
	--tblr-modal-box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .65);
}

html[data-bs-theme="dark"] .modal-backdrop {
	--tblr-backdrop-bg: #000;
	--tblr-backdrop-opacity: .62;
}

/* ======================================================================
 * 浮动标签密码输入框：明文切换（眼睛图标）
 * ====================================================================== */
.form-floating.has-toggle .form-control {
	padding-right: 2.75rem;
}

.form-floating .password-toggle-btn {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .75rem;
	border: none;
	background: transparent;
	color: var(--tblr-secondary, #6c7a91);
	cursor: pointer;
	transition: color .18s;
}

.form-floating .password-toggle-btn:hover,
.form-floating .password-toggle-btn:focus {
	color: var(--tblr-primary);
}

.form-floating .password-toggle-btn .ti {
	font-size: 1.05rem;
}

/* ======================================================================
 * 护眼主题（Light 基 + 淡绿背景）：html[data-vc-theme="eye"]
 * 核心变量覆盖自 Tabler light 主题，营造低对比度米绿底色。
 * ====================================================================== */
html[data-vc-theme="eye"] {
	--tblr-body-bg: #eef5ea;
	--tblr-body-color: #3d4a3a;
	--tblr-bg-surface: #f5faef;
	--tblr-bg-surface-secondary: #e4eddc;
	--tblr-border-color: #c8d8bf;
	--tblr-border-color-translucent: rgba(111, 148, 106, 0.17);
	--tblr-primary: #4a7a3f;
	--tblr-primary-rgb: 74, 122, 63;
	--tblr-secondary: #6c7a63;
	--tblr-link-color: #3a6d2f;
	--tblr-link-hover-color: #2d5525;
	--tblr-code-color: #4a7a3f;
	--tblr-pre-bg: #e4eddc;
	--tblr-table-bg: transparent;
	--tblr-table-striped-bg: rgba(111, 148, 106, 0.06);
	--tblr-table-hover-bg: rgba(111, 148, 106, 0.10);
	--tblr-card-bg: #f5faef;
	--tblr-card-border-color: #c8d8bf;
	--tblr-card-cap-bg: #e4eddc;
	--tblr-navbar-bg: #e4eddc;
	--tblr-navbar-color: #3d4a3a;
	--tblr-navbar-active-color: #2d5525;
	--tblr-footer-bg: #e4eddc;
	--tblr-footer-color: #6c7a63;
	--tblr-input-bg: #f5faef;
	--tblr-input-border-color: #b8c9ae;
	--tblr-input-focus-border-color: #4a7a3f;
	--tblr-input-focus-box-shadow: 0 0 0 .2rem rgba(74, 122, 63, .18);
	--tblr-btn-primary-bg: #4a7a3f;
	--tblr-btn-primary-border-color: #4a7a3f;
	--tblr-btn-primary-hover-bg: #3a6232;
	--tblr-btn-primary-hover-border-color: #3a6232;
	--tblr-btn-primary-active-bg: #2d5525;
	--tblr-btn-primary-active-border-color: #2d5525;
}

/* 页面主体：紧凑顶部间距 */
.page-body {
	margin-top: .5rem;
}

/* Footer：跟随主题变量 */
.footer {
	background-color: var(--tblr-footer-bg, var(--tblr-bg-surface, #ffffff));
	color: var(--tblr-footer-color, var(--tblr-secondary));
	border-top-color: var(--tblr-border-color);
}

/* ======================================================================
 * Dark 主题降亮：Tabler 原生 body-color #dce1e7 配纯黑背景太刺眼，
 * 正文降到 #b8c0cc，次要文字 rgba(184,192,204,.7)，仍满足 WCAG AA。
 * ====================================================================== */
[data-bs-theme="dark"] {
	--tblr-body-color: #b8c0cc;
	--tblr-secondary-color: rgba(184, 192, 204, 0.7);
	--tblr-secondary: rgba(184, 192, 204, 0.7);
	--tblr-bg-surface: #0b1520;
	--tblr-border-color: #1f2b39;
}

/* ======================================================================
 * Dark 主题幻灯片：整组降亮遮罩 + 控件保持浅色
 * Tabler 在 [data-bs-theme=dark] 下会把轮播箭头/指示点反转为纯黑，
 * 照片类幻灯片需要保持浅色控件；遮罩只压暗组件呈现，不改动图片本身。
 * ====================================================================== */
html[data-bs-theme="dark"] .carousel .carousel-item::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(7, 12, 19, .32);
	pointer-events: none;
}

html[data-bs-theme="dark"] .carousel .carousel-caption {
	z-index: 2;
	color: #fff;
}

html[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
html[data-bs-theme="dark"] .carousel .carousel-control-next-icon {
	filter: none;
}

html[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target] {
	background-color: #fff;
}

/* ======================================================================
 * 幻灯片悬停缩放：与卡片图片 hover 效果一致
 * 只缩放 img，transform 不占用 carousel-item（滑动/淡入动画仍归 Bootstrap）；
 * 裁切由 .carousel-inner 原生 overflow hidden 提供，Dark 遮罩仍覆盖全图。
 * ====================================================================== */
.carousel .carousel-item img {
	transition: transform .4s ease;
}

.carousel:hover .carousel-item.active img {
	transform: scale(1.05);
}

/* ======================================================================
 * Card 图片悬停：缩放 + 提亮（全主题通用）
 * 悬停时图片 scale(1.05) 轻微放大，卡片 overflow hidden 裁切放大溢出；
 * Dark 主题在基础降亮上恢复亮度，Light 主题轻微提亮提饱和，
 * 护眼主题只缩放不加 filter（遵循护眼模式不用 filter 的全局规则）。
 * Tabler 在 .card { } 内部重新定义了 --tblr-card-border-color 等变量，
 * 覆盖了 html 上的继承值，Dark 变量须用 html[data-bs-theme="dark"] .card 覆盖。
 * ====================================================================== */

html[data-bs-theme="dark"] .card {
	--tblr-card-border-color: #1f2b39;
	--tblr-card-cap-bg: #111d2a;
	--tblr-card-box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .18);
}

/* 含图片的卡片：裁切放大溢出，保证圆角完整（:has 精确命中，不影响含下拉的普通卡片） */
.card:has(> .card-img-top),
.card:has(img[style*="object-fit"]) {
	overflow: hidden;
}

/* Card 顶图：统一 16:9 裁切（原为 card_countdown 内联样式，移至全局统一管理） */
.card > .card-img-top {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 图片过渡：transform 用于悬停缩放，filter 用于主题亮度调整 */
.card > .card-img-top,
.card img[style*="object-fit"] {
	transition: transform .4s ease, filter .25s ease;
}

/* 悬停缩放：全主题通用 */
.card:hover > .card-img-top,
.card:hover img[style*="object-fit"] {
	transform: scale(1.05);
}

/* Dark 主题：基础降亮 + 悬停恢复亮度（!important 覆盖 inline style 中的 filter） */
html[data-bs-theme="dark"] .card > .card-img-top,
html[data-bs-theme="dark"] .card img[style*="object-fit"] {
	filter: brightness(.6) saturate(.8) !important;
}

html[data-bs-theme="dark"] .card:hover > .card-img-top,
html[data-bs-theme="dark"] .card:hover img[style*="object-fit"] {
	filter: brightness(.95) saturate(.96) !important;
}

/* Light 主题：悬停轻微提亮；不用 !important，带 inline filter（如 sepia）的图片保持原样 */
html[data-bs-theme="light"]:not([data-vc-theme="eye"]) .card:hover > .card-img-top,
html[data-bs-theme="light"]:not([data-vc-theme="eye"]) .card:hover img[style*="object-fit"] {
	filter: brightness(1.06) saturate(1.05);
}