/* ============================================================================
   SÜZGEÇ ŞERİDİ — tek satır, nizami, Excel/Sheets benzeri ince çerçeve
   Kart #993255 · Mehmet Şah (8 Eki 2026, birebir):
   "inputların margin paddingleri ayarla ve alta düşmeleri engelle tek satırda
    nizami bir görüntü input çerçeveleri belli belirsiz aynı excel gibi olsun
    bu şekilde yapalım ben önceden manuel yapıyordum."

   NEDEN ORTAK DOSYA: bu düzen bugüne kadar her ekranda ELLE tutturuluyordu
   (sahibin kendi sözü). Elle tutturulan düzen yeni ekran eklenince kayar ve
   aynı iş ikinci kez yapılır — bu depoda ölçülmüş arıza sınıfı. Artık tek
   kaynak burasıdır; yeni ekran `.kl-suzgec-serit` sınıfını alır, bitti.

   YALNIZ AÇIKÇA SEÇEN EKRAN — `.kl-suzgec-serit` (12 Eki 2026):
   İlk sürümde ikinci bir seçici daha vardı: `#collapseFilter #filter_form`.
   "Dört ekranın ortak deseni" sanılıyordu; ölçünce 17 ekran çıktı (üye ve
   admin Kargolarım dahil). 40+ kutulu, bölümlü süzgeçler tek satıra sıkışıp
   yatay kayıyor, ikonlar etiketlerin üstüne biniyordu (Gönderio üye şikâyeti:
   "ekran yerleri kaymış"). Genel seçici KALDIRILDI; şeridi isteyen ekran
   sınıfı kendisi alır: admin/prices.php, admin/statement.php,
   admin/price-lists.php, invoices.php.

   ⚠ KAPSAM: yalnız GÖRÜNÜM. Süzgeç işlevi, backend sorgusu, para yolu ve
   #prices_table hücre kuralları bu dosyanın DIŞINDA (tablo CSS'i #993256'da).
   ============================================================================ */

/* --- 1) TEK SATIR: alta düşme yok -------------------------------------------
   Bootstrap `.row` varsayılanı `flex-wrap: wrap` — şikâyetin kaynağı tam bu.
   `nowrap` + yatay kaydırma: dar ekranda kutular ezilmek yerine kayar. */
.kl-suzgec-serit .row {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  align-items: flex-end;     /* farklı yükseklikteki kutular ALTTAN hizalanır */
  gap: 8px;                  /* 4px ızgarası */
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 4px;       /* kaydırma çubuğu kutulara yapışmasın */
  scrollbar-width: thin;
}

/* Kolonlar sabit tabanlı: ne büyüyüp satırı bozsun ne de okunmaz hâle gelsin. */
.kl-suzgec-serit .row > [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 148px;
  max-width: 240px;
  padding-left: 0;
  padding-right: 0;
}
/* Düğme kolonları daralmasın ama yer de kaplamasın. */
.kl-suzgec-serit .row > .d-grid {
  min-width: 112px;
}

/* --- 2) MARGIN / PADDING: tutarlı, 4px ızgarasında --------------------------
   Ekranlarda `mb-2` / `mb-3` / `m-4` karışık kullanılmıştı; alt boşluklar
   eşit değildi. Şeridin içinde hepsi SIFIRLANIP tek kurala bağlanıyor. */
.kl-suzgec-serit .form-floating,
.kl-suzgec-serit .form-icon-container {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.kl-suzgec-serit .form-control,
.kl-suzgec-serit .form-select {
  padding: 8px 10px;         /* dikey 8px — nefes eşiği ≥6px */
  min-height: 36px;
  height: auto;
  font-size: 12px;           /* ≥11px */
  line-height: 1.4;          /* ≥1.3, px ile çakılmadı */
}
/* `.form-floating` etiketi kutunun içinde yüzüyor; dolu kutuda metni ezmesin. */
.kl-suzgec-serit .form-floating > label {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.3;
}
.kl-suzgec-serit .form-floating > .form-control:focus ~ label,
.kl-suzgec-serit .form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: .62;
  transform: scale(.8) translateY(-7px) translateX(2px);
}

/* --- 3) ÇERÇEVE: belli belirsiz, Excel hücre çizgisi gibi -------------------
   Ton 6.0 onaylı tasarımdan: #e4e7ea (ASISTAN-6.0-ONAYLI.html paletinde 19 kez
   geçen ayırıcı tonu). Sabit renk YAZILMADI — önce temanın kendi değişkeni
   denenir, yoksa 6.0 tonuna düşülür; koyu tema böylece kırılmaz. */
.kl-suzgec-serit .form-control,
.kl-suzgec-serit .form-select {
  border: 1px solid var(--phoenix-border-color, #e4e7ea);
  border-radius: 4px;
  box-shadow: none;
  background-clip: padding-box;
  transition: border-color .12s ease-in-out;
}
.kl-suzgec-serit .form-control:hover,
.kl-suzgec-serit .form-select:hover {
  border-color: var(--phoenix-secondary-bg, #cfd4dc);
}
/* Odak: Bootstrap'in kalın mavi halkası Excel hissini bozuyordu — ince çizgi. */
.kl-suzgec-serit .form-control:focus,
.kl-suzgec-serit .form-select:focus {
  border-color: var(--phoenix-primary, #3874ff);
  box-shadow: 0 0 0 1px var(--phoenix-primary, #3874ff);
  outline: none;
}

/* --- 4) ŞERİDİN KABI: kart gürültüsü azalsın -------------------------------- */
.kl-suzgec-serit {
  padding: 12px;
  border: 1px solid var(--phoenix-border-color, #e4e7ea);
  border-radius: 6px;
}

/* Şerit içindeki düğmeler de aynı yükseklikte dursun (hizalı grid görünümü). */
.kl-suzgec-serit .btn {
  min-height: 36px;
  height: 36px;
  align-self: flex-end;
  padding: 0 14px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  white-space: nowrap;
}
.kl-suzgec-serit .btn-lg {
  font-size: 12px;           /* `btn-lg` şeridi şişiriyordu */
  padding: 8px 14px;
}

/* `.d-grid` kolonu dugmeyi dikey olarak GERIYORDU (onizlemede olculdu: SONRA
   panelinde dugmeler hala kutulardan iki kat uzundu). Sutun artik gerilmiyor. */
.kl-suzgec-serit .row > .d-grid {
  display: flex !important;
  align-items: flex-end;
}
.kl-suzgec-serit .row > .d-grid > .btn {
  width: 100%;
}
/* Etiketi olan duz alanlar (uye invoices.php deseni) da ayni yuksekligi alsin. */
.kl-suzgec-serit .form-label {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--phoenix-secondary-color, #6e7891);
}

/* `-lg` boy varyantlari seridi bozuyordu: admin/prices.php'de durum secimi
   `form-select form-control-lg form-lg` sinifini tasiyor ve komsu kutulardan
   ~6px uzun duruyordu (onizlemede olculdu). Serit icinde boy varyanti YOK —
   nizami gorunumun sarti butun kutularin AYNI yukseklikte olmasi. */
.kl-suzgec-serit .form-control-lg,
.kl-suzgec-serit .form-select-lg,
.kl-suzgec-serit .form-lg {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
}
/* `.form-floating` kutulari etiket tasidigi icin 36px'e sigmaz — serit
   icindeki TEK istisna onlardir ve kendi aralarinda esittir. */
.kl-suzgec-serit .form-floating > .form-control {
  height: 44px;
  min-height: 44px;
  padding: 14px 10px 4px;
}
.kl-suzgec-serit .row > [class*="col-"]:not(.d-grid) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Şeridi seçen formun kartı da eskisi gibi sade kalsın. AYRI kural: `:has()`
   desteklemeyen tarayıcı yalnız bu kuralı atlar, yukarıdakiler etkilenmez. */
#collapseFilter > .card.card-body:has(> .kl-suzgec-serit) {
  padding: 12px;
  border: 1px solid var(--phoenix-border-color, #e4e7ea);
  border-radius: 6px;
}

/* İkonlu kutular (`.form-icon-container`): şeridin padding'i temanın ikon
   boşluğunu (35px) eziyordu, mutlak konumlu ikon etiketin ve yazının üstüne
   biniyordu. Sol boşluk ikon için geri açılır, ikon 44px kutuda ortalanır. */
.kl-suzgec-serit .form-icon-container .form-icon-input,
.kl-suzgec-serit .form-icon-container .form-floating > .form-icon-label {
  padding-left: 32px;
}
.kl-suzgec-serit .form-icon-container .form-floating + .form-icon {
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}