/* ================================================================
 * MOBILE RESPONSIVE FIXES - newcrm.morzasoft.com
 * GrowCRM v3.0 - Custom Mobile Overrides
 * Bu dosya tüm mobil responsive düzeltmelerini içerir.
 * style.css'e dokunulmaz, güncellemelerden etkilenmez.
 * ================================================================ */


/* ================================================================
 * [KRITIK-1] GENEL MODAL RESPONSIVE - 768px altı
 * Sorun: Modal dialog'lar sabit max-width değerleri ile mobilde taşıyor
 * Düzeltme: Mobilde tüm modal'lar %95 genişlik, margin/padding azaltıldı
 * ================================================================ */

/* MOBILE FIX: Modal'ların mobilde tam genişlik kullanması */
@media (max-width: 768px) {

    .modal-dialog {
        max-width: 95% !important;
        width: 95% !important;
        margin: 10px auto !important;
    }

    /* MOBILE FIX: Modal boyut sınıflarının mobilde override edilmesi */
    .modal-sm,
    .modal-lg,
    .modal-xl,
    .modal-xxl {
        max-width: 95% !important;
        width: 95% !important;
    }

    /* MOBILE FIX: Modal body padding azaltma - alan kazanımı */
    .modal .modal-dialog .modal-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 15px !important;
    }

    /* MOBILE FIX: Modal header kompakt */
    .modal .modal-dialog .modal-header {
        min-height: 45px;
        padding: 10px 15px;
    }

    /* MOBILE FIX: Modal title font küçültme */
    .modal .modal-dialog .modal-header .modal-title {
        font-size: 16px;
        padding-right: 30px;
        word-wrap: break-word;
    }

    /* MOBILE FIX: Modal alt boşluk azaltma */
    .modal .modal-dialog {
        margin-bottom: 20px !important;
    }

    /* MOBILE FIX: Modal footer kompakt */
    .modal .modal-dialog .modal-footer {
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 5px;
    }

    /* MOBILE FIX: Footer butonları mobilde tam genişlik */
    .modal .modal-dialog .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* MOBILE FIX: 480px altı - çok küçük ekranlar */
@media (max-width: 480px) {

    .modal-dialog {
        max-width: 98% !important;
        width: 98% !important;
        margin: 5px auto !important;
    }

    .modal .modal-dialog .modal-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 10px !important;
    }

    .modal .modal-dialog .modal-header {
        padding: 8px 10px;
    }

    .modal .modal-dialog .modal-footer .btn {
        width: 100%;
        margin-bottom: 5px;
    }
}


/* ================================================================
 * [KRITIK-2] MODAL BODY SCROLL - Tüm ekranlar
 * Sorun: Modal içeriği uzun olduğunda scroll edilemiyor, sayfadan taşıyor
 * Düzeltme: max-height + overflow-y: auto eklendi
 * ================================================================ */

/* MOBILE FIX: Modal body scroll desteği */
@media (max-width: 768px) {

    .modal .modal-dialog .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {

    .modal .modal-dialog .modal-body {
        max-height: 65vh !important;
    }
}


/* ================================================================
 * [KRITIK-3] CREATE MODAL - İki panel layout düzeltmesi
 * Sorun: .create-modal flex layout (section-left %40 + section-right %60)
 *        mobilde yan yana kalıyor ve taşıyor
 * Düzeltme: Mobilde flex-direction: column ile alt alta dizildi
 * ================================================================ */

/* MOBILE FIX: Create modal flex layout mobilde dikey */
@media (max-width: 768px) {

    .create-modal .modal-dialog .modal-content .create-modal-body {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .create-modal .modal-dialog .modal-content .create-modal-body .create-modal-section {
        padding: 15px !important;
    }

    .create-modal .modal-dialog .modal-content .create-modal-body .create-modal-section.section-left {
        flex: none !important;
        width: 100% !important;
        border-radius: 5px 5px 0 0 !important;
        border-bottom-left-radius: 0 !important;
        padding-bottom: 10px !important;
    }

    .create-modal .modal-dialog .modal-content .create-modal-body .create-modal-section.section-right {
        flex: none !important;
        width: 100% !important;
        padding-top: 20px !important;
    }

    .create-modal .modal-dialog {
        max-width: 95% !important;
    }

    /* MOBILE FIX: Create modal close butonu erişilebilir */
    .create-modal .modal-dialog .modal-content .close {
        right: 5px;
        top: 5px;
        z-index: 1050;
        font-size: 20px;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ================================================================
 * [KRITIK-4] CARD MODAL (Task/Lead) - İki kolon layout düzeltmesi
 * Sorun: .card-modal col-lg-8 %70 + col-lg-4 %30 layout mobilde bozuluyor
 *        max-width: 920px !important sabit değer
 * Düzeltme: Mobilde tek kolon, panel'ler alt alta
 * ================================================================ */

/* MOBILE FIX: Card modal mobilde tek kolon */
@media (max-width: 768px) {

    .card-modal .modal-dialog {
        max-width: 95% !important;
    }

    .card-modal .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: 80vh !important;
    }

    .card-modal .modal-body .row {
        flex-direction: column !important;
    }

    .card-modal .modal-body .col-lg-8,
    .card-modal .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .card-modal .modal-body .col-lg-4,
    .card-modal .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .card-modal .card-left-panel {
        padding: 15px !important;
        border-radius: 5px 5px 0 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .card-modal .card-right-panel {
        padding: 15px !important;
        border-radius: 0 0 5px 5px !important;
        border-top-right-radius: 0 !important;
    }
}


/* ================================================================
 * [KRITIK-5] ACTIONS MODAL - Onay/Silme dialog düzeltmesi
 * Sorun: max-width: 500px sabit - küçük ekranlarda taşabilir
 * ================================================================ */

/* MOBILE FIX: Actions modal mobilde responsive */
@media (max-width: 768px) {

    .actions-modal .modal-dialog {
        max-width: 95% !important;
    }
}


/* ================================================================
 * [YUKSEK-1] CLOSE BUTON ERİŞİLEBİLİRLİK
 * Sorun: Close butonu 44x44px minimum dokunma alanını karşılamıyor
 * Düzeltme: Minimum dokunma alanı eklendi
 * ================================================================ */

/* MOBILE FIX: Close buton minimum dokunma alanı */
@media (max-width: 768px) {

    .modal .modal-dialog .modal-header button.close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 5px;
        top: 5px;
        font-size: 20px;
    }

    /* MOBILE FIX: Extra close icon da dokunulabilir boyutta */
    .modal .modal-content .x-extra-close-icon {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 5px;
        top: 5px;
    }
}


/* ================================================================
 * [YUKSEK-2] FORM ELEMANLARI MOBİL UYUMLULUK
 * Sorun: Form input/select/button elementleri mobilde çok küçük olabilir
 * Düzeltme: Minimum yükseklik ve font boyutu ayarlandı
 * ================================================================ */

/* MOBILE FIX: Form elemanları minimum dokunma boyutları */
@media (max-width: 768px) {

    .modal .form-control {
        min-height: 40px;
        font-size: 16px !important; /* iOS zoom engellemek için 16px minimum */
    }

    .modal select.form-control,
    .modal .form-control-sm {
        min-height: 40px;
        font-size: 16px !important;
    }

    .modal textarea.form-control {
        min-height: 80px;
    }

    /* MOBILE FIX: Form group row mobilde tek kolon */
    .modal .form-group.row {
        margin-left: 0;
        margin-right: 0;
    }

    .modal .form-group.row > label {
        padding-bottom: 5px;
    }

    .modal .form-group.row > .col-sm-12,
    .modal .form-group.row > .col-lg-3,
    .modal .form-group.row > .col-lg-4,
    .modal .form-group.row > .col-lg-8,
    .modal .form-group.row > .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* MOBILE FIX: Select2 dropdown mobilde tam genişlik */
    .modal .select2-container {
        width: 100% !important;
    }
}


/* ================================================================
 * [YUKSEK-3] CLIENT/MODAL SELECTOR TAŞMA
 * Sorun: .client-selector, .modal-selector margin-left: -30px taşma riski
 * Düzeltme: Negatif margin sıfırlandı
 * ================================================================ */

/* MOBILE FIX: Selector negatif margin düzeltme */
@media (max-width: 768px) {

    .client-selector,
    .modal-selector {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 15px !important;
        border-radius: 5px;
    }
}


/* ================================================================
 * [ORTA-1] GENEL MOBİL LAYOUT DÜZELTMELERİ
 * Diğer mobil sorunlar
 * ================================================================ */

/* MOBILE FIX: Tablo mobilde yatay scroll */
@media (max-width: 768px) {

    .modal .table-responsive,
    .modal .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* MOBILE FIX: Splash image mobilde küçültme */
    .modal .modal-dialog .modal-body .splash-image img {
        width: 120px;
    }

    /* MOBILE FIX: Highlighted panel mobilde padding azaltma */
    .modal .modal-dialog .modal-body .highlighted-panel {
        padding: 12px;
    }

    /* MOBILE FIX: Meta data mobilde düzeltme */
    .modal .modal-dialog .modal-body .modal-meta-data {
        margin-top: 0;
        text-align: left;
    }
}


/* ================================================================
 * [ORTA-2] TOPBAR & SIDEBAR MOBİL
 * ================================================================ */

/* MOBILE FIX: Page wrapper overlay mobilde tam ekran */
@media (max-width: 768px) {

    .page-wrapper-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1040;
    }
}


/* ================================================================
 * [DUSUK-1] MODAL ANİMASYON - iOS performans
 * Sorun: transform translate animasyonu iOS'ta takılma yapabilir
 * Düzeltme: will-change eklendi, GPU hızlandırma
 * ================================================================ */

/* MOBILE FIX: Modal animasyon GPU hızlandırma */
@media (max-width: 768px) {

    .modal .modal-dialog {
        will-change: transform;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/* ================================================================
 * [DUSUK-2] iOS SAFARI 100vh SORUNU
 * Sorun: iOS Safari'de 100vh adres çubuğunu dahil eder
 * Düzeltme: -webkit-fill-available alternatifi
 * ================================================================ */

/* MOBILE FIX: iOS Safari viewport yükseklik düzeltmesi */
@supports (-webkit-touch-callout: none) {
    .modal .modal-dialog .modal-body {
        max-height: -webkit-fill-available;
    }
}


/* ================================================================
 * [DUSUK-3] DOKUNMA GERİ BİLDİRİMİ
 * Düzeltme: Tıklanabilir elemanlara aktif dokunma geri bildirimi
 * ================================================================ */

/* MOBILE FIX: Butonlar için aktif dokunma geri bildirimi */
@media (max-width: 768px) {

    .modal .btn:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* MOBILE FIX: Tap highlight rengi */
    .modal a,
    .modal button,
    .modal .btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}


/* ================================================================
 * [KRITIK-6] TinyMCE EDITÖR MOBİL RESPONSIVE
 * Sorun: TinyMCE editör mobilde taşıyor, toolbar sarılmıyor
 * Düzeltme: Editör ve toolbar mobilde tam genişlik
 * ================================================================ */

/* MOBILE FIX: TinyMCE editör mobilde responsive */
@media (max-width: 768px) {

    /* Editör container tam genişlik */
    .mce-tinymce,
    .mce-container,
    .mce-panel {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Toolbar butonları sarılsın */
    .mce-toolbar-grp .mce-flow-layout {
        flex-wrap: wrap !important;
        display: flex !important;
    }

    .mce-toolbar .mce-btn-group {
        flex-wrap: wrap;
    }

    /* Editör iframe tam genişlik */
    .mce-edit-area iframe {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Editör yükseklik mobilde azalt */
    .mce-edit-area {
        min-height: 300px;
    }

    /* TinyMCE floatpanel (link/image dialog) mobilde taşmasın */
    .mce-floatpanel {
        max-width: 95vw !important;
        left: 2.5vw !important;
    }

    .mce-floatpanel .mce-textbox {
        max-width: 100% !important;
        width: auto !important;
    }

    .mce-floatpanel .mce-container-body {
        max-width: 100% !important;
    }

    /* Fullscreen düzeltme */
    .mce-fullscreen {
        z-index: 10000 !important;
    }
}

/* MOBILE FIX: Document editing sayfası mobilde responsive */
@media (max-width: 768px) {

    .docs-main-wrapper {
        padding: 10px !important;
        margin: 0 !important;
    }

    .doc-body {
        overflow-x: hidden;
    }

    /* Hero header mobilde kompakt */
    .hero-header-wrapper {
        padding: 10px !important;
    }

    .hero-header-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Side panel'ler mobilde tam genişlik */
    .documents-side-panel {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Form butonları mobilde */
    #document-editor-wrapper .text-right {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: stretch;
    }

    #document-editor-wrapper .text-right .btn {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* ================================================================
 * [KRITIK-7] TEKLİF/SÖZLEŞME TABLOSU MOBİL YATAY SCROLL
 * Sorun: TinyMCE ile yazılan tablolar inline style ile sabit px genişliklere
 *        sahip (örn: width: 962px). Mobilde ekrandan taşıyor ve overflow
 *        kontrolü olmadığı için sağ sütunlar görünmüyor/erişilemiyor.
 * Düzeltme: .doc-body içindeki tabloları scrollable wrapper ile sarmalama
 *           ve inline sabit genişlikleri override etme
 * ================================================================ */

/* MOBILE FIX: doc-body overflow kontrolü - tablolar taşmasın */
.docs-main-wrapper .doc-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* MOBILE FIX: doc-body içindeki tabloların mobilde yatay scroll desteği */
@media (max-width: 768px) {

    .docs-main-wrapper .doc-body {
        padding: 15px !important;
        overflow-x: auto !important;
    }

    /* Tablo container davranışı - her tablo scrollable */
    .docs-main-wrapper .doc-body table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        /* width: auto !important; -- inline style override */
    }

    /* Tablo body'si de scrollable olmalı */
    .docs-main-wrapper .doc-body table tbody {
        display: table !important;
        width: 100% !important;
        min-width: 600px; /* Minimum genişlik - sütunlar ezilmesin */
    }

    /* Hücrelerin minimum genişliği korunsun ama taşmasın */
    .docs-main-wrapper .doc-body table td,
    .docs-main-wrapper .doc-body table th {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Scroll olduğunu kullanıcıya görsel ipucu */
    .docs-main-wrapper .doc-body table {
        border: 1px solid #e9ecef;
        border-radius: 4px;
        margin-bottom: 15px;
    }
}

/* MOBILE FIX: 480px altı ekranlar - daha agresif tablo düzeltme */
@media (max-width: 480px) {

    .docs-main-wrapper .doc-body {
        padding: 10px !important;
    }

    .docs-main-wrapper .doc-body table tbody {
        min-width: 500px;
    }

    /* Büyük görsellerin taşmasını engelle */
    .docs-main-wrapper .doc-body img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* MOBILE FIX: docs-main-wrapper mobilde tam genişlik */
@media (max-width: 768px) {

    .docs-main-wrapper {
        max-width: 100% !important;
        margin-top: 10px !important;
        border-radius: 0;
    }

    /* Hero header mobilde kompakt */
    .hero-header-wrapper {
        overflow: hidden;
    }

    .hero-header-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Proposal footer butonları mobilde düzgün hizalanma */
    .doc-footer-actions-container .text-right {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .doc-footer-actions-container .text-right .btn {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
        font-size: 13px;
    }

    /* Scroll ipucu - tablo taşıyorsa gölge efekti */
    .docs-main-wrapper .doc-body {
        position: relative;
    }
}