/* ============================================================
   WEBVIEW-FIX — Mobil/WebView yatay kaydırma ve taşma düzeltmeleri
   ------------------------------------------------------------
   Tüm sayfa head'lerinde styles.css'in hemen ardından doğrudan
   <link> ile yüklenir (user.css @import zinciri kullanılmıyor).
   GERİ ALMA: sayfalardaki webview-fix.css <link> satırını silin.
   ============================================================ */

/* ---------- 1) Global yatay scroll kilidi ----------
   NOT: Sadece body'de clip uygulanır. html'e dokunulmaz çünkü
   html'deki overflow kuralı sticky header'ın scroll container
   hesabını bozuyor ve top_bar scroll sırasında kayboluyor.
   "clip" yatay taşmayı kırpar, dikey scroll'a DOKUNMAZ. */
body {
    overflow-x: hidden; /* eski tarayıcılar için fallback */
    overflow-x: clip;
}

/* Form elemanları taşmasın */
.form-control,
.ti-form-select,
input,
select,
textarea {
    max-width: 100%;
}

/* ---------- 2) Training tabs (index.php) mobil uyumluluk ---------- */
@media (max-width: 480px) {
    .tr-tabs {
        gap: 4px !important;
        padding: 4px !important;
    }
    .tr-tab {
        font-size: 0.72rem !important;
        padding: 0 4px !important;
        gap: 3px !important;
        min-width: 0;
    }
    .tr-tab > span:not(.tr-tab__count) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .tr-tab__count {
        font-size: 0.58rem !important;
        padding: 1px 4px !important;
        min-width: 16px;
        flex-shrink: 0;
    }
    .tr-tab i {
        font-size: 0.85rem !important;
        flex-shrink: 0;
    }
}

/* Ultra dar ekranlarda training tab ikonunu gizle (metin+count kalır) */
@media (max-width: 360px) {
    .tr-tab i {
        display: none !important;
    }
}

/* ---------- 3) Detay/liste sayfalarındaki tab bar'ların mobil taşması ---------- */
/* Ortak pattern: .detail-tabs (marketing, bildirimler, destek vb.) */
@media (max-width: 480px) {
    .detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .detail-tabs .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* Scrollbar'ı ince göster */
    .detail-tabs::-webkit-scrollbar { height: 3px; }
    .detail-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
}

/* ---------- 4) Card/grid mobil taşma koruması ---------- */
@media (max-width: 480px) {
    .box,
    .card {
        max-width: 100%;
    }
    /* Grid sütunları overflow etmesin */
    .grid,
    [class*="grid-cols-"] {
        min-width: 0;
    }
    .grid > *,
    [class*="grid-cols-"] > * {
        min-width: 0;
    }
}

/* ---------- 5) Long text wrap (başlık, açıklama vb.) ---------- */
@media (max-width: 480px) {
    .page-title,
    .box-title,
    .ti-modal-title {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ---------- 6) Form elemanları mobilde ≥16px ----------
   iOS, 16px altındaki inputlara odaklanınca sayfayı yakınlaştırır;
   viewport maximum-scale=1 olsa da okunabilirlik için 16px garanti edilir. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .ti-form-input,
    .ti-form-select {
        font-size: 16px !important;
    }
}

/* ---------- 7) Geniş tablolar: akıcı kaydırma ---------- */
@media (max-width: 640px) {
    .table-responsive,
    .overflow-x-auto,
    .overflow-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
}