/**
 * ============================================
 * 文件：components.css
 * 说明：朝希AI 公共 UI 组件样式
 * 职责：
 *   1. 提供跨页面复用的公共组件样式（Modal、Toast、Loading、Button）
 *   2. 所有样式依赖 theme.css 中的 CSS 变量
 *   3. 不包含任何业务模块样式
 * 依赖：
 *   - theme.css（所有颜色/尺寸变量）
 * 使用方式：
 *   在 HTML 中按需引用此文件，配合对应的 JS 模块使用
 * 扩展指南：
 *   新增公共组件时，在此文件中按分类添加样式，
 *   并确保使用 theme.css 中的变量，保持主题一致性。
 * ============================================
 */

/* ============================================================
   一、Loading 加载动画
   ============================================================ */

/**
 * Loading 容器
 * 使用方式：由 JS 动态生成 HTML 结构，应用此类名
 */
.loading-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	padding: 30px 20px;
	width: 100%;
}

.loading-container .loading-text {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* ---------- 类型1：Spinner（转圈圈） ---------- */
.loading-spinner {
	animation: spin 0.8s linear infinite;
	border: 3px solid var(--border);
	border-radius: 50%;
	border-top-color: var(--primary);
	height: 40px;
	width: 40px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- 类型2：Dots（跳跃点） ---------- */
.loading-dots {
	align-items: center;
	display: flex;
	gap: 8px;
	height: 40px;
	justify-content: center;
}

.loading-dots .dot {
	animation: bounce 1.4s ease-in-out infinite both;
	background-color: var(--primary);
	border-radius: 50%;
	height: 12px;
	width: 12px;
}

.loading-dots .dot:nth-child(1) {
	animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
	animation-delay: -0.16s;
}

.loading-dots .dot:nth-child(3) {
	animation-delay: 0s;
}

@keyframes bounce {

	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

/* ============================================================
   二、Button 按钮
   ============================================================ */

/**
 * 按钮变体样式
 * 使用方式：在 button 元素上添加类名
 */
.btn-primary {
	background: var(--gradient-btn);
	box-shadow: var(--shadow-btn);
	color: var(--text-white);
}

.btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-outline {
	background: transparent;
	border: 1.5px solid var(--border);
	color: var(--text);
}

.btn-outline:hover:not(:disabled) {
	/* background: var(--bg-hover); */
	border-color: var(--primary);
}

.btn-danger {
	background: var(--danger);
	color: var(--text-white);
}

.btn-danger:hover:not(:disabled) {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.btn-ghost {
	background: transparent;
	color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled) {
	color: var(--text);
	background: var(--bg-hover);
}

/* 按钮尺寸变体 */
.btn-sm {
	font-size: var(--font-size-sm);
	padding: 6px 14px;
}

.btn-md {
	font-size: var(--font-size-base);
	padding: 10px 24px;
}

.btn-lg {
	font-size: var(--font-size-md);
	padding: 14px 32px;
}

/* 按钮宽度变体 */
.btn-block {
	display: block;
	width: 100%;
}

/* ============================================================
   三、Modal 弹窗
   ============================================================ */

/* ---------- 遮罩层 ---------- */
.modal-overlay {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

/* 遮罩背景（支持毛玻璃） */
.modal-overlay .modal-backdrop {
	background: rgba(0, 0, 0, 0.35);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* 毛玻璃效果（通过 data-backdrop 属性控制） */
.modal-overlay[data-backdrop='blur'] .modal-backdrop {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ---------- 弹窗容器 ---------- */
/* ===== 覆盖默认 modal-content 样式 ===== */
.modal-overlay .modal-content {
	background: var(--text-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	max-height: 80vh;
	max-width: 80%;
	padding: 28px 30px 24px;
	position: relative;
	width: 50%;
	z-index: 1;
}

/* ---------- 弹窗位置 ---------- */
.modal-overlay[data-position='center'] .modal-content {
	margin: 0;
}

.modal-overlay[data-position='top'] {
	align-items: flex-start;
	padding-top: 80px;
}

.modal-overlay[data-position='top'] .modal-content {
	margin: 0;
}

.modal-overlay[data-position='bottom'] {
	align-items: flex-end;
}

.modal-overlay[data-position='bottom'] .modal-content {
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	margin: 0;
	max-width: 100%;
	width: 100%;
}

/* ---------- 弹窗头部 ---------- */
.modal-content .modal-header {
	align-items: center;
	display: flex;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

/* ===== Modal Header 底部边框 ===== */
.modal-content .modal-header.modal-header-border {
	border-bottom: 1px solid var(--border-light);
}

.modal-content .modal-header .modal-avatar {
	align-items: center;
	/* background: var(--primary-light); */
	border-radius: 50%;
	/* color: var(--primary); */
	display: flex;
	flex-shrink: 0;
	font-size: 24px;
	height: 35px;
	justify-content: center;
	width: 35px;
}

.modal-content .modal-header .modal-avatar i {
	font-size: 22px;
}

.modal-content .modal-header .modal-title {
	color: var(--text-dark);
	flex: 1;
	font-size: var(--font-size-md);
	font-weight: 500;
	margin-left: -12px;
}

.modal-content .modal-header .modal-close {
	background: none;
	border: none;
	color: var(--text-light);
	cursor: pointer;
	font-size: 20px;
	padding: 4px;
	transition: color var(--transition-fast);
}

.modal-content .modal-header .modal-close:hover {
	color: var(--text);
}

/* ---------- 弹窗正文 ---------- */
.modal-content .modal-body {
	color: var(--text);
	font-size: var(--font-size-base);
	line-height: 1.7;
	max-height: 50vh;
	overflow-y: auto;
	padding: 20px 0 16px 0;
	padding-top: 20px !important;
}

.modal-content .modal-body .modal-body-icon {
	display: block;
	font-size: 44px;
	margin: 0 auto 12px;
	text-align: center;
}

/* ---------- 弹窗底部（按钮区） ---------- */
.modal-content .modal-footer {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding-top: 8px;
}

.modal-content .modal-footer .btn {
	flex: 0 1 auto;
	min-width: 72px;
}

.modal-content .modal-footer .btn.btn-primary {
	line-height: 1.8;
}

/* 按钮数量多时自动换行 */
.modal-content .modal-footer[data-wrap='true'] {
	flex-wrap: wrap;
}

.modal-content .modal-footer[data-wrap='true'] .btn {
	flex: 1 1 auto;
	min-width: 60px;
}

/* ===== Modal：按钮固定底部（absolute 定位方案） ===== */

/* 1. 弹窗容器需要相对定位，作为 footer 的参照 */
.modal-content.modal-footer-fixed {
	position: relative !important;
	padding: 0 !important;
	/* 移除默认内边距，由内部元素控制 */
	max-height: 90vh !important;
	display: flex;
	flex-direction: column;
}

/* 2. 标题区域：保持正常内边距 */
.modal-content.modal-footer-fixed .modal-header {
	padding: 20px 20px 12px 20px;
	flex-shrink: 0;
}

/* 3. 内容区域：flex 占满剩余空间，可滚动，底部留出 footer 空间 */
.modal-content.modal-footer-fixed .modal-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	min-height: 0 !important;
	padding: 0 20px 20px 20px;
	/* 底部内边距留给 footer 的空间（由 JS 动态计算或固定值） */
}

/* 4. Footer：absolute 定位在底部 */
.modal-content.modal-footer-fixed .modal-footer-absolute {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: #ffffff !important;
	border-top: 1px solid var(--border-light) !important;
	padding: 12px 20px !important;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
	flex-shrink: 0;
}

/* 5. 为 body 添加底部内边距，防止内容被 footer 遮挡 */
.modal-content.modal-footer-fixed .modal-body {
	padding-bottom: 80px !important;
	/* 为 footer 预留空间 */
}

/* 6. 无 footer 时的备用状态 */
.modal-content.modal-footer-fixed .modal-body:last-child {
	padding-bottom: 100px !important;
}

/* 7. 当 footer 不存在时，取消底部内边距 */
.modal-content.modal-footer-fixed:not(:has(.modal-footer)) .modal-body {
	padding-bottom: 20px !important;
}

/* ===== Modal 扩展：隐藏滚动条 ===== */
.modal-content.modal-body-no-scrollbar .modal-body {
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;

}

.modal-content.modal-body-no-scrollbar .modal-body::-webkit-scrollbar {
	display: none;
}

/* ============================================================
   四、Toast 轻提示
   ============================================================ */

/* ---------- Toast 容器 ---------- */
.toast-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: fixed;
	z-index: 99999;
}

/* 位置变体 */
.toast-container[data-position='top-left'] {
	left: 20px;
	top: 20px;
}

.toast-container[data-position='top-center'] {
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
}

.toast-container[data-position='top-right'] {
	right: 20px;
	top: 20px;
}

.toast-container[data-position='center'] {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.toast-container[data-position='bottom-left'] {
	bottom: 20px;
	left: 20px;
}

.toast-container[data-position='bottom-right'] {
	bottom: 20px;
	right: 20px;
}

/* ---------- 单个 Toast ---------- */
.toast-item {
	align-items: center;
	/* animation: toastIn 0.3s ease; */
	transition: opacity var(--transition-base);
	background: var(--bg-card);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	display: flex;
	gap: 12px;
	min-width: 200px;
	padding: 14px 20px;
	transition: all var(--transition-base);
}

/* 退出动画 */
.toast-item.toast-out {
	animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
	from {
		opacity: 0;
		transform: translateY(-12px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes toastOut {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(-12px) scale(0.95);
	}
}

/* ---------- Toast 图标 ---------- */
.toast-item .toast-icon {
	flex-shrink: 0;
	font-size: 22px;
}

.toast-item .toast-icon[data-type='success'] {
	color: var(--success);
}

.toast-item .toast-icon[data-type='error'] {
	color: var(--danger);
}

.toast-item .toast-icon[data-type='warning'] {
	color: #f5a623;
}

.toast-item .toast-icon[data-type='info'] {
	color: var(--primary);
}

/* ---------- Toast 文字 ---------- */
.toast-item .toast-message {
	color: var(--text);
	flex: 1;
	font-size: var(--font-size-base);
	line-height: 1.5;
}

/* ---------- Toast 关闭按钮 ---------- */
.toast-item .toast-close {
	background: none;
	border: none;
	color: var(--text-light);
	cursor: pointer;
	font-size: 16px;
	padding: 2px 4px;
	transition: color var(--transition-fast);
}

.toast-item .toast-close:hover {
	color: var(--text);
}

/* ---------- Toast 进度条 ---------- */
.toast-item .toast-progress {
	background: var(--border);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	bottom: 0;
	height: 3px;
	left: 0;
	position: absolute;
	width: 100%;
}

.toast-item .toast-progress .toast-progress-bar {
	background: var(--primary);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	height: 100%;
	transition: width 0.1s linear;
}

.toast-item {
	overflow: hidden;
	position: relative;
}

/* ============================================================
   五、Empty State（空状态）
   ============================================================ */

/**
 * 空状态组件（数据为空时的占位展示）
 * 使用方式：由 JS 动态生成或直接在 HTML 中使用
 */
.empty-state {
	align-items: center;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 60px 20px;
	text-align: center;
}

.empty-state .empty-icon {
	font-size: 48px;
	opacity: 0.5;
}

.empty-state .empty-text {
	font-size: var(--font-size-base);
}

.empty-state .empty-desc {
	font-size: var(--font-size-sm);
	opacity: 0.7;
}

/* ============================================================
   六、Divider 分割线
   ============================================================ */

/**
 * 分割线组件
 * 使用方式：直接在 HTML 中使用或由 JS 生成
 */
.divider {
	border: none;
	border-top: 1px solid var(--border-light);
	margin: 16px 0;
}

.divider-text {
	align-items: center;
	display: flex;
	font-size: var(--font-size-sm);
	gap: 16px;
}

.divider-text::before,
.divider-text::after {
	border-top: 1px solid var(--border-light);
	content: '';
	flex: 1;
}

.divider-text span {
	color: var(--text-muted);
	flex-shrink: 0;
	white-space: nowrap;
}

/* ============================================================
   七、Tag 标签
   ============================================================ */

/**
 * 标签组件（用于状态标识、分类等）
 * 使用方式：直接在 HTML 中使用
 */
.tag {
	background: var(--bg-hover);
	border-radius: var(--radius-sm);
	color: var(--text);
	display: inline-block;
	font-size: var(--font-size-sm);
	padding: 2px 12px;
}

.tag-primary {
	background: var(--primary-light);
	color: var(--primary);
}

.tag-success {
	background: rgba(168, 196, 160, 0.25);
	color: var(--success);
}

.tag-danger {
	background: rgba(212, 131, 131, 0.2);
	color: var(--danger);
}

.tag-outline {
	background: transparent;
	border: 1px solid var(--border);
}


/* ============================================================
   八、DateRangePicker 日期区间选择器（公共组件）
   ============================================================ */

/* ---------- 容器 ---------- */
.filter-date-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---------- 输入区 ---------- */
.filter-date-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-input);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 8px);
	padding: 0 12px;
	transition: border-color 0.2s, background 0.2s;
	flex-wrap: wrap;
}

.filter-date-inputs:focus-within {
	border-color: var(--primary);
	background: var(--bg-card);
}

.filter-date-inputs .ph-calendar {
	color: var(--text-muted);
	font-size: 16px;
	flex-shrink: 0;
}

/* ---------- 日期输入框 ---------- */
.filter-date-input {
	border: none;
	background: transparent;
	padding: 8px 4px;
	font-size: 13px;
	color: var(--text);
	outline: none;
	width: 130px;
	cursor: pointer;
	font-family: inherit;
	min-width: 0;
}

.filter-date-input::placeholder {
	color: var(--text-light);
	font-size: 12px;
}

.filter-date-input:focus {
	box-shadow: none;
}

/* ---------- 分隔符 ---------- */
.filter-date-sep {
	color: var(--text-muted);
	font-size: 13px;
	flex-shrink: 0;
	padding: 0 2px;
}

/* ---------- 操作按钮区 ---------- */
.filter-date-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ============================================================
   九、flatpickr 主题覆盖（跟随项目主题变量）
   ============================================================ */

/* ---------- 整体日历 ---------- */
.flatpickr-calendar {
	background: var(--bg-card) !important;
	box-shadow: var(--shadow-lg) !important;
	border-radius: var(--radius-md) !important;
	border: 1px solid var(--border) !important;
	font-family: var(--font-family) !important;
	width: 320px !important;
	min-width: 320px !important;
	overflow: visible !important;
	padding-top: 0 !important;
}

/* ---------- 顶部导航栏 ---------- */
.flatpickr-months {
	background: var(--bg-card) !important;
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
	padding: 4px 12px 0 12px !important;
	width: 100% !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 2 !important;
}

.flatpickr-months .flatpickr-month {
	color: var(--text-dark) !important;
	background: var(--bg-card) !important;
	height: 36px !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* ---------- 前后翻页按钮 ---------- */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: var(--text-muted) !important;
	fill: var(--text-muted) !important;
	top: 4px !important;
	padding: 4px 8px !important;
	border-radius: var(--radius-sm) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--primary) !important;
	fill: var(--primary) !important;
	background: var(--bg-hover) !important;
}

/* ---------- 当前月份/年份区域 ---------- */
.flatpickr-current-month {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 0 !important;
	font-size: 14px !important;
	height: 36px !important;
	width: 100% !important;
	overflow: visible !important;
	left: 0 !important;
}

/* 月份下拉框 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: var(--bg-input) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm, 8px) !important;
	color: var(--text-dark) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: var(--font-family) !important;
	padding: 2px 28px 2px 10px !important;
	margin: 0 2px !important;
	cursor: pointer !important;
	outline: none !important;
	min-width: 60px !important;
	height: 30px !important;
	transition: border-color 0.2s, background 0.2s !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23b8a8a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 10px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	border-color: var(--primary) !important;
	background-color: var(--bg-hover) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
	border-color: var(--primary) !important;
	background-color: var(--bg-card) !important;
	box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
	font-size: 13px !important;
	font-family: var(--font-family) !important;
	padding: 6px 12px !important;
	color: var(--text) !important;
	background: var(--bg-card) !important;
}

/* 年份输入框 - 隐藏上下箭头按钮 */
.flatpickr-current-month .numInputWrapper {
	width: 44px !important;
}

.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
	display: none !important;
}

.flatpickr-current-month input.cur-year {
	background: var(--bg-input) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm, 8px) !important;
	color: var(--text-dark) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: var(--font-family) !important;
	padding: 2px 4px !important;
	width: 70px !important;
	height: 30px !important;
	text-align: center !important;
	outline: none !important;
	transition: border-color 0.2s !important;
}

.flatpickr-current-month input.cur-year:hover {
	border-color: var(--text-light) !important;
}

.flatpickr-current-month input.cur-year:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* ---------- 星期头 ---------- */
.flatpickr-weekdays {
	background: var(--bg-card) !important;
	padding: 8px 0 4px 0 !important;
	width: 304px !important;
	position: relative !important;
	z-index: 1 !important;
}

.flatpickr-weekday {
	color: var(--text-muted) !important;
	font-weight: 500 !important;
	font-family: var(--font-family) !important;
	font-size: 12px !important;
	width: 38px !important;
	text-align: center !important;
}

/* ---------- 日期网格 ---------- */
.flatpickr-days {
	background: var(--bg-card) !important;
	padding: 0 8px 8px 8px !important;
	border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
	width: 304px !important;
	overflow: visible !important;
}

.flatpickr-days .dayContainer {
	width: 304px !important;
	min-width: 304px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
}

/* ---------- 日期单元格 ---------- */
.flatpickr-day {
	color: var(--text) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-family) !important;
	font-size: 13px !important;
	width: 38px !important;
	max-width: 38px !important;
	height: 36px !important;
	line-height: 36px !important;
	margin: 2px 1.5px !important;
	flex: 0 0 auto !important;
}

.flatpickr-day:hover {
	background: var(--bg-hover) !important;
	border-color: var(--border) !important;
}

/* 选中日期 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--text-white) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: var(--primary-dark) !important;
	border-color: var(--primary-dark) !important;
}

/* 范围内的日期（非选中状态） */
.flatpickr-day.inRange {
	background: var(--primary-light) !important;
	border-color: var(--primary-light) !important;
	color: var(--text-dark) !important;
}

/* 今日标记 */
.flatpickr-day.today {
	border-color: var(--primary) !important;
}

.flatpickr-day.today.selected {
	border-color: var(--primary) !important;
}

/* 禁用日期 */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
	color: var(--text-light) !important;
	background: transparent !important;
}

/* 其他月份日期（淡色） */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--text-light) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
	background: var(--bg-hover) !important;
}

/* ---------- 底部按钮 ---------- */
.flatpickr-footer {
	background: var(--bg-card) !important;
	border-top: 1px solid var(--border-light) !important;
	border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.flatpickr-footer .flatpickr-confirm {
	color: var(--primary) !important;
	font-family: var(--font-family) !important;
	font-size: 13px !important;
}

.flatpickr-footer .flatpickr-confirm:hover {
	background: var(--bg-hover) !important;
}

/* ============================================================
   十、统一下拉框样式（form-select）
   ============================================================ */

/**
 * 统一全局 select 样式
 * 使用方式：在 select 元素上添加 class="form-select"
 */
.form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 8px 36px 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 8px);
	background: var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23b8a8a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 12px;
	color: var(--text);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.form-select:focus {
	border-color: var(--primary);
	background-color: var(--bg-card);
	outline: none;
}

.form-select:hover {
	border-color: var(--text-light);
}

.form-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- select 多选时清除默认箭头 ---------- */
.form-select[multiple] {
	background-image: none;
	padding: 6px 8px;
	min-height: 60px;
}

.form-select[multiple] option {
	padding: 4px 8px;
	border-radius: 4px;
}

.form-select[multiple] option:checked {
	background: var(--primary-light);
	color: var(--primary);
}

/* ---------- 尺寸变体 ---------- */
.form-select-sm {
	font-size: 12px;
	padding: 4px 32px 4px 10px;
	background-size: 10px;
	background-position: right 10px center;
}

.form-select-lg {
	font-size: 15px;
	padding: 10px 40px 10px 16px;
	background-size: 14px;
	background-position: right 14px center;
}

.sc-body .scroll-status {
	text-align: center;
	color: var(--text-muted);
	padding: 40px 0;
	font-size: 13px;
	letter-spacing: 2px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 480px) {
	.modal-content .modal-footer .btn {
		white-space: nowrap;
		text-align: center;
		padding: 8px 5px;
		margin: 0px;
		font-size: var(--font-size-sm);
	}

	.modal-content .modal-header .modal-title {
		font-size: var(--font-size-base);
	}

	.modal-content .modal-header .modal-avatar i {
		font-size: var(--font-size-base);
	}

	.filter-date-sep {
		display: none;
	}

	.filter-date-inputs {
		padding: 0px 10px;
	}

	.filter-date-inputs>.filter-date-input.flatpickr-input:nth-child(4) {
		text-indent: 1.5em;
	}
}