/* ════════════════════════════════════════════════════════════════════
   MOBILE.CSS — GLOBAL MOBİL UYUMLULUK KATMANI
   ────────────────────────────────────────────────────────────────────
   Bu dosya style.css'ten ve sayfa içi <style> bloklarından SONRA
   yüklenir ve mobilde (≤900px) onları ezer. Sayfa sayfa düzeltme
   yapmak yerine tüm ortak bileşenleri (form satırları, filtreler,
   tablolar, modallar, buton grupları) tek yerden mobile uyarlar.

   Kırılım noktaları:
     ≤900px → tablet/telefon ortak düzen (style.css ile aynı eşik)
     ≤600px → telefon ince ayar (tek kolon, tam genişlik modal vb.)

   NOT: Sayfa içi stiller <body> içinde geldiği için kaynak sırası
   olarak bizden sonra gelir; bu yüzden burada !important zorunludur
   (style.css'teki mevcut mobil bölüm de aynı yöntemi kullanıyor).
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablo kaydırma sarmalayıcısı (mobile.js otomatik ekler) ───────── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll > table { margin-bottom: 0; }

@media (max-width: 900px) {

    /* ════════════════════════════════════════════════════════════════
       1) GENEL / GÖRÜNÜM ALANI
       ════════════════════════════════════════════════════════════════ */
    html { -webkit-text-size-adjust: 100%; }

    /* Sayfanın SOLDAN SAĞA kaymasını kökten engelle.
       `clip` (hidden yerine) kullanılır: scroll container oluşturmaz,
       yapışkan üst bar (position:sticky .sidebar) bozulmaz. */
    html, body { overflow-x: clip; max-width: 100vw; }
    .sidebar, .app-container { overflow-x: clip; }

    /* 100vh mobil tarayıcılarda adres çubuğu yüzünden taşar → dvh */
    body.mobile-menu-open { height: 100dvh !important; }
    body.mobile-menu-open .sidebar { height: 100dvh !important; max-height: 100dvh !important; }
    body.mobile-menu-open .nav-menu { max-height: calc(100dvh - 80px) !important; }

    /* Çentikli ekranlar (WebView/PWA) için güvenli alan */
    .sidebar { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
    .main-content { padding-left: calc(15px + env(safe-area-inset-left, 0px)) !important;
                    padding-right: calc(15px + env(safe-area-inset-right, 0px)) !important; }

    /* Toast'lar yapışkan üst barın altına insin */
    #toast-container { top: calc(72px + env(safe-area-inset-top, 0px)) !important; }

    /* Yatay taşmayı kökten engelle (tablolar kendi kaydırıcısında kayar) */
    .main-content { overflow-x: hidden !important; }
    .main-content img, .main-content video, .main-content iframe,
    .main-content canvas, .main-content svg { max-width: 100%; height: auto; }

    /* ════════════════════════════════════════════════════════════════
       2) DOKUNMA HEDEFLERİ VE FORM ELEMANLARI
       ════════════════════════════════════════════════════════════════ */
    .main-content .btn,
    .main-content button:not(.mobile-menu-btn):not(.token-mask):not(.et-eye) {
        min-height: 38px;
    }
    .main-content input[type="text"],
    .main-content input[type="number"],
    .main-content input[type="date"],
    .main-content input[type="email"],
    .main-content input[type="password"],
    .main-content input[type="search"],
    .main-content input[type="tel"],
    .main-content select,
    .main-content textarea {
        min-height: 38px;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ════════════════════════════════════════════════════════════════
       3) SAYFA BAŞLIĞI / ARAÇ ÇUBUKLARI / BUTON GRUPLARI
       ════════════════════════════════════════════════════════════════ */
    .page-header, .page-header > div { flex-wrap: wrap !important; }
    .page-header .btn { flex: 1 1 auto; }

    /* Yan yana dizilmiş buton sıraları alta kaydırılabilsin */
    .tool-panel > div[style*="display:flex"],
    .tool-panel > div[style*="display: flex"],
    .page-section > div[style*="display:flex"],
    .page-section > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }

    /* Panel iç boşluklarını daralt (tool-panel masaüstünde 28px) */
    .tool-panel { padding: 16px 14px !important; }
    .dash-card  { padding: 16px 14px !important; }

    /* ════════════════════════════════════════════════════════════════
       4) FİLTRE VE FORM SATIRLARI
       ──────────────────────────────────────────────────────────────
       .uts-filter-row  → grid (1fr 1fr 1fr)  → 2 kolona düşür
       .uts-form-row    → display:table VEYA flex → alt alta blokla
       ════════════════════════════════════════════════════════════════ */
    .uts-filter-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .uts-filter-col { min-width: 0 !important; }
    .uts-filter-col .uts-input, .uts-filter-col .uts-select { width: 100% !important; }

    /* uts-form-row iki kalıpta kullanılıyor:
       a) display:table + .uts-form-label/.uts-form-input-container (gerçek form)
          → mobilde alt alta blokla
       b) display:flex + .uts-label/.uts-value ("Etiket: Değer" çifti)
          → yan yana kalsın, sadece sarabilsin */
    .uts-form-row { flex-wrap: wrap !important; }
    .uts-form-row:has(> .uts-form-label),
    .uts-form-row:has(> .uts-form-input-container) {
        display: block !important;
        width: 100% !important;
    }
    .uts-form-row > .uts-form-label,
    .uts-form-row > .uts-form-input-container {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
    .uts-form-row > .uts-form-label { margin-bottom: 4px; }
    .uts-form-row + .uts-form-row { margin-top: 10px; }

    /* Sayfalara özgü çok kolonlu form grid'leri → tek/çift kolon */
    .fg-row-um, .fg-row { grid-template-columns: 1fr 1fr !important; }

    /* İç içe "iki kolonlu" düzenler */
    .two-col-layout, .detail-card-grid { grid-template-columns: 1fr !important; }

    /* ════════════════════════════════════════════════════════════════
       5) TABLOLAR
       ──────────────────────────────────────────────────────────────
       mobile.js sarmalayıcı ekler; buradaki kurallar sarmalayıcı
       içindeki tabloyu okunur tutar. Kolonlar ezilmesin diye tabloya
       makul bir min-width verilir → gerekirse yatay kaydırılır.
       ════════════════════════════════════════════════════════════════ */
    .table-scroll { border-radius: 8px; }
    .table-scroll > .grid-table:not(.mobile-cardify) { min-width: 640px; table-layout: auto !important; }
    .table-scroll > .detail-table { min-width: 0; }

    /* Başlıklar kaydırıcı içinde dikeyde yapışkan kalsın */
    .table-scroll > table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: inherit;
    }

    /* detail-table (etiket:değer) → sabit etiket genişliği esnesin */
    .detail-table td:first-child { width: 38% !important; white-space: normal !important; }
    .detail-table td { word-break: break-word; }

    /* Hücre içi buton yığınları taşmasın */
    .grid-table td .btn { white-space: nowrap; }

    /* ════════════════════════════════════════════════════════════════
       6) MODALLAR / OVERLAY'LER
       ──────────────────────────────────────────────────────────────
       Sayfalarda ~38 farklı modal var; çoğu
       <div class="uts-modal-overlay"><div style="width:90%;max-width:XXXpx">
       kalıbında. Kutunun taşan içeriği kutu içinde kaydırılır.
       ════════════════════════════════════════════════════════════════ */
    .uts-modal-overlay { padding: 12px !important; }
    /* Güvenlik ağı: sınıf yerine satır içi stille yazılmış modallar
       (id'si ...Modal olan position:fixed div'ler). Sayfa-özel bloklar
       zaten hedefliyor; bu kural gözden kaçanları da yakalar. */
    div[id*="Modal"][style*="position:fixed"],
    div[id*="Modal"][style*="position: fixed"] { padding: 10px !important; }
    div[id*="Modal"][style*="position:fixed"] > div,
    div[id*="Modal"][style*="position: fixed"] > div {
        max-width: 100% !important;
        max-height: min(92dvh, 92vh) !important;
    }
    div[id*="Modal"][style*="position:fixed"] > div:not([style*="flex-direction"]),
    div[id*="Modal"][style*="position: fixed"] > div:not([style*="flex-direction"]) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .uts-modal-overlay > div {
        width: 100% !important;
        max-height: min(92dvh, 92vh) !important;
    }
    /* Kutu kendi iç scroll'unu yönetmiyorsa (flex-column değilse) aç */
    .uts-modal-overlay > div:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Modal alt buton şeritleri sarabilsin */
    .uts-modal-overlay div[style*="justify-content:flex-end"],
    .uts-modal-overlay div[style*="justify-content: flex-end"] {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }

    /* ════════════════════════════════════════════════════════════════
       7) SAYFALAMA / ROZETLER / KÜÇÜK BİLEŞENLER
       ════════════════════════════════════════════════════════════════ */
    .page-btn { min-width: 38px; min-height: 38px; }
    .um-badge { white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤600px — TELEFON İNCE AYARI
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Filtreler ve form grid'leri tek kolon */
    .uts-filter-row { grid-template-columns: 1fr !important; }
    .fg-row-um, .fg-row { grid-template-columns: 1fr !important; }
    .fg, .fg-um { min-width: 0 !important; }

    /* Inline min-width'li esnek kolonlar (ör. style="flex:1;min-width:300px")
       dar ekranda taşma yaratmasın → tam satır kaplasın */
    .main-content div[style*="min-width: 3"],
    .main-content div[style*="min-width:3"],
    .main-content div[style*="min-width: 2"],
    .main-content div[style*="min-width:2"] {
        min-width: 0 !important;
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Modallar neredeyse tam ekran */
    .uts-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .uts-modal-overlay > div {
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        max-height: min(94dvh, 94vh) !important;
    }

    /* Sayfa başlığındaki butonlar tam genişlik */
    .page-header .btn { flex: 1 1 100%; justify-content: center; }

    /* Tablo yazıları bir tık büyüsün (0.65-0.75rem masaüstü değerleri
       telefonda okunmuyor) */
    .table-scroll > .grid-table { font-size: 0.78rem !important; }
    .table-scroll > .grid-table th,
    .table-scroll > .grid-table td { padding: 8px 8px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤700px — KART GÖRÜNÜMÜ (mobile.js grid-table'ları karta çevirir)
   ────────────────────────────────────────────────────────────────────
   mobile.js her hücreye data-label yazar ve sınıfları atar:
     .mob-check  → satır seçme kutusu (kartın sol üstü)
     .mob-title  → kart başlığı (ilk veri kolonu; dokununca aç/kapa)
     .mob-empty  → boş ("-") alanlar (hiç gösterilmez)
     .mob-extra  → detay alanları (kart açılınca görünür)
     .mob-info   → colspan'lı bilgi satırları (yükleniyor / sonuç yok)
   Görünürlük öncelik sırası:
     .mob-empty (daima gizli, !important)
       > sayfa-özel col-* zorlamaları (display:flex !important)
         > .mob-extra (varsayılan gizli, !important'sız)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .table-scroll:has(> .mobile-cardify) { overflow: visible; border-radius: 0; }

    table.mobile-cardify {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        font-size: 0.82rem !important;
    }
    .mobile-cardify thead { display: none; }
    .mobile-cardify tbody { display: flex; flex-direction: column; gap: 10px; }

    .mobile-cardify tbody tr {
        display: block;
        position: relative;
        background: #fff;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        padding: 12px 14px 10px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }
    .mobile-cardify tbody tr.selected-row {
        border-color: #0284c7 !important;
        background: #f0f9ff !important;
        box-shadow: 0 0 0 1px #0284c7, 0 1px 3px rgba(2, 132, 199, .15);
    }
    .mobile-cardify tbody tr.selected-row td { background: transparent !important; }

    .mobile-cardify td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: none !important;
        padding: 3px 0 !important;
        white-space: normal !important;
        word-break: break-word;
        text-align: left !important;
        background: transparent !important;
    }
    .mobile-cardify td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: #94a3b8;
        font-size: .66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        line-height: 1.9;
    }

    /* Seçim kutusu: kartın sol üst köşesi, parmakla rahat */
    .mobile-cardify td.mob-check {
        position: absolute;
        top: 12px; left: 14px;
        padding: 0 !important;
        z-index: 2;
    }
    .mobile-cardify td.mob-check::before { display: none; }
    .mobile-cardify td.mob-check input[type="checkbox"] { width: 20px; height: 20px; }

    /* Kart başlığı */
    .mobile-cardify td.mob-title {
        display: block;
        padding: 0 0 8px 32px !important;
        margin-bottom: 8px;
        border-bottom: 1px solid #f1f5f9 !important;
        font-weight: 700;
        font-size: .95rem;
        line-height: 1.35;
        cursor: pointer;
    }
    .mobile-cardify td.mob-title::before { display: none; }

    /* Görünürlük kuralları:
       Aç/kapa (mob-extra) özelliği KALDIRILDI — dolu alanların tamamı
       kartta her zaman görünür; yalnızca boş alanlar gizlenir.
       (Eski sınıflar geriye dönük uyumluluk için nötrlenir.) */
    .mobile-cardify td.mob-extra { display: flex; }
    .mobile-cardify tr td.mob-title::after { display: none !important; content: none !important; }
    .mobile-cardify td.mob-empty { display: none !important; }

    /* Üretim Tarihi mobil kart görünümünde gösterilmez (gereksiz alan) */
    .mobile-cardify td.col-uretimTarihi { display: none !important; }

    /* Bilgi satırları (yükleniyor / sonuç bulunamadı) */
    .mobile-cardify tr.mob-info { padding: 24px 14px; }
    .mobile-cardify tr.mob-info td { display: block; text-align: center !important; }
    .mobile-cardify tr.mob-info td::before { display: none; }

    /* Hücre içi buton/rozetler kart düzeninde sığsın */
    .mobile-cardify td .btn { padding: 6px 10px; font-size: .74rem; }
    .mobile-cardify td > div { margin-top: 2px; }

    /* ── SKT (Son Kullanma Tarihi) hücresi ─────────────────────────
       Tarih + "SKT GEÇMİŞ / SKT YAKLAŞIYOR" rozeti aynı hücrede.
       Rozet tarih yanına SIĞMAZSA yazıları itmek yerine düzgünce
       alt satıra, sağa hizalı iner. */
    .mobile-cardify td.col-sonKullanmaTarihi {
        flex-wrap: wrap;
        row-gap: 3px;
        align-items: center;
    }
    .mobile-cardify td.col-sonKullanmaTarihi > span { white-space: nowrap; }
    .mobile-cardify td.col-sonKullanmaTarihi > div {
        flex: 0 0 auto;
        margin: 0 0 0 auto !important;
        line-height: 1;
    }
    .mobile-cardify td.col-sonKullanmaTarihi > div > span {
        display: inline-block;
        white-space: nowrap;
        line-height: 1.5;
    }

    /* SKT durumu kartın kendisinden de okunsun (kenar vurgusu) */
    .mobile-cardify tbody tr.expired-row {
        border-color: #fecaca !important;
        box-shadow: inset 3px 0 0 #ef4444, 0 1px 3px rgba(15, 23, 42, .06);
    }
    .mobile-cardify tbody tr[style*="fffbeb"] {
        border-color: #fde68a !important;
        box-shadow: inset 3px 0 0 #f59e0b, 0 1px 3px rgba(15, 23, 42, .06);
    }
}

/* ════════════════════════════════════════════════════════════════════
   ≤700px — ÜTS SORGU SAYFALARI ORTAK KALIBI
   (alma / envanter / envanter_bildirimler / bildirim_sorgu)
   "Bilgi kutusu (apiPageText) + Sorgula/Temizle" satırı telefonda
   yan yana sıkışmak yerine alt alta geçer, butonlar tam genişlik.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    div[style]:has(> div > #apiPageText) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Bilgi kutusu ("Tarama Tamamlandı: ... kayıt bulundu.") TEK SATIR:
       ikinci satıra asla kaymaz; sığmayan kuyruk … ile kırpılır. */
    div[style]:has(> #apiPageText) {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    #apiPageText {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        line-height: 1.4;
    }
    #apiPageText * { white-space: nowrap !important; }
    #apiPageText strong { font-size: inherit !important; }
    #apiPageText br { display: none; }
    div[style]:has(> div > #apiPageText) > div {
        width: 100%;
        max-width: 100%;
        text-align: left !important;
        align-items: stretch !important;
    }
    div[style]:has(> #btnSorgula) { display: flex !important; width: 100%; }
    div[style]:has(> #btnSorgula) > .btn { flex: 1; justify-content: center; min-height: 42px; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤700px — ÜST BAR & KARŞILAMA KARTI (header.php ortak öğeleri)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* Tarih çipi telefonda hiç görünmesin */
    .date-chip { display: none !important; }

    /* Hazır Cevaplar + İTS çipleri mobile.js ile üst bara (hamburger'in
       soluna) taşınır; bardaki kompakt halleri: */
    .sidebar-header .hc-chip,
    .sidebar-header .its-chip {
        height: 28px;
        padding: 0 7px;
        border-radius: 8px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        font-size: .68rem;
    }
    .sidebar-header .hc-chip i { font-size: .72rem; }
    .sidebar-header .its-chip img { height: 14px; width: auto; display: block; }
    .sidebar-header .hc-chip .hc-chip-sep { margin: 0 4px; }
    /* Çipler + hamburger tek grupta dursun; grup asla taşmasın */
    .sidebar-header #mobileHeaderChips { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }

    /* ── TAŞMA KORUMASI (admin/moderator: 2 çip + hamburger) ──────
       Üst bar TEK satır kalır, hiçbir koşulda yatay scroll doğurmaz:
       • bar sıkışabilir (min-width:0), logo kutusu daralıp kırpılır
       • çipler varsa dekoratif "ÜTS Otomasyon" rozeti gizlenir       */
    .sidebar-header { flex-wrap: nowrap !important; gap: 8px; min-width: 0; max-width: 100%; }
    .sidebar-header .header-logo-box { min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .sidebar-header .admin-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
    .sidebar-header:has(#mobileHeaderChips) .admin-badge { display: none !important; }
    .sidebar-header:has(#mobileHeaderChips) .sidebar-logo { max-height: 32px !important; }

    /* Aktif kullanıcılar kutusu: daha derli toplu */
    .active-users-toggle { padding: 10px 14px !important; gap: 8px; }
    .active-users-toggle > div { font-size: .8rem !important; line-height: 1.3; }
    #activeUsersList { padding: 10px 14px !important; font-size: .8rem !important; }
    #activeUsersList > div > div[style*="display:inline-block"] { display: block !important; width: fit-content; }

    /* Placeholder yazıları kesilmesin — hepsi görünsün */
    input::placeholder, textarea::placeholder { font-size: .72rem !important; letter-spacing: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤700px — PAYLAŞILAN MODAL KART SİSTEMİ
   (sayfa scriptleri .mob-prod-card'ı inşa eder, satırlara .mob-pair /
   .mob-gone / .mob-modal-actions atar; bu stiller tüm sayfalarda ortak)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .mob-prod-card {
        background: linear-gradient(180deg, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0; border-radius: 12px;
        padding: 12px 14px; margin: 0 0 10px 0;
        box-shadow: inset 0 1px 0 #fff;
    }
    .mob-prod-card .mpc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .mob-prod-card .mpc-title {
        flex: 1; min-width: 0;
        font-size: .88rem; font-weight: 700; color: #0f172a; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .mob-prod-card .mpc-stok-badge {
        flex: 0 0 auto;
        background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
        border-radius: 20px; padding: 3px 11px;
        font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
    }
    .mob-prod-card .mpc-stok-badge b { color: #15803d; font-size: .8rem; }
    .mob-prod-card .mpc-chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
    .mob-prod-card .mpc-chip {
        display: inline-flex; align-items: baseline; gap: 5px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
        padding: 4px 10px; font-size: .74rem; color: #64748b; white-space: nowrap;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
    }
    .mob-prod-card .mpc-chip b { color: #0f172a; font-weight: 700; }

    .mob-detail-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: end; }
    .mob-detail-grid > * { grid-column: 1 / -1; min-width: 0; }
    .mob-detail-grid > .mob-pair { grid-column: auto; }

    .mob-modal-actions { display: flex; flex-direction: column !important; width: 100%; gap: 6px !important; }
    .mob-modal-actions > button { width: 100%; justify-content: center; min-height: 42px; font-size: .88rem !important; padding: 8px !important; }

    .mob-gone { display: none !important; }
}
