/* ================= MAP ================= */

/* #map {
    height: 100vh;
    width: 100%;
    position: relative;
    background: #ddd;
} */


/* ================= TOP BAR ================= */

#menu {
   position: absolute;
   top: 0;
   width: 100%;
   padding: 8px 12px 8px 50px;
   z-index: 50;
   background: linear-gradient(90deg, #301c42, #50376c, #622e54);
}

.heading1 {
   color: #fff;
   font-size: 20px;
   text-shadow: 2px 2px 4px #000;
}


/* ================= SIDEBAR ================= */

.sidebar {
   position: absolute;
   top: 10%;
   right: 8px;
   /*width: 44px;
    */
   z-index: 100;
   transition: transform 0.35s ease, opacity 0.35s ease, height 0.35s ease;
   opacity: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.toolsFirst {
   background: rgba(41, 51, 60, 0.8);
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   ;
   backdrop-filter: blur(3px);
   padding: 4px !important;
}

.toolsSecd,
.toolsThird {
   background: rgba(41, 51, 60, 0.8);
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(3px);
   padding: 4px !important;
   padding-top: 0px !important;
}


/* Hide sidebar */

.sidebar.hidden {
   transform: translateX(130%);
   opacity: 0;
}


/* ================= MENU ITEMS ================= */

.menu ul {
   list-style: none;
   /* margin: 0px; */
   padding: 0px;
}

.menu li {
   display: flex;
   justify-content: center;
   flex-direction: row-reverse;
   align-items: center;
   /* change from stretch to center */
   margin-top: 6px;
   /* now it will work */
   cursor: pointer;
}

.menu a {
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #29333c;
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, .08);
   color: #fff;
   transition: all .25s ease;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
   -o-transition: all .25s ease;
}

.menu a i {
   font-size: 12px;
}


/* Toggle button */

.toggle-btn {
   position: fixed;
   top: 15px;
   right: 10px;
   padding: 6px;
   background: rgba(41, 51, 60, 0.95);
   border: none;
   border-radius: 6px;
   color: #fff;
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   width: 37px;
   height: 37px;
}

.toggle-btn i {
   font-size: 18px;
   transition: transform .3s ease;
}

.toggle-btn.active i {
   transform: rotate(180deg);
}

.sidebar.hidden {
   transform: translateX(120%);
   opacity: 0;
}


/* Mobile: hide sidebar by default */

@media (max-width: 767px) {
   .sidebar {
      opacity: 0;
   }

   .sidebar.show {
      /* transform: translateX(0); */
      opacity: 1;
      top: 60px;
   }

   .toggle-btn {
      display: flex !important;
   }
}


/* Desktop: sidebar always visible, toggle hidden */

@media (min-width: 768px) {
   .sidebar {
      transform: translateX(0);
      opacity: 1;
   }

   .toggle-btn {
      display: none !important;
   }
}


/* Search Icon start */
/* Map Search UI */
.map-search-container {
   position: absolute;
   top: -45px;
   right: 0;
   z-index: 1100;
   display: flex;
   align-items: center;
   gap: 8px;
}

/* Search Button */
.map-search-btn {
   width: 36px;
   height: 34px;
   border-radius: 50%;
   border: 3px solid #12a2f3;
   background: #000000;
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   /* box-shadow: 0 3px 8px rgb(0 0 0 / 25%); */
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, transform 0.2s ease;
}

.map-search-btn:hover {
   transform: scale(1.05);
}

/* Search Input */
.map-search-input {
   width: 0;
   /* position: ab */
   right: 600px;
   opacity: 0;
   padding: 0;
   height: 42px;
   border-radius: 22px;
   border: 1px solid #ccc;
   outline: none;
   font-size: 14px;
   transition: all 0.3s ease;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Active State */
.map-search-container.active .map-search-input {
   width: 240px;
   opacity: 1;
   padding: 0 15px;
}

/* Input Wrapper */
.map-search-input-wrapper {
   position: relative;

}

/* Clear Icon */
.map-search-clear {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 16px;
   color: #999;
   cursor: pointer;
   display: none;
   transition: color 0.2s ease;
}

.map-search-clear:hover {
   color: #e74c3c;
}

/* Show clear icon when active & has text */
.map-search-container.active .map-search-clear {
   display: block;
}

/* Search Icon End */
/* ===== Sidebar Hover Effect ===== */

.menu a:hover {
   background: linear-gradient(135deg, #3e0582, #0982ce);
   color: #fff;
   transform: translateY(-2px) scale(1.08);
   box-shadow: 0 6px 16px rgba(18, 162, 243, .45);
   border-color: #6eeffd;
}

.menu a:hover i {
   transform: scale(1.15);
}

/* ===== Modern Sidebar Tooltip ===== */

.tooltipBtn {
   position: relative;
}

.tooltipBtn::after {
   content: attr(data-tip);
   position: absolute;
   right: 42px;
   top: 50%;
   transform: translateY(-50%) scale(.85);
   background: linear-gradient(135deg, #141e30, #243b55);
   color: #fff;
   padding: 6px 10px;
   font-size: 12px;
   border-radius: 6px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: .25s ease;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* arrow */
.tooltipBtn::before {
   content: "";
   position: absolute;
   right: 36px;
   top: 50%;
   transform: translateY(-50%);
   border: 6px solid transparent;
   border-left-color: #243b55;
   opacity: 0;
   transition: .25s ease;
}

.tooltipBtn:hover::after,
.tooltipBtn:hover::before {
   opacity: 1;
   transform: translateY(-50%) scale(1);
}

/* active sidebar heighlight  */

/* ACTIVE TOOL BUTTON (panel opened) */
.menu a.activeTool {
   /* background: linear-gradient(135deg,#00bcd4,#023b41); */
   background: linear-gradient(135deg, #3e0582, #0982ce);

   color: #fff;
   transform: translateY(-2px) scale(1.1);
   /* box-shadow:0 0 4px rgba(0,229,255,.85); */
   border-color: #6eeffd;
}

.menu a.activeTool i {
   transform: scale(1.15);
}

/* ================= SECOND TOOL GROUP DESIGN ================= */


/* individual buttons inside second group */
.toolsSecd li a {
   background: #0d178b;
   /* darker teal */
   /* border: 1px solid #bb36ec; */
   border-radius: 6px;
   color: #fff;
   transition: all 0.25s ease;
}

.toolsThird li a {
   background: #0ba4e4;
   /* darker teal */
   /* border: 1px solid #55e6a9; */
   border-radius: 6px;
   color: #fff;
   transition: all 0.25s ease;
}

/* icon inside second group */
.toolsSecd li a i {
   font-size: 13px;
   transition: transform 0.25s ease;
}

.toolsSecd li a:hover i {
   transform: scale(1.2);
}

/*  base map */
.toolsBasemap {
   background: rgba(41, 51, 60, 0.8);
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(3px);
   padding: 6px !important;
   margin-top: 8px;
}

.baseThumb {
   width: 38px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000;
   border-radius: 6px;
   border: 2px solid transparent;
   cursor: pointer;
   margin-top: 6px;
   transition: .25s ease;
}

.baseThumb img {
   width: 26px;
   height: 29px;
   object-fit: cover;
   border-radius: 3px;
}

.baseThumb input {
   display: none;
}

/* hover glow */
.baseThumb:hover {
   transform: scale(1.08);
   box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

/* ⭐ SELECTED HIGHLIGHT */
.baseThumb:has(input:checked) {
   border: 2px solid #00e5ff;
   box-shadow: 0 0 12px rgba(0, 229, 255, .9);
   transform: scale(1.05);
}

.activeBase {
   border: 2px solid #00e5ff !important;
   box-shadow: 0 0 12px rgba(0, 229, 255, .9);
}

.right-sidebar .ctrlBtn {
   width: 33px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.right-sidebar .ctrlBtn i {
   font-size: 15px;
}

/* =====   Tooltip for Right Sidebar ===== */

.tooltipBtn {
   position: relative;
}

/* Tooltip text */
.tooltipBtn::after {
   content: attr(data-tip);
   position: absolute;
   right: 45px;
   /* ✅ move LEFT side */
   top: 50%;
   transform: translateY(-50%) translateX(5px);

   background: #000;
   color: #fff;
   padding: 6px 10px;
   font-size: 12px;
   border-radius: 6px;
   white-space: nowrap;

   opacity: 0;
   pointer-events: none;

   transition: all 0.25s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
   z-index: 9999;
}

/* Arrow */
.tooltipBtn::before {
   content: "";
   position: absolute;
   right: 38px;
   top: 50%;
   transform: translateY(-50%);

   border: 6px solid transparent;
   border-left-color: #000;
   /* arrow direction */

   opacity: 0;
   transition: all 0.25s ease;
}

/* Hover */
.tooltipBtn:hover::after,
.tooltipBtn:hover::before {
   opacity: 1;
   transform: translateY(-50%) translateX(0);
}

/* ===== DRONE BUTTON (USE SAME STYLE AS .menu a) ===== */

.menuBtnCustom {
   width: 44px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #0c0c0c;
   border-radius: 4px;
   border: 1px solid rgb(167 188 255);
   color: #fff;
   cursor: pointer;
   transition: all .25s ease;
}

#droneImg {
   height: 40px
}

/* icon */
.menuBtnCustom i {
   font-size: 13px;
   transition: transform .25s ease;
}

/* hover SAME as sidebar */
.menuBtnCustom:hover {
   background: linear-gradient(135deg, #3e0582, #0982ce);
   color: #fff;
   transform: translateY(-2px) scale(1.08);
   box-shadow: 0 6px 16px rgba(18, 162, 243, .45);
   border-color: #6eeffd;
}

.menuBtnCustom:hover i {
   transform: scale(1.15);
}

/* ACTIVE STATE SAME AS SIDEBAR */
.menuBtnCustom.activeTool {
   background: linear-gradient(135deg, #3e0582, #0982ce);
   color: #fff;
   transform: translateY(-2px) scale(1.1);
   border-color: #6eeffd;
}

.menuBtnCustom.activeTool i {
   transform: scale(1.15);
}

/* ===== DRONE PANEL POSITION (RIGHT OF BUTTON) ===== */

#drone-panel {
   position: absolute;
   bottom: 95px;
   /* align with button */
   left: 75px;
   /* 👉 pushes panel to RIGHT of button */
   width: 260px;

   background: rgba(41, 51, 60, 0.95);
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(4px);

   z-index: 1200;
   display: none;

   animation: slideRight .25s ease;
}

/* smooth entry animation */
@keyframes slideRight {
   from {
      opacity: 0;
      transform: translateX(-10px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

#drone-panel::before {
   content: "";
   position: absolute;
   left: -8px;
   bottom: 20px;

   border: 8px solid transparent;
   border-right-color: rgba(41, 51, 60, 0.95);
}

.drone-list {
   max-height: 240px;
   overflow-y: auto;
   padding: 6px;
}

/* item */
.drone-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
   border-radius: 6px;
   cursor: pointer;
   transition: .2s;
}

/* hover */
.drone-item:hover {
   background: rgba(255, 255, 255, 0.08);
}

/* checkbox */
.drone-item input {
   cursor: pointer;
}

/* name */
.drone-name {
   color: #fff;
   font-size: 13px;
   flex: 1;
}

/* GROUP ITEM (CLICKABLE ROW) */
.drone-group-item {
   padding: 8px 10px;
   margin: 4px 6px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
   font-size: 13px;

   cursor: pointer;
   /* ✅ IMPORTANT */
   transition: all 0.2s ease;
}

/* HOVER EFFECT */
.drone-group-item:hover {
   background: rgba(110, 239, 253, 0.15);
   color: #6eeffd;
}

/* ACTIVE CLICK STATE */
.drone-group-item.active {
   background: linear-gradient(135deg, #120962, #0982ce);
   color: #fff;
}