/* ================= Ấp legend (floating on map) & panel section =================
   Bổ sung cho app.css gốc — không sửa app.css để giữ nguyên bản gốc. */

.ap-legend{
  position:absolute; top:16px; right:16px; z-index:14;
  width:190px; max-width:44vw;
  background:var(--card); border-radius:16px; box-shadow:var(--shadow-m);
  border:1px solid var(--line-2); padding:10px 10px 8px; max-height:min(58vh,420px);
  display:flex; flex-direction:column;
}
.ap-legend-head{
  font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink-faint); padding:2px 4px 8px;
}
.ap-legend-list{ overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.ap-legend-list::-webkit-scrollbar{ width:5px; }
.ap-legend-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.ap-row{
  display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:9px; cursor:pointer;
}
.ap-row:hover{ background:var(--paper-2); }
.ap-row.active{ background:var(--paper-2); box-shadow:inset 2px 0 0 var(--red); }
.ap-dot{ width:11px; height:11px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.15); }
.ap-name{ font-size:12.5px; font-weight:600; color:var(--ink); flex:1; line-height:1.25; }
.ap-row .ap-area{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); flex:none; }

@media (max-width:760px){
  .ap-legend{ display:none; } /* trên mobile dùng danh sách trong panel thay thế */
}

/* ---- Khối "Ranh giới 14 ấp" trong sidebar panel ---- */
.ap-panel-sec{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 17px; }
.ap-panel-head{
  font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px;
}
.ap-panel-list{ display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; max-height:220px; overflow-y:auto; }
.ap-panel-list .ap-row{ padding:5px 4px; }
.ap-panel-list .ap-name{ font-size:12px; }
.ap-panel-list .ap-area{ display:none; }

/* ---- Chế độ xem nền bản đồ (sáng / đường phố / vệ tinh) ---- */
.style-switch{
  position:absolute; right:16px; bottom:88px; z-index:14;
  display:flex; flex-direction:column; gap:5px;
  background:var(--card); border-radius:13px; padding:5px; box-shadow:var(--shadow-m);
  border:1px solid var(--line-2);
}
.style-switch button{
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--ink-soft);
  padding:7px 12px; border-radius:9px; white-space:nowrap; text-align:left;
}
.style-switch button:hover{ background:var(--paper-2); color:var(--ink); }
.style-switch button.on{ background:var(--ink); color:#fff; }

@media (max-width:760px){
  .style-switch{ bottom:78px; right:12px; }
  .style-switch button{ padding:6px 10px; font-size:11px; }
}