/**
 * applytogo skin — atg-chrome.css
 *
 * KAPSAM (SPEC §1.5 chrome token seti + §2.11 scrollbar + §2.12 loading bar + §2.13 mobil):
 *   - Uygulama iskeleti: #layout kapsayıcıları (#layout-menu görev rayı, #layout-sidebar,
 *     #layout-list, #layout-content), gövde/iframe zemini
 *   - Panel header/footer barları (navbar tokenları), arama çubuğu (.searchbar),
 *     sayfalama (.menu.pagenav + .pagenav-list/.navlist), kota (.quota-widget/.quota-info)
 *   - #taskmenu öğeleri: normal/hover/focus/aktif (3px teal ray), special/action/logout
 *   - BUSY göstergesi: #messagestack .loading + .iframe-loader → üst kenarda ince
 *     --atg-gradient bar (dosyadaki TEK izinli @keyframes; reduced-motion'da durur)
 *   - #messagestack toast'ları (tip rayı motifi), #rcmdraglayer, .popover-overlay,
 *     .popup .listbox .footer, yüzen aksiyon butonu
 *   - Login sayfası (.task-login, #login-form çevresi, #login-footer), mobil menü/popover başlığı
 * SAHİPLİK DIŞI: .toolbar içeriği (mail alanı), .btn/.form-control temel biçimi (forms alanı),
 * genel .popover gövdesi ve #layout-menu DIŞI popover başlıkları (dialogs alanı),
 * gömülü .ui.alert.box* mesaj kutuları (messages alanı), #messagebody/embed.css.
 *
 * KONVANSİYON (ELASTIC-NOTES): her top-level kural `html:root` önekli — elastic'in
 * `html.dark-mode SEL` koyu kurallarıyla eşit/üstün özgüllük; dosyamız sonra yüklendiği
 * için iki temada da kazanır. Tokenlar html.dark-mode'da kendiliğinden değişir; bileşen
 * kuralı TEK kez yazılır (tek koyu-özel istisna: #logo söndürmesi).
 */

/* ==================================================================
   1) Zemin, seçim, scrollbar (SPEC §1.5, §2.11)
   ================================================================== */

html:root {
    scrollbar-width: thin;
    /* elastic dark.less:14-25 scrollbar-color ezilir; ray şeffaf, panel zemini görünür */
    scrollbar-color: var(--atg-scrollbar-thumb) transparent;
}

html:root ::selection {
    background-color: var(--atg-selection);
}

/* elastic: html:not(.touch) ::-webkit-scrollbar{width:6px} → SPEC §2.11 ince ~9px */
html:root:not(.touch) ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

html:root:not(.touch) ::-webkit-scrollbar-track {
    background-color: transparent;
}

html:root:not(.touch) ::-webkit-scrollbar-thumb {
    background-color: var(--atg-scrollbar-thumb);
    border-radius: var(--atg-radius-pill);
    border: 2px solid transparent; /* kenardan nefes payı */
    background-clip: padding-box;
}

html:root:not(.touch) ::-webkit-scrollbar-thumb:hover {
    background-color: var(--atg-scrollbar-thumb-hover);
}

/* Gövde: koyu temada gerçek zemin burasıdır (elastic panel zeminlerini transparana çeker,
   dark.less:27-30 body #21292c — token'la tek kural iki temayı da kapsar) */
html:root body {
    color: var(--atg-text);
    background-color: var(--atg-bg-ground);
}

/* İçerik iframe'leri kart yüzeyinde oturur (layout.less:44-46 html.iframe body) */
html:root.iframe body {
    background-color: var(--atg-bg-card);
}

/* ==================================================================
   2) Panel iskeleti (#layout kapsayıcıları)
   ================================================================== */

html:root #layout-sidebar {
    background-color: var(--atg-sidebar-bg);
    border-color: var(--atg-border); /* .sidebar-right varyantının border-left'ini de kapsar */
}

html:root #layout-list {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border);
}

html:root #layout-content {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border);
}

/* ==================================================================
   3) Panel header/footer barları (navbar tokenları)
   ================================================================== */

html:root #layout > div > .header {
    background-color: var(--atg-navbar-bg);
    border-bottom-color: var(--atg-navbar-border);
    color: var(--atg-navbar-fg-active); /* başlık metni bar'dan miras alır */
}

html:root #layout > div > .footer {
    background-color: var(--atg-navbar-bg);
    border-top-color: var(--atg-navbar-border);
    color: var(--atg-navbar-fg);
    font-weight: 400; /* elastic: açıkta 700, koyuda 400 — tek tutarlı ağırlık */
}

html:root #layout > div > .header a.button,
html:root #layout > div > .footer a.button {
    color: var(--atg-navbar-fg);
    border-radius: var(--atg-radius-control);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

/* elastic menu.less:352-362 (#ececec) + dark.less:230-231 (#374549) hover yıkaması */
@media screen and (min-width: 769px) {
    html:root .header a.button.icon:not(.disabled):hover,
    html:root .header a.button.icon:not(.disabled):focus {
        background-color: var(--atg-navbar-hover);
        color: var(--atg-navbar-fg-active);
    }
}

/* ==================================================================
   4) Görev rayı (#layout-menu) — zemin medya sorgulu (layout.less:346-357)
   ================================================================== */

@media screen and (min-width: 481px) {
    html:root #layout-menu {
        background-color: var(--atg-sidebar-bg);
        /* dark.less:64-66 border-right:1px kutu genişliğini oynatır (41/77px telafisi);
           border yerine geometri-nötr inset hairline — iki temada tek çizgi */
        border-right: 0;
        box-shadow: inset -1px 0 0 var(--atg-border);
    }

    /* elastic !important eziliyor: layout.less:210-217
       `#layout-menu .popover-header{background-color:#2f3a3f!important}` ve
       dark.less:68-71 `background:transparent!important` */
    html:root #layout-menu .popover-header {
        background-color: var(--atg-sidebar-bg) !important;
    }

    /* elastic !important eziliyor: dark.less:68-71
       `#layout-menu .special-buttons{background:transparent!important}` */
    html:root #taskmenu .special-buttons {
        background-color: var(--atg-sidebar-bg) !important;
        box-shadow: inset -1px 0 0 var(--atg-border); /* rayın hairline'ı altta da sürer */
    }
}

/* ==================================================================
   5) Görev menüsü öğeleri (#taskmenu)
   ================================================================== */

html:root #taskmenu a {
    position: relative; /* aktif ray çapası */
    color: var(--atg-sidebar-fg);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

html:root #taskmenu a:hover,
html:root #taskmenu a:focus {
    color: var(--atg-sidebar-fg);
    background-color: var(--atg-sidebar-hover);
}

/* hover'dan SONRA gelir: seçili durum hover'ı da kapsar (öncelik dosya içi sırayla) */
html:root #taskmenu a.selected,
html:root #taskmenu a.selected:hover,
html:root #taskmenu a.selected:focus {
    color: var(--atg-sidebar-active-fg);
    background-color: var(--atg-sidebar-active-bg);
}

/* SPEC motifi: 3px teal kenar rayı — :before ikon fontuna ayrılmış, ray :after'da;
   içeriden konumlu pseudo → geometri oynamaz */
html:root #taskmenu a.selected::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--atg-radius-pill);
    background: var(--atg-primary);
}

/* dark.less:193-199 öğeleri rayın border-right'ı için 41/77px'e daraltır; border'ı
   kaldırdığımızdan elastic'in açık tema genişlikleri iki temada da geçerli kılınır */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    html:root #taskmenu a {
        width: 42px;
    }
}

@media screen and (min-width: 1025px) {
    html:root #taskmenu a {
        width: 78px;
    }
}

/* dark.less:81-83 `.special-buttons a:not(:focus){background:#21292c}` ezilir */
html:root #taskmenu .special-buttons a:not(:focus) {
    background-color: transparent;
}

html:root #taskmenu .special-buttons a:not(:focus):hover {
    background-color: var(--atg-sidebar-hover);
}

/* Yaz/compose aksiyonu: ham marka rengi metin olamaz (SPEC §5.1) → AA-güvenli link adımı */
html:root #taskmenu .action-buttons a {
    color: var(--atg-link);
    background: transparent;
}

html:root #taskmenu .action-buttons a:hover,
html:root #taskmenu .action-buttons a:focus {
    color: var(--atg-link-hover);
    background-color: var(--atg-sidebar-hover);
}

/* elastic !important eziliyor: menu.less:908-914 `#taskmenu a.logout{color:#ff5552!important}` */
html:root #taskmenu a.logout,
html:root #taskmenu a.logout:hover {
    color: var(--atg-danger-text) !important;
}

/* ==================================================================
   6) Arama çubuğu (.searchbar)
   ================================================================== */

html:root .searchbar {
    background-color: var(--atg-bg-card);
    border-bottom-color: var(--atg-border);
}

html:root .searchbar form:before {
    color: var(--atg-text-muted);
}

html:root .searchbar input {
    color: var(--atg-text);
}

html:root .searchbar a {
    color: var(--atg-text-soft);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

/* genel `.menu a:hover{#ececec}` yıkaması yerine daraltılmış kural (sahiplik sınırı) */
html:root .searchbar a:not(.disabled):hover,
html:root .searchbar a:not(.disabled):focus {
    background-color: var(--atg-bg-hover);
    color: var(--atg-text-strong);
}

/* aktif filtre (unread): elastic #41b849 yerine AA-güvenli teal metin adımı */
html:root .searchbar a.selected {
    color: var(--atg-link);
}

html:root .searchbar a.selected:hover,
html:root .searchbar a.selected:focus {
    color: var(--atg-link-hover);
    background-color: var(--atg-bg-hover);
}

/* ==================================================================
   7) Sayfalama (.menu.pagenav) — pagenav footer bar'ın KENDİSİdir
   ================================================================== */

html:root .menu.pagenav a {
    color: var(--atg-navbar-fg);
    border-radius: var(--atg-radius-control);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

/* daraltılmış hover (genel .menu kuralına dokunulmaz) */
html:root .menu.pagenav a:not(.disabled):hover,
html:root .menu.pagenav a:not(.disabled):focus {
    background-color: var(--atg-bg-hover);
    color: var(--atg-navbar-fg-active);
}

html:root .menu.pagenav .pagenav-text {
    color: var(--atg-text-muted);
}

/* açılır klasör listesi başlığı + navlist zemini (menu.less:167-188) */
html:root .menu.pagenav.pagenav-list {
    background-color: var(--atg-sidebar-bg);
    border-bottom-color: var(--atg-border);
}

html:root .menu.pagenav.pagenav-list + .navlist {
    background-color: var(--atg-sidebar-bg);
}

html:root .menu.pagenav.pagenav-list.expanded + .navlist {
    border-bottom-color: var(--atg-border-strong);
}

/* ==================================================================
   8) Kota göstergesi (.quota-widget, ui.js:3303-3329 enjeksiyonu)
   ================================================================== */

html:root .quota-widget {
    color: var(--atg-text-muted);
}

html:root .quota-widget .bar {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-pill);
}

html:root .quota-widget .value {
    background-color: var(--atg-primary); /* saf dolgu — üzerinde metin yok */
}

html:root .quota-widget .value.warning {
    background-color: var(--atg-danger);
}

html:root .quota-info .root {
    color: var(--atg-text-muted);
    background-color: var(--atg-bg-inset);
}

/* ==================================================================
   9) Mesaj yığını toast'ları (#messagestack) — kart dili + tip rayı motifi
   ================================================================== */

html:root #messagestack div {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-lift);
}

/* tip rayı çapası — .voice (ekran okuyucu) konum mekaniğine dokunulmaz */
html:root #messagestack div:not(.voice) {
    position: relative;
    overflow: hidden;
}

html:root #messagestack div:not(.voice)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--atg-radius-pill);
    background-color: var(--atg-info);
}

/* elastic'in tip zeminleri (messages.less + dark.less:115-133) kart yüzeyine çekilir;
   anlamı 3px ray taşır (SPEC §0: "mesaj tipi" ray motifi) */
html:root #messagestack .alert-info,
html:root #messagestack .alert-success,
html:root #messagestack .alert-warning,
html:root #messagestack .alert-danger {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
}

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

html:root #messagestack div.alert-warning::before {
    background-color: var(--atg-warning);
}

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

html:root #messagestack div > i.icon:before {
    color: inherit; /* elastic'in tema-bazlı ikon renkleri yerine metinle aynı */
}

/* ==================================================================
   10) BUSY göstergesi (SPEC §2.12) — üst kenarda ince --atg-gradient bar
   app.js set_busy() → 'loading' mesajı (#messagestack, 'uploading' de aynı sınıf);
   iframe yüklemede mesaj DOM'a düşmez (ui.js:1991-1995) → .iframe-loader da kapsanır.
   ================================================================== */

/* Dosyadaki TEK izinli @keyframes (ELASTIC-NOTES kural 7). Süre transition token'ı
   değildir: döngüsel süpürme işlevsel animasyondur, easing token'dan gelir. */
@keyframes atg-loading-bar {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(400%);
    }
}

/* Toast yerine viewport üst kenarına sabitlenmiş 3px ray; metin görsel olarak
   kırpılır ama DOM'da kalır → role=alert erişilebilirliği korunur */
html:root #messagestack div.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background-color: var(--atg-primary-soft); /* soluk ray zemini */
    pointer-events: none;
}

html:root #messagestack div.loading::before {
    content: none; /* bu barda tip rayı yok */
}

html:root #messagestack div.loading::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33.333%;
    background: var(--atg-gradient);
    animation: atg-loading-bar 1.2s var(--atg-ease) infinite;
}

html:root #messagestack div.loading > i.icon {
    display: none; /* bootstrap spinner-border animasyonu devre dışı */
}

/* Iframe yükleme örtüsü: spinner yerine aynı üst bar (common.less:217-235, dark.less:154-161) */
html:root .iframe-loader {
    background-color: var(--atg-bg-card);
    overflow: hidden;
}

html:root .iframe-loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--atg-primary-soft);
}

html:root .iframe-loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 33.333%;
    background: var(--atg-gradient);
    animation: atg-loading-bar 1.2s var(--atg-ease) infinite;
}

html:root .iframe-loader .spinner-border {
    display: none;
}

/* SPEC §5.7: reduced-motion mutlak — süpürme durur, statik gradyan şerit kalır */
@media (prefers-reduced-motion: reduce) {
    html:root #messagestack div.loading::after,
    html:root .iframe-loader::after {
        animation: none;
        width: 100%;
    }
}

/* ==================================================================
   11) Katmanlar: sürükleme, popup listbox footer, mobil karartma
   ================================================================== */

html:root #rcmdraglayer {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
    border: 1px solid var(--atg-border-strong);
    border-radius: var(--atg-radius-control);
    box-shadow: var(--atg-shadow-lift);
}

html:root .popup .listbox .footer {
    background-color: var(--atg-navbar-bg);
    border-top-color: var(--atg-navbar-border);
}

/* mobil menü karartması (#menu-overlay bu sınıfı taşır; dark.less:223-225 kapsanır) */
html:root.layout-small .popover-overlay,
html:root.layout-phone .popover-overlay {
    background-color: var(--atg-scrim);
}

@supports (backdrop-filter: blur(3px)) {
    html:root.layout-small .popover-overlay,
    html:root.layout-phone .popover-overlay {
        backdrop-filter: blur(3px); /* SPEC §2.7 scrim deseni */
    }
}

/* Yüzen aksiyon butonu (mobil compose): birincil buton = badge çifti (SPEC §2.5);
   elastic'in renkli halo'su yerine token gölgesi (dark.less:414-417 kapsanır) */
html:root .floating-action-buttons a.button {
    background: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    opacity: 1;
    box-shadow: var(--atg-shadow-lift);
}

/* ==================================================================
   12) Login sayfası (.task-login)
   ================================================================== */

/* login'de içerik tam sayfa zemin olur (display:block, kart paneli değil) */
html:root .task-login #layout-content {
    background-color: var(--atg-bg-ground);
}

/* elastic çıplak hex: styles.less:42-68 `.formbuttons + .oauthlogin{border-top:1px solid #ccc}` */
html:root #login-form .formbuttons + .oauthlogin {
    border-top-color: var(--atg-border);
}

html:root #login-footer {
    color: var(--atg-text-muted);
}

html:root #login-footer > div {
    background-color: var(--atg-bg-inset);
    border-radius: var(--atg-radius-control);
}

/* NOT: #logo yerleşimi/boyutu bu dosyanın kapsamı DIŞINDA — tüm marka
   varlıkları atg-brand.css'in sahipliğindedir (en son yüklenir). */

/* ==================================================================
   13) Mobil (SPEC §2.13) — elastic kırılımları, yeni breakpoint yok
   ================================================================== */

/* elastic ≤768px'te bar zeminini #f4f4f4 olarak YENİDEN yazar (layout.less:303-329) —
   aynı medya bağlamında token'la tekrar sahiplenilir */
@media screen and (max-width: 768px) {
    html:root #layout > div > .header,
    html:root #layout > div > .footer {
        background-color: var(--atg-navbar-bg);
    }

    /* çentikli ekranlarda compose butonuna alttan güvenli boşluk */
    html:root .floating-action-buttons a.button {
        margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Telefonda ray popover'ı: koyu sızıntı (dark.less:86-88 #161b1d) + genel mavi popover
   başlığı (#005984) yerine kendi yüzeyimiz; kayan panel kart gölgesi alır */
html:root.layout-phone #layout-menu {
    background-color: var(--atg-sidebar-bg);
    border-right: 0;
    box-shadow: var(--atg-shadow-lift);
}

html:root.layout-phone #layout-menu .popover-header {
    background-color: var(--atg-sidebar-bg);
    border-bottom: 1px solid var(--atg-border);
    color: var(--atg-sidebar-fg);
}

html:root.layout-phone #layout-menu .popover-header a {
    color: var(--atg-sidebar-fg);
}

@media screen and (max-width: 480px) {
    /* elastic !important eziliyor: menu.less:844-864
       `#taskmenu a{border-bottom:1px solid #f1f3f4!important}` +
       dark.less:184-191 `border-color:#2c373a!important` */
    html:root #taskmenu a {
        border-bottom-color: var(--atg-border) !important;
    }

    /* elastic telefonda toast'ı tam genişlik/köşesiz yapar — düşük özgüllüklü medya
       kuralı global kart köşemize yenilmesin diye burada yeniden sıfırlanır */
    html:root #messagestack div {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    /* mesaj yığını alt güvenli alanın üstünde kalır */
    html:root #messagestack {
        bottom: env(safe-area-inset-bottom, 0px);
    }
}