/* === 1. LAYOUT & SIDEBAR STATE === */
/* Đồng nhất trạng thái bản đồ khi ẩn/hiện Sidebar */
body.sidebar-hidden #map {
  flex: 1 1 100%;
  width: 100%;
}

/* Sidebar cơ bản và hiệu ứng chuyển cảnh */
#sidebar {
  transition: transform 0.3s ease, width 0.3s ease, flex-basis 0.3s ease;
}

/* Khi ẩn sidebar bằng class điều khiển trên body */
body.sidebar-hidden #sidebar,
#sidebar.hidden {
  transform: translateX(-100%);
}

.leaflet-container {
  background: transparent;
  width: 100%;
  height: 100%;
}

/* === 2. SIDEBAR COMPONENTS (Header, List, Info) === */
#sidebar h3 { margin: 6px 0 8px; }
h3.tenxa { text-transform: uppercase; color: #f00; border-bottom: 2px solid #f00; text-align: center; }
h3.danhsach { height: 3%; text-align: center; }

/* Ô tìm kiếm và bộ lọc */
.loc_tim { margin: 10px; display: flex; height: 10%; }
input#search {
  width: 100%;
  height: 46px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 14px;
}

/* Danh sách xã */
#list-xa {
  list-style: none;
  margin: 0; padding: 0px 26px;
  height: 80%;
  overflow: auto;
}

#list-xa li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.25;
}

#list-xa li:hover { background: #eee; border-right: 6px solid #f00; }

#list-xa li.active {
  background: #cce5ff;
  font-weight: 700;
  border-left: 12px solid #f00;
  border-right: 12px solid #f00;
  margin-right: 3px;
  border-bottom: 1px dashed #f00;
}

/* Khu vực thông tin (Footer Sidebar) */
#info, .city-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #ad0c0c;
}

#info {
  height: 10%;
  font-size: 12px;
  line-height: 1.3;
  border-top: 1px solid #ddd;
  border-radius: 10px 10px 0 0;
  align-content: center;
}

.city-info {
  height: 16%;
  border: 1px solid #ad0c0c;
  border-radius: 0 0 10px 10px;
}

.info_38 {
  height: 66%;
  padding: 5px 0;
  border: 1px solid #f00;
  border-radius: 10px;
  overflow: hidden;
}

/* === 3. SIDEBAR HANDLE (Nút ẩn hiện) === */
#sidebarHandle {
  position: fixed;
  top: 50%;
  left: calc(var(--sidebar-w) + 8px);
  transform: translateY(-50%);
  width: 30px;
  height: 76px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease, background 0.2s ease;
}

#sidebarHandle:hover { background: #f00; }

#sidebarHandle::before {
  content: "❮❮";
  font-size: 18px;
  letter-spacing: -2px;
  color: #d4a94f;
  transition: color 0.2s;
}

#sidebarHandle:hover::before { color: #f3de1e; }

/* Trạng thái khi sidebar ẩn */
body.sidebar-hidden #sidebarHandle {
 /* left: 8px;*/
}

body.sidebar-hidden #sidebarHandle::before {
  content: "❯❯";
}

/* === 4. FILTER SYSTEM (Bộ lọc) === */
.btn-filter {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

.btn-filter:hover { background: #f6f6f6; }

.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.filter-row > label { font-weight: 600; margin-right: 6px; }
.filter-count { opacity: 0.75; font-size: 12px; }

/* Popup lọc nổi */
.filter-float {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: min(380px, 92vw);
  background: #fff;
  border: 6px solid #057111;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 2800;
  display: none;
}

.filter-float.show { display: block; }

.filter-float__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  border-radius: 4px; /* Bo nhẹ phần header */
  cursor: move;
  user-select: none;
}

.filter-float__header .spacer { flex: 1; }
.filter-float__close { border: 0; background: transparent; font-size: 16px; cursor: pointer; }
.filter-float__body { padding: 10px; font-size: 13px; }

.filter-float__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

/* Ẩn các nút cũ không dùng */
#openFilterBtn, #filterPanel { display: none !important; }

/* === 5. CUSTOM SCROLLBAR SIDEBAR === */
#sidebar::-webkit-scrollbar { width: 8px; }

#sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d1a241, #b98926);
  border-radius: 10px;
  border: 1px solid #f2f2f2;
}

#sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #efc85d, #cfa13a);
}
/* Lớp phủ mờ mặc định sẽ ẩn */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Độ tối vừa phải */
  backdrop-filter: blur(3px);     /* Làm mờ nền bản đồ */
  z-index: 2900;                  /* Phải thấp hơn Sidebar */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
/* === 6. ĐÁP ỨNG (RESPONSIVE) === */
/* Tablet */
@media (max-width: 1023.98px) {
  #sidebar { width: 260px; }
  #list-xa { height: 81%; }
  .leaflet-popup-content { min-width: 240px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  body { display: block; }
  
  /* 1. Thiết lập vị trí cố định cho tay nắm trên Mobile */
  #sidebarHandle {
    /* Tăng bề rộng thêm một chút để dễ chạm trúng hơn trên Mobile */
    width: 34px !important;
    z-index: 3001 !important;
    /* Đảm bảo không bị dính hiệu ứng hover của Desktop */
    -webkit-tap-highlight-color: transparent; 
  }
    /* Hiển thị lớp phủ khi Sidebar mở trên Mobile */
    #sidebar.show ~ .sidebar-overlay {
        opacity: 1;
        visibility: visible;
      }
  /* 2. Khi Sidebar có class .show (đang mở), đẩy tay nắm trượt theo sidebar */
  /* Sử dụng selector 'show' đồng bộ với mã JavaScript toggle của bạn */
  #sidebar.show ~ #sidebarHandle {
    left: calc(min(85vw, 250px) + 8px) !important;
  }

  /* 3. Đổi mũi tên khi mở trên Mobile */
  #sidebar.show ~ #sidebarHandle::before {
    content: "❮❮" !important;
  }
  
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 3000 !important; /* Đảm bảo cao hơn Overlay (2900) */
    will-change: transform; /* Báo trước cho trình duyệt để tối ưu */
  }
  #sidebar.show { transform: translateX(0); }

  #map { width: 100%; flex: 1 1 100%; }

  #toggleToolboxBtn { width: 40px; height: 40px; font-size: 22px; }
  .toolbox-content button { width: 160px; font-size: 15px; }
  .leaflet-popup-content { min-width: 200px; font-size: 14px; }
  
  #marquee { height: 36px; }
  #marquee .marquee-track { font-size: 13px; }
  #mqPrev, #mqNext { top: 2px; width: 28px; height: 28px; }

  .chart-modal__panel { width: 96vw; height: 84vh; border-radius: 10px; }
  .chart-modal__topbar h2 { font-size: 15px; }
}