/**
 * 手机端响应式适配（2026-07-10 手机端重构）
 * 所有规则仅在 max-width: 767px 时生效，不影响桌面端。
 * 配合 /public/js/mobile-admin.js 使用。
 */

/* 汉堡按钮 / 遮罩 / 抽屉内用户菜单：桌面端一律隐藏 */
.qn-mobile-toggle,
.qn-mobile-overlay,
.qn-mobile-usermenu,
.qn-mobile-title {
	display: none;
}

@media (max-width: 767px) {

	/* ========== 顶栏 ========== */
	.layui-layout-admin .layui-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 50px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	}
	/* 汉堡按钮 */
	.qn-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		flex-shrink: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.qn-mobile-toggle .qn-burger,
	.qn-mobile-toggle .qn-burger::before,
	.qn-mobile-toggle .qn-burger::after {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform .25s ease, opacity .2s ease;
		content: "";
	}
	.qn-mobile-toggle .qn-burger {
		position: relative;
	}
	.qn-mobile-toggle .qn-burger::before {
		position: absolute;
		top: -6px;
		left: 0;
	}
	.qn-mobile-toggle .qn-burger::after {
		position: absolute;
		top: 6px;
		left: 0;
	}
	body.qn-nav-open .qn-mobile-toggle .qn-burger {
		background: transparent;
	}
	body.qn-nav-open .qn-mobile-toggle .qn-burger::before {
		transform: translateY(6px) rotate(45deg);
	}
	body.qn-nav-open .qn-mobile-toggle .qn-burger::after {
		transform: translateY(-6px) rotate(-45deg);
	}
	/* 顶栏标题 */
	.qn-mobile-title {
		display: block;
		flex: 1;
		color: #fff;
		font-size: 17px;
		font-weight: 600;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* 右侧留出与汉堡等宽的空隙保持居中 */
		margin-right: 50px;
	}
	/* 浅色顶栏（如白色）时按钮/标题用深色，由 JS 检测加类 */
	body.qn-header-light .qn-mobile-toggle .qn-burger,
	body.qn-header-light .qn-mobile-toggle .qn-burger::before,
	body.qn-header-light .qn-mobile-toggle .qn-burger::after {
		background: #333;
	}
	body.qn-header-light.qn-nav-open .qn-mobile-toggle .qn-burger {
		background: transparent;
	}
	body.qn-header-light .qn-mobile-title {
		color: #333;
	}
	/* 顶栏里原有的 PC 导航在手机上收起 */
	.layui-layout-admin .layui-header .layui-layout-left,
	.layui-layout-admin .layui-header .layui-layout-right,
	.layui-layout-admin .layui-header .layui-logo {
		display: none;
	}

	/* ========== 抽屉式侧边导航 ========== */
	.layui-layout-admin .layui-side {
		top: 0;
		bottom: 0;
		width: 78%;
		max-width: 300px;
		z-index: 100000;
		transform: translateX(-102%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		box-shadow: none;
	}
	body.qn-nav-open .layui-layout-admin .layui-side {
		transform: translateX(0);
		box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
	}
	.layui-side .layui-side-scroll {
		width: 100%;
		padding-bottom: 30px;
		overflow-y: auto;
		height: 100%;
	}
	.layui-side .layui-side-scroll::-webkit-scrollbar {
		display: none;
	}
	.layui-side .layui-logo {
		display: block;
		position: static;
		width: auto;
		height: 56px;
		line-height: 56px;
		text-align: center;
		font-size: 17px;
		font-weight: 600;
		color: #fff;
		background: rgba(255, 255, 255, .05);
		border-bottom: 1px solid rgba(255, 255, 255, .06);
		margin-bottom: 6px;
	}
	.layui-side .layui-logo a {
		color: #fff;
	}
	/* 菜单填满抽屉宽度并加大触控区域 */
	.layui-side .layui-nav-tree {
		width: 100%;
	}
	.layui-side .layui-nav-tree .layui-nav-item > a {
		height: 48px;
		line-height: 48px;
		font-size: 15px;
	}
	.layui-side .layui-nav-tree .layui-nav-child dd a {
		height: 44px;
		line-height: 44px;
		font-size: 14px;
	}

	/* 遮罩 */
	.qn-mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
	}
	body.qn-nav-open .qn-mobile-overlay {
		opacity: 1;
		visibility: visible;
	}
	/* 抽屉打开时禁止背景滚动 */
	body.qn-nav-open {
		overflow: hidden;
	}

	/* 抽屉底部的用户信息菜单（PC 上这些在顶栏右侧） */
	.qn-mobile-usermenu {
		display: block;
		margin-top: 10px;
		padding: 10px 0;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
	.qn-mobile-usermenu a {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 20px;
		color: rgba(255, 255, 255, .8);
		font-size: 14px;
	}
	.qn-mobile-usermenu a:active {
		background: rgba(255, 255, 255, .06);
	}
	.qn-mobile-usermenu .layui-badge {
		margin-left: 8px;
	}

	/* ========== 主体内容 ========== */
	.layui-layout-admin .layui-body {
		left: 0 !important;
		top: 50px !important;
		bottom: 0 !important;
		width: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.layui-fluid {
		padding: 10px;
	}
	.layui-card {
		border-radius: 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
		margin-bottom: 12px;
	}
	.layui-card-body {
		padding: 12px;
	}
	/* 宽表格横向滑动容器（由 mobile-admin.js 在手机端自动包裹） */
	.qn-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* 面包屑区域 */
	.layadmin-header {
		border-radius: 0;
		margin-bottom: 0;
	}
	.layadmin-header .layui-breadcrumb {
		padding: 4px 12px;
	}

	/* ========== 表格 ========== */
	.layui-table {
		min-width: 640px; /* 保持列布局，配合横向滑动 */
	}
	.layui-table th,
	.layui-table td {
		font-size: 13px;
		padding: 8px 10px;
	}

	/* ========== 表单 ========== */
	.layui-form .layui-form-label {
		display: block;
		float: none;
		width: auto !important;
		text-align: left;
		padding: 8px 0 4px;
		font-weight: 600;
		color: #333;
	}
	.layui-form .layui-input-block,
	.layui-form .layui-input-inline {
		display: block;
		float: none;
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100%;
	}
	.layui-form .layui-input-inline + .layui-form-mid,
	.layui-form .layui-form-mid.layui-word-aux {
		display: block;
		float: none;
		margin-left: 0;
		padding: 4px 0 0;
		line-height: 1.6;
	}
	.layui-form-item {
		margin-bottom: 18px;
	}
	.layui-form-item::after {
		content: "";
		display: block;
		clear: both;
	}
	/* 输入控件触控友好 */
	.layui-input,
	.layui-select,
	.layui-textarea {
		height: 42px;
		line-height: 42px;
		font-size: 15px;
		border-radius: 8px;
	}
	.layui-textarea {
		height: auto;
		line-height: 1.6;
		min-height: 90px;
	}
	.layui-form-select dl dd {
		height: 40px;
		line-height: 40px;
	}
	/* 单选/复选（layui 美化版） */
	.layui-form-radio {
		margin: 4px 8px 4px 0;
		padding-right: 6px;
	}
	.layui-form-radio > i {
		font-size: 20px;
	}

	/* ========== 按钮 ========== */
	.layui-btn {
		border-radius: 8px;
	}
	.layui-btn + .layui-btn {
		margin-left: 6px;
	}
	/* 表单提交主按钮拉通 */
	.layui-form .layui-btn-lg,
	.layui-form button.layui-btn[lay-submit],
	.layui-form .layui-input-block > .layui-btn:only-child {
		width: 100%;
		height: 46px;
		line-height: 46px;
		font-size: 16px;
	}

	/* ========== 分页 ========== */
	.pagination li {
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
		margin-bottom: 6px;
	}
	.pagination li.active {
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
	}

	/* ========== 弹层自适应 ========== */
	.layui-layer {
		max-width: 94vw !important;
	}
	.layui-layer iframe {
		max-width: 100%;
	}

	/* layui 数据表格（table.render 动态渲染） */
	.layui-table-view {
		max-width: 100%;
	}

	/* ========== 超管后台（admin 模块，双侧栏 .qn-fixed 结构） ========== */
	.qn-fixed {
		width: 260px;
		top: 0 !important;
		bottom: 0;
		height: 100%;
		z-index: 100000 !important;
		transform: translateX(-102%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		background: #fff;
	}
	body.qn-nav-open .qn-fixed {
		transform: translateX(0);
		box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
	}
	/* .qn-fixed 内的两块侧栏不做整体抽屉变换（由容器统一处理） */
	.qn-fixed .layui-side {
		transform: none !important;
		transition: none;
		top: 0;
		bottom: 0;
		max-width: none;
		box-shadow: none !important;
	}
	.qn-fixed .layui-side-menu {
		width: 60px;
	}
	.qn-fixed .layui-side-child {
		width: 200px;
	}
}