/* ============================================================================
 * MOBILE-FIXES.CSS — CRM Genel Mobil Uyum Düzeltmeleri
 * --------------------------------------------------------------------------
 * Amaç: 871 blade dosyasında 480 yerde text-xs (12px) kullanılan, sabit
 * pixel genişlikli tablolar, küçük tıklama alanları olan mevcut CRM'i mobile-
 * friendly hale getirmek — view'ları tek tek değiştirmeden global override.
 *
 * Yükleme: layouts/app.blade.php (ve diğer layout'lar) içinde @vite ile.
 *
 * Strateji:
 *   1) Mobile-first base font ≥ 14px
 *   2) iOS auto-zoom önle: form input ≥ 16px
 *   3) Tablolar: scroll konteynerli olsun
 *   4) Touch target min 44×44 (Apple HIG, WCAG)
 *   5) Modal: küçük ekranda full-screen
 *   6) text-xs / text-2xs override mobilde
 *   7) Yatay overflow'u engelle (body-level)
 * ========================================================================== */

/* --------- 1. Temel — html/body taban font, smooth font rendering --------- */
html {
    -webkit-text-size-adjust: 100%;          /* iOS auto-resize kapalı */
    text-size-adjust: 100%;
    font-size: 16px;                          /* base — rem hesaplama */
}

body {
    font-size: 1rem;                          /* 16px */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------- 2. Mobil ana kural — 640px ve aşağısı --------- */
@media (max-width: 640px) {

    /* 2.1 — Tüm text-xs / text-2xs okunsun (12px → 13px min) */
    .text-2xs,
    .text-xs {
        font-size: 0.8125rem !important;      /* 13px */
        line-height: 1.25rem !important;
    }

    .text-sm {
        font-size: 0.875rem !important;       /* 14px */
        line-height: 1.375rem !important;
    }

    /* 2.2 — Form input minimum 16px (iOS Safari'de auto-zoom önler!) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 2.3 — Tıklama alanları: WCAG 2.5.5 min 44x44px */
    button:not(.btn-ghost-tiny):not(.tag-close),
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info,
    a.btn,
    [role="button"],
    .badge-button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm,
    .btn-xs {
        min-height: 38px;
        min-width: 38px;
    }

    /* 2.4 — Tablolar — yatay scroll konteynere zorla */
    table {
        font-size: 0.875rem !important;
        min-width: max-content;
    }

    /* Bootstrap responsive tablonun container'ı yoksa, ekle */
    .table-responsive,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
    }

    /* Wrapper'sız raw tablo varsa — kendi içinde scroll alsın */
    table:not(.table-responsive table):not(.overflow-x-auto table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100vw;
    }

    /* 2.5 — Tablo hücresinin içeriği taşmasın */
    table td,
    table th {
        max-width: 240px;
        white-space: normal;
        word-break: break-word;
    }

    /* 2.6 — Modal & dropdown — küçük ekranda full-width veya tam ekran */
    .modal-dialog,
    .modal-xl,
    .modal-lg,
    .modal-md {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        min-height: 100vh;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    /* 2.7 — Container padding mobilde dar */
    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* 2.8 — Card spacing daralt */
    .card-body {
        padding: 0.75rem !important;
    }
    .card-header {
        padding: 0.75rem !important;
    }

    /* 2.9 — Badge'ler taşmasın */
    .badge {
        white-space: normal;
        word-break: break-word;
        display: inline-block;
        max-width: 100%;
    }

    /* 2.10 — Sabit yan menü mobilde gizli, hamburger gerekli (eski sayfalar için) */
    .sidebar:not(.mobile-visible),
    .side-nav:not(.mobile-visible) {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        z-index: 1040;
        transition: left 0.3s;
    }
    .sidebar.mobile-visible,
    .side-nav.mobile-visible {
        left: 0;
    }

    /* 2.11 — Kalın navbar buton/dropdown overflow */
    .navbar .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    /* 2.12 — Form group ve label spacing */
    .form-group {
        margin-bottom: 0.75rem;
    }
    label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    /* 2.13 — Çok kolonlu grid'ler mobilde tek kolon */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    /* Bootstrap row col-md-* */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 2.14 — Long URLs / emails / kelimeler taşmasın */
    p, span, td, th, div, h1, h2, h3, h4, h5, h6, a {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* 2.15 — Üst ek bilgi alanları daralt */
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* 2.16 — Pagination linkleri büyüt */
    .pagination .page-link {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    /* 2.17 — z-index hack'leri (99999) bypass — gerçek modal stack */
    /* (Mevcut hack'leri bozmadan, ama tabletten büyükte normalleştir) */
    #phone-edit-modal,
    #address-edit-modal {
        z-index: 1055 !important;             /* Bootstrap modal default */
    }

    /* 2.18 — Mobilde navbar/header kalın olsun, daha kullanışlı */
    .navbar,
    header.bg-white,
    header.bg-gray-50 {
        padding: 0.5rem 0.75rem !important;
    }
    .navbar-brand img,
    header img {
        max-height: 32px;
    }

    /* 2.19 — Stat/KPI kartları yatay scroll'lu olsun (genelde 4-6 var) */
    .stats-grid,
    .kpi-grid,
    .dashboard-stats {
        display: flex !important;
        overflow-x: auto;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .stats-grid > *,
    .kpi-grid > *,
    .dashboard-stats > * {
        min-width: 75vw;
        flex: 0 0 auto;
    }

    /* 2.20 — Modal body — vertical scroll daima açık */
    .modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* 2.21 — Buton grupları wrap olsun, taşmasın */
    .btn-group,
    .button-group {
        flex-wrap: wrap !important;
        gap: 0.25rem;
    }
    .btn-group > .btn,
    .button-group > button {
        flex: 1 1 auto;
        min-width: max-content;
    }

    /* 2.22 — Modal x-cloak büyüklüğü tüm ekran */
    [x-cloak] {
        display: none !important;
    }

    /* 2.23 — Outbound/Inbound kalabalık tabloda gizli sütun (priority düşük olanlar) */
    .table-hide-mobile,
    .mobile-hide {
        display: none !important;
    }

    /* 2.24 — Pill/badge'ler taşma yerine alta insin */
    .pill-list,
    .tag-list,
    .badge-list {
        flex-wrap: wrap !important;
        gap: 0.25rem;
    }
}

/* --------- 3.5 — Search result corporate badge (hibrit müşteri için) ------- */
.customer-corporate-badge,
.search-corporate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.dark .customer-corporate-badge,
.dark .search-corporate-badge {
    color: #fde68a;
    background: #78350f;
    border-color: #92400e;
}
.customer-corporate-badge i,
.search-corporate-badge i {
    font-size: 10px;
    opacity: 0.8;
}

/* --------- 3.6 — z-index hack'leri (legacy outbound) -------------- */
@media (max-width: 640px) {
    div[style*="z-index: 999999"] {
        z-index: 1055 !important;
    }
    div[style*="z-index: 1000000"] {
        z-index: 1056 !important;
    }
}

/* --------- 3. Tablet aralığı 641-1024 — orta düzeltmeler --------- */
@media (min-width: 641px) and (max-width: 1024px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .text-2xs {
        font-size: 0.75rem !important;
    }
}

/* --------- 4. Genel — tüm ekran boyutlarında uygulanacak iyileştirmeler --- */

/* 4.1 — Yatay scroll'ı body-level engelle (sayfa kayması olmasın) */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 4.2 — Görüntülerin taşmasını engelle */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 4.3 — Pre / code blocks scroll */
pre {
    overflow-x: auto;
    max-width: 100%;
}

/* 4.4 — Erişilebilirlik — focus visible */
*:focus-visible {
    outline: 2px solid var(--primary-color, #3B82F6);
    outline-offset: 2px;
}

/* 4.5 — Touch hareketli element'lere */
.touch-action-pan-x {
    touch-action: pan-x;
}

/* --------- 5. Prefers-reduced-motion (erişilebilirlik) --------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------- 6. Dark mode — küçük ekran için contrast iyileştirme --------- */
@media (max-width: 640px) {
    .dark .text-gray-500,
    .dark .text-muted {
        color: #d1d5db !important;            /* gray-300, daha okunaklı */
    }
    .text-gray-500.text-xs {
        color: #4b5563 !important;            /* gray-600 light mod */
    }
}

/* --------- 7. iOS Safari notch / safe-area --------- */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .navbar-fixed-top,
    .fixed-top {
        padding-top: env(safe-area-inset-top);
    }
    .navbar-fixed-bottom,
    .fixed-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================================================
 * FOSIL TAILWIND TAMAMLAYICI (12.06.2026)
 * public/build CSS'i Aralik'ta uretildi; sonradan view'lara eklenen su
 * utility siniflari fosilde yok. Tailwind v3 birebir esdegerleri:
 * ========================================================================== */
.border-l-red-500{border-left-color:#ef4444}
.border-l-red-600{border-left-color:#dc2626}
.border-l-purple-500{border-left-color:#a855f7}
.border-l-amber-500{border-left-color:#f59e0b}
.border-l-green-500{border-left-color:#22c55e}
.border-l-green-600{border-left-color:#16a34a}
.border-l-orange-500{border-left-color:#f97316}
.border-l-pink-500{border-left-color:#ec4899}
.border-l-teal-500{border-left-color:#14b8a6}
.border-l-gray-400{border-left-color:#9ca3af}
.bg-red-100\/40{background-color:rgb(254 226 226 / 0.4)}
.bg-purple-50\/40{background-color:rgb(250 245 255 / 0.4)}
.bg-green-50\/40{background-color:rgb(240 253 244 / 0.4)}
.bg-blue-50\/40{background-color:rgb(239 246 255 / 0.4)}
.bg-orange-50\/50{background-color:rgb(255 247 237 / 0.5)}
.bg-pink-50\/40{background-color:rgb(253 242 248 / 0.4)}
.bg-teal-50\/40{background-color:rgb(240 253 250 / 0.4)}
.bg-yellow-50\/50{background-color:rgb(254 252 232 / 0.5)}
.bg-gray-100\/50{background-color:rgb(243 244 246 / 0.5)}
.ring-amber-200{--tw-ring-color:#fde68a}
.ring-amber-500{--tw-ring-color:#f59e0b}
.ring-purple-200{--tw-ring-color:#e9d5ff}
.ring-1{box-shadow:0 0 0 1px var(--tw-ring-color,rgb(59 130 246 / 0.5))}