/**
 * applytogo skin — compose alanı
 *
 * KAPSAM: Compose ekranına özgü yüzeyler:
 *   - Alıcı satırları: .recipient-input kutusu, chip'ler, satır-ekleme ikonları
 *     (#compose-headers kapsamında), şüpheli adres uyarısı
 *   - Editör çerçevesi (SPEC 2.4 kart dili): düz metin .html-editor + textarea#composebody
 *     ve TinyMCE 5.8.2 (div.tox.*) çerçeve/toolbar/diyalog/menü override'ları.
 *     .tox-* öneki YALNIZ bu dosyada yazılır (dialogs alanıyla çift stil yok).
 *   - Editör canvas'ı: HER İKİ TEMADA AÇIK (SPEC 1.7 mailpaper) — elastic'in
 *     html.dark-mode karartmaları burada etkisizleştirilir. iframe İÇİ embed.css'in
 *     işidir; embed.css'te dark-mode kuralı YOKTUR ve yazılmamalıdır.
 *   - Ekler paneli (#compose-attachments/.file-upload/.attachmentslist compose bağlamı)
 *   - Gönder butonu (masaüstü .formbuttons + ui.js mobil footer klonu)
 *
 * SAHİPLİK DIŞI (bilerek stillenmedi): genel .btn/.btn-primary/.form-control/
 * .input-group-text/.custom-select/.form-check (forms alanı), #compose-subject ve
 * #compose-options form kontrolleri (forms), alıcı otomatik tamamlama
 * #rcmKSearchpane (menü alanı), .tox-statusbar/.tox-menubar (render edilmez;
 * program/js/editor.js statusbar:false menubar:false).
 *
 * Konvansiyon: her kural `html:root` önekli — (0,1,1)+SEL, elastic'in
 * `html.dark-mode SEL` kurallarıyla eşit/üstün özgüllük; dosyamız sonra yüklenir.
 * Tokenlar html.dark-mode'da kendiliğinden değişir; koyu blok yazılmaz.
 */

/* =========================================================================
   1. Alıcı satırları — .recipient-input (ui.js:3334-3496 üretir; aynı anda
      .form-control'dür: koyu temada hem html.dark-mode .form-control hem
      html.dark-mode .recipient-input.* kuralları vurur, ikisi de ezilir)
   ========================================================================= */

html:root .recipient-input {
    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: none; /* input'ta inset gölge yok (SPEC §2.6) */
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* Odak durumu (ui.js .focus sınıfını toggler) — dark.less:501-506 ezilir */
html:root .recipient-input.focus {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* Yazma satırı girişi — zemin transparent kalır (elastic !important, dokunulmaz) */
html:root .recipient-input input {
    color: var(--atg-text);
}

html:root .recipient-input input::placeholder {
    color: var(--atg-text-muted); /* html.dark-mode ::placeholder ezilir */
}

/* Alıcı chip'i — nötr çip: inset zemin + pill (SPEC §2.9); genişlik
   geometrisi (max-width:calc(50% - 3px)) elastic'te kalır, dokunulmaz */
html:root .recipient-input li.recipient,
html:root body > li.recipient.ui-sortable-helper {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
    border-radius: var(--atg-radius-pill);
    color: var(--atg-text-soft);
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease);
}

/* Chip hover = geometri oynatmadan tint yıkaması (SPEC §1.1 primary-soft) */
html:root .recipient-input li.recipient:hover {
    background-color: var(--atg-primary-soft);
}

/* Chip silme düğmesi (ui.js: a.button.icon.remove) */
html:root .recipient-input li.recipient a.button.icon {
    color: var(--atg-text-muted);
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root .recipient-input li.recipient a.button.icon:hover,
html:root .recipient-input li.recipient a.button.icon:focus {
    color: var(--atg-danger-text);
}

/* Şüpheli adres uyarısı ikonu — saf dolgu semantiği */
html:root .suspicious-address-warning:before {
    color: var(--atg-warning);
}

/* Satır-ekleme/silme ikon kutuları (kişi ekle/başlık ekle/sil/kimlik düzenle) —
   yalnız compose başlıkları kapsamında; genel .input-group-text forms alanının */
html:root #compose-headers .input-group-text {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
    color: var(--atg-text-muted);
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

html:root #compose-headers a.input-group-text:hover {
    background-color: var(--atg-bg-hover);
    color: var(--atg-link-hover);
}

/* forms.less:660-665 + dark.less:491-495 odak zemini ezilir */
html:root #compose-headers .input-group a:focus {
    background-color: var(--atg-primary-soft);
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
    color: var(--atg-link);
}

/* =========================================================================
   2. Editör çerçevesi — düz metin modu (SPEC 2.4 kart dili)
      .html-editor'ı ui.js:3950-4006 kurar; .editor-toolbar absolute üst şerittir.
   ========================================================================= */

/* Üst şerit: --atg-bg-inset, üst köşeler yuvarlak (kart radius - 1px çerçeve payı) */
html:root .html-editor .editor-toolbar {
    background-color: var(--atg-bg-inset);
    border-bottom-color: var(--atg-border);
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
}

/* HTML'e geçiş düğmesi (elastic'in kendi .mce-i-html'i, ui.js:3960) — ghost */
html:root .html-editor .editor-toolbar .mce-i-html {
    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),
        border-color var(--atg-dur) var(--atg-ease);
}

html:root .html-editor .editor-toolbar .mce-i-html:hover,
html:root .html-editor .editor-toolbar .mce-i-html:focus {
    background-color: var(--atg-bg-hover);
    border-color: transparent;
    color: var(--atg-link-hover);
}

/* Düz metin canvas — DAİMA AÇIK (SPEC 1.7): mailpaper token'ları iki temada
   aynıdır. Geometriye dokunulmaz (padding-top:40px, width !important,
   textarea_autoresize inline height). Yazım denetimi katmanı da kapsanır. */
html:root .html-editor > textarea.form-control,
html:root .html-editor > .googie_edit_layer {
    color-scheme: light; /* açık ada: caret/scrollbar koyu temada da açık çizilsin */
    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);
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

html:root .html-editor > textarea.form-control:focus {
    background-color: var(--atg-mailpaper-bg);
    /* elastic !important eziliyor: html.dark-mode .form-control:focus:not(.is-invalid) { color: ... !important } (dark.less:432) */
    color: var(--atg-mailpaper-fg) !important;
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

html:root .html-editor > textarea.form-control::placeholder {
    color: var(--atg-mailpaper-fg-muted);
}

/* =========================================================================
   3. TinyMCE çerçeve + toolbar (v5.8.2, .tox-*; elastic 'div.tox' önekiyle
      TinyMCE'nin kendi kurallarını geçer — aynı önek burada da kullanılır)
   ========================================================================= */

html:root div.tox,
html:root div.tox :not(.svg) {
    font-family: var(--atg-font);
}

/* Çerçeve = kart dili: 1px kenarlık + kart köşesi + shadow-1.
   TinyMCE .tox-tinymce overflow:hidden olduğundan toolbar üst köşeleri
   çerçeveyle birlikte kırpılır (SPEC "üst köşeler yuvarlak"). */
html:root div.tox.tox-tinymce {
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-1);
    transition: border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* Odak çerçevesi (editor.js:203 .focused toggler) */
html:root div.tox.focused {
    /* elastic !important eziliyor: div.tox.focused { border-color/box-shadow !important } (editor.less:28-31) */
    border-color: var(--atg-primary) !important;
    box-shadow: var(--atg-focus-ring) !important;
}

/* Toolbar zemini: inset şerit. background shorthand'i elastic'in gri svg
   alt-çizgi görselini de temizler; ayraç inset hairline ile yeniden çizilir. */
html:root div.tox .tox-toolbar-overlord > div {
    background: var(--atg-bg-inset);
    box-shadow: inset 0 -1px 0 var(--atg-border);
}

/* Mobil toolbar varyantı */
html:root div.tox .tox-toolbar {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
}

/* Grup ayracı (oxide #ccc + dark.less:686-688 ezilir) */
html:root div.tox .tox-toolbar__group:not(:last-of-type) {
    border-color: var(--atg-border);
}

/* Toolbar düğmeleri — ghost; boyutlar (28px/32px) elastic'te kalır */
html:root div.tox .tox-tbtn,
html:root div.tox .tox-split-button,
html:root div.tox .tox-swatches__picker-btn {
    background: transparent;
    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),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* İkonlar düğme rengini izler; renk-önizleme şeritleri (inline fill) etkilenmez */
html:root div.tox .tox-tbtn svg,
html:root div.tox .tox-split-button svg,
html:root div.tox .tox-swatches__picker-btn svg {
    /* elastic !important eziliyor: html.dark-mode .tox .tox-tbtn svg { fill !important } (dark.less:632-651) */
    fill: currentColor !important;
}

html:root div.tox .tox-tbtn:hover,
html:root div.tox .tox-tbtn:focus,
html:root div.tox .tox-split-button:hover,
html:root div.tox .tox-split-button:focus,
html:root div.tox .tox-swatches__picker-btn:hover,
html:root div.tox .tox-swatches__picker-btn:focus {
    background: var(--atg-bg-hover);
    color: var(--atg-link-hover);
    box-shadow: none;
}

/* Aktif/basılı durum: primary-soft zemin + link-hover ikon (SPEC 2.4) */
html:root div.tox .tox-tbtn:active,
html:root div.tox .tox-tbtn--enabled,
html:root div.tox .tox-tbtn--enabled:hover {
    background: var(--atg-primary-soft);
    color: var(--atg-link-hover);
    box-shadow: none;
}

/* =========================================================================
   4. TinyMCE canvas — DAİMA AÇIK (SPEC 1.7)
      iframe İÇİ embed.css'in işidir (dark-mode kuralı yok → içerik açık kalır);
      burada yalnız iframe ELEMANININ zemini garanti altına alınır.
   ========================================================================= */

html:root div.tox .tox-edit-area {
    background-color: var(--atg-mailpaper-bg);
}

html:root div.tox .tox-edit-area__iframe {
    color-scheme: light;
    background-color: var(--atg-mailpaper-bg);
}

/* =========================================================================
   5. TinyMCE diyalogları + açılır menüler (compose içinde açılır; .tox-*
      öneki bu dosyanın sahipliğindedir — dialogs alanı .tox yazmaz)
   ========================================================================= */

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

/* Başlık şeridi: inset (SPEC §2.7) */
html:root div.tox .tox-dialog__header {
    background-color: var(--atg-bg-inset);
    border-bottom: 1px solid var(--atg-border);
    color: var(--atg-text-strong);
    border-radius: calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px) 0 0;
}

html:root div.tox .tox-dialog__title {
    color: var(--atg-text-strong);
}

/* Kapat düğmesi (elastic FontAwesome :before ile çizer) */
html:root div.tox .tox-dialog__header .tox-button {
    color: var(--atg-text-muted);
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root div.tox .tox-dialog__header .tox-button:hover {
    background: transparent;
    border-color: transparent;
    color: var(--atg-text-strong);
}

html:root div.tox .tox-dialog__body {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
}

html:root div.tox .tox-label {
    color: var(--atg-text-soft);
}

html:root div.tox .tox-dialog__body-nav-item {
    color: var(--atg-text-soft);
}

html:root div.tox .tox-dialog .tox-dialog__body-nav-item--active {
    color: var(--atg-link);
    border-color: transparent;
}

html:root div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover {
    color: var(--atg-link-hover);
}

/* Naked ikon düğmeleri (diyalog içi; dark.less:658-664 ezilir) */
html:root div.tox .tox-button--naked {
    color: var(--atg-text-soft);
}

html:root div.tox .tox-button--naked:focus:not(:disabled),
html:root div.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
    background-color: var(--atg-bg-hover);
    border-color: transparent;
    color: var(--atg-link-hover);
}

/* Alt şerit + butonlar: birincil = badge çifti, ikincil = ghost (SPEC §2.5) */
html:root div.tox .tox-dialog__footer {
    background-color: var(--atg-bg-card);
    color: var(--atg-text);
    border-color: var(--atg-border);
    border-radius: 0 0 calc(var(--atg-radius-card) - 1px) calc(var(--atg-radius-card) - 1px);
}

html:root div.tox .tox-dialog__footer .tox-button {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    /* elastic !important eziliyor: html.dark-mode .tox-dialog__footer .tox-button @media(max-width:480px) { color !important } (dark.less:719-721) */
    color: var(--atg-badge-fg) !important;
    border-radius: var(--atg-radius-control);
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

html:root div.tox .tox-dialog__footer .tox-button:hover:not(:disabled) {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    box-shadow: var(--atg-shadow-2);
}

html:root div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    box-shadow: var(--atg-focus-ring);
}

html:root div.tox .tox-dialog__footer .tox-button.tox-button--secondary {
    background-color: transparent;
    border-color: var(--atg-border-strong);
    /* kendi birincil kuralımızdaki !important'ı aşmak için (aynı elastic mobil istisnası) */
    color: var(--atg-text-soft) !important;
}

html:root div.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled) {
    background-color: var(--atg-bg-hover);
    border-color: var(--atg-border-strong);
    box-shadow: none;
}

html:root div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled) {
    background-color: transparent;
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* Diyalog form alanları (SPEC §2.6: 1px border-strong, radius 6, inset gölge yok) */
html:root div.tox .tox-color-input > input,
html:root div.tox .tox-listboxfield .tox-listbox--select,
html:root div.tox .tox-textarea,
html:root div.tox .tox-textfield {
    /* elastic !important eziliyor: div.tox ... { .font-family() !important } (editor.less:231) */
    font-family: var(--atg-font) !important;
    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: none;
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

html:root div.tox .tox-color-input > input:focus,
html:root div.tox .tox-listboxfield .tox-listbox--select:focus,
html:root div.tox .tox-textarea:focus,
html:root div.tox .tox-textfield:focus {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* Perde (SPEC §2.7 scrim + blur) */
html:root div.tox .tox-dialog-wrap__backdrop {
    background-color: var(--atg-scrim);
}

@supports (backdrop-filter: blur(3px)) {
    html:root div.tox .tox-dialog-wrap__backdrop {
        backdrop-filter: blur(3px);
    }
}

/* Açılır menüler/koleksiyonlar (font/renk seçiciler; dark.less:753-785 ezilir) */
html:root div.tox .tox-menu {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border);
    border-radius: var(--atg-radius-card);
    box-shadow: var(--atg-shadow-2);
}

html:root div.tox .tox-collection__item {
    color: var(--atg-text);
    transition: background-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease);
}

/* Koyu temanın öğe ayraçları kaldırılır — flat hover yıkaması yeter */
html:root div.tox .tox-collection__item:not(:last-child) {
    border-bottom: 0;
}

html:root div.tox .tox-collection__item--active,
html:root div.tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    background-color: var(--atg-bg-hover);
    color: var(--atg-text-strong);
}

html:root div.tox .tox-collection__item--enabled {
    background-color: var(--atg-primary-soft);
    color: var(--atg-link);
}

html:root div.tox .tox-collection__item-caret svg {
    fill: currentColor;
}

html:root div.tox .tox-insert-table-picker__label {
    color: var(--atg-text-muted);
}

/* =========================================================================
   6. Ekler paneli — #compose-attachments'ın KENDİSİ .file-upload'dur
      (compose.html:20-28); liste elastic'te bu bağlamda transparandır.
   ========================================================================= */

html:root .file-upload {
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-card);
    transition: border-color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

html:root .file-upload .hint {
    color: var(--atg-text-muted);
}

/* Sürükle-bırak durumları (padding !important geometrisine dokunulmaz;
   :after drop ikonu data-URI'dir, elastic'te kalır) */
html:root .file-upload.droptarget.active,
html:root .file-upload.droptarget.hover {
    border-color: var(--atg-primary);
}

html:root .file-upload.droptarget.hover {
    background-color: var(--atg-primary-soft);
}

/* Ek listesi (compose bağlamı) — koyu temada elastic'in #374549 zemini sızmasın */
html:root .file-upload .attachmentslist {
    background-color: transparent;
    border: 0;
}

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

html:root .file-upload .attachmentslist a.filename {
    color: var(--atg-text);
}

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

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

html:root .file-upload .attachmentslist a.delete,
html:root .file-upload .attachmentslist a.cancelupload {
    color: var(--atg-text-muted);
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root .file-upload .attachmentslist a.delete:hover,
html:root .file-upload .attachmentslist a.delete:focus,
html:root .file-upload .attachmentslist a.cancelupload:hover,
html:root .file-upload .attachmentslist a.cancelupload:focus {
    color: var(--atg-danger-text);
}

/* Compose seçenekleri (#compose-options.formcontent): elastic'e özel kural yok;
   .custom-select/.form-check/.col-form-label genel form stilleri FORMS alanının.
   Burada kural yazılmaz. */

/* =========================================================================
   7. Gönder butonu — badge çifti (SPEC 2.4: ham --atg-primary DEĞİL)
      Masaüstü: .formbuttons > button.btn.btn-primary.send (compose.html:225)
      Mobil: ui.js:192-215/403-427 klonu → #layout-content > .footer a.button.send.primary
   ========================================================================= */

html:root .formbuttons button.btn.send {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    border-radius: var(--atg-radius-control);
    transition: background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* Bootstrap .btn-primary hover/focus/active mavileri tamamen ezilir */
html:root .formbuttons button.btn.send:hover,
html:root .formbuttons button.btn.send:not(:disabled):active {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    box-shadow: var(--atg-shadow-2);
}

html:root .formbuttons button.btn.send:focus,
html:root .formbuttons button.btn.send:not(:disabled):active:focus {
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    box-shadow: var(--atg-focus-ring);
}

/* Pasif = çökük zemin, opaklık değil (SPEC §0) */
html:root .formbuttons button.btn.send:disabled {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
    color: var(--atg-text-muted);
    opacity: 1;
    box-shadow: none;
}

/* Mobil footer klonu (chrome şeridi chrome alanının; yalnız Gönder hücresi
   badge çiftiyle doldurulur — geometri: elastic flex hücresi aynen kalır) */
html:root #layout-content > .footer a.button.send.primary {
    background-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
    transition: background-color var(--atg-dur) var(--atg-ease),
        color var(--atg-dur) var(--atg-ease);
}

html:root #layout-content > .footer a.button.send.primary.disabled {
    background-color: transparent;
    color: var(--atg-text-muted);
}