/* =========================================================
   Global Search (Header Topbar)
   - Dark theme compatible
   - Sections: Customers + Devices (Service section removed)
   ========================================================= */


   
.topbar-search input {
            background-color: #020617;
            border-color: #111827;
            color: #e5e7eb;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,0.9);
        }

.topbar-search input::placeholder {
            color: #6b7280;
        }

        
/* Global Search */
.gs { width: 420px; max-width: 42vw; }
.gs-input { padding-right: 34px; }

/* Panel */
.gs-panel{
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  width: min(750px, 82vw);
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1055;

  background: rgba(13,18,30,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.gs-panel::-webkit-scrollbar{ width: 10px; }
.gs-panel::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
.gs-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.gs-panel::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* Header + footer */
.gs-head, .gs-foot{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.gs-head{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(13,18,30,.98);
  position: sticky;
  top: 0;
  z-index: 10;
}
.gs-foot{ border-top: 1px solid rgba(255,255,255,.08); }

.gs-head-title{ font-size:.85rem; color: rgba(255,255,255,.85); }
.gs-head-hint{ font-size:.72rem; color: rgba(255,255,255,.45); }

/* Empty */
.gs-empty{
  padding: 14px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(255,255,255,.65);
}
.gs-empty-title{ font-weight:600; color: rgba(255,255,255,.85); }
.gs-empty-sub{ font-size:.78rem; color: rgba(255,255,255,.55); }

/* Sections */
.gs-section{ padding: 8px 0; }
/* Section title sticky ama head altına yapışır ve çakışmaz */
.gs-section-title{
  position: static;
  top: 46px;                     /* 44 yerine 46/48 dene */
  z-index: auto;                    /* diğer itemların üstünde, head'in altında */

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

  padding: 8px 12px;
  margin: 8px 6px 0 6px;         /* <-- KRİTİK: üstten boşluk */
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  color: #fff;
}

.gs-section-title i{
  width: 18px;
  text-align:center;
  opacity: 1;
}

.gs-section-count{
  margin-left:auto;
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.85);
  font-size:.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
}

.gs-list{ display:flex; flex-direction:column; }

/* Item row */
.gs-item{
  padding: 7px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:default;
  border-top: 1px solid rgba(255,255,255,.06);
}
.gs-item:first-child{ border-top: 0; }
.gs-item:hover{ background: rgba(255,255,255,.06); }
.gs-item.active{
  background: rgba(255,255,255,.08);
  outline: 1px solid rgba(255,255,255,.08);
}

/* Left icon capsule */
.gs-ic{
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  flex: 0 0 28px;
}

.gs-body{ min-width: 0; flex: 1; }

/* Title row: single-line */
.gs-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:nowrap;
}

.gs-title{
  font-size: .86rem;
  color: rgba(255,255,255,.90);
  line-height: 1.1;
  font-weight: 500;

  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.gs-sub{
  margin-top: 4px;
  font-size: .8rem;
  opacity: .75;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.gs-badges{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden; /* fazla olursa kırp */
}

/* Badge base */
.gs-badge{
  font-size: .70rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Type badges */
.gs-badge.type-bireysel{ color: rgba(91,192,222,.95); }
.gs-badge.type-kurumsal{ color: rgba(240,173,78,.95); }

/* Meta badges (tel/il/sn/servis/asama) */
.gs-badge.meta{ opacity: .92; }

/* Stage soft coloring (optional) */
.gs-badge.st-bekleyen{ color: rgba(240,173,78,.95); }
.gs-badge.st-acik{ color: rgba(91,192,222,.95); }
.gs-badge.st-tamamlanan{ color: rgba(92,184,92,.95); }

/* Right actions */
.gs-act{
  display:flex;
  align-items:center;
  margin-left:auto;
  flex: 0 0 auto;
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .12s ease; 
}
.gs-act .btn{
  padding: 2px 8px;
  font-size: .72rem;
  opacity: .85;
  background: transparent;
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.gs-item:hover .gs-act .btn{
  opacity: 1;
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.gs-item:hover .gs-act,
.gs-item.active .gs-act{ opacity: 1; pointer-events: auto; }
/* Section başlıkları – opacity kaldırıldı (tam opak) */

.gs-section-title{
  opacity: 1 !important;
  background: rgba(255,255,255,.08);   /* mevcut tonu koru, opaklık yok */
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.gs-section-title i{
  opacity: 1;
}

.gs-section-count{
  opacity: 1;
  color: #fff;
  border-color: rgba(255,255,255,.22);
}

/* ===== Global Search Scrollbar (Visual) ===== */

/* Firefox */
.gs-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.06);
}

/* WebKit (Chrome, Edge, Safari) */
.gs-panel::-webkit-scrollbar{
  width: 10px;
}

.gs-panel::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  margin: 6px 0;               /* üst-alt boşluk */
}

.gs-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.18)
  );
  border-radius: 999px;
  border: 2px solid rgba(13,18,30,.98); /* panel zeminle boşluk hissi */
}

.gs-panel::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.55),
    rgba(255,255,255,.28)
  );
}


/* ===== Global Search - Mobile Fix ===== */
@media (max-width: 576px){

  /* Topbar içinde arama alanı gerçekten genişlesin */
  .topbar-search{
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .topbar{
    gap: 8px;
  }

  /* Arama alanı mobilde tam genişlik */
  .topbar-search .gs{
    width: 100%;
    max-width: 100%;
  }

  .topbar-search .gs-input,
  .topbar-search input{
    width: 100% !important;
    min-width: 0;
  }

  /* Panel: mobilde viewport'a göre genişle (input genişliğiyle sınırlanmasın) */
  .topbar-search .gs-panel{
    position: fixed;               /* <-- kritik */
    left: 10px;
    right: 10px;
    width: auto;
    top: 64px;                     /* topbar yüksekliğine göre gerekirse 56/64 ayarla */
    max-height: min(72vh, 560px);
    z-index: 1065;
  }

  /* Satırları biraz daha kompakt */
  .gs-item{
    padding: 6px 10px;
    gap: 8px;
  }

  .gs-head-hint{
    display:none;
  }

  /* Mobilde sağ butonları gizle (satır tıklanır) */
  .gs-act{
    display:none;
  }

  /* Badge alanı taşmasın: gerekirse 2 satır */
  .gs-title-row{
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .gs-badges{
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }

  .gs-badge{
    max-width: 100%;
  }
}