// pages/main/travel-detail/index.less

.detail-container {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;
	background: var(--theme-bg-page);

	.content {
		gap: 24rpx;
		display: flex;
		padding-top: 48rpx;
		flex-direction: column;

		.status-section {
			display: flex;
			padding: 16rpx 0;
			justify-content: center;
		}

		.title-section {
			padding: 24rpx;
			text-align: center;
			background: var(--theme-bg-card);
			box-shadow: 0 2px 12px var(--theme-shadow-light);

			.title {
				color: var(--theme-text-primary);
				font-size: 40rpx;
				font-weight: bold;
				line-height: 1.5;
			}
		}

		.info-card,
		.content-card,
		.locations-card {
			overflow: hidden;
			background: var(--theme-bg-card);
			box-shadow: 0 2px 12px var(--theme-shadow-light);

			.card-title {
				display: flex;
				padding: 24rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid var(--theme-border-light);

				.title-left {
					gap: 12rpx;
					display: flex;
					align-items: center;

					.icon {
						color: var(--theme-primary);
					}

					.text {
						color: var(--theme-text-primary);
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.title-right {
					gap: 16rpx;
					display: flex;
					align-items: center;

					.icon-btn {
						display: flex;
						padding: 8rpx;
						align-items: center;
						justify-content: center;
						transition: all .2s;

						&:active {
							transform: scale(1.1);
						}
					}
				}
			}

			.info-list {
				padding: 24rpx;

				.info-item {
					display: flex;
					padding: 20rpx 0;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid var(--theme-border-light);

					&:last-child {
						border-bottom: none;
					}

					.label {
						gap: 12rpx;
						flex: 1;
						display: flex;
						align-items: center;

						.icon {
							color: var(--theme-text-secondary);
						}

						.text {
							color: var(--theme-text-secondary);
							font-size: 28rpx;
						}
					}

					.value {
						color: var(--theme-text-primary);
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}

			.content-text {
				color: var(--theme-text-primary);
				padding: 24rpx;
				font-size: 28rpx;
				line-height: 1.8;
				white-space: pre-wrap;
				word-break: break-all;
			}

			.loading-container {
				display: flex;
				padding: 48rpx;
				align-items: center;
				justify-content: center;
			}

			.locations-list {
				padding: 24rpx;

				.location-item {
					gap: 24rpx;
					display: flex;
					padding: 24rpx;
					margin-bottom: 20rpx;
					border-radius: 12rpx;
					background: var(--theme-bg-page);
					border: 1px solid var(--theme-border-light);
					transition: all .3s;

					&:last-child {
						margin-bottom: 0;
					}

					&:active {
						transform: scale(.98);
						background: var(--theme-bg-card);
					}

					.location-icon {
						display: flex;
						flex-shrink: 0;
						align-items: center;
						justify-content: center;
					}

					.location-content {
						gap: 16rpx;
						flex: 1;
						display: flex;
						overflow: hidden;
						flex-direction: column;

						.location-header {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.location-title {
								flex: 1;
								color: var(--theme-text-primary);
								overflow: hidden;
								font-size: 30rpx;
								font-weight: bold;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.location-description {
							color: var(--theme-text-secondary);
							font-size: 26rpx;
							line-height: 1.6;
							word-break: break-all;
						}

						.location-info {
							gap: 24rpx;
							display: flex;
							flex-wrap: wrap;

							.info-item {
								gap: 8rpx;
								display: flex;
								align-items: center;
								color: var(--theme-text-secondary);
								font-size: 24rpx;
							}
						}
					}

					.location-arrow {
						display: flex;
						flex-shrink: 0;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.empty-state {
				gap: 16rpx;
				display: flex;
				padding: 64rpx 24rpx;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.empty-text {
					color: var(--theme-text-secondary);
					font-size: 26rpx;
				}
			}
		}

		.time-card {
			gap: 16rpx;
			display: flex;
			padding: 24rpx;
			flex-direction: column;
			background: var(--theme-bg-card);
			box-shadow: 0 2px 12px var(--theme-shadow-light);

			.time-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					color: var(--theme-text-secondary);
					font-size: 24rpx;
				}

				.value {
					color: var(--theme-text-secondary);
					font-size: 24rpx;
				}
			}
		}

		.action-section {
			gap: 24rpx;
			display: flex;
			padding: 24rpx 16rpx 48rpx 16rpx;

			.edit-btn {
				flex: 2;
			}

			.delete-btn {
				flex: 1;
			}
		}
	}
}

.delete-dialog-content {
	gap: 32rpx;
	display: flex;
	flex-direction: column;

	.delete-warning {
		gap: 16rpx;
		display: flex;
		padding: 24rpx;
		align-items: center;
		border-radius: 12rpx;
		flex-direction: column;
		background: #FFF4F4;

		.warning-text {
			color: #E34D59;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.delete-confirm {
		gap: 16rpx;
		display: flex;
		flex-direction: column;

		.confirm-label {
			color: var(--theme-text-primary);
			font-size: 28rpx;
		}
	}
}