/* ==========================================================================
   DorukCRM — 11-multiselect.css
   Çoklu seçici: seçilenler etiket, seçilecekler açılır listede.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor: barındırmanın FTP yazması büyük
   dosyalarda 16384'ün katlarında kesiliyor. Bu yüzden bileşen 09-widgets'a
   eklenmedi (14.7 KB) — kendi parçasında duruyor.
   ========================================================================== */

/* Kutunun kendisi .input gibi görünüyor ve bu bilerek: formdaki diğer
   alanlarla aynı yükseklik, aynı kenarlık, aynı odak halkası. Farklı görünen
   bir seçici, kullanıcıya "bu başka bir şey" der ve öyle bir şey değil. */
.msel { position: relative; }

.msel__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 38px;
  padding: .3125rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.msel__field:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}

.msel--locked .msel__field {
  background: var(--surface-2);
  cursor: not-allowed;
  opacity: .75;
}

/* Etiketler sarıyor: on beş numara seçilmiş bir kutu yatay kaydırmaya
   düşmemeli — okunacak şey listenin tamamı. */
.msel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  flex: 1;
  min-width: 0;
}

.msel__empty { color: var(--text-faint); font-size: .875rem; }

.msel__chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .25rem .125rem .5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.msel__remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.msel__remove:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.msel__remove svg   { width: 12px; height: 12px; }

.msel__caret { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.msel__caret svg { width: 16px; height: 16px; }

/* Panel kutunun ÜSTÜNE açılıyor, altındaki alanları itmiyor: form uzunsa
   açılan bir liste sayfayı zıplatır ve tıklanacak yer kayar. */
.msel__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.msel__search { margin-bottom: .375rem; }

/* Yükseklik sınırı: yirmi dilin tamamı ekranı kaplamamalı. */
.msel__list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.msel__option {
  display: block;
  width: 100%;
  padding: .375rem .5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}

.msel__option:hover { background: var(--surface-2); }

/* Seçili seçenek listede de işaretli kalıyor: kutuyu açan kişi neyin zaten
   seçili olduğunu etiketlere bakmadan görebilmeli. */
.msel__option--on {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-weight: 600;
}

.msel__option--on::after {
  content: '✓';
  float: right;
}

.msel__none {
  padding: .5rem;
  color: var(--text-faint);
  font-size: .8125rem;
}

/* Izgara içindeki alanlar kendi alt boşluğunu taşımıyor: ızgaranın kendi
   aralığı var ve ikisi üst üste binince satırlar arası boşluk iki katına
   çıkıyordu. */
.grid > .field { margin-bottom: 0; }

/* Açıklama seçicinin ALTINDA ve küçük: alanın okunma sırası başlık → seçim →
   açıklama. Açıklamanın seçimden önce gelmesi, kullanıcıyı henüz görmediği
   bir kutunun kuralını okumaya zorlardı. */
.msel + .help { margin-top: .375rem; }