/* ========================================
   响应式样式 - 移动端适配
   ======================================== */

/* ========== 大屏幕 (桌面) ========== */
@media (max-width: 1200px) {
	.container {
		max-width: 100%;
		padding: 0 20px;
	}

	.grid-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ========== 中等屏幕 (平板) ========== */
@media (max-width: 992px) {
	:root {
		--header-height: 60px;
	}

	.grid-3,
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

	.page-header h1 {
		font-size: 1.8rem;
	}

	.modal-content {
		max-width: 95%;
		margin: 10px;
	}
}

/* ========== 小屏幕 (手机) ========== */
@media (max-width: 768px) {
	/* 导航栏 */
	.navbar-menu {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--color-bg-white);
		border-bottom: 1px solid var(--color-border-light);
		box-shadow: var(--shadow-md);
		padding: var(--spacing-md);
	}

		.navbar-menu.open {
			display: block;
		}

		.navbar-menu ul {
			flex-direction: column;
			gap: var(--spacing-sm);
			align-items: stretch;
		}

			.navbar-menu ul li {
				width: 100%;
			}

				.navbar-menu ul li a {
					display: block;
					padding: 0.6rem 0.8rem;
					border-bottom: none;
					border-radius: var(--radius-sm);
				}

					.navbar-menu ul li a:hover,
					.navbar-menu ul li a.active {
						background: var(--color-bg-light);
						border-bottom: none;
					}

	.mobile-toggle {
		display: block;
	}

	/* 网格 */
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	/* 页脚 */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.footer-bottom {
		flex-direction: column;
		gap: var(--spacing-sm);
		text-align: center;
	}

	/* 页面头部 */
	.page-header {
		padding: var(--spacing-lg) 0;
	}

		.page-header h1 {
			font-size: 1.5rem;
		}

		.page-header p {
			font-size: 0.95rem;
		}

	/* 按钮 */
	.btn {
		padding: 0.4rem 1rem;
		font-size: 0.85rem;
	}

	.btn-lg {
		padding: 0.6rem 1.4rem;
		font-size: 1rem;
	}

	/* 卡片 */
	.card {
		padding: var(--spacing-md);
	}

	/* 模态框 */
	.modal-content {
		width: 98%;
		margin: 10px;
		border-radius: var(--radius-md);
	}

	.modal-header {
		padding: var(--spacing-md);
	}

	.modal-body {
		padding: var(--spacing-md);
	}

	.modal-actions {
		flex-direction: column;
	}

		.modal-actions .btn {
			width: 100%;
			justify-content: center;
		}

	/* Toast */
	.toast-container {
		top: calc(var(--header-height) + 10px);
		right: 10px;
		left: 10px;
		max-width: 100%;
		width: auto;
	}

	/* 表单 */
	.form-row {
		flex-direction: column;
	}

		.form-row .form-group {
			flex: 1 1 100%;
		}

	/* 分页 */
	.pagination-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.page-btn {
		min-width: 32px;
		height: 32px;
		font-size: 0.8rem;
		padding: 0 0.4rem;
	}
}

/* ========== 超小屏幕 ========== */
@media (max-width: 480px) {
	.navbar-brand .brand-text {
		font-size: 1rem;
	}

	.logo-img {
		height: 32px;
	}

	.navbar-actions .btn-sm {
		padding: 0.2rem 0.5rem;
		font-size: 0.75rem;
	}

	.page-header h1 {
		font-size: 1.2rem;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-sm);
	}

	.stat-number {
		font-size: 1.5rem;
	}

	.section-header h2 {
		font-size: 1.2rem;
	}
}

/* ========== 滚动条美化 ========== */
@media (min-width: 768px) {
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	::-webkit-scrollbar-track {
		background: var(--color-bg-light);
		border-radius: var(--radius-sm);
	}

	::-webkit-scrollbar-thumb {
		background: var(--color-secondary);
		border-radius: var(--radius-sm);
	}

		::-webkit-scrollbar-thumb:hover {
			background: var(--color-secondary-dark);
		}
}

/* ========== 暗色模式支持 ========== */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #1a1410;
		--color-bg-white: #2c241f;
		--color-bg-light: #231d18;
		--color-text: #e8e0d8;
		--color-text-light: #c4bdb5;
		--color-text-lighter: #8a8380;
		--color-border: #3d3530;
		--color-border-light: #332d28;
		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
		--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
	}

	.navbar {
		background: var(--color-bg-white);
		border-bottom-color: var(--color-border);
	}

	.footer {
		background: #0d0a08;
	}

	.form-control {
		background-color: var(--color-bg);
		color: var(--color-text);
		border-color: var(--color-border);
	}

		.form-control:focus {
			border-color: var(--color-secondary);
			box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
		}

	.card {
		background: var(--color-bg-white);
	}

	.modal-content {
		background: var(--color-bg-white);
	}

	.page-header {
		background: linear-gradient(135deg, #1a0a08, var(--color-primary-dark));
	}
}