/* Rapor parametreleri penceresi (rapor-secim.js) ve Rapor Şablonları
   listesindeki "Yeni Rapor Şablonu" penceresi (Views/Rapor/Index.cshtml).
   Kabuk (.rsecim-perde / -kutu / -bas / -x / -form / -eylem) İKİSİNDE de
   kullanılır; parametre penceresine özel yerleşim .rsecim-parametre altında
   durur - biri değişirken öteki bozulmasın.
   rapor.css'ten AYRI dosyadır: rapor.css yazdırma kurallarıyla Rapor
   sayfalarına özeldir, bu pencere ise Cari gibi tablo ekranlarına yüklenir -
   oraya rapor.css'i taşımak o ekranların yazdırmasını bozardı. */

.rsecim-perde {
    position: fixed;
    inset: 0;
    /* 220: dar ekran satır detay panelinin (211) ÜSTÜNDE, ortak seçim kutusunun
       yüzen listesinin (230) altında. 70'ken panelin rapor kutucuklarından
       açılan pencere panelin arkasında kalıyordu (kullanıcı bildirimi,
       2026-09-10). */
    z-index: 220;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rsecim-kutu {
    width: min(440px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.rsecim-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rsecim-bas h3 { margin: 0; font-size: 15px; font-weight: 700; }

/* Kapat: cercevesiz X simgesi (kullanici istegi). */
.rsecim-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    opacity: .7;
}

.rsecim-x:hover { opacity: 1; background: var(--color-border); }

/* ---- pencere içi form (Yeni Rapor Şablonu) ---- */
.rsecim-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsecim-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text);
}

.rsecim-form label > span { opacity: .75; }

.rsecim-form input,
.rsecim-form select {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
}

.rsecim-eylem {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ---- rapor parametreleri penceresi ----
   Masaüstündeki "Ekstre Parametreleri" penceresinin işi, sitenin kendi form
   diliyle: çerçeveli gruplar yerine BAŞLIK + İNCE ÇİZGİ ayraçları (form
   ekranlarındaki .f-bolum-bas ile aynı dil), solda etiket sağda denetim.
   Ortak .rsecim-form etiketleri alt alta dizdiği için buradaki kurallar
   .rsecim-parametre ile sınırlıdır. */

.rsecim-parametre {
    width: min(500px, 100%);
    padding: 0;
    overflow: hidden;
}

.rsecim-parametre .rsecim-bas {
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--bd-l, var(--color-border));
}

.rsecim-parametre .rsecim-form {
    gap: 0;
}

/* Kısa ekranda gövde kayar, başlık ve ayak yerinde kalır (kutu 80vh ile
   sınırlı). */
.rsecim-govde {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px 20px;
    min-height: 0;
    overflow-y: auto;
}

.rsecim-parametre .rsecim-form {
    min-height: 0;
    flex: 1;
}

.rsecim-bolum {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Bölüm başlığı: küçük büyük harf + satır sonuna uzanan ince çizgi. */
.rsecim-bolum-bas {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rsecim-bolum-bas > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--tx2);
    white-space: nowrap;
}

.rsecim-bolum-bas::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bd-l, var(--color-border));
}

.rsecim-parametre .rsecim-alan {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

/* İlk/Son tarih tek satırda: iki etiket + iki kutu. */
.rsecim-parametre .rsecim-alan--ikili {
    grid-template-columns: 138px minmax(0, 1fr) auto minmax(0, 1fr);
}

/* Anahtar satırı: etiket + anahtar + anahtarın adı. */
.rsecim-parametre .rsecim-alan--anahtar {
    grid-template-columns: 138px auto minmax(0, 1fr);
}

.rsecim-parametre .rsecim-form label {
    display: block;
    font-size: 12.5px;
    color: var(--tx2);
}

.rsecim-parametre .rsecim-form input[type="date"] {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    font-size: 13px;
}

/* Seçim kutuları secim-kutusu.js ile düğmeye çevrilir; sarmalı ızgara hücresini
   taşırmasın. Yerli select 1 piksellik saydam kutu olarak yerinde kalır. */
.rsecim-parametre .sk { min-width: 0; }

.rsecim-parametre .sk-dugme {
    padding: 7px 10px;
    font-size: 13px;
}

.rsecim-parametre .rsecim-form input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Renk-Beden anahtarı: bugün PASİF (karşılığı henüz kararlaştırılmadı).
   Kutunun kendisi görünmez, görüneni .rsecim-anahtar-yol çizer. */
.rsecim-anahtar {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex: none;
}

.rsecim-anahtar input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rsecim-anahtar-yol {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--color-border);
    transition: background .15s ease;
}

.rsecim-anahtar-yol::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: transform .15s ease;
}

.rsecim-anahtar input:checked + .rsecim-anahtar-yol { background: var(--color-accent); }
.rsecim-anahtar input:checked + .rsecim-anahtar-yol::before { transform: translateX(16px); }
.rsecim-anahtar input:disabled { cursor: not-allowed; }
.rsecim-anahtar input:disabled + .rsecim-anahtar-yol { opacity: .5; }

.rsecim-anahtar-ad { font-size: 12.5px; color: var(--tx3); }

/* ---- ayak ve düğmeler ----
   Ayak, gövdeden hafif bir bantla ayrılır; ana eylem SAĞDA ve dolu, vazgeç
   solunda sessiz (çerçevesiz) durur - modern kip penceresi dizilimi. */
.rsecim-parametre .rsecim-eylem {
    margin: 0;
    padding: 13px 20px;
    gap: 8px;
    border-top: 1px solid var(--bd-l, var(--color-border));
    background: var(--alt);
}

.rsecim-dugme {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}

.rsecim-dugme:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.rsecim-dugme--ana {
    background: var(--ac);
    color: #fff;
    padding-right: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}

.rsecim-dugme--ana:hover:not(:disabled) {
    background: var(--ac-strong);
    box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--ac) 55%, transparent);
    transform: translateY(-1px);
}

.rsecim-dugme--ana:active:not(:disabled) { transform: none; box-shadow: none; }

.rsecim-dugme--ana:disabled {
    background: var(--bd);
    color: var(--tx3);
    box-shadow: none;
    cursor: not-allowed;
}

/* Ok, imleç düğmenin üzerindeyken bir adım ileri kayar: "devam" hissi. */
.rsecim-dugme--ana .ic { transition: transform .15s ease; }
.rsecim-dugme--ana:hover:not(:disabled) .ic { transform: translateX(2px); }

.rsecim-dugme--sessiz {
    background: transparent;
    color: var(--tx2);
}

.rsecim-dugme--sessiz:hover {
    background: color-mix(in srgb, var(--tx3) 16%, transparent);
    color: var(--tx);
}

/* ---- tasarım içe aktarma penceresi (Rapor Şablonları) ----
   Kabuk .rsecim-parametre'dir; burada yalnızca dosya alanı ve kısa etiket
   kolonu var. Yerli dosya kutusu tarayıcıdan tarayıcıya farklı ve kaba
   göründüğü için gizlenir; alanın tamamı onun etiketidir (tıklama kutuyu
   açar), sürükle-bırak rapor-liste.js'te. */
.rice { width: min(460px, 100%); }

.rsecim-parametre .rsecim-form label.rice-dosya {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 14px 16px;
    border: 1.5px dashed var(--bd);
    border-radius: 10px;
    background: var(--alt);
    color: var(--tx2);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.rice-dosya input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rsecim-parametre .rsecim-form label.rice-dosya:hover,
.rsecim-parametre .rsecim-form label.rice-dosya.rice-dosya--uzerinde {
    border-color: var(--ac);
    background: var(--ac-bg);
}

/* Halka yalnızca klavye odağında: pencere açılışta odağı alana koyduğu için
   :focus / :focus-within fareyle açanda da kalın bir çerçeve bırakıyordu. */
.rsecim-parametre .rsecim-form label.rice-dosya:focus { outline: none; }

.rsecim-parametre .rsecim-form label.rice-dosya:focus-visible {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

/* Dokunmatik ekranda sürükle-bırak yok. */
@media (pointer: coarse) {
    .rice-dosya-birak { display: none; }
}

.rsecim-parametre .rsecim-form label.rice-dosya--dolu {
    min-height: 0;
    border-style: solid;
    background: var(--color-surface);
    cursor: default;
}

.rsecim-parametre .rsecim-form label.rice-dosya--dolu:hover { background: var(--color-surface); border-color: var(--bd); }

.rice-dosya-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: center;
}

.rice-dosya-dolu {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.rice-dosya-bos[hidden],
.rice-dosya-dolu[hidden] { display: none; }

.rice-dosya-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    background: var(--ac-bg);
    color: var(--ac);
}

.rice-dosya-yazi { font-size: 13px; color: var(--tx2); }
.rice-dosya-yazi b { color: var(--ac); font-weight: 600; }
.rice-dosya-uzanti { font-size: 11.5px; color: var(--tx3); }

.rice-dosya-bilgi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.rice-dosya-ad {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rice-dosya-boyut { font-size: 11.5px; color: var(--tx3); }

.rice .rsecim-alan { grid-template-columns: 92px minmax(0, 1fr); }

.rice .rsecim-alan input[type="text"] {
    width: 100%;
    min-width: 0;
}

.rice-hata {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    color: var(--color-danger);
    font-size: 12.5px;
    line-height: 1.4;
}

.rice-hata .ic { flex: none; margin-top: 1px; }

/* Dar ekran: etiketler denetimlerin üstüne geçer, düğmeler satırı doldurur. */
@media (max-width: 520px) {
    .rsecim-parametre .rsecim-alan,
    .rice .rsecim-alan,
    .rsecim-parametre .rsecim-alan--ikili,
    .rsecim-parametre .rsecim-alan--anahtar {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .rsecim-parametre .rsecim-alan--anahtar { grid-template-columns: auto minmax(0, 1fr); }

    .rsecim-parametre .rsecim-eylem > .rsecim-dugme { flex: 1; justify-content: center; }
}

/* ---- SMTP "Test Et" penceresi (smtp-test.js, 2026-09-20) ----------------
   Rapor parametreleri penceresinin KABUGUNU kullanir (.rsecim-*); burada
   yalnizca ona ait olmayan uc parca var: dar genislik, aciklama satiri ve
   sonuc seridi. Sonuc CANLI BOLGEDIR (aria-live): gonderim bitince ekran
   okuyucu da duymali. */
.smtp-test-kutu {
    max-width: 440px;
}

.smtp-test-not {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--tx3);
}

.smtp-test-sonuc {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.smtp-test-sonuc[hidden] { display: none; }

.smtp-test-sonuc.basarili {
    border-color: color-mix(in srgb, var(--kar-borc) 45%, transparent);
    background: color-mix(in srgb, var(--kar-borc) 10%, transparent);
    color: var(--kar-borc);
}

.smtp-test-sonuc.hatali {
    border-color: color-mix(in srgb, var(--kar-alacak) 45%, transparent);
    background: color-mix(in srgb, var(--kar-alacak) 10%, transparent);
    color: var(--kar-alacak);
}

/* Dugme + aciklama yan yana; form izgarasinin disinda kendi satiri. */
.f-alan-eylem {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.f-alan-eylem .form-text { margin: 0; }