/* =====================================================================
   mobile.css — Birim Yönetim Sistemi ortak mobil katmanı
   ---------------------------------------------------------------------
   Her layout'ta ve Layout = null olan her sayfada EN SON yüklenir.
   Sayfaya özgü düzeltmeler sayfanın kendi <style> bloğunda
   "@media (max-width: 768px)" altında durur; burada yalnızca bütün
   sayfalarda tekrar eden kalıplar var.

   Kırılım noktaları (Bootstrap 5 ile uyumlu):
     992px  tablet ve altı
     768px  telefon (yatay) ve altı  <- ana kırılım
     480px  küçük telefon
   ===================================================================== */

/* ---------- Her boyutta geçerli: taşma önleyiciler ---------- */

/* Grid/flex çocukları varsayılan olarak içeriği kadar genişler; geniş bir
   tablo tüm sayfayı (başlık ve menü dahil) yatayda taşırır. */
.main-content,
.content-wrapper,
.page-content,
.main-panel {
    min-width: 0;
}

img,
video,
canvas,
iframe,
svg:not(.svg-inline--fa) {
    max-width: 100%;
}

/* mobile.js'in tablolara eklediği kaydırma kabı */
.m-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

    .m-table-scroll > table {
        margin-bottom: 0;
    }

    /* Sayfaya göre ayarlanmış yapışkan başlık ofsetleri (top: 150px vb.) kabın
       içinde başlığı satırların üstüne iter; kap dikey kaymadığı için sıfırla.
       Soldaki yapışkan sütunlar (left) etkilenmez. */
    .m-table-scroll > table > thead th,
    .m-table-scroll > table > thead td {
        top: 0 !important;
    }

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Tablet ve altı ---------- */
@media (max-width: 991.98px) {
    .modal-xl,
    .modal-lg {
        max-width: calc(100vw - 1.5rem);
    }
}

/* ---------- Telefon ---------- */
@media (max-width: 768px) {

    /* clip: hidden gibi taşmayı keser ama body'yi kaydırma kabına çevirmez;
       hidden, layout'un position: sticky başlığını telefonda bozuyordu. */
    html,
    body {
        overflow-x: clip;
    }

    /* DataTables kendi kabını oluşturur; kabın kendisi kaydırılabilir olsun */
    .dataTables_wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* iOS Safari 16px altındaki alanlarda odaklanınca sayfayı yakınlaştırır */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* Bootstrap'in kesme noktasız sütunları (col-3, col-4...) telefonda sıkışır.
       Form satırlarında tam genişliğe aç. .keep-cols ile dışarıda bırakılabilir. */
    form .row:not(.keep-cols) > [class^="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not(.col-auto),
    .filter-row:not(.keep-cols) > [class^="col-"],
    .filters:not(.keep-cols) > [class^="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Buton ve araç çubukları satıra sığmazsa alta geçsin */
    .btn-toolbar,
    .btn-group:not(.btn-group-vertical),
    .d-flex.gap-1,
    .d-flex.gap-2,
    .d-flex.gap-3,
    .page-actions,
    .header-actions,
    .action-buttons,
    .toolbar,
    .filter-bar,
    .filters {
        flex-wrap: wrap;
    }

    /* Dokunma hedefleri */
    .btn,
    .page-link,
    .nav-link,
    .dropdown-item {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 34px;
    }

    /* Kartlar ve paneller ekran kenarına dayanmasın, taşmasın */
    .card,
    .panel,
    .box,
    .widget {
        max-width: 100%;
    }

    .card-body {
        padding: 1rem;
    }

    /* Sayfa başlıkları: başlık ve butonlar alt alta */
    .page-header,
    .hero-header,
    .hero-section,
    .content-header,
    .card-header.d-flex,
    .section-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

        .page-header h1,
        .hero-header h1,
        .content-header h1 {
            font-size: 1.35rem;
        }

    /* Kendi CSS'iyle flex olan kart başlıkları ve "başlık ... butonlar" satırları.
       row-gap yalnızca satır kırıldığında boşluk verir; tek satırda etkisizdir. */
    .card-header,
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* JS'in inline min-width ile açtığı sabit konumlu uyarı/bildirimler ekrandan taşmasın */
    .alert.position-fixed,
    .alert[style*="position: fixed"],
    .alert[style*="position:fixed"] {
        left: 10px !important;
        right: 10px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Yalnızca hover ile görünen kontroller dokunmatikte görünür olsun */
    .hover-reveal {
        opacity: 1 !important;
        visibility: visible !important;
    }

    h1, .h1 {
        font-size: 1.5rem;
    }

    h2, .h2 {
        font-size: 1.3rem;
    }

    h3, .h3 {
        font-size: 1.15rem;
    }

    /* Tablolar: dar ekranda biraz sıkılaştır, hücre metni kırılmasın */
    table {
        font-size: 0.85rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.45rem 0.5rem;
    }

    .m-table-scroll > table th,
    .dataTables_wrapper table th {
        white-space: nowrap;
    }

    /* DataTables kontrol satırları alt alta */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        margin-bottom: 0.5rem;
    }

        .dataTables_wrapper .dataTables_filter input {
            width: 100%;
            margin-left: 0;
        }

    /* Modallar ekrana sığsın (tam ekran modallar kendi boyutunda kalır) */
    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .modal-body {
        overflow-y: auto;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    /* Sekmeler taşarsa yatay kaydır */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

        .nav-tabs .nav-link,
        .nav-pills .nav-link {
            white-space: nowrap;
        }

    /* SweetAlert2 */
    .swal2-container .swal2-popup,
    .swal2-container .swal2-popup.swal-wide {
        width: calc(100vw - 2rem) !important;
        max-width: 32em;
        padding: 1rem !important;
    }

    /* Select2 */
    .select2-container {
        max-width: 100% !important;
    }

    /* Uzun kelimeler (e-posta, URL, birim adları) kutudan taşmasın */
    .card-title,
    .card-text,
    .alert,
    .badge {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .card-body {
        padding: 0.85rem;
    }

    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
        margin: 0.25rem;
        max-width: calc(100vw - 0.5rem);
    }

    /* Tam genişlik butonlar: formların altındaki birincil işlemler */
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* Masaüstünde gizli, mobilde görünür yardımcıları */
.m-only {
    display: none !important;
}

@media (max-width: 768px) {
    .m-only {
        display: revert !important;
    }

    .m-hide {
        display: none !important;
    }
}