/* =====================================================================
   responsive.css  —  Fresh-IOT 移动端响应式适配 (共享, 新增文件)
   ---------------------------------------------------------------------
   - 仅包含 @media (max-width:768px) 规则; 桌面端(>768px)完全不命中,
     不改变任何页面的原有桌面外观。
   - 本文件为纯增量, 不修改任何现有 CSS。引入时放在各页原有 CSS 之后。
   - 分区:
       [1] 公开/登录类页面 (login/register/registration/forgotone/forgottwo)
       [2] 落地首页 index
       [3] 登录后内页 (devices/commodity/... 第 3 阶段再补)
   ===================================================================== */


/* ============ [1] 公开/登录类页面 (共用 login.css 结构) ============ */
@media (max-width: 768px) {

	/* 背景容器: 允许内容比一屏高时正常滚动 */
	.search-box {
		height: auto;
		min-height: 100%;
	}

	/* 顶部 header: 左右分栏 -> 居中堆叠 */
	.search-header {
		height: auto;
		line-height: 1.6;
		padding: 10px 12px;
	}
	.search-header .header-left,
	.search-header .header-right {
		float: none !important;
		display: block;
		text-align: center;
	}
	.header-right-home {
		margin-right: 0 !important;
	}

	/* 居中卡片: 绝对居中 -> 文档流, 相对宽度 */
	.search-content {
		position: static !important;
		transform: none !important;
		left: auto;
		top: auto;
		width: 92% !important;
		max-width: 800px;
		margin: 24px auto;
	}

	/* 左右两栏 -> 上下堆叠, 全宽 */
	.login-left,
	.login-right {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	.login-left {
		padding: 40px 24px !important;
	}
	.login-right {
		padding: 24px 16px !important;
	}
	.login-title {
		margin-top: 20px !important;
	}
	.login-description {
		margin-bottom: 30px !important;
	}

	/* 输入框/按钮: 放开写死像素, 适配手指点击 */
	.input-box {
		display: block;
		width: 100%;
	}
	.input-box input {
		width: 100% !important;
		box-sizing: border-box;
	}
	.login-btn a,
	.to-register-btn,
	.get-validate {
		width: 80% !important;
		max-width: 260px;
	}

	/* register.html 验证码行: 300px 固定容器 + 内部左右浮动 -> 全宽竖向堆叠
	   (这一行只在 register.html 存在, 用内联样式特征选择器精准命中, 不影响其它页) */
	.login-right [style*="300px"] {
		width: 100% !important;
		display: block !important;
	}
	.login-right .input-box.fl {
		float: none !important;
		width: 100% !important;
		display: block;
	}
	.login-right input[name="vcode"] {
		width: 100% !important;
		box-sizing: border-box;
	}
	.login-right .get-validate {
		float: none !important;
		display: block;
		width: 100% !important;
		max-width: none !important;
		margin-top: 4px;
	}

	/* 底部版权: 固定定位 -> 文档流, 避免遮挡内容 */
	.search-footer {
		position: static !important;
		bottom: auto;
		width: 100%;
		padding: 16px 12px;
		line-height: 1.8;
	}
}


/* ============ [2] 落地首页 index (index3.css 结构) ============ */

/* 移动端品牌横幅: 桌面默认隐藏, 仅 ≤768px 显示(基础规则须在媒体查询外) */
.mobile-brand-banner { display: none; }

@media (max-width: 768px) {

	/* 顶部导航: 堆叠居中 */
	.index-box .search-header {
		height: auto;
		line-height: 1.6;
		padding: 10px 12px;
	}
	.index-box .header-left,
	.index-box .header-right {
		float: none !important;
		display: block;
		text-align: center;
	}

	/* 横幅/分栏区块: 左右浮动 -> 单列堆叠 */
	.banner-content,
	.powerful-box,
	.track-device-box,
	.better-item-list {
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.banner-content {
		padding: 20px 16px !important;
		text-align: center;
	}

	/* 搜索条/登录按钮区: 全宽, 加大点击区 */
	.search-input-box,
	.search-input-box input {
		width: 100% !important;
		box-sizing: border-box;
	}
	.get-account-btn,
	.search-btn,
	.login-handler a {
		min-height: 40px;
		line-height: 40px;
	}

	/* 内容左右分栏统一拆栈 (兜底) */
	.index-box .fl,
	.index-box .fr {
		float: none !important;
	}

	/* —— 主体区副标题(indexDes 段落): 桌面写死 width:750px + 容器 padding:80px,
	      窄屏溢出被裁 → 放开宽度自动换行, 只动布局不动文案 —— */
	.powerful-box {
		padding: 24px 16px !important;
		box-sizing: border-box;
	}
	.powerful-box > p {
		width: auto !important;
		max-width: 100%;
		word-break: break-word;
		box-sizing: border-box;
	}

	/* —— 功能卡片区(全面的功能/数据安全/操作简单/更好的服务 四卡):
	      桌面横排在窄屏溢出被裁 → 纵向单列堆叠, 卡片全宽 —— */
	.better-manage-list {
		padding: 0 12px;
		box-sizing: border-box;
	}
	.better-manage-list > li {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 16px !important;
		box-sizing: border-box;
	}

	/* —— 顶部轮播: 产品决策(2026-07-03) ≤768px 整块隐藏 ——
	   移动端页面以 "Track Your Device Status" 查询区开头,
	   查询区上方由 .mobile-brand-banner(logo+一句话)充当页首; 桌面零改动。 */
	#scoll,
	.scoll { display: none !important; }
	.mobile-brand-banner {
		display: block !important;
		text-align: center;
		padding: 28px 16px 4px;
	}
	.mobile-brand-banner img {
		width: 150px;
		max-width: 60%;
		height: auto;
	}
	.mobile-brand-banner p {
		margin-top: 10px;
		color: #333;
		font-size: 15px;
	}

	/* 图片自适应, 不撑破屏 */
	.index-box img {
		max-width: 100%;
		height: auto;
	}
}


/* ============ [3] 登录后内页 (共享 .device-left/.device-right 外壳) ============ */
/* 适用: devices / create / commodity / company / userinfo / help
   (shipmentdetail 用页内独立实现, 不走本段) */

/* 汉堡按钮与遮罩: 桌面端默认隐藏 (基础规则须在媒体查询外) */
#mobileNavToggle {
	display: none;
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 10001;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 6px;
	background: #333;
	color: #fff;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	padding: 0;
}
#mobileNavOverlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9998;
}

@media (max-width: 768px) {
	/* —— 外壳: 绝对定位 -> 文档流 —— */
	html, body { height: auto; overflow-x: hidden; }
	.device-box { position: static; height: auto; }
	.device-right { position: static; left: 0; top: auto; right: auto; bottom: auto; height: auto; }

	/* —— 汉堡 / 遮罩 —— */
	#mobileNavToggle { display: block; }
	body.sidebar-open #mobileNavOverlay { display: block; }

	/* —— 侧边栏: 固定抽屉, 默认收起 —— */
	.device-left {
		position: fixed;
		width: 220px;
		top: 0; bottom: 0; left: 0;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 9999;
	}
	body.sidebar-open .device-left { transform: translateX(0); }

	/* —— 通知下拉(铃铛): 桌面 absolute width:250px/right:-115px 窄屏冲出视口 ——
	      改为固定宽度 calc(100vw - 24px) 全屏居中展开 —— */
	.device-message-box {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		top: 56px !important;
		width: auto !important;
		max-width: calc(100vw - 24px);
		height: auto !important;
		max-height: 70vh;
		overflow-y: auto;
		z-index: 100001;
		box-sizing: border-box;
	}

	/* —— 产品决策(2026-07-03): 移动端隐藏"货物(Commodity)"导航入口, 桌面保留 ——
	   侧栏导航目前全站固定为 [Device, Commodity] 两项, 第2项即货物;
	   若将来导航加项需回顾此选择器 */
	.device-nav li:nth-child(2),
	.device-nav li a[href="commodity.html"] { display: none; }

	/* —— 头部: 文档流, 让出汉堡位, 隐藏宽搜索框 —— */
	.device-header-box {
		position: static;
		height: auto;
		line-height: normal;
		padding: 8px 10px 8px 56px;
	}
	.device-search-box { display: none; }
	.device-header-right { float: none !important; }

	/* —— 主内容容器: 绝对 -> 文档流 —— */
	.device-content-box {
		position: static !important;
		top: auto; left: auto; right: auto; bottom: auto;
		height: auto;
		min-height: 60vh;
		padding: 15px 10px !important;
	}
	.device-list-box {
		position: static !important;
		top: auto; left: auto; right: auto; bottom: auto;
		overflow: visible;
	}

	/* —— 表格: 横向滚动, 不撑破屏幕 ——
	   注意区分两种表格实现:
	   1) layui table.render 渲染的(如 commodity 列表): 自带横向滚动
	      (.layui-table-body), 且 .layui-table 宽度由 layui 内联计算,
	      不可强设 max-width, 否则表头/表体两张表被压扁错位。
	   2) 静态 HTML 表格(devices 列表 .device-list-table, 12列):
	      外层 .device-table-box 横滚 + 表格给最小宽, 让它滚而不是压碎。 */
	.device-right .layui-table-view,
	.device-right .layui-table-box { overflow-x: auto; }
	.device-table-box {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.device-list-table { min-width: 860px; }

	/* —— 常见弹窗: 固定像素宽 -> 相对宽度, 可滚动 —— */
	.dialog-photo-content,
	.dialog-confirm-content,
	.dialog-document-content,
	.add-partner-content,
	.user-pic-content,
	.edit-email-content {
		width: 92% !important;
		max-width: 425px;
		height: auto !important;
		max-height: 88vh;
		overflow-y: auto;
		box-sizing: border-box;
	}

	/* —— layui 表单: 标签换行、控件全宽、加大点击区 —— */
	.device-right .layui-form-label {
		width: auto !important;
		float: none;
		display: block;
		text-align: left;
		padding: 6px 0;
	}
	.device-right .layui-input-block { margin-left: 0 !important; }
	.device-right .layui-form-select,
	.device-right .layui-input,
	.device-right .layui-textarea { width: 100% !important; box-sizing: border-box; }
	.device-right .layui-input { min-height: 40px; }

	/* —— 内页图片兜底: 不撑破屏 —— */
	.device-right img { max-width: 100%; height: auto; }

	/* —— commodity: 详情/照片区块拆栈 —— */
	.commodity-detail-box { position: static !important; height: auto; }
	.commdity-info-detail,
	.commdity-photo { width: 100% !important; float: none !important; }

	/* —— help: 左右分栏 -> 上下堆叠 ——
	   根因补修(P1-5): .help-detail-right 桌面用 margin-left:280px 让位左栏,
	   堆叠后该 margin 残留把内容推出屏(被裁切), 必须归零 —— */
	.help-detail-left,
	.help-detail-right {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}
	.help-detail-box { padding: 15px 10px !important; }

	/* —— create: 新建运单表单 拆栈全宽 (根因: .creat-form-box 绝对定位 +
	      输入框写死 300/400px + Min/Max digital-box 行内并排 + 一批内联 px 宽) —— */
	.creat-form-box {
		position: static !important;
		top: auto; left: auto; right: auto; bottom: auto;
		overflow: visible;
		padding: 10px;
	}
	.form-required-box,
	.form-no-required { padding: 15px 10px !important; }
	.creat-form-box input[type="text"] {
		width: 100% !important;
		box-sizing: border-box;
	}
	/* Min/Max 数字框: 行内并排 -> 各占一行 */
	.creat-form-box .digital-box {
		display: block;
		width: 100%;
		margin: 6px 0;
	}
	.creat-form-box .geofence-box { display: block; }
	.creat-form-box .geofence-box input { width: 75% !important; }
	.comments-box textarea {
		width: 100% !important;
		box-sizing: border-box;
	}
	/* 根因补修(P2-6): 收货人/ETA 等右列 .form-item 带内联 margin-left:150px,
	   堆叠后残留导致整块右偏, 与发货人列不对齐 —— 全部归零并拆栈 */
	.creat-form-box .form-item,
	.creat-form-box .form-item-block {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}

	/* 中和 create.html 里散落的内联 px 宽度(280/264/260/300px 等) */
	.creat-form-box [style*="width"] {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.create-submit-btn,
	.creat-form-box a[style*="background-color"] {
		display: block;
		width: 80% !important;
		max-width: 260px;
		margin: 16px auto !important;
	}
}


/* ============ [4] 全站弹窗兜底 (P2-8 全量排查补漏) ============ */
/* 已在 [1]/[3] 覆盖: search/add-partner/export/confirm/document/photo/
   user-pic/edit-email/logitic-traking 等 -content 类。
   本段补漏网的 4 类; responsive.css 由 index 与全部内页加载, 此处统一生效。 */
@media (max-width: 768px) {
	/* 反馈(enquiry)弹窗: 桌面 absolute 400×500 挂在侧栏旁, 窄屏冲出视口被裁 */
	.device-enquiry-box {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		bottom: 70px !important;
		top: auto !important;
		width: auto !important;
		max-width: calc(100vw - 24px);
		height: auto !important;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 100001;
		box-sizing: border-box;
	}
	/* 删除确认(历史拼写 diloag, 类名保持原样)/Geofence/新建收发货人: 固定400px → 相对宽 */
	.diloag-delete-content,
	.dialog-geofence-content,
	.dialog-shipper-content {
		width: 92% !important;
		max-width: 425px;
		height: auto !important;
		max-height: 88vh;
		overflow-y: auto;
		box-sizing: border-box;
	}
}