/* ============================================
           ✅ ✅ ✅ ล็อคการซูมหน้าเพจบนมือถือ (ฉบับสมบูรณ์) ✅ ✅ ✅
           ============================================ */

        /* ✅ ล็อคทั้งหน้าเว็บ - ห้ามซูม */
        html, body {
            touch-action: manipulation !important;
            overscroll-behavior: none !important;
            overflow: hidden !important;
            position: fixed !important;
            -webkit-text-size-adjust: 100% !important;
            -ms-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            height: 100% !important;
            width: 100% !important;
            top: 0 !important;
            left: 0 !important;
        }

        /* ✅ ป้องกันการเลือกข้อความ (ที่ทำให้ซูมโดยไม่ได้ตั้งใจ) */
        * {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        /* ✅ อนุญาตให้เลือกข้อความในช่องกรอกได้ */
        input, textarea, select, [contenteditable="true"] {
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
            touch-action: auto !important;
        }

        /* ✅ ป้องกันการซูมด้วย double-tap บนปุ่ม */
        button, .map-btn, .zoom-btn, [onclick], a, .table-tab {
            touch-action: manipulation !important;
            cursor: pointer;
        }

        /* ✅ สำหรับแผนที่ - อนุญาตให้ซูมได้ปกติ (สำคัญ!) */
        #map, 
        .leaflet-container, 
        .leaflet-pane, 
        .leaflet-tile-pane, 
        .leaflet-marker-pane, 
        .leaflet-shadow-pane, 
        .leaflet-overlay-pane {
            touch-action: none !important;  /* ✅ ให้ Leaflet จัดการซูมเอง */
            overscroll-behavior: contain !important;
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        /* ✅ สำหรับ Panel - ป้องกันซูมแต่เลื่อนได้ */
        .side-panel, 
        .data-table-panel, 
        .image-preview-container,
        .data-container {
            touch-action: pan-y !important;  /* ✅ อนุญาตให้เลื่อนขึ้นลงได้ */
            overscroll-behavior: contain !important;
        }

        /* ✅ สำหรับ Modal - ป้องกันซูม */
        #fullscreen-image-modal, 
        #confirm-delete-modal, 
        #edit-mode-modal, 
        .fixed {
            touch-action: none !important;
            overscroll-behavior: contain !important;
        }

        /* ✅ ป้องกันการซูมบน iOS เมื่อหมุนหน้าจอ */
        @media (max-width: 768px) {
            html, body {
                position: fixed !important;
                width: 100% !important;
                height: 100% !important;
                overflow: hidden !important;
            }
        }

        body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; }
        #map { height: 100vh; width: 100vw; z-index: 0; }
        
        /* ✅ เมื่อเปิดโหมดเพิ่มจุดด้วยเมาส์ → เปลี่ยน cursor */
        .cursor-crosshair-add {
            cursor: crosshair !important;
        }

        /* ✅ ป้องกันการเลือกข้อความเมื่อคลิกเร็ว */
        .leaflet-container {
            user-select: none;
            -webkit-user-select: none;
        }

        .table-tab {
            transition: all 0.2s ease-in-out;
        }
        .table-tab.active {
            animation: pulse-red 0.3s ease-out;
        }
        @keyframes pulse-red {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* ✅ สไตล์สำหรับแท็บที่แอคทีฟ */
        .table-tab.active {
            background: white !important;
            color: #667eea !important;  /* สีเดิมของแท็บเนื้อหา */
            font-weight: 700 !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* ✅ สไตล์เฉพาะสำหรับปุ่มรหัสซ้ำเมื่อ active (อาจจะเป็นสีแดงเพื่อให้เด่น) */
        #duplicate-filter-tab.active {
            background: white !important;
            color: #dc2626 !important;  /* 🔴 สีแดงสำหรับโหมดรหัสซ้ำ */
            border: 2px solid #dc2626 !important; /* เพิ่มขอบสีแดงให้เห็นชัด */
        }

        /* ✅ ทับกฎ readonly สำหรับฟิลด์เจ้าของ - พื้นดำ ตัวหนังสือขาว */
        .form-input.owner-field[readonly] {
            background-color: #1f2937 !important;  /* ✅ สีเทาเข้มเกือบดำ */
            color: #ffffff !important;              /* ✅ ข้อความสีขาว */
            cursor: not-allowed !important;
            opacity: 1 !important;                  /* ✅ อย่าให้จาง */
        }

        /* ✅ Placeholder สีเทาอ่อน (ถ้ามี) */
        .form-input.owner-field[readonly]::placeholder {
            color: #9ca3af !important;
        }

        /* ข้อ 1: ปรับแต่งเป้าเล็งใหม่ (ใหญ่ขึ้น 20%, หนาขึ้น, สูงขึ้น 15%) */
        .crosshair {
            position: absolute;
            top: 35%; /* สูงขึ้นจากกึ่งกลาง (50% - 15%) */
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 1000;
        }
        .crosshair-center {
            width: 6px; height: 6px;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
        }
        .crosshair-circle {
            width: 60px; height: 60px; /* ใหญ่ขึ้นจาก 50px */
            border: 3px solid rgba(255, 255, 255, 0.9); /* เส้นหนาขึ้น */
            border-radius: 50%;
            position: relative;
        }
        .crosshair-line { position: absolute; background-color: rgba(255, 255, 255, 0.9); }
        .line-v { width: 3px; height: 18px; left: 50%; transform: translateX(-50%); }
        .line-h { height: 3px; width: 18px; top: 50%; transform: translateY(-50%); }
        .v-top { top: -20px; } .v-bottom { bottom: -20px; }
        .h-left { left: -20px; } .h-right { right: -20px; }

        /* วงกลม - ยังไม่สำรวจ */
        .circle-round {
          border-radius: 50% !important;
        }

        /* สี่เหลี่ยม - ถ่ายรูปแล้ว */
        .circle-square {
          border-radius: 0 !important;
        }

        /* รูปหมุด - ตรวจสอบแล้ว (ไม่ต้องใช้คลาสพิเศษ เพราะใช้ SVG แทน) */
        .pin-marker {
            /* ไม่ต้องกำหนดสไตล์พิเศษ เพราะใช้ SVG */
        }

        /* ✅ โหมดเพิ่มจุดด้วยเมาส์ (แสดงเฉพาะ Desktop) */
        /* ✅ เพิ่มใน <style> */
        #map.cursor-crosshair-add,
        #map.cursor-crosshair-add .leaflet-container,
        #map.cursor-crosshair-add .leaflet-pane,
        #map.cursor-crosshair-add .leaflet-interactive,
        #map.cursor-crosshair-add .leaflet-path,
        #map.cursor-crosshair-add .leaflet-poly,
        #map.cursor-crosshair-add .leaflet-marker-pane {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><line x1="16" y1="4" x2="16" y2="28" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="4" y1="16" x2="28" y2="16" stroke="white" stroke-width="3" stroke-linecap="round"/></svg>') 16 16, crosshair !important;
        }

        /* ✅ บังคับปิด pointer-events */
        #map.cursor-crosshair-add .leaflet-interactive,
        #map.cursor-crosshair-add .leaflet-path,
        #map.cursor-crosshair-add .leaflet-poly {
            pointer-events: none !important;
        }

        /* ✅ เพิ่มในส่วนของ <style> */
        .duplicate-code-row {
            background-color: #fecaca !important;  /* พื้นสีแดงอ่อน */
            animation: pulse-red 2s infinite;
        }

        @keyframes pulse-red {
            0%, 100% { background-color: #fecaca; }
            50% { background-color: #fca5a5; }
        }

        .duplicate-code-badge {
            background-color: #dc2626;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: bold;
            margin-left: 4px;
        }

        /* ✅ ปุ่มโหมดเพิ่มจุดด้วยเมาส์ (ซ่อนบนมือถือ) */
        #btn-mouse-add-mode {
            display: none;
        }

        @media (min-width: 769px) {
            #btn-mouse-add-mode {
                display: flex !important;
            }
        }

        #btn-mouse-add-mode.active-tool {
            background-color: #2563eb !important;
            color: white !important;
            border: 2px solid white;
        }

        /* ✅ แอนิเมชันสำหรับ PWA Install Prompt */
        @keyframes pulse {
          0%, 100% { transform: translateX(-50%) scale(1); }
          50% { transform: translateX(-50%) scale(1.02); }
        }
        .animate-pulse {
          animation: pulse 2s infinite ease-in-out;
        }

        @keyframes bounce {
          0%, 100% { transform: translateX(-50%) translateY(0); }
          50% { transform: translateX(-50%) translateY(-10px); }
        }
        .animate-bounce {
          animation: bounce 1.5s infinite ease-in-out;
        }

        @keyframes fade-in {
          from { opacity: 0; transform: translate(-50%, 20px); }
          to { opacity: 1; transform: translate(-50%, 0); }
        }
        @keyframes fade-out {
          from { opacity: 1; transform: translate(-50%, 0); }
          to { opacity: 0; transform: translate(-50%, 20px); }
        }
        .animate-fade-in { animation: fade-in 0.3s ease-out; }
        .animate-fade-out { animation: fade-out 0.3s ease-in; }

        /* ✅ เพิ่ม CSS */
        #pwa-install-container {
          display: none;
          position: fixed;
          bottom: 100px;
          left: 0;
          right: 0;
          justify-content: center;  /* ✅ จัดกึ่งกลางด้วย Flexbox */
          z-index: 9999;
          pointer-events: none;  /* ✅ ไม่บล็อกการคลิกแผนที่ */
        }
        #pwa-install-container > button {
          pointer-events: auto;  /* ✅ เปิดการคลิกที่ปุ่ม */
          max-width: 95vw;  /* ✅ จำกัดความกว้างปุ่มแทน container */
        }

        /* ✅ ซ่อนปุ่มนำเข้าบนมือถือ */
        @media (max-width: 768px) {
            #import-tab {
                display: none !important;
            }
        }

        /* ✅ สำหรับมือถือ */
        @media (max-width: 768px) {
          #pwa-install-container {
            /* ❌ ลบบรรทัดนี้ออก: width: 95% !important; */
            bottom: 80px !important;  /* ✅ ปรับระยะล่างอย่างเดียว */
          }
          #pwa-install-btn {
            max-width: 90vw !important;  /* ✅ ใช้ max-width แทน width */
            padding-left: 1rem !important;
            padding-right: 1rem !important;
          }
        }

        /* สไตล์พิเศษสำหรับสีพื้นหลังช่องกรอกตามเงื่อนไข */
        .bg-custom-green { 
            background-color: rgba(187, 247, 208, 0.9) !important; 
        }
        .bg-custom-pink { 
            background-color: rgba(255, 249, 196, 0.9) !important; 
        }
        .bg-custom-check-status { 
            background-color: rgba(187, 247, 208, 0.9) !important; 
            font-weight: bold;
        }

        /* ✅ สไตล์สำหรับฟิลด์ที่คำนวณอัตโนมัติ (อ่านอย่างเดียว) */
        .form-input[computed="true"],
        .form-input[disabled="true"] {
            background-color: rgba(209, 213, 219, 0.5) !important;
            cursor: not-allowed !important;
            color: #6b7280 !important;
        }

        /* สไตล์สำหรับฟิลด์ที่อ่านอย่างเดียว */
        .form-input[readonly] {
            background-color: rgba(187, 247, 208, 0.9) !important;
            cursor: not-allowed !important;
            opacity: 0.85;
            border-color: #9ca3af !important;
            height: 42px !important;  /* ✅ เพิ่ม: บังคับความสูง */
            box-sizing: border-box !important;
        }
        .form-input[readonly]:hover {
            border-color: #6b7280 !important;
        }

        /* สีเขียวสำหรับกลุ่มแรก */
        .form-input.green-bg {
            background-color: rgba(187, 247, 208, 0.9) !important;
        }

        /* สีชมพูอ่อนสำหรับกลุ่มสอง */
        .form-input.pink-bg {
            background-color: rgba(255, 204, 204, 0.3) !important; /* ชมพูอ่อน */
        }

        /* สีเขียวสำหรับช่อง "สถานะการตรวจสอบ" */
        .form-input.check-status {
            background-color: rgba(187, 247, 208, 0.9) !important;
            font-weight: bold;
        }

        /* แก้ไขสีพื้นหลังสถานะ "ถ่ายรูปแล้ว" */
        .status-ถ่ายรูปแล้ว { 
            background: rgba(187, 247, 208, 0.9) !important; 
            color: #065f46; 
        }

        /* ============================================
        ปุ่มแอคชั่นในหน้าต่างแสดงรูปภาพ
        ============================================ */
        .image-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ============================================
        Floating Modal สำหรับ Gemini
        ============================================ */
        #gemini-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 800px;
            height: 80vh;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            z-index: 5000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        #gemini-modal iframe {
            flex: 1;
            border: none;
            width: 100%;
            height: 100%;
        }

        #gemini-modal-header {
            padding: 12px 16px;
            background: linear-gradient(135deg, #4285f4, #9b72cb);
            color: white;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        #gemini-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 4999;
            display: none;
        }

        /* ✅ ✅ ✅ แก้ปุ่ม W ล้นในมือถือแนวตั้ง ✅ ✅ ✅ */
        @media (max-width: 768px) and (orientation: portrait) {
            /* ปรับความสูงปุ่ม W ให้เท่ากับช่อง */
            .owner-search-btn {
                height: 34px !important;  /* ✅ เท่ากับ .form-input ในมือถือ */
                width: 34px !important;
                font-size: 14px !important;
                padding: 0 !important;
                line-height: 1 !important;
            }
            
            /* ปรับ padding-right ของ input ให้พอดีกับปุ่ม */
            .input-owner-wrapper {
                padding-right: 1rem !important;
            }
        }

        /* ✅ รองรับทุก orientation */
        @media (max-width: 768px) {
            .owner-search-btn {
                height: 34px !important;
                width: 34px !important;
                flex-shrink: 0 !important;  /* ✅ ป้องกันการบีบอัด */
            }
        }

        /* Responsive สำหรับมือถือ */
        @media (max-width: 768px) {
            #gemini-modal {
                width: 95%;
                height: 85vh;
            }
        }

        /* ✅ สไตล์สำหรับป้ายชื่อแปลง (parcel_cod) */
        .parcel-label {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
            pointer-events: none !important;  /* ✅ ไม่บล็อกการคลิก */
        }

        .parcel-label-text {
            display: block;
            text-align: center;
            line-height: 1.3;
            color: #dc2626;  /* 🔴 แดงเข้ม */
            
            /* ✅ ขอบขาวรอบตัวอักษร */
            text-shadow: 
                -1px -1px 0 #fff, 1px -1px 0 #fff,
                -1px 1px 0 #fff, 1px 1px 0 #fff,
                -2px 0 0 #fff, 2px 0 0 #fff,
                0 -2px 0 #fff, 0 2px 0 #fff;
            
            font-size: 12px;
            font-weight: bold;
            font-family: 'Sarabun', 'Tahoma', sans-serif;
            transform: translateY(-5px);  /* ✅ เลื่อนขึ้นเล็กน้อย */
            white-space: nowrap;
        }

        /* ตั้งค่าเริ่มต้นให้ Label ซ่อนไว้ก่อน (ถ้าต้องการ) */
        .parcel-label {
            display: none; 
        }

        /* ============================================
           POPUP STYLES - ชุดเดียวจบ (ทับ Leaflet ทั้งหมด)
           ============================================ */

        /* ✅ Popup Wrapper - ควบคุมมุมมนและความกว้าง */
        .mobile-popup .leaflet-popup-content-wrapper,
        .mobile-popup-raw .leaflet-popup-content-wrapper {
            padding: 0 !important;
            margin: 4px !important;
            border-radius: 6px !important;  /* ✅ มุมมน */
            box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
            background: #fff !important;
            overflow: hidden !important;
        }

        /* ✅ Popup Content - ควบคุมความกว้างจริง */
        .mobile-popup .leaflet-popup-content,
        .mobile-popup-raw .leaflet-popup-content {
            margin: 0 !important;
            width: auto !important;
            min-width: 150px !important;
            max-width: 480px !important;
            text-align: center !important;
            line-height: 1.5 !important;
            font-family: 'Sarabun', 'Tahoma', sans-serif !important;
        }
        .popup-simple {
            padding: 8px 12px !important;   /* ✅ ลด padding ให้กะทัดรัด */
            background: #fff;
            font-family: 'Sarabun', 'Tahoma', sans-serif;
            text-align: center !important;  /* ✅ กึ่งกลางทั้งบล็อก */
            min-width: 120px;
            max-width: 240px;
            margin: 0 auto;  /* ✅ จัดกึ่งกลางใน popup */
        }
        .popup-simple .popup-header {
            display: block;            /* ✅ เปลี่ยนจาก flex เป็น block */
            cursor: pointer;
            padding-bottom: 4px;
            border-bottom: 1px solid #eee;
            text-align: center !important;  /* ✅ กึ่งกลาง */
        }
        .popup-simple .parcel-cod {
            font-weight: bold;
            color: black;
            font-size: 13px;
            display: block;            /* ✅ ให้เต็มบรรทัด */
            text-align: center !important;
            white-space: nowrap;       /* ✅ รหัสแปลงไม่ตัดบรรทัด */
            overflow: hidden;
            text-overflow: ellipsis;   /* ✅ ถ้ายาวเกิน → แสดง ... */
        }
        .popup-simple .popup-owner {
            font-size: 13px;
            color: #3b82f6;
            padding-top: 4px;
            text-align: center !important;  /* ✅ กึ่งกลาง */
            word-break: break-word;    /* ✅ ตัดคำยาวไม่ให้ล้น */
            line-height: 1.3;
        }

        /* ✅ Popup ข้อมูลดิบ - มือถือ */
        .mobile-popup-raw .leaflet-popup-content-wrapper {
            padding: 0 !important;
            border-radius: 6px !important;
            box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
        }
        .mobile-popup-raw .leaflet-popup-content {
            margin: 0 !important;
            width: auto !important;
            min-width: 200px !important;  /* ✅ เพิ่มจาก 280px เป็น 320px */
            max-width: 300px !important;  /* ✅ เพิ่มจาก 280px เป็น 450px */
        }

        .popup-raw {
            background: #fff;
            font-family: 'Sarabun', 'Tahoma', sans-serif;
            max-height: 300px;
            display: flex;
            flex-direction: column;
        }

        .popup-raw-body {
            padding: 10px 14px;  /* ✅ เพิ่ม padding ด้านข้าง */
            overflow-y: auto;
            flex: 1;
        }

        .popup-raw table {
            width: 100%;
            font-size: 12px;  /* ✅ เพิ่มขนาดตัวอักษรเล็กน้อย */
            border-collapse: collapse;
        }

        .popup-raw td {
            padding: 5px 3px;  /* ✅ เพิ่ม padding */
            vertical-align: top;
            text-align: left !important; 
        }

        .popup-raw td.k {
            font-weight: 600;
            color: #475569;
            width: 35%;  /* ✅ ลดจาก 40% ให้พื้นที่ค่ามากขึ้น */
            white-space: nowrap;
        }

        .popup-raw td.v {
            color: #1e293b;
            word-break: break-word;  /* ✅ ตัดคำยาวไม่ให้ล้น */
        }

        /* ✅ Scrollbar สำหรับมือถือ */
        .popup-raw-body::-webkit-scrollbar {
            width: 4px;
        }
        .popup-raw-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }

        /* ✅ ป้องกัน popup ขยายเกินจอ */
        @media (max-width: 480px) {
            .mobile-popup .leaflet-popup-content-wrapper,
            .mobile-popup-raw .leaflet-popup-content-wrapper {
                margin: 4px !important;
            }
            .popup-raw {
                max-height: 40vh !important;
            }
        }

        /* แก้ไขส่วน .side-panel ให้โปร่งใส */
        .side-panel { 
            transition: transform 0.3s ease-in-out; 
            transform: translateX(100%); 
            background: rgba(200, 200, 200, 1.0); /* โปร่งใส 95% */            
            z-index: 1010;
            box-shadow: -5px 0 25px rgba(0,0,0,0.15); /* เงาให้ดูดีขึ้น */
        }
        .form-label { 
            font-size: 0.85rem; /* ขนาดใหญ่ขึ้น */
            font-weight: 700; 
            color: #dc2626; /* สีแดง */
            margin-bottom: 0.2rem; /* เพิ่มระยะห่าง */
            display: block;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* เงาสีขาว */
        }
        .form-input { 
            width: 100%; 
            padding: 0.5rem 0.75rem; /* เพิ่ม padding */
            font-size: 0.9rem; /* ขนาดตัวหนังสือใหญ่ขึ้น */
            font-weight: 600; /* ตัวหนา */
            color: #2563eb; /* สีน้ำเงิน */
            background-color: rgba(255, 255, 255, 0.6); /* พื้นหลังโปร่งใส */
            border: 1.5px solid #d1d5db; /* เส้นหนาขึ้น */
            border-radius: 0.3rem; 
            outline: none;
            transition: border-color 0.2s ease;
            /* ✅ เพิ่ม: บังคับความสูงเท่ากัน */
            height: 40px;  /* กำหนดความสูงชัดเจน */
            line-height: 1.5;
            box-sizing: border-box;  /* ✅ สำคัญ: รวม padding ในความสูง */
        }
        .form-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); /* เงาชัดเจนขึ้น */
        }
        .form-input::placeholder {
            color: #9ca3af; /* สีเทาอ่อนสำหรับ placeholder */
            font-style: italic;
        }
        .side-panel.open { transform: translateX(0); }
        
        /* ✅ แก้ไข: ห้ามปุ่มขยาย/ยืดทุกกรณี */
        .map-btn { 
            background: white; 
            border-radius: 10px; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            /* ✅ เพิ่ม: ป้องกันการขยาย/ยืด */
            transform: none !important;
            transition: background-color 0.2s, color 0.2s !important;
        }
        .map-btn:active,
        .map-btn:focus,
        .map-btn:hover {
            transform: none !important;
            scale: none !important;
        }
        .active-tool { 
            background-color: #2563eb !important; 
            color: white !important; 
            border: 2px solid white;
            transform: none !important;
        }

        .active-edit { 
            background-color: #2563eb !important; 
            color: white !important; 
            border: 2px solid white !important;
            transform: none !important;
        }

        /* ✅ เปลี่ยนสีไอคอนเป็นสีขาวเมื่อแอคทีฟ */
        .active-tool i,
        .active-tool svg {
            color: white !important;
            stroke: white !important;
        }

        /* ข้อ 2: ปุ่มยืนยันเหนือปุ่มบวก (ระยะห่าง = เส้นผ่าศูนย์กลางปุ่มบวก 70px) */
        .confirm-btn-overlay {
        position: absolute;
        bottom: calc(2.5rem + 4.375rem + 4.375rem); /* bottom-10 (40px) + ความสูงปุ่ม (70px) + ระยะห่าง (70px) */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1005;
        }
        /* ✅ สไตล์สำหรับเมนูฟันเฟือง - แอนิเมชันสมูท */
        #settings-menu {
            transition: all 0.2s ease-in-out;
        }

        #settings-menu button {
            opacity: 0;
            transform: translateY(-20px);
            /* ✅ ระบุ property เฉพาะ + ใช้ cubic-bezier */
            transition: 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: opacity, transform;  /* ✅ บอกเบราว์เซอร์ให้เตรียม GPU */
        }

        #settings-menu button:hover {
            transform: translateY(0) scale(1.05) !important;
            transition: transform 0.2s ease-out !important;
        }

        /* ✅ ป้องกันการกระตุก */
        #settings-menu {
            backface-visibility: hidden;
            perspective: 1000px;
        }
        /* ============================================
           ซ่อนลูกศรขึ้นลงในช่องกรอกตัวเลขในแผงข้อมูล (เพื่อป้องกันการเปลี่ยนค่าโดยไม่ตั้งใจเมื่อหมุนสกอร์ล)
           ============================================ */
        #side-panel input[type="number"]::-webkit-inner-spin-button,
        #side-panel input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none !important;
          margin: 0 !important;
        }

        #side-panel input[type="number"] {
          -moz-appearance: textfield !important; /* Firefox */
          appearance: textfield !important; /* Standard */
        }

        /* ============================================
        ซ่อนลูกศรขึ้นลงในช่องกรอกตัวเลขในหน้าต่างคำนวณพื้นที่
        ============================================ */
        #calc-width::-webkit-inner-spin-button,
        #calc-width::-webkit-outer-spin-button,
        #calc-length::-webkit-inner-spin-button,
        #calc-length::-webkit-outer-spin-button,
        #calc-result::-webkit-inner-spin-button,
        #calc-result::-webkit-outer-spin-button {
          -webkit-appearance: none !important;
          margin: 0 !important;
        }

        #calc-width,
        #calc-length,
        #calc-result {
          -moz-appearance: textfield !important;
          appearance: textfield !important;
        }

        /* ========== แอนิเมชันเลื่อนขึ้น/ลง + ศูนย์กลางสำหรับเป้าเล็งและปุ่มบวก ========== */
        #crosshair {
          transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                      opacity 0.6s ease;
          transform: translate(-50%, -50%) translateY(100vh); /* รวมศูนย์กลาง + เลื่อนจากล่าง */
          opacity: 0;
          pointer-events: none;
          will-change: transform, opacity;
        }
        #crosshair.visible {
          transform: translate(-50%, -50%) translateY(0); /* ศูนย์กลาง + ตำแหน่งปกติ */
          opacity: 1;
        }

        #add-trigger-container {
          transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                      opacity 0.6s ease;
          transform: translateX(-50%) translateY(100vh); /* รวมศูนย์กลาง + เลื่อนจากล่าง */
          opacity: 0;
          will-change: transform, opacity;
        }
        #add-trigger-container.visible {
          transform: translateX(-50%) translateY(0); /* ศูนย์กลาง + ตำแหน่งปกติ */
          opacity: 1;
        }
        /* เพิ่มการเร่งฮาร์ดแวร์สำหรับแผนที่ */
        #map {
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }

        /* ปิดการเรนเดอร์ชั่วคราวเมื่อเลื่อนแผนที่ (เพิ่มความลื่น) */
        .leaflet-zoom-anim .circle-marker,
        .leaflet-zoom-anim .crosshair {
          display: none !important;
        }
        /* ============================================
           ปรับแต่งสำหรับมือถือ (รวมทุกกฎไว้ในบล็อกเดียว)
           ============================================ */
        @media (max-width: 768px) {
            /* ความเร็วแอนิเมชัน */
            #crosshair,
            #add-trigger-container {
                transition-duration: 0.35s;
            }
            
            /* ขนาดตัวอักษรและพื้นที่ในช่องกรอก */
            .side-panel .form-input {
                font-size: 0.8125rem !important; /* 13px */
                padding: 0.4rem 0.6rem !important;
                height: 38px !important;  /* ✅ ปรับความสูงสำหรับมือถือ */
            }
            
            /* ปรับขนาดเลเบลให้สมดุล */
            .side-panel .form-label {
                font-size: 0.8125rem !important;
                margin-bottom: 0.2rem !important;
            }
            
            /* ปรับขนาดปุ่มกล้อง */
            .side-panel button[onclick*="camera"] {
                padding: 0.5rem !important;
                font-size: 0.75rem !important;
            }
        }
        /* ✅ เพิ่มรองรับปุ่มคำนวณพื้นที่บนมือถือ */
        @media (max-width: 768px) {
            .calc-btn-a {
                width: 40px !important;
                height: 40px !important;
                font-size: 16px !important;
                right: 4px !important;
            }
            .input-area-wrapper {
                padding-right: 3.5rem !important;
            }
        }
        /* ✅ เพิ่มในส่วนของ <style> */
        @media (max-width: 768px) {
            .grid.grid-cols-2 {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }
            .grid.grid-cols-2 .form-label {
                font-size: 0.75rem !important;
            }
            .grid.grid-cols-2 .form-input {
                font-size: 0.8125rem !important;
                padding: 0.4rem 0.5rem !important;
                height: 38px !important;  /* ✅ ปรับความสูงสำหรับมือถือ */
            }
        }
        /* แอนิเมชันสำหรับปุ่มฟันเฟือง */
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin {
          animation: spin 0.5s linear;
        }

        /* สไตล์สำหรับแกลเลอรี่รูปภาพ */
        #image-gallery-modal {
        }

        #gallery-grid::-webkit-scrollbar {
          width: 8px;
        }

        #gallery-grid::-webkit-scrollbar-track {
          background: #1f2937;
        }

        #gallery-grid::-webkit-scrollbar-thumb {
          background: #4b5563;
          border-radius: 4px;
        }

        #gallery-grid::-webkit-scrollbar-thumb:hover {
          background: #6b7280;
        }
        /* แอนิเมชันสำหรับ Modal */
        @keyframes scale-in {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes scale-out {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.9); }
        }
        .animate-scale-in { animation: scale-in 0.2s ease-out; }
        .animate-scale-out { animation: scale-out 0.2s ease-in; }
        /* PWA Install Prompt Animation */
        @keyframes slideUp {
          from { transform: translate(-50%, 20px); opacity: 0; }
          to { transform: translate(-50%, 0); opacity: 1; }
        }

        #installPrompt {
          animation: slideUp 0.3s ease-out;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        #installPrompt.hidden {
          display: none;
        }
        /* แอนิเมชันสำหรับแจ้งเตือน */
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-out {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }
        .animate-fade-in { animation: fade-in 0.3s ease-out; }
        .animate-fade-out { animation: fade-out 0.3s ease-in; }
        /* สถานะปุ่มรีโหลด */
        @keyframes flash-green {
            0%, 100% { background-color: white; }
            50% { background-color: #22c55e; color: white; }
        }
        .refresh-success { animation: flash-green 0.5s ease 3; }

        /* แอนิเมชันสำหรับแจ้งเตือน */
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-out {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }
        .animate-fade-in { animation: fade-in 0.3s ease-out; }
        .animate-fade-out { animation: fade-out 0.3s ease-in; }

        .circle-marker {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid white;
            cursor: pointer;
        }
        .circle-building { background-color: #f97316; }
        .circle-sign { background-color: #22c55e; }
        
        /* ============================================
           ✅ จุดตำแหน่งผู้ใช้แบบวงกลม (ตามโค้ดตัวอย่าง)
           ============================================ */

        /* ✅ จุดสีฟ้าหลักบนแผนที่ - วงกลม */
        .user-location-dot {
            width: 14px;
            height: 14px;
            background-color: #2563eb;      /* สีน้ำเงิน */
            border: 2px solid white;         /* ขอบขาว */
            border-radius: 50%;              /* ✅ วงกลม */
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            position: relative;
            z-index: 1000;
        }

        /* ✅ วงพัลส์แอนิเมชั่น */
        .user-location-dot::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 100%; height: 100%;
            border-radius: 50%;
            border: 2px solid #2563eb;
            animation: pulseRing 2s infinite ease-out;
            opacity: 0;
            pointer-events: none;
        }

        @keyframes pulseRing {
            0%   { width: 14px; height: 14px; opacity: 0.8; }
            70%  { width: 50px; height: 50px; opacity: 0.3; }
            100% { width: 50px; height: 50px; opacity: 0; }
        }

        /* ✅ ปุ่มตำแหน่งปัจจุบัน - สไตล์ใหม่ (ไม่รบกวนจุดวงกลม) */
        .btn-location {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            border: 2px solid #e2e8f0;
            transition: all 0.2s ease;
        }

        .btn-location:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .btn-location.active {
            background: #2563eb;
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
        }

        .btn-location svg {
            width: 22px;
            height: 22px;
            fill: #2563eb;
            transition: fill 0.2s ease;
        }

        .btn-location.active svg {
            fill: #ffffff;
        }

        /* ✅ วงความแม่นยำ (Accuracy Circle) - ปรับปรุงใหม่ */
        .accuracy-circle {
            border-radius: 50%;
            background: rgba(66, 133, 244, 0.001);
            border: 1px dashed rgba(66, 133, 244, 0.3);
            pointer-events: none;
            transition: all 0.3s ease;
        }
        
        /* ✅ สไตล์สำหรับแท็บที่แอคทีฟ - ทำให้เห็นชัดเจนว่ากำลังกรอง */
        .table-tab.active {
            background: white !important;
            color: #dc2626 !important;  /* 🔴 สีแดงสำหรับโหมดรหัสซ้ำ */
            font-weight: 700 !important;
            box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
            border: 2px solid #dc2626 !important;
        }

        /* ✅ สไตล์สำหรับ badge รหัสซ้ำ */
        #duplicate-count-badge {
            transition: all 0.2s ease;
        }

        .table-tab.active #duplicate-count-badge {
            background-color: #dc2626 !important;
            transform: scale(1.1);
        }

        /* สไตล์สำหรับตาราง */
        .data-table-panel {
            position: fixed;
            padding: 0 !important;
            bottom: 5px;
            left: 5px;
            width: 90%;
            max-width: 900px;
            max-height: 45vh; /* ✅ เปลี่ยนจาก 60vh เป็น 47vh */
            height: 45vh; /* ✅ เพิ่มบรรทัดนี้เพื่อให้ความสูงคงที่ 47% */
            background: white;
            border-radius: 6px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 1003;
            display: none;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        .data-table-panel.open {
            display: flex;
            transform: translateY(0);
        }

        .table-header {
            background: linear-gradient(135deg, #667eea 0%, #db2777 100%);
            color: white;
            padding: 0 0.5rem !important;
            margin: 0 !important;
            min-height: 20px;       /* กำหนดความสูงต่ำสุดให้เล็กลง */
            height: 40px;  
            gap: 0.25rem;    
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .table-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .table-tab {
            padding: 6px 6px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s;
        }
        .table-tab.active {
            background: white;
            color: #667eea;
        }
        .table-tab:hover:not(.active) {
            background: rgba(255,255,255,0.2);
        }
        .table-content {
            flex: 1;
            overflow-y: auto;
            padding: 8px 8px 8px 8px !important;
            padding-top: 0 !important;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .data-table th {
            background: #f3f4f6;
            padding: 6px 8px;
            text-align: left;
            font-weight: 700;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .data-table td {
            padding: 4px;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: middle;
        }


        /* ✅ โฮเวอร์: เหลืองอ่อน (เด่นชัด + ไม่กลบเนื้อหา) */
        .data-table tr:hover {
            background-color: #dcfce7 !important;  /* ✅ yellow-100 */
            cursor: pointer;
        }
        .data-table tr:nth-child(even) {
            background: #f9fafb;
        }
        /* แก้ไข: บังคับให้คลาส text-center ทำงานได้ */
        .data-table th.text-center,
        .data-table td.text-center {
            text-align: center !important; /* ✅ ใช้ !important เพื่อทับกฎเดิม */
        }
        .status-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }
        .status-ยังไม่สำรวจ { background: #fef3c7; color: #92400e; }
        .status-ถ่ายรูปแล้ว { background: #d1fae5; color: #065f46; }
        .status-ตรวจสอบแล้ว { background: #fee2e2; color: #991b1b; }
        .zoom-btn {
            padding: 4px 10px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.2s;
        }
        .zoom-btn:hover {
            background: #1d4ed8;
            transform: scale(1.05);
        }
        .marker-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid white;
        }
        .marker-building { background-color: #f97316; }
        .marker-sign { background-color: #22c55e; }

        /* ✅ ปุ่มบวกใหม่สำหรับเป้าเล็ง (เขียวโปร่งใส) */
        #btn-add-area-crosshair {
            background-color: rgba(34, 197, 94, 0.9) !important;  /* ✅ เขียวโปร่งใส */
            color: white !important;
            border: 2px solid white !important;
        }
        #btn-add-area-crosshair:hover {
            background-color: rgba(22, 163, 74, 0.95) !important;  /* ✅ เขียวเข้มขึ้นเมื่อโฮเวอร์ */
        }

        /* ✅ Cursor สำหรับซูมภาพ */
        .cursor-zoom-out { cursor: zoom-out; }
        .cursor-grab { cursor: grab; }
        .cursor-grabbing { cursor: grabbing; }
        
        /* ✅ สไตล์สำหรับแถบเลื่อนซูม */
        #zoom-slider {
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, 0.2);
            height: 6px;
            border-radius: 3px;
            outline: none;
        }
        
        #zoom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        #zoom-slider::-webkit-slider-thumb:hover {
            background: #60a5fa;
        }
        
        #zoom-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            border: none;
            transition: background 0.2s;
        }
        
        #zoom-slider::-moz-range-thumb:hover {
            background: #60a5fa;
        }

        /* ✅ เพิ่มอันใหม่แทน: */
        @keyframes slideInUp {
            from { 
                opacity: 0; 
                transform: translateY(10px) scale(0.95);  /* ✅ เริ่มจากล่าง 10px */
            }
            to { 
                opacity: 1; 
                transform: translateY(0) scale(1);         /* ✅ มาอยู่ที่เดิม */
            }
        }
        
        .animate-slide-in-up {  /* ✅ ชื่อคลาสใหม่ */
            animation: slideInUp 0.15s ease-out;
        }
        
        .animate-slide-in-right {
            animation: slideInRight 0.15s ease-out;
        }
        
        /* ✅ สไตล์สำหรับช่องค้นหาในโหมดมืด */
        .dark #code-search-container {
            background-color: rgba(31, 41, 55, 0.95);
            border-color: #4b5563;
        }
        
        .dark #code-search-input {
            background-color: #374151;
            border-color: #4b5563;
            color: #f3f4f6;
        }
        
        .dark #code-search-input::placeholder {
            color: #9ca3af;
        }
        
        /* ✅ ไฮไลท์แถวที่ค้นหาพบ */
        .code-search-found-row {
            background-color: #fef08a !important;
            animation: highlightPulse 1s ease;
            transition: background-color 0.2s;
        }
        
        @keyframes highlightPulse {
            0%, 100% { background-color: #fef08a; }
            50% { background-color: #fde047; }
        }

        /* ✅ ✅ ✅ แก้ไข fullscreen-image-modal ให้เต็มจอ ✅ ✅ ✅ */
        #fullscreen-image-modal {
            position: fixed;
            inset: 0;  /* ✅ เต็มจอ: top:0, right:0, bottom:0, left:0 */
            z-index: 99999;  /* ✅ สูงสุด */
            background: rgba(0, 0, 0, 0.98);  /* ✅ ดำเกือบเต็ม */
            display: none;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            width: 100vw;  /* ✅ ความกว้างเต็ม viewport */
            height: 100vh;  /* ✅ ความสูงเต็ม viewport */
            max-width: 100vw;  /* ✅ ไม่มีข้อจำกัด */
            max-height: 100vh;  /* ✅ ไม่มีข้อจำกัด */
        }

        #fullscreen-image-modal.active {
            display: flex;
        }

        /* ✅ ✅ ✅ Container ของภาพ - ลบข้อจำกัดทั้งหมด ✅ ✅ ✅ */
        #fullscreen-image-container {
            position: relative;
            width: 100vw;  /* ✅ เต็มความกว้างจอ */
            height: 100vh;  /* ✅ เต็มความสูงจอ */
            max-width: 100vw !important;  /* ✅ บังคับเต็มจอ */
            max-height: 100vh !important;  /* ✅ บังคับเต็มจอ */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;  /* ✅ อนุญาตให้ล้นได้เมื่อซูม */
            cursor: grab;
            padding: 0;  /* ✅ ไม่มี padding */
            margin: 0;   /* ✅ ไม่มี margin */
        }

        #fullscreen-image-container.grabbing {
            cursor: grabbing;
        }

        /* ✅ ✅ ✅ รูปภาพ - เต็มจอและขยายได้เต็มจอ ✅ ✅ ✅ */
        #fullscreen-image {
            max-width: 100vw !important;  /* ✅ เต็มความกว้างจอ */
            max-height: 100vh !important;  /* ✅ เต็มความสูงจอ */
            width: auto;
            height: auto;
            object-fit: contain;  /* ✅ แสดงครบทั้งรูปไม่ตัด */
            transition: transform 0.1s ease-out;
            transform-origin: center center;
            user-select: none;
            -webkit-user-drag: none;
            display: block;
        }

        #fullscreen-image.zoomed {
            max-width: none !important;  /* ✅ อนุญาตให้ใหญ่กว่าจอเมื่อซูม */
            max-height: none !important; /* ✅ อนุญาตให้ใหญ่กว่าจอเมื่อซูม */
            cursor: grab;
        }

        /* โหมดแก้ไข: เพิ่มขอบขาวให้มาร์กเกอร์ */
        .leaflet-edit-mode .circle-marker {
            stroke: #ffffff !important;
            stroke-width: 3px !important;
            filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
        }

        /* โหมดแก้ไข: เพิ่มขอบขาวให้รูปหมุด */
        .leaflet-edit-mode .pin-marker svg {
            filter: drop-shadow(0 0 2px #ffffff);
        }