/**
 * applytogo skin — atg-folders.css
 *
 * KAPSAM: klasor listesi + .listing widget ailesi.
 *   - #mailboxlist ve tum .folderlist (agac yapisi, treetoggle, katlanir klasorler)
 *   - genel .listing: ayarlar/kisiler sol listeleri ve ui.js'in 'listing' sinifi
 *     taktigi popuplar (folder-selector, contactgroup-selector, pagejump, autocomplete)
 *   - aktif/secili klasor (chip + 3px teal ray), okunmamis sayaclari (pill rozet),
 *     droptarget, disabled/virtual, span.secondary, .listing-info, odak gostergesi
 * KAPSAM DISI: .messagelist ve kisi kayit tablolari (list alani), genel .badge
 *   (utilities), popup/popover kabugu (dropdown alani), custom-switch gorunumu
 *   (forms alani), #messagebody icerigi (embed.css).
 *
 * Konvansiyon (ELASTIC-NOTES): her kural `html:root` onekli — elastic'in
 * `html.dark-mode SEL` kurallariyla ozgulluk esitlenir/asilir; dosyamiz sonra
 * yuklendigi icin iki temada da kazanir. Renk yalniz var(--atg-*); tokenlar
 * html.dark-mode altinda kendiliginden degistigi icin koyu blok yazilmaz.
 *
 * Bilincli kararlar:
 *   - Klasor ikonlari ::before'u kullandigi icin (elastic lists.less:575) aktif
 *     ray SPEC 2.1 geregi pseudo-element ile ama ::after uzerinden cizilir.
 *   - Hover chip'in 0→1 solmasi background-color gecisiyle uygulanir
 *     (transparan → dolu); NOTES kural 3 izin listesi icindedir, geometri oynamaz.
 *   - .folderlist li.mailbox.root { display:none !important } (elastic) override
 *     EDILMEZ — gizli kalir; bu dosyada hicbir display/!important kurali yoktur.
 *   - ul listelerde satir ayraclari transparan yapilir (1px genislik korunur,
 *     geometri sabit); tablo listelerinde ayrac --atg-border ile kalir.
 *   - Elastic'in tum boyut/aralik geometrisi (padding, line-height, girinti
 *     merdiveni, rozet margin hesabi, touch varyantlari) DOKUNULMADAN birakilir.
 */

/* ---- 1. Satir tabani: ayraclar (koyu tema #2c373a sizmasin) ---- */

html:root .listing li {
    border-bottom-color: transparent; /* chip dili: ul listelerde hairline yok */
}

html:root .listing tbody td {
    border-bottom-color: var(--atg-border); /* tablo listelerinde ayrac kalir */
}

html:root ul.listing li ul {
    border-top-color: transparent; /* ic ice alt liste cercevesi de sessiz */
}

/* ---- 2. Satir metni (koyu tema #c5d1d3 sizmasin) ---- */

html:root .listing li a {
    color: var(--atg-sidebar-fg);
}

html:root .listing tbody td,
html:root .listing tbody td a {
    color: var(--atg-text);
}

/* ---- 3. Baglanti chip iskeleti: konum + radius + gecis ----
   position:relative yalniz ray ::after'inin ve rozetin capasi icin; kutu
   olculeri degismez (unreadcount top/right:0 li kutusuyla ayni hizada kalir). */

html:root .listing li > a,
html:root .listing li > div > a {
    position: relative;
    border-radius: var(--atg-radius-control);
    transition: background-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease);
}

/* ---- 4. Hover: geometri oynamadan chip zemini ---- */

html:root .listing li > a:hover,
html:root .listing li > div > a:hover {
    background-color: var(--atg-sidebar-hover);
}

/* Hover iptali: sanal ve devre disi ogeler tiklanabilir gibi gorunmesin */
html:root .listing li > a.virtual:hover,
html:root .listing li.virtual > a:hover,
html:root .listing li > a.disabled:hover,
html:root .listing li.disabled > a:hover {
    background-color: transparent;
}

/* ---- 5. Secili/aktif klasor: kalici chip + 3px teal ray ----
   Elastic agac listelerinde li'yi resetleyip a'yi boyar (lists.less:472-481);
   ayni modeli HER listeye uygularim: li seffaf, chip daima a-seviyesinde.
   Boylece acik/koyu ve duz/agac tum varyantlar tek desende toplanir. */

html:root .listing li.selected {
    color: inherit;
    background-color: transparent;
}

/* Koyu temanin secili-dal ozel kurallari (dark.less:272-278) etkisiz kalsin */
html:root .listing li.selected ul {
    background-color: transparent;
}

html:root .listing li.selected ul div.treetoggle {
    color: var(--atg-text-muted);
}

html:root .listing li.selected > a,
html:root .listing li.selected > div > a {
    color: var(--atg-sidebar-active-fg);
    background-color: var(--atg-sidebar-active-bg);
}

/* Ray: pill koseli 3px teal serit, satir kutusundan ust/alt 8px iceride.
   a-kutusuna capalandigi icin masaustu (35px) ve touch (47px) yuksekliklerine
   kendiliginden uyar; acik parent'in alt agacina tasmaz. */
html:root .listing li.selected > a::after,
html:root .listing li.selected > div > a::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: var(--atg-radius-pill);
    background-color: var(--atg-primary);
    pointer-events: none;
}

/* Tablo listelerinde (ayarlar bolum tablolari) secim: chip cifti, ray yok */
html:root .listing tr.selected td {
    color: var(--atg-sidebar-active-fg);
    background-color: var(--atg-sidebar-active-bg);
}

/* Elastic'in dar-ekran soldurmasi (lists.less:261-268) a-seviyesinde de
   uygulanmali; yoksa #settings-menu <=1200px'te chip + ray tasir. */
@media (max-width: 1200px) {
    html:root .listing.selection-large-only li.selected > a,
    html:root .listing.selection-large-only li.selected > div > a {
        color: var(--atg-sidebar-fg);
        background-color: transparent;
    }

    html:root .listing.selection-large-only li.selected > a::after,
    html:root .listing.selection-large-only li.selected > div > a::after {
        content: none;
    }
}

/* ---- 6. Odak gostergesi: elastic'in 2px sol borderi korunur, yalniz renk ----
   Taban (transparan 2px) elastic'te kalir; genislik degismedigi icin ziplamaz. */

html:root:not(.touch) .listing li > a:focus,
html:root:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:root:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left-color: var(--atg-primary);
}

/* ---- 7. Okunmamis klasor + sayac pill'i ----
   Geometri (padding-right:2.8em, margin:7.7px hesabi, line-height, touch
   varyanti) elastic'ten aynen miras kalir; yalniz renk/radius/font degisir. */

html:root .folderlist li.mailbox.unread > a {
    font-weight: 600; /* atg agirlik dili: 700 yerine 600 */
}

html:root .folderlist li.mailbox .unreadcount {
    border-radius: var(--atg-radius-pill);
    background-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    font-weight: 600; /* koyu temanin 400 override'ini da esitler */
}

/* ---- 8. Yeni posta (recent) ----
   Elastic #008cd0 koyu temada kontrast riskli (dark kurali yok); AA-guvenli
   metinsel marka adimi --atg-link iki temada da guvenli. */

html:root .folderlist li.mailbox.recent > a {
    color: var(--atg-link);
}

/* Recent rozeti: acik kural (0,4,2) koyuda da kazandigi icin acikca esitlenir */
html:root .folderlist li.mailbox.recent > a > .unreadcount {
    background-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
}

/* ---- 9. Surukle-birak hedefi: guclu teal yikama (elastic sarisi yerine) ----
   Hover/secili kurallardan SONRA gelir; esit ozgullukte kaynak sirasiyla kazanir. */

html:root .listing li.droptarget > a,
html:root .listing tr.droptarget > td {
    background-color: var(--atg-selection);
}

/* ---- 10. Pasif durumlar: opaklik degil renk (SPEC 0 felsefesi) ---- */

html:root .listing li.disabled,
html:root .listing tr.disabled td,
html:root .listing li a.disabled {
    color: var(--atg-text-muted);
}

html:root .listing li > a.virtual,
html:root .listing li.virtual > a {
    opacity: 1; /* elastic'in .4 opakligi yerine */
    color: var(--atg-text-muted);
}

/* ---- 11. Ikincil metin, bos-liste mesaji, agac okucugu ---- */

html:root .listing span.secondary {
    color: var(--atg-text-muted);
}

html:root .listing-info {
    color: var(--atg-text-muted);
    font-weight: 600; /* acik 700 / koyu 400 ikiligini tek degerde toplar */
}

html:root ul.treelist li div.treetoggle {
    color: var(--atg-text-muted);
}

/* ---- 12. Popup icindeki listing (folder-selector vb.) ----
   Elastic mavi menu vurgusunu (hover #37beff) chip diline cevirir; secili hali
   zaten 5. bolumun a-seviyesi chip'iyle boyanir. */

html:root .popupmenu .listing li > a:not(.disabled):hover {
    color: var(--atg-text-strong);
    background-color: var(--atg-sidebar-hover);
}

/* Kucuk ekran popover'inda elastic'in geri ekledigi son-satir cizgisi
   (dark.less:203-215) chip diliyle celisir; iki temada da sessizlestirilir. */
html:root.layout-small .popover:not(.select-menu) .listing li:last-child,
html:root.layout-phone .popover:not(.select-menu) .listing li:last-child {
    border-bottom-color: transparent;
}