/*
 * 仅放「全站共用」样式：CSS 变量、字体、极小重置等。
 * 导航栏、页脚等骨架样式 → css/layout/base.css
 * 某一页独有样式 → css/pages/<页面名>.css，并在模板 {% block extra_css %} 中引入。
 */

.app-alert {
	position: relative;
	overflow: hidden;
}

html,
body,
button,
input,
select,
textarea {
	font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}

html,
body {
	max-width: 100%;
}

/* 全站：按钮在 flex / 窄表格列内不被压成竖排 */
.btn:not(.btn-link) {
	white-space: nowrap;
	flex-shrink: 0;
}

.btn-sm:not(.btn-link):not(.p-0):not([class*="w-"]) {
	min-inline-size: 3.25rem;
}

.btn-link {
	white-space: nowrap;
}

:is(.d-flex, .d-inline-flex, [class*="-actions"], [class*="-link-cell"]) > form {
	flex-shrink: 0;
}

/* 全站暗色主题基线（Bootstrap 5 变量 + 常见组件） */
[data-bs-theme="dark"] {
	--bs-body-bg: #121826;
	--bs-body-color: #dbe4fb;
	--bs-emphasis-color: #f3f7ff;
	--bs-secondary-color: #98a7cc;
	--bs-tertiary-bg: #1a2234;
	--bs-secondary-bg: #141c2c;
	--bs-border-color: #2b3858;
	--bs-border-color-translucent: rgba(126, 152, 212, 0.22);
	--bs-card-bg: #171f31;
	--bs-card-cap-bg: #151d2d;
	--bs-light-rgb: 33, 45, 73;
	--bs-dark-rgb: 222, 231, 250;
	--bs-link-color: #9fc0ff;
	--bs-link-hover-color: #b8d1ff;
}

[data-bs-theme="dark"] body {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas:not(.app-mobile-nav),
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .popover {
	background-color: var(--bs-card-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .list-group-item.active,
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
	background-color: var(--bs-card-cap-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-floating > .form-control,
[data-bs-theme="dark"] .form-floating > .form-select,
[data-bs-theme="dark"] .input-group-text {
	background-color: #111a2b;
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-floating > label {
	color: #8ea0c9;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
	background-color: #111a2b;
	color: var(--bs-body-color);
	border-color: #5278d8;
	box-shadow: 0 0 0 0.2rem rgba(82, 120, 216, 0.28);
}

[data-bs-theme="dark"] .form-check-input {
	background-color: #111a2b;
	border-color: #44567e;
}

[data-bs-theme="dark"] .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--bs-body-color);
	--bs-table-border-color: var(--bs-border-color);
	--bs-table-striped-bg: rgba(143, 170, 226, 0.06);
	--bs-table-hover-bg: rgba(143, 170, 226, 0.1);
}

[data-bs-theme="dark"] .table-light {
	--bs-table-bg: #1a253d;
	--bs-table-color: #dbe4fb;
	--bs-table-border-color: #314266;
}

[data-bs-theme="dark"] .nav-tabs,
[data-bs-theme="dark"] .nav-tabs .nav-link {
	border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
	background-color: #1a2338;
	color: var(--bs-emphasis-color);
	border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .pagination .page-link {
	background-color: #141d2e;
	border-color: var(--bs-border-color);
	color: #bdd0fb;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
	background-color: #3357b8;
	border-color: #3357b8;
	color: #fff;
}

[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-light {
	background-color: #243352;
	border-color: #32466f;
	color: #e8efff;
}

[data-bs-theme="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(160%);
}

[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .dropdown-divider {
	border-color: var(--bs-border-color);
}

.app-alert-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.22rem;
	background: rgba(var(--bs-primary-rgb), 0.8);
	transform-origin: left center;
	transform: scaleX(1);
	transition: transform linear;
}

/*
 * 可选闪光按钮效果：
 * 用法：在按钮或链接上附加 class="btn btn-shiny"，文案放进 <span> 中。
 * 主题变体：btn-shiny-orange（暖色）、btn-shiny-accent（跟随 --engine-accent）
 * 例：<button class="btn btn-shiny btn-shiny-orange"><i class="bi bi-check"></i><span>提交</span></button>
 */
@property --btn-shiny-gradient-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --btn-shiny-gradient-angle-offset {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --btn-shiny-gradient-percent {
	syntax: "<percentage>";
	initial-value: 5%;
	inherits: false;
}

@property --btn-shiny-gradient-shine {
	syntax: "<color>";
	initial-value: #ffffff;
	inherits: false;
}

.btn-shiny {
	--btn-shiny-bg: #0f172a;
	--btn-shiny-bg-subtle: #1e293b;
	--btn-shiny-fg: #f8fafc;
	--btn-shiny-highlight: #3b82f6;
	--btn-shiny-highlight-subtle: #93c5fd;
	--btn-shiny-shadow-size: 2px;
	--btn-shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
	--btn-shiny-duration: 3s;
	--btn-shiny-animation: btn-shiny-gradient-angle linear infinite;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	isolation: isolate;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid transparent;
	color: var(--btn-shiny-fg);
	background: linear-gradient(var(--btn-shiny-bg), var(--btn-shiny-bg)) padding-box,
		conic-gradient(
			from calc(var(--btn-shiny-gradient-angle) - var(--btn-shiny-gradient-angle-offset)),
			transparent,
			var(--btn-shiny-highlight) var(--btn-shiny-gradient-percent),
			var(--btn-shiny-gradient-shine) calc(var(--btn-shiny-gradient-percent) * 2),
			var(--btn-shiny-highlight) calc(var(--btn-shiny-gradient-percent) * 3),
			transparent calc(var(--btn-shiny-gradient-percent) * 4)
		) border-box;
	box-shadow: inset 0 0 0 1px var(--btn-shiny-bg-subtle);
	transition: var(--btn-shiny-transition);
	transition-property: --btn-shiny-gradient-angle-offset, --btn-shiny-gradient-percent, --btn-shiny-gradient-shine;
}

.btn-shiny > i,
.btn-shiny > svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.btn-shiny-orange {
	--btn-shiny-bg: #431407;
	--btn-shiny-bg-subtle: #7c2d12;
	--btn-shiny-highlight: #fb923c;
	--btn-shiny-highlight-subtle: #fdba74;
}

.btn-shiny-accent {
	--btn-shiny-bg: #0f172a;
	--btn-shiny-bg-subtle: #1e293b;
	--btn-shiny-highlight: var(--engine-accent, #3b82f6);
	--btn-shiny-highlight-subtle: color-mix(in srgb, var(--engine-accent, #3b82f6) 50%, #ffffff);
}

.btn-shiny > span {
	position: relative;
	z-index: 1;
}

.btn-shiny::before,
.btn-shiny::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	translate: -50% -50%;
	z-index: -1;
}

.btn-shiny::before {
	--size: calc(100% - var(--btn-shiny-shadow-size) * 3);
	--position: 2px;
	--space: calc(var(--position) * 2);
	width: var(--size);
	height: var(--size);
	background: radial-gradient(circle at var(--position) var(--position), #ffffff calc(var(--position) / 4), transparent 0) padding-box;
	background-size: var(--space) var(--space);
	background-repeat: space;
	mask-image: conic-gradient(
		from calc(var(--btn-shiny-gradient-angle) + 45deg),
		black,
		transparent 10% 90%,
		black
	);
	border-radius: inherit;
	opacity: 0.35;
}

.btn-shiny::after {
	--btn-shiny-animation: btn-shiny-shimmer linear infinite;
	width: 100%;
	aspect-ratio: 1;
	background: linear-gradient(-50deg, transparent, var(--btn-shiny-highlight), transparent);
	mask-image: radial-gradient(circle at bottom, transparent 40%, black);
	opacity: 0.5;
}

.btn-shiny,
.btn-shiny::before,
.btn-shiny::after {
	animation: var(--btn-shiny-animation) var(--btn-shiny-duration),
		var(--btn-shiny-animation) calc(var(--btn-shiny-duration) / 0.4) reverse paused;
	animation-composition: add;
}

.btn-shiny:active {
	transform: translateY(1px);
}

.btn-shiny:is(:hover, :focus-visible) {
	--btn-shiny-gradient-percent: 20%;
	--btn-shiny-gradient-angle-offset: 95deg;
	--btn-shiny-gradient-shine: var(--btn-shiny-highlight-subtle);
	color: var(--btn-shiny-fg);
}

.btn-shiny:is(:hover, :focus-visible),
.btn-shiny:is(:hover, :focus-visible)::before,
.btn-shiny:is(:hover, :focus-visible)::after {
	animation-play-state: running;
}

@keyframes btn-shiny-gradient-angle {
	to {
		--btn-shiny-gradient-angle: 360deg;
	}
}

@keyframes btn-shiny-shimmer {
	to {
		rotate: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn-shiny,
	.btn-shiny::before,
	.btn-shiny::after {
		animation: none !important;
	}
}