/**
 * applytogo skin — atg-forms.css
 *
 * KAPSAM (GLOBAL sahiplik): .btn tüm varyantları (primary/secondary/danger/
 * success/warning/info/link), input/.form-control/textarea/select,
 * custom-switch/checkbox, custom-file, input-group eklentileri, searchbar
 * inputu, multi-input/recipient-input/tagedit akıllı alanları, dosya yükleme
 * alanı, form hata/doğrulama, hint/feedback, disabled/readonly durumları,
 * raweditor (CodeMirror) çerçevesi, FAB (compose kayan butonu).
 *
 * SINIRLAR (bilerek DOKUNULMADI):
 * - Dialog butonpane (.ui-dialog .ui-dialog-buttonset ...) dialogs alanının;
 *   mobil metin-buton kuralları (0,4,1) bizim (0,2,1)-(0,3,1) kurallarımızı
 *   zaten yener, sızıntı yok.
 * - html.touch .btn:focus { box-shadow:none !important } (buttons.less:187)
 *   korundu; dokunmatikte odak görseli base'deki :focus-visible outline'ı.
 * - #login-form'a özgü kurallar (oauth ayracı #ccc dahil) login alanının.
 * - Compose canvas'ının (textarea#composebody / TinyMCE) iki temada açık
 *   kalması compose/editor dosyasının işi; .form-control tabanı burada genel.
 * - .custom-select ok SVG'si elastic'in gömülü data-URI'ları (açık %23343a40 /
 *   koyu %23c5d1d3) — nötr griler atg yüzeyleriyle uyumlu, background-color
 *   ayrı yazıldığı için oklar korunur (hex yasağı gereği SVG yeniden üretilmez).
 * - .file-upload.droptarget:after SVG ikonunun gömülü rengi CSS ile değişmez;
 *   koyu temada elastic'in mix-blend-mode çözümü kalır.
 * - a.button (non-.btn) toolbar butonları toolbar/menü alanının.
 *
 * Konvansiyon: her kural `html:root` önekli (ELASTIC-NOTES); token'lar
 * html.dark-mode'da kendiliğinden değiştiği için koyu blok yazılmaz.
 */

/* =========================================================================
   0. Kontrol font yığını — elastic global.less:71-81 Roboto yazar; form
      elemanları body'den miras almaz, tek tek ezilir.
   ========================================================================= */

html:root button,
html:root input,
html:root optgroup,
html:root select,
html:root textarea {
    font-family: var(--atg-font);
}

/* =========================================================================
   1. Butonlar — SPEC 2.5: birincil = badge çifti, semantik = *-strong +
      on-strong (warning istisnası), ikincil/araç ghost; boyut Elastic,
      radius 6px. Durum grupları :not(:disabled):not(.disabled) ile yazılır
      ki html.dark-mode hover kurallarını (0,4,1) özgüllükle geçsin.
   ========================================================================= */

html:root .btn {
    color: var(--atg-text);
    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),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* Odak halkası — tüm varyantlar tek halka (bootstrap'in active:focus
   (0,5,0) gölgelerini uzun selektörler yener). */
html:root .btn:focus,
html:root .btn.focus,
html:root .btn:not(:disabled):not(.disabled):active:focus,
html:root .btn:not(:disabled):not(.disabled).active:focus {
    box-shadow: var(--atg-focus-ring);
}

/* --- Birincil: badge çifti (ham --atg-primary DEĞİL) --- */
html:root .btn-primary {
    color: var(--atg-badge-fg);
    background-color: var(--atg-badge-bg);
    border-color: var(--atg-badge-bg);
}

html:root .btn-primary:hover:not(:disabled):not(.disabled),
html:root .btn-primary:focus,
html:root .btn-primary:not(:disabled):not(.disabled):active,
html:root .btn-primary:not(:disabled):not(.disabled).active {
    color: var(--atg-badge-fg);
    background-color: var(--atg-link-hover);
    border-color: var(--atg-link-hover);
}

/* --- İkincil / araç: ghost (transparan, hover düz zemin yıkaması) --- */
html:root .btn-secondary {
    color: var(--atg-text);
    background-color: transparent;
    border-color: var(--atg-border-strong);
}

html:root .btn-secondary:hover:not(:disabled):not(.disabled),
html:root .btn-secondary:focus,
html:root .btn-secondary:not(:disabled):not(.disabled):active,
html:root .btn-secondary:not(:disabled):not(.disabled).active {
    color: var(--atg-link-hover);
    background-color: var(--atg-bg-hover);
    border-color: var(--atg-border-strong);
}

/* --- Semantik dolgular: *-strong + on-strong; hover = parlak adım kenarlık
       (düz tasarım, dolgu oynamaz; koyu tema hover bg sızıntısı bg yeniden
       yazılarak kesilir) --- */
html:root .btn-danger {
    color: var(--atg-on-strong);
    background-color: var(--atg-danger-strong);
    border-color: var(--atg-danger-strong);
}

html:root .btn-danger:hover:not(:disabled):not(.disabled),
html:root .btn-danger:focus,
html:root .btn-danger:not(:disabled):not(.disabled):active,
html:root .btn-danger:not(:disabled):not(.disabled).active {
    color: var(--atg-on-strong);
    background-color: var(--atg-danger-strong);
    border-color: var(--atg-danger);
}

html:root .btn-success {
    color: var(--atg-on-strong);
    background-color: var(--atg-success-strong);
    border-color: var(--atg-success-strong);
}

html:root .btn-success:hover:not(:disabled):not(.disabled),
html:root .btn-success:focus,
html:root .btn-success:not(:disabled):not(.disabled):active,
html:root .btn-success:not(:disabled):not(.disabled).active {
    color: var(--atg-on-strong);
    background-color: var(--atg-success-strong);
    border-color: var(--atg-success);
}

html:root .btn-info {
    color: var(--atg-on-strong);
    background-color: var(--atg-info-strong);
    border-color: var(--atg-info-strong);
}

html:root .btn-info:hover:not(:disabled):not(.disabled),
html:root .btn-info:focus,
html:root .btn-info:not(:disabled):not(.disabled):active,
html:root .btn-info:not(:disabled):not(.disabled).active {
    color: var(--atg-on-strong);
    background-color: var(--atg-info-strong);
    border-color: var(--atg-info);
}

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

html:root .btn-warning:hover:not(:disabled):not(.disabled),
html:root .btn-warning:focus,
html:root .btn-warning:not(:disabled):not(.disabled):active,
html:root .btn-warning:not(:disabled):not(.disabled).active {
    color: var(--atg-on-warning);
    background-color: var(--atg-warning);
    border-color: var(--atg-warning-strong);
}

/* --- Link görünümlü buton --- */
html:root .btn-link {
    color: var(--atg-link);
}

html:root .btn-link:hover,
html:root .btn-link:focus {
    color: var(--atg-link-hover);
}

/* --- Disabled: çökük zemin + muted (SPEC 0 — opaklık/gri filtre değil) --- */
html:root .btn:disabled:not(.btn-link),
html:root .btn.disabled:not(.btn-link) {
    color: var(--atg-text-muted);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
}

html:root .btn-link:disabled,
html:root .btn-link.disabled {
    color: var(--atg-text-muted);
}

/* elastic !important eziliyor: html.dark-mode .btn:disabled
   { opacity: .5 !important } (dark.less:382-384) — atg pasifliği inset
   zeminle verir, opaklıkla değil (bootstrap'in .65'i de kapanır). */
html:root .btn:disabled,
html:root .btn.disabled {
    opacity: 1 !important;
}

/* =========================================================================
   2. Metin girişleri — SPEC 2.6: inset gölge yok, 1px border-strong,
      radius 6, focus = primary kenarlık + halka, disabled = inset + muted,
      hata = danger kenarlık + danger-text mesaj.
      Kenarlık rengi :not(.is-invalid) korumalı yazılır ki
      html.dark-mode .form-control:not(.is-invalid) (0,3,1) ile eşitlensin.
   ========================================================================= */

html:root .form-control {
    color: var(--atg-text);
    background-color: var(--atg-bg-card);
    border-radius: var(--atg-radius-control);
    box-shadow: none; /* inset gölge yasağı */
    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 .form-control:not(.is-invalid) {
    border-color: var(--atg-border-strong);
}

html:root .form-control:focus {
    background-color: var(--atg-bg-card);
    box-shadow: var(--atg-focus-ring);
}

/* elastic !important eziliyor: html.dark-mode .form-control:focus
   :not(.is-invalid) { color: #e2e7e9 !important } (dark.less:432) —
   odak metni token'dan gelsin. */
html:root .form-control:focus:not(.is-invalid) {
    color: var(--atg-text) !important;
    border-color: var(--atg-primary);
}

/* Hata durumu */
html:root .form-control.is-invalid {
    border-color: var(--atg-danger);
    box-shadow: none;
}

html:root .form-control.is-invalid:focus {
    border-color: var(--atg-danger);
    box-shadow: var(--atg-focus-ring);
}

/* Disabled/readonly: çökük zemin + muted; koyu temanın opacity .5'i kapanır
   (html.dark-mode input:disabled, select:disabled — dark.less:472-475). */
html:root .form-control:disabled,
html:root .form-control[readonly] {
    color: var(--atg-text-muted);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
}

html:root input:disabled,
html:root select:disabled,
html:root textarea:disabled {
    opacity: 1;
}

/* Placeholder — -webkit/-ms varyantları ayrı kural olmak zorunda. */
html:root input::placeholder,
html:root textarea::placeholder {
    color: var(--atg-text-muted);
    opacity: 1;
}

html:root input::-webkit-input-placeholder,
html:root textarea::-webkit-input-placeholder {
    color: var(--atg-text-muted);
    opacity: 1;
}

html:root input::-ms-input-placeholder,
html:root textarea::-ms-input-placeholder {
    color: var(--atg-text-muted);
    opacity: 1;
}

/* Salt okunur düz metin alanı (dark.less:497-499 color:unset yazar) */
html:root .form-control-plaintext {
    color: var(--atg-text);
}

/* elastic !important eziliyor: select:-moz-focusring { text-shadow: 0 0 0
   #2c363a !important } (forms.less:1253-1258) — koyu tema kuralı upstream'de
   yok; token iki temada doğru rengi verir. */
html:root select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 var(--atg-text) !important;
}

/* =========================================================================
   3. Checkbox / radio / switch
   ========================================================================= */

/* Düz checkbox/radio (switch'e çevrilmeyenler) — bootstrap varsayılan
   görselinde marka vurgusu accent-color ile. */
html:root input[type="checkbox"],
html:root input[type="radio"] {
    accent-color: var(--atg-primary);
}

/* Switch rayı (kapalı) — geometriye dokunulmaz, yalnız renk.
   NOT: .custom-control-input'un opacity:0 !important'ı işlevseldir,
   switch görseli yalnız label pseudo'larından stillenir. */
html:root .custom-switch .custom-control-label::before {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
}

/* Topuz (kapalı) */
html:root .custom-switch .custom-control-label::after {
    background-color: var(--atg-text-muted);
}

/* Açık (checked): ray primary dolgu — tek kural, koyu temanın "border'ı
   açık kuraldan kalır" tutarsızlığı (dark.less:461-464) böylece kapanır. */
html:root .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--atg-primary);
    border-color: var(--atg-primary);
}

html:root .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--atg-text-invert);
}

/* Switch odak */
html:root .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--atg-focus-ring);
}

html:root .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--atg-primary);
}

/* Switch disabled: inset dili; koyu temanın opacity .4'ü (dark.less:457-459)
   yerine muted etiket. */
html:root .custom-switch .custom-control-input:disabled ~ .custom-control-label {
    opacity: 1;
    color: var(--atg-text-muted);
}

html:root .custom-switch .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
}

html:root .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before {
    background-color: var(--atg-primary-soft);
    border-color: var(--atg-border-strong);
}

/* Pasif+açık topuz: soft tint üzerinde beyaz topuz görünmez kalıyordu;
   muted dolgu iki temada da ayırt edilir (pasiflik dili korunur). */
html:root .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::after {
    background-color: var(--atg-text-muted);
}

/* =========================================================================
   4. Input-group eklentileri
   ========================================================================= */

html:root .input-group-text {
    color: var(--atg-text-soft);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-control);
}

/* elastic !important eziliyor: .input-group-text input:focus
   { border-color: #37beff !important } (forms.less:1322-1325). */
html:root .input-group-text input:focus {
    border-color: var(--atg-primary) !important;
}

/* Grup içindeki link odağı (dark.less:491-495 ile aynı özgüllük) */
html:root .input-group a:focus {
    background-color: var(--atg-primary-soft);
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
    z-index: 1;
}

/* =========================================================================
   5. Akıllı alanlar: multi-input, recipient-input, tagedit
   ========================================================================= */

/* --- multi-input: odak görseli KAPTADIR (.content.focused); iç inputlara
       halka verilmez (çift çizgi hazard'ı) --- */
html:root .multi-input > .content {
    background-color: var(--atg-bg-card);
    border-radius: var(--atg-radius-control);
}

html:root .multi-input:not(.is-invalid) > .content {
    border-color: var(--atg-border-strong);
}

html:root .multi-input:not(.is-invalid) > .content.focused {
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

html:root .multi-input.is-invalid > .content {
    border-color: var(--atg-danger);
}

html:root .multi-input.is-invalid > .content.focused {
    box-shadow: var(--atg-focus-ring);
}

/* İç input sıfırlaması: .form-control taban kuralımız elastic'in border:0
   düzenini (forms.less:813-842) bozmasın diye aynı yapı token'la yinelenir. */
html:root .multi-input input,
html:root .multi-input input:focus,
html:root .multi-input .input-group-text {
    border: 0;
    border-bottom: 1px solid var(--atg-border);
    border-radius: 0;
    box-shadow: none;
}

html:root .multi-input .input-group-text {
    border-left: 1px solid var(--atg-border);
}

/* --- recipient-input (compose alıcı alanı; ul .form-control sınıflı,
       tabanı §2'den alır) --- */
html:root .recipient-input.focus {
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* İç input: arkaplan elastic'te transparent !important (işlevsel), yalnız
   metin rengi yazılır. */
html:root .recipient-input input {
    color: var(--atg-text);
}

/* Alıcı çipi: nötr çip dili = inset pill + text-soft (SPEC 2.9) */
html:root .recipient-input li.recipient,
html:root body > li.recipient.ui-sortable-helper {
    color: var(--atg-text-soft);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
    border-radius: var(--atg-radius-pill);
}

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

/* --- tagedit (kişi etiketleri) --- */
html:root .tagedit-list[tabindex="-1"] {
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

html:root .tagedit-list li.tagedit-listelement-old {
    color: var(--atg-text-soft);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border);
    border-radius: var(--atg-radius-pill);
}

/* =========================================================================
   6. Arama çubuğu (searchinput) — input transparan kalır, kap renklenir;
      odak görseli base'deki :focus-visible deseni.
   ========================================================================= */

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);
}

/* Aktif filtre işareti: elastic yeşili yerine AA-güvenli marka adımı */
html:root .searchbar a.selected {
    color: var(--atg-link);
}

/* =========================================================================
   7. Dosya yükleme / custom-file / foto (avatar) yükleme
   ========================================================================= */

html:root .file-upload {
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-card);
}

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

/* Sürükleme durumları (JS: app.js:750-756 active/hover) */
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);
}

/* Dosya seç etiketi (ui.js:1080-1090 üretir) */
html:root .custom-file-label {
    color: var(--atg-text);
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-control);
}

html:root .custom-file-label::after {
    color: var(--atg-text-soft);
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
}

html:root .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* Foto yükleme (contactedit avatar) */
html:root .image-upload {
    background-color: var(--atg-bg-inset);
}

html:root .image-upload a.button {
    color: var(--atg-on-strong);
    background-color: var(--atg-scrim);
}

/* =========================================================================
   8. İpucu, doğrulama mesajı, başlık/etiket, ayar satırları
   ========================================================================= */

html:root .invalid-feedback {
    color: var(--atg-danger-text);
}

/* Hint'ler — koyu temada dev gruplu kuralın (dark.less:972-983) kapsadığı
   form yüzeyleri tek tek geri alınır. */
html:root .propform .form-text,
html:root .formcontent .hint {
    color: var(--atg-text-muted);
}

html:root .propform legend,
html:root .formcontent legend {
    color: var(--atg-text-strong);
}

/* Özellik listesi (radio listeleri): disabled = muted, opaklık değil */
html:root .proplist li.with-sublist > a.dropdown {
    color: var(--atg-text);
}

html:root .proplist input[type="radio"]:disabled + label {
    opacity: 1;
    color: var(--atg-text-muted);
}

/* Skin seçimi küçük resmi (ayarlar formu satırı) */
html:root .skinselection .skinthumbnail {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-control);
}

/* =========================================================================
   9. RAW editör (CodeMirror) çerçevesi — form sınırındaki giriş alanı;
      compose zengin editörü (.tox) editor alanının.
   ========================================================================= */

html:root .formcontent.raweditor .CodeMirror {
    color: var(--atg-text);
    background-color: var(--atg-bg-card);
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-control);
}

html:root .formcontent.raweditor .CodeMirror-focused {
    background-color: var(--atg-bg-card);
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

html:root .formcontent.raweditor .CodeMirror-linebackground.line-error {
    /* tint token'ı: elastic'in opacity:.4 kuralına örtük bağımlılık kalmasın */
    background-color: var(--atg-danger-soft);
}

/* =========================================================================
   10. Kayan eylem butonu (compose FAB) — birincil aksiyon = badge çifti
   ========================================================================= */

html:root .floating-action-buttons a.button {
    color: var(--atg-badge-fg);
    background-color: var(--atg-badge-bg);
    box-shadow: var(--atg-shadow-lift);
}

html:root .floating-action-buttons a.button:hover {
    color: var(--atg-badge-fg);
    background-color: var(--atg-link-hover);
}

html:root .floating-action-buttons a.button:focus {
    color: var(--atg-badge-fg);
    background-color: var(--atg-link-hover);
    box-shadow: var(--atg-focus-ring), var(--atg-shadow-lift);
}