/* ============================================================
   macOS tarzi acilir liste (native <select> progressive enhancement).
   Native select'e `p360-acilir-kaynak` class'i eklenir; acilir.js onu sarip
   buton + panel uretir. Native select gizli kalir ama HTMX kaynagi + change
   olayi onda calismaya devam eder (custom UI sadece gorsel + select.value set).
   Token'lar degiskenler.css'ten — dark mode otomatik.
   ============================================================ */

.p360-acilir { position: relative; display: inline-block; }

/* Native select gizli ama erisilebilir (HTMX/forma katki + dispatchEvent).
   Wrapper-ici HER native select'i hedefler: bazi tema/specificity kombinasyonunda
   (orn. dark mode `body[data-theme=dark] select`) class tek basina yetmedigi icin
   wrapper-ici select'i !important ile garanti gizleriz. display:none KULLANILMAZ —
   select DOM'da kalmali (HTMX kaynagi + change olayi). */
.p360-acilir > select,
.p360-acilir-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0); overflow: hidden;
}

.p360-acilir-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 33px; padding: 0 9px 0 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.p360-acilir-btn:hover { border-color: var(--border-strong); }
.p360-acilir-btn .ac-deger { overflow: hidden; text-overflow: ellipsis; }
.p360-acilir-btn i { font-size: 12px; color: var(--muted); flex-shrink: 0; transition: transform 0.16s ease; }
.p360-acilir.acik .p360-acilir-btn { border-color: var(--mac-blue); box-shadow: var(--focus-ring); }
.p360-acilir.acik .p360-acilir-btn i { transform: rotate(180deg); }

/* Panel position:FIXED — ic-pencere/scroll konteynerlerinin overflow:hidden'i tarafindan
   kirpilmamak icin (top/left/maxHeight JS konumla() ile set edilir; viewport'a gore). */
.p360-acilir-panel {
  position: fixed;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--golge-yuksek, 0 12px 28px rgba(0, 0, 0, 0.14));
  padding: 5px; z-index: 9999;
  max-height: 300px;
  /* Arama kutusu sabit kalsin, yalniz secenek listesi kaysin diye flex kolon + overflow gizli. */
  display: flex; flex-direction: column; overflow: hidden;
  animation: p360-acilir-gir 0.13s ease;
}
/* display:flex, tarayicinin [hidden]{display:none} kuralini ezer; panel hidden iken de
   gorunur kalir (acilista hepsi acik + kapanmaz). [hidden] ile acikca gizle. */
.p360-acilir-panel[hidden] { display: none; }
@keyframes p360-acilir-gir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Arama kutusu (cok secenekli dropdownlarda gorunur; panelin ustunde sabit). */
.p360-acilir-ara {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; margin-bottom: 4px;
  border-radius: 7px; background: var(--gray-surface);
  flex-shrink: 0;
}
.p360-acilir-ara[hidden] { display: none; }
.p360-acilir-ara i { font-size: 12px; color: var(--muted); }
.p360-acilir-ara input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font); font-size: 12.5px; color: var(--text);
}

/* Secenek listesi — panel ici tek kayan alan. */
.p360-acilir-liste { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ac-secenek[hidden] { display: none; }
.ac-bos { padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.ac-secenek {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 7px; background: transparent;
  font-family: var(--font); font-size: 12.5px; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
/* Tek satirli secenek metni panel genisligini asarsa ellipsis ile kesilir (panel sabit genislikte). */
.ac-secenek > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ac-secenek:hover { background: var(--hover-bg); }
.ac-secenek.aktif { background: var(--mac-blue-soft); color: var(--mac-blue); font-weight: 600; }
.ac-secenek .ac-tik { margin-left: auto; font-size: 12px; opacity: 0; }
.ac-secenek.aktif .ac-tik { opacity: 1; }

/* Cift satirli secenek (data-alt): ana metin + altinda soluk ikincil satir (orn. WBS dal yolu). */
.ac-secenek-cift { align-items: flex-start; }
.ac-secenek-cift .ac-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ac-secenek-cift .ac-ana { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-secenek-cift .ac-alt { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-secenek-cift.aktif .ac-alt { color: var(--mac-blue); opacity: .8; }

/* Renkli rozet (data-rozet): secenegin sagina kucuk sinif etiketi (orn. Sarf/Demirbas). */
.ac-secenek .ac-rozet {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--muted); background: var(--hover-bg);
}
/* Renkler Urun listesi pill'leriyle ayni (rozet.css .pill.green/.gray/.amber): demirbas yesil,
   sarf gri, siniflandirilmamis amber. Tutarli okuma. */
.ac-rozet-demirbas { color: var(--green-dark); background: var(--green-bg); }
.ac-rozet-sarf { color: var(--muted); background: rgba(0,0,0,0.07); }
.ac-rozet-belirsiz { color: var(--orange-dark); background: var(--orange-soft); }

/* ============================================================
   .p360-sec-cipler — acilirdan COKLU secim cipleri (P360Acilir.cipDavranisiKur).
   Secilen ogeler acilirdan duser, burada cip olarak birikir; capraz ile geri gelir.
   Gercek deger tasiyicilar gizli havuzdaki checkbox'lardir (bkz. acilir.js).
   ============================================================ */
.p360-sec-cipler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.p360-sec-cipler:empty { display: none; }
.p360-sec-cipler .cip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 10px; border: 1px solid var(--mac-blue); border-radius: 999px; background: var(--mac-blue-soft); font-size: 12.5px; color: var(--text); }
.p360-sec-cipler .cip .yuk { color: var(--muted); font-size: 11.5px; }
.p360-sec-cipler .cip button { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.p360-sec-cipler .cip button:hover { background: var(--red-bg); color: var(--red-dark); }

/* TUZAK: bu listelerde `display` kurali [hidden] ozniteligini ezer -> gizli deger havuzu
   ekranda gorunur kalir. Acikca bastiriliyor (kuyruk/talep-detay/birim-talep havuzlari). */
.tl-sec-liste[hidden], .it-sec-liste[hidden] { display: none; }

/* Kisi-bazli atama satiri: ad + kendi aciklamasi + kendi son tarihi.
   Bos birakilan alan cezalandirmaz -> backend geneli, o da yoksa alt-talep hedefini kullanir. */
.p360-sec-cipler .sec-satir { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--gray-surface); }
.p360-sec-cipler .sec-satir-bas { display: flex; align-items: center; gap: 8px; }
.p360-sec-cipler .sec-satir-bas .ad { font-size: 13px; font-weight: 600; color: var(--text); }
.p360-sec-cipler .sec-satir-bas .yuk { font-size: 11.5px; color: var(--muted); }
.p360-sec-cipler .sec-satir-bas .sil { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.p360-sec-cipler .sec-satir-bas .sil:hover { background: var(--red-bg); color: var(--red-dark); }
.p360-sec-cipler .sec-satir-alan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p360-sec-cipler .sec-satir-aciklama { flex: 1 1 200px; min-width: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12.5px; font-family: inherit; }
.p360-sec-cipler .sec-satir-aciklama:focus { outline: none; border-color: var(--mac-blue); }
.p360-sec-cipler .sec-satir-tarih { flex: 0 0 auto; }