/* =====================================================================
   شێوازی ئایفۆن: مینۆی خوارەوە + دوگمەکانی لای ڕاست + کارتی کەس + گەڕان
   تەنها CSS ـە، هیچ کۆدێکی index.html دەستکاری ناکات
   ===================================================================== */

/* ===================== ١. مینۆی خوارەوە ===================== */
/* ئاو: شووشەی شل (Liquid Glass) + شەپۆلی جووڵاو */
#floatingNav{
  position:fixed;
  overflow:hidden !important;
  padding:3px 12px !important;
  gap:4px !important;
  border-radius:24px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(186,230,253,.45) 55%,rgba(56,189,248,.38) 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(200%) brightness(1.05) !important;
  backdrop-filter:blur(22px) saturate(200%) brightness(1.05) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:
    0 14px 40px rgba(14,165,233,.35),
    0 2px 8px rgba(0,0,0,.06),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -10px 22px rgba(14,165,233,.28),
    inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
#floatingNav .w-px{display:none !important;}

/* شەپۆلی یەکەم (ئاوەکە) */
#floatingNav::before,
#floatingNav::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
  z-index:0;
  background-repeat:repeat-x;
}
#floatingNav::before{
  bottom:0;
  height:62%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q50 4 100 20 T200 20 V40 H0Z' fill='%2338bdf8' fill-opacity='.38'/%3E%3C/svg%3E");
  background-size:200px 100%;
  animation:navWaveA 7s linear infinite;
}
/* شەپۆلی دووەم (پێچەوانە) */
#floatingNav::after{
  bottom:0;
  height:48%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q40 36 80 22 T160 22 V40 H0Z' fill='%23ffffff' fill-opacity='.45'/%3E%3C/svg%3E");
  background-size:160px 100%;
  animation:navWaveB 5s linear infinite;
}
@keyframes navWaveA{from{background-position-x:0;}to{background-position-x:-200px;}}
@keyframes navWaveB{from{background-position-x:0;}to{background-position-x:160px;}}

/* دوگمەکان لەسەر ئاوەکە بن */
#floatingNav > button{position:relative;z-index:1;}

@media (prefers-reduced-motion:reduce){
  #floatingNav::before,#floatingNav::after{animation:none;}
}

#floatingNav button:not(#searchDockBtn){
  width:62px !important;
  height:auto !important;
  padding:2px 0 1px !important;
  border-radius:20px !important;
  background:transparent !important;
  color:var(--nc) !important;
}
#floatingNav button:not(#searchDockBtn):hover{
  background:transparent !important;
  color:var(--nc) !important;
}
/* گۆڕدرا: باگراوندی چوارگۆشەی ئایکۆنەکان لابرا */
#floatingNav button:not(#searchDockBtn) > i{
  width:40px;
  height:28px;
  border-radius:13px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:24px !important;
  margin-bottom:1px !important;
  color:var(--nc) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#floatingNav button:not(#searchDockBtn) > span:not(.absolute){
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:var(--nc) !important;
}
#floatingNav button:nth-of-type(1){--nc:#2563eb;--ncd:#60a5fa;--nb1:#dbeafe;--nb2:#bfdbfe;--ns:rgba(37,99,235,.25);}
#floatingNav button:nth-of-type(2){--nc:#059669;--ncd:#34d399;--nb1:#d1fae5;--nb2:#a7f3d0;--ns:rgba(5,150,105,.25);}
#floatingNav button:nth-of-type(3){--nc:#ea580c;--ncd:#fb923c;--nb1:#ffedd5;--nb2:#fed7aa;--ns:rgba(234,88,12,.25);}
#floatingNav button:nth-of-type(5){--nc:#7c3aed;--ncd:#a78bfa;--nb1:#ede9fe;--nb2:#ddd6fe;--ns:rgba(124,58,237,.25);}

/* گەڕان: باگراوندی شین لابرا، هەمان شێوەی ئایکۆنەکانی تر */
#floatingNav button:nth-of-type(4){--nc:#0284c7;--ncd:#38bdf8;}
#searchDockBtn,
#searchDockBtn:hover,
#searchDockBtn:active,
#searchDockBtn:focus{
  width:62px !important;
  height:auto !important;
  margin:0 !important;
  padding:2px 0 1px !important;
  border-radius:20px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
  color:var(--nc) !important;
}
#searchDockBtn > i{
  width:40px;
  height:28px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:24px !important;
  margin-bottom:1px !important;
  color:var(--nc) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#searchDockBtn > span{
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:var(--nc) !important;
}

/* ===================== ٢. دوگمەکانی لای ڕاست ===================== */
#sideTools{gap:10px !important;}
#sideTools button{
  width:44px !important;
  height:44px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter:blur(24px) saturate(190%) !important;
  backdrop-filter:blur(24px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 6px 18px var(--ss),inset 0 1px 0 rgba(255,255,255,.9) !important;
  color:var(--sc) !important;
}
#sideTools button i{font-size:17px !important;color:var(--sc) !important;}
#sideTools button:hover{
  background:rgba(255,255,255,.82) !important;
  color:var(--sc) !important;
}
#themeBtn{--sc:#d97706;--scd:#fbbf24;--ss:rgba(217,119,6,.22);}   /* دۆخی شەو */
#mapBtn{--sc:#059669;--scd:#34d399;--ss:rgba(5,150,105,.22);}   /* نەخشە */
#shotBtn{--sc:#7c3aed;--scd:#a78bfa;--ss:rgba(124,58,237,.22);}  /* کامێرا */
#relBtn{--sc:#db2777;--scd:#f472b6;--ss:rgba(219,39,119,.22);}  /* خزمایەتی */
#sideTools button:nth-last-of-type(2){--sc:#2563eb;--scd:#60a5fa;--ss:rgba(37,99,235,.22);}   /* زووم + */
#sideTools button:nth-last-of-type(1){--sc:#ea580c;--scd:#fb923c;--ss:rgba(234,88,12,.22);}   /* زووم - */

/* ===================== ٣. پەنجەرەی زانیاری کەس ===================== */
#nodeDetailsModal > div{
  border-radius:34px !important;
  box-shadow:0 30px 80px rgba(15,23,42,.45),0 0 0 1px rgba(255,255,255,.35) !important;
}
#nodeDetailsModal .ring-4{
  box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(99,102,241,.6),0 14px 32px rgba(59,130,246,.5) !important;
}
#detailName{letter-spacing:.2px;}
#nodeDetailsModal .grid-cols-3 > div{
  border-radius:20px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#nodeDetailsModal .grid-cols-2 > button{
  border-radius:18px !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
  background:linear-gradient(180deg,#f8fafc,#eef2f7) !important;
  box-shadow:0 3px 10px rgba(15,23,42,.08),inset 0 1px 0 #fff !important;
}
#callBtn,#waBtn{
  border-radius:18px !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
}
#detailAdminActions button{border-radius:18px !important;}

/* ===================== ٤. بۆکسی گەڕان ===================== */
#customSearchInput{
  border-radius:22px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(28px) saturate(190%) !important;
  backdrop-filter:blur(28px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:0 14px 40px rgba(37,99,235,.2),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#searchSuggestions{
  border-radius:22px !important;
  overflow-y:auto;
  background:rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter:blur(28px) saturate(190%) !important;
  backdrop-filter:blur(28px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  animation:popIn .3s cubic-bezier(.16,1,.3,1);
}
#searchSuggestions li{transition:background .15s ease;}
#searchSuggestions li:active{background:rgba(37,99,235,.15);}

/* ===================== دۆخی شەو ===================== */
html.dark #floatingNav{
  background:
    linear-gradient(180deg,rgba(30,41,59,.62) 0%,rgba(12,74,110,.5) 60%,rgba(3,105,161,.45) 100%) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 24px rgba(14,165,233,.18),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 22px rgba(14,165,233,.22) !important;
}
html.dark #floatingNav::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q50 4 100 20 T200 20 V40 H0Z' fill='%230ea5e9' fill-opacity='.32'/%3E%3C/svg%3E");
}
html.dark #floatingNav::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q40 36 80 22 T160 22 V40 H0Z' fill='%2338bdf8' fill-opacity='.22'/%3E%3C/svg%3E");
}
html.dark #floatingNav button:not(#searchDockBtn),
html.dark #floatingNav button:not(#searchDockBtn):hover,
html.dark #floatingNav button:not(#searchDockBtn) > i,
html.dark #floatingNav button:not(#searchDockBtn) > span:not(.absolute){
  color:var(--ncd) !important;
}
html.dark #floatingNav button:not(#searchDockBtn):hover{background:transparent !important;}
/* گۆڕدرا: باگراوندی ئایکۆنەکان لە دۆخی شەویش لابرا */
html.dark #floatingNav button:not(#searchDockBtn) > i{
  background:transparent !important;
  box-shadow:none !important;
}

html.dark #searchDockBtn,
html.dark #searchDockBtn:hover,
html.dark #searchDockBtn > i,
html.dark #searchDockBtn > span{
  color:var(--ncd) !important;
  background:transparent !important;
  box-shadow:none !important;
}

html.dark #sideTools button{
  background:rgba(30,41,59,.62) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:var(--scd) !important;
}
html.dark #sideTools button i{color:var(--scd) !important;}
html.dark #sideTools button:hover{background:rgba(51,65,85,.75) !important;color:var(--scd) !important;}

html.dark #nodeDetailsModal > div{
  box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1) !important;
}
html.dark #nodeDetailsModal .ring-4{
  box-shadow:0 0 0 4px #1e293b,0 0 0 7px rgba(129,140,248,.7),0 14px 32px rgba(59,130,246,.45) !important;
}
html.dark #nodeDetailsModal .grid-cols-3 > div{
  box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html.dark #nodeDetailsModal .grid-cols-2 > button{
  background:linear-gradient(180deg,#334155,#2b3a4f) !important;
  color:#e2e8f0 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html.dark #customSearchInput{
  background:rgba(30,41,59,.7) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html.dark #searchSuggestions{
  background:rgba(30,41,59,.82) !important;
  border-color:rgba(255,255,255,.14) !important;
}