/**
 * atg-mail.css — KAPSAM: mail okuma ekranı + GLOBAL toolbar (SPEC 2.3)
 *
 * Sahiplik: .menu.toolbar + #layout > div > .header (mail/ayarlar/kişilerdeki
 * TÜM ana toolbar barları; ghost buton dili), mesaj başlık paneli
 * (#message-header: konu, özet, detay tablosu, header-links), gönderen
 * fotoğrafı, ekler listesi (.attachmentslist çip dili, image-attachment),
 * mesaj gövde çerçevesi (#messagebody "kağıt" kartı — iframe İÇİ embed.css'in
 * işi, dokunulmaz), mesaj içi uyarı/bilgi barları (.ui.alert), mesaj gezinme
 * (.menu.pagenav + content-frame-navigation renkleri).
 *
 * BİZE AİT DEĞİL: .btn temel biçimi (forms alanı — burada yalnız toolbar
 * bağlamındaki ghost görünüm), popover/dropdown paneli kabuğu (SPEC 2.7
 * alanı), #messagestack toast'ları, mesaj listesi (atg-list.css), klasör
 * ağacı (atg-folders.css).
 *
 * Konvansiyon (ELASTIC-NOTES): her kural html:root önekli — Elastic'in
 * html.dark-mode kurallarıyla eşit/daha yüksek özgüllük, dosya sırası bizde
 * olduğundan iki temada da kazanır. Renk yalnız var(--atg-*); tokenlar
 * html.dark-mode'da kendiliğinden döner, koyu blok yazılmaz (tek istisna:
 * koyu-özel foto dimleme, SPEC 2.8). Kağıt İÇİ yüzeyler tema-BAĞIMSIZ
 * mailpaper tokenlarıyla yazılır (SPEC 1.7: kağıt koyu temada da açık;
 * elastic dark'ın kağıt-içi koyu kuralları — blockquote #21292c vb. —
 * burada nötrlenir).
 *
 * Mekanik DOKUNULMAZLAR (keşif hazard'ları): .popupmenu display toggle
 * mekaniği, content-frame-navigation display kuralları, toolbar 58px
 * geometrisi, div.rcmBody margin !important'ı, hidden-* utilities.
 * Toolbar kuralları sınıf-bazlı ve header atasından bağımsız yazıldı:
 * aynı ul mobilde popover'a taşındığında ve klonlandığında da (ui.js)
 * geçerli kalırlar.
 */

/* ================================================================
   1. Toolbar barı — sessiz kart yüzeyi + 1px hairline alt çizgi
   (elastic dark: #layout>div>.header{background:transparent;color:unset}
   aynası; eşit özgüllük + kaynak sırası ile iki temada kazanır)
   ================================================================ */

html:root #layout > div > .header {
    background-color: var(--atg-bg-card);
    border-bottom: 1px solid var(--atg-border);
    color: var(--atg-text-strong);
    font-weight: 600; /* elastic 700 -> SPEC 1.8 başlık ağırlığı */
}

/* Bar içi ghost ikon butonları (back-list, toolbar-menu-button, refresh;
   a.toolbar-button rengi de buradan) — elastic dark a.button aynası */
html:root #layout > div > .header a.button {
    color: var(--atg-text-soft);
    border-radius: var(--atg-radius-control);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

/* Header ikon butonu hover/focus — elastic dark bu kuralı media'sız yazar
   (dark.less:228-236), o yüzden bilerek media'sız aynalanır; elastic'in
   ≥769px light kuralı da kapsanır */
html:root .header a.button.icon:not(.disabled):focus,
html:root .header a.button.icon:not(.disabled):hover {
    background-color: var(--atg-bg-hover);
    color: var(--atg-link-hover);
}

/* Elastic outline:0'ı klavyede geri kazan (SPEC sert kural 3) */
html:root .header a.button.icon:focus-visible {
    outline: 2px solid var(--atg-link);
    outline-offset: -2px;
}

/* ================================================================
   2. Toolbar aksiyonları — ghost buton dili (SPEC 2.3)
   Geometri (58px, padding, min/max-width, :before !important'ları)
   elastic'te kalır; yalnız renk + radius + geçiş.
   ================================================================ */

html:root .menu.toolbar a {
    color: var(--atg-text-soft);
    background-color: transparent;
    border-radius: var(--atg-radius-control);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

/* Hover/focus = düz zemin yıkaması + link-hover metin. :not(.disabled)
   guard'ı elastic deseniyle aynı. Özgüllük (0,5,2): popover bağlamının
   color:#fff + mavi zemin kuralını da (0,3,2) iki temada ezer — mobil
   popover satırları da atg yıkaması alır. */
html:root .menu.toolbar a:not(.disabled):focus,
html:root .menu.toolbar a:not(.disabled):hover {
    background-color: var(--atg-bg-hover);
    color: var(--atg-link-hover);
}

/* Elastic .menu a:hover/:focus{outline:0}'a karşı klavye halkası */
html:root .menu.toolbar a:focus-visible {
    outline: 2px solid var(--atg-link);
    outline-offset: -2px;
}

/* Seçili toggle (arama, options): elastic yeşili (#41b849) yerine marka
   dili — primary-soft chip + AA-güvenli teal metin. Elastic dark'ın iki
   yarışan a.selected kuralı da eşit özgüllük + sıra ile ezilir. */
html:root .menu.toolbar a.selected {
    color: var(--atg-link);
    background-color: var(--atg-primary-soft);
}

/* Dropbutton grubu hover (reply-all/forward) — dark #374549 aynası */
html:root .menu.toolbar .dropbutton:not(.disabled):hover {
    background-color: var(--atg-bg-hover);
    border-radius: var(--atg-radius-control);
}

/* Dropbutton oku: elastic'in çift zinciri (light #e0e0e0 / dark #425358)
   tek token kuralıyla nötrlenir — token temada kendiliğinden döner */
html:root .menu.toolbar .dropbutton a.dropdown:hover {
    background-color: var(--atg-bg-inset);
}

/* ================================================================
   3. Mesaj gezinme (pagenav + mobil content-frame-navigation renkleri;
   display/geometri mekaniğine dokunulmaz)
   ================================================================ */

/* elastic dark color:unset aynaları */
html:root .menu.pagenav a {
    color: var(--atg-text-soft);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

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

/* Generic .menu hover'ının (light #ececec / dark #374549) pagenav dalı */
html:root .menu.pagenav a:not(.disabled):focus,
html:root .menu.pagenav a:not(.disabled):hover {
    background-color: var(--atg-bg-hover);
    color: var(--atg-link-hover);
}

/* Mobil footer'a klonlanan içerik butonları (ui.js create_cloned_button;
   sınıf-bazlı — id-bazlı yazım klonları kaçırırdı) */
html:root .menu .buttons button {
    color: var(--atg-text-soft);
    background-color: transparent;
}

/* ================================================================
   4. Mesaj başlık paneli — kart dili (SPEC 2.3: bg-card, 1px border,
   radius 14, shadow-1). Kart dolgusu spec'in açıkça istediği geometri
   eklemesidir (elastic'te panelin görsel stili yok).
   ================================================================ */

html:root #message-header {
    background-color: var(--atg-bg-card);
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-1);
    padding: var(--atg-card-pad);
}

/* Konu = başlık tipografisi (elastic 700 -> 600, SPEC 1.8) */
html:root #message-header > .subject {
    color: var(--atg-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Bayrak ikonu: liste alanıyla aynı dil (bayrak = warning dolgusu),
   elastic'in error kırmızısı yerine */
html:root body.status-flagged #message-header > .subject:before {
    color: var(--atg-warning);
}

/* Özet satırı (kimden + tarih) soluk; içindeki adres linkleri
   atg-base'in genel a kuralından teal alır */
html:root #message-header .header-summary {
    color: var(--atg-text-muted);
}

/* Detay tablosu etiketi: elastic light 700 / dark 400 asimetrisi
   600'e eşitlenir (dark.less:828-831 aynası) */
html:root #message-header .header-headers .header-title {
    color: var(--atg-text-muted);
    font-weight: 600;
}

/* Başlık altı araç linkleri (details/tüm başlıklar/html-plain): sessiz
   ghost dil — muted taban, hover'da link-hover */
html:root #message-header .header-links a {
    color: var(--atg-text-muted);
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root #message-header .header-links a:hover {
    color: var(--atg-link-hover);
}

/* Gönderen fotoğrafı diski: avatar dili (SPEC 2.8 — primary-soft disk).
   elastic !important eziliyor: html.dark-mode img.contactphoto, #contactpic
   { background-color: @color-dark-list-selected-background !important; }
   (dark.less:1119-1122) — başka yolu yok, eşitlenmesi zorunlu. */
html:root #message-header .header img.contactphoto {
    background-color: var(--atg-primary-soft) !important;
}

/* Koyu-özel istisna (SPEC 2.8): fotoğraflar koyu temada hafif kısılır */
html.dark-mode #message-header .header img.contactphoto {
    filter: brightness(90%);
}

/* ================================================================
   5. Mesaj gövdesi — "mail kağıdı" kartı (SPEC 1.7 + 2.3)
   Elastic #messagebody'ye hiçbir görsel stil vermez; kart sıfırdan
   (spec'in istediği geometri eklemesi). Kağıt tema-BAĞIMSIZ açık;
   iframe/embed içeriğine dokunulmaz.
   ================================================================ */

html:root #messagebody {
    background-color: var(--atg-mailpaper-bg);
    color: var(--atg-mailpaper-fg);
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-1);
    padding: var(--atg-card-pad);
}

/* Elastic dark'ın zorla-beyaz kuralı (dark.less:821-826) mailpaper
   tokenlarıyla çözülür — hazard notundaki çakışma noktası burası */
html:root .message-htmlpart {
    background-color: var(--atg-mailpaper-bg);
    color: var(--atg-mailpaper-fg);
}

/* Parça ayırıcı hairline — kağıt üstü, tema-bağımsız */
html:root .message-part:not(:first-child),
html:root .message-htmlpart:not(:first-child) {
    border-top-color: var(--atg-mailpaper-border);
}

/* --- Alıntı zinciri: sakin kağıt dili — zemin yıkaması yok, yalnız
   2px ray + muted metin. Derinlik ray rengiyle anlatılır (renk=anlam):
   L0 teal aksan, L1 muted, L2 hairline. Elastic dark'ın kağıt üstünde
   patlayan koyu zeminli/neon zinciri (bg #21292c, #69d0ff...) her
   seviyede ayrı ayrı nötrlenir (özgüllük eşit, sıra bizde). --- */

html:root .message-part blockquote,
html:root .message-htmlpart blockquote {
    color: var(--atg-mailpaper-fg-muted);
    border-color: var(--atg-mailpaper-accent-bg);
    background-color: transparent;
}

html:root .message-part blockquote blockquote,
html:root .message-htmlpart blockquote blockquote {
    color: var(--atg-mailpaper-fg-muted);
    border-color: var(--atg-mailpaper-fg-muted);
}

html:root .message-part blockquote blockquote blockquote,
html:root .message-htmlpart blockquote blockquote blockquote {
    color: var(--atg-mailpaper-fg-muted);
    border-color: var(--atg-mailpaper-border);
}

/* Alıntı katla/aç çipi — kağıt üstü çip (dark.less:799-803 aynası) */
html:root .message-part blockquote span.blockquote-link,
html:root .message-htmlpart blockquote span.blockquote-link {
    color: var(--atg-mailpaper-fg-muted);
    background: var(--atg-mailpaper-bg);
    border-color: var(--atg-mailpaper-border);
    border-radius: var(--atg-radius-control);
}

/* İmza — kağıt üstü soluk (dark #8ba3a7 aynası) */
html:root .message-part span.sig {
    color: var(--atg-mailpaper-fg-muted);
}

/* Gömülü mesaj (rfc822) başlık şeridi: kutu yerine hairline.
   border-top shorthand bilinçli: elastic dark border:0 ile hattı
   siliyordu, kağıt dilinde iki temada da hairline kalır. */
html:root .message-partheaders {
    background-color: transparent;
    border-top: 1px solid var(--atg-mailpaper-border);
}

html:root .message-partheaders table.headers-table {
    color: var(--atg-mailpaper-fg-muted);
}

/* Elastic light 700 / dark * normal asimetrisi 600'e eşitlenir */
html:root .message-partheaders table.headers-table .header-title,
html:root .message-partheaders table.headers-table .subject {
    font-weight: 600;
}

/* ================================================================
   6. Ekler — pill çip dili (SPEC 2.3/2.9: --atg-bg-inset pill).
   Kutu kabuk kaldırılır (renk düzeyinde; 1px iskelet kalır), çip
   dolgusu/aralığı spec'in açıkça istediği geometri eklemesidir.
   ================================================================ */

/* Kabuk: elastic'in kutusu (light #fcfcfc+border / dark #374549) sessize
   alınır — çipler kendi zeminini taşır */
html:root .attachmentslist {
    background-color: transparent;
    border-color: transparent;
}

/* Çip: inset pill (hover = tint chip, SPEC 2.9) */
html:root .attachmentslist li {
    background-color: var(--atg-bg-inset);
    border-radius: var(--atg-radius-pill);
    color: var(--atg-text-soft);
    padding: 0 0.5em;                /* çip nefesi (elastic 0 .25em) */
    margin: 0 0.25rem 0.25rem 0;     /* çipler arası boşluk */
    transition: background-color var(--atg-dur) var(--atg-ease);
}

html:root .attachmentslist li:hover {
    background-color: var(--atg-primary-soft);
}

/* Çip içi linkler (dark.less:352-368 a/name/size aynaları) */
html:root .attachmentslist li a {
    color: var(--atg-text-soft);
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root .attachmentslist li a:hover {
    color: var(--atg-link-hover);
}

html:root .attachmentslist li .attachment-name {
    color: var(--atg-text);
}

html:root .attachmentslist li a.filename:hover .attachment-name {
    color: var(--atg-link-hover);
}

html:root .attachmentslist li .attachment-size {
    color: var(--atg-text-muted);
}

/* Gövde içi görsel ek küçük resim kartı — kart dili
   (dark.less:847-854 aynası; min-height/float geometrisi elastic'te) */
html:root p.image-attachment {
    border-color: var(--atg-border);
    background-color: var(--atg-bg-inset);
    border-radius: var(--atg-radius-control);
}

html:root p.image-attachment span {
    color: var(--atg-text-muted);
}

/* Küçük resim kapalıyken (dark.less:857-862 aynası) */
html:root fieldset.image-attachment legend {
    color: var(--atg-text-muted);
    border-color: var(--atg-border);
}

/* ================================================================
   7. Uyarı/bilgi barları (.ui.alert — remote-objects, taslak-düzenle
   vb. ui.js alert_style çıktıları + server-render box* kutuları).
   atg dili: sessiz inset zemin + 3px semantik sol ray (SPEC motif) +
   semantik ikon; renkli zemin yıkamaları kaldırılır.
   ================================================================ */

html:root .ui.alert {
    color: var(--atg-text);
    background-color: var(--atg-bg-inset);
    border-radius: var(--atg-radius-control);
}

html:root .ui.alert > i.icon {
    color: var(--atg-text-muted);
}

/* ui.js sınıfları (alert_style: notice -> alert-info, remote-objects ->
   alert-warning): 3px ray, semantik saf dolgu */
html:root .ui.alert.alert-info {
    box-shadow: inset 3px 0 0 var(--atg-info);
}

html:root .ui.alert.alert-success {
    box-shadow: inset 3px 0 0 var(--atg-success);
}

html:root .ui.alert.alert-warning {
    box-shadow: inset 3px 0 0 var(--atg-warning);
}

html:root .ui.alert.alert-danger {
    box-shadow: inset 3px 0 0 var(--atg-danger);
}

/* Tip ikon renkleri (elastic #ffd452/#ff5552/#41b849 -> semantik dolgu) */
html:root .ui.alert.alert-success > i.icon:before {
    color: var(--atg-success);
}

html:root .ui.alert.alert-warning > i.icon:before {
    color: var(--atg-warning);
}

html:root .ui.alert.alert-danger > i.icon:before {
    color: var(--atg-danger);
}

/* Server-render kutu varyantları: renkli zemin yerine inset + ray.
   Dark'ın box* zemin+metin kuralları (dark.less:115-147) eşit özgüllük +
   sıra ile ezilir; radius-0 dayatması da geri yuvarlanır. */
html:root .ui.alert.boxinformation {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text);
    box-shadow: inset 3px 0 0 var(--atg-info);
    border-radius: var(--atg-radius-control);
}

html:root .ui.alert.boxconfirmation {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text);
    box-shadow: inset 3px 0 0 var(--atg-success);
    border-radius: var(--atg-radius-control);
}

html:root .ui.alert.boxwarning {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text);
    box-shadow: inset 3px 0 0 var(--atg-warning);
    border-radius: var(--atg-radius-control);
}

html:root .ui.alert.boxerror {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text);
    box-shadow: inset 3px 0 0 var(--atg-danger);
    border-radius: var(--atg-radius-control);
}

/* box* ikonları (dark i.icon:before #c5d1d3 aynası) */
html:root .ui.alert.boxinformation i.icon:before {
    color: var(--atg-info);
}

html:root .ui.alert.boxconfirmation i.icon:before {
    color: var(--atg-success);
}

html:root .ui.alert.boxwarning i.icon:before {
    color: var(--atg-warning);
}

html:root .ui.alert.boxerror i.icon:before {
    color: var(--atg-danger);
}

/* Bar içi aksiyon linkleri (İzin ver / Her zaman izin ver): net
   tıklanabilirlik — teal + altı çizili (dark.less:149-152 aynası) */
html:root .ui.alert a:not(.btn) {
    color: var(--atg-link);
    text-decoration: underline;
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root .ui.alert a:not(.btn):hover {
    color: var(--atg-link-hover);
}

/* Şüpheli adres uyarı ikonu (başlık adres satırı) */
html:root .suspicious-address-warning:before {
    color: var(--atg-warning);
}