/* ═══════════════════════════════════════════════════════════════════
   MILAGRON - MOBİL UYARLAMA KATMANI
   ───────────────────────────────────────────────────────────────────
   Tema zincirinin EN SONUNDA yüklenir (bkz. assets/php/ui-theme.php):
   tokens -> base -> components -> style.css -> shell -> responsive

   En sonda olmasının sebebi, dar ekranda hem yeni tema dosyalarını hem
   de style.css'ten devralınan eski kuralları ezebilmesi. Buradaki her
   kural bir medya sorgusunun içindedir; masaüstü görünümüne hiç
   dokunmaz.

   Panelde iki ayrı responsive katman var, ikisi de gerekli:
     - style.css  : her iki temada da geçerli olan iskelet kuralları
                    (Skeleton kolonları, sayfa başlığı, sabit genişlikler)
     - bu dosya   : yalnız yeni temaya ait, tablo kart modu dahil
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   DİKEY BOŞLUKLAR
   ───────────────────────────────────────────────────────────────────
   Dar ekranda sayfa öğeleri birbirine yapışıyordu. İki ayrı sebep var,
   ikisi de ölçüldü (420 piksellik test penceresi, /settings ve
   /created-products):

   1. Kartın alt boşluğu base.css'te yalnız 550px ÜSTÜNDE tanımlı.
      Telefonda .card { margin-bottom: 0 } kalıyor ve aynı bölümdeki
      kartlar sıfır boşlukla üst üste biniyordu (/settings: 7 kart,
      hepsinin arası 0 piksel).

   2. Sayfa başlığı satırı (solda başlık, sağda düğmeler) dar ekranda
      sarıyor. Sardığında satırın alt kenarını düğme belirliyor ve düğme
      aşağıdaki karta yapışıyordu. Masaüstünde sorun görünmüyor, çünkü
      orada satırın altını açıklama metninin alt boşluğu belirliyor.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 549px) {

    section .card,
    .card,
    .popupCard {
        margin-bottom: 1.6rem;
    }
}

@media (max-width: 1024px) {

    /* Başlık satırı ile altındaki kart arasında nefes payı.
       Panelde bu satırın üç yazımı da var: .d-flex-sb sınıfı, .d-flex
       sınıfı ve sınıfsız inline style. Üçü de yakalanır. */
    .content>.d-flex-sb,
    .content>.d-flex,
    .content>div[style*="display:flex"],
    .content>div[style*="display: flex"],
    .content>section>.d-flex-sb {
        margin-bottom: 1.6rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   LİSTELEME TABLOSU: DAR EKRANDA KART
   ───────────────────────────────────────────────────────────────────
   Panelin listeleme tabloları 8-12 kolonlu. Telefonda tek çare yatay
   kaydırmaydı: kullanıcı bir satırı okumak için tabloyu sağa sola
   sürüklüyor, hangi değerin hangi kolon olduğunu takip edemiyordu.

   Kart modunda başlık satırı gizlenir, her satır bir karta dönüşür ve
   her hücrenin üstüne kendi kolon adı yazılır. Kolon adını JS damgalar
   (milagron-mobil.js -> data-baslik); hangi tablonun uygun olduğuna da
   o karar verir. Burada yalnız "ne zaman" sorusu cevaplanır.

   Eşik 780px: bu genişliğin altında kenar çubuğu zaten ekran dışında
   (shell.css 1024px kuralı), yani içerik alanı ekran genişliği kadardır.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

    table.mgMobilKart {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    /* DataTables kolon genişliklerini colgroup ile de yazabiliyor. */
    table.mgMobilKart>colgroup,
    table.mgMobilKart>thead {
        display: none;
    }

    table.mgMobilKart>tbody {
        display: block;
    }

    /* Her satır bir kart. Ayrı kutu yerine ince çizgiyle bölünüyor:
       kart zaten bir .card içinde duruyor, iç içe kutu kalabalık
       görünüyordu (aynı karar .mgOtKart tarafında da verildi). */
    table.mgMobilKart>tbody>tr {
        display: block;
        position: relative;
        padding: 1.4rem 1.6rem;
        border-bottom: 1px solid var(--mg-border);
    }

    table.mgMobilKart>tbody>tr:last-child {
        border-bottom: 0;
    }

    table.mgMobilKart>tbody>tr:hover {
        background: transparent;
    }

    table.mgMobilKart>tbody>tr>td {
        display: block;
        width: auto !important;
        max-width: none !important;
        padding: .6rem 0;
        border-bottom: 0;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.mgMobilKart>tbody>tr>td:first-child {
        padding-top: 0;
    }

    table.mgMobilKart>tbody>tr>td:last-child {
        padding-bottom: 0;
    }

    /* Kolon adı: JS'in bastığı data-baslik. Damgası olmayan hücre
       (colspan'li detay satırı, "kayıt yok" satırı) etiketsiz kalır. */
    table.mgMobilKart td[data-baslik]::before {
        content: attr(data-baslik);
        display: block;
        margin-bottom: .4rem;
        font-size: var(--mg-text-sm);
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--mg-text-muted);
    }

    /* Kısa ve düz metin olan hücre (tarih, adet, fiyat, durum) kendi
       satırını harcamaz; etiket solda, değer sağda durur. Sınıfı JS
       içerikten karar vererek ekler (milagron-mobil.js). */
    table.mgMobilKart td.mgKartSatirIci {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1.2rem;
    }

    table.mgMobilKart td.mgKartSatirIci::before {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    /* Tek içeriği seçim kutusu olan hücre kendi satırını harcamaz,
       kartın sağ üst köşesine geçer. */
    table.mgMobilKart td.mgKartSec {
        position: absolute;
        top: 1.2rem;
        right: 1.4rem;
        width: auto !important;
        padding: 0 !important;
    }

    table.mgMobilKart td.mgKartSec::before {
        content: none;
    }

    table.mgMobilKart td.mgKartSec input {
        width: 20px;
        height: 20px;
    }

    /* colspan'li satırlar (boş liste, detay) tam genişlikte ortalanır. */
    table.mgMobilKart td[colspan] {
        text-align: center !important;
    }

    /* Tablo artık taşmadığı için sarmalayıcının yatay kaydırması
       gereksiz; bırakılırsa kart içinde ikinci bir kaydırma çubuğu
       beliriyor. Sınıfı JS ekler (milagron-mobil.js). */
    .mgMobilKartKap {
        overflow-x: visible !important;
    }

    /* Kart içindeki işlem düğmeleri alt alta ve tam genişlik: parmakla
       dokunulacak hedef büyür, yan yana sıkışıp taşmazlar. */
    table.mgMobilKart td .btn,
    table.mgMobilKart td .button {
        display: inline-flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    table.mgMobilKart td .btn,
    table.mgMobilKart td .button {
        width: 100%;
    }

    table.mgMobilKart td .btn+.btn,
    table.mgMobilKart td .button+.button {
        margin-top: .6rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   DATATABLES KONTROLLERİ
   Arama kutusu, kayıt sayısı, sayfalama; dar ekranda yan yana
   sığmayınca kartın dışına taşıyorlardı.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100%;
        text-align: left !important;
    }

    /* border-box şart: bazı sayfalar bu kutulara kendi yatay dolgusunu
       veriyor (created-products / product-list: padding 0 18px). width:100%
       ile birlikte kutu 36 piksel taşıyor ve kartın içinde yatay kaydırma
       çubuğu beliriyordu. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        box-sizing: border-box;
    }

    /* "Sayfada _ kayıt göster" etiketi tek satıra sığmıyor; sarsın. */
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        width: 100%;
        margin: 0;
    }

    .dataTables_wrapper .dataTables_length select {
        width: auto;
        max-width: 100%;
    }

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

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: .8rem;
    }

    /* Sayfa numaraları çok sayıdayken alt satıra sarsın. */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-block;
        margin: .2rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   GENEL MOBİL EMNİYETLER
   Sayfaların içine elle yazılmış sabit genişlikler yüzünden oluşan
   yatay taşmayı keser. Kural yalnız dar ekranda geçerli.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

    /* Not: "html, body { overflow-x: hidden }" bilerek yazılmadı. Taşmayı
       gizlemek hatayı da gizler; taşan sayfa tek tek düzeltiliyor. */

    /* Inline width verilmiş form alanları (style="width:300px" kalıbı)
       ekrana sığar. Seçim kutuları hariç: onların ölçüsü kasıtlı. */
    .content input:not([type="checkbox"]):not([type="radio"]),
    .content select,
    .content textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Sabit genişlikli açılır kutular kenarlara yapışmasın. */
    .popupCard,
    .popup-content,
    .modalBox {
        width: auto !important;
        max-width: calc(100vw - 2.4rem) !important;
    }

    /* Kart içi başlık + aksiyon satırları sarsın. */
    .card>.d-flex-sb,
    .card-header,
    .productListToolbar,
    .mgOtAlt {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* Panelde düğme satırlarının çoğu sınıfsız, inline yazılmış:
       style="display:flex; gap:10px". Sarmadıkları için dar ekranda
       sayfayı yatay kaydırıyorlardı (draft-control-management'ta 301px,
       report-management'ta 212px taşma ölçüldü). Öznitelik seçicisi
       hepsini tek yerden yakalar; ölçülen sayfalara tek tek kural
       yazmak aynı hatayı bir sonraki sayfada tekrar bırakırdı. */
    .content [style*="display:flex"],
    .content [style*="display: flex"] {
        flex-wrap: wrap;
    }

    /* Sekmeler zaten kaydırılabilir; dokunmada daha rahat olsun. */
    .tabs {
        -webkit-overflow-scrolling: touch;
    }

    /* Etiket rozetleri masaüstünde tek satırda durur (white-space: nowrap).
       İçerik uzun olduğunda (ör. /options sayfasındaki seçenek değerleri:
       "33 x 33 cm / 50 x 90 cm / 70 x 140 cm") rozet 450 piksele çıkıp
       sayfayı yatay kaydırıyordu. Dar ekranda sararlar. */
    .tag {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}