/* ════════════════════════════════════════════════════════════
   MOBİL / TABLET UYUMLULUK — Personel Çizelge  (22.08.2026)

   Bu dosya app.css'ten SONRA yüklenir ve içinde SADECE @media
   blokları vardır. Yani 1025px ve üzeri masaüstü görünümü
   bu dosyadan hiç etkilenmez — tek bir kural bile devreye girmez.
   Geri almak için App.razor'daki <link ... mobil.css> satırını sil.

   Kırılma noktaları:
     ≤1024px → tablet  (yan yana düzen korunur, sol panel daralır)
     ≤767px  → telefon (alt alta düzen, dokunmatik hedefler büyür)
     ≤400px  → küçük telefon (ek sıkıştırma)
     telefon + yatay → yeniden yan yana

   Dürüst sınır: çizelge tablosu 10+ personel sütunlu; telefona
   sığmaz, masaüstündeki gibi YATAY KAYDIRILARAK kullanılır.
   Kolaylık olsun diye TARİH sütunu sola sabitlendi.
   ════════════════════════════════════════════════════════════ */


/* ─────────────── TABLET: ≤1024px ─────────────── */
@media (max-width: 1024px) {

    /* Sol panel 310 → 250: çizelgeye daha fazla yer kalsın */
    .sol-panel { width: 250px; padding: 8px; }

    /* Üst şerit butonları sıkışsın ki daha az satıra sarsın */
    .ust-buton { height: 28px; padding: 0 8px; font-size: 10px; gap: 4px; }
    .marka { margin-right: 10px; }
    .mod-ayirici { margin-right: 8px; }
    .sik-kullanilan { gap: 5px; }

    /* Ay/şablon satırları dar panele sığsın */
    .ay-satiri select.ay { max-width: none; }
    .siralama { width: 104px; }

    /* Sabit sütunlar daralsın → aynı ende daha çok personel görünür */
    .st-tarih { width: 66px; min-width: 66px; }
    .st-gun { width: 58px; min-width: 58px; }
    .cizelge-tablo th.birim-basi { min-width: 78px; width: 90px; }
}


/* ─────────────── TELEFON: ≤767px ─────────────── */
@media (max-width: 767px) {

    /* 100vh mobil tarayıcıda adres çubuğu yüzünden taşar → dvh */
    .uygulama { height: 100dvh; }
    .bos-sayfa { min-height: 100dvh; padding: 16px; }

    /* Dokunmada 300 ms gecikme olmasın */
    button, .ust-buton, .kare-buton, .mod-dugme, .tam-buton,
    a.yesil, a.gri, a.mavi, a.kirmizi { touch-action: manipulation; }

    /* ── ÜST ŞERİT ──
       Satır 1: marka + kullanıcı/çıkış
       Satır 2: panel düğmesi + FAZLA MESAİ + AYARLAR
       (.sik-kullanilan'a flex-basis:100% verilerek alt satıra zorlanır) */
    .ust-serit { position: relative; padding: 5px 8px; row-gap: 5px; }
    .marka { order: 1; margin-right: 8px; }
    .ust-sag { order: 2; font-size: 10px; gap: 8px; }
    .sik-kullanilan { order: 3; flex-basis: 100%; gap: 6px; }
    .mod-ayirici { display: none; }

    .marka-ikon { width: 24px; height: 24px; margin-right: 7px; font-size: 12px; }
    .marka-ad { font-size: 10px; line-height: 12px; }
    .marka-alt { font-size: 8px; }

    /* Sık kullanılan düğmelerin çoğu AYARLAR menüsünün aynası —
       telefonda gizlenir, hepsine AYARLAR'dan erişilir. Görünür
       kalanlar: ⏰ FAZLA MESAİ (AYARLAR'da karşılığı yok) ve AYARLAR. */
    .mobil-gizle { display: none !important; }

    /* Sol paneli açıp kapatan düğme yalnızca telefonda görünür */
    .mobil-panel-dugme { display: inline-flex !important; }

    .ust-buton { height: 32px; padding: 0 10px; font-size: 11px; }

    /* AYARLAR menüsü düğmeye değil, şeridin altına tam genişlik açılır —
       aksi hâlde 300px'lik menü ekranın solundan taşıyordu. */
    .ayarlar-sarmal { position: static; }
    .ayarlar-menu {
        position: absolute; top: 100%; left: 6px; right: 6px;
        width: auto; max-height: 72vh;
    }
    .ayarlar-menu button { height: 38px; font-size: 12px; }
    .ayarlar-menu button.kucuk { height: 34px; font-size: 11px; }
    .ayarlar-menu label.dosya { padding: 11px 8px; font-size: 12px; }

    /* ── ANA YERLEŞİM: yan yana → alt alta ── */
    .govde { flex-direction: column; }

    .sol-panel {
        width: 100%; max-height: 46vh; flex: none;
        border-right: none; border-bottom: 2px solid #CFD8DC;
        padding: 8px;
    }
    /* Panel düğmesiyle gizlenince çizelge tüm ekranı kullanır */
    .govde.panel-kapali .sol-panel { display: none; }

    .sag-panel { flex: 1 1 auto; min-height: 200px; }

    /* ── Sol panel içi: parmakla basılabilir ölçüler ── */
    .kare-buton { width: 34px; height: 34px; font-size: 13px; }
    .kare-buton.mavi { font-size: 15px; }
    .kare-buton.buyuk { font-size: 18px; }

    /* 16px'in altındaki yazı tipi iOS Safari'de odaklanınca sayfayı
       otomatik yakınlaştırır — ana form alanlarını 16px'e çıkarıyoruz.
       Yoğun .aylik-tablo hücreleri hariç (orada 16px sığmıyor). */
    .ay-satiri select, .sablon-satiri select,
    .arama-kutu input, .siralama { font-size: 16px; height: 36px; }
    .ay-satiri select.yil { width: 78px; }
    .arama-kutu input { padding-right: 34px; }
    .arama-temizle { width: 28px; height: 28px; top: 4px; right: 4px; font-size: 12px; }

    .mod-dugme { height: 34px; font-size: 12px; }
    .siralama { width: 130px; }
    .tam-buton { height: 34px; font-size: 12px; }
    .toplu-toolbar button { height: 32px; font-size: 11px; padding: 0 9px; }

    .personel-liste { min-height: 90px; }
    .personel-satir { padding: 7px 6px; gap: 7px; }
    .personel-satir .ad { font-size: 13px; }
    .personel-satir .alt { font-size: 11px; }
    .sablon-tik { width: 22px; height: 22px; font-size: 14px; }

    .durum-mesaji { font-size: 10px; padding: 5px; margin-top: 5px; }

    /* ── ÇİZELGE TABLOSU ── */
    .cizelge-serit { padding: 5px 8px; flex-wrap: wrap; row-gap: 2px; }
    .cizelge-serit .etiket { font-size: 12px; }
    .cizelge-serit .sablon-ad { font-size: 12px; margin-right: 8px; }
    .cizelge-serit .ay-yil { font-size: 11px; }

    .tablo-alan { -webkit-overflow-scrolling: touch; padding: 2px 0; }

    .st-tarih { width: 62px; min-width: 62px; }
    .st-gun { width: 50px; min-width: 50px; }
    .cizelge-tablo th.birim-basi { min-width: 72px; width: 82px; }
    .cizelge-tablo tbody tr { height: 28px; }

    /* TARİH sütununu sola dondur. Satır zeminleri <tr>'de tanımlı
       olduğu için sabitlenen hücreye zemin AYRICA verilmeli, yoksa
       altından kayan sütunlar hücrenin içinden görünür. */
    .cizelge-tablo tbody td.st-tarih {
        position: sticky; left: 0; z-index: 2; background: #FFFFFF;
    }
    tr.r-haftasonu td.st-tarih { background: #EEEEEE; }
    tr.r-resmitatil td.st-tarih { background: #FFF9C4; }
    tr.r-idariizin td.st-tarih { background: #EDE7F6; }
    .cizelge-tablo thead th.st-tarih { left: 0; z-index: 4; background: #F5F5F5; }

    /* ── SAĞ TIK / BAĞLAM MENÜSÜ (telefonda uzun basma) ── */
    .baglam-menu { max-width: calc(100vw - 16px); min-width: 200px; }
    .baglam-menu button { padding: 11px 14px; font-size: 13px; }

    /* ── MODALLAR ── */
    .modal-fon { padding: 8px; }
    .modal, .modal.orta, .modal.genis {
        width: 100%; max-height: calc(100dvh - 16px);
    }
    .modal-basi { padding: 10px 12px; font-size: 13px; }
    .modal-basi .alt { font-size: 10px; }
    /* Geniş tablo içeren modallar (aylık düzenleme) yatay da kaysın */
    .modal-govde { padding: 12px; overflow: auto; }
    .modal-alt { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .modal-alt > .yesil, .modal-alt > .gri,
    .modal-alt > .mavi, .modal-alt > .kirmizi {
        flex: 1 1 auto; min-height: 42px; font-size: 13px;
    }

    /* Form satırları: etiket üstte, alan altta — 175px'lik etiket sığmıyor */
    .form-satir { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 10px; }
    .form-satir > label { width: auto; font-size: 12px; }
    .form-satir > input, .form-satir > select { width: 100%; height: 40px; font-size: 16px; }
    label.satir-ici { font-size: 13px; margin: 7px 0; }
    label.satir-ici input[type=checkbox] { width: 18px; height: 18px; }

    .buyuk-buton { width: 100%; padding: 13px 16px; }

    /* Aylık düzenleme tablosu — yoğun, 16px kuralı buraya uygulanmadı */
    .aylik-tablo { font-size: 11px; }
    .aylik-tablo input { height: 30px; }
    .hizli-butonlar button { height: 30px; padding: 0 8px; }
    .toplu-cubuk button { padding: 8px 12px; }

    /* ── GİRİŞ EKRANI ── */
    .giris-kutu { width: 100%; max-width: 400px; padding: 1.75rem 1.5rem; }
    .giris-kutu h1 { font-size: 1.15rem; }
    .giris-kutu input { height: 42px; font-size: 16px; }
    .giris-kutu button { height: 46px; font-size: 15px; }
}


/* ─────────────── KÜÇÜK TELEFON: ≤400px ─────────────── */
@media (max-width: 400px) {
    /* Kullanıcı adını gizle, "Çıkış" kalsın — üst satır taşmasın */
    .ust-sag .kullanici-ad { display: none; }
    .marka-ad { font-size: 9px; }
    .ust-buton { padding: 0 8px; font-size: 10px; }
    .sol-panel { max-height: 44vh; }
    .liste-secenek { flex-wrap: wrap; }
    .siralama { width: 100%; }
}


/* ─────────────── TELEFON YATAY ───────────────
   Yatayda yükseklik ~375px; alt alta düzende iki panele de yer
   kalmaz, bu yüzden yeniden yan yana düzene dönülür. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .govde { flex-direction: row; }
    .sol-panel {
        width: 45%; max-width: 300px; max-height: none;
        border-right: 1px solid #E0E0E0; border-bottom: none;
    }
    .govde.panel-kapali .sol-panel { display: none; }
    .sag-panel { min-height: 0; }
    .ust-serit { padding: 3px 8px; }
}