/**
 * applytogo skin — atg-overlays.css
 *
 * KAPSAM (yüzen katman KAPLARI):
 *   - bootstrap/elastic popover + popup/dropdown/bağlam menüleri (.popover,
 *     .popover-body, .popover .menu, separatörler, dropbutton, ok/arrow)
 *   - .select-menu (pretty select)
 *   - mobil tam ekran popover çekmecesi + scrim (.popover-overlay; ui.js'in
 *     eklediği #menu-overlay.popover-overlay dahil) + mobil .popover-header
 *   - jQuery UI: .ui-widget çerçevesi, .ui-widget-overlay scrimi, .ui-menu
 *     (autocomplete), .ui-dialog (titlebar, title, close, buttonpane)
 *   - #messagestack toast'ları (info/success/warning/danger/loading)
 *   - bootstrap tooltip (.tooltip-inner + .bs-tooltip-* okları)
 *   - #rcmdraglayer sürükleme katmanı
 *
 * SAHİPLİK DIŞI (bilerek dokunulmadı):
 *   - kapların içindeki .btn / .btn-link / buton setleri → forms alanı
 *   - .listing satır renkleri/hover'ları → folders alanı (yalnız
 *     dialogs.less:59-73 + select-menu KAP köşe geometrisi burada)
 *   - çıplak .ui.alert sayfa-içi mesaj kutuları → messages alanı
 *   - #layout-menu çekmecesi → sidebar alanı (yalnız scrimi burada)
 *   - datepicker İÇ hücreleri (yalnız genel .ui-widget çerçevesi buradan)
 *
 * NOTLAR:
 *   - Her top-level kural html:root önekli (ELASTIC-NOTES özgüllük
 *     konvansiyonu); tokenlar html.dark-mode'da kendiliğinden değiştiği için
 *     koyu blok YOK.
 *   - z-index katman haritasına ve ui.js'in inline stillerine (popover
 *     max-height, select-menu min/max-width, mobil dialog boyutu) DOKUNULMAZ.
 *   - Elastic'in boyut/aralık geometrisi korunur; yalnız renk, radius, gölge,
 *     tipografik vurgu değişir (SPEC 2.7 panel dili).
 */

/* ==================================================================
   1. Popover paneli — dropdown/popup menü kabı
   SPEC 2.7: bg-card + 1px border + radius 14 + shadow-2 (dropdown).
   ================================================================== */

html:root .popover {
    background-color: var(--atg-bg-card);
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-2);
}

html:root .popover-body {
    color: var(--atg-text);
}

/* Başlık şeridi (mobil + select-menu'de görünür) — SPEC 2.7: bg-inset. */
html:root .popover-header {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text-strong);
    border-bottom: 1px solid var(--atg-border);
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
}

/* Bootstrap ok çifti: ::after = panel dolgusu, ::before = kenar çizgisi.
   (Koyu temada elastic dark.less:1004-1022'nin #8b9fa7 dolgusu yerine.) */
html:root .bs-popover-auto[x-placement^="top"] > .arrow::before,
html:root .bs-popover-top > .arrow::before {
    border-top-color: var(--atg-border);
}

html:root .bs-popover-auto[x-placement^="top"] > .arrow::after,
html:root .bs-popover-top > .arrow::after {
    border-top-color: var(--atg-bg-card);
}

html:root .bs-popover-auto[x-placement^="right"] > .arrow::before,
html:root .bs-popover-right > .arrow::before {
    border-right-color: var(--atg-border);
}

html:root .bs-popover-auto[x-placement^="right"] > .arrow::after,
html:root .bs-popover-right > .arrow::after {
    border-right-color: var(--atg-bg-card);
}

html:root .bs-popover-auto[x-placement^="bottom"] > .arrow::before,
html:root .bs-popover-bottom > .arrow::before {
    border-bottom-color: var(--atg-border);
}

html:root .bs-popover-auto[x-placement^="bottom"] > .arrow::after,
html:root .bs-popover-bottom > .arrow::after {
    border-bottom-color: var(--atg-bg-card);
}

html:root .bs-popover-auto[x-placement^="left"] > .arrow::before,
html:root .bs-popover-left > .arrow::before {
    border-left-color: var(--atg-border);
}

html:root .bs-popover-auto[x-placement^="left"] > .arrow::after,
html:root .bs-popover-left > .arrow::after {
    border-left-color: var(--atg-bg-card);
}

/* Kap köşesine uyum: elastic'in .25rem iç köşeleri radius-card'a çekilir
   (dialogs.less:59-73 — KAP geometrisi; .listing'in kendisi folders alanı). */
@media screen and (min-width: 769px) {
    html:root .popover .listing li:first-child {
        border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
    }

    html:root .popover .listing li:last-child {
        border-bottom-right-radius: calc(var(--atg-radius-card) - 1px);
        border-bottom-left-radius: calc(var(--atg-radius-card) - 1px);
    }

    /* elastic'in ul.rounded-0 reseti üstteki kurallara yenilmesin */
    html:root .popover .listing ul.rounded-0 > li {
        border-radius: 0;
    }
}

/* ==================================================================
   2. Popover menü öğeleri (.popover .menu — menu.less:225-343)
   ================================================================== */

html:root .popover .menu li a:not(.disabled) {
    color: var(--atg-text);
    transition: background-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease);
}

/* Hover = düz zemin yıkaması (SPEC §0); elastic'in mavi dolgusu yerine. */
html:root .popover .menu li a:not(.disabled):hover,
html:root .popover .menu li a:not(.disabled):focus {
    background-color: var(--atg-bg-hover);
    color: var(--atg-text-strong);
}

/* Ayırıcı/başlık satırı → mikro bölüm başlığı deseni (SPEC 1.8). */
html:root .popover .menu li.separator {
    color: var(--atg-text-muted);
    background-color: var(--atg-bg-inset);
    /* elastic !important eziliyor: .popover .menu li.separator { font-size: .75rem !important } */
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Koyu temada elastic'in #2c373a üst çizgisi yerine token. */
html:root .popover .menu ul + li.separator {
    border-top: 1px solid var(--atg-border);
}

/* Alt menü chevron'u ve dropbutton oku. */
html:root .popover .menu li a[aria-haspopup]:after {
    color: var(--atg-text-muted);
}

html:root .popover .menu li a[aria-haspopup].dropdown:after {
    color: var(--atg-text-soft);
}

/* Hover zemini artık açık yıkama olduğundan ok beyaza dönmez. */
html:root .popover .menu li a[aria-haspopup]:hover:after {
    color: var(--atg-text-muted);
}

/* Bölünmüş menü öğesi (dropbutton): pasif ek parça = çökük zemin (SPEC §0). */
html:root .popover .menu .dropbutton:hover {
    background-color: var(--atg-bg-hover);
}

html:root .popover .menu .dropbutton a.dropdown {
    background-color: var(--atg-bg-inset);
    transition: background-color var(--atg-dur) var(--atg-ease);
}

html:root .popover .menu .dropbutton a.dropdown:hover,
html:root .popover .menu .dropbutton a.dropdown:focus {
    background-color: var(--atg-bg-hover);
}

/* ==================================================================
   3. Select-menu (pretty select — dialogs.less:154-187)
   ================================================================== */

html:root .select-menu .popover-header {
    /* elastic !important eziliyor: .select-menu .popover-header { border-radius: .25rem .25rem 0 0 !important } */
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0 !important;
}

/* Kap köşe uyumu (mobilde de geçerli — select-menu çekmeceye dönüşmez). */
html:root .select-menu .listing li:last-child {
    border-bottom-right-radius: calc(var(--atg-radius-card) - 1px);
    border-bottom-left-radius: calc(var(--atg-radius-card) - 1px);
}

html:root .select-menu.inline .listing li:first-child {
    border-top-left-radius: calc(var(--atg-radius-card) - 1px);
    border-top-right-radius: calc(var(--atg-radius-card) - 1px);
}

/* ==================================================================
   4. Mobil tam ekran popover çekmecesi + scrim + başlık
   (dialogs.less:77-137; geometri elastic'te kalır)
   ================================================================== */

/* Çekmece kenar çizgisi: koyu temada elastic'in #4d6066'sı yerine token
   (panel = 1px kenarlık dili iki temada da tutarlı). */
html:root.layout-small .popover,
html:root.layout-phone .popover {
    border-left: 1px solid var(--atg-border);
}

/* SPEC 2.7: scrim. ui.js'in telefonda eklediği #menu-overlay da bu sınıfı alır. */
html:root.layout-small .popover-overlay,
html:root.layout-phone .popover-overlay {
    background-color: var(--atg-scrim);
}

/* Mobil başlık: elastic'in #005984/#fff bandı yerine bg-inset şeridi. */
html:root.layout-small .popover-header,
html:root.layout-phone .popover-header {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text-strong);
    border-bottom: 1px solid var(--atg-border);
}

html:root.layout-small .popover-header a,
html:root.layout-phone .popover-header a {
    color: var(--atg-text-strong);
}

/* Elastic'in koyu-mobil istisnası (dropbutton'ı şeffaflar, dark.less:208)
   kapatılır — çökük zemin dili her yerde aynı. */
html:root.layout-small .popover .menu .dropbutton a.dropdown,
html:root.layout-phone .popover .menu .dropbutton a.dropdown {
    background-color: var(--atg-bg-inset);
}

/* ==================================================================
   5. jQuery UI — ortak çerçeve, scrim, autocomplete menüsü
   ================================================================== */

/* Dialog/scrim perdesi. Not: opacity'yi elastic zaten 1 !important yapar;
   yarı saydamlık --atg-scrim'in alfasından gelir. */
html:root .ui-widget-overlay {
    background-color: var(--atg-scrim);
}

/* SPEC 2.7: scrim arkasında hafif blur (her iki scrim türü için). */
@supports (backdrop-filter: blur(3px)) {
    html:root .ui-widget-overlay,
    html:root.layout-small .popover-overlay,
    html:root.layout-phone .popover-overlay {
        backdrop-filter: blur(3px);
    }
}

html:root .ui-widget {
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-2);
}

/* Widget başlık şeridi (dialog titlebar, datepicker başlığı) — bg-inset. */
html:root .ui-widget-header {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text-strong);
}

html:root .ui-widget-content {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
}

/* Autocomplete menüsü — dropdown paneli dili (overflow-y:auto köşeyi kırpar). */
html:root .ui-menu {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-2);
}

/* Koyu temada elastic'in satır arası #2c373a çizgisi kaldırılır (açıkta yok). */
html:root .ui-menu .ui-menu-item {
    border-bottom: 0;
    color: var(--atg-text);
}

html:root .ui-menu .ui-state-active {
    /* elastic !important eziliyor: .ui-menu .ui-state-active { background-color: ... !important } */
    background-color: var(--atg-primary-soft) !important;
    color: var(--atg-link);
}

/* ==================================================================
   6. jQuery UI dialog — modal kabı
   SPEC 2.7: bg-card + 1px border + radius 14 + shadow-lift.
   ================================================================== */

html:root .ui-dialog {
    background-color: var(--atg-bg-card);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-lift);
}

html:root .ui-dialog .ui-dialog-titlebar {
    background-color: var(--atg-bg-inset);
    border-bottom: 1px solid var(--atg-border);
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
}

/* Başlıksız dialogda içerik kabın üst köşesine uyar (taşma boyamasın). */
html:root .ui-dialog.no-titlebar .ui-dialog-content {
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
}

html:root .ui-dialog .ui-dialog-title {
    color: var(--atg-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Kapatma düğmesi = ghost buton. */
html:root .ui-dialog .ui-dialog-titlebar-close {
    color: var(--atg-text-muted);
    background: transparent;
    border-radius: var(--atg-radius-control);
    transition: background-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease);
}

html:root .ui-dialog .ui-dialog-titlebar-close:hover,
html:root .ui-dialog .ui-dialog-titlebar-close:focus {
    color: var(--atg-text-strong);
    background-color: var(--atg-bg-hover);
}

/* Buton bölmesi: sessiz kart yüzeyi + 1px hairline (butonlar forms alanının). */
html:root .ui-dialog .ui-dialog-buttonpane {
    background-color: var(--atg-bg-card);
    border-top: 1px solid var(--atg-border);
    border-radius: 0 0 calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px);
}

/* Elastic'in ≤480px tam ekran geometrisi: köşe/gölge sıfırlanır. */
@media screen and (max-width: 480px) {
    html:root .ui-dialog {
        border-radius: 0;
        box-shadow: none;
    }

    html:root .ui-dialog .ui-dialog-titlebar,
    html:root .ui-dialog .ui-dialog-buttonpane,
    html:root .ui-dialog.no-titlebar .ui-dialog-content {
        border-radius: 0;
    }

    /* elastic'in tam genişlik/köşesiz mobil toast geometrisi korunur */
    html:root #messagestack div {
        border-radius: 0;
    }
}

/* ==================================================================
   7. Toast'lar (#messagestack) — semantik ÇİFT yasası (SPEC 1.4/2.7)
   ================================================================== */

/* Varsayılan/nötr toast: ters çip (metin-strong zemin + invert metin);
   metin tokenının zemin olarak kullanımı bilinçli — nötr toast'ın tanımı. */
html:root #messagestack div {
    background-color: var(--atg-text-strong);
    color: var(--atg-text-invert);
    border-radius: var(--atg-radius-chip);
    box-shadow: var(--atg-shadow-lift);
}

/* İkon daima metniyle aynı çiftte kalır (elastic'in sabit #fff'i yerine). */
html:root #messagestack div > i.icon:before {
    color: inherit;
}

html:root #messagestack .alert-info {
    background-color: var(--atg-info-strong);
    color: var(--atg-on-strong);
}

html:root #messagestack .alert-success {
    background-color: var(--atg-success-strong);
    color: var(--atg-on-strong);
}

html:root #messagestack .alert-danger {
    background-color: var(--atg-danger-strong);
    color: var(--atg-on-strong);
}

/* Warning istisnası: parlak dolgu + koyu etiket (SPEC 1.4). */
html:root #messagestack .alert-warning {
    background-color: var(--atg-warning);
    color: var(--atg-on-warning);
}

/* ui.js loading toast'ına 'alert-info loading' verir — bu kural .alert-info'dan
   SONRA gelmeli ki kombinasyonda nötr çip kazansın. */
html:root #messagestack .loading {
    background-color: var(--atg-text-strong);
    color: var(--atg-text-invert);
}

/* Toast içi bağlantı: elastic'in color:inherit !important kuralı istenen
   davranıştır, override gerekmez. */

/* ==================================================================
   8. Bootstrap tooltip — elastic hiç stillemez; kaynak deps/bootstrap.min.css
   (çıplak özgüllük yeterdi; html:root konvansiyon gereği).
   ================================================================== */

html:root .tooltip-inner {
    background-color: var(--atg-text-strong);
    color: var(--atg-text-invert);
    border-radius: var(--atg-radius-control);
    box-shadow: var(--atg-shadow-2);
}

html:root .bs-tooltip-auto[x-placement^="top"] .arrow::before,
html:root .bs-tooltip-top .arrow::before {
    border-top-color: var(--atg-text-strong);
}

html:root .bs-tooltip-auto[x-placement^="right"] .arrow::before,
html:root .bs-tooltip-right .arrow::before {
    border-right-color: var(--atg-text-strong);
}

html:root .bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
html:root .bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--atg-text-strong);
}

html:root .bs-tooltip-auto[x-placement^="left"] .arrow::before,
html:root .bs-tooltip-left .arrow::before {
    border-left-color: var(--atg-text-strong);
}

/* ==================================================================
   9. Sürükleme katmanı (#rcmdraglayer — common.less:24-40)
   ================================================================== */

/* Ters çip dili (toast nötrü ile aynı); koyu temada elastic'in 1px #8b9fa7
   kenarlığı yerine kenarlıksız tek dil. Opaklık/geometri elastic'te kalır. */
html:root #rcmdraglayer {
    background-color: var(--atg-text-strong);
    color: var(--atg-text-invert);
    border: 0;
    border-radius: var(--atg-radius-chip);
    box-shadow: var(--atg-shadow-lift);
}