/* skyland-map-3d.css — Giao diện 3D nổi khối + kính mờ đa tầng cho trang Bản đồ
   (đồng bộ phong cách form trang chủ: teal #005d53/#087f8c, bóng nhiều lớp, viền sáng inset).
   Áp dụng cho phần tử do map.js, map-markers.js, map-project-points.js,
   map-customers/section4-quick-edit.js sinh ra; dùng chung máy tính và điện thoại.

   Ràng buộc:
   - KHÔNG đặt transform/position trên marker, label (.skyland-desktop-float, .skyland-prj-pin,
     .skyland-prj-label, .maplibregl-marker, .maplibregl-popup): MapLibre/map-markers.js
     tự gán transform để neo vị trí theo bản đồ.
   - Nút icon (locate/layer/fab) vẽ icon bằng background-image => chỉ đổi background-color.
   - Label giá có hàng trăm phần tử => không dùng backdrop-filter để tránh giật khi kéo map. */

:root {
  --sk3d-ink: #005d53;
  --sk3d-teal: #087f8c;
  --sk3d-text: #102428;
  --sk3d-muted: #5c7176;
  --sk3d-glass: rgba(255, 255, 255, 0.78);
  --sk3d-glass-strong: rgba(255, 255, 255, 0.9);
  --sk3d-glass-border: rgba(255, 255, 255, 0.65);
  --sk3d-line: rgba(15, 43, 60, 0.08);
  --sk3d-blur: blur(18px) saturate(170%);
  --sk3d-shadow-1: 0 2px 6px rgba(15, 43, 60, 0.06), inset 0 1px 0 #ffffff;
  --sk3d-shadow-2: 0 10px 24px rgba(15, 43, 60, 0.1), 0 2px 6px rgba(15, 43, 60, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sk3d-shadow-3: 0 24px 56px rgba(0, 45, 40, 0.24), 0 6px 16px rgba(15, 43, 60, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --sk3d-btn: linear-gradient(180deg, #0f8f86 0%, #005d53 100%);
  --sk3d-btn-shadow: 0 8px 20px rgba(0, 93, 83, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ============================================================ */
/* 1. Popup nguồn (map.js) + popup dự án (map-project-points.js) */
/* ============================================================ */
html body .skyland-popup .maplibregl-popup-content,
html body .skyland-prj-popup .maplibregl-popup-content {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 248, 247, 0.82) 100%);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  border-radius: 20px;
  box-shadow: var(--sk3d-shadow-3);
}
html body .skyland-prj-popup .maplibregl-popup-content {
  padding: 12px 14px;
}
html body .skyland-popup .maplibregl-popup-tip,
html body .skyland-prj-popup .maplibregl-popup-tip {
  filter: drop-shadow(0 2px 2px rgba(15, 43, 60, 0.12));
}
html body .skyland-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
html body .skyland-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html body .skyland-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
html body .skyland-prj-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: rgba(255, 255, 255, 0.92);
}
html body .skyland-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html body .skyland-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html body .skyland-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
html body .skyland-prj-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: rgba(244, 250, 249, 0.9);
}
html body .skyland-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip,
html body .skyland-prj-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: rgba(255, 255, 255, 0.92);
}
html body .skyland-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip,
html body .skyland-prj-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: rgba(255, 255, 255, 0.92);
}
html body .skyland-popup .maplibregl-popup-close-button,
html body .skyland-prj-popup .maplibregl-popup-close-button {
  background: var(--sk3d-glass-strong);
  border: 1px solid var(--sk3d-line);
  border-radius: 50%;
  color: var(--sk3d-muted);
  box-shadow: var(--sk3d-shadow-1);
}

/* Tầng kính thứ 2: các ô thông tin trong popup / sheet nổi khối */
html body .skyland-v63-info-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 251, 0.88) 100%);
  border: 1px solid var(--sk3d-line);
  border-radius: 12px;
  box-shadow: var(--sk3d-shadow-1);
}
html body .skyland-v63-info-label {
  color: var(--sk3d-muted);
}
html body .skyland-v63-info-value {
  color: var(--sk3d-text);
}
html body .skyland-v63-actions button,
html body .skyland-v63-actions a {
  border-radius: 12px;
  box-shadow: var(--sk3d-shadow-2);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
html body .skyland-v63-actions button:hover,
html body .skyland-v63-actions a:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 30px rgba(0, 93, 83, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .skyland-v63-actions button:active,
html body .skyland-v63-actions a:active {
  filter: brightness(0.97);
  box-shadow: var(--sk3d-shadow-1);
}

/* Popup dự án */
html body .skyland-prj-pop-title {
  color: var(--sk3d-text);
  letter-spacing: -0.01em;
}
html body .skyland-prj-addr,
html body .skyland-prj-val {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 251, 0.86) 100%);
  border: 1px solid var(--sk3d-line);
  border-radius: 12px;
  box-shadow: var(--sk3d-shadow-1);
  padding: 8px 10px;
  margin-top: 8px;
}
html body .skyland-prj-val-group {
  border-radius: 10px;
}
html body .skyland-prj-val-badge {
  background: var(--sk3d-btn);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  box-shadow: 0 4px 10px rgba(0, 93, 83, 0.22);
}
html body .skyland-prj-pop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 11px;
  background: var(--sk3d-btn);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sk3d-btn-shadow);
  cursor: pointer;
}
html body .skyland-prj-pop-link:active {
  filter: brightness(0.95);
}

/* ============================================================ */
/* 2. Sheet nguồn trên điện thoại (map.js openMapSheet)          */
/* ============================================================ */
html body .skyland-map-sheet-backdrop {
  background: rgba(16, 24, 28, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html body.is-mobile-map .skyland-map-sheet-panel,
html body .skyland-map-sheet-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(242, 248, 247, 0.84) 100%);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  border-bottom: 0;
  box-shadow: 0 -18px 48px rgba(0, 45, 40, 0.22), 0 -2px 8px rgba(15, 43, 60, 0.06), inset 0 1px 0 #ffffff;
}
html body .skyland-map-sheet-handle {
  background: rgba(15, 43, 60, 0.22);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12);
}
html body .skyland-map-sheet-x {
  background: var(--sk3d-glass-strong);
  border: 1px solid var(--sk3d-line);
  box-shadow: var(--sk3d-shadow-1);
}

/* ============================================================ */
/* 3. Nhãn giá nguồn (map-markers.js) + nhãn/pin dự án           */
/* ============================================================ */
html body .skyland-label-box {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8f8 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 10px rgba(15, 43, 60, 0.22),
    0 1px 2px rgba(15, 43, 60, 0.18),
    inset 0 1px 0 #ffffff;
}
html body .skyland-desktop-float:hover .skyland-label-box {
  box-shadow:
    0 8px 18px rgba(0, 45, 40, 0.28),
    0 2px 4px rgba(15, 43, 60, 0.18),
    inset 0 1px 0 #ffffff;
}
html body .skyland-filter-label-highlight {
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.28), inset 0 1px 0 #ffffff !important;
}
html body .skyland-prj-label {
  background: linear-gradient(180deg, #ffffff 0%, #eef7f6 100%);
  border-radius: 9px;
  box-shadow:
    0 6px 14px rgba(0, 45, 40, 0.22),
    0 1px 2px rgba(15, 43, 60, 0.18),
    inset 0 1px 0 #ffffff;
}
html body .skyland-prj-pin {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
html body .skyland-prj-pin.is-on {
  filter: drop-shadow(0 0 6px #f59e0b) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
html body .skyland-map-nav-me {
  filter: drop-shadow(0 4px 6px rgba(0, 45, 40, 0.3));
}

/* ============================================================ */
/* 4. Khung điều khiển bản đồ (thanh tìm kiếm, nút, dock)        */
/* ============================================================ */
html body .map-search-box input,
html body #mapQuery {
  background-color: var(--sk3d-glass-strong);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  box-shadow: var(--sk3d-shadow-2);
}
html body #mapQuery:focus {
  border-color: rgba(8, 127, 140, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 122, 134, 0.14), var(--sk3d-shadow-2);
  outline: none;
}
html body .map-search > #mapSearchBtn {
  background: var(--sk3d-btn);
  border: 0;
  box-shadow: var(--sk3d-btn-shadow);
}
html body .map-search-hits,
html body .map-search-nav {
  background-color: var(--sk3d-glass-strong);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  box-shadow: var(--sk3d-shadow-3);
}
html body .map-count {
  background-color: var(--sk3d-glass);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border-radius: 999px;
  box-shadow: var(--sk3d-shadow-1);
}
html body .map-locate-btn,
html body .map-layer-toggle {
  background-color: var(--sk3d-glass-strong);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  box-shadow: var(--sk3d-shadow-2);
}
html body .map-locate-btn:active,
html body .map-layer-toggle:active {
  box-shadow: var(--sk3d-shadow-1);
}
html body .map-layer-menu {
  background-color: var(--sk3d-glass-strong);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  border-radius: 16px;
  box-shadow: var(--sk3d-shadow-3);
}
html body .action-dock {
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  box-shadow: var(--sk3d-shadow-3);
}
html body .action-dock .fab {
  box-shadow: var(--sk3d-shadow-2);
}
html body .action-dock .fab-add {
  box-shadow: var(--sk3d-btn-shadow);
}
html body .map-cust-source-back {
  background: var(--sk3d-glass-strong);
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border);
  border-radius: 12px;
  box-shadow: var(--sk3d-shadow-2);
}

/* ============================================================ */
/* 5. Sửa nhanh khách hàng (map-customers/section4-quick-edit.js) */
/* ============================================================ */
html body .cust-modal-backdrop {
  background: rgba(16, 24, 28, 0.36) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html body .cust-modal-dialog {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(242, 248, 247, 0.9) 100%) !important;
  -webkit-backdrop-filter: var(--sk3d-blur);
  backdrop-filter: var(--sk3d-blur);
  border: 1px solid var(--sk3d-glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--sk3d-shadow-3) !important;
}
html body .cust-modal-dialog input,
html body .cust-modal-dialog select,
html body .cust-modal-dialog textarea {
  border-radius: 11px !important;
  border-color: #d7dfe1 !important;
  background: #fff;
  box-shadow: 0 6px 14px rgba(16, 24, 32, 0.05), inset 0 1px 2px rgba(16, 36, 40, 0.03);
}
html body .cust-modal-dialog input:focus,
html body .cust-modal-dialog select:focus,
html body .cust-modal-dialog textarea:focus {
  border-color: var(--sk3d-teal) !important;
  box-shadow: 0 0 0 3px rgba(13, 122, 134, 0.12);
  outline: none;
}
html body #dealSoldSummaryBox {
  background: linear-gradient(180deg, #ffffff 0%, #f1f7f7 100%) !important;
  border-left-color: var(--sk3d-teal) !important;
  border-radius: 10px !important;
  box-shadow: var(--sk3d-shadow-1);
}
html body #dealSoldModalSubmitBtn {
  background: var(--sk3d-btn) !important;
  border-radius: 11px !important;
  box-shadow: var(--sk3d-btn-shadow);
}
html body #dealSoldModalCancelBtn {
  border-radius: 11px !important;
  box-shadow: var(--sk3d-shadow-1);
}

html body .cust-detail-grid,
html body .cust-history,
html body .cust-interaction-add {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 251, 0.88) 100%);
  border: 1px solid var(--sk3d-line);
  border-radius: 14px;
  box-shadow: var(--sk3d-shadow-2);
}
html body .cust-detail-grid select,
html body .cust-detail-grid textarea,
html body .cust-detail-grid input[type="text"] {
  border: 1px solid #d7dfe1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(16, 24, 32, 0.05), inset 0 1px 2px rgba(16, 36, 40, 0.03);
}
html body .cust-detail-grid select:focus,
html body .cust-detail-grid textarea:focus,
html body .cust-detail-grid input[type="text"]:focus {
  border-color: var(--sk3d-teal);
  box-shadow: 0 0 0 3px rgba(13, 122, 134, 0.12);
  outline: none;
}
html body .cust-detail-grid,
html body .cust-history,
html body .cust-interaction-add {
  padding: 10px 12px;
  margin-bottom: 10px;
}
html body .cust-detail-need {
  border-radius: 10px;
  box-shadow: var(--sk3d-shadow-1);
}
html body .cust-detail-save {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--sk3d-btn);
  color: #fff;
  font-weight: 750;
  box-shadow: var(--sk3d-btn-shadow);
  cursor: pointer;
}
html body .cust-detail-save:active,
html body .cust-interact-btn:active {
  filter: brightness(0.95);
}
html body .cust-interact-btn {
  border-radius: 11px;
  box-shadow: var(--sk3d-shadow-2);
}
html body .cust-interaction-history-item {
  border-radius: 10px;
  box-shadow: var(--sk3d-shadow-1);
}

/* ============================================================ */
/* Thiết bị yếu / không hỗ trợ blur                              */
/* ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body .skyland-popup .maplibregl-popup-content,
  html body .skyland-prj-popup .maplibregl-popup-content,
  html body .skyland-map-sheet-panel,
  html body .action-dock,
  html body .map-layer-menu,
  html body .map-search-hits,
  html body .cust-modal-dialog {
    background: #ffffff !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .skyland-v63-actions button,
  html body .skyland-v63-actions a {
    transition: none;
  }
}