/* === Reset & Body === */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	cursor: default;
}

/* === Logo === */
header {
	background: #003366;
}
.logo-container {
	width: 100%;
	margin: 0 auto;
}
.logo-container img {
	width: 100%;
	height: 80px;
	display: block;
}

/* === Map === */
#map {
	height: calc(100% - 80px);
	width: 100%;
}

/* === Panel KCHT === */
#panel-kcht {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 260px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	z-index: 1000;
	transition: width 0.3s, height 0.3s;
}
#panel-kcht.collapsed {
	width: 260px;
	height: 32px;
	overflow: hidden;
}

/* Header của panel */
#panel-kcht .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #003366;
	color: #fff;
	padding: 6px 10px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
#panel-kcht .header .title {
	font-weight: bold;
	font-size: 14px;
}
#panel-kcht .header .toggle {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

/* Nội dung panel */
#panel-kcht .content {
	padding: 10px;
	max-height: 400px;
	overflow-y: auto;
}

/* === Cây tài sản === */
.asset-tree {
	list-style: none;
	margin: 0;
	padding: 0;
}
.asset-tree ul.sub-tree {
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
}
.asset-tree .hidden {
	display: none;
}
.asset-tree .group-header {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 4px 0;
}
.asset-tree .label {
	font-weight: bold;
	color: #003366;
}

/* Icon */
.asset-tree .toggle-icon, .asset-tree .folder-icon {
	color: #003366;
	margin-right: 5px;
}
.asset-tree .toggle-icon {
	font-size: 14px; /* kích thước mũi tên */
}
.asset-tree .folder-icon {
	font-size: 16px; /* kích thước thư mục */
}

.asset-tree .item {
	margin: 4px 0;
	font-size: 14px;
}
.asset-tree input[type="checkbox"] {
	accent-color: #003366;
	margin-right: 4px;
}
.asset-tree input[type="checkbox"]:checked + label {
	font-weight: bold;
	color: green;
}
.asset-tree label {
	cursor: pointer;
}

/* === Search Icon & Panel === */
#search-icon {
	position: absolute;
	top: 100px;
	right: 10px;
	width: 45px;
	height: 45px;
	background: #fff;
	border: 2px solid #003366;
	border-radius: 5px;
	text-align: center;
	line-height: 45px;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	z-index: 2000;
}
#search-icon:hover {
	background: #003366;
	color: #fff;
}
#search-panel {
	position: absolute;
	top: 150px;
	right: 10px;
	width: 280px; 
	background: #fff;
	padding: 10px;
	border: 2px solid #003366;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	z-index: 2200;
}
#search-panel.hidden {
	display: none;
}
#search-panel label {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: bold; 
	color: #003366; 
}
/* Removed redundant .search-options style block 1, kept the more detailed one below */

#search-panel input,
#search-panel select {
	box-sizing: border-box; 
	width: 100%;
	padding: 5px;
	margin-top: 3px;
	font-size: 12px;
}
#search-panel button {
	margin-top: 10px;
	width: 100%;
	padding: 6px;
	background: #003366;
	color: #fff;
	border: none;
	cursor: pointer;
}
#search-panel button:hover {
	background: #0055aa;
}

/* Retained the more detailed search-options block */
.search-options {
	background-color: #e6f7ff; 
	padding: 5px 8px; /* 5px trên/dưới, 8px trái/phải */
	display: flex;
	align-items: center;
	justify-content: space-between; /* Đẩy label và checkbox ra hai phía */
	margin-top: 10px;
	margin-bottom: 10px; 
	
	/* Đảm bảo nó nằm gọn trong form */
	box-sizing: border-box; 
	width: 100%; /* Đảm bảo nó chiếm đúng 100% của form cha */
}
.search-options label {
	font-weight: normal; 
	margin-bottom: 0; 
	/* Đảm bảo label chiếm hết không gian còn lại */
	flex-grow: 1; 
}

.search-options input[type="checkbox"] {
	margin: 0; /* Loại bỏ mọi margin xung quanh checkbox */
	padding: 0;
}


/*
 * Thiết lập màu nền và màu chữ riêng cho phần tiêu đề (header) của bảng 
 * kết quả tìm kiếm.
 */
#results-table-popup table thead tr {
	/* Màu nền xanh nhạt, thường dùng cho tiêu đề */
	background-color: #d9edf7; 
	/* Màu chữ đậm hơn để dễ đọc trên nền sáng */
	color: #31708f; 
	/* Đảm bảo chữ in đậm (nếu chưa có) */
	font-weight: bold;
	z-index: 2400;
}

/* Tùy chọn: Thêm viền dưới cho tiêu đề để phân tách rõ ràng hơn với nội dung */
#results-table-popup table thead {
	border-bottom: 2px solid #bce8f1;
}

/* --- Quy tắc sọc ngựa vằn đã có ở bước trước (giữ lại) --- */

#results-table-popup table tbody tr:nth-child(odd) {
	background-color: #f5f5f5; /* Màu xám rất nhạt cho hàng lẻ */
}

#results-table-popup table tbody tr:hover {
	background-color: #e0e0e0; /* Hiệu ứng hover */
	cursor: pointer;
}
/* Đảm bảo các trường range nằm trên một dòng và chia đều không gian */
.range-inputs {
	display: flex;
	gap: 8px; /* Khoảng cách giữa hai ô input */
}

/* Đảm bảo input bên trong chia đều không gian */
.range-inputs input[type="number"] {
	flex: 1;
	min-width: 0; /* Cho phép co lại trong flex container */
}


/* Spinner CSS */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Vòng tròn loading */
#loading-spinner {
	display: none; /* Ẩn mặc định */
	position: fixed;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	margin-top: -30px;
	border: 6px solid #f3f3f3;
	border-top: 6px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 2600;
}
/* Removed duplicate @keyframes spin block */

/* === Popup kết quả và chi tiết === */
.popup {
	position: absolute;
	max-width: 400px;
	max-height: 80vh;
	background: #ffffff; /* Đảm bảo nền trắng cho nội dung popup */
	border: 2px solid #003366;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	z-index: 3000;
	display: flex;
	flex-direction: column;
}
.popup.hidden {
	display: none;
}

/* HEADER STYLE (áp dụng cho tất cả pop-up) */
.popup-header {
	background: #003366; /* Mặc định */
	color: #fff;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	cursor: grab;
}

/* ĐIỀU CHỈNH: Màu nền tiêu đề cho "Chi tiết tài sản" (Sáng nhất) */
#details-popup .popup-header {
	background: #4682b4;
	z-index: 4000;
}

.popup-header h3 {
	margin: 0;
}
.popup-header .close-btn {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
}
.popup-content {
	padding: 15px;
	overflow-y: auto;
	flex-grow: 1;
}

/* ĐIỀU CHỈNH: Màu nền tiêu đề cho "Kết quả tìm kiếm" (Sáng hơn #003366) */
#results-table-popup .popup-header {
	background: #0055aa; 
}

/* Popup bảng kết quả */
#results-table-popup table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
#results-table-popup th,
#results-table-popup td {
	border: 1px solid #ccc;
	padding: 4px;
	text-align: left;
	font-size: 11px;
}

#results-table-popup th:nth-child(2),
#results-table-popup td:nth-child(2),
#results-table-popup th:nth-child(3),
#results-table-popup td:nth-child(3) {
	text-align: right;
	width: 100px;
}
/* Ví dụ: Điều chỉnh chiều rộng trong file CSS */
#results-table-popup table th:nth-child(1),
#results-table-popup table td:nth-child(1) {
	/* Cột 1: Tên Cầu */
	width: 30%; /* Cho phép tên dài hơn */
	min-width: 150px;
	text-align: left;
}

#results-table-popup table th:nth-child(2),
#results-table-popup table td:nth-child(2) {
	/* Cột 2: Tuyến đường / Tên đường / Loại kết cấu */
	width: 30%;
	text-align: left;
}

#results-table-popup table th:nth-child(3),
#results-table-popup table td:nth-child(3) {
	/* Cột 3: Chiều dài (m) */
	width: 20%;
}

#results-table-popup table th:nth-child(4),
#results-table-popup table td:nth-child(4) {
	/* Cột 4: Chiều rộng (m) hoặc Tải trọng */
	width: 20%;
}

/* Đảm bảo bảng có giới hạn và cách hiển thị tốt */
#results-table-popup table {
	table-layout: fixed; /* Rất quan trọng để width hoạt động hiệu quả */
	width: 100%;
}


/* Tùy chọn: Đảm bảo cột Tên sử dụng phần còn lại và ngắt chữ */
#results-table-popup td:nth-child(1) {
	max-width: 250px;
	word-wrap: break-word;
}

#results-table-popup th {
	background: #f2f2f2;
}
#results-table-popup tbody tr {
	cursor: pointer;
}
#results-table-popup tbody tr:hover {
	background: #f0f0f0; /* Màu hover sáng trên nền trắng */
}

/* Popup chi tiết tài sản */
#details-popup .popup-content {
	font-size: 11px;
	z-index: 4000;
}
#details-popup .popup-content b {
	font-size: 11px;
}

/* === Basemap Control (Leaflet Layers) === */
.leaflet-control-zoom {
	margin-bottom: 20px;
	margin-right: 10px;
	z-index: 1000;
}
.leaflet-control-layers {
	margin-bottom: 90px;
	margin-right: 10px;
	z-index: 2000;
}

/* Marker Highlight (for flashing) */
.highlight-marker {
	background-color: green;
	border-radius: 50%;
	border: 2px solid white;
	box-shadow: 0 0 5px green;
	width: 15px;
	height: 15px;
	transform: translate(-50%, -50%);
}
/* === POPUP TITLE STYLING (Tiêu đề THÔNG TIN CHI TIẾT KCHT) === */

/* Áp dụng cho tiêu đề trong Pop-up chi tiết tài sản (từ Search) */
#details-popup .popup-content h4 {
	color: #003366; /* Màu xanh đậm */
	font-size: 14px; /* Kích thước lớn hơn */
	text-transform: uppercase;
	margin-top: 0; 
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	margin-bottom: 10px;
	z-index: 4000;
}

/* Áp dụng cho tiêu đề trong Pop-up của Leaflet (từ GetFeatureInfo/Click bản đồ) */
.leaflet-popup-content h4 {
	color: #003366; /* Màu xanh đậm */
	font-size: 14px; /* Kích thước lớn hơn */
	text-transform: uppercase;
	margin: 0 0 10px 0; /* Thiết lập margin cho Leaflet popup */
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

/* Thêm CSS cơ bản cho các trường range tìm kiếm để hiển thị trên 1 dòng */
.range-group {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr; /* Label, Input, Label, Input */
	gap: 5px; /* Khoảng cách giữa các phần tử */
	align-items: center;
	margin-bottom: 5px;
}
.range-group label {
	font-weight: normal; /* Không in đậm label "Từ:" và "Đến:" */
	margin-bottom: 0;
}
.range-group input[type="number"] {
	width: 100%;
}
#search-panel form label {
	font-weight: bold;
	display: block;
	margin-top: 10px;
}

/* Style cho nút "Xem ảnh" bên trong Leaflet Popup */
.leaflet-popup-content .open-image-popup-btn {
		display: block; /* Đảm bảo nút chiếm hết chiều rộng */
		width: 100%;
		padding: 6px 12px;
		background-color: #007bff; /* Màu xanh nổi bật */
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 13px;
		font-weight: bold;
		margin-top: 10px; /* Tạo khoảng cách với thông tin chi tiết */
}
.leaflet-popup-content .open-image-popup-btn:hover {
		background-color: #0056b3;
}
/* ======================================= */
/* === Popup Xem ảnh (#image-popup) === */
/* ======================================= */
#image-popup {
		position: absolute; /* Bắt buộc dùng fixed để neo vào viewport */
		bottom: 10px;
		right: 10px;
		/* Đảm bảo ghi đè các thuộc tính top/left mặc định của .popup */
		top: auto; 
		left: auto; 
		max-width: 600px;
		width: 500px;
		/* Tăng max-height để chứa nội dung lớn hơn */
		height: 400px; 
		z-index: 5000;
}
/* Yêu cầu 2 & Màu nổi bật: Thanh tiêu đề (Header) của Popup Ảnh */
#image-popup .popup-header {
		/* Đặt màu nền xanh sáng (ví dụ: #007bff) - Theo yêu cầu */
		background-color: #007bff; 
		/* Đổi màu chữ thành trắng để nổi bật trên nền xanh */
		color: white; 
		/* Chức năng di chuyển */
		cursor: grab;
		user-select: none; /* Ngăn chọn văn bản khi kéo */
		touch-action: none; /* Tối ưu hóa cho màn hình cảm ứng */
		
		/* Bổ sung các thuộc tính layout cần thiết */
		padding: 10px; /* Đảm bảo padding không bị ghi đè */
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
}
/* KẾT THÚC KHỐI CSS NÀY RẤT QUAN TRỌNG */


#image-popup .popup-header h3 {
		/* Đổi màu chữ thành trắng và giảm cỡ chữ tiêu đề */
		color: white; 
		font-size: 14px;
		margin: 0;
}

#image-popup .popup-header .close-btn {
		/* Đổi màu nút đóng thành trắng để đồng bộ */
		color: white; 
		/* Đảm bảo nút đóng không có nền */
		background: none;
}

/* Style cho các item ảnh bên trong gallery (Giữ nguyên) */
#image-gallery-content {
		display: block; 
		font-size: 10px;
}

#image-gallery-content .image-item {
		margin-bottom: 5px;
		padding: 3px;
		text-align: center;
		border: 1px solid #ddd;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#image-gallery-content img {
		width: 100%;
		height: 60px;
		object-fit: cover;
		cursor: pointer;
}
/* HẾT PHẦN IMAGE POPUP */

/* Slideshow trong popup ảnh */
.slideshow-container {
	position: relative;
	width: 100%;
	/* Đã điều chỉnh: Chiều cao gấp rưỡi 220px -> 330px */
	height: 330px; 
	text-align: center;
	object-fit: cover;
}

.slideshow-container img {
	/* Đảm bảo ảnh chiếm toàn bộ khung hình 100% width/height */
	width: 100%; 
	height: 100%;
	object-fit: cover; 
	border-radius: 4px;
}

.slideshow-container .prev { left: 5px; }
.slideshow-container .next { right: 5px; }

.slideshow-container .prev:hover,
.slideshow-container .next:hover {
	background: rgba(0,0,0,0.8);
}

/* Bộ đếm số ảnh */
.slideshow-container .counter {
	position: absolute;
	bottom: 8px;
	right: 10px;
	background: rgba(0,0,0,0.6);
	color: white;
	padding: 2px 6px;
	font-size: 12px;
	border-radius: 3px;
}
.caption {
	margin-top: 5px;
	text-align: center;
	font-size: 14px;
	color: #333;
}

/* Nút điều hướng */
.slideshow-container .prev,
.slideshow-container .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 8px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 3px;
	transition: 0.6s ease;
	user-select: none;
	background-color: rgba(0,0,0,0.4);
	z-index: 10;
}

.next {
		right: 0;
		border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
}

/* Dots/Bullets/Indicators */
.dot {
		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
}

.active, .dot:hover {
		background-color: #717171;
}

/* Animation Fade */
.fade {
		animation-name: fade;
		animation-duration: 1.5s;
}

@keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
}


@media (max-width: 600px) {
		/* Áp dụng cho TẤT CẢ các pop-up (Chi tiết, Kết quả, Ảnh) */
		.popup {
				/* Ghi đè lại các thuộc tính vị trí tuyệt đối/cố định */
				top: 0 !important;
				left: 0 !important;
				right: 0 !important;
				bottom: 0 !important;
				
				/* Chiếm toàn bộ màn hình */
				width: 100% !important;
				height: 100% !important;
				
				/* Đảm bảo nằm trên mọi thứ */
				z-index: 5000;
				
				/* Đảm bảo nội dung cuộn được */
				overflow-y: auto;
				
				/* Đảm bảo pop-up nằm ở vị trí cố định trên màn hình */
				position: fixed !important; 
				
				/* Khử viền bo tròn nếu có */
				border-radius: 0;
		}
   /* Đảm bảo Image Popup luôn ở trên cùng trên mobile */
    #image-popup {
        z-index: 10001 !important;
    }
		/* Đảm bảo nội dung bên trong cũng giãn ra */
		.popup-content,
		.leaflet-popup-content, /* Cửa sổ Chi tiết */
		#results-table-popup .popup-content { /* Cửa sổ Kết quả */
				height: auto;
				max-height: none;
				padding: 10px;
        z-index: 5005 !important;
		}
		
		/* Làm cho header nổi bật để dễ đóng */
		.popup-header {
				background-color: #f1f1f1;
				position: sticky; /* Giữ header ở trên cùng khi cuộn */
				top: 0;
				z-index: 10001;
		}
		
		/* Định vị lại thanh tìm kiếm cho phone */
		#search-container {
				width: 95%; 
				left: 2.5%; 
				right: 2.5%;
				margin: 0;
		}
}