/* =========================================================================
   PARSEL MODALI — MOBİL "BOTTOM SHEET" YENİDEN TASARIMI (2026)
   -------------------------------------------------------------------------
   Kapsam: SADECE #parcelCardModal ve SADECE ≤767.98px (telefon/küçük tablet).
   Masaüstü görünüm bu dosyadan ETKİLENMEZ.

   Hedef: alttan kayan, sade, anlaşılır, tek elle kullanılabilen bir panel.
     • Üstte tutamaç (drag handle) + sürükleyerek kapatma
     • Kompakt başlık + net kapatma (✕) butonu
     • İçeriğin en üstünde hızlı "özet kartı" (arsa, TAKS/KAKS, kat, bölüm, risk)
     • 11 sekme → yatay kaydırılabilir pill/chip bar (yapışkan)
     • Aksiyon barı sadeleştirilmiş (gereksiz "Kapat" gizli)

   Bu dosya base.html'deki dp_popup_system.css ve dashboard_runtime.css'ten
   SONRA yüklenir; ID özgüllüğü + gerekli yerlerde !important ile onları
   güvenle ezer.
   ========================================================================= */

/* Masaüstünde tamamen gizli kalması gereken mobil-özel parçalar */
#parcelCardModal .dp-sheet-close,
#parcelCardModal .parcel-mobile-summary {
    display: none;
}

@media (max-width: 767.98px) {

    /* ---------------------------------------------------------------------
       1) SHEET KONUMU — diyaloğu ekranın altına sabitle
       --------------------------------------------------------------------- */
    #parcelCardModal .modal-dialog {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        /* Bootstrap'in .modal-dialog-centered (min-height:calc(100% - 1rem)) ve
           .modal-dialog-scrollable (height:calc(100% - 1rem)) kuralları burada
           SIFIRLANMALI: aksi halde diyalog tam-ekran yüksekliğinde kalıyor,
           display:block flex-ortalamayı öldürdüğü için içerik ÜSTE yapışıyor ve
           sheet altta ~50px boşluk bırakıyordu (köşeler köşeli, gölge ters). */
        height: auto !important;
        min-height: 0 !important;
        pointer-events: none; /* boş alana dokununca backdrop kapatsın */
    }

    #parcelCardModal .modal-content,
    #parcelCardModal .dp-modal {
        pointer-events: auto;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        overflow: hidden !important;
        box-shadow: 0 -10px 44px rgba(15, 23, 42, 0.30) !important;
        will-change: transform;
    }

    /* ---------------------------------------------------------------------
       2) BAŞLIK — kompakt, sade
       --------------------------------------------------------------------- */
    #parcelCardModal .modal-header.dp-hero {
        flex: 0 0 auto !important;
        padding: 12px 14px 12px !important;
        border-radius: 0 !important;
        border-bottom: none !important;
        min-height: auto !important;
    }
    #parcelCardModal .dp-hero__pattern,
    #parcelCardModal .dp-hero__icon-wrapper,
    #parcelCardModal .dp-hero__badge {
        display: none !important;
    }
    #parcelCardModal .dp-hero__content {
        padding: 0 !important;
        gap: 10px !important;
    }
    #parcelCardModal .dp-hero__title {
        font-size: 1.02rem !important;
        line-height: 1.25 !important;
    }
    #parcelCardModal .dp-hero__subtitle {
        font-size: 0.72rem !important;
        opacity: 0.85;
        line-height: 1.2;
    }

    /* Kapatma (✕) butonu */
    #parcelCardModal .dp-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: var(--radius-2026-btn, 14px);
        background: rgba(35, 49, 59, 0.08);
        color: #23313b;
        font-size: 0.95rem;
        line-height: 1;
    }
    #parcelCardModal .dp-sheet-close:active {
        background: rgba(35, 49, 59, 0.16);
    }

    /* ---------------------------------------------------------------------
       4) GÖVDE — kaydırılabilir alan
       --------------------------------------------------------------------- */
    #parcelCardModal .modal-body.dp-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ---------------------------------------------------------------------
       5) ÖZET KARTI — tek bakışta parsel künyesi
       --------------------------------------------------------------------- */
    #parcelCardModal .parcel-mobile-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 0 0 14px;
    }
    #parcelCardModal .pms-chip {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 10px 6px;
        text-align: center;
        background: #f8fafc;
        border: 1px solid #e9eef5;
        border-radius: 13px;
    }
    #parcelCardModal .pms-val {
        max-width: 100%;
        font-size: 0.95rem;
        font-weight: 800;
        color: #23313b;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #parcelCardModal .pms-lbl {
        font-size: 0.6rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    #parcelCardModal .pms-chip--risk {
        background: #fef2f2;
        border-color: #fecaca;
    }
    #parcelCardModal .pms-chip--risk .pms-val { color: #b91c1c; }
    #parcelCardModal .pms-chip--ok {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }
    #parcelCardModal .pms-chip--ok .pms-val { color: #15803d; }

    /* ---------------------------------------------------------------------
       6) SEKMELER — yatay kaydırılır pill/chip bar (yapışkan)
       --------------------------------------------------------------------- */
    #parcelCardModal .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 6;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        margin: 0 -12px 14px !important;
        padding: 8px 12px !important;
        background: #ffffff;
        border: none !important;
        border-bottom: 1px solid #eef2f7 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #parcelCardModal .nav-tabs::-webkit-scrollbar { display: none; }

    #parcelCardModal .nav-tabs .nav-item {
        flex: 0 0 auto !important; /* nav-fill esnemesini iptal et */
    }
    #parcelCardModal .nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        min-height: 38px;
        margin: 0 !important;
        padding: 7px 14px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
    }
    #parcelCardModal .nav-tabs .nav-link.active {
        color: #ffffff !important;
        background: #1e40af !important;
        border-color: #1e40af !important;
    }
    /* Aktif chip içindeki sayaç rozeti okunur kalsın */
    #parcelCardModal .nav-tabs .nav-link.active .badge {
        background: #ffffff !important;
        color: #1e40af !important;
    }

    /* ---------------------------------------------------------------------
       7) AKSİYON BARI — sadeleştirilmiş
       --------------------------------------------------------------------- */
    #parcelCardModal .parcel-action-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: stretch !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    #parcelCardModal .parcel-action-bar > .btn {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* "Kapat" mobilde gereksiz — başlıkta ✕, tutamaç ve arka plana dokunma var */
    #parcelCardModal .parcel-action-bar [data-bs-dismiss="modal"] {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
       8) İÇERİK KÜÇÜK İNCE AYARLAR (mobil okunurluk)
       --------------------------------------------------------------------- */
    /* Veri güven barı içeriğe yapışmasın */
    #parcelCardModal #parcelCardContent > .imar-fade-in:first-child { margin-top: 0; }
}

/* iOS Safari: dp_popup_system.css'in @supports kuralının body max-height'ını
   bottom-sheet flex düzeninde sıfırla (sadece mobil genişlikte). */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {
        #parcelCardModal .modal-content,
        #parcelCardModal .dp-modal {
            max-height: 92dvh !important;
        }
        #parcelCardModal .modal-body.dp-content {
            max-height: none !important;
        }
    }
}