/* ============================================================================
   RESPONSIVE KATMANI — tüm modül ekranları (Mete isteği 2026-08-09: "telefon
   dahil 390+, 14 sayfa").

   TASARIM KARARI: her sayfanın kendi CSS'ini tek tek elden geçirmek yerine TEK
   paylaşılan katman. Sebep: 14 sayfa × ~10 düzen kuralı elle yapılırsa biri
   unutulur ve sessizce bozuk kalır; burada kural tek yerde, yeni sayfa eklenince
   aynı sınıf adlarını (*-wrap / *-bar / *-cards / *-scroll) kullanması yeter.

   HİÇBİR KURAL @media DIŞINDA DEĞİL — masaüstü görünümü BİREBİR korunur
   (çalışan/beğenilen düzeni riske atma ilkesi). Tek istisna: 'box-sizing' ve
   yatay taşma guard'ı, ki ikisi de görsel değişiklik üretmez.

   Kırılımlar:
     ≤1024  yan yana panolar tek sütuna doğru daralır
     ≤768   tablet/dar pencere: tek sütun, araç çubukları sarar, sekmeler kayar
     ≤600   TELEFON: tablo satırları KART'a döner (responsive.js data-label basar)
     ≤430   küçük telefon: tipografi ve boşluklar sıkışır
   ============================================================================ */

/* ══════════════════════ ≤1024 — dar laptop / yatay tablet ══════════════════════ */
@media (max-width: 1024px) {
    /* Yatay taşma guard'ı — SADECE dar ekranda. Başta @media dışındaydı; masaüstü
       piksel karşılaştırması (1280/1600, 14 sayfa) styles.css YÜKLEMEYEN iki sayfada
       (login, kullanim-kilavuzu) görüntünün DEĞİŞTİĞİNİ gösterdi → içeri alındı.
       Ders: "zararsız" sandığım global kural bile masaüstünü değiştirebiliyor. */
    html, body { max-width: 100%; }
    *, *::before, *::after { box-sizing: border-box; }

    /* Sayfa başlıklarındaki özet kartları: 4-5 sütun sığmıyor → esnet */
    .ft-cards, .sz-cards, .bk-cards, .lem-cards, .al-cards,
    .kpi-grid, .stats-grid, .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
    /* minmax(400px+) grid'ler 1024'te zaten tek sütuna düşmeli */
    .reports-grid, .grid2, .grid3 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════ ≤768 — tablet / dar pencere ══════════════════════ */
@media (max-width: 768px) {
    /* Sayfa gövdesi: geniş yan boşluklar telefonda içerik alanını yiyor */
    .ft-wrap, .sz-wrap, .bk-wrap, .lem-wrap, .al-wrap {
        padding: 1rem .8rem !important;
        width: 100%;
    }

    /* Araç çubukları (süzgeç + buton dizileri) tek satırda taşıyordu → sarsın */
    .ft-bar, .sz-toolbar, .bk-bar, .lem-bar, .al-bar,
    .ft-modal-alt, .sz-modal-alt, .bk-modal-alt {
        flex-wrap: wrap !important;
    }
    /* Araç çubuğundaki input/select'ler tek satırda ezilmesin */
    .ft-bar > select, .ft-bar > input,
    .bk-bar > select, .bk-bar > input,
    .sz-toolbar > select, .sz-toolbar > input {
        min-width: 0;
        flex: 1 1 10rem;
    }

    /* Sekme şeritleri: 4 sekme sığmıyor → kesilmek yerine yatay kaysın */
    .ft-tabs, .sz-tabs2, .sz-tabs, .bk-tabs, .lem-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
    }
    .ft-tabs > *, .sz-tabs2 > *, .bk-tabs > *, .lem-tabs > * { flex: 0 0 auto; }

    /* Tablo sarmalayıcıları: kart moduna geçmeden önceki ara aşama (yatay kaydırma) */
    .ft-scroll, .sz-scroll, .bk-scroll, .lem-scroll, .al-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Sayfaya özel tablolar da paylaşılan kaydırma kuralına girsin (styles.css
       yalnız .financial-table/.data-table/.lem-table/table.sz'yi kapsıyordu —
       table.ft ve table.bk/table.al dışarıda kalmıştı). */
    table.ft, table.bk, table.al, table.lem {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Modal kutuları: sabit px genişlikler ekranı taşırıyordu */
    .ft-modal-in, .sz-modal-in, .bk-modal-in, .bk-modal-in.genis,
    .modal-box, .modal-in, .lem-modal-in {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 90vh;
        overflow: auto;
        padding: 1rem !important;
    }
    /* Modal içi iki sütunlu form grid'leri tek sütun */
    .ft-modal-in [style*="grid-template-columns"],
    .modal-box [style*="grid-template-columns"],
    .bk-modal-in [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Başlık + sağdaki aksiyon blokları alt alta */
    .ft-head, .sz-head, .bk-head, .lem-head, .al-head {
        flex-direction: column;
        align-items: stretch !important;
        gap: .6rem;
    }
}

/* ══════════════════ ≤600 — TELEFON: tablo satırı → KART ══════════════════
   responsive.js her <td>'ye başlığını data-label olarak basar; burada tablo
   düzeni tamamen bloklara açılır. thead gizlenir çünkü etiket artık her
   hücrenin solunda. Kart moduna YALNIZ 3+ kolonlu tablolar girer (2 kolonlu
   anahtar-değer tabloları zaten okunur, bozmaya gerek yok).
   NOT: ≤768 bloğu bu tablolara display:block + nowrap veriyordu; burası SONRA
   geldiği ve seçici en az o kadar özgül olduğu için kart kuralları kazanır. */
@media (max-width: 600px) {
    table.rsp-kart {
        display: block;
        width: 100%;
        overflow-x: visible;
        white-space: normal;
        border-collapse: separate;
        border-spacing: 0;
    }
    table.rsp-kart thead { display: none; }
    table.rsp-kart tbody { display: block; width: 100%; }

    table.rsp-kart tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 .55rem;
        padding: .5rem .7rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 10px;
        background: rgba(148, 163, 184, .05);
    }

    table.rsp-kart tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        width: auto !important;
        min-width: 0;
        padding: .28rem 0;
        border: none;
        border-bottom: 1px dashed rgba(148, 163, 184, .13);
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    table.rsp-kart tbody tr td:last-child { border-bottom: none; }

    /* Hücrenin başlığı (data-label) solda, değeri sağda */
    table.rsp-kart tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: .74rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: none;
        white-space: normal;
    }
    /* Başlıksız hücre (boş durum satırı, colspan) tam genişlik — 'Kayıt yok'
       mesajı 'undefined' etiketiyle çıkmasın. */
    table.rsp-kart tbody td[data-rsp-full]::before { content: none; }
    table.rsp-kart tbody td[data-rsp-full] {
        justify-content: center;
        text-align: center;
    }
    /* Onay kutusu / aksiyon hücresi: etiket yerine kutuyu sola yasla */
    table.rsp-kart tbody td[data-rsp-kutu] { justify-content: flex-start; }
    table.rsp-kart tbody td[data-rsp-kutu]::before { flex: 0 0 40%; }

    /* Kart içindeki hücrelerde sabit px genişlikler (input width:120px vb.)
       taşma yapmasın */
    table.rsp-kart tbody td input,
    table.rsp-kart tbody td select { max-width: 100%; }

    /* Kart modunda başlık satırı gizli olduğu için "başlığa tıkla sırala" kayboluyor;
       responsive.js tablonun üstüne bu seçiciyi koyar (sayfanın kendi sıralamasını çağırır). */
    .rsp-sirala { margin: 0 0 .5rem; }
    .rsp-sirala select {
        width: 100%;
        padding: .45rem .6rem;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, .3);
        background: #0f172a;
        color: #e2e8f0;
        font-size: .82rem;
    }

    /* Özet kart şeritleri telefonda 2 sütun */
    .ft-cards, .sz-cards, .bk-cards, .lem-cards, .al-cards,
    .kpi-grid, .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Telefondan masaüstüne dönülünce (pencere büyütme) sıralama seçicisi DOM'da kalıyor —
   masaüstünde başlığa tıklayarak sıralama zaten var, seçici görünmesin. */
@media (min-width: 601px) {
    .rsp-sirala { display: none !important; }
}

/* ══════════════════════ ≤430 — küçük telefon ══════════════════════ */
@media (max-width: 430px) {
    .ft-wrap, .sz-wrap, .bk-wrap, .lem-wrap, .al-wrap { padding: .75rem .55rem !important; }
    .ft-title, .sz-title, .bk-title, .lem-title, .al-title { font-size: 1.1rem !important; }
    .ft-sub, .sz-sub, .bk-sub, .lem-sub { font-size: .78rem !important; }
    .ft-cards, .sz-cards, .bk-cards, .lem-cards, .al-cards,
    .kpi-grid, .stats-grid { grid-template-columns: 1fr !important; }
    .ft-btn, .btn, .bk-btn { font-size: .8rem; padding: .42rem .65rem; }
    table.rsp-kart tbody td::before { flex: 0 0 45%; font-size: .7rem; }
}