:root {
  --bg: #07151c;
  --panel: #0b2029;
  --panel2: #102a34;
  --border: #294752;
  --text: #eef6f8;
  --muted: #a6bac2;
  --green: #77cf4f;
  --green2: #8dde66;
  --blue: #1a4757;
  --warning: #e0a438;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

input,
select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #3c5b67;
  border-radius: 8px;
  background: #071820;
  color: white;
  padding: 10px 12px;
  font-size: 16px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--green);
}

button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  touch-action: manipulation;
}

button:active {
  transform: translateY(1px);
}

.primary {
  background: var(--green);
  color: #07120b;
}

.secondary {
  background: var(--blue);
  color: white;
  border: 1px solid #396574;
}

.warning {
  background: var(--warning);
  color: #171000;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 76px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(7, 21, 28, .97);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
}

.brand {
  font-size: 29px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}

.subtitle {
  margin-top: 5px;
  color: #bfd0d6;
  font-size: 13px;
}

.top-actions {
  display: flex;
  gap: 8px;
}

.top-action {
  width: auto;
  background: #102a34;
  color: white;
  border: 1px solid #35515c;
}

.content {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 17px;
}

.card-title {
  color: var(--green2);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
}

label {
  display: block;
  margin: 9px 0 5px;
  color: #bfd0d6;
  font-size: 13px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.actions button {
  flex: 1 1 180px;
}

.status-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid #294b57;
  background: #071820;
  color: #c2d4da;
  font-size: 13px;
  line-height: 1.7;
}

.badge {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 700;
}

.badge-approx {
  background: #665817;
  color: #ffe98a;
}

.metric-big {
  color: var(--green);
  font-size: 26px;
  font-weight: 800;
}

.muted {
  color: var(--muted);
}

.map-card {
  padding: 0;
  overflow: hidden;
}

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}

.map-head-title {
  color: var(--green2);
  font-weight: 800;
}

.map-preview {
  position: relative;
  width: 100%;
  height: 330px;
}

#map {
  width: 100%;
  height: 100%;
}

.map-overlay-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 900;
  display: flex;
  gap: 8px;
}

.map-overlay-actions button {
  width: auto;
  min-width: 46px;
  background: rgba(7,24,32,.94);
  color: white;
  border: 1px solid #35515c;
}

.map-status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 800;
  max-width: calc(100% - 24px);
  background: rgba(7,24,32,.93);
  border: 1px solid #35515c;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: #d4e2e7;
  pointer-events: none;
}

.system-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: #c2d4da;
  font-size: 13px;
}

.system-status span::before {
  content: "✓ ";
  color: var(--green);
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(7,21,28,.98);
  border-top: 1px solid var(--border);
}

.bottom-nav button {
  border-radius: 0;
  background: transparent;
  color: #aabcc3;
  min-height: 62px;
  padding: 7px 4px;
  font-size: 12px;
}

.bottom-nav button.active {
  color: var(--green);
}

.bottom-nav .add-main {
  font-size: 26px;
  color: white;
}

.fullscreen-map {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg);
}

.fullscreen-map.open {
  display: block;
}

.fullscreen-map-header {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3200;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.fullscreen-map-header button {
  width: auto;
  pointer-events: auto;
  background: rgba(7,24,32,.94);
  color: white;
  border: 1px solid #35515c;
}

#fullMap {
  width: 100%;
  height: 100%;
}

@media (min-width: 1000px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
  }

  .left-column,
  .right-column {
    display: grid;
    gap: 16px;
  }

  .map-preview {
    height: 360px;
  }

  .bottom-nav {
    display: none;
  }

  .app-shell {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .topbar {
    padding: 12px 14px;
  }

  .brand {
    font-size: 25px;
  }

  .top-actions {
    gap: 5px;
  }

  .top-action {
    padding: 8px 10px;
  }

  .content {
    width: calc(100% - 20px);
    margin-top: 10px;
  }

  .card {
    padding: 14px;
    border-radius: 12px;
  }

  .card-title {
    font-size: 18px;
  }

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

  .map-preview {
    height: 250px;
  }

  .map-head {
    padding: 12px 14px;
  }
}

@media (max-width: 380px) {
  .content {
    width: calc(100% - 14px);
  }

  .card {
    padding: 12px;
  }
}


/* =========================================================
   DOOTEE PARCEL EDITOR
   ========================================================= */

.fullscreen-map {
  position: fixed;
}

.parcel-toolbar {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5000;

  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  max-width: calc(100% - 24px);

  padding: 10px;

  background: rgba(7, 21, 28, .92);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;

  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.parcel-toolbar[hidden] {
  display: none !important;
}

.parcel-toolbar button {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;

  background: #123746;
  color: #fff;

  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.parcel-toolbar button:hover {
  filter: brightness(1.12);
}

.parcel-area-live {
  padding: 7px 10px;
  white-space: nowrap;
  color: #d7e7ec;
  font-size: 14px;
}

.parcel-area-live strong {
  color: #7bdc4c;
  font-size: 16px;
}

body.parcel-drawing .leaflet-control-container .leaflet-top.leaflet-left {
  opacity: .55;
}

@media (max-width: 700px) {

  .parcel-toolbar {
    left: 8px;
    right: 8px;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none;

    max-width: none;
    justify-content: center;
  }

  .parcel-toolbar button {
    flex: 1 1 auto;
    min-width: 90px;
  }

  .parcel-area-live {
    flex-basis: 100%;
    text-align: center;
  }
}


/* =========================================================
   DOOTEE MAP WORKSPACE V1
   Map-first interface
   ========================================================= */

/* หน้าเดิมเก็บไว้เป็น backend form state แต่ไม่แสดง */
.app-shell {
  display: none !important;
}

/* Full map กลายเป็นหน้าหลัก */
#fullscreenMap.fullscreen-map {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #07151c;
}

/* แผนที่เต็มพื้นที่ */
#fullMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Header เดิมเปลี่ยนเป็น floating controls */
.fullscreen-map-header {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: auto;

  z-index: 5000;

  display: flex;
  align-items: center;
  gap: 8px;

  pointer-events: none;
}

/* ซ่อนปุ่มกลับ เพราะนี่คือหน้าหลักแล้ว */
#closeFullMapBtn {
  display: none !important;
}

/* ปุ่มหลัก */
#drawParcelBtn {
  pointer-events: auto;

  width: auto;
  min-height: 48px;

  padding: 0 20px;

  border: 1px solid rgba(255,255,255,.20);
  border-radius: 14px;

  background: rgba(7,24,32,.94);
  backdrop-filter: blur(12px);

  color: #ffffff;

  font-size: 16px;
  font-weight: 800;

  box-shadow: 0 8px 28px rgba(0,0,0,.24);
}

/* เปลี่ยนข้อความด้วย CSS ไม่ได้
   JS จะเปลี่ยนเป็น "ตรวจดูที่ดิน" */

/* Leaflet controls ไม่ชนปุ่มด้านบน */
#fullMap .leaflet-top.leaflet-left {
  top: 68px;
}

/* Toolbar ตอนวาด */
.parcel-toolbar {
  z-index: 6000;
}

/* Desktop */
@media (min-width: 768px) {

  #drawParcelBtn {
    min-height: 52px;
    padding: 0 24px;
    font-size: 17px;
  }

}

/* Mobile */
@media (max-width: 767px) {

  .fullscreen-map-header {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
  }

  #drawParcelBtn {
    min-height: 46px;
    padding: 0 16px;

    border-radius: 12px;

    font-size: 15px;
  }

  #fullMap .leaflet-top.leaflet-left {
    top: 62px;
  }

  .parcel-toolbar {
    left: 8px;
    right: 8px;

    bottom: max(
      10px,
      env(safe-area-inset-bottom)
    );

    max-height: 40vh;
    overflow-y: auto;
  }

}

/* Drawing mode:
   ลดสิ่งรบกวนบนแผนที่ */
body.parcel-drawing #drawParcelBtn {
  opacity: .25;
  pointer-events: none;
}

body.parcel-drawing
#fullMap
.leaflet-control-container {
  opacity: .72;
}


.parcel-toolbar button.active-delete {
  background: #7b2525 !important;
  border-color: #d85a5a !important;
  color: #fff !important;
}

.parcel-toolbar button:disabled {
  opacity: .38;
  cursor: not-allowed;
}


/* =========================================================
   ACTIVE PARCEL VERTEX
   ========================================================= */

/* Vertex ปกติให้รู้ว่าจับลากได้ */
#fullMap .marker-icon {
  cursor: grab;
}

#fullMap .marker-icon:active {
  cursor: grabbing;
}

/* Vertex ที่ผู้ใช้เลือก */
#fullMap .marker-icon.dootee-vertex-active {
  background: #ff9f1c !important;
  border-color: #ffffff !important;

  box-shadow:
    0 0 0 4px rgba(255,159,28,.28),
    0 2px 8px rgba(0,0,0,.35) !important;

  transform-origin: center;
}

/* ปุ่มลบพร้อมทำงานเมื่อเลือก Vertex แล้ว */
#parcelDeleteVertexBtn.vertex-ready {
  background: #8b2d2d !important;
  border-color: #ff6b6b !important;
  color: #fff !important;
}

/* มือถือให้ Active เห็นชัดขึ้น */
@media (pointer: coarse) {

  #fullMap .marker-icon.dootee-vertex-active {
    box-shadow:
      0 0 0 6px rgba(255,159,28,.30),
      0 2px 10px rgba(0,0,0,.4) !important;
  }

}


/* =========================================================
   DOOTEE ACTIVE VERTEX V2
   ========================================================= */

/*
  จุด Vertex ที่ถูกเลือก
  ไม่ผูกกับชื่อ class ภายในของ Geoman
*/
#fullMap .dootee-vertex-active {
  background-color: #ff9f1c !important;
  border-color: #ffffff !important;

  box-shadow:
    0 0 0 4px rgba(255,159,28,.42),
    0 2px 9px rgba(0,0,0,.45) !important;

  opacity: 1 !important;
}

/*
  ปุ่มลบคงหน้าตาปกติ
  แม้มี Vertex ถูกเลือก
*/
#parcelDeleteVertexBtn,
#parcelDeleteVertexBtn.vertex-ready,
#parcelDeleteVertexBtn.active-delete {
  background: #123746 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}



/* =========================================================
   ACTIVE VERTEX V3
   ========================================================= */

#fullMap .dootee-vertex-active,
#fullMap .leaflet-marker-icon.dootee-vertex-active {
  background: #ff9f1c !important;
  background-color: #ff9f1c !important;

  border: 2px solid #ffffff !important;

  box-shadow:
    0 0 0 5px rgba(255,159,28,.42),
    0 2px 10px rgba(0,0,0,.45) !important;

  opacity: 1 !important;
}

/* ปุ่มลบต้องสีปกติเสมอ */
#parcelDeleteVertexBtn,
#parcelDeleteVertexBtn.vertex-ready,
#parcelDeleteVertexBtn.active-delete {
  background: #123746 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}



/* =========================================================
   STRICT ACTIVE VERTEX MODE
   ========================================================= */

/* จุดปกติ: เลือกได้ แต่ยังลากไม่ได้ */
#fullMap .dootee-vertex-locked {
  cursor: pointer !important;
}

/* Active เท่านั้นที่แสดงว่า Drag ได้ */
#fullMap .dootee-vertex-active {
  cursor: grab !important;

  background: #ff9f1c !important;
  background-color: #ff9f1c !important;

  border: 2px solid #fff !important;

  box-shadow:
    0 0 0 5px rgba(255,159,28,.45),
    0 2px 10px rgba(0,0,0,.45) !important;

  opacity: 1 !important;
}

#fullMap .dootee-vertex-active:active {
  cursor: grabbing !important;
}

/* ลบจุดไม่เปลี่ยนสี */
#parcelDeleteVertexBtn,
#parcelDeleteVertexBtn.vertex-ready,
#parcelDeleteVertexBtn.active-delete {
  background: #123746 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}


/* STRICT HANDLE MODE */

#fullMap .dootee-vertex-locked {
  cursor: pointer !important;
}

#fullMap .dootee-vertex-active {
  background: #ff9f1c !important;
  background-color: #ff9f1c !important;
  border: 2px solid #fff !important;

  box-shadow:
    0 0 0 5px rgba(255,159,28,.45),
    0 2px 10px rgba(0,0,0,.45) !important;

  cursor: grab !important;
}

#fullMap .dootee-vertex-active:active {
  cursor: grabbing !important;
}


/* =========================================================
   DOOTEE CUSTOM PARCEL HANDLES V2
   ========================================================= */

#fullMap .dootee-custom-handle {
  background: transparent !important;
  border: 0 !important;
}

/* จุดใหญ่ */
#fullMap
.dootee-custom-vertex
span {

  display: block;

  width: 16px;
  height: 16px;

  margin: 3px;

  background: #ffffff;

  border: 2px solid #3388ff;

  border-radius: 50%;

  box-sizing: border-box;

  box-shadow:
    0 1px 4px rgba(0,0,0,.24);

  cursor: pointer;

  touch-action: none;
}


/* จุดกลาง */
#fullMap
.dootee-custom-midpoint
span {

  display: block;

  width: 10px;
  height: 10px;

  margin: 3px;

  background: #ffffff;

  border: 1.5px solid #3388ff;

  border-radius: 50%;

  box-sizing: border-box;

  opacity: .82;

  cursor: pointer;

  touch-action: none;
}


/* ACTIVE ทุกประเภท */
#fullMap
.dootee-custom-handle.active
span {

  background: #ff9f1c !important;

  border-color: #ffffff !important;

  box-shadow:
    0 0 0 5px rgba(255,159,28,.40),
    0 2px 9px rgba(0,0,0,.38);

  opacity: 1;

  cursor: grab;
}


#fullMap
.dootee-custom-handle.active
span:active {

  cursor: grabbing;
}


/*
  Mobile:
  เพิ่มพื้นที่กดจริง แต่ยังไม่ทำให้จุดดูใหญ่เกินไป
*/
@media (pointer: coarse) {

  #fullMap
  .dootee-custom-vertex {

    width: 30px !important;
    height: 30px !important;

    margin-left: -4px !important;
    margin-top: -4px !important;
  }


  #fullMap
  .dootee-custom-vertex
  span {

    margin: 7px;
  }


  #fullMap
  .dootee-custom-midpoint {

    width: 28px !important;
    height: 28px !important;

    margin-left: -6px !important;
    margin-top: -6px !important;
  }


  #fullMap
  .dootee-custom-midpoint
  span {

    margin: 9px;
  }
}



/* =========================================================
   DOOTEE CUSTOM PARCEL EDITOR V2
   Desktop + Mobile + Tablet
   ========================================================= */


/* ----- base custom handle ----- */

#fullMap .dootee-custom-handle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   VERTEX — จุดหลัก
   ========================================================= */

#fullMap
.dootee-custom-vertex
span {

  display: block;

  width: 16px;
  height: 16px;

  margin: 3px;

  box-sizing: border-box;

  border-radius: 50%;

  background: #ffffff;

  border: 2px solid #3388ff;

  box-shadow:
    0 1px 4px rgba(0,0,0,.28);

  /*
    สีขาว = Locked
    cursor ไม่แสดงว่าลากได้
  */
  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;

  touch-action: none;
}


/* =========================================================
   MIDPOINT — จุดกลางเส้น
   ========================================================= */

#fullMap
.dootee-custom-midpoint
span {

  display: block;

  width: 10px;
  height: 10px;

  margin: 4px;

  box-sizing: border-box;

  border-radius: 50%;

  background: #ffffff;

  border: 1.5px solid #3388ff;

  opacity: .85;

  box-shadow:
    0 1px 3px rgba(0,0,0,.20);

  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;

  touch-action: none;
}


/* =========================================================
   ACTIVE
   เฉพาะจุดที่คลิก/แตะแล้วเท่านั้น
   ========================================================= */

#fullMap
.dootee-custom-handle.active
span {

  background: #ff9f1c !important;

  border-color: #ffffff !important;

  opacity: 1 !important;

  box-shadow:
    0 0 0 5px rgba(255,159,28,.42),
    0 2px 10px rgba(0,0,0,.42);

  cursor: grab;
}


#fullMap
.dootee-custom-handle.active
span:active {

  cursor: grabbing;
}


/* =========================================================
   DELETE BUTTON
   ไม่เปลี่ยนเป็นแดงเพียงเพราะเลือก Vertex
   ========================================================= */

#parcelDeleteVertexBtn,
#parcelDeleteVertexBtn.vertex-ready,
#parcelDeleteVertexBtn.active-delete {

  background: #123746 !important;

  border-color:
    rgba(255,255,255,.16) !important;

  color: #ffffff !important;
}


/* =========================================================
   MOBILE / TOUCH
   ========================================================= */

@media (pointer: coarse) {

  /*
    ขยายพื้นที่สัมผัส
    แต่ขนาดวงกลมที่เห็นยังใกล้เดิม
  */

  #fullMap
  .dootee-custom-vertex {

    width: 34px !important;
    height: 34px !important;

    margin-left: -6px !important;
    margin-top: -6px !important;
  }


  #fullMap
  .dootee-custom-vertex
  span {

    width: 18px;
    height: 18px;

    margin: 8px;
  }


  #fullMap
  .dootee-custom-midpoint {

    width: 32px !important;
    height: 32px !important;

    margin-left: -7px !important;
    margin-top: -7px !important;
  }


  #fullMap
  .dootee-custom-midpoint
  span {

    width: 12px;
    height: 12px;

    margin: 10px;
  }


  /*
    Active บนมือถือให้เห็นชัดขึ้น
  */

  #fullMap
  .dootee-custom-handle.active
  span {

    box-shadow:
      0 0 0 7px rgba(255,159,28,.36),
      0 2px 10px rgba(0,0,0,.42);
  }

}



/* =========================================================
   DOOTEE WORKSPACE V3
   ========================================================= */

#dooteeWorkspaceV3 {
  position: relative;
  z-index: 6500;
}


/* ---------- drawer ---------- */

.dootee-drawer {
  position: fixed;

  top: 0;
  bottom: 0;

  width: min(430px, 92vw);

  background:
    rgba(7, 24, 32, .97);

  color: #fff;

  z-index: 9000;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 0 36px rgba(0,0,0,.40);

  transition:
    transform .28s ease;

  backdrop-filter:
    blur(14px);
}


.dootee-drawer-left {
  left: 0;

  transform:
    translateX(-105%);
}


.dootee-drawer-left.open {
  transform:
    translateX(0);
}


.dootee-drawer-right {
  right: 0;

  transform:
    translateX(105%);
}


.dootee-drawer-right.open {
  transform:
    translateX(0);
}


.dootee-drawer-header {
  min-height: 76px;

  padding:
    max(16px, env(safe-area-inset-top))
    18px
    14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}


.dootee-drawer-header strong {
  display: block;

  font-size: 20px;
}


.dootee-drawer-header small {
  display: block;

  margin-top: 3px;

  opacity: .65;
}


.dootee-icon-btn {
  width: 42px;
  height: 42px;

  border-radius: 12px;

  border:
    1px solid rgba(255,255,255,.16);

  background:
    #123746;

  color: #fff;

  font-size: 25px;

  cursor: pointer;
}


.dootee-drawer-body {
  flex: 1;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 16px;
}


.dootee-drawer-footer {
  padding:
    14px
    16px
    max(14px, env(safe-area-inset-bottom));

  border-top:
    1px solid rgba(255,255,255,.10);
}


.dootee-primary-action {
  width: 100%;

  min-height: 52px;

  border: 0;

  border-radius: 13px;

  background:
    #78d34b;

  font-weight: 800;

  font-size: 16px;

  cursor: pointer;
}


/*
  ฟอร์มเดิมเมื่อถูกย้ายเข้ามา Drawer
*/

#landDataDrawerBody .left-column {
  display: block !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;
}


#landDataDrawerBody .left-column > * {
  max-width: 100%;
}


/* ---------- Layer ---------- */

.dootee-floating-panel {
  position: fixed;

  z-index: 7200;

  background:
    rgba(7,24,32,.94);

  color: #fff;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius: 14px;

  box-shadow:
    0 8px 26px rgba(0,0,0,.25);

  backdrop-filter:
    blur(10px);
}


.dootee-layer-panel {
  top: 18px;
  right: 18px;

  width: 230px;
}


.dootee-panel-title {
  width: 100%;

  min-height: 50px;

  padding: 0 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;

  background: transparent;

  color: #fff;

  font-size: 17px;
  font-weight: 800;

  cursor: pointer;
}


#layerPanelBody {
  padding:
    0 14px 14px;
}


#layerPanel.collapsed
#layerPanelBody {
  display: none;
}


.dootee-layer-row {
  min-height: 40px;

  display: flex;
  align-items: center;

  gap: 10px;

  cursor: pointer;
}


.dootee-layer-row input {
  width: 18px;
  height: 18px;
}


.dootee-layer-caption {
  margin:
    10px 0 4px;

  font-size: 12px;

  opacity: .58;

  text-transform: uppercase;
}


.dootee-layer-separator {
  height: 1px;

  background:
    rgba(255,255,255,.10);

  margin: 8px 0;
}


.layer-coming {
  opacity: .48;
}


/* ---------- Radius ---------- */

.dootee-radius-bar {
  position: fixed;

  left: 50%;
  bottom:
    max(20px, env(safe-area-inset-bottom));

  transform:
    translateX(-50%);

  z-index: 7100;

  width:
    min(620px, calc(100vw - 34px));

  padding:
    12px 18px 10px;

  border-radius: 16px;

  background:
    rgba(7,24,32,.94);

  color: #fff;

  border:
    1px solid rgba(255,255,255,.13);

  box-shadow:
    0 8px 28px rgba(0,0,0,.28);

  backdrop-filter:
    blur(10px);
}


.dootee-radius-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 7px;

  font-size: 13px;
}


.dootee-radius-heading strong {
  color: #7ee34f;

  font-size: 16px;
}


#workspaceRadiusSlider {
  width: 100%;

  cursor: pointer;
}


.dootee-radius-scale {
  display: flex;

  justify-content: space-between;

  margin-top: 3px;

  font-size: 10px;

  opacity: .55;
}


/* ---------- Analyze ---------- */

.dootee-analyze-btn {
  position: fixed;

  right: 18px;
  bottom: 122px;

  z-index: 7200;

  min-height: 52px;

  padding: 0 22px;

  border-radius: 14px;

  border:
    1px solid rgba(255,255,255,.16);

  background:
    #78d34b;

  color: #07151c;

  font-size: 16px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(0,0,0,.27);
}


.dootee-analyze-btn:disabled {
  background:
    rgba(7,24,32,.70);

  color:
    rgba(255,255,255,.42);

  cursor: not-allowed;

  box-shadow: none;
}


/* ---------- Analysis ---------- */

.analysis-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 18px;
}


.analysis-stat {
  padding: 13px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.08);
}


.analysis-stat span {
  display: block;

  margin-bottom: 5px;

  font-size: 12px;

  opacity: .60;
}


.analysis-stat strong {
  display: block;

  font-size: 15px;

  word-break: break-word;
}


.analysis-section {
  margin-top: 12px;

  padding: 14px;

  border-radius: 13px;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.08);
}


.analysis-section h3 {
  margin:
    0 0 7px;

  color: #83e653;
}


.analysis-section p {
  margin: 0;

  line-height: 1.6;

  opacity: .76;

  font-size: 13px;
}


/* ---------- Scrim ---------- */

.dootee-workspace-scrim {
  position: fixed;
  inset: 0;

  z-index: 8500;

  display: none;

  background:
    rgba(0,0,0,.38);
}


.dootee-workspace-scrim.open {
  display: block;
}


/* ---------- Drawing mode ---------- */

body.parcel-drawing
#dooteeWorkspaceV3
.dootee-layer-panel,

body.parcel-drawing
#dooteeWorkspaceV3
.dootee-analyze-btn,

body.parcel-drawing
#dooteeWorkspaceV3
.dootee-radius-bar {

  opacity: .18;

  pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .dootee-layer-panel {
    top: 10px;
    right: 10px;

    width: 180px;
  }


  .dootee-layer-panel.collapsed {
    width: 105px;
  }


  .dootee-panel-title {
    min-height: 46px;

    font-size: 14px;
  }


  .dootee-analyze-btn {
    right: 10px;

    bottom: 118px;

    min-height: 46px;

    padding: 0 15px;

    font-size: 14px;
  }


  .dootee-radius-bar {
    bottom:
      max(10px, env(safe-area-inset-bottom));

    width:
      calc(100vw - 20px);

    padding:
      10px 13px 8px;
  }


  .dootee-radius-scale {
    display: none;
  }


  .analysis-summary-grid {
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   DOOTEE TARGET MAP UI V4
   ========================================================= */

.target-inspect-btn,
.target-collapse-btn,
.target-edit-btn,
.target-layer-open-btn {
  position: fixed;
  z-index: 7600;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(5,29,40,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.target-inspect-btn {
  top: 18px;
  left: 20px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 9px;
  background: linear-gradient(180deg,#3db82f,#229521);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.target-search-icon {
  margin-right: 9px;
  font-size: 27px;
}

.target-collapse-btn {
  top: 96px;
  left: 20px;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  font-size: 26px;
  cursor: pointer;
}

.target-edit-btn {
  left: 22px;
  bottom: 287px;
  min-width: 125px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.target-layer-open-btn {
  top: 18px;
  right: 18px;
  width: 64px;
  height: 64px;
  border-radius: 9px;
  font-size: 29px;
  cursor: pointer;
}


/* ===== เงื่อนไขวิเคราะห์ ===== */

.target-analysis-condition {
  position: fixed;
  left: 22px;
  bottom: 92px;
  z-index: 7200;

  width: min(920px, calc(100vw - 380px));

  min-height: 170px;

  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.85fr);

  gap: 18px;

  padding: 18px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;

  color: #fff;

  background: rgba(4,28,40,.91);

  box-shadow: 0 8px 28px rgba(0,0,0,.30);

  backdrop-filter: blur(12px);
}

.target-condition-title {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 800;
}

.target-condition-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;

  color: rgba(255,255,255,.72);

  font-size: 14px;
}

.target-condition-row.ready {
  color: #fff;
}

.target-condition-check {
  width: 22px;
  text-align: center;
  font-size: 18px;
}

.target-condition-row.ready
.target-condition-check {
  color: #76e56a;
}


/* ===== ปุ่มวิเคราะห์ ===== */

.target-analysis-action {
  min-height: 134px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  border: 1px solid rgba(255,255,255,.12);

  color: #fff;

  background: rgba(255,255,255,.09);

  cursor: pointer;
}

.target-analysis-action:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.target-analysis-action:not(:disabled) {
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      #3ec63c,
      #258f27
    );

  box-shadow:
    0 8px 22px
    rgba(38,160,40,.26);
}

.target-analysis-icon {
  margin-bottom: 5px;
  font-size: 27px;
}

.target-analysis-action strong {
  font-size: 20px;
}

.target-analysis-action small {
  margin-top: 7px;
}

.target-analysis-action em {
  margin-top: 8px;
  font-style: normal;
  font-size: 11px;
  opacity: .65;
}


/* ===== Radius ===== */

.target-radius-panel {
  position: fixed;

  left: 22px;
  right: 342px;
  bottom: 18px;

  z-index: 7150;

  padding: 11px 22px 14px;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 8px;

  color: #fff;

  background: rgba(4,28,40,.92);

  box-shadow:
    0 8px 26px
    rgba(0,0,0,.27);

  backdrop-filter: blur(12px);
}

.target-radius-title {
  margin-bottom: 8px;
  text-align: center;
  font-weight: 800;
}

.target-radius-title strong {
  margin-left: 9px;
  color: #5fe33f;
  font-size: 18px;
}

#workspaceRadiusSlider {
  width: 100%;
  accent-color: #45c23e;
  cursor: pointer;
}

.target-radius-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;

  font-size: 12px;

  color: rgba(255,255,255,.75);
}

.target-radius-labels span.active {
  color: #65e653;
  font-weight: 800;
}


/* ===== Layer Panel ===== */

.target-layer-panel {
  position: fixed;

  top: 103px;
  right: 18px;
  bottom: 18px;

  z-index: 7500;

  width: 304px;

  overflow-y: auto;

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 9px;

  color: #fff;

  background: rgba(4,28,40,.95);

  box-shadow:
    0 10px 32px
    rgba(0,0,0,.34);

  backdrop-filter: blur(12px);
}

.target-layer-panel.hidden {
  display: none;
}

.target-layer-header {
  min-height: 57px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.target-layer-header button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

.target-layer-section {
  padding: 12px 17px 10px;

  border-bottom:
    1px solid rgba(255,255,255,.09);
}

.target-layer-heading {
  margin-bottom: 8px;
  color: #63dc50;
  font-size: 14px;
  font-weight: 800;
}

.target-layer-radio,
.target-layer-check {
  min-height: 32px;

  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 13px;

  cursor: pointer;
}

.target-layer-radio input,
.target-layer-check input {
  width: 18px;
  height: 18px;
  accent-color: #43bd39;
}

.target-layer-reset {
  width: calc(100% - 30px);
  min-height: 45px;

  margin: 14px 15px;

  border-radius: 7px;

  border:
    1px solid rgba(255,255,255,.16);

  background: #123c4b;

  color: #fff;

  font-weight: 700;

  cursor: pointer;
}


/* ===== ระหว่างวาด ===== */

body.parcel-drawing
.target-analysis-condition,

body.parcel-drawing
.target-radius-panel,

body.parcel-drawing
.target-layer-panel,

body.parcel-drawing
.target-layer-open-btn,

body.parcel-drawing
.target-edit-btn {
  opacity: .14;
  pointer-events: none;
}


/* ===== Mobile ===== */

@media (max-width: 767px) {

  .target-inspect-btn {
    top: 10px;
    left: 10px;

    min-height: 52px;

    padding: 0 17px;

    font-size: 16px;
  }

  .target-collapse-btn {
    top: 70px;
    left: 10px;

    width: 46px;
    height: 46px;
  }

  .target-layer-open-btn {
    top: 10px;
    right: 10px;

    width: 52px;
    height: 52px;
  }

  .target-edit-btn {
    left: 10px;
    bottom: 245px;

    min-width: 96px;
    min-height: 46px;
  }

  .target-analysis-condition {
    left: 10px;
    right: 10px;
    bottom: 87px;

    width: auto;

    min-height: 0;

    grid-template-columns: 1fr;

    padding: 11px;
  }

  .target-condition-left {
    display: none;
  }

  .target-analysis-action {
    min-height: 62px;
  }

  .target-analysis-action em {
    display: none;
  }

  .target-radius-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;

    padding: 8px 10px 9px;
  }

  .target-radius-labels {
    font-size: 9px;
  }

  .target-layer-panel {
    top: 70px;
    right: 8px;
    bottom: 8px;

    width:
      min(300px, calc(100vw - 24px));
  }
}



/* =========================================================
   DOOTEE TARGET MAP UI V4
   ========================================================= */

.target-inspect-btn,
.target-collapse-btn,
.target-edit-btn,
.target-layer-open-btn {
  position: fixed;
  z-index: 7600;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(5,29,40,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.target-inspect-btn {
  top: 18px;
  left: 20px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 9px;
  background: linear-gradient(180deg,#3db82f,#229521);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.target-search-icon {
  margin-right: 9px;
  font-size: 27px;
}

.target-collapse-btn {
  top: 96px;
  left: 20px;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  font-size: 26px;
  cursor: pointer;
}

.target-edit-btn {
  left: 22px;
  bottom: 287px;
  min-width: 125px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.target-layer-open-btn {
  top: 18px;
  right: 18px;
  width: 64px;
  height: 64px;
  border-radius: 9px;
  font-size: 29px;
  cursor: pointer;
}


/* ===== เงื่อนไขวิเคราะห์ ===== */

.target-analysis-condition {
  position: fixed;
  left: 22px;
  bottom: 92px;
  z-index: 7200;

  width: min(920px, calc(100vw - 380px));

  min-height: 170px;

  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.85fr);

  gap: 18px;

  padding: 18px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;

  color: #fff;

  background: rgba(4,28,40,.91);

  box-shadow: 0 8px 28px rgba(0,0,0,.30);

  backdrop-filter: blur(12px);
}

.target-condition-title {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 800;
}

.target-condition-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;

  color: rgba(255,255,255,.72);

  font-size: 14px;
}

.target-condition-row.ready {
  color: #fff;
}

.target-condition-check {
  width: 22px;
  text-align: center;
  font-size: 18px;
}

.target-condition-row.ready
.target-condition-check {
  color: #76e56a;
}


/* ===== ปุ่มวิเคราะห์ ===== */

.target-analysis-action {
  min-height: 134px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  border: 1px solid rgba(255,255,255,.12);

  color: #fff;

  background: rgba(255,255,255,.09);

  cursor: pointer;
}

.target-analysis-action:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.target-analysis-action:not(:disabled) {
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      #3ec63c,
      #258f27
    );

  box-shadow:
    0 8px 22px
    rgba(38,160,40,.26);
}

.target-analysis-icon {
  margin-bottom: 5px;
  font-size: 27px;
}

.target-analysis-action strong {
  font-size: 20px;
}

.target-analysis-action small {
  margin-top: 7px;
}

.target-analysis-action em {
  margin-top: 8px;
  font-style: normal;
  font-size: 11px;
  opacity: .65;
}


/* ===== Radius ===== */

.target-radius-panel {
  position: fixed;

  left: 22px;
  right: 342px;
  bottom: 18px;

  z-index: 7150;

  padding: 11px 22px 14px;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 8px;

  color: #fff;

  background: rgba(4,28,40,.92);

  box-shadow:
    0 8px 26px
    rgba(0,0,0,.27);

  backdrop-filter: blur(12px);
}

.target-radius-title {
  margin-bottom: 8px;
  text-align: center;
  font-weight: 800;
}

.target-radius-title strong {
  margin-left: 9px;
  color: #5fe33f;
  font-size: 18px;
}

#workspaceRadiusSlider {
  width: 100%;
  accent-color: #45c23e;
  cursor: pointer;
}

.target-radius-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;

  font-size: 12px;

  color: rgba(255,255,255,.75);
}

.target-radius-labels span.active {
  color: #65e653;
  font-weight: 800;
}


/* ===== Layer Panel ===== */

.target-layer-panel {
  position: fixed;

  top: 103px;
  right: 18px;
  bottom: 18px;

  z-index: 7500;

  width: 304px;

  overflow-y: auto;

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 9px;

  color: #fff;

  background: rgba(4,28,40,.95);

  box-shadow:
    0 10px 32px
    rgba(0,0,0,.34);

  backdrop-filter: blur(12px);
}

.target-layer-panel.hidden {
  display: none;
}

.target-layer-header {
  min-height: 57px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.target-layer-header button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

.target-layer-section {
  padding: 12px 17px 10px;

  border-bottom:
    1px solid rgba(255,255,255,.09);
}

.target-layer-heading {
  margin-bottom: 8px;
  color: #63dc50;
  font-size: 14px;
  font-weight: 800;
}

.target-layer-radio,
.target-layer-check {
  min-height: 32px;

  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 13px;

  cursor: pointer;
}

.target-layer-radio input,
.target-layer-check input {
  width: 18px;
  height: 18px;
  accent-color: #43bd39;
}

.target-layer-reset {
  width: calc(100% - 30px);
  min-height: 45px;

  margin: 14px 15px;

  border-radius: 7px;

  border:
    1px solid rgba(255,255,255,.16);

  background: #123c4b;

  color: #fff;

  font-weight: 700;

  cursor: pointer;
}


/* ===== ระหว่างวาด ===== */

body.parcel-drawing
.target-analysis-condition,

body.parcel-drawing
.target-radius-panel,

body.parcel-drawing
.target-layer-panel,

body.parcel-drawing
.target-layer-open-btn,

body.parcel-drawing
.target-edit-btn {
  opacity: .14;
  pointer-events: none;
}


/* ===== Mobile ===== */

@media (max-width: 767px) {

  .target-inspect-btn {
    top: 10px;
    left: 10px;

    min-height: 52px;

    padding: 0 17px;

    font-size: 16px;
  }

  .target-collapse-btn {
    top: 70px;
    left: 10px;

    width: 46px;
    height: 46px;
  }

  .target-layer-open-btn {
    top: 10px;
    right: 10px;

    width: 52px;
    height: 52px;
  }

  .target-edit-btn {
    left: 10px;
    bottom: 245px;

    min-width: 96px;
    min-height: 46px;
  }

  .target-analysis-condition {
    left: 10px;
    right: 10px;
    bottom: 87px;

    width: auto;

    min-height: 0;

    grid-template-columns: 1fr;

    padding: 11px;
  }

  .target-condition-left {
    display: none;
  }

  .target-analysis-action {
    min-height: 62px;
  }

  .target-analysis-action em {
    display: none;
  }

  .target-radius-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;

    padding: 8px 10px 9px;
  }

  .target-radius-labels {
    font-size: 9px;
  }

  .target-layer-panel {
    top: 70px;
    right: 8px;
    bottom: 8px;

    width:
      min(300px, calc(100vw - 24px));
  }
}



/* =========================================================
   DOOTEE COMPACT MAP WORKSPACE V5
   ========================================================= */


/* ---------------------------------------------------------
   EDIT
   --------------------------------------------------------- */

.target-edit-btn {
  bottom: 182px !important;
}

.target-edit-btn:disabled {
  opacity: .40;
  cursor: not-allowed;
}


/* ---------------------------------------------------------
   ANALYSIS PANEL
   ลดความสูงลง
   --------------------------------------------------------- */

.target-analysis-condition {
  left: 22px !important;
  bottom: 76px !important;

  width:
    min(880px, calc(100vw - 380px)) !important;

  min-height: 0 !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.72fr) !important;

  padding: 12px 14px !important;

  gap: 14px !important;

  transition:
    transform .24s ease,
    opacity .24s ease,
    max-height .24s ease !important;
}


.target-condition-toggle {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 0 0 7px !important;

  padding: 0;

  border: 0;

  background: transparent;

  color: #fff;

  text-align: left;

  cursor: pointer;
}


.target-condition-row {
  min-height: 27px !important;
  font-size: 13px !important;
}


.target-analysis-action {
  min-height: 102px !important;
}


.target-analysis-action strong {
  font-size: 18px !important;
}


/*
  ย่อ Analysis Panel ลงด้านล่าง
  เหลือเฉพาะแถบหัวให้เรียกกลับได้
*/

.target-analysis-condition.compact-hidden {
  display: block !important;

  width: 310px !important;

  min-height: 46px !important;

  max-height: 46px !important;

  overflow: hidden;

  padding: 10px 14px !important;
}


.target-analysis-condition.compact-hidden
.target-condition-left {
  display: block !important;
}


.target-analysis-condition.compact-hidden
.target-condition-row {
  display: none !important;
}


.target-analysis-condition.compact-hidden
.target-analysis-action {
  display: none !important;
}


.target-analysis-condition.compact-hidden
.target-condition-toggle {
  margin: 0 !important;
  min-height: 25px;
}


/* ---------------------------------------------------------
   RADIUS — แถวบาง
   --------------------------------------------------------- */

.target-radius-panel {
  left: 22px !important;
  right: 342px !important;

  bottom: 14px !important;

  height: 50px !important;
  min-height: 50px !important;

  padding: 5px 16px 4px !important;

  display: grid !important;

  grid-template-columns:
    195px minmax(0,1fr) !important;

  align-items: center;

  gap: 13px;
}


.target-radius-title {
  margin: 0 !important;

  text-align: left !important;

  font-size: 12px;
  white-space: nowrap;
}


.target-radius-title strong {
  margin-left: 5px !important;
  font-size: 14px !important;
}


.target-radius-control {
  min-width: 0;
}


#workspaceRadiusSlider {
  display: block;

  margin: 0;

  height: 18px;
}


.target-radius-labels {
  margin-top: -1px !important;

  font-size: 9px !important;

  line-height: 10px;
}


/* ---------------------------------------------------------
   LAYER PANEL
   ปุ่มมุมขวาบนเป็น Toggle เพียงปุ่มเดียว
   --------------------------------------------------------- */

.target-layer-open-btn.layer-active {
  background:
    linear-gradient(
      180deg,
      #174b5d,
      #0b3444
    ) !important;

  border-color:
    rgba(105,224,91,.55) !important;

  box-shadow:
    0 0 0 2px rgba(83,210,66,.18),
    0 8px 24px rgba(0,0,0,.28) !important;
}


.target-layer-header {
  justify-content: flex-start !important;
}


/* ---------------------------------------------------------
   DRAW / EDIT MODE
   --------------------------------------------------------- */

body.parcel-editing
.target-analysis-condition,

body.parcel-editing
.target-radius-panel,

body.parcel-editing
.target-layer-panel {
  opacity: .12 !important;
  pointer-events: none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .target-edit-btn {
    bottom: 146px !important;
  }


  .target-analysis-condition {
    left: 10px !important;
    right: 10px !important;

    bottom: 65px !important;

    width: auto !important;

    padding: 8px 10px !important;
  }


  .target-analysis-condition.compact-hidden {
    left: 10px !important;

    right: auto !important;

    width: 240px !important;

    max-height: 42px !important;
    min-height: 42px !important;
  }


  .target-radius-panel {
    left: 10px !important;
    right: 10px !important;

    bottom: 8px !important;

    height: 48px !important;

    grid-template-columns:
      122px minmax(0,1fr) !important;

    padding:
      4px 9px !important;

    gap: 7px;
  }


  .target-radius-title {
    font-size: 10px !important;
  }


  .target-radius-title strong {
    display: block;

    margin-left: 0 !important;
  }


  .target-radius-labels {
    font-size: 7px !important;
  }

}



/* =========================================================
   DOOTEE FINAL GLASS WORKSPACE V6
   Desktop / Laptop / Tablet / Mobile
   ========================================================= */

:root {
  --dt-glass:
    rgba(4, 27, 36, .54);

  --dt-glass-strong:
    rgba(4, 27, 36, .68);

  --dt-border:
    rgba(195, 231, 240, .32);

  --dt-text:
    #f5fbff;

  --dt-muted:
    rgba(238, 248, 252, .78);

  --dt-green:
    #45d53c;

  --dt-shadow:
    0 10px 30px rgba(0,0,0,.28);
}


/* =========================================================
   GLASS — ทุก Panel
   ========================================================= */

.target-analysis-condition,
.target-radius-panel,
.target-layer-panel,
.dootee-drawer,
.analysis-stat,
.analysis-section {

  background:
    var(--dt-glass) !important;

  border:
    1px solid var(--dt-border) !important;

  box-shadow:
    var(--dt-shadow) !important;

  -webkit-backdrop-filter:
    blur(10px) saturate(120%);

  backdrop-filter:
    blur(10px) saturate(120%);

  color:
    var(--dt-text) !important;
}


/*
  ทำให้ตัวหนังสืออ่านง่าย
  แม้พื้นหลังเป็นภาพถ่ายดาวเทียม
*/

.target-analysis-condition,
.target-radius-panel,
.target-layer-panel,
.dootee-drawer {

  text-shadow:
    0 1px 2px rgba(0,0,0,.82);
}


.target-condition-row,
.target-layer-radio,
.target-layer-check {

  color:
    var(--dt-text) !important;
}


.target-condition-row:not(.ready) {

  color:
    rgba(245,251,255,.86) !important;
}


/* =========================================================
   INSPECT BUTTON
   ========================================================= */

.target-inspect-btn {

  top: 18px !important;
  left: 20px !important;

  min-height:
    62px !important;

  background:
    linear-gradient(
      180deg,
      rgba(47,195,48,.94),
      rgba(26,158,31,.94)
    ) !important;

  border:
    1px solid rgba(111,255,105,.52) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.26) !important;

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}


/* =========================================================
   LEAFLET ZOOM + / -
   อยู่ใต้ปุ่มตรวจดูที่ดินพอดี
   ========================================================= */

#fullMap .leaflet-top.leaflet-left {

  top: 96px !important;
  left: 20px !important;
}


#fullMap
.leaflet-control-zoom {

  margin: 0 !important;

  border:
    1px solid var(--dt-border) !important;

  border-radius:
    8px !important;

  overflow: hidden;

  box-shadow:
    var(--dt-shadow) !important;

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);
}


#fullMap
.leaflet-control-zoom a {

  width:
    42px !important;

  height:
    42px !important;

  line-height:
    42px !important;

  background:
    rgba(4,27,36,.58) !important;

  color:
    #ffffff !important;

  border-color:
    rgba(255,255,255,.14) !important;

  font-weight:
    700 !important;

  text-shadow:
    0 1px 2px #000 !important;
}


#fullMap
.leaflet-control-zoom a:hover {

  background:
    rgba(16,70,82,.76) !important;
}


/* =========================================================
   LAYER BUTTON + PANEL
   Panel ติดกับปุ่ม
   ========================================================= */

.target-layer-open-btn {

  top:
    18px !important;

  right:
    18px !important;

  width:
    62px !important;

  height:
    62px !important;

  background:
    rgba(4,27,36,.58) !important;

  border:
    1px solid var(--dt-border) !important;

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

  z-index:
    7701 !important;
}


.target-layer-open-btn.layer-active {

  border-color:
    rgba(84,230,72,.72) !important;

  background:
    rgba(7,53,60,.76) !important;
}


/*
  Panel เริ่มตรงใต้ปุ่ม
  เหมือนเป็นชุดเดียวกัน
*/

.target-layer-panel {

  top:
    88px !important;

  right:
    18px !important;

  bottom:
    14px !important;

  width:
    300px !important;

  border-radius:
    10px !important;

  z-index:
    7700 !important;

  scrollbar-width:
    thin;
}


/*
  ไม่ต้องมี X
*/

#layerCloseBtn {

  display:
    none !important;
}


.target-layer-header {

  min-height:
    48px !important;

  padding:
    0 14px !important;
}


/* =========================================================
   EDIT
   ========================================================= */

.target-edit-btn {

  left:
    22px !important;

  bottom:
    188px !important;

  min-height:
    50px !important;

  min-width:
    122px !important;

  background:
    rgba(4,27,36,.58) !important;

  border:
    1px solid var(--dt-border) !important;

  color:
    #fff !important;

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);
}


.target-edit-btn:not(:disabled):hover {

  background:
    rgba(12,63,72,.78) !important;
}


/* =========================================================
   ANALYSIS PANEL
   ความกว้าง = Radius
   ========================================================= */

.target-analysis-condition {

  left:
    22px !important;

  right:
    338px !important;

  bottom:
    76px !important;

  width:
    auto !important;

  min-height:
    0 !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(285px,.72fr) !important;

  padding:
    11px 14px !important;

  gap:
    14px !important;

  border-radius:
    9px !important;
}


.target-condition-title {

  min-height:
    30px !important;

  margin:
    0 0 5px !important;
}


.target-condition-row {

  min-height:
    26px !important;

  font-size:
    13px !important;
}


.target-analysis-action {

  min-height:
    100px !important;

  background:
    rgba(255,255,255,.07) !important;

  border:
    1px solid rgba(255,255,255,.17) !important;
}


.target-analysis-action:not(:disabled) {

  background:
    rgba(42,174,48,.70) !important;
}


/*
  เมื่อย่อ
  เหลือแถบบาง
*/

.target-analysis-condition.compact-hidden {

  right:
    auto !important;

  width:
    310px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  max-height:
    44px !important;

  padding:
    7px 13px !important;

  overflow:
    hidden !important;
}


.target-analysis-condition.compact-hidden
.target-condition-row,

.target-analysis-condition.compact-hidden
.target-analysis-action {

  display:
    none !important;
}


/* =========================================================
   RADIUS — แถวบางเต็มแนวเดียวกับ Analysis
   ========================================================= */

.target-radius-panel {

  left:
    22px !important;

  right:
    338px !important;

  bottom:
    14px !important;

  width:
    auto !important;

  height:
    50px !important;

  min-height:
    50px !important;

  padding:
    4px 14px !important;

  display:
    grid !important;

  grid-template-columns:
    235px
    minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    12px !important;

  border-radius:
    8px !important;
}


.target-radius-title {

  margin:
    0 !important;

  white-space:
    nowrap;

  text-align:
    left !important;

  font-size:
    12px !important;
}


.target-radius-title strong {

  font-size:
    15px !important;

  color:
    #63ee51 !important;
}


.target-radius-control {

  min-width:
    0;
}


#workspaceRadiusSlider {

  width:
    100% !important;

  height:
    18px !important;

  margin:
    0 !important;

  accent-color:
    var(--dt-green);
}


.target-radius-labels {

  margin-top:
    -1px !important;

  font-size:
    9px !important;

  line-height:
    10px !important;
}


/* =========================================================
   ANALYSIS CENTER MARKER
   ========================================================= */

.dootee-radius-marker {

  background:
    transparent !important;

  border:
    0 !important;
}


.dootee-radius-marker-pin {

  position:
    relative;

  width:
    30px;

  height:
    30px;

  border-radius:
    50% 50% 50% 0;

  transform:
    rotate(-45deg);

  background:
    #2c94ed;

  border:
    3px solid #ffffff;

  box-shadow:
    0 4px 12px rgba(0,0,0,.48);

  cursor:
    grab;
}


.dootee-radius-marker-pin::after {

  content:
    "";

  position:
    absolute;

  width:
    8px;

  height:
    8px;

  left:
    8px;

  top:
    8px;

  border-radius:
    50%;

  background:
    #ffffff;
}


.dootee-radius-marker.dragging
.dootee-radius-marker-pin {

  cursor:
    grabbing;

  transform:
    rotate(-45deg)
    scale(1.10);
}


/* =========================================================
   DRAW / EDIT
   เวลาวาดให้พื้นที่โล่ง
   ========================================================= */

body.parcel-drawing
.target-layer-panel,

body.parcel-drawing
.target-analysis-condition,

body.parcel-drawing
.target-radius-panel,

body.parcel-drawing
.target-edit-btn {

  opacity:
    .08 !important;

  pointer-events:
    none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 1100px) {

  .target-layer-panel {

    width:
      270px !important;
  }


  .target-analysis-condition,
  .target-radius-panel {

    right:
      300px !important;
  }


  .target-analysis-condition {

    grid-template-columns:
      minmax(0,1fr)
      260px !important;
  }


  .target-radius-panel {

    grid-template-columns:
      190px minmax(0,1fr) !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 767px) {

  .target-inspect-btn {

    top:
      calc(
        10px +
        env(safe-area-inset-top)
      ) !important;

    left:
      10px !important;

    min-height:
      50px !important;

    padding:
      0 15px !important;

    font-size:
      16px !important;
  }


  #fullMap
  .leaflet-top.leaflet-left {

    top:
      calc(
        70px +
        env(safe-area-inset-top)
      ) !important;

    left:
      10px !important;
  }


  #fullMap
  .leaflet-control-zoom a {

    width:
      40px !important;

    height:
      40px !important;

    line-height:
      40px !important;
  }


  .target-layer-open-btn {

    top:
      calc(
        10px +
        env(safe-area-inset-top)
      ) !important;

    right:
      10px !important;

    width:
      50px !important;

    height:
      50px !important;
  }


  /*
    Mobile Layers เป็น Drawer
    จากด้านขวา
  */

  .target-layer-panel {

    top:
      calc(
        68px +
        env(safe-area-inset-top)
      ) !important;

    right:
      8px !important;

    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      min(
        310px,
        calc(100vw - 24px)
      ) !important;
  }


  .target-edit-btn {

    left:
      10px !important;

    bottom:
      calc(
        132px +
        env(safe-area-inset-bottom)
      ) !important;

    min-height:
      44px !important;

    min-width:
      92px !important;
  }


  /*
    Analysis ลอยเหนือ Radius
  */

  .target-analysis-condition {

    left:
      10px !important;

    right:
      10px !important;

    bottom:
      calc(
        64px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      auto !important;

    display:
      block !important;

    padding:
      8px 10px !important;
  }


  /*
    บนมือถือซ่อนรายละเอียดเงื่อนไข
    แต่ปุ่มวิเคราะห์ยังอยู่
  */

  .target-condition-row {

    display:
      none;
  }


  .target-analysis-action {

    min-height:
      56px !important;
  }


  .target-analysis-action em {

    display:
      none;
  }


  /*
    Radius เป็นแถบบางล่างสุด
  */

  .target-radius-panel {

    left:
      10px !important;

    right:
      10px !important;

    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      auto !important;

    height:
      48px !important;

    grid-template-columns:
      112px
      minmax(0,1fr) !important;

    gap:
      6px !important;

    padding:
      4px 8px !important;
  }


  .target-radius-title {

    font-size:
      10px !important;

    white-space:
      normal;
  }


  .target-radius-title strong {

    display:
      block;

    margin:
      0 !important;
  }


  .target-radius-labels {

    font-size:
      7px !important;
  }


  .dootee-radius-marker-pin {

    width:
      34px;

    height:
      34px;
  }


  .dootee-radius-marker-pin::after {

    left:
      10px;

    top:
      10px;
  }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media
(max-width: 420px) {

  .target-analysis-condition {

    bottom:
      calc(
        61px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  .target-analysis-action {

    font-size:
      12px;
  }


  .target-analysis-action strong {

    font-size:
      15px !important;
  }


  .target-radius-panel {

    height:
      45px !important;

    grid-template-columns:
      92px minmax(0,1fr) !important;
  }


  .target-radius-labels
  span:nth-child(even) {

    display:
      none;
  }
}

=== FINAL GLASS CSS ADDED ===cat


/* =========================================================
   DOOTEE IMAGE 2 FINAL OVERRIDE V7
   ========================================================= */

:root {

  --dt2-glass:
    rgba(7, 45, 56, .42);

  --dt2-glass-strong:
    rgba(7, 45, 56, .55);

  --dt2-border:
    rgba(190, 226, 238, .62);

  --dt2-text:
    #ffffff;

  --dt2-green:
    #39ef23;
}


/* =========================================================
   ALL PANELS = TRANSPARENT GLASS
   ========================================================= */

.target-analysis-condition,
.target-radius-panel,
.target-layer-panel,
.dootee-drawer,
.analysis-stat,
.analysis-section {

  background:
    var(--dt2-glass) !important;

  border:
    1px solid var(--dt2-border) !important;

  color:
    var(--dt2-text) !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.20) !important;

  -webkit-backdrop-filter:
    blur(5px)
    saturate(115%) !important;

  backdrop-filter:
    blur(5px)
    saturate(115%) !important;
}


.target-analysis-condition,
.target-radius-panel,
.target-layer-panel {

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.95);
}


/* =========================================================
   INSPECT
   ========================================================= */

.target-inspect-btn {

  top:
    18px !important;

  left:
    27px !important;

  min-height:
    72px !important;

  padding:
    0 30px !important;

  border-radius:
    12px !important;

  font-size:
    21px !important;
}


/* =========================================================
   LEAFLET +/-
   ========================================================= */

#fullMap
.leaflet-top.leaflet-left {

  top:
    110px !important;

  left:
    27px !important;
}


#fullMap
.leaflet-control-zoom {

  border:
    1px solid
    var(--dt2-border) !important;

  border-radius:
    9px !important;

  background:
    transparent !important;
}


#fullMap
.leaflet-control-zoom a {

  width:
    50px !important;

  height:
    54px !important;

  line-height:
    54px !important;

  background:
    rgba(7,45,56,.46) !important;

  color:
    #fff !important;

  font-size:
    28px !important;

  border-color:
    rgba(255,255,255,.26) !important;

  -webkit-backdrop-filter:
    blur(5px);

  backdrop-filter:
    blur(5px);
}


/* =========================================================
   LAYER = ONE COMPLETE PANEL
   ========================================================= */

.target-layer-panel {

  top:
    18px !important;

  right:
    27px !important;

  bottom:
    auto !important;

  width:
    335px !important;

  max-height:
    calc(100vh - 36px) !important;

  border-radius:
    12px !important;

  overflow-y:
    auto !important;

  z-index:
    7800 !important;

  transition:
    width .20s ease,
    max-height .20s ease;
}


/*
  Header itself is now the Layer button
*/

.target-layer-header {

  position:
    sticky;

  top:
    0;

  z-index:
    3;

  width:
    100%;

  min-height:
    73px !important;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    space-between !important;

  padding:
    0 19px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.34) !important;

  border-radius:
    11px 11px 0 0;

  background:
    rgba(7,45,56,.38) !important;

  color:
    #fff;

  cursor:
    pointer;

  font-size:
    17px;

  text-align:
    left;

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);
}


.target-layer-header-left {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}


.target-layer-main-icon {

  font-size:
    32px;

  line-height:
    1;
}


.target-layer-arrow {

  font-size:
    25px;

  font-weight:
    900;
}


/*
  Layer collapsed:
  ยังเหลือ Header ให้กดเปิดกลับ
*/

.target-layer-panel.layer-collapsed {

  width:
    245px !important;

  max-height:
    73px !important;

  overflow:
    hidden !important;
}


.target-layer-panel.layer-collapsed
.target-layer-section,

.target-layer-panel.layer-collapsed
.target-layer-reset {

  display:
    none !important;
}


/* Layer section more like Image 2 */

.target-layer-section {

  padding:
    13px 19px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.35) !important;
}


.target-layer-heading {

  color:
    var(--dt2-green) !important;

  font-size:
    15px !important;

  margin-bottom:
    10px !important;
}


.target-layer-radio,
.target-layer-check {

  min-height:
    38px !important;

  font-size:
    14px !important;
}


.target-layer-radio input,
.target-layer-check input {

  width:
    21px !important;

  height:
    21px !important;
}


/* =========================================================
   EDIT
   ========================================================= */

.target-edit-btn {

  left:
    27px !important;

  bottom:
    302px !important;

  min-width:
    150px !important;

  min-height:
    64px !important;

  border-radius:
    10px !important;

  background:
    rgba(7,45,56,.43) !important;

  border:
    1px solid
    var(--dt2-border) !important;

  color:
    #fff !important;

  font-size:
    20px !important;

  opacity:
    1 !important;

  cursor:
    pointer !important;
}


/*
  Edit ต้องไม่ Disable visually
*/

.target-edit-btn:disabled {

  opacity:
    1 !important;

  cursor:
    pointer !important;
}


/* =========================================================
   ANALYSIS CONDITIONS
   ========================================================= */

.target-analysis-condition {

  left:
    27px !important;

  right:
    390px !important;

  bottom:
    112px !important;

  width:
    auto !important;

  min-height:
    188px !important;

  padding:
    15px 20px !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(400px,.75fr) !important;

  gap:
    22px !important;

  border-radius:
    11px !important;
}


.target-condition-toggle {

  font-size:
    18px !important;

  min-height:
    38px !important;
}


.target-condition-row {

  min-height:
    36px !important;

  font-size:
    14px !important;
}


.target-condition-check {

  font-size:
    24px !important;
}


.target-analysis-action {

  min-height:
    155px !important;

  border-radius:
    10px !important;

  background:
    rgba(7,45,56,.32) !important;

  border:
    1px solid
    rgba(225,244,249,.65) !important;
}


.target-analysis-action:not(:disabled) {

  background:
    rgba(30,153,43,.54) !important;
}


/* Analysis collapsed */

.target-analysis-condition.compact-hidden {

  left:
    27px !important;

  right:
    auto !important;

  bottom:
    112px !important;

  width:
    330px !important;

  height:
    52px !important;

  min-height:
    52px !important;

  max-height:
    52px !important;

  padding:
    6px 14px !important;
}


/* =========================================================
   RADIUS
   Full width like Image 2
   ========================================================= */

.target-radius-panel {

  left:
    27px !important;

  right:
    27px !important;

  bottom:
    18px !important;

  width:
    auto !important;

  height:
    73px !important;

  min-height:
    73px !important;

  padding:
    8px 20px !important;

  grid-template-columns:
    280px minmax(0,1fr) !important;

  gap:
    18px !important;

  border-radius:
    11px !important;

  z-index:
    7300 !important;
}


.target-radius-title {

  font-size:
    15px !important;

  font-weight:
    800 !important;
}


.target-radius-title strong {

  font-size:
    18px !important;

  color:
    var(--dt2-green) !important;
}


#workspaceRadiusSlider {

  height:
    22px !important;
}


.target-radius-labels {

  font-size:
    11px !important;

  margin-top:
    3px !important;
}


/* =========================================================
   REMOVE OLD MAP MARKER VISUALLY
   Radius custom marker remains visible
   ========================================================= */

#fullMap
.leaflet-marker-icon:not(.dootee-radius-marker) {

  /*
    Marker เดิมจะจัดการด้วย JS
    CSS ไม่ hide ทุก marker เพราะอนาคต Layer POI ต้องใช้
  */
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media
(max-width: 900px) {

  .target-layer-panel {

    top:
      calc(
        10px +
        env(safe-area-inset-top)
      ) !important;

    right:
      10px !important;

    width:
      min(
        320px,
        calc(100vw - 20px)
      ) !important;

    max-height:
      calc(
        100dvh -
        90px
      ) !important;
  }


  .target-layer-panel.layer-collapsed {

    width:
      205px !important;

    max-height:
      58px !important;
  }


  .target-layer-header {

    min-height:
      58px !important;

    padding:
      0 14px !important;
  }


  .target-inspect-btn {

    top:
      calc(
        10px +
        env(safe-area-inset-top)
      ) !important;

    left:
      10px !important;

    min-height:
      54px !important;
  }


  #fullMap
  .leaflet-top.leaflet-left {

    top:
      calc(
        76px +
        env(safe-area-inset-top)
      ) !important;

    left:
      10px !important;
  }


  .target-edit-btn {

    left:
      10px !important;

    bottom:
      calc(
        184px +
        env(safe-area-inset-bottom)
      ) !important;

    min-width:
      105px !important;

    min-height:
      48px !important;

    font-size:
      16px !important;
  }


  .target-analysis-condition {

    left:
      10px !important;

    right:
      10px !important;

    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      auto !important;

    min-height:
      92px !important;

    display:
      block !important;

    padding:
      9px 11px !important;
  }


  .target-condition-row {

    display:
      none !important;
  }


  .target-condition-toggle {

    min-height:
      28px !important;

    font-size:
      14px !important;
  }


  .target-analysis-action {

    min-height:
      50px !important;
  }


  .target-analysis-action em {

    display:
      none !important;
  }


  .target-analysis-condition.compact-hidden {

    left:
      10px !important;

    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      235px !important;

    height:
      42px !important;

    min-height:
      42px !important;

    max-height:
      42px !important;
  }


  .target-radius-panel {

    left:
      10px !important;

    right:
      10px !important;

    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      ) !important;

    height:
      62px !important;

    min-height:
      62px !important;

    grid-template-columns:
      135px
      minmax(0,1fr) !important;

    padding:
      5px 9px !important;

    gap:
      8px !important;
  }


  .target-radius-title {

    font-size:
      11px !important;
  }


  .target-radius-title strong {

    display:
      block;
  }


  .target-radius-labels {

    font-size:
      7px !important;
  }
}


@media
(max-width: 480px) {

  .target-inspect-btn {

    max-width:
      180px;
  }


  .target-layer-main-icon {

    font-size:
      24px;
  }


  .target-layer-panel.layer-collapsed {

    width:
      155px !important;
  }


  .target-radius-panel {

    grid-template-columns:
      88px
      minmax(0,1fr) !important;
  }


  .target-radius-labels
  span:nth-child(even) {

    display:
      none;
  }
}



/* =========================================================
   DOOTEE IMAGE2 VISUAL TUNING V8
   ========================================================= */

:root {
  --dt-panel-bg: rgba(7, 47, 58, .58);
  --dt-panel-border: rgba(177, 216, 226, .72);
  --dt-panel-text: #ffffff;
  --dt-panel-green: #43ef2c;
}


/* =========================================================
   PANEL BACKGROUND — ใช้พื้นโทนเดียวกันทั้งหมด
   ========================================================= */

.target-analysis-condition,
.target-radius-panel,
.target-layer-panel,
.dootee-drawer,
.analysis-stat,
.analysis-section {

  background:
    var(--dt-panel-bg) !important;

  border:
    1px solid
    var(--dt-panel-border) !important;

  color:
    var(--dt-panel-text) !important;

  -webkit-backdrop-filter:
    blur(4px);

  backdrop-filter:
    blur(4px);

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.18) !important;
}


/* =========================================================
   ZOOM + / - ให้แคบลง
   ========================================================= */

#fullMap
.leaflet-control-zoom {

  width:
    42px !important;

  border-radius:
    8px !important;
}


#fullMap
.leaflet-control-zoom a {

  width:
    40px !important;

  height:
    42px !important;

  line-height:
    42px !important;

  font-size:
    23px !important;

  background:
    var(--dt-panel-bg) !important;

  color:
    #fff !important;
}


/* =========================================================
   EDIT — วางต่อจาก Zoom อย่างสมดุล
   ========================================================= */

.target-edit-btn {

  left:
    27px !important;

  bottom:
    300px !important;

  min-width:
    126px !important;

  min-height:
    54px !important;

  padding:
    0 17px !important;

  font-size:
    18px !important;

  border-radius:
    9px !important;

  background:
    var(--dt-panel-bg) !important;

  border:
    1px solid
    var(--dt-panel-border) !important;
}


/* =========================================================
   RADIUS PANEL
   ========================================================= */

.target-radius-panel {

  grid-template-columns:
    135px minmax(0,1fr) !important;

  height:
    70px !important;

  min-height:
    70px !important;

  padding:
    7px 18px !important;
}


/*
  ซ่อนคำยาวเดิม
*/

.target-radius-title {

  font-size:
    0 !important;

  white-space:
    nowrap;
}


/*
  สร้างคำสั้น:
  "รัศมี"
*/

.target-radius-title::before {

  content:
    "รัศมี";

  font-size:
    16px;

  font-weight:
    800;

  color:
    #fff;

  margin-right:
    9px;
}


/*
  ค่า 3 km / 5 km / ...
*/

.target-radius-title strong {

  display:
    inline !important;

  margin:
    0 !important;

  font-size:
    18px !important;

  color:
    var(--dt-panel-green) !important;
}


/* =========================================================
   RADIUS SLIDER
   ========================================================= */

.target-radius-control {

  width:
    100%;
}


#workspaceRadiusSlider {

  height:
    20px !important;
}


.target-radius-labels {

  font-size:
    11px !important;

  margin-top:
    2px !important;
}


/* =========================================================
   ANALYSIS PANEL
   ใช้สีเดียวกับ Radius / Layer
   ========================================================= */

.target-analysis-condition {

  background:
    var(--dt-panel-bg) !important;
}


.target-analysis-action {

  background:
    rgba(7,47,58,.45) !important;
}


.target-analysis-action:not(:disabled) {

  background:
    rgba(31,157,40,.63) !important;
}


/* =========================================================
   LAYER PANEL
   ========================================================= */

.target-layer-panel,
.target-layer-header {

  background:
    var(--dt-panel-bg) !important;
}


.target-layer-heading {

  color:
    var(--dt-panel-green) !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

  #fullMap
  .leaflet-control-zoom {

    width:
      38px !important;
  }


  #fullMap
  .leaflet-control-zoom a {

    width:
      36px !important;

    height:
      38px !important;

    line-height:
      38px !important;

    font-size:
      20px !important;
  }


  .target-edit-btn {

    left:
      10px !important;

    min-width:
      98px !important;

    min-height:
      46px !important;

    padding:
      0 12px !important;

    font-size:
      15px !important;
  }


  .target-radius-panel {

    grid-template-columns:
      90px minmax(0,1fr) !important;

    height:
      58px !important;

    min-height:
      58px !important;

    padding:
      5px 9px !important;
  }


  .target-radius-title::before {

    font-size:
      12px;
  }


  .target-radius-title strong {

    font-size:
      14px !important;
  }
}


@media (max-width: 480px) {

  .target-radius-panel {

    grid-template-columns:
      74px minmax(0,1fr) !important;
  }


  .target-radius-title::before {

    font-size:
      11px;
  }


  .target-radius-title strong {

    font-size:
      12px !important;
  }
}



/* =========================================================
   DOOTEE COMPACT WORKSPACE V9
   ========================================================= */

:root {
  --dt9-panel: rgba(7, 47, 58, .58);
  --dt9-border: rgba(177, 216, 226, .70);
  --dt9-text: #ffffff;
  --dt9-green: #43ef2c;
}


/* =========================================================
   BUTTON SCALE DOWN
   ========================================================= */

.target-inspect-btn {
  top: 16px !important;
  left: 22px !important;

  min-height: 54px !important;
  padding: 0 20px !important;

  font-size: 17px !important;
  border-radius: 9px !important;
}

.target-search-icon {
  font-size: 21px !important;
  margin-right: 7px !important;
}


/* Edit ใต้ ตรวจดูที่ดิน */

.target-edit-btn {
  top: 80px !important;
  left: 22px !important;
  bottom: auto !important;

  min-width: 104px !important;
  min-height: 42px !important;

  padding: 0 13px !important;

  font-size: 15px !important;

  border-radius: 8px !important;

  background: var(--dt9-panel) !important;
  border: 1px solid var(--dt9-border) !important;

  color: #fff !important;
}

.target-edit-btn.edit-active {
  border-color: var(--dt9-green) !important;

  box-shadow:
    0 0 0 2px rgba(67,239,44,.15) !important;
}


/* =========================================================
   ZOOM ย้ายลงใต้ Edit และเล็กลง
   ========================================================= */

#fullMap .leaflet-top.leaflet-left {
  top: 132px !important;
  left: 22px !important;
}

#fullMap .leaflet-control-zoom {
  width: 36px !important;

  border-radius: 7px !important;

  overflow: hidden;

  background: transparent !important;
}

#fullMap .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;

  line-height: 34px !important;

  font-size: 19px !important;

  background: var(--dt9-panel) !important;

  color: #fff !important;

  border-color:
    rgba(255,255,255,.20) !important;
}


/* =========================================================
   LAYER COMPACT
   ========================================================= */

.target-layer-panel {
  top: 16px !important;
  right: 22px !important;

  width: 270px !important;

  max-height:
    calc(100vh - 32px) !important;

  border-radius: 9px !important;
}

.target-layer-header {
  min-height: 54px !important;

  padding: 0 13px !important;

  font-size: 15px !important;
}

.target-layer-main-icon {
  font-size: 25px !important;
}

.target-layer-header-left {
  gap: 9px !important;
}

.target-layer-arrow {
  font-size: 19px !important;
}

.target-layer-section {
  padding: 9px 13px !important;
}

.target-layer-heading {
  margin-bottom: 6px !important;

  font-size: 13px !important;
}

.target-layer-radio,
.target-layer-check {
  min-height: 31px !important;

  gap: 8px !important;

  font-size: 12px !important;
}

.target-layer-radio input,
.target-layer-check input {
  width: 18px !important;
  height: 18px !important;
}

.target-layer-reset {
  min-height: 38px !important;

  margin: 10px 12px !important;

  width: calc(100% - 24px) !important;
}


/* Layer ย่อแล้วเหลือหัวเล็ก */

.target-layer-panel.layer-collapsed {
  width: 180px !important;
  max-height: 54px !important;
}


/* =========================================================
   ANALYSIS — สลับซ้ายขวา
   ซ้าย = วิเคราะห์พื้นที่
   ขวา = เงื่อนไข
   ========================================================= */

.target-analysis-condition {
  left: 22px !important;
  right: 310px !important;

  bottom: 76px !important;

  min-height: 136px !important;

  padding: 10px 12px !important;

  grid-template-columns:
    minmax(260px,.62fr)
    minmax(0,1fr) !important;

  gap: 12px !important;
}


/*
  บังคับ Analysis Action ไปซ้าย
*/

.target-analysis-action {
  grid-column: 1 !important;
  grid-row: 1 !important;

  min-height: 112px !important;

  padding: 9px !important;

  font-size: 13px !important;
}


/*
  เงื่อนไขไปขวา
*/

.target-condition-left {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.target-condition-toggle {
  min-height: 28px !important;

  font-size: 15px !important;
}

.target-condition-row {
  min-height: 27px !important;

  font-size: 12px !important;
}

.target-condition-check {
  width: 18px !important;

  font-size: 18px !important;
}

.target-analysis-icon {
  font-size: 22px !important;
}

.target-analysis-action strong {
  font-size: 17px !important;
}


/* =========================================================
   COLLAPSED ANALYSIS
   ย่อแล้วแสดง "วิเคราะห์พื้นที่"
   ========================================================= */

.target-analysis-condition.compact-hidden {
  left: 22px !important;
  right: auto !important;

  bottom: 76px !important;

  width: 190px !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  display: block !important;

  padding: 5px 10px !important;
}

.target-analysis-condition.compact-hidden
.target-condition-left {
  display: block !important;
}

.target-analysis-condition.compact-hidden
.target-condition-toggle {
  margin: 0 !important;

  min-height: 32px !important;

  font-size: 0 !important;
}


/*
  เปลี่ยนข้อความตอนย่อ
*/

.target-analysis-condition.compact-hidden
.target-condition-toggle::before {
  content: "วิเคราะห์พื้นที่";

  font-size: 14px;

  font-weight: 800;

  color: #fff;
}

.target-analysis-condition.compact-hidden
#analysisPanelArrow {
  font-size: 18px !important;
}

.target-analysis-condition.compact-hidden
.target-condition-row,
.target-analysis-condition.compact-hidden
.target-analysis-action {
  display: none !important;
}


/* =========================================================
   RADIUS COMPACT
   ========================================================= */

.target-radius-panel {
  left: 22px !important;
  right: 22px !important;

  bottom: 14px !important;

  height: 50px !important;
  min-height: 50px !important;

  padding: 4px 12px !important;

  grid-template-columns:
    88px minmax(0,1fr) !important;

  gap: 9px !important;
}

.target-radius-title::before {
  content: "รัศมี" !important;

  font-size: 12px !important;

  margin-right: 5px !important;
}

.target-radius-title strong {
  font-size: 14px !important;
}

#workspaceRadiusSlider {
  height: 16px !important;
}

.target-radius-labels {
  font-size: 8px !important;

  margin-top: -1px !important;
}


/* =========================================================
   DRAW / EDIT MODE
   ========================================================= */

body.parcel-editing
.target-edit-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.parcel-editing
.target-edit-btn.edit-active {
  background:
    rgba(15, 78, 83, .78) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .target-layer-panel {
    width: 235px !important;
  }

  .target-analysis-condition {
    right: 265px !important;

    grid-template-columns:
      230px minmax(0,1fr) !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .target-inspect-btn {
    top:
      calc(8px + env(safe-area-inset-top))
      !important;

    left: 8px !important;

    min-height: 46px !important;

    padding: 0 13px !important;

    font-size: 14px !important;
  }


  .target-edit-btn {
    top:
      calc(62px + env(safe-area-inset-top))
      !important;

    left: 8px !important;

    min-width: 84px !important;

    min-height: 38px !important;

    font-size: 13px !important;
  }


  #fullMap
  .leaflet-top.leaflet-left {
    top:
      calc(108px + env(safe-area-inset-top))
      !important;

    left: 8px !important;
  }


  #fullMap
  .leaflet-control-zoom {
    width: 32px !important;
  }


  #fullMap
  .leaflet-control-zoom a {
    width: 30px !important;

    height: 31px !important;

    line-height: 31px !important;

    font-size: 17px !important;
  }


  .target-layer-panel {
    top:
      calc(8px + env(safe-area-inset-top))
      !important;

    right: 8px !important;

    width:
      min(235px, calc(100vw - 20px))
      !important;
  }


  .target-layer-panel.layer-collapsed {
    width: 155px !important;
  }


  .target-analysis-condition {
    left: 8px !important;
    right: 8px !important;

    bottom:
      calc(
        62px +
        env(safe-area-inset-bottom)
      ) !important;

    display: block !important;

    min-height: 72px !important;
  }


  .target-condition-left {
    display: none !important;
  }


  .target-analysis-action {
    min-height: 54px !important;
  }


  .target-analysis-condition.compact-hidden {
    left: 8px !important;

    bottom:
      calc(
        62px +
        env(safe-area-inset-bottom)
      ) !important;

    width: 160px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }


  .target-radius-panel {
    left: 8px !important;
    right: 8px !important;

    bottom:
      calc(
        7px +
        env(safe-area-inset-bottom)
      ) !important;

    height: 45px !important;
    min-height: 45px !important;

    grid-template-columns:
      65px minmax(0,1fr) !important;
  }


  .target-radius-title::before {
    font-size: 10px !important;
  }


  .target-radius-title strong {
    font-size: 11px !important;
  }


  .target-radius-labels {
    font-size: 6px !important;
  }
}



/* =========================================================
   DOOTEE ACTION COLOR SYSTEM V11
   ========================================================= */

/*
  Primary action เพียงตัวเดียว
*/
#startAnalysisBtn,
.dootee-primary-action {
  background:
    linear-gradient(
      180deg,
      #67d744,
      #42b92f
    ) !important;

  color:
    #071c0d !important;

  border:
    1px solid
    rgba(133,255,103,.80) !important;

  font-weight:
    800 !important;
}


/*
  ไปยังตำแหน่ง
  เปลี่ยนจากเขียวเป็นน้ำเงินเข้ม
*/

#goLocationBtn,
button[onclick*="goLocation"] {
  background:
    rgba(21, 84, 106, .90) !important;

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(110,190,214,.62) !important;
}


/*
  Current Location
  เป็นสีรองอีกระดับ
*/

#myLocationBtn,
button[onclick*="myLocation"] {
  background:
    rgba(28, 70, 86, .90) !important;

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(124,171,190,.50) !important;
}


/*
  ไม่ให้ปุ่มใน Form บังความหมายของ Primary
*/

.land-data-drawer button:not(#startAnalysisBtn) {
  box-shadow:
    none !important;
}


/*
  Form panel ให้สีเดียวกับ UI หลัก
*/

#landDataDrawer,
#landDataDrawer .left-column,
#landDataDrawer .card,
#landDataDrawer .section,
#landDataDrawer .form-section {
  background:
    rgba(7,47,58,.58) !important;

  color:
    #fff !important;
}



/* =========================================================
   DOOTEE ANALYSIS PRIMARY ACTION V12
   ========================================================= */

#startAnalysisBtn {
  width: 100% !important;

  min-height: 54px !important;

  background:
    linear-gradient(
      180deg,
      #67d744,
      #43ba31
    ) !important;

  color:
    #071c0d !important;

  border:
    1px solid
    rgba(143,255,111,.82) !important;

  font-weight: 800 !important;

  cursor: pointer !important;
}


/*
  Edit ไม่ใช้สีเขียวทึบ
  เพราะเป็นเครื่องมือ ไม่ใช่ Final Action
*/

#workspaceEditBtn {
  background:
    rgba(7,47,58,.64) !important;

  color:
    #fff !important;
}


/*
  Edit active ใช้แค่เส้นเขียว
  เพื่อบอกว่าอยู่ในโหมดแก้ไข
*/

#workspaceEditBtn.edit-active {
  background:
    rgba(7,47,58,.72) !important;

  border-color:
    #48e83b !important;

  box-shadow:
    0 0 0 2px
    rgba(72,232,59,.15) !important;
}



/* =========================================================
   PANEL TOGGLE BUTTONS V13
   ========================================================= */

.panel-toggle-symbol {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 42px !important;
  min-height: 34px !important;

  padding: 2px 8px !important;

  border-radius: 8px !important;

  background:
    rgba(29, 121, 145, .72) !important;

  border:
    1px solid rgba(131, 223, 245, .86) !important;

  color:
    #ffffff !important;

  font-size: 22px !important;

  font-weight: 900 !important;

  line-height: 1 !important;

  letter-spacing: -3px !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.9) !important;

  box-shadow:
    0 2px 8px rgba(0,0,0,.28) !important;
}


/* =========================================================
   LAND DATA DRAWER TOGGLE
   ========================================================= */

#closeLandDataBtn {
  width: auto !important;
  min-width: 52px !important;

  height: 44px !important;

  padding: 0 !important;

  border: 0 !important;

  background:
    transparent !important;

  cursor: pointer !important;
}


#closeLandDataBtn:hover
.panel-toggle-symbol {
  background:
    rgba(42, 165, 191, .90) !important;

  border-color:
    #b8f3ff !important;
}


/* =========================================================
   ANALYSIS TOGGLE
   ========================================================= */

#analysisPanelToggle {
  cursor: pointer !important;
}


#analysisPanelArrow {
  margin-left: 12px !important;
}


/* =========================================================
   LAYER TOGGLE
   ========================================================= */

#layerHeaderArrow {
  flex: 0 0 auto !important;

  margin-left: 12px !important;
}


/* =========================================================
   ACTIVE / COLLAPSED VISUAL
   ========================================================= */

.target-layer-panel.layer-collapsed
#layerHeaderArrow,

.target-analysis-condition.compact-hidden
#analysisPanelArrow {
  background:
    rgba(51, 181, 80, .76) !important;

  border-color:
    rgba(117, 255, 141, .92) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .panel-toggle-symbol {
    min-width: 36px !important;
    min-height: 30px !important;

    padding: 2px 6px !important;

    font-size: 18px !important;

    border-radius: 7px !important;
  }


  #closeLandDataBtn {
    min-width: 44px !important;
    height: 38px !important;
  }
}



/* =========================================================
   DOOTEE UI COLLISION FIX V16
   FINAL OVERRIDE
   ========================================================= */


/* =========================================================
   NORMAL STACK ORDER
   ========================================================= */

.target-inspect-btn,
.target-edit-btn,
#fullMap .leaflet-control-zoom {
  z-index: 8200 !important;
}

.target-layer-panel {
  z-index: 8300 !important;
}

.target-analysis-condition {
  z-index: 8100 !important;
}

.target-radius-panel {
  z-index: 8050 !important;
}


/* =========================================================
   PARCEL TOOLBAR MUST ALWAYS BE CLICKABLE
   ========================================================= */

.parcel-toolbar {
  z-index: 20000 !important;

  pointer-events: auto !important;

  opacity: 1 !important;

  visibility: visible;
}

.parcel-toolbar button {
  position: relative;

  z-index: 20001 !important;

  pointer-events: auto !important;

  touch-action: manipulation;

  cursor: pointer;
}


/*
  ยกเลิกต้องกดได้เสมอ
*/

#parcelCancelBtn {
  pointer-events: auto !important;

  opacity: 1 !important;

  cursor: pointer !important;
}


/* =========================================================
   EDIT MODE
   ซ่อน UI ที่ไม่ต้องใช้จริง ๆ
   ไม่ใช่แค่ทำให้โปร่ง
   ========================================================= */

body.parcel-editing
.target-layer-panel,

body.parcel-editing
.target-analysis-condition,

body.parcel-editing
.target-radius-panel {
  display: none !important;
}


/*
  ตรวจดูที่ดินยังแสดงได้
  Edit ยังแสดงและ active
*/

body.parcel-editing
.target-inspect-btn,
body.parcel-editing
.target-edit-btn,
body.parcel-editing
#fullMap .leaflet-control-zoom {
  display: flex !important;

  opacity: 1 !important;

  pointer-events: auto !important;
}


/* =========================================================
   ANALYSIS NORMAL MODE
   ========================================================= */

.target-analysis-condition {
  pointer-events: auto !important;
}

.target-condition-left {
  display: block !important;
}

.target-condition-toggle {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;

  pointer-events: auto !important;
}

#analysisPanelArrow {
  display: inline-flex !important;

  flex: 0 0 auto;

  visibility: visible !important;

  opacity: 1 !important;
}


/* =========================================================
   COLLAPSED ANALYSIS
   ========================================================= */

.target-analysis-condition.compact-hidden {
  display: block !important;

  width: 205px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  overflow: hidden !important;

  padding: 5px 8px !important;
}

.target-analysis-condition.compact-hidden
.target-condition-left {
  display: block !important;
}

.target-analysis-condition.compact-hidden
.target-condition-toggle {
  display: flex !important;

  min-height: 34px !important;

  margin: 0 !important;

  font-size: 0 !important;
}

.target-analysis-condition.compact-hidden
.target-condition-toggle::before {
  content: "วิเคราะห์พื้นที่";

  font-size: 14px;

  font-weight: 800;

  color: #fff;
}

.target-analysis-condition.compact-hidden
.target-condition-row,
.target-analysis-condition.compact-hidden
.target-analysis-action {
  display: none !important;
}


/* =========================================================
   LAYER TOGGLE ALWAYS VISIBLE
   ========================================================= */

.target-layer-header {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}

#layerHeaderArrow {
  display: inline-flex !important;

  visibility: visible !important;

  opacity: 1 !important;

  flex: 0 0 auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /*
    Analysis ต้องแสดงรายละเอียดครบเมื่อเปิด
  */

  .target-analysis-condition:not(.compact-hidden) {
    display: grid !important;

    left: 8px !important;
    right: 8px !important;

    bottom:
      calc(
        60px +
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    grid-template-columns:
      1fr !important;

    gap: 8px !important;

    padding: 9px !important;
  }


  /*
    อย่าซ่อนเงื่อนไขบนมือถืออีก
  */

  .target-analysis-condition:not(.compact-hidden)
  .target-condition-left {
    display: block !important;
  }

  .target-analysis-condition:not(.compact-hidden)
  .target-condition-row {
    display: flex !important;

    min-height: 27px !important;

    font-size: 12px !important;
  }


  /*
    ปุ่มวิเคราะห์อยู่ต่อจากเงื่อนไข
  */

  .target-analysis-condition:not(.compact-hidden)
  .target-analysis-action {
    display: flex !important;

    min-height: 60px !important;

    margin-top: 4px !important;
  }


  /*
    ตอนย่อ ต้องยังเห็นปุ่ม >>
  */

  .target-analysis-condition.compact-hidden {
    left: 8px !important;
    right: auto !important;

    bottom:
      calc(
        60px +
        env(safe-area-inset-bottom)
      ) !important;

    width: 176px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    z-index: 8400 !important;
  }


  #analysisPanelArrow {
    min-width: 34px !important;
    min-height: 28px !important;

    font-size: 17px !important;
  }


  /*
    Layer collapsed ต้องคงหัวไว้
  */

  .target-layer-panel.layer-collapsed {
    display: block !important;

    width: 165px !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    overflow: hidden !important;
  }

  .target-layer-panel.layer-collapsed
  .target-layer-header {
    height: 46px !important;
    min-height: 46px !important;
  }


  /*
    Toolbar มือถือ:
    อยู่เหนือ Radius และเหนือทุก Panel
  */

  .parcel-toolbar {
    position: fixed !important;

    left: 8px !important;
    right: 8px !important;

    bottom:
      calc(
        62px +
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;

    max-width: none !important;

    z-index: 30000 !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 6px !important;

    padding: 7px !important;

    background:
      rgba(4,27,36,.90) !important;
  }

  .parcel-toolbar button {
    min-width: 0 !important;

    min-height: 42px !important;

    padding: 5px 6px !important;

    font-size: 12px !important;
  }

  #parcelCancelBtn {
    grid-column: 1 / -1 !important;
  }

  .parcel-area-live {
    grid-column: 1 / -1 !important;

    text-align: center !important;
  }


  /*
    ตอน Edit ซ่อน Panel ทั้งหมดให้จริง
    เพื่อไม่ให้ Toolbar ถูกบัง
  */

  body.parcel-editing
  .target-analysis-condition,

  body.parcel-editing
  .target-radius-panel,

  body.parcel-editing
  .target-layer-panel {
    display: none !important;
  }
}



/* =========================================================
   DOOTEE BUTTON SIZE STABILITY V17
   ขนาดก่อน/หลังคลิกต้องเท่ากัน
   ========================================================= */


/* ---------------------------------------------------------
   INSPECT
   --------------------------------------------------------- */

.target-inspect-btn,
.target-inspect-btn:hover,
.target-inspect-btn:active,
.target-inspect-btn:focus {
  width: 198px !important;
  height: 58px !important;

  min-width: 198px !important;
  max-width: 198px !important;

  min-height: 58px !important;
  max-height: 58px !important;

  padding: 0 18px !important;

  box-sizing: border-box !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   EDIT
   --------------------------------------------------------- */

.target-edit-btn,
.target-edit-btn:hover,
.target-edit-btn:active,
.target-edit-btn:focus,
.target-edit-btn.edit-active {
  width: 134px !important;
  height: 52px !important;

  min-width: 134px !important;
  max-width: 134px !important;

  min-height: 52px !important;
  max-height: 52px !important;

  padding: 0 14px !important;

  box-sizing: border-box !important;

  transform: none !important;

  font-size: 16px !important;
}


/*
  Active เปลี่ยนเฉพาะสี
  ห้ามเพิ่ม border width
*/

.target-edit-btn.edit-active {
  border-width: 1px !important;

  outline: none !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(67,239,44,.65) !important;
}


/* ---------------------------------------------------------
   ZOOM
   --------------------------------------------------------- */

#fullMap .leaflet-control-zoom,
#fullMap .leaflet-control-zoom:hover {
  width: 38px !important;

  box-sizing: border-box !important;
}

#fullMap .leaflet-control-zoom a,
#fullMap .leaflet-control-zoom a:hover,
#fullMap .leaflet-control-zoom a:active {
  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  max-width: 36px !important;

  min-height: 36px !important;
  max-height: 36px !important;

  line-height: 36px !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   PANEL TOGGLE
   << / >>
   --------------------------------------------------------- */

.panel-toggle-symbol,
.panel-toggle-symbol:hover,
.panel-toggle-symbol:active {
  width: 48px !important;
  height: 38px !important;

  min-width: 48px !important;
  max-width: 48px !important;

  min-height: 38px !important;
  max-height: 38px !important;

  box-sizing: border-box !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   PARCEL TOOLBAR
   --------------------------------------------------------- */

.parcel-toolbar button,
.parcel-toolbar button:hover,
.parcel-toolbar button:active,
.parcel-toolbar button:focus {
  height: 48px !important;

  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 15px !important;

  box-sizing: border-box !important;

  transform: none !important;

  border-width: 1px !important;
}


/* Undo disabled ห้ามหด */

#parcelUndoBtn:disabled {
  height: 48px !important;

  min-height: 48px !important;

  opacity: .45;
}


/* =========================================================
   EDIT MODE
   ========================================================= */

body.parcel-editing
.target-edit-btn {
  width: 134px !important;
  height: 52px !important;
}


/* =========================================================
   AFTER FINISH
   Edit ซ่อนจริง
   ========================================================= */

.target-edit-btn[hidden] {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .target-inspect-btn,
  .target-inspect-btn:hover,
  .target-inspect-btn:active {
    width: 158px !important;
    height: 50px !important;

    min-width: 158px !important;
    max-width: 158px !important;

    min-height: 50px !important;
    max-height: 50px !important;
  }


  .target-edit-btn,
  .target-edit-btn:hover,
  .target-edit-btn:active,
  .target-edit-btn.edit-active {
    width: 106px !important;
    height: 44px !important;

    min-width: 106px !important;
    max-width: 106px !important;

    min-height: 44px !important;
    max-height: 44px !important;
  }


  #fullMap .leaflet-control-zoom {
    width: 34px !important;
  }


  #fullMap .leaflet-control-zoom a,
  #fullMap .leaflet-control-zoom a:hover,
  #fullMap .leaflet-control-zoom a:active {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    max-width: 32px !important;

    min-height: 32px !important;
    max-height: 32px !important;

    line-height: 32px !important;
  }


  .panel-toggle-symbol,
  .panel-toggle-symbol:hover,
  .panel-toggle-symbol:active {
    width: 42px !important;
    height: 34px !important;

    min-width: 42px !important;
    max-width: 42px !important;

    min-height: 34px !important;
    max-height: 34px !important;
  }


  .parcel-toolbar button,
  .parcel-toolbar button:hover,
  .parcel-toolbar button:active {
    height: 44px !important;

    min-height: 44px !important;
    max-height: 44px !important;
  }
}



/* =========================================================
   DOOTEE UI NORMALIZE V18
   Font / Button / Zoom Final Fix
   ========================================================= */

:root {
  --dt-ui-font-size: 16px;
  --dt-ui-font-weight: 700;

  --dt-btn-height: 48px;
  --dt-btn-radius: 8px;
}


/* =========================================================
   COMMON FONT
   ========================================================= */

.target-inspect-btn,
.target-edit-btn,
.target-layer-header,
.target-condition-toggle,
.target-analysis-action,
.target-radius-title,
.panel-toggle-symbol,
.parcel-toolbar button,
#fullMap .leaflet-control-zoom a {

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:
    var(--dt-ui-font-size) !important;

  font-weight:
    var(--dt-ui-font-weight) !important;

  line-height:
    1.2 !important;
}


/* =========================================================
   INSPECT
   ========================================================= */

.target-inspect-btn {

  width:
    198px !important;

  height:
    var(--dt-btn-height) !important;

  min-width:
    198px !important;

  max-width:
    198px !important;

  min-height:
    var(--dt-btn-height) !important;

  max-height:
    var(--dt-btn-height) !important;

  padding:
    0 16px !important;

  border-radius:
    var(--dt-btn-radius) !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   EDIT
   ========================================================= */

.target-edit-btn,
.target-edit-btn:hover,
.target-edit-btn:active,
.target-edit-btn:focus,
.target-edit-btn.edit-active {

  width:
    132px !important;

  height:
    var(--dt-btn-height) !important;

  min-width:
    132px !important;

  max-width:
    132px !important;

  min-height:
    var(--dt-btn-height) !important;

  max-height:
    var(--dt-btn-height) !important;

  padding:
    0 14px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  border-radius:
    var(--dt-btn-radius) !important;

  box-sizing:
    border-box !important;

  transform:
    none !important;
}


/* =========================================================
   ZOOM
   + และ - ต้องแสดงครบ
   ========================================================= */

#fullMap
.leaflet-control-zoom {

  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    38px !important;

  height:
    auto !important;

  min-height:
    76px !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  padding:
    0 !important;

  margin:
    0 !important;

  border-radius:
    7px !important;

  box-sizing:
    border-box !important;
}


#fullMap
.leaflet-control-zoom a,

#fullMap
.leaflet-control-zoom a:hover,

#fullMap
.leaflet-control-zoom a:active {

  display:
    flex !important;

  flex:
    0 0 37px !important;

  width:
    36px !important;

  height:
    37px !important;

  min-width:
    36px !important;

  max-width:
    36px !important;

  min-height:
    37px !important;

  max-height:
    37px !important;

  padding:
    0 !important;

  margin:
    0 !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  font-size:
    20px !important;

  line-height:
    37px !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;
}


/*
  เส้นแบ่งระหว่าง + และ -
*/

#fullMap
.leaflet-control-zoom-in {

  border-bottom:
    1px solid
    rgba(255,255,255,.25) !important;
}


#fullMap
.leaflet-control-zoom-out {

  display:
    flex !important;

  visibility:
    visible !important;

  opacity:
    1 !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.parcel-toolbar button,
.parcel-toolbar button:hover,
.parcel-toolbar button:active,
.parcel-toolbar button:focus {

  height:
    48px !important;

  min-height:
    48px !important;

  max-height:
    48px !important;

  padding:
    0 14px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  box-sizing:
    border-box !important;

  font-size:
    16px !important;

  line-height:
    1 !important;

  transform:
    none !important;
}


/* =========================================================
   PANEL TOGGLE
   ========================================================= */

.panel-toggle-symbol,
.panel-toggle-symbol:hover,
.panel-toggle-symbol:active {

  width:
    46px !important;

  height:
    36px !important;

  min-width:
    46px !important;

  max-width:
    46px !important;

  min-height:
    36px !important;

  max-height:
    36px !important;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  font-size:
    20px !important;

  line-height:
    1 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  :root {
    --dt-ui-font-size:
      14px;

    --dt-btn-height:
      44px;
  }


  .target-inspect-btn {

    width:
      158px !important;

    min-width:
      158px !important;

    max-width:
      158px !important;
  }


  .target-edit-btn,
  .target-edit-btn:hover,
  .target-edit-btn:active,
  .target-edit-btn.edit-active {

    width:
      106px !important;

    min-width:
      106px !important;

    max-width:
      106px !important;
  }


  #fullMap
  .leaflet-control-zoom {

    width:
      34px !important;

    min-height:
      66px !important;

    overflow:
      visible !important;
  }


  #fullMap
  .leaflet-control-zoom a {

    flex:
      0 0 32px !important;

    width:
      32px !important;

    height:
      32px !important;

    min-width:
      32px !important;

    max-width:
      32px !important;

    min-height:
      32px !important;

    max-height:
      32px !important;

    font-size:
      18px !important;

    line-height:
      32px !important;
  }


  .parcel-toolbar button {

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

    font-size:
      13px !important;
  }


  .panel-toggle-symbol {

    width:
      40px !important;

    height:
      32px !important;

    min-width:
      40px !important;

    max-width:
      40px !important;

    min-height:
      32px !important;

    max-height:
      32px !important;

    font-size:
      17px !important;
  }
}


/* =========================================================
   LABEL
   ========================================================= */

#radiusWorkspaceBar
.dootee-radius-heading {
  grid-column:
    1 !important;

  grid-row:
    1 / 3 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    6px !important;

  width:
    175px !important;

  min-width:
    175px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  white-space:
    nowrap !important;

  position:
    relative !important;

  z-index:
    5 !important;
}


/*
  ซ่อนข้อความเดิม แล้วกำหนดคำเดียว
*/

#radiusWorkspaceBar
.dootee-radius-heading > span:first-child {
  font-size:
    0 !important;
}


#radiusWorkspaceBar
.dootee-radius-heading > span:first-child::after {
  content:
    "รัศมี (Radius)";

  font-size:
    14px !important;

  font-weight:
    800 !important;

  color:
    #ffffff !important;
}


/*
  ค่า 5 km
*/

#radiusWorkspaceBar
.dootee-radius-heading strong {
  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    3px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #43ef2c !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}


#workspaceRadiusValue {
  color:
    #43ef2c !important;

  font-size:
    inherit !important;

  font-weight:
    900 !important;
}


/* =========================================================
   SLIDER
   เริ่มหลัง Label เท่านั้น
   ========================================================= */

#workspaceRadiusSlider {
  grid-column:
    2 !important;

  grid-row:
    1 !important;

  position:
    relative !important;

  z-index:
    2 !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   SCALE
   อยู่ใต้ Slider เท่านั้น
   ========================================================= */

#radiusWorkspaceBar
.dootee-radius-scale {
  grid-column:
    2 !important;

  grid-row:
    2 !important;

  display:
    flex !important;

  justify-content:
    space-between !important;

  align-items:
    flex-start !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


/* =========================================================
   DESKTOP - ป้องกัน CSS เก่าลาก slider กลับไปซ้าย
   ========================================================= */

#radiusWorkspaceBar > input[type="range"] {
  left:
    auto !important;

  right:
    auto !important;

  position:
    relative !important;

  transform:
    none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  #radiusWorkspaceBar {
    grid-template-columns:
      130px minmax(0, 1fr) !important;

    grid-template-rows:
      22px 14px !important;

    column-gap:
      8px !important;

    height:
      46px !important;

    min-height:
      46px !important;

    padding:
      4px 8px !important;
  }


  #radiusWorkspaceBar
  .dootee-radius-heading {
    width:
      130px !important;

    min-width:
      130px !important;

    gap:
      4px !important;
  }


  #radiusWorkspaceBar
  .dootee-radius-heading > span:first-child::after {
    font-size:
      11px !important;
  }


  #radiusWorkspaceBar
  .dootee-radius-heading strong {
    font-size:
      12px !important;
  }


  #radiusWorkspaceBar
  .dootee-radius-scale {
    font-size:
      7px !important;
  }
}


/* =========================================================
   DOOTEE RADIUS FINAL V23
   REAL DOM STRUCTURE
   ========================================================= */


/*
   Layout:
   [ รัศมี (Radius) 5 km ] [ ------- slider ------- ]
                              0.5 1 2 3 5 10 20 50
*/

#radiusWorkspaceBar {
  display: grid !important;

  grid-template-columns:
    210px minmax(0, 1fr) !important;

  align-items:
    center !important;

  column-gap:
    14px !important;

  width:
    calc(100% - 56px) !important;

  left:
    28px !important;

  right:
    28px !important;

  height:
    64px !important;

  min-height:
    64px !important;

  padding:
    7px 16px !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;
}


/* =========================================================
   LEFT LABEL
   ========================================================= */

#radiusWorkspaceBar
.target-radius-title {
  grid-column:
    1 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    7px !important;

  width:
    210px !important;

  min-width:
    210px !important;

  max-width:
    210px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  white-space:
    nowrap !important;

  overflow:
    visible !important;

  font-size:
    15px !important;

  font-weight:
    800 !important;

  color:
    #ffffff !important;

  line-height:
    1 !important;
}


/*
  ใช้ข้อความจริงจาก HTML
  ห้าม pseudo-element สร้างข้อความซ้ำ
*/

#radiusWorkspaceBar
.target-radius-title::before,

#radiusWorkspaceBar
.target-radius-title::after {
  content:
    none !important;

  display:
    none !important;
}


#radiusWorkspaceBar
.target-radius-title strong {
  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    3px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #44ef2e !important;

  font-size:
    16px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}


#workspaceRadiusValue {
  color:
    #44ef2e !important;

  font-size:
    inherit !important;

  font-weight:
    900 !important;
}


/* =========================================================
   RIGHT SIDE — SLIDER + SCALE
   ========================================================= */

#radiusWorkspaceBar
.target-radius-control {
  grid-column:
    2 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-template-rows:
    26px 17px !important;

  align-items:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;
}


/* Slider */

#workspaceRadiusSlider {
  grid-row:
    1 !important;

  display:
    block !important;

  position:
    relative !important;

  left:
    auto !important;

  right:
    auto !important;

  top:
    auto !important;

  bottom:
    auto !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;

  box-sizing:
    border-box !important;
}


/* Scale */

#radiusWorkspaceBar
.target-radius-labels {
  grid-row:
    2 !important;

  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    space-between !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  white-space:
    nowrap !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  color:
    rgba(255,255,255,.88) !important;
}


#radiusWorkspaceBar
.target-radius-labels span {
  position:
    static !important;

  left:
    auto !important;

  right:
    auto !important;

  top:
    auto !important;

  bottom:
    auto !important;

  transform:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  #radiusWorkspaceBar {
    grid-template-columns:
      142px minmax(0, 1fr) !important;

    column-gap:
      8px !important;

    width:
      calc(100% - 16px) !important;

    left:
      8px !important;

    right:
      8px !important;

    height:
      54px !important;

    min-height:
      54px !important;

    padding:
      5px 8px !important;
  }


  #radiusWorkspaceBar
  .target-radius-title {
    width:
      142px !important;

    min-width:
      142px !important;

    max-width:
      142px !important;

    gap:
      4px !important;

    font-size:
      11px !important;
  }


  #radiusWorkspaceBar
  .target-radius-title strong {
    font-size:
      12px !important;
  }


  #radiusWorkspaceBar
  .target-radius-control {
    grid-template-rows:
      24px 14px !important;
  }


  #radiusWorkspaceBar
  .target-radius-labels {
    font-size:
      7px !important;
  }
}



/* =========================================================
   DOOTEE RADIUS V24 - FINAL ALIGNMENT
   ใช้ DOM จริง:
   #radiusWorkspaceBar
     .target-radius-title
     .target-radius-control
       #workspaceRadiusSlider
       .target-radius-labels
   ========================================================= */


/* ---------------------------------------------------------
   MAIN BAR
   --------------------------------------------------------- */

#radiusWorkspaceBar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;

  gap: 18px !important;

  left: 28px !important;
  right: 28px !important;

  width: auto !important;

  height: 66px !important;
  min-height: 66px !important;
  max-height: 66px !important;

  padding: 7px 16px !important;

  box-sizing: border-box !important;

  overflow: visible !important;
}


/* ---------------------------------------------------------
   LEFT: รัศมี (Radius) 5 km
   ใช้ข้อความจริงจาก HTML เท่านั้น
   --------------------------------------------------------- */

#radiusWorkspaceBar .target-radius-title {
  position: static !important;

  display: flex !important;
  flex: 0 0 215px !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 7px !important;

  width: 215px !important;
  min-width: 215px !important;
  max-width: 215px !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  overflow: visible !important;

  transform: none !important;
}


/* ห้าม CSS เก่าสร้างข้อความเพิ่ม */

#radiusWorkspaceBar .target-radius-title::before,
#radiusWorkspaceBar .target-radius-title::after {
  content: none !important;
  display: none !important;
}


/* ค่า 5 km */

#radiusWorkspaceBar .target-radius-title strong {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;

  gap: 3px !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #43ef2c !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  white-space: nowrap !important;

  transform: none !important;
}


#workspaceRadiusValue {
  display: inline !important;

  color: #43ef2c !important;

  font-size: inherit !important;
  font-weight: 900 !important;
}


/* ---------------------------------------------------------
   RIGHT: CONTROL
   Slider + Labels ต้องใช้ความกว้างเดียวกัน
   --------------------------------------------------------- */

#radiusWorkspaceBar .target-radius-control {
  position: static !important;

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 28px 18px !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   SLIDER
   ตรงนี้สำคัญที่สุด:
   ล้าง width/position เก่าทั้งหมด
   --------------------------------------------------------- */

#radiusWorkspaceBar #workspaceRadiusSlider {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: static !important;

  display: block !important;

  float: none !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  inset: auto !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  box-sizing: border-box !important;

  z-index: 2 !important;
}


/* ---------------------------------------------------------
   LABELS
   ต้องกว้างเท่ากับ Slider เป๊ะ
   --------------------------------------------------------- */

#radiusWorkspaceBar .target-radius-labels {
  grid-column: 1 !important;
  grid-row: 2 !important;

  position: static !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: space-between !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  height: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  transform: none !important;

  font-size: 9px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* ล้าง position เก่าของเลขแต่ละค่า */

#radiusWorkspaceBar .target-radius-labels > span {
  position: static !important;

  display: block !important;

  flex: 0 0 auto !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  text-align: center !important;

  color: rgba(255,255,255,.90) !important;
}


/* ค่า Active เช่น 5 km */

#radiusWorkspaceBar
.target-radius-labels > span.active {
  color: #43ef2c !important;
  font-weight: 900 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  #radiusWorkspaceBar {
    left: 8px !important;
    right: 8px !important;

    width: auto !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    gap: 8px !important;

    padding: 6px 8px !important;
  }


  #radiusWorkspaceBar .target-radius-title {
    flex-basis: 138px !important;

    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;

    gap: 4px !important;

    font-size: 11px !important;
  }


  #radiusWorkspaceBar .target-radius-title strong {
    font-size: 12px !important;
  }


  #radiusWorkspaceBar .target-radius-control {
    grid-template-rows:
      26px 15px !important;

    height: 41px !important;
  }


  #radiusWorkspaceBar #workspaceRadiusSlider {
    height: 22px !important;
  }


  #radiusWorkspaceBar .target-radius-labels {
    height: 14px !important;

    font-size: 7px !important;
  }
}



/* =========================================================
   DOOTEE RADIUS V25
   เลื่อน Slider มาทางซ้ายให้ใกล้ "km"
   ========================================================= */

/* ระยะห่างระหว่างข้อความกับ Slider */
#radiusWorkspaceBar {
    gap: 10px !important;
}


/* ไม่จองพื้นที่ข้อความกว้างเกินจริง */
#radiusWorkspaceBar .target-radius-title {

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* Slider + scale กินพื้นที่ทั้งหมดที่เหลือ */
#radiusWorkspaceBar .target-radius-control {

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Slider ต้องเต็มพื้นที่ control */
#radiusWorkspaceBar #workspaceRadiusSlider {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    position: static !important;
    transform: none !important;
}


/* ตัวเลขด้านล่างต้องกว้างเท่ากับ Slider */
#radiusWorkspaceBar .target-radius-labels {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #radiusWorkspaceBar {
        gap: 6px !important;
    }

    #radiusWorkspaceBar .target-radius-title {

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    #radiusWorkspaceBar .target-radius-control {

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
    }
}



/* =========================================================
   PARCEL CUSTOM HANDLES V26
   เฉพาะ Vertex / Midpoint
   ========================================================= */

/*
  Vertex หลัก
*/

.dootee-vertex-handle,
.dootee-parcel-vertex,
.parcel-vertex-handle {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

  z-index: 12000 !important;
}


/*
  Midpoint
*/

.dootee-midpoint-handle,
.dootee-parcel-midpoint,
.parcel-midpoint-handle {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

  z-index: 11900 !important;
}


/*
  Active point
*/

.dootee-vertex-active {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  pointer-events: auto !important;

  z-index: 12500 !important;
}


/*
  Leaflet marker ที่อยู่ใน Pane
  ห้าม parent CSS ซ่อน
*/

.leaflet-marker-pane {
  pointer-events: auto !important;
}


/* =========================================================
   MOBILE EDIT + ANALYSIS POSITION V35
   แก้เฉพาะตำแหน่งบนมือถือ
   ========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     1) EDIT TOOLBAR
     ชิดขอบล่างมากขึ้น และไม่กินพื้นที่แผนที่เกินไป
     ------------------------------------------------------- */

  body.parcel-editing #parcelToolbar,
  #parcelToolbar {

    position: fixed !important;

    left: 10px !important;
    right: 10px !important;

    bottom:
      calc(
        8px + env(safe-area-inset-bottom, 0px)
      ) !important;

    top: auto !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    z-index: 65000 !important;

    box-sizing: border-box !important;
  }


  /*
    ลดระยะภายใน Toolbar เล็กน้อย
    เพื่อไม่ให้สูงเกินจำเป็น
  */

  #parcelToolbar {

    padding:
      10px !important;

    gap:
      8px !important;
  }


  /*
    ปุ่ม 3 ปุ่มบน
  */

  #parcelToolbar button {

    min-height:
      48px !important;

    padding:
      8px 10px !important;

    margin:
      0 !important;
  }


  /*
    พื้นที่แสดงด้านล่าง
    ลด padding ไม่ให้ toolbar สูงมาก
  */

  #parcelToolbar .parcel-area-live {

    margin-top:
      8px !important;

    padding:
      8px 6px !important;
  }



  /* -------------------------------------------------------
     2) ANALYSIS CONDITION PANEL
     ขยับขึ้นเหนือ Radius
     ------------------------------------------------------- */

  #analysisConditionPanel {

    bottom:
      calc(
        78px + env(safe-area-inset-bottom, 0px)
      ) !important;

    margin-bottom:
      0 !important;

    z-index:
      30000 !important;
  }


  /*
    Radius อยู่ล่างสุดเหมือนเดิม
  */

  #radiusWorkspaceBar {

    bottom:
      calc(
        8px + env(safe-area-inset-bottom, 0px)
      ) !important;

    z-index:
      29000 !important;
  }



  /* -------------------------------------------------------
     3) ตอนเข้า Edit
     ซ่อน Analysis/Radius จากด้านหน้า Toolbar
     แต่ไม่เปลี่ยนข้อมูลหรือ Logic
     ------------------------------------------------------- */

  body.parcel-editing #analysisConditionPanel,
  body.parcel-editing #radiusWorkspaceBar {

    z-index:
      20000 !important;
  }

}



/* =========================================================
   ANALYSIS PANEL GAP ABOVE RADIUS V34
   ขยับ "วิเคราะห์พื้นที่" ขึ้นเล็กน้อย
   ไม่ให้ทับ Radius
   ========================================================= */

/* Desktop */
#analysisConditionPanel {
    bottom: 96px !important;
}


/* Mobile */
@media (max-width: 768px) {

    #analysisConditionPanel {
        bottom: 118px !important;
    }

}



/* =========================================================
   INSPECT BUTTON FIXED SIZE V35
   ตรวจดูที่ดิน:
   - ขนาดคงที่
   - Hover ไม่ขยาย
   - Click ไม่ยุบ/ไม่ขยับ
   ========================================================= */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {
    width: 255px !important;
    height: 63px !important;

    min-width: 255px !important;
    max-width: 255px !important;

    min-height: 63px !important;
    max-height: 63px !important;

    padding: 0 24px !important;

    box-sizing: border-box !important;

    transform: none !important;
    translate: none !important;

    margin: 0 !important;

    font-size: inherit;
}


/*
   Hover:
   เปลี่ยนได้เฉพาะความสว่าง/เงา
   ห้ามเปลี่ยนขนาด
*/
#workspaceInspectBtn:hover {
    filter: brightness(1.06);
}


/*
   Click:
   ไม่ให้ปุ่มยุบหรือเลื่อน
*/
#workspaceInspectBtn:active {
    transform: none !important;
    translate: none !important;
}


/*
   Keyboard focus
   ใช้ outline แทนการขยายปุ่ม
*/
#workspaceInspectBtn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.9) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   MOBILE
   รักษาขนาดเดิมของ Mobile เช่นกัน
   ========================================================= */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {
        transform: none !important;
        translate: none !important;

        /* ให้ใช้ขนาด Mobile เดิมจาก CSS หลัก */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}



/* =========================================================
   INSPECT BUTTON COMPACT FIXED SIZE V36
   - เล็กลง
   - ใหญ่กว่า Edit เล็กน้อย
   - Hover / Click ขนาดไม่เปลี่ยน
   ========================================================= */

/* ---------- DESKTOP ---------- */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {

    width: 190px !important;
    height: 64px !important;

    min-width: 190px !important;
    max-width: 190px !important;

    min-height: 64px !important;
    max-height: 64px !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    transform: none !important;
    translate: none !important;

    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;
}


/* Hover เปลี่ยนเฉพาะความสว่าง */
#workspaceInspectBtn:hover {
    filter: brightness(1.07) !important;
}


/* Click ห้ามยุบ/ขยาย/เลื่อน */
#workspaceInspectBtn:active {
    transform: none !important;
    translate: none !important;
}


/* Focus ไม่เปลี่ยนขนาด */
#workspaceInspectBtn:focus-visible {
    outline: 2px solid rgba(255,255,255,.90) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   MOBILE
   ให้ใหญ่กว่า Edit เล็กน้อย แต่ไม่กินพื้นที่มาก
   ========================================================= */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        width: 205px !important;
        height: 68px !important;

        min-width: 205px !important;
        max-width: 205px !important;

        min-height: 68px !important;
        max-height: 68px !important;

        padding: 0 18px !important;

        font-size: 20px !important;

        transform: none !important;
        translate: none !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;
    }
}




/* =========================================================
   INSPECT BUTTON COMPACT V37
   ตรวจดูที่ดิน = ใหญ่กว่า Edit เพียงเล็กน้อย
   ========================================================= */


/* ---------- DESKTOP ---------- */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {

    width: 180px !important;
    height: 60px !important;

    min-width: 180px !important;
    max-width: 180px !important;

    min-height: 60px !important;
    max-height: 60px !important;

    padding: 0 16px !important;

    font-size: 18px !important;
    line-height: 1 !important;

    box-sizing: border-box !important;

    transform: none !important;
    translate: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;
}


/* Hover ไม่ขยาย */
#workspaceInspectBtn:hover {
    transform: none !important;
    translate: none !important;
    filter: brightness(1.06) !important;
}


/* Click ไม่ยุบ */
#workspaceInspectBtn:active {
    transform: none !important;
    translate: none !important;
}


/* =========================================================
   MOBILE
   เล็กลงชัดเจน
   ใหญ่กว่า Edit เพียงนิดเดียว
   ========================================================= */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        width: 160px !important;
        height: 56px !important;

        min-width: 160px !important;
        max-width: 160px !important;

        min-height: 56px !important;
        max-height: 56px !important;

        padding: 0 12px !important;

        font-size: 17px !important;
        line-height: 1 !important;

        gap: 8px !important;

        box-sizing: border-box !important;

        transform: none !important;
        translate: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}


/* มือถือจอเล็ก */
@media (max-width: 480px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        width: 155px !important;
        height: 54px !important;

        min-width: 155px !important;
        max-width: 155px !important;

        min-height: 54px !important;
        max-height: 54px !important;

        font-size: 16px !important;

        padding: 0 10px !important;

        gap: 7px !important;

        transform: none !important;
    }

}



/* =========================================================
   INSPECT BUTTON = LAYER BUTTON SIZE V38
   - ตรวจดูที่ดินขนาดเท่าปุ่ม Layer
   - Hover / Click ไม่เปลี่ยนขนาด
   - ไม่แตะ Edit / Radius / Panel / JS
   ========================================================= */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {

    width: 170px !important;
    height: 60px !important;

    min-width: 170px !important;
    max-width: 170px !important;

    min-height: 60px !important;
    max-height: 60px !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    font-size: 18px !important;
    line-height: 1 !important;

    transform: none !important;
    translate: none !important;
}


/* Hover เปลี่ยนเฉพาะความสว่าง */
#workspaceInspectBtn:hover {
    filter: brightness(1.06) !important;
}


/* Click ห้ามยุบหรือขยาย */
#workspaceInspectBtn:active {
    transform: none !important;
    translate: none !important;
}


/* =========================================================
   MOBILE
   ขนาดกะทัดรัดเท่ากลุ่มปุ่ม Layer
   ========================================================= */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        width: 145px !important;
        height: 52px !important;

        min-width: 145px !important;
        max-width: 145px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        padding: 0 10px !important;

        font-size: 16px !important;
        line-height: 1 !important;

        gap: 7px !important;

        transform: none !important;
        translate: none !important;
    }
}


/* จอมือถือขนาดเล็ก */
@media (max-width: 480px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        width: 140px !important;
        height: 50px !important;

        min-width: 140px !important;
        max-width: 140px !important;

        min-height: 50px !important;
        max-height: 50px !important;

        padding: 0 9px !important;

        font-size: 15px !important;

        gap: 6px !important;

        transform: none !important;
        translate: none !important;
    }
}



/* =========================================================
   INSPECT BUTTON HEIGHT = LAYER BUTTON V39
   แก้เฉพาะความสูง
   ========================================================= */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    transform: none !important;
    translate: none !important;
}


/* MOBILE */
@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        transform: none !important;
        translate: none !important;
    }
}


/* MOBILE จอเล็ก */
@media (max-width: 480px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}



/* =========================================================
   LAND INSPECTION PANEL HEADER V40
   ตรวจดูที่ดิน = Header/Toggle ของ Panel
   ========================================================= */


/* ---------------------------------------------------------
   ปุ่มตรวจดูที่ดิน
   --------------------------------------------------------- */

#workspaceInspectBtn,
#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:active {

    position: fixed !important;

    left: 28px !important;
    top: 178px !important;

    width: 218px !important;
    height: 58px !important;

    min-width: 218px !important;
    max-width: 218px !important;

    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;

    transform: none !important;
    translate: none !important;

    z-index: 42010 !important;

    box-sizing: border-box !important;

    border-radius: 10px !important;
}


/* ---------------------------------------------------------
   เมื่อ Panel เปิด
   ปุ่มกลายเป็นหัว Panel
   --------------------------------------------------------- */

body.land-drawer-open #workspaceInspectBtn {

    border-radius:
      10px 10px 0 0 !important;

    border-bottom-color:
      rgba(255,255,255,.16) !important;
}


/* ---------------------------------------------------------
   Drawer
   ต่ออยู่ใต้ปุ่มพอดี
   --------------------------------------------------------- */

#landDataDrawer {

    position: fixed !important;

    left: 28px !important;

    top: 236px !important;

    width: 430px !important;

    max-height:
      calc(100vh - 255px) !important;

    margin: 0 !important;

    border-radius:
      0 0 10px 10px !important;

    z-index: 42000 !important;
}


/* ---------------------------------------------------------
   ซ่อน Header ซ้ำภายใน Drawer
   เพราะตรวจดูที่ดินทำหน้าที่เป็น Header แล้ว
   --------------------------------------------------------- */

body.land-drawer-open
#landDataDrawer
.dootee-drawer-header {

    display: none !important;
}


/* ---------------------------------------------------------
   ให้เนื้อหาเริ่มทันทีใต้หัว Panel
   --------------------------------------------------------- */

#landDataDrawerBody,
#landDataDrawer .dootee-drawer-body {

    border-top:
      0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:active {

        left: 20px !important;
        top: 20px !important;

        width: 150px !important;
        height: 52px !important;

        min-width: 150px !important;
        max-width: 150px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        font-size: 16px !important;

        border-radius:
          9px !important;
    }


    body.land-drawer-open
    #workspaceInspectBtn {

        border-radius:
          9px 9px 0 0 !important;
    }


    #landDataDrawer {

        left: 20px !important;

        top: 72px !important;

        width:
          calc(100vw - 40px) !important;

        max-width:
          none !important;

        height: auto !important;

        max-height:
          calc(
            100dvh - 92px
          ) !important;

        border-radius:
          0 0 9px 9px !important;
    }

}


/* มือถือจอเล็ก */
@media (max-width: 480px) {

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:active {

        left: 16px !important;
        top: 16px !important;

        width: 145px !important;
        height: 50px !important;

        min-width: 145px !important;
        max-width: 145px !important;

        min-height: 50px !important;
        max-height: 50px !important;
    }


    #landDataDrawer {

        left: 16px !important;
        top: 66px !important;

        width:
          calc(100vw - 32px) !important;

        max-height:
          calc(
            100dvh - 82px
          ) !important;
    }

}



/* =========================================================
   LAND INSPECTION TOP-LEFT PANEL V41
   ปุ่มตรวจดูที่ดินอยู่ระดับเดียวกับ Layer
   ========================================================= */


/* ---------------------------------------------------------
   ปุ่มหัว Panel
   --------------------------------------------------------- */

#dooteeWorkspaceV3 #workspaceInspectBtn,
#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
#dooteeWorkspaceV3 #workspaceInspectBtn:active {

    position: absolute !important;

    /* มุมซ้ายบนของพื้นที่ Map */
    top: 20px !important;
    left: 28px !important;

    /* สูงใกล้เคียงหัว Layer */
    width: 218px !important;
    height: 58px !important;

    min-width: 218px !important;
    max-width: 218px !important;

    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;

    transform: none !important;
    translate: none !important;

    box-sizing: border-box !important;

    z-index: 52020 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;
}


/* Hover / Click ห้ามขยายหรือยุบ */

#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:active {

    transform: none !important;
    translate: none !important;
}


/* =========================================================
   PANEL ปิด
   ต้องหายจากหน้าจอจริง
   ========================================================= */

#dooteeWorkspaceV3 #landDataDrawer[aria-hidden="true"] {

    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform: none !important;
}


/* =========================================================
   PANEL เปิด
   ต่ออยู่ใต้ปุ่มตรวจดูที่ดิน
   ========================================================= */

#dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"] {

    display: flex !important;

    position: absolute !important;

    top: 78px !important;
    left: 28px !important;

    width: 430px !important;

    max-width:
        calc(100% - 56px) !important;

    max-height:
        calc(100% - 98px) !important;

    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: none !important;

    z-index: 52010 !important;

    border-radius:
        0 0 10px 10px !important;
}


/* เมื่อเปิด ให้ปุ่มกลายเป็นหัวของ Panel */

body.land-drawer-open
#dooteeWorkspaceV3
#workspaceInspectBtn {

    border-radius:
        10px 10px 0 0 !important;
}


/* ไม่ต้องแสดง Header ซ้ำใน Panel */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
.dootee-drawer-header {

    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active {

        top: 16px !important;
        left: 16px !important;

        width: 150px !important;
        height: 52px !important;

        min-width: 150px !important;
        max-width: 150px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        font-size: 16px !important;

        margin: 0 !important;
    }


    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        top: 68px !important;
        left: 16px !important;

        width:
            calc(100% - 32px) !important;

        max-width:
            calc(100% - 32px) !important;

        max-height:
            calc(100% - 84px) !important;

        border-radius:
            0 0 9px 9px !important;
    }


    body.land-drawer-open
    #dooteeWorkspaceV3
    #workspaceInspectBtn {

        border-radius:
            9px 9px 0 0 !important;
    }
}



/* ============================================================
   DOOTEE LAND INSPECT PANEL V43
   2026-08-25

   FIX:
   1. Inspect button left edge = Edit / Zoom controls
   2. Land drawer opens full size
   3. Closed drawer disappears completely
   4. Do not modify Edit / Layer / Radius / Analysis
   ============================================================ */


/* ------------------------------------------------------------
   INSPECT BUTTON
   แนวซ้ายเดียวกับ Edit และ +/-
   ------------------------------------------------------------ */

#workspaceInspectBtn {
    left: 28px !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
}


/* hover / focus / active ห้ามปุ่มขยับ */

#workspaceInspectBtn:hover,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn:active {
    left: 28px !important;
    transform: none !important;
}


/* ------------------------------------------------------------
   LAND DATA DRAWER - OPEN

   เปิดแล้วต้องแสดง Panel เต็ม
   ------------------------------------------------------------ */

#landDataDrawer[aria-hidden="false"] {
    display: flex !important;

    position: fixed !important;

    left: 28px !important;
    right: auto !important;

    top: 258px !important;

    width: 560px !important;
    max-width: calc(100vw - 56px) !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: calc(100vh - 285px) !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto !important;

    z-index: 12050 !important;

    flex-direction: column !important;
}


/* class ที่ JS V42 ใส่ตอนเปิด */

#landDataDrawer.open,
#landDataDrawer.active,
#landDataDrawer.is-open {
    display: flex !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto !important;
}


/* ------------------------------------------------------------
   DRAWER BODY
   สำคัญ: ห้ามถูกบีบเหลือแค่หัวข้อ
   ------------------------------------------------------------ */

#landDataDrawerBody {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: calc(100vh - 355px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}


/* ลูกทั้งหมดภายใน drawer ต้องกลับมาแสดงตาม layout เดิม */

#landDataDrawer[aria-hidden="false"] #landDataDrawerBody {
    display: block !important;

    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ------------------------------------------------------------
   CLOSED
   ปิดแล้วหายจากหน้าจอจริง
   ------------------------------------------------------------ */

#landDataDrawer[aria-hidden="true"] {
    display: none !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 769px) {

    #workspaceInspectBtn {
        left: 28px !important;
    }

    #landDataDrawer[aria-hidden="false"] {
        left: 28px !important;

        width: 560px !important;
        max-width: calc(100vw - 56px) !important;

        /*
          อยู่ใต้ปุ่มตรวจดูที่ดิน
          ไม่ทับปุ่มหลัก
        */
        top: 258px !important;

        max-height: calc(100vh - 280px) !important;
    }

    #landDataDrawerBody {
        max-height: calc(100vh - 350px) !important;
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    /*
      ปุ่มตรวจดูที่ดิน
      แนวเดียวกับ Edit และ Zoom
    */

    #workspaceInspectBtn {
        left: 20px !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
    }


    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn:active {
        left: 20px !important;
        transform: none !important;
    }


    /*
      Panel บนมือถือ
      เปิดใต้ปุ่มและใช้พื้นที่หน้าจออย่างเหมาะสม
    */

    #landDataDrawer[aria-hidden="false"] {
        position: fixed !important;

        left: 20px !important;
        right: 20px !important;

        top: 170px !important;

        width: auto !important;
        max-width: none !important;

        height: auto !important;

        max-height: calc(100dvh - 190px) !important;

        overflow: hidden !important;

        transform: none !important;
    }


    #landDataDrawerBody {
        width: 100% !important;

        height: auto !important;

        max-height: calc(100dvh - 260px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }
}


/* ------------------------------------------------------------
   SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    #workspaceInspectBtn {
        left: 16px !important;
    }


    #landDataDrawer[aria-hidden="false"] {
        left: 16px !important;
        right: 16px !important;

        top: 160px !important;

        max-height: calc(100dvh - 178px) !important;
    }


    #landDataDrawerBody {
        max-height: calc(100dvh - 245px) !important;
    }
}


/* ============================================================
   END DOOTEE LAND INSPECT PANEL V43
   ============================================================ */



/* ============================================================
   DOOTEE INSPECT BUTTON ALIGN V44
   ตรวจดูที่ดิน = แนวซ้ายเดียวกับ Edit และ Zoom +/-
   ============================================================ */


/*
   Desktop
   จาก layout ปัจจุบัน Edit / Zoom เริ่มที่ 28px
*/

#workspaceInspectBtn,
button#workspaceInspectBtn,
#dooteeWorkspaceV3 #workspaceInspectBtn {
    position: fixed !important;

    left: 28px !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;

    translate: none !important;
    transform: none !important;

    inset-inline-start: 28px !important;
    inset-inline-end: auto !important;

    box-sizing: border-box !important;
}


/*
   ทุกสถานะต้องอยู่ตำแหน่งเดิม
   ห้าม hover / click ทำให้ปุ่มเลื่อน
*/

#workspaceInspectBtn:hover,
#workspaceInspectBtn:active,
#workspaceInspectBtn:focus,
#workspaceInspectBtn:focus-visible,
#workspaceInspectBtn[aria-expanded="true"],
#workspaceInspectBtn[aria-expanded="false"] {
    left: 28px !important;
    right: auto !important;

    margin-left: 0 !important;

    translate: none !important;
    transform: none !important;

    inset-inline-start: 28px !important;
}


/*
   ถ้ามี wrapper ของปุ่ม
   ห้าม wrapper เพิ่มระยะด้านซ้าย
*/

#workspaceInspectBtn.parent,
.target-inspect-btn {
    margin-left: 0 !important;
}


/* ============================================================
   MOBILE
   Edit และ Zoom ใช้แนว 20px
   ============================================================ */

@media (max-width: 768px) {

    #workspaceInspectBtn,
    button#workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn {
        left: 20px !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        translate: none !important;
        transform: none !important;

        inset-inline-start: 20px !important;
        inset-inline-end: auto !important;
    }


    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:active,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:focus-visible,
    #workspaceInspectBtn[aria-expanded="true"],
    #workspaceInspectBtn[aria-expanded="false"] {
        left: 20px !important;

        margin-left: 0 !important;

        translate: none !important;
        transform: none !important;

        inset-inline-start: 20px !important;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    #workspaceInspectBtn,
    button#workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn {
        left: 16px !important;

        margin-left: 0 !important;

        translate: none !important;
        transform: none !important;

        inset-inline-start: 16px !important;
    }
}


/* ============================================================
   END V44
   ============================================================ */



/* ============================================================
   DOOTEE LAND DRAWER FULL DISPLAY V47
   แก้กรณีเปิด Panel แล้วเห็นเพียงเส้น
   ============================================================ */


/* ============================================================
   CLOSED
   ============================================================ */

#dooteeWorkspaceV3 #landDataDrawer[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   OPEN - DESKTOP
   บังคับให้ Drawer มีพื้นที่จริง
   ============================================================ */

#dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"] {

    display: flex !important;
    flex-direction: column !important;

    position: fixed !important;

    /*
      แนวซ้ายเดียวกับปุ่ม Inspect/Edit
    */
    left: 28px !important;
    right: auto !important;

    /*
      อยู่ใต้ปุ่มตรวจดูที่ดิน
    */
    top: 258px !important;
    bottom: auto !important;

    width: 560px !important;
    max-width: calc(100vw - 56px) !important;

    /*
      สำคัญ:
      ห้าม height = 0 / auto ที่ถูก CSS เก่าบีบ
    */
    height: min(590px, calc(100vh - 285px)) !important;

    min-height: 320px !important;
    max-height: calc(100vh - 285px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;
    translate: none !important;

    clip: auto !important;
    clip-path: none !important;

    z-index: 52010 !important;

    box-sizing: border-box !important;
}


/* class จาก V46 */

#dooteeWorkspaceV3 #landDataDrawer.open,
#dooteeWorkspaceV3 #landDataDrawer.active,
#dooteeWorkspaceV3 #landDataDrawer.is-open {

    display: flex !important;

    height: min(590px, calc(100vh - 285px)) !important;
    min-height: 320px !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;
}


/* ============================================================
   DRAWER HEADER
   ก่อนหน้านี้เราซ่อน header เพราะใช้ปุ่มเป็นหัว Panel
   ยังคงซ่อนได้ แต่ต้องไม่ทำให้ body หาย
   ============================================================ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
.dootee-drawer-header {

    display: none !important;
}


/* ============================================================
   DRAWER BODY
   จุดสำคัญที่สุดของ V47
   ============================================================ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
.dootee-drawer-body {

    display: block !important;

    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;

    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   ลูกภายใน Drawer
   ป้องกัน CSS เก่าซ่อน section/card
   ============================================================ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody > * {

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
}


/*
   ห้าม section ภายในถูกบีบ height = 0
*/

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody section,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody .dootee-form-section,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody .dootee-data-section {

    height: auto !important;

    min-height: max-content !important;

    overflow: visible !important;
}


/* ============================================================
   ปุ่มเริ่มวิเคราะห์พื้นที่ด้านล่าง
   ไม่ให้หลุดออกจาก Panel
   ============================================================ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#startAnalysisBtn {

    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;

    width: calc(100% - 32px) !important;

    margin: 14px 16px 18px !important;

    transform: none !important;

    flex: none !important;
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        left: 20px !important;
        right: 20px !important;

        /*
          อยู่ใต้ปุ่มตรวจดูที่ดิน
        */
        top: 72px !important;
        bottom: auto !important;

        width: auto !important;
        max-width: none !important;

        /*
          ใช้พื้นที่เกือบเต็มจอ
          แต่ยังเหลือขอบด้านล่าง
        */
        height: calc(100dvh - 92px) !important;

        min-height: 300px !important;
        max-height: calc(100dvh - 92px) !important;

        overflow: hidden !important;
    }


    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"]
    #landDataDrawerBody,

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"]
    .dootee-drawer-body {

        height: 100% !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        left: 16px !important;
        right: 16px !important;

        top: 66px !important;

        height: calc(100dvh - 82px) !important;

        min-height: 280px !important;
        max-height: calc(100dvh - 82px) !important;
    }

}


/* ============================================================
   END LAND DRAWER V47
   ============================================================ */



/* =========================================================
   LAND PANEL POSITION + CONTENT VISIBILITY V48
   ========================================================= */


/* ---------- PANEL OPEN ---------- */

#dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"] {

    /* ขยับขึ้น */
    top: 258px !important;

    left: 28px !important;

    width: 560px !important;

    height: 520px !important;

    min-height: 420px !important;
    max-height: calc(100vh - 275px) !important;

    background:
      rgba(5, 38, 49, 0.88) !important;

    backdrop-filter:
      blur(8px) !important;

    -webkit-backdrop-filter:
      blur(8px) !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 52050 !important;
}


/* ---------- BODY ---------- */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    padding: 18px 18px 90px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    color: #ffffff !important;

    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch;
}


/* ---------- ข้อความทั้งหมดภายใน ---------- */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody * {

    opacity: 1 !important;
    visibility: visible !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.65) !important;
}


/* หัวข้อ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody h1,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody h2,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody h3,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody strong {

    color: #8df25a !important;
    opacity: 1 !important;
}


/* label / paragraph */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody label,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody p,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody span,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody small {

    color: #ffffff !important;
    opacity: 1 !important;
}


/* input */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody input,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody select,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody textarea {

    color: #ffffff !important;

    background:
      rgba(2, 28, 37, 0.82) !important;

    border:
      1px solid rgba(255,255,255,.28) !important;

    opacity: 1 !important;
}


/* cards/sections */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody > div,

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody section {

    opacity: 1 !important;
    visibility: visible !important;

    height: auto !important;

    overflow: visible !important;
}


/* ปุ่มเริ่มวิเคราะห์ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#startAnalysisBtn {

    position: sticky !important;

    bottom: 8px !important;

    width: 100% !important;

    margin: 18px 0 0 !important;

    z-index: 10 !important;

    opacity: 1 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        /*
          เปิดใต้ปุ่มตรวจดูที่ดินทันที
        */
        top: 74px !important;

        left: 16px !important;
        right: 16px !important;

        width: auto !important;

        height: calc(100dvh - 90px) !important;

        min-height: 0 !important;
        max-height: calc(100dvh - 90px) !important;
    }


    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"]
    #landDataDrawerBody {

        height: 100% !important;

        padding:
          14px 14px 90px !important;
    }
}



/* ============================================================
   DOOTEE LAND INSPECTION V49 FINAL
   ============================================================ */


/* ---------- CLOSED ---------- */

#landDataDrawer[aria-hidden="true"] {
    display: none !important;
}


/* ---------- OPEN ---------- */

#landDataDrawer[aria-hidden="false"] {

    display: flex !important;
    flex-direction: column !important;

    position: fixed !important;

    left: 28px !important;
    right: auto !important;

    /*
      ให้ Panel ขึ้นสูงกว่าเดิม
      อยู่ใต้กลุ่มปุ่มด้านซ้าย
    */
    top: 258px !important;

    width: 560px !important;
    max-width: calc(100vw - 56px) !important;

    /*
      มีความสูงจริงแน่นอน
    */
    height: min(590px, calc(100vh - 275px)) !important;
    min-height: 420px !important;
    max-height: calc(100vh - 275px) !important;

    margin: 0 !important;

    overflow: hidden !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;

    background: rgba(5, 38, 49, .94) !important;

    border:
      1px solid rgba(160, 220, 225, .55) !important;

    border-radius: 0 0 12px 12px !important;

    z-index: 42000 !important;

    box-sizing: border-box !important;
}


/*
  ไม่แสดง header ซ้ำ
  เพราะปุ่ม "ตรวจดูที่ดิน" เป็นหัวด้านบนอยู่แล้ว
*/

#landDataDrawer[aria-hidden="false"]
.dootee-drawer-header {

    display: none !important;
}


/* ============================================================
   BODY
   ============================================================ */

#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody {

    display: block !important;

    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 14px 16px 18px !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    box-sizing: border-box !important;
}


/* ============================================================
   ORIGINAL FORM
   ============================================================ */

#landDataDrawerBody > .left-column {

    display: block !important;

    position: static !important;

    float: none !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    transform: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


#landDataDrawerBody > .left-column > * {

    visibility: visible !important;
    opacity: 1 !important;

    max-width: 100% !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

#landDataDrawer[aria-hidden="false"]
.dootee-drawer-footer {

    display: block !important;

    flex: 0 0 auto !important;

    padding: 12px 16px 16px !important;

    background: rgba(5, 38, 49, .96) !important;

    box-sizing: border-box !important;
}


#landDataDrawer[aria-hidden="false"]
#startAnalysisBtn {

    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    transform: none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #landDataDrawer[aria-hidden="false"] {

        left: 16px !important;
        right: 16px !important;

        top: 74px !important;

        width: auto !important;
        max-width: none !important;

        height: calc(100dvh - 90px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 90px) !important;
    }

}


/* ============================================================
   END V49
   ============================================================ */


/* ============================================================
   LAND INSPECT HEADER + PANEL ALIGN V50
   - Inspect button height = Layer header height
   - Drawer connects directly under Inspect button
   - Do not modify V49 logic
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

#dooteeWorkspaceV3 #workspaceInspectBtn,
#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
#dooteeWorkspaceV3 #workspaceInspectBtn:active {

    /* แนวซ้ายเดิมที่จัดตรงกับ Edit แล้ว */
    left: 28px !important;

    /* ระดับบนเดียวกับ Layer */
    top: 20px !important;

    /* ความสูงเท่าหัว Layer */
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    /* คงความกว้างปัจจุบัน */
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    transform: none !important;
    translate: none !important;

    z-index: 52060 !important;

    border-radius: 10px !important;
}


/* เปิด Panel แล้ว ปุ่มเป็นหัว Panel */
body.land-drawer-open
#dooteeWorkspaceV3
#workspaceInspectBtn {

    border-radius:
        10px 10px 0 0 !important;
}


/* ============================================================
   DRAWER OPEN
   ต่อใต้ปุ่มทันที
   ============================================================ */

#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"] {

    position: fixed !important;

    left: 28px !important;
    right: auto !important;

    /*
      20px top + 58px button
      = 78px
    */
    top: 78px !important;

    width: 560px !important;
    max-width: calc(100vw - 56px) !important;

    height: calc(100vh - 98px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 98px) !important;

    margin: 0 !important;

    border-radius:
        0 0 10px 10px !important;

    z-index: 52050 !important;
}


/* เนื้อหาเลื่อนภายใน */
#dooteeWorkspaceV3
#landDataDrawer[aria-hidden="false"]
#landDataDrawerBody {

    height: 100% !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active {

        left: 16px !important;
        top: 16px !important;

        /* สูงเท่าหัว Layer mobile */
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        border-radius: 9px !important;
    }


    body.land-drawer-open
    #dooteeWorkspaceV3
    #workspaceInspectBtn {

        border-radius:
            9px 9px 0 0 !important;
    }


    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        left: 16px !important;
        right: 16px !important;

        /*
          16 + 52 = 68
        */
        top: 68px !important;

        width: auto !important;
        max-width: none !important;

        height: calc(100dvh - 84px) !important;
        max-height: calc(100dvh - 84px) !important;

        border-radius:
            0 0 9px 9px !important;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active {

        left: 14px !important;
        top: 14px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;
    }


    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        left: 14px !important;
        right: 14px !important;

        top: 64px !important;

        height: calc(100dvh - 78px) !important;
        max-height: calc(100dvh - 78px) !important;
    }
}


/* ============================================================
   END V50
   ============================================================ */



/* ============================================================
   DOOTEE MOBILE PANEL LAYOUT V51
   - Land Inspection + Layer อยู่หน้าสุด
   - Radius / Analysis ห้ามบัง Panel
   - แนวซ้ายตรงกัน
   - Land Inspection Panel แคบลง
   ============================================================ */


@media (max-width: 768px) {


    /* ========================================================
       COMMON LEFT ALIGN
       แนวเดียวกันทั้งหมด
       ======================================================== */

    :root {
        --dt-mobile-left: 16px;
    }


    #workspaceInspectBtn,
    #workspaceEditBtn,
    #analysisConditionPanel,
    #radiusWorkspaceBar {

        left: var(--dt-mobile-left) !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* ========================================================
       LAND INSPECTION BUTTON
       ======================================================== */

    #workspaceInspectBtn,
    #workspaceInspectBtn:hover,
    #workspaceInspectBtn:focus,
    #workspaceInspectBtn:active {

        position: fixed !important;

        top: 16px !important;
        left: var(--dt-mobile-left) !important;

        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        z-index: 90020 !important;

        transform: none !important;
    }


    /* ========================================================
       LAND INSPECTION PANEL
       หน้าสุด + แคบลง
       ======================================================== */

    #landDataDrawer[aria-hidden="false"] {

        position: fixed !important;

        /*
          ต่อจากปุ่มตรวจดูที่ดินทันที
        */
        top: 68px !important;

        left: var(--dt-mobile-left) !important;
        right: auto !important;

        /*
          ไม่กินเต็มหน้าจออีกแล้ว
        */
        width: min(78vw, 410px) !important;

        min-width: 300px !important;
        max-width: calc(100vw - 32px) !important;

        /*
          เว้นพื้นที่ล่างเล็กน้อย
        */
        height: calc(100dvh - 84px) !important;
        max-height: calc(100dvh - 84px) !important;
        min-height: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        z-index: 90010 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;
    }


    #landDataDrawer[aria-hidden="false"]
    #landDataDrawerBody {

        width: 100% !important;

        height: 100% !important;
        max-height: none !important;

        padding: 12px 12px 80px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }


    /*
      ลด padding ของ card ภายใน
      เพื่อให้ panel แคบแล้วเนื้อหายังพอดี
    */

    #landDataDrawerBody .left-column,
    #landDataDrawerBody .form-section,
    #landDataDrawerBody section {

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    #landDataDrawerBody input,
    #landDataDrawerBody select,
    #landDataDrawerBody textarea,
    #landDataDrawerBody button {

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       LAYER
       ต้องอยู่หน้าสุดเช่นกัน
       ======================================================== */

    #layerPanel,
    #layerPanel.open,
    #layerPanel:not(.hidden) {

        z-index: 89900 !important;

        pointer-events: auto !important;
    }


    #layerHeaderToggle,
    #layerPanelToggle {

        z-index: 89920 !important;

        pointer-events: auto !important;
    }


    /* ========================================================
       ANALYSIS
       ต้องอยู่ต่ำกว่า Drawer และ Layer
       ======================================================== */

    #analysisConditionPanel {

        z-index: 5000 !important;
    }


    #analysisConditionPanel *,
    #analysisPanelToggle {

        z-index: auto !important;
    }


    /* ========================================================
       RADIUS
       ต้องอยู่ต่ำกว่า Drawer และ Layer
       ======================================================== */

    #radiusWorkspaceBar {

        z-index: 4900 !important;
    }


    /* ========================================================
       EDIT + ZOOM
       แนวซ้ายเดียวกัน
       ======================================================== */

    #workspaceEditBtn {

        left: var(--dt-mobile-left) !important;

        transform: none !important;
    }


    #fullMap .leaflet-control-zoom,
    .leaflet-control-zoom {

        left: var(--dt-mobile-left) !important;
        margin-left: 0 !important;
    }


    /* ========================================================
       ANALYSIS COLLAPSED BUTTON
       แนวเดียวกับซ้ายทั้งหมด
       ======================================================== */

    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition.compact-hidden {

        left: var(--dt-mobile-left) !important;
        right: auto !important;
    }


    /* ========================================================
       RADIUS BAR
       เว้นซ้ายเท่ากัน
       ======================================================== */

    #radiusWorkspaceBar {

        left: var(--dt-mobile-left) !important;
        right: 16px !important;

        width: auto !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       ป้องกัน overlay อื่นมาทับ panel
       ======================================================== */

    #workspaceScrim {

        z-index: 3000 !important;

        pointer-events: none !important;
    }


    .parcel-toolbar {

        z-index: 7000 !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {


    :root {
        --dt-mobile-left: 14px;
    }


    #workspaceInspectBtn {

        left: var(--dt-mobile-left) !important;

        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }


    #landDataDrawer[aria-hidden="false"] {

        top: 64px !important;

        left: var(--dt-mobile-left) !important;

        /*
          มือถือเล็ก:
          แคบกว่าจอ แต่ยังอ่านง่าย
        */
        width: min(82vw, 380px) !important;

        min-width: 286px !important;
        max-width: calc(100vw - 28px) !important;

        height: calc(100dvh - 78px) !important;
        max-height: calc(100dvh - 78px) !important;
    }


    #radiusWorkspaceBar {

        left: var(--dt-mobile-left) !important;
        right: 14px !important;
    }


    #workspaceEditBtn,
    #analysisConditionPanel {

        left: var(--dt-mobile-left) !important;
    }

}


/* ============================================================
   END MOBILE PANEL LAYOUT V51
   ============================================================ */



/* ============================================================
   DOOTEE RESPONSIVE ALIGNMENT V52
   ============================================================ */

:root {

    --dt-v52-left: 28px;

    --dt-v52-inspect-top: 20px;

    --dt-v52-header-height: 58px;

    --dt-v52-analysis-bottom: 105px;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 769px) {


    /* --------------------------------------------------------
       INSPECT BUTTON
       แนวซ้ายเดียวกับ Edit
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #workspaceInspectBtn {

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        transform:
          none !important;

        translate:
          none !important;
    }


    /* --------------------------------------------------------
       LAND DRAWER

       เดิม 560px กว้างเกินไป
       ลดเหลือ 455px
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        width:
          455px !important;

        min-width:
          420px !important;

        max-width:
          min(
            455px,
            calc(100vw - 56px)
          ) !important;

        box-sizing:
          border-box !important;
    }


    /*
      ฟอร์มภายในใช้ความกว้าง Panel จริง
    */

    #dooteeWorkspaceV3
    #landDataDrawerBody,

    #dooteeWorkspaceV3
    #landDataDrawerBody > .left-column {

        width:
          100% !important;

        max-width:
          100% !important;

        box-sizing:
          border-box !important;
    }


    /*
      Latitude / Longitude
      ยังวาง 2 ช่องคู่กันได้ใน Desktop
    */

    #dooteeWorkspaceV3
    #landDataDrawerBody input,

    #dooteeWorkspaceV3
    #landDataDrawerBody select,

    #dooteeWorkspaceV3
    #landDataDrawerBody textarea {

        max-width:
          100% !important;

        box-sizing:
          border-box !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {


    /* --------------------------------------------------------
       INSPECT BUTTON
       สูงเท่ากับ Layer และอยู่ระดับเดียวกัน
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #workspaceInspectBtn,

    #dooteeWorkspaceV3
    #workspaceInspectBtn:hover,

    #dooteeWorkspaceV3
    #workspaceInspectBtn:focus,

    #dooteeWorkspaceV3
    #workspaceInspectBtn:active {

        position:
          fixed !important;

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        top:
          var(--dt-v52-inspect-top) !important;

        height:
          var(--dt-v52-header-height) !important;

        min-height:
          var(--dt-v52-header-height) !important;

        max-height:
          var(--dt-v52-header-height) !important;

        margin:
          0 !important;

        transform:
          none !important;

        translate:
          none !important;

        z-index:
          90020 !important;
    }


    /* --------------------------------------------------------
       LAND DRAWER

       ต่อจากใต้ Inspect Button
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        position:
          fixed !important;

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        top:
          calc(
            var(--dt-v52-inspect-top) +
            var(--dt-v52-header-height)
          ) !important;


        /*
          แคบกว่ารุ่นก่อน
          เหลือ Map ให้มองเห็นด้านขวา
        */

        width:
          min(
            76vw,
            390px
          ) !important;

        min-width:
          290px !important;

        max-width:
          calc(
            100vw -
            var(--dt-v52-left) -
            14px
          ) !important;


        /*
          ไม่ลงไปชน Radius
        */

        height:
          calc(
            100dvh -
            var(--dt-v52-inspect-top) -
            var(--dt-v52-header-height) -
            94px
          ) !important;

        min-height:
          260px !important;

        max-height:
          calc(
            100dvh -
            var(--dt-v52-inspect-top) -
            var(--dt-v52-header-height) -
            94px
          ) !important;

        z-index:
          90010 !important;

        box-sizing:
          border-box !important;
    }


    /* --------------------------------------------------------
       LAYER
       อยู่หน้าสุดเหมือน Land Drawer
       -------------------------------------------------------- */

    #layerPanel,
    #layerPanel.open,
    #layerPanel:not(.hidden) {

        z-index:
          89900 !important;
    }


    #layerHeaderToggle,
    #layerPanelToggle {

        z-index:
          89920 !important;
    }


    /* --------------------------------------------------------
       ANALYSIS COLLAPSED
       ขยับลงให้ชิด Radius
       -------------------------------------------------------- */

    #analysisConditionPanel.compact-hidden,

    .target-analysis-condition.compact-hidden {

        position:
          fixed !important;

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        top:
          auto !important;

        bottom:
          var(--dt-v52-analysis-bottom) !important;

        margin:
          0 !important;

        transform:
          none !important;

        translate:
          none !important;

        z-index:
          5000 !important;
    }


    /* --------------------------------------------------------
       RADIUS
       แนวซ้ายเดียวกับ Edit / Inspect / Analysis
       -------------------------------------------------------- */

    #radiusWorkspaceBar {

        left:
          var(--dt-v52-left) !important;

        right:
          14px !important;

        width:
          auto !important;

        z-index:
          4900 !important;

        box-sizing:
          border-box !important;
    }


    /* --------------------------------------------------------
       EDIT
       -------------------------------------------------------- */

    #workspaceEditBtn {

        left:
          var(--dt-v52-left) !important;

        right:
          auto !important;

        transform:
          none !important;
    }

}


/* ============================================================
   MOBILE แคบมาก
   ============================================================ */

@media (max-width: 480px) {

    #dooteeWorkspaceV3
    #landDataDrawer[aria-hidden="false"] {

        width:
          min(
            78vw,
            360px
          ) !important;

        min-width:
          280px !important;
    }

}


/* ============================================================
   END V52
   ============================================================ */



/* ============================================================
   DOOTEE INSPECT POSITION LOCK V53
   ปุ่มตรวจดูที่ดินต้องไม่ขยับทุกสถานะ
   ============================================================ */


/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

#dooteeWorkspaceV3 #workspaceInspectBtn {

    left: var(--dt-v52-left, 28px) !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
    translate: none !important;

    inset-inline-start: var(--dt-v52-left, 28px) !important;
    inset-inline-end: auto !important;

    position: fixed !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   LOCK ALL STATES
   ห้ามเลื่อน / ขยาย / translate
   ------------------------------------------------------------ */

#dooteeWorkspaceV3 #workspaceInspectBtn:hover,

#dooteeWorkspaceV3 #workspaceInspectBtn:focus,

#dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,

#dooteeWorkspaceV3 #workspaceInspectBtn:active,

#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],

#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"],

body.land-drawer-open
#dooteeWorkspaceV3
#workspaceInspectBtn {

    left: var(--dt-v52-left, 28px) !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
    translate: none !important;

    inset-inline-start: var(--dt-v52-left, 28px) !important;
    inset-inline-end: auto !important;
}


/* ------------------------------------------------------------
   ป้องกัน animation / transition
   ทำให้ปุ่มดูเหมือนเลื่อนไปด้านข้าง
   ------------------------------------------------------------ */

#dooteeWorkspaceV3 #workspaceInspectBtn {

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease !important;
}


/*
   ไม่อนุญาต transition ของ:
   left / right / transform / width / margin
*/

#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:active {

    transform: none !important;

    scale: none !important;

    margin: 0 !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 769px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

        left: var(--dt-v52-left, 28px) !important;

        transform: none !important;
        translate: none !important;

        margin-left: 0 !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

        left: var(--dt-v52-left, 16px) !important;

        transform: none !important;
        translate: none !important;

        margin-left: 0 !important;
    }

}


/* ============================================================
   END V53
   ============================================================ */



/* ============================================================
   DOOTEE INSPECT BUTTON FIT CONTENT V54
   ปุ่มตรวจดูที่ดินสั้นลง ฟิตเฉพาะ icon + ข้อความ
   ============================================================ */

#dooteeWorkspaceV3 #workspaceInspectBtn {

    /* ไม่ให้ความกว้างเดิมมาบังคับ */
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;

    /* ระยะซ้าย-ขวารอบ icon + ข้อความ */
    padding-left: 22px !important;
    padding-right: 22px !important;

    /* ไม่ให้ข้อความขึ้นบรรทัดใหม่ */
    white-space: nowrap !important;

    /* ตำแหน่งของสิ่งของภายในปุ่ม */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    /* ห้ามตำแหน่งปุ่มขยับ */
    transform: none !important;
    translate: none !important;
}


/* ทุกสถานะต้องกว้างเท่าเดิม */
#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
#dooteeWorkspaceV3 #workspaceInspectBtn:active,
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;

    padding-left: 22px !important;
    padding-right: 22px !important;

    transform: none !important;
    translate: none !important;
}


/* ============================================================
   MOBILE
   ให้กระชับกว่า Desktop อีกเล็กน้อย
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

        width: fit-content !important;
        min-width: 0 !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        gap: 9px !important;

        white-space: nowrap !important;

        transform: none !important;
        translate: none !important;
    }

}


/* ============================================================
   END V54
   ============================================================ */



/* ============================================================
   DOOTEE MOBILE ALIGNMENT V57
   - Inspect / Edit / Zoom left edge = same line
   - Analysis expanded sits close above Radius
   ============================================================ */

@media (max-width: 768px) {

    :root {
        --dt-mobile-control-left: 36px;
        --dt-mobile-panel-gap: 10px;
    }


    /* ========================================================
       INSPECT BUTTON
       ======================================================== */

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

        left: var(--dt-mobile-control-left) !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* ========================================================
       EDIT BUTTON
       ======================================================== */

    #dooteeWorkspaceV3 #workspaceEditBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn:hover,
    #dooteeWorkspaceV3 #workspaceEditBtn:focus,
    #dooteeWorkspaceV3 #workspaceEditBtn:active {

        left: var(--dt-mobile-control-left) !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* ========================================================
       ZOOM + -
       ใช้แนวซ้ายเดียวกัน
       ======================================================== */

    #fullMap .leaflet-control-zoom,
    .leaflet-control-zoom {

        left: var(--dt-mobile-control-left) !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
    }


    /* ========================================================
       ANALYSIS PANEL - EXPANDED
       ให้ลงมาอยู่เหนือ Radius
       ======================================================== */

    #analysisConditionPanel:not(.compact-hidden),
    .target-analysis-condition:not(.compact-hidden) {

        position: fixed !important;

        left: var(--dt-mobile-control-left) !important;
        right: 16px !important;

        top: auto !important;

        /*
          ยกเหนือ Radius เพียงเล็กน้อย
        */
        bottom: 118px !important;

        width: auto !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        z-index: 5000 !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       ANALYSIS PANEL - COLLAPSED
       อยู่ตำแหน่งเดียวกันด้านล่าง
       ======================================================== */

    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition.compact-hidden {

        position: fixed !important;

        left: var(--dt-mobile-control-left) !important;
        right: auto !important;

        top: auto !important;

        bottom: 118px !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* ========================================================
       RADIUS
       แนวซ้ายเดียวกัน
       ======================================================== */

    #radiusWorkspaceBar {

        left: var(--dt-mobile-control-left) !important;
        right: 16px !important;

        width: auto !important;

        margin: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --dt-mobile-control-left: 20px;
    }


    #analysisConditionPanel:not(.compact-hidden),
    .target-analysis-condition:not(.compact-hidden),
    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition.compact-hidden {

        bottom: 112px !important;
    }


    #radiusWorkspaceBar {

        left: var(--dt-mobile-control-left) !important;
        right: 14px !important;
    }

}


/* ============================================================
   END V57
   ============================================================ */



/* ============================================================
   DOOTEE MOBILE PANEL FINAL POSITION V58
   1. Layer ต้องอยู่หน้าสุด
   2. Analysis ทั้งย่อ/ขยายอยู่ชิด Radius
   3. Land Inspection Panel กลับมากว้างเหมือนเดิม
   ============================================================ */

@media (max-width: 768px) {


    /* ========================================================
       1. LAYER PANEL - FRONT MOST
       ======================================================== */

    #layerPanel,
    #layerPanel.open,
    #layerPanel:not(.hidden) {

        position: fixed !important;

        z-index: 120000 !important;

        pointer-events: auto !important;
    }


    #layerHeaderToggle,
    #layerPanelToggle,
    #layerPanel .target-layer-header {

        position: relative !important;

        z-index: 120100 !important;

        pointer-events: auto !important;
    }


    /*
      ปุ่มตรวจดูที่ดินอยู่ต่ำกว่า Layer
      จึงไม่สามารถทับหัว Layer ได้
    */

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active {

        z-index: 90020 !important;
    }


    /*
      Land Drawer ก็ต่ำกว่า Layer
    */

    #landDataDrawer[aria-hidden="false"] {

        z-index: 90010 !important;
    }



    /* ========================================================
       2. ANALYSIS PANEL
       ทั้งตอนย่อและขยาย
       ต้องอยู่เหนือ Radius ใกล้กัน
       ======================================================== */

    #analysisConditionPanel,
    #analysisConditionPanel:not(.compact-hidden),
    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition,
    .target-analysis-condition:not(.compact-hidden),
    .target-analysis-condition.compact-hidden {

        position: fixed !important;

        left: 20px !important;
        right: auto !important;

        top: auto !important;

        /*
          Radius อยู่ล่างสุด
          Analysis อยู่เหนือ Radius โดยเว้นประมาณ 10px
        */
        bottom: 118px !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        z-index: 5000 !important;

        box-sizing: border-box !important;
    }


    /*
      ตอนขยาย ให้ใช้พื้นที่เกือบเต็มจอ
      แต่ยังไม่ชนขอบขวา
    */

    #analysisConditionPanel:not(.compact-hidden),
    .target-analysis-condition:not(.compact-hidden) {

        left: 20px !important;
        right: 20px !important;

        width: auto !important;

        max-width: none !important;

        bottom: 118px !important;
    }


    /*
      ตอนย่อ ให้ความกว้างตามปุ่มเดิม
    */

    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition.compact-hidden {

        left: 20px !important;
        right: auto !important;

        width: fit-content !important;
        max-width: calc(100vw - 40px) !important;

        bottom: 118px !important;
    }



    /* ========================================================
       3. RADIUS
       คงไว้ล่างสุด
       ======================================================== */

    #radiusWorkspaceBar {

        position: fixed !important;

        left: 20px !important;
        right: 20px !important;

        bottom: 12px !important;

        width: auto !important;

        margin: 0 !important;

        z-index: 4900 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }



    /* ========================================================
       4. LAND INSPECTION PANEL
       กลับมากว้างเหมือนก่อน
       ======================================================== */

    #landDataDrawer[aria-hidden="false"] {

        left: 20px !important;
        right: 20px !important;

        width: auto !important;

        min-width: 0 !important;

        /*
          ใช้ความกว้างจอเกือบทั้งหมดเหมือนก่อน
        */
        max-width: none !important;

        box-sizing: border-box !important;
    }


    #landDataDrawer[aria-hidden="false"]
    #landDataDrawerBody {

        width: 100% !important;

        box-sizing: border-box !important;
    }


    #landDataDrawerBody > .left-column {

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       5. EDIT / ZOOM / INSPECT แนวซ้ายเดียวกัน
       ======================================================== */

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn {

        left: 20px !important;

        right: auto !important;

        transform: none !important;
        translate: none !important;
    }


    #fullMap .leaflet-control-zoom,
    .leaflet-control-zoom {

        left: 20px !important;

        margin-left: 0 !important;

        transform: none !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    #analysisConditionPanel,
    #analysisConditionPanel:not(.compact-hidden),
    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition,
    .target-analysis-condition:not(.compact-hidden),
    .target-analysis-condition.compact-hidden {

        bottom: 112px !important;
    }


    #analysisConditionPanel:not(.compact-hidden),
    .target-analysis-condition:not(.compact-hidden) {

        left: 14px !important;
        right: 14px !important;
    }


    #analysisConditionPanel.compact-hidden,
    .target-analysis-condition.compact-hidden {

        left: 14px !important;
    }


    #radiusWorkspaceBar {

        left: 14px !important;
        right: 14px !important;

        bottom: 8px !important;
    }


    #landDataDrawer[aria-hidden="false"] {

        left: 14px !important;
        right: 14px !important;

        width: auto !important;
    }


    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn {

        left: 14px !important;
    }


    #fullMap .leaflet-control-zoom,
    .leaflet-control-zoom {

        left: 14px !important;
    }

}


/* ============================================================
   END V58
   ============================================================ */



/* ============================================================
   DOOTEE MOBILE PANEL CORRECTION V59
   ============================================================ */

:root {
    --dt-v59-analysis-bottom: 145px;
}


@media (max-width: 768px) {


    /* ========================================================
       LAND INSPECTION PANEL
       ขยายกลับให้กว้างเกือบเต็มหน้าจอ
       ======================================================== */

    #dooteeWorkspaceV3 #landDataDrawer,
    #dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"],
    body.land-drawer-open #dooteeWorkspaceV3 #landDataDrawer {

        position: fixed !important;

        left: 14px !important;
        right: 14px !important;

        inset-inline-start: 14px !important;
        inset-inline-end: 14px !important;

        width: calc(100vw - 28px) !important;

        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        transform: none !important;
        translate: none !important;

        z-index: 90010 !important;
    }


    /*
      เนื้อหาภายในใช้ความกว้าง Panel ทั้งหมด
    */

    #dooteeWorkspaceV3 #landDataDrawerBody,
    #dooteeWorkspaceV3 #landDataDrawerBody > *,
    #dooteeWorkspaceV3 #landDataDrawerBody .left-column {

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }



    /* ========================================================
       ANALYSIS - ทั้งย่อและขยาย
       ใช้ตำแหน่ง Radius จริง
       ======================================================== */

    #dooteeWorkspaceV3 #analysisConditionPanel,
    #dooteeWorkspaceV3 #analysisConditionPanel.compact-hidden,
    #dooteeWorkspaceV3 #analysisConditionPanel:not(.compact-hidden) {

        position: fixed !important;

        top: auto !important;

        bottom:
            var(--dt-v59-analysis-bottom) !important;

        margin: 0 !important;

        transform: none !important;
        translate: none !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       ANALYSIS EXPANDED
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #analysisConditionPanel:not(.compact-hidden) {

        left: 14px !important;
        right: 14px !important;

        width: calc(100vw - 28px) !important;

        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;

        z-index: 5000 !important;
    }


    /* --------------------------------------------------------
       ANALYSIS COLLAPSED
       -------------------------------------------------------- */

    #dooteeWorkspaceV3
    #analysisConditionPanel.compact-hidden {

        left: 14px !important;
        right: auto !important;

        width: fit-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;

        z-index: 5000 !important;
    }



    /* ========================================================
       RADIUS
       ล่างสุดเหมือนเดิม
       ======================================================== */

    #dooteeWorkspaceV3 #radiusWorkspaceBar {

        position: fixed !important;

        left: 14px !important;
        right: 14px !important;

        bottom: 8px !important;

        width: calc(100vw - 28px) !important;

        max-width: calc(100vw - 28px) !important;

        margin: 0 !important;

        transform: none !important;

        z-index: 4900 !important;

        box-sizing: border-box !important;
    }



    /* ========================================================
       LAYER ต้องอยู่หน้าสุด
       ======================================================== */

    #layerPanel,
    #layerPanel.open,
    #layerPanel:not(.hidden) {

        z-index: 120000 !important;
    }


    #layerHeaderToggle,
    #layerPanelToggle {

        z-index: 120100 !important;
    }

}


/* ============================================================
   END V59 CSS
   ============================================================ */


/* ============================================================
   DOOTEE DESKTOP LAND PANEL WIDTH V60
   ============================================================ */

@media (min-width: 769px) {

    #dooteeWorkspaceV3 #landDataDrawer,
    #dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"],
    body.land-drawer-open #dooteeWorkspaceV3 #landDataDrawer {

        width: 500px !important;
        max-width: 500px !important;
        min-width: 500px !important;

        left: 28px !important;
        right: auto !important;

        box-sizing: border-box !important;
    }

    #dooteeWorkspaceV3 #landDataDrawerBody,
    #dooteeWorkspaceV3 #landDataDrawerBody > *,
    #dooteeWorkspaceV3 #landDataDrawerBody .left-column {

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* END V60 */



/* ============================================================
   DOOTEE DESKTOP LAND DRAWER LEFT ALIGN V61
   ============================================================ */

:root {
    --dt-v61-drawer-left: 28px;
}


@media (min-width: 769px) {

    #dooteeWorkspaceV3 #landDataDrawer,
    #dooteeWorkspaceV3 #landDataDrawer[aria-hidden="false"],
    body.land-drawer-open #dooteeWorkspaceV3 #landDataDrawer {

        left: var(--dt-v61-drawer-left) !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
        translate: none !important;
    }

}


/* END V61 */



/* ============================================================
   DOOTEE INSPECT TOGGLE ARROW V62
   ตรวจดูที่ดิน >> / <<
   ============================================================ */

#dooteeWorkspaceV3 #workspaceInspectBtn {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    width: fit-content !important;
    min-width: 0 !important;

    padding-left: 16px !important;
    padding-right: 10px !important;

    white-space: nowrap !important;

    transform: none !important;
    translate: none !important;
}


/* ปุ่มลูกศร */

#dooteeWorkspaceV3
#workspaceInspectBtn::after {

    content: ">>";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 36px;

    padding: 0 7px;

    margin-left: 4px;

    border-radius: 8px;

    border: 1px solid rgba(120, 235, 255, .85);

    background:
        rgba(19, 107, 135, .92);

    color: #fff;

    font-size: 22px;
    font-weight: 900;

    line-height: 1;

    box-sizing: border-box;

    pointer-events: none;
}


/* Panel เปิด */

#dooteeWorkspaceV3
#workspaceInspectBtn[aria-expanded="true"]::after {

    content: "<<";
}


/* Panel ปิด */

#dooteeWorkspaceV3
#workspaceInspectBtn[aria-expanded="false"]::after {

    content: ">>";
}


/* ทุกสถานะขนาดและตำแหน่งห้ามเปลี่ยน */

#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
#dooteeWorkspaceV3 #workspaceInspectBtn:active {

    width: fit-content !important;

    transform: none !important;
    translate: none !important;
}


/* มือถือ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn {

        gap: 8px !important;

        padding-left: 14px !important;
        padding-right: 8px !important;
    }


    #dooteeWorkspaceV3
    #workspaceInspectBtn::after {

        min-width: 38px;
        height: 34px;

        font-size: 20px;

        margin-left: 2px;
    }
}


/* END V62 */


/* ============================================================
   DOOTEE INSPECT ARROW PLAIN V63
   เอากรอบ/พื้นหลังของ >> << ออก
   ============================================================ */

#dooteeWorkspaceV3 #workspaceInspectBtn::after {

    /* เหลือเฉพาะตัวอักษร */
    background: transparent !important;
    border: 0 !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    min-width: 0 !important;
    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    margin-left: 6px !important;

    color: #fff !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    display: inline !important;

    pointer-events: none !important;
}


/* ลดช่องว่างด้านขวาของปุ่มด้วย */

#dooteeWorkspaceV3 #workspaceInspectBtn,
#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:active,
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

    width: fit-content !important;
    min-width: 0 !important;

    padding-left: 16px !important;
    padding-right: 14px !important;

    gap: 6px !important;

    transform: none !important;
    translate: none !important;
}


/* มือถือให้กระชับอีก */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn {

        padding-left: 14px !important;
        padding-right: 12px !important;

        gap: 5px !important;
    }

    #dooteeWorkspaceV3 #workspaceInspectBtn::after {

        margin-left: 4px !important;

        font-size: 19px !important;
    }
}

/* END V63 */



/* ============================================================
   EDIT AREA THAI UNIT V66
   ============================================================ */

#parcelAreaThaiLive {
    display: inline;
    margin-left: 5px;
    white-space: nowrap;
    font-weight: 700;
    color: #7df35b;
}


@media (max-width: 768px) {

    .parcel-area-live {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px 5px !important;
    }

    #parcelAreaThaiLive {
        margin-left: 0 !important;
        white-space: nowrap !important;
    }
}


/* END V66 */



/* ============================================================
   DOOTEE EDIT BUTTON RESTORE V68
   คืนปุ่ม Edit ทั้ง Desktop / Mobile
   ============================================================ */

#dooteeWorkspaceV3 #workspaceEditBtn {

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform: none !important;
    translate: none !important;

    z-index: 5200 !important;
}


/*
  hidden attribute จาก logic เก่า
  ห้ามทำให้ Edit หาย
*/

#dooteeWorkspaceV3 #workspaceEditBtn[hidden] {

    display: flex !important;
}


/*
  Desktop
*/

@media (min-width: 769px) {

    #dooteeWorkspaceV3 #workspaceEditBtn {

        left: 28px !important;

        visibility: visible !important;
        opacity: 1 !important;
    }
}


/*
  Mobile
  ใช้แนวซ้ายเดียวกับ +/-
*/

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceEditBtn {

        left: 36px !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 5200 !important;
    }
}


/* END V68 */



/* ============================================================
   DOOTEE LEFT ALIGN CONTROLS V69
   ตรวจดูที่ดิน + Edit ให้ขอบซ้ายตรงกับ Zoom +/-
   ============================================================ */

/*
  Leaflet zoom control อยู่ left: 28px ใน Desktop
  ดังนั้นใช้แนวเดียวกันทั้งหมด
*/

#dooteeWorkspaceV3 #workspaceInspectBtn,
#dooteeWorkspaceV3 #workspaceEditBtn {

    left: 28px !important;
    right: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
    translate: none !important;
}


/*
  ป้องกัน hover / active / focus
  ทำให้ปุ่มขยับออกจากแนวเดิม
*/

#dooteeWorkspaceV3 #workspaceInspectBtn:hover,
#dooteeWorkspaceV3 #workspaceInspectBtn:focus,
#dooteeWorkspaceV3 #workspaceInspectBtn:active,
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
#dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"],

#dooteeWorkspaceV3 #workspaceEditBtn:hover,
#dooteeWorkspaceV3 #workspaceEditBtn:focus,
#dooteeWorkspaceV3 #workspaceEditBtn:active {

    left: 28px !important;

    margin-left: 0 !important;

    transform: none !important;
    translate: none !important;
}


/* ============================================================
   MOBILE
   ใช้แนวซ้ายเดียวกับ Leaflet +/-
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn,

    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"],

    #dooteeWorkspaceV3 #workspaceEditBtn:hover,
    #dooteeWorkspaceV3 #workspaceEditBtn:focus,
    #dooteeWorkspaceV3 #workspaceEditBtn:active {

        left: 20px !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
        translate: none !important;
    }

}


/* END V69 */



/* ============================================================
   V70 - EXACT LEFT ALIGN DESKTOP
   Inspect + Edit = แนวเดียวกับ Leaflet Zoom
   ============================================================ */

@media (min-width: 769px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn {
        position: fixed !important;

        left: 28px !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }

    #dooteeWorkspaceV3 #workspaceEditBtn {
        position: fixed !important;

        left: 28px !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /* กด / hover แล้วห้ามขยับ */

    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"],

    #dooteeWorkspaceV3 #workspaceEditBtn:hover,
    #dooteeWorkspaceV3 #workspaceEditBtn:focus,
    #dooteeWorkspaceV3 #workspaceEditBtn:active {

        left: 28px !important;
        right: auto !important;

        margin-left: 0 !important;

        transform: none !important;
        translate: none !important;
    }

}


/* ============================================================
   MOBILE
   คงแนวซ้ายตาม Mobile
   ============================================================ */

@media (max-width: 768px) {

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn {

        left: 20px !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }

}

/* END V70 */



/* ============================================================
   V72 - MOBILE EDIT AREA COMPACT
   กล่องพื้นที่ด้านล่างฟิตตามตัวอักษร
   ============================================================ */

@media (max-width: 768px) {

    #parcelToolbar .parcel-area-live {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 8px 12px 10px !important;

        padding: 8px 10px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;

        column-gap: 5px !important;
        row-gap: 2px !important;

        line-height: 1.25 !important;

        box-sizing: border-box !important;
    }


    #parcelToolbar .parcel-area-live strong,
    #parcelToolbar #parcelAreaThaiLive {

        line-height: 1.25 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /*
      ไร่-งาน-ตารางวา
      อยู่บรรทัดที่สองแบบกระชับ
    */

    #parcelToolbar #parcelAreaThaiLive {

        flex-basis: 100% !important;

        text-align: center !important;

        padding: 0 !important;

        margin: 1px 0 0 !important;
    }

}


/* END V72 */



/* ============================================================
   V73 - MOBILE EDIT AREA TRUE COMPACT
   ให้กล่องพื้นที่สูงเท่าข้อความจริง
   ============================================================ */

@media (max-width: 768px) {

    #parcelToolbar .parcel-area-live {

        display: block !important;

        position: relative !important;

        width: auto !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: none !important;
        max-height: none !important;

        padding: 4px 8px !important;

        margin:
          4px 10px 6px !important;

        line-height: 1.15 !important;

        text-align: center !important;

        box-sizing: border-box !important;

        flex: none !important;

        overflow: visible !important;
    }


    #parcelToolbar .parcel-area-live > * {

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        line-height: 1.15 !important;
    }


    #parcelToolbar #parcelAreaLive {

        display: inline !important;

        margin: 0 2px !important;

        line-height: 1.15 !important;
    }


    #parcelToolbar #parcelAreaThaiLive {

        display: block !important;

        width: auto !important;

        margin: 2px 0 0 !important;

        padding: 0 !important;

        line-height: 1.15 !important;

        white-space: nowrap !important;
    }

}


/* END V73 */



/* ============================================================
   DOOTEE RADIUS REAL VALUE V75
   ยกเลิกข้อความ Radius ปลอมจาก CSS
   ใช้ข้อความและค่าจริงจาก HTML/JS เท่านั้น
   ============================================================ */


/*
  สำคัญ:
  CSS รุ่นเก่ามี ::before / ::after
  สร้างข้อความ "รัศมี" และค่าเช่น "5 km" ขึ้นมาเอง

  V75 ปิดทั้งหมด
*/

#radiusWorkspaceBar .target-radius-title::before,
#radiusWorkspaceBar .target-radius-title::after,
.target-radius-title::before,
.target-radius-title::after {

    content: none !important;

    display: none !important;
}


/*
  คืนข้อความจริงจาก HTML:
  รัศมี (Radius)
*/

#radiusWorkspaceBar .target-radius-title {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 7px !important;

    width: auto !important;

    min-width: max-content !important;

    height: auto !important;

    font-size: 16px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    visibility: visible !important;

    opacity: 1 !important;

    color: #fff !important;
}


/*
  คืนค่าจริง:
  0.0 / 0.5 / 1 / 2 / ...
*/

#radiusWorkspaceBar .target-radius-title strong {

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

    width: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    visibility: visible !important;

    opacity: 1 !important;

    font-size: inherit !important;

    line-height: inherit !important;

    color: #48e63f !important;
}


#radiusWorkspaceBar #workspaceRadiusValue {

    display: inline !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    font-size: inherit !important;

    line-height: inherit !important;

    color: #48e63f !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #radiusWorkspaceBar .target-radius-title {

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        font-size: 15px !important;

        white-space: nowrap !important;
    }


    #radiusWorkspaceBar .target-radius-title strong {

        display: inline-flex !important;

        font-size: inherit !important;
    }


    #radiusWorkspaceBar #workspaceRadiusValue {

        display: inline !important;

        font-size: inherit !important;
    }

}


/* END V75 */



/* ============================================================
   V78 ADMIN AREA
   ============================================================ */

.parcel-admin-area {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin:
        12px 0 16px;

}


.parcel-admin-field {

    min-width: 0;

}


.parcel-admin-field label {

    display: block;

    margin-bottom: 6px;

    font-weight: 700;

}


.parcel-admin-field select,
.parcel-admin-field input {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

}


.parcel-project-id-field {

    grid-column:
        1 / -1;

}


#autoProjectId {

    font-family:
        monospace;

    font-weight: 700;

    color: #78e95d;

}


/* MOBILE */

@media (max-width: 768px) {

    .parcel-admin-area {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .parcel-project-id-field {

        grid-column: auto;

    }

}


/* END V78 */



/* ============================================================
   V82 MAP CURRENT LOCATION BUTTON
   ============================================================ */

#fullMap,
.leaflet-container {
    position: relative;
}


.map-current-location-btn {

    position: absolute;

    left: 28px;
    top: 270px;

    z-index: 8500;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 44px;

    padding: 9px 14px;

    border: 1px solid rgba(105,220,255,.75);
    border-radius: 10px;

    background:
        rgba(8,61,72,.92);

    color: #fff;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(0,0,0,.28);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.map-current-location-btn:hover {

    background:
        rgba(12,85,96,.96);

}


.map-current-location-btn:active {

    transform: none;
}


.map-location-icon {

    font-size: 17px;
    line-height: 1;
}


@media (max-width: 768px) {

    .map-current-location-btn {

        /*
          ให้อยู่ใต้ +/- บนมือถือ
          เพื่อเหลือพื้นที่แผนที่กลางจอ
        */

        left: 56px;

        top: 455px;

        min-height: 46px;

        padding:
            8px 12px;

        font-size:
            15px;

        border-radius:
            10px;
    }


    .map-location-text {

        white-space:
            nowrap;
    }

}


/* END V82 */



/* ============================================================
   V86 UNIVERSAL LOCATION UI
   ============================================================ */

.map-location-controls-v86 {

    position: absolute;

    left: 28px;
    top: 430px;

    z-index: 9000;

    display: flex;
    flex-direction: column;

    gap: 7px;

    width: max-content;

    max-width:
        calc(100vw - 56px);

    pointer-events: auto;
}


.map-location-controls-v86 button {

    min-height: 44px;

    padding:
        9px 14px;

    border:
        1px solid rgba(
            100,
            210,
            235,
            .8
        );

    border-radius:
        10px;

    background:
        rgba(
            7,
            57,
            69,
            .94
        );

    color: #fff;

    font:
        inherit;

    font-weight:
        700;

    white-space:
        nowrap;

    cursor:
        pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.map-location-controls-v86
button:active {

    transform:
        none;
}


#mapSelectLocationBtn.is-active {

    outline:
        2px solid #4de33c;

    background:
        rgba(
            25,
            125,
            57,
            .96
        );
}


.leaflet-container.dootee-select-location {

    cursor:
        crosshair !important;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .map-location-controls-v86 {

        /*
          แนวซ้ายเดียวกับ +/- และปุ่มอื่น
        */

        left:
            36px;

        /*
          อยู่ใต้ +/-
          ไม่กินพื้นที่กลางแผนที่
        */

        top:
            455px;

        gap:
            6px;

        max-width:
            calc(100vw - 72px);
    }


    .map-location-controls-v86 button {

        min-height:
            46px;

        padding:
            8px 12px;

        font-size:
            15px;

        border-radius:
            10px;
    }

}


/* จอมือถือแคบ */

@media (max-width: 480px) {

    .map-location-controls-v86 {

        left:
            18px;

        max-width:
            calc(100vw - 36px);
    }


    .map-location-controls-v86 button {

        font-size:
            14px;

        padding:
            8px 10px;
    }

}


/* END V86 */



/* ============================================================
   V88 MOBILE LOCATION BUTTON POSITION
   ใช้ตำแหน่งปัจจุบัน อยู่แถวเดียวกับ วิเคราะห์พื้นที่
   ============================================================ */

@media (max-width: 768px) {

    #mapLocationControlsV86 {

        position: absolute !important;

        left: auto !important;
        right: 34px !important;

        top: auto !important;

        /*
          ให้อยู่เหนือ Radius
          และระดับเดียวกับ Analyze collapsed button
        */
        bottom: 174px !important;

        z-index: 9100 !important;

        display: flex !important;
        flex-direction: row !important;

        width: auto !important;
        max-width: calc(100vw - 72px) !important;

        gap: 6px !important;
    }


    #mapCurrentLocationV86 {

        position: relative !important;

        width: auto !important;
        min-width: 0 !important;

        min-height: 48px !important;

        padding: 8px 14px !important;

        margin: 0 !important;

        white-space: nowrap !important;

        font-size: 15px !important;
        line-height: 1.1 !important;

        z-index: 9101 !important;
    }


    /*
      ปุ่มเลือกจุดบนแผนที่
      ซ่อนไว้ก่อนบนมือถือ
      เพราะ Marker ลากได้อยู่แล้ว
    */

    #mapSelectLocationBtn {

        display: none !important;
    }

}


/*
  มือถือจอแคบ
*/

@media (max-width: 480px) {

    #mapLocationControlsV86 {

        right: 22px !important;

        bottom: 172px !important;
    }


    #mapCurrentLocationV86 {

        padding: 8px 11px !important;

        font-size: 14px !important;
    }

}


/* END V88 */


/* ============================================================
   V89 MOBILE ANALYZE + CURRENT LOCATION SAME ROW
   แก้ปุ่มใช้ตำแหน่งปัจจุบันทับปุ่มวิเคราะห์พื้นที่
   ============================================================ */

@media (max-width: 768px) {

    /*
      ชุดปุ่มตำแหน่ง
      ย้ายไปทางขวาของปุ่มวิเคราะห์พื้นที่
    */
    #mapLocationControlsV86,
    .map-location-controls-v86 {

        position: absolute !important;

        /*
          ห้ามอ้าง right แบบ V88
          เพราะจะทำให้ปุ่มกว้างย้อนมาทับ Analyze
        */
        right: auto !important;

        /*
          เริ่มประมาณครึ่งจอ
          อยู่ด้านขวาของ Analyze
        */
        left: 48% !important;

        /*
          ระดับเดียวกับ Analyze collapsed
        */
        top: auto !important;
        bottom: 174px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 48% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        z-index: 9200 !important;

        pointer-events: auto !important;
    }


    /*
      ปุ่ม GPS
    */
    #mapCurrentLocationV86,
    #mapCurrentLocationBtn,
    .dootee-current-location-btn {

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;

        /*
          ลด padding ซ้าย/ขวา
          เพื่อไม่ให้ปุ่มยาวเกินไป
        */
        padding: 7px 11px !important;

        white-space: nowrap !important;

        font-size: 14px !important;
        line-height: 1 !important;

        box-sizing: border-box !important;

        transform: none !important;

        z-index: 9201 !important;
    }


    /*
      ไม่แสดงปุ่มเลือกจุดในแถวนี้
    */
    #mapSelectLocationBtn {

        display: none !important;
    }

}


/* ============================================================
   มือถือจอแคบ
   ============================================================ */

@media (max-width: 480px) {

    #mapLocationControlsV86,
    .map-location-controls-v86 {

        /*
          ให้มีพื้นที่ Analyze ทางซ้ายประมาณ 46%
        */
        left: 47% !important;

        max-width: 51% !important;

        bottom: 174px !important;
    }


    #mapCurrentLocationV86,
    #mapCurrentLocationBtn,
    .dootee-current-location-btn {

        height: 46px !important;
        min-height: 46px !important;

        padding: 6px 8px !important;

        font-size: 13px !important;
    }

}


/* END V89 */



/* ============================================================
   V90 MOBILE LOCATION POSITION FINAL
   - ซ่อน Location button รุ่นเก่า
   - เหลือ V86 เพียงตัวเดียว
   - อยู่แถวเดียวกับ "วิเคราะห์พื้นที่"
   - อยู่เหนือ Radius
   ============================================================ */


/* ปุ่มรุ่นเก่า V82-V85 ห้ามแสดง */
#mapCurrentLocationBtn {
    display: none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    /*
      Container ของ V86
      อ้างอิงจาก viewport โดยตรง
      ไม่อิง container แผนที่อีก
    */

    #mapLocationControlsV86 {

        position: fixed !important;

        /*
          ด้านขวาของหน้าจอ
        */
        left: auto !important;
        right: 18px !important;

        top: auto !important;

        /*
          ให้อยู่ระดับเดียวกับ
          วิเคราะห์พื้นที่ตอนย่อ
          และเหนือ Radius
        */
        bottom: 174px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 46vw !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 0 !important;

        transform: none !important;

        z-index: 9500 !important;

        pointer-events: auto !important;
    }


    /*
      ปุ่ม GPS ตัวจริง V86
    */

    #mapCurrentLocationV86 {

        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;

        padding:
            7px 10px !important;

        border-radius:
            10px !important;

        white-space:
            nowrap !important;

        font-size:
            13px !important;

        line-height:
            1 !important;

        box-sizing:
            border-box !important;

        transform:
            none !important;

        z-index:
            9501 !important;
    }


    /*
      ตอนนี้ไม่ต้องแสดง
      "เลือกจุดบนแผนที่"
      เพื่อไม่ให้กินพื้นที่
    */

    #mapSelectLocationBtn {

        display:
            none !important;
    }

}


/* ============================================================
   MOBILE จอแคบ
   ============================================================ */

@media (max-width: 480px) {

    #mapLocationControlsV86 {

        right:
            16px !important;

        bottom:
            174px !important;

        max-width:
            47vw !important;
    }


    #mapCurrentLocationV86 {

        height:
            46px !important;

        min-height:
            46px !important;

        padding:
            6px 8px !important;

        font-size:
            12px !important;
    }

}


/* END V90 */



/* ============================================================
   V91 CURRENT LOCATION BUTTON
   ============================================================ */

#dooteeCurrentLocationV91 {

    position:
        fixed !important;

    z-index:
        9400 !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(100,215,240,.9);

    border-radius:
        10px;

    background:
        rgba(7,58,70,.95);

    color:
        #fff;

    font:
        inherit;

    font-weight:
        700;

    white-space:
        nowrap;

    box-sizing:
        border-box;

    cursor:
        pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.25);

    transform:
        none !important;

}


#dooteeCurrentLocationV91:hover {

    background:
        rgba(10,82,94,.97);

}


#dooteeCurrentLocationV91:active {

    transform:
        none !important;
}


#dooteeCurrentLocationV91.is-mobile-v91 {

    padding:
        5px 7px;

    font-size:
        13px;

    gap:
        4px;

}


/* END V91 */



/* ============================================================
   V92 LOCATION BUTTON POSITION OVERRIDE
   ============================================================ */

#dooteeCurrentLocationV91 {

    margin: 0 !important;

    bottom: auto !important;
    right: auto !important;

    transform: none !important;

    pointer-events: auto !important;

    z-index: 9600 !important;
}


@media (max-width: 768px) {

    #dooteeCurrentLocationV91 {

        min-width: 0 !important;

        padding:
            5px 8px !important;

        font-size:
            13px !important;

        line-height:
            1 !important;

        border-radius:
            10px !important;

        white-space:
            nowrap !important;
    }

}


/* END V92 */


/* ============================================================
   V93 STABLE CURRENT LOCATION
   ============================================================ */


/*
  ปิดรุ่นเก่าโดย CSS อีกชั้น
*/

#mapCurrentLocationBtn,
#mapCurrentLocationV86,
#mapLocationControlsV86,
#dooteeCurrentLocationV91 {

    display:
        none !important;
}


#dooteeCurrentLocationV93 {

    position:
        fixed !important;

    z-index:
        9650 !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin:
        0 !important;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(85,210,235,.9);

    border-radius:
        11px;

    background:
        rgba(7,58,70,.95);

    color:
        #fff;

    font:
        inherit;

    font-weight:
        700;

    white-space:
        nowrap;

    box-sizing:
        border-box;

    cursor:
        pointer;

    touch-action:
        manipulation;

    transform:
        none !important;

    -webkit-tap-highlight-color:
        transparent;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.28);
}


#dooteeCurrentLocationV93:active {

    transform:
        none !important;
}


@media (max-width: 768px) {

    #dooteeCurrentLocationV93 {

        min-width:
            0 !important;

        padding:
            6px 9px;

        font-size:
            13px;

        line-height:
            1.05;
    }

}


/* END V93 */



/* ============================================================
   V95 MOBILE EXACT LEFT ALIGNMENT
   FINAL MOBILE LEFT SOURCE OF TRUTH
   ============================================================ */

@media (max-width: 768px) {

    :root {
        --dt-mobile-control-left: 14px;
    }


    /*
      ตรวจดูที่ดิน
    */

    #dooteeWorkspaceV3 #workspaceInspectBtn,
    #dooteeWorkspaceV3 #workspaceInspectBtn:hover,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus,
    #dooteeWorkspaceV3 #workspaceInspectBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceInspectBtn:active,
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="true"],
    #dooteeWorkspaceV3 #workspaceInspectBtn[aria-expanded="false"] {

        position: fixed !important;

        left:
            var(--dt-mobile-control-left) !important;

        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /*
      Edit
    */

    #dooteeWorkspaceV3 #workspaceEditBtn,
    #dooteeWorkspaceV3 #workspaceEditBtn:hover,
    #dooteeWorkspaceV3 #workspaceEditBtn:focus,
    #dooteeWorkspaceV3 #workspaceEditBtn:focus-visible,
    #dooteeWorkspaceV3 #workspaceEditBtn:active {

        position: fixed !important;

        left:
            var(--dt-mobile-control-left) !important;

        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;
    }


    /*
      Leaflet Zoom +/-

      สำคัญ:
      Leaflet ใช้ .leaflet-left เป็น origin
      ดังนั้น Zoom ใช้ margin-left 14px
    */

    #fullMap .leaflet-left {
        left: 0 !important;
    }


    #fullMap .leaflet-control-zoom,
    .leaflet-left .leaflet-control-zoom {

        left: 0 !important;
        right: auto !important;

        margin-left:
            var(--dt-mobile-control-left) !important;

        transform: none !important;
        translate: none !important;
    }

}


/* END V95 */

/* ============================================================
   V96 REMOVE FLOATING LOCATION BUTTONS
   ============================================================ */

#mapCurrentLocationBtn,
#mapCurrentLocationV86,
#mapLocationControlsV86,
#dooteeCurrentLocationV91,
#dooteeCurrentLocationV93 {
    display: none !important;
}


/*
  Marker ต้องยังลากและรับ Long Press ได้
*/

#fullMap .leaflet-marker-icon {
    pointer-events: auto !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* END V96 */



/* ============================================================
   V100 SIMPLE MARKER UI
   ============================================================ */

#mapCurrentLocationBtn,
#mapCurrentLocationV86,
#mapLocationControlsV86,
#dooteeCurrentLocationV91,
#dooteeCurrentLocationV93 {

    display:
        none !important;
}


/*
  Marker รับ Mouse / Touch ได้ตามปกติ
*/

.leaflet-marker-icon {

    pointer-events:
        auto !important;

    -webkit-user-select:
        none;

    user-select:
        none;

    -webkit-touch-callout:
        none;
}


/* END V100 */


/* ============================================================
   V101 PANEL CLICK / POINTER FIX
   - Map คลิกได้ตามปกติ
   - Panel buttons อยู่หน้าสุด
   - Inspect / Edit / Analyze / Radius / Layer รับ click/touch
   ============================================================ */


/*
 * Workspace เป็น overlay เต็มแผนที่
 * ตัว wrapper ห้ามเป็นตัวดัก Mouse/Touch
 */
#dooteeWorkspaceV3 {
    pointer-events: none !important;
}


/*
 * แต่ Control จริงทั้งหมดต้องรับ event
 */
#dooteeWorkspaceV3 button,
#dooteeWorkspaceV3 input,
#dooteeWorkspaceV3 select,
#dooteeWorkspaceV3 textarea,
#dooteeWorkspaceV3 label,
#dooteeWorkspaceV3 [role="button"] {
    pointer-events: auto !important;
}


/*
 * ปุ่มหลัก
 */
#workspaceInspectBtn,
#workspaceEditBtn {
    pointer-events: auto !important;
    z-index: 30050 !important;
}


/*
 * ปุ่มทุกตัวใน Workspace
 * รวม << / >> / วิเคราะห์พื้นที่
 */
#dooteeWorkspaceV3 button {
    position: relative;
    z-index: 30060 !important;

    cursor: pointer !important;

    touch-action: manipulation !important;

    -webkit-tap-highlight-color:
        transparent;
}


/*
 * ช่องข้อมูลต้องใช้งานได้
 */
#dooteeWorkspaceV3 input,
#dooteeWorkspaceV3 select,
#dooteeWorkspaceV3 textarea {
    position: relative;
    z-index: 30055 !important;
}


/*
 * Leaflet controls ต้องยังอยู่ด้านหน้า Map
 */
.leaflet-control-container {
    pointer-events: none;
}


.leaflet-control-container
.leaflet-control {
    pointer-events: auto !important;
}


/*
 * Layer Panel
 */
.leaflet-control-layers,
.leaflet-control-zoom {
    pointer-events: auto !important;
}


/*
 * Marker
 */
.leaflet-marker-icon {
    pointer-events: auto !important;
}


/* END V101 */