/* ---------------------------------------------------------------------------
   Bố cục di động cho bản đồ Cây Di sản.
   Học theo shell bản đồ của WebGIS sự cố môi trường (css/mobile.css):
   bản đồ chiếm toàn màn hình ngay khi mở trang, thanh trên nổi kiểu kính mờ,
   thanh dock dưới. Bộ lọc / bản đồ nền / lớp / chú giải / thống kê / ghi chú
   không hiện sẵn: chúng nằm trong một popup, mở bằng nút menu trái (ra danh
   sách chức năng) hoặc bằng nút tắt trên thanh dock, mỗi lần một bảng.

   Nguyên tắc xếp lớp (không để đối tượng đè lên nhau):
     0     bản đồ
     600   điều khiển Leaflet (đẩy xuống dưới thanh trên và sang phải)
     1100  nền mờ của ngăn kéo (chỉ phủ bản đồ)
     1150  bảng chi tiết cây (ẩn khi mở ngăn kéo)
     1200  thanh trên
     1300  popup chức năng
     1400  thanh dock dưới
     2000  lightbox ảnh
--------------------------------------------------------------------------- */

.nav-toggle,
.sidebar-mobile-head,
.sheet-menu,
.mobile-dock,
.nav-backdrop { display: none; }

.admin-nav .short-label { display: none; }

@media (max-width: 900px) {
  :root {
    --m-top: env(safe-area-inset-top, 0px);
    --m-bottom: env(safe-area-inset-bottom, 0px);
    --m-edge: 8px;
    --m-topbar-h: 58px;
    --m-dock-h: 62px;
    /* Mốc mép dưới thanh trên và mép trên thanh dock: mọi lớp nổi bám theo. */
    --m-top-edge: calc(var(--m-top) + var(--m-edge) + var(--m-topbar-h));
    --m-bottom-edge: calc(var(--m-bottom) + var(--m-edge) + var(--m-dock-h));
    --m-glass: rgba(255, 255, 255, .93);
    /* Chiều cao hàng nút Leaflet (phóng to/thu nhỏ, hộp lớp) cộng lề: bảng chi
       tiết phải dừng dưới mốc này, kể cả khi màn hình rất thấp. */
    --m-ctl-clear: 100px;
  }

  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ------------------------------------------------------------- thanh trên */
  .topbar {
    position: fixed;
    top: calc(var(--m-top) + var(--m-edge));
    left: var(--m-edge);
    right: var(--m-edge);
    height: var(--m-topbar-h);
    padding: 0 10px;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 18px;
    background: var(--m-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(9, 32, 20, .14);
    z-index: 1200;
  }

  .topbar .logo { height: 34px; width: 34px; flex: none; }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .brand small { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
  }

  .nav-toggle .ico { width: 22px; height: 22px; }

  .admin-nav { flex: none; }
  .admin-nav .btn { padding: 8px 10px; font-size: 13px; }
  .admin-nav .full-label { display: none; }
  .admin-nav .short-label { display: inline; }

  /* ----------------------------------------------------------------- bản đồ */
  .layout {
    display: block;
    height: auto;
  }

  .map {
    position: fixed;
    inset: 0;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    z-index: 0;
  }

  /* Điều khiển Leaflet đẩy xuống dưới thanh trên và lên trên thanh dock.
     Giữ nguyên nút phóng to/thu nhỏ bên trái và hộp lớp bản đồ bên phải:
     dồn cả hai về một phía là chúng chồng lên nhau. */
  .leaflet-top { top: calc(var(--m-top-edge) + var(--m-edge)) !important; }
  .leaflet-bottom { bottom: calc(var(--m-bottom-edge) + var(--m-edge)) !important; }
  .leaflet-control-attribution { display: none !important; }

  /* Popup chức năng có thể cao gần hết màn hình, nên khi mở thì tắt hẳn lớp
     điều khiển Leaflet: không còn nút nào nằm dưới popup. */
  .leaflet-control-container {
    transition: opacity .2s ease;
  }

  body.nav-open .leaflet-control-container {
    opacity: 0;
    pointer-events: none;
  }

  /* ------------------------------------------- popup chức năng (menu trái) */
  /* Bản đồ luôn là thứ nhìn thấy đầu tiên. Mọi bảng chức năng nằm im trong
     popup này, chỉ mở khi bấm nút menu trái hoặc một nút trên thanh dock,
     và mỗi lần chỉ hiện đúng một bảng nên không có gì chồng lên nhau. */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(9, 32, 20, .38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    /* Chỉ làm mờ bản đồ; thanh trên và thanh dock vẫn sáng rõ và bấm được. */
    z-index: 1100;
  }

  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

  .sidebar {
    position: fixed;
    top: auto;
    bottom: calc(var(--m-bottom-edge) + var(--m-edge));
    left: var(--m-edge);
    right: auto;
    width: min(480px, calc(100vw - var(--m-edge) * 2));
    height: auto;
    max-height: calc(100dvh - var(--m-top-edge) - var(--m-bottom-edge) - var(--m-edge) * 2);
    padding: 0 12px 14px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 22px;
    background: var(--m-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -8px 30px rgba(9, 32, 20, .26);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Đóng: trượt hẳn xuống dưới thanh dock, không chiếm chỗ nào trên bản đồ. */
    transform: translateY(calc(100% + var(--m-bottom-edge) + var(--m-edge) * 2));
    visibility: hidden;
    transition: transform .3s cubic-bezier(.22, .9, .32, 1), visibility .3s;
    z-index: 1300;
  }

  body.nav-open .sidebar {
    transform: none;
    visibility: visible;
  }

  .sidebar-mobile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    margin: 0 -12px 10px;
    padding: 14px 12px 10px;
    background: var(--m-glass);
    border-bottom: 1px solid var(--border);
    z-index: 2;
  }

  /* Vạch kéo giả cho đúng dáng popup kéo lên từ mép dưới. */
  .sidebar-mobile-head::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 3px;
    background: rgba(9, 32, 20, .18);
  }

  .sidebar-mobile-head strong { flex: 1 1 auto; font-size: 15px; line-height: 1.25; }

  .sidebar-mobile-head .nav-back,
  .sidebar-mobile-head .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border-radius: 12px;
  }

  .sidebar-mobile-head .nav-back[hidden] { display: none; }

  /* ------------------------------------------------- danh sách chức năng */
  .sheet-menu {
    display: grid;
    gap: 8px;
    padding-bottom: 2px;
  }

  .sheet-menu[hidden] { display: none; }

  .sheet-menu button {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .sheet-menu button:active { background: #f0faf4; transform: scale(.99); }
  .sheet-menu button .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--green); }
  .sheet-menu button span { flex: 1 1 auto; min-width: 0; font-weight: 700; line-height: 1.3; }

  .sheet-menu button small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.35;
  }

  /* -------------------------------------------- mỗi lần chỉ mở một bảng */
  .sidebar .card { display: none; }

  .sidebar .card.is-open {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .sidebar .card.is-open > h3 { display: none; }

  .row { grid-template-columns: 1fr 1fr; }

  /* ------------------------------------------------------- thanh dock dưới */
  .mobile-dock {
    display: flex;
    position: fixed;
    left: max(var(--m-edge), env(safe-area-inset-left, 0px));
    right: max(var(--m-edge), env(safe-area-inset-right, 0px));
    bottom: calc(var(--m-bottom) + var(--m-edge));
    min-height: var(--m-dock-h);
    gap: 2px;
    padding: 5px 6px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    background: var(--m-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(9, 32, 20, .16);
    z-index: 1400;
  }

  .mobile-dock button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
  }

  .mobile-dock button .ico { width: 21px; height: 21px; flex: none; }

  .mobile-dock button b {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-dock button:active { transform: scale(.95); background: rgba(7, 128, 66, .08); }
  .mobile-dock button.is-active { background: rgba(7, 128, 66, .12); color: var(--green2); }

  /* ------------------------------------------------------- bảng chi tiết cây */
  .detail-panel {
    position: fixed;
    top: auto !important;
    left: var(--m-edge) !important;
    right: var(--m-edge) !important;
    bottom: calc(var(--m-bottom-edge) + var(--m-edge)) !important;
    width: auto !important;
    max-height: min(62dvh, calc(100dvh - var(--m-top-edge) - var(--m-bottom-edge) - var(--m-ctl-clear))) !important;
    padding: 12px;
    border-radius: 20px;
    background: var(--m-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -6px 24px rgba(9, 32, 20, .2);
    overscroll-behavior: contain;
    z-index: 1150;
  }

  /* Mở popup chức năng thì tạm ẩn bảng chi tiết: hai lớp nổi không chồng
     nhau, đóng popup là bảng chi tiết hiện lại nguyên trạng. */
  body.nav-open .detail-panel { display: none !important; }

  .detail-panel .panel-head h2 { font-size: 16px; }
  .detail-panel .cover { max-height: 170px; }
  .detail-panel .kv { grid-template-columns: 112px 1fr; font-size: 13px; }
  .gallery figure img { height: 100px; }

  /* ------------------------------------------------------------------ popup */
  .leaflet-popup { max-width: calc(100vw - 24px) !important; }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - var(--m-top-edge) - var(--m-bottom-edge) - 60px) !important;
    overflow: hidden;
    border-radius: 14px;
  }

  .leaflet-popup-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 52px) !important;
    max-height: calc(100dvh - var(--m-top-edge) - var(--m-bottom-edge) - 92px) !important;
    margin: 12px !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .leaflet-popup-close-button {
    width: 32px !important;
    height: 32px !important;
    font-size: 21px !important;
    line-height: 28px !important;
  }

  .admin-boundary-popup table { font-size: 12px; }

  /* Lightbox phải nằm trên cả dock lẫn ngăn kéo. */
  .lightbox { z-index: 2000; padding: 12px; }
  .lightbox img { max-height: 70dvh; }
  .lightbox .lightbox-nav { padding: 6px 12px; font-size: 20px; }
}

@media (max-width: 380px) {
  :root { --m-topbar-h: 54px; --m-dock-h: 58px; }
  .mobile-dock button b { font-size: 9.5px; }
  .admin-nav .btn { padding: 8px; }
  .row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root { --m-topbar-h: 48px; --m-dock-h: 52px; }
  .brand { -webkit-line-clamp: 1; }

  /* Nằm ngang thì màn hình lùn và rộng: bảng chi tiết thu về một cột bên trái
     cho đỡ trống trải, phần bản đồ bên phải vẫn nhìn được. */
  .detail-panel {
    right: auto !important;
    width: min(460px, calc(100vw - var(--m-edge) * 2)) !important;
    max-height: min(56dvh, calc(100dvh - var(--m-top-edge) - var(--m-bottom-edge) - var(--m-ctl-clear))) !important;
  }
}