/* ============================================================================
   DEGER KUTUSU - ortak secim kutusu (deger-kutusu.js)

   Kullanici Yetkileri > Kisitlama'daki "Gorunen kolonlar" kutusunun stili;
   2026-09-17'de izinler.css'ten buraya tasindi cunku ayni kutu artik butun
   suzgec cekmecelerinde (Cari, Stok ve ortak tablo motoru) kullaniliyor.
   izinler.js kendi HTML'ini ayni sinif adlariyla basar, izinler.css yalnizca
   o ekrana ozel ezmeleri (dar kolon, kapsam anahtari) tutar. Burada degisen
   kural iki yere birden yansir - tek kaynak.

   Yapi: .y-deger-kutu > .y-deger-bas (etiket + secili sayisi + Temizle)
                       > .y-deger-secim (metin alani + ok)
         .y-deger-acilir > .y-deger-liste > label.y-deger-oge
   izinler'de acilir liste kutunun ICINDE mutlak konumlu durur; cekmecelerde
   ise belgeye asilir (.y-deger-acilir--yuzen, en altta).
   ============================================================================ */

/* Kutunun KENDI cercevesi yok: cerceve artik icindeki metin alaninda.
   Ikisi birden olunca "kutu icinde kutu" cikiyor ve asil denetimin nerede
   oldugu okunmuyordu. overflow da kalkti - acilir liste disari tasar. */
.y-deger-kutu {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
}


.y-deger-kutu.pasif { opacity: .55; pointer-events: none; }

/* Baslik artik kartin serit basligi degil, alanin ETIKETI: zeminsiz,
   cizgisiz, dogrudan metin alaninin ustunde. */
.y-deger-bas {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
}

/* Etiket SARILIR, kirpilmaz: "VKN-TCKN Grupla-Birleştir" gibi uzun bir ad
   yanindaki Temizle dugmesiyle birlikte tek satira sigmiyor ve "VKN-TCKN
   Grupla-B..." diye kesiliyordu. Iki satir olmasi, ne oldugunun anlasilmamasindan
   iyidir. */
.y-deger-etiket {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tx2);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Kac deger secildigi baslikta duruyor: liste kapali/kaydirilmis olsa da
   "burada bir sey secili mi" sorusu cevapli kalsin. */
.y-deger-sayi {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ac);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.y-deger-sil {
    flex: none;
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid var(--bd);
    border-radius: 6px;
    background: var(--surf);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tx3);
    cursor: pointer;
}

.y-deger-sil:hover { border-color: var(--ac); color: var(--ac); }

/* Acilir listenin capasi. */
.y-deger-secim {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* METIN ALANI. Kapaliyken secilenleri yazar, aciksa arama kutusudur.
   Gercek bir <input>: imleci, ok tuslarini, ekran okuyucu davranisini
   taklit etmeye calisan bir <div> yerine tarayicinin kendi denetimi. */
.y-deger-ara {
    width: 100%;
    min-width: 0;
    height: 30px;
    /* Sag dolgu oka yer aciyor; ok mutlak konumlu, akista yer kaplamiyor. */
    padding: 0 28px 0 9px;
    border: 1px solid var(--bd);
    border-radius: 7px;
    background: var(--surf);
    color: var(--tx);
    font: inherit;
    font-size: 12px;
    /* Uzun secim listesi ("09-HARUN, 100-ÜMİT, 101-RAMAZAN…") kutuyu
       genisletmez, kirpilir - genislik izgaradan gelir. */
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Aciksa artik bir arama kutusu: imlec de oyle davranmali. */
.y-deger-kutu.acik .y-deger-ara { cursor: text; }

.y-deger-ara::placeholder { color: var(--tx3); }

.y-deger-ara:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

/* Secili degeri olan kapali kutu, bos olandan ayrilmali: metin daha koyu. */
.y-deger-kutu:not(.acik) .y-deger-ara { color: var(--tx); font-weight: 500; }

.y-deger-ok {
    position: absolute;
    right: 9px;
    display: grid;
    place-items: center;
    color: var(--tx3);
    pointer-events: auto;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease;
}

.y-deger-secim:hover .y-deger-ok { color: var(--tx2); }

/* Ok, listenin acilacagi yonu gosterir; acikken ters doner. */
.y-deger-kutu.acik .y-deger-ok { transform: rotate(180deg); color: var(--ac); }
.y-deger-kutu.acik.yukari .y-deger-ok { transform: rotate(0deg); }

/* ACILIR LISTE - akisin USTUNE biner, panelin yuksekligini degistirmez.
   Akista kalsaydi acilis butun alt bolumleri asagi iter, kapanis geri
   cekerdi; kullanici goz ucuyla izledigi satiri her seferinde kaybederdi. */
.y-deger-acilir {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    border: 1px solid var(--bd);
    border-radius: 9px;
    background: var(--surf);
    box-shadow: var(--shadow-card-lg, 0 12px 28px -10px rgba(15, 23, 42, .28));
    /* "clip", "hidden" DEGIL: hidden bir KAYDIRMA KONTEYNERI acar. Listedeki
       bir isaret kutusuna odaklanildiginda (bkz. odakHedefi) tarayici onu
       gorunur kilmak icin en yakin kaydirilabilir atalari kaydiriyor ve panel
       de kayiyordu - icerik yukari cikip kirpiliyor, panel BOS gorunuyordu
       (2026-09-04'te kolon kutusunda ortaya cikti). clip kaydirilamaz. */
    overflow: clip;
}

/* Asagida yer kalmadiginda yukari acilir (bkz. izinler.js acilirYonu). */
.y-deger-kutu.yukari .y-deger-acilir {
    top: auto;
    bottom: calc(100% + 4px);
}

/* Liste SABIT YUKSEKLIKTE kaydirilir: yuzlerce temsilci varsa acilir kutu
   ekranin disina tasardi. */
.y-deger-liste {
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    /* Dikey kaydirma buraya ait; sekme kaydirmasi yatayda calisiyor. */
    touch-action: pan-y;
}

.y-deger-oge {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--tx2);
    cursor: pointer;
}

.y-deger-oge:hover { background: var(--alt); }

.y-deger-oge.secili { color: var(--tx); font-weight: 600; }

/* Gercek kutucuk gizli, gorsel karsiligi .y-deger-tik: klavye ve ekran
   okuyucu icin sart, gorsel olarak kolon ciplariyle ayni dilde. */
.y-deger-oge input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.y-deger-tik {
    display: grid;
    place-items: center;
    flex: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--bd);
    border-radius: 4px;
    background: var(--surf);
    color: transparent;
}

.y-deger-oge.secili .y-deger-tik {
    border-color: var(--ac);
    background: var(--ac);
    color: #fff;
}

.y-deger-oge input:focus-visible + .y-deger-tik {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

.y-deger-ad {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ayirt edici alt satir (e-posta). Ad benzersiz olmadigi icin var:
   iki "Sistem Yöneticisi" ayni gorunurdu. */
.y-deger-alt {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--tx3);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kayitli ama tabloda karsiligi olmayan deger: silmek yerine isaretlenir -
   eski bir kurulumu yalnizca gorunmedigi icin sessizce atmak olmaz. */
.y-deger-uyari {
    margin-left: auto;
    flex: none;
    color: var(--color-warning);
}

.y-deger-oge--yabanci .y-deger-ad { font-style: italic; }

.y-deger-bos {
    padding: 10px;
    font-size: 11.5px;
    color: var(--tx3);
    text-align: center;
}

.y-deger-hata { color: var(--color-danger, var(--tx3)); }

/* Secimi olan kutu (deger-kutusu.js .dolu): kapali metin koyu ve kalin -
   izinler'deki :not(.acik) kuraliyla ayni; burada secim yokken "Tümü" yer
   tutucusu soluk kalsin diye ayrica isaretleniyor. */
.y-deger-kutu.pasif .y-deger-ara { cursor: not-allowed; }

/* BELGEYE ASILI LISTE (deger-kutusu.js): suzgec cekmecesinin govdesi
   kaydirmali (overflow-y: auto) oldugu icin kutunun icinde kalan liste
   govdenin kenarinda kirpilirdi. Konum ve genislik JS'ten (visualViewport
   olcusu, secim-kutusu.js ile ayni); z-index kayan panelin (211) ve form
   secim kutusunun (230) ustunde. Esnek kutu: boy kisildiginda liste kendi
   icinde kayar. */
.y-deger-acilir--yuzen {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 300;
    display: flex;
    flex-direction: column;
}

.y-deger-acilir--yuzen .y-deger-liste {
    min-height: 0;
    flex: 1 1 auto;
}

/* ---- SUZGEC CEKMECESININ SECIM KUTULARI (kullanici karari, 2026-09-25) ----
   Cekmecedeki her secim kutusu - DegerKutusu'nun coklu kutusu da, tek secimli
   select.f-secim de - ana sayfa grafiginin temsilci kutusunun kiliginda:
   kapsul koseli, ince acik cerceveli dugme; panel secim-kutusu.js'in
   (arama + isaret kutulu tablo + Temizle / Uygula). Kaynak site.css
   .pano-ciro-temsilci .sk-dugme - orada degisirse burada da degismeli. */
.r1-panel-alanlar .sk .sk-dugme {
    height: 30px;
    padding: 0 12px;
    border-color: var(--bd-l);
    border-radius: 999px;
    font-size: 12px;
}