/* ============ transaction.css ============ */

.tl-wrap {
	width: 100%;
	min-height: 100vh;
	background: var(--bg-page);
}

/* ============ 顶部渐变导航栏 ============ */
.tl-header {
	background: linear-gradient(90deg, var(--gradient-green-start) 0%, var(--gradient-green-end) 50%, #ffffff 100%);
	border-bottom: 1px solid #d7eadd;
	padding: 12px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(0, 153, 68, 0.08);
	margin-bottom: 0;
}

.tl-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tl-logo {
	display: inline-block;
	width: 55px;
	height: 55px;
	font-size: 28px;
	line-height: 1;
	background-size: 55px 55px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('data:image/png;base64,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');
}

.tl-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.tl-brand-name {
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-green);
	letter-spacing: 0.5px;
}

.tl-brand-sub {
	font-size: 12px;
	color: #666;
	margin-top: 2px;
}

.tl-logout-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 22px;
	background: var(--primary-green);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
}

.tl-logout-btn:hover {
	background: #008a3c;
}

/* ============ 列表区域：24px padding ============ */
.tl-list {
	background: #fff;
	padding: 24px;
	margin: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 内部表格区域加圆角边框 */
.tl-list-inner {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border-color);
}

.tl-table-head {
	display: flex;
	padding: 14px 20px;
	background: #f5f7fa;
	font-weight: 600;
	font-size: 14px;
	color: #606266;
	border-bottom: 1px solid var(--border-color);
}

.tl-row {
	display: flex;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
	font-size: 14px;
	transition: background 0.15s;
}

.tl-row:last-child {
	border-bottom: none;
}

.tl-row:hover {
	background: #fafafa;
}

.col-time {
	flex: 1;
	color: #606266;
	text-align: right;
}

.col-amount {
	flex: 1;
}

.amount-text {
	font-weight: 600;
	color: #1e3c72;
	font-size: 15px;
}

.mobile-label {
	display: none;
}

.tl-empty {
	padding: 40px;
	text-align: center;
	color: var(--text-sub);
}

/* ============ 分页 ============ */
.tl-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 0;
}

.pg-btn {
	background: #fff;
	border: 1px solid #dcdfe6;
	padding: 8px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s;
}

.pg-btn:hover:not(:disabled) {
	border-color: var(--primary-green);
	color: var(--primary-green);
}

.pg-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pg-info {
	font-size: 14px;
	color: #606266;
	min-width: 70px;
	text-align: center;
}

/* ============ 响应式 ============ */
@media (max-width: 640px) {
	.tl-header {
		padding: 12px 16px;
	}

	.tl-brand-name {
		font-size: 15px;
	}

	.tl-logout-btn {
		padding: 6px 14px;
		font-size: 13px;
	}

	.tl-list {
		padding: 16px;
	}

	.tl-table-head {
		display: none;
	}

	.tl-row {
		flex-direction: column;
		gap: 6px;
		padding: 14px 16px;
	}

	.tl-row .col-time,
	.tl-row .col-amount {
		flex: none;
		text-align: left;
		font-size: 14px;
	}

	.tl-row .col-amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mobile-label {
		display: inline-block;
		font-size: 12px;
		color: var(--text-sub);
		margin-right: 8px;
	}
}

/* ============ 查询栏 ============ */
.tl-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.tl-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-filter-label {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}

.tl-filter-select,
.tl-filter-date {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-main);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  min-width: 160px;
}

.tl-filter-select:focus,
.tl-filter-date:focus {
  border-color: var(--primary-green);
}

.tl-filter-date {
  width: 160px;
}

.tl-filter-separator {
  line-height: 36px;
  color: var(--text-sub);
  margin-bottom: 2px;
}

.tl-filter-btn {
  height: 36px;
  padding: 0 24px;
  background: var(--primary-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 0;
}

.tl-filter-btn:hover {
  background: #008a3c;
} 
.tl-filter-reset-btn {
	background: #f5f7fa;
	color: #000;
}
.tl-filter-reset-btn:hover {
	background: #00d55c;
	color: #fff;
}

/* 响应式：移动端查询栏垂直排列 */
@media (max-width: 640px) {
  .tl-filter-bar {
    padding: 16px;
    gap: 12px;
  }

  .tl-filter-item {
    width: 100%;
	align-items:flex-start;
	flex-direction: column;
  }

  .tl-filter-select,
  .tl-filter-date {
    width: 100%;
    min-width: 0;
  }
  .time-section {
	  width: 100%;
  }
  .time-warpper {
	  flex: 2;
  }

  .tl-filter-separator {
	  display: inline-block;
	  min-width: 20px;
	  text-align: center;
  }

  .tl-filter-btn {
    width: 100%;
    margin-top: 4px;
  }
}

/* 重置按钮 */
.tl-filter-reset-btn {
  background: #f5f7fa;
  color: #000;
  outline: none;                 /* 移除焦点轮廓 */
  touch-action: manipulation;    /* 优化移动端触摸 */
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.tl-filter-reset-btn:hover {
  background: #00d55c;
  color: #fff;
}

/* 点击瞬间加深反馈 */
.tl-filter-reset-btn:active {
  transform: scale(0.96);
  background: #c0c4cc;
  color: #000;
}

/* 移动端防止 hover 残留（触屏设备通常不会触发 hover，但为防止意外） */
@media (hover: none) {
  .tl-filter-reset-btn:hover {
    background: #f5f7fa;
    color: #000;
  }
  .tl-filter-reset-btn:active {
    background: #c0c4cc;
  }
}