/* Hanuman PropWorks — หมุดกลุ่ม + การคลี่ออกดูรายตัว (v4.47.0)
   ---------------------------------------------------------------------------
   ★ ไฟล์นี้ห้ามถือ "สีของสถานะ" — สีของวงโดนัทมาจากทะเบียนกลางผ่าน SVG
     ที่ map-cluster.js สร้าง (บทเรียน v4.25.0/v4.28.0: CSS ที่ถือสีสถานะเอง
     คือสำเนาที่จะเพี้ยนวันที่ทะเบียนเปลี่ยน) */

.hpw-mc { background: none; border: 0; }

.hpw-mc-svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
    cursor: pointer;
    transition: transform .12s ease;
}
.hpw-mc:hover .hpw-mc-svg,
.hpw-mc:focus-visible .hpw-mc-svg { transform: scale(1.08); }

/* เส้นที่ลากจากหมุดที่คลี่ออก กลับไปยังจุดจริงของมัน
   ★ เส้นนี้คือสิ่งที่ทำให้การคลี่ไม่กลายเป็นการโกหกเรื่องตำแหน่ง */
.hpw-mc-leg { pointer-events: none; }

.hpw-mc-tip {
    background: #0F172A;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.hpw-mc-tip::before { border-top-color: #0F172A; }

/* ★ หมุดที่ยืมพิกัดของโครงการมา — ต้องดูออกว่า "ประมาณ" ไม่ใช่ตำแหน่งจริง
   ใช้เส้นประรอบตัว ไม่ใช่สีอื่น เพราะสีเป็นของสถานะไปแล้ว */
.hpw-pin.is-approx .hpw-pin-svg { opacity: .93; }
.hpw-pin.is-approx::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 22px;
    height: 9px;
    margin-left: -11px;
    border: 1.6px dashed rgba(15, 23, 42, .65);
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
}

/* แถบบอกว่ากำลังดูหมุดระดับไหนอยู่ + ทางกลับ */
.hpw-map-lvbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 0;
    padding: 7px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
}
.hpw-map-lvbar b { font-weight: 700; }
.hpw-map-lvbar-now {
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 2px 10px;
}
.hpw-map-lvbar-back {
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: 3px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.hpw-map-lvbar-back:hover { background: rgba(255, 255, 255, .2); }

/* ชิป KPI ที่กดได้ — ต้องดูออกว่ากดได้ ตั้งแต่ก่อนเอาเมาส์ไปชี้
   (บนมือถือไม่มี hover ให้ค้นพบ) */
.hpw-map-stats.is-switchable .hpw-map-stat--lv {
    cursor: pointer;
    position: relative;
    transition: background .14s ease, transform .14s ease;
}
.hpw-map-stats.is-switchable .hpw-map-stat--lv:hover,
.hpw-map-stats.is-switchable .hpw-map-stat--lv:focus-visible {
    background: rgba(255, 255, 255, .16);
}
.hpw-map-stats.is-switchable .hpw-map-stat--lv:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}
.hpw-map-stats.is-switchable .hpw-map-stat--lv[aria-pressed="true"] {
    background: rgba(255, 255, 255, .22);
    box-shadow: inset 0 -3px 0 0 #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hpw-mc-svg,
    .hpw-map-stats.is-switchable .hpw-map-stat--lv { transition: none; }
}

/* รายการห้อง/ล็อคที่ซ่อนอยู่จนกว่าจะกดชิป
   ★ บังคับด้วย !important เพราะ .hpw-map-list เป็น flex item ที่มี flex:1
     ธีมบางตัวตั้ง display ทับ [hidden] ได้ แล้วรายการสองชุดจะซ้อนกัน */
.hpw-map-list[hidden] { display: none !important; }

/* บรรทัดบอกว่าหมุดนี้ใช้พิกัดของโครงการ ไม่ใช่ของห้องเอง */
.hpw-popup-approx {
    margin: 0 0 6px;
    padding: 4px 7px;
    border-radius: 6px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    color: #9A3412;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

/* ============================================================
   ★★★ v4.47.0 — ยุบแผงรายการเพื่อคืนพื้นที่ให้แผนที่
   ------------------------------------------------------------
   ผู้ใช้ขอว่า "ตอนที่กด (ชิป) ให้ยุบแผงด้านข้างซ้ายได้ไหม จะได้เห็นพื้นที่
   เต็มแผนที่เลย พอไม่กรองแผงด้านข้างค่อยกลับมาใหม่"

   ★ ยุบเหลือ "สันบาง" 34px ไม่ใช่ยุบหายไปเลย
     แผงที่หายไปทั้งใบโดยไม่เหลืออะไรให้กด คือทางตัน — ผู้ใช้ที่ไม่ทันสังเกต
     ว่ามันหายตอนไหนจะหาทางเรียกกลับไม่เจอ · สันบางกินพื้นที่ 34 จาก 320px
     (แผนที่ได้คืน 89%) แล้วยังบอกได้ด้วยว่า "ของที่ซ่อนอยู่คืออะไร กี่รายการ"
     ★ กติกาเดียวกับกล่องคำอธิบายสัญลักษณ์ v4.27.1: พับได้ แต่ต้องเห็นว่าพับอยู่
============================================================ */
.hpw-map-body { transition: grid-template-columns .22s ease, grid-template-rows .22s ease; }

.hpw-map-wrapper.is-listcollapsed .hpw-map-body { grid-template-columns: 34px 1fr; }
.hpw-map-wrapper.is-listcollapsed .hpw-map-sidebar-title,
.hpw-map-wrapper.is-listcollapsed .hpw-map-list,
.hpw-map-wrapper.is-listcollapsed .hpw-map-unit-legend,
.hpw-map-wrapper.is-listcollapsed .hpw-map-pin-notice { display: none !important; }

/* สันบางที่เหลืออยู่ — เป็นปุ่มทั้งแท่ง กดตรงไหนก็เปิดกลับ */
.hpw-map-rail {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 10px 0;
    background: linear-gradient(180deg, #ffffff, #f5fbf8);
    color: #0F5132;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-direction: column;
}
.hpw-map-wrapper.is-listcollapsed .hpw-map-rail { display: flex; }
.hpw-map-rail:hover { background: #eaf6f0; }
.hpw-map-rail-ic { font-size: 14px; line-height: 1; }
.hpw-map-rail-tx {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(100% - 30px);
}

/* ปุ่มพับ อยู่ในหัวแผง — ทางไปกับทางกลับอยู่คนละที่ไม่ได้ แต่ทั้งคู่ต้องมองเห็น */
.hpw-map-listtoggle {
    border: 1px solid #cfe4d9;
    background: #fff;
    color: #0F5132;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.hpw-map-listtoggle:hover { background: #eaf6f0; }

@media (max-width: 860px) {
    /* มือถือ: แผงอยู่ด้านบน ยุบแล้วได้ความสูงคืนให้แผนที่ 200px */
    .hpw-map-wrapper.is-listcollapsed .hpw-map-body { grid-template-columns: 1fr; grid-template-rows: 40px 1fr; }
    .hpw-map-wrapper.is-listcollapsed .hpw-map-sidebar { height: 40px; }
    .hpw-map-wrapper.is-listcollapsed .hpw-map-rail { flex-direction: row; padding: 0 12px; justify-content: center; }
    .hpw-map-wrapper.is-listcollapsed .hpw-map-rail-tx { writing-mode: horizontal-tb; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hpw-map-body { transition: none; }
}

/* บรรทัดในรายการ: หมุดของห้องนี้ใช้พิกัดของโครงการ */
.hpw-map-item-approx {
    margin: 3px 0 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #9A3412;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 5px;
    padding: 2px 6px;
    display: inline-block;
    line-height: 1.4;
}