/* table-filter.css —— 选型表筛选面板样式 */

/* ---------- 去掉表格 hover / 选中效果 ----------
   DataTables 2.3 的高亮是用 box-shadow: inset 9999px 实现的,
   盖 background 没用,必须清 box-shadow。
   (手机端不需要 hover,iOS 点击还会残留 hover 态) ---------- */

table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > *,
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
table.dataTable > tbody > tr.selected > *,
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
	box-shadow: none !important;
}

/* ---------- 固定列背景不透明 + 提层 ----------
   横向滑动时普通列从固定列下面穿过,
   固定列背景透明就会出现内容重叠穿透 ---------- */

table.dataTable > thead > tr > .dtfc-fixed-start,
table.dataTable > thead > tr > .dtfc-fixed-end,
table.dataTable > tbody > tr > .dtfc-fixed-start,
table.dataTable > tbody > tr > .dtfc-fixed-end,
table.dataTable > tfoot > tr > .dtfc-fixed-start,
table.dataTable > tfoot > tr > .dtfc-fixed-end {
	background-color: #fff;
	z-index: 3;
}

/* iOS 上第一列单元格会被换成 th(启用原生 sticky),补齐样式:
   1. 必须 display: table-cell——cutsom-datatables.css 里 .dtfc-fixed-start 是 flex,
      不是 table cell 的话 WebKit 的 sticky 完全不生效;
   2. 还原 th 的浏览器默认样式(粗体/居中);
   3. 对齐 style.css 里 td 专属的内边距(12px 上下 + 首列 16px 左),保持列宽一致 */
table.dataTable > tbody > tr > th.dtfc-fixed-start,
table.dataTable > tbody > tr > th.dtfc-fixed-left {
	display: table-cell;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
	padding: 12px 10px 12px 16px;
}

.tf-panel {
	border-bottom: 1px solid #d7e0ea;
	background: #f7f9fc;
	/* 注意:这里不能用 overflow:hidden,否则 TomSelect 下拉层会被裁掉 */
}

.tf-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: #e4e9f1;
}

.tf-title {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.tf-clear,
.tf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: none;
	color: #2f6db3;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 6px;
}

.tf-clear svg,
.tf-toggle svg {
	width: 17px;
	height: 17px;
	flex: none;
}

/* 清除按钮:默认置灰不可点,有筛选生效时(.tf-active)变蓝激活 */
.tf-clear {
	color: #b3bdc9;
	cursor: default;
}

.tf-clear.tf-active {
	color: #2f6db3;
	cursor: pointer;
}

/* 展开时箭头旋转 180° */
.tf-toggle svg {
	transition: transform .2s ease;
}

.tf-panel.tf-open .tf-toggle svg {
	transform: rotate(180deg);
}

/* 筛选生效数量角标 */
.tf-badge {
	display: inline-block;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 9px;
	background: #2f6db3;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	vertical-align: 2px;
	box-sizing: border-box;
}

.tf-body {
	display: none;
	padding: 12px;
	flex-direction: column;
	gap: 14px;
	/* 不要加 overflow/max-height:否则会裁剪 TomSelect 下拉层。
	   内联面板只展示 displayed 标记的少量字段,高度本来就可控;
	   完整筛选条件走底部弹出层(.tf-sheet)。 */
}

.tf-panel.tf-open .tf-body {
	display: flex;
}

/* ---------- 底部"显示所有筛选条件"按钮 ---------- */

.tf-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	color: #2f6db3;
	font-size: 14px;
	cursor: pointer;
}

.tf-more svg {
	width: 17px;
	height: 17px;
	transition: transform .2s ease;
}

.tf-panel.tf-expanded .tf-more svg {
	transform: rotate(180deg);
}

/* 初始隐藏的筛选字段 */
.tf-field.tf-hidden {
	display: none;
}

/* ---------- 底部弹出层(所有筛选条件) ---------- */

/* iOS 16+ 橡皮筋双保险:页面不准橡皮筋,滚动链断在容器内 */
html, body {
	overscroll-behavior: none;
}

.dt-scroll-body, .dataTables_scrollBody,
.tf-pick-list, .tf-sheet-body, .tf-detail-list {
	overscroll-behavior: contain;
}

/* 弹出层打开时锁定背景页面滚动 */
.tf-lock {
	overflow: hidden;
}

.tf-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1060;
}

.tf-overlay.tf-show {
	display: block;
}

.tf-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.tf-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 78vh;
	background: #f7f9fc;
	border-radius: 14px 14px 0 0;
	animation: tf-sheet-up .25s ease;
}

@keyframes tf-sheet-up {
	from {
		transform: translateY(30%);
		opacity: .6;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.tf-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: #e4e9f1;
	border-radius: 14px 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: #333;
}

.tf-sheet-close {
	display: inline-flex;
	border: none;
	background: none;
	padding: 4px;
	cursor: pointer;
}

.tf-sheet-close svg {
	width: 20px;
	height: 20px;
	color: #666;
}

.tf-sheet-body {
	flex: 1;
	min-height: 0;   /* 同上,防止浮层被内容撑出屏幕 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tf-sheet-foot {
	display: flex;
	gap: 10px;
	padding: 10px 14px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* 适配 iPhone 底部安全区 */
	background: #fff;
}

.tf-sheet-reset {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccd6e0;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	color: #666;
	cursor: pointer;
}

.tf-sheet-done {
	flex: 2;
	padding: 10px;
	border: none;
	border-radius: 6px;
	background: #2f6db3;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}

/* ---------- 单个筛选字段 ---------- */

.tf-field {
	background: #fff;
	border: 1px solid #e4eaf1;
	border-radius: 6px;
	padding: 10px 12px 16px;
}

.tf-field:last-child {
	border-radius: 6px 6px 7px 7px;
}

.tf-label {
	font-size: 13px;
	font-weight: 600;
	color: #444;
	margin-bottom: 10px;
}

.tf-unit {
	color: #888;
	font-weight: 400;
}

/* ---------- 范围筛选 ---------- */

.tf-range-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.tf-range-inputs input {
	width: 0;
	flex: 1;
	padding: 6px 8px;
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	font-size: 14px;
}

.tf-dash {
	color: #999;
}

.tf-unit-inline {
	color: #888;
	font-size: 13px;
	white-space: nowrap;
}

/* noUiSlider 主题微调 */

.tf-slider {
	margin: 0 8px;
}

.tf-slider.noUi-target {
	border: none;
	background: #dce5ee;
	height: 6px;
	box-shadow: none;
}

.tf-slider .noUi-connect {
	background: #2f6db3;
}

.tf-slider .noUi-handle {
	width: 20px;
	height: 20px;
	top: -7px;
	right: -10px;
	border: none;
	border-radius: 50%;
	background: #2f6db3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.tf-slider .noUi-handle:before,
.tf-slider .noUi-handle:after {
	display: none;
}

/* ---------- 复选框多选 ---------- */

.tf-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tf-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;          /* 固定行高,保证"收起显示 3 行"裁切精确 */
	box-sizing: border-box;
	padding: 5px 10px;
	border: 1px solid #ccd6e0;
	border-radius: 15px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

/* 收起状态:只显示 3 行(30px × 3 + 间距 8px × 2 = 106px) */
.tf-checks.tf-collapsed {
	max-height: 106px;
	overflow: hidden;
}

/* "显示更多/收起"按钮 */
.tf-checks-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding: 2px 0;
	border: none;
	background: none;
	color: #2f6db3;
	font-size: 13px;
	cursor: pointer;
}

.tf-checks-more svg {
	width: 15px;
	height: 15px;
	transition: transform .2s ease;
}

/* 展开后箭头朝上 */
.tf-checks:not(.tf-collapsed) + .tf-checks-more svg {
	transform: rotate(180deg);
}

.tf-check input {
	margin: 0;
	accent-color: #2f6db3;
}

.tf-check:has(input:checked) {
	border-color: #2f6db3;
	background: #eaf1f9;
	color: #2f6db3;
}

/* ---------- TomSelect 微调 ---------- */

.tf-field .ts-control {
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	padding: 7px 10px;
	min-height: 38px;
	font-size: 14px;
}

/* 下拉层挂在 <body> 上(dropdownParent:'body'),需要全局高 z-index,
   要高于 fixedColumns 克隆列和页面其他浮层 */
.ts-dropdown {
	z-index: 1050;
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* 向上展开模式(JS 在下方空间不足时给 wrapper 加 .tf-dropup) */
.ts-wrapper.tf-dropup .ts-dropdown {
	top: auto;
	bottom: 100%;
	margin: 0 0 4px 0;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, .12);
}

/* 下拉打开时提升整个控件的层级,防止被相邻筛选字段/标题栏压盖 */
.ts-wrapper.dropdown-active {
	position: relative;
	z-index: 30;
}

/* 底部弹出层内:下拉层稍矮,保证在浮层可视区内完整显示 */
.tf-sheet .ts-dropdown .ts-dropdown-content {
	max-height: 180px;
}

/* 下拉列表:更高、行距更大,适合手机点选 */
.ts-dropdown .ts-dropdown-content {
	max-height: 260px;
	-webkit-overflow-scrolling: touch;
}

.ts-dropdown .option {
	padding: 10px 12px;
	font-size: 14px;
}

/* 下拉列表顶部的内置搜索框(滚动时吸顶) */
.tf-ts-search {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px;
	background: #fff;
	border-bottom: 1px solid #e4eaf1;
	border-radius: 4px 4px 0 0;
}

.tf-ts-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	font-size: 14px;
}

/* ---------- 移动端底部弹出选择器 ---------- */

/* 选择器控件(外观对齐输入控件) */
.tf-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	box-sizing: border-box;
}

.tf-picker svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: #888;
}

/* 选择器浮层:层级要高于"显示所有筛选条件"浮层(1060) */
.tf-pick-overlay {
	z-index: 1070;
}

.tf-pick-search {
	padding: 10px 14px;
	background: #fff;
	border-bottom: 1px solid #e4eaf1;
}

.tf-pick-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #ccd6e0;
	border-radius: 4px;
	font-size: 14px;
}

.tf-pick-list {
	flex: 1;
	min-height: 0;   /* flex 子项必须加,否则内容会把浮层撑出屏幕、无法滚动 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0;
	background: #fff;
}

.tf-pick-item {
	padding: 12px 16px;
	font-size: 15px;
	color: #333;
	cursor: pointer;
}

.tf-pick-item:active {
	background: #eaf1f9;
}

.tf-pick-item.tf-pick-on {
	color: #2f6db3;
	font-weight: 600;
}

.tf-pick-empty {
	padding: 20px;
	text-align: center;
	color: #999;
	font-size: 14px;
}

/* ---------- 已选条件 chips ---------- */

.tf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 12px;
	background: #f7f9fc;
	border-bottom: 1px solid #e4eaf1;
}

.tf-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 13px;
	background: #eaf1f9;
	color: #2f6db3;
	font-size: 12px;
	cursor: pointer;
}

.tf-chip svg {
	width: 12px;
	height: 12px;
	flex: none;
}

/* ---------- 行详情 ---------- */

/* 型号前的详情图标:容器收缩包裹图标,不用固定宽度
   (WebKit 对无内在尺寸的 SVG flex 子项有压缩 bug,固定宽度会把图标右侧切掉) */
.tf-rowinfo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0 8px 0 0;
	padding: 4px 2px;      /* 轻微扩大点击热区,不撑大行高 */
	vertical-align: -4px;
	color: #2f6db3;
	cursor: pointer;
	touch-action: manipulation;
}

.tf-rowinfo svg {
	width: 20px;
	height: 20px;
	flex: none;            /* 双保险:任何环境下都不允许被 flex 压缩 */
}

/* 详情浮层:层级高于选择器浮层(1070) */
.tf-detail-overlay {
	z-index: 1080;
}

.tf-detail-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 14px 14px;
	background: #fff;
}

.tf-detail-row {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eef2f6;
	font-size: 14px;
}

.tf-detail-label {
	flex: none;
	width: 110px;
	color: #888;
}

.tf-detail-value {
	flex: 1;
	color: #333;
	word-break: break-all;
}

/* 详情浮层底部操作区:预览PDF / 询价固定在最下面,全宽大按钮(对齐筛选浮层的 重置/确定) */
.tf-detail-foot:empty {
	display: none;
}

/* 数据里按钮外层还有 .action-group / .dt-action 两层包装,先拆掉它们的约束 */
.tf-detail-foot .action-group {
	display: flex;
	gap: 10px;
	width: 100%;
}

.tf-detail-foot .dt-action {
	flex: 1;
	display: flex;
	width: auto;          /* 覆盖 style.css 的 width: fit-content */
}

.tf-detail-foot .btn-preview,
.tf-detail-foot .btn-inquiry {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 6px;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.tf-detail-foot .btn-preview {
	border: 1px solid #ccd6e0;
	background: #fff;
	color: #666;
}

.tf-detail-foot .btn-inquiry {
	border: none;
	background: #2f6db3;
	color: #fff;
}

.ts-dropdown .active {
	background: #eaf1f9;
	color: #2f6db3;
}