/**
 * Mobile & Responsive Utilities
 * corporate-theme.css ile birlikte çalışır.
 * !important kullanımı minimuma indirildi.
 */

/* ============================================
   MOBILE BASE (< 768px)
   ============================================ */
@media (max-width: 767px) {

    /* Content padding */
    .content-corporate {
        padding: 10px;
        padding-bottom: 76px; /* bottom nav */
    }

    /* Grid — tek kolon */
    .grid-corporate {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr;
    }

    /* Typography */
    h1, .h1 { font-size: 1.1rem; }
    h2, .h2 { font-size: 0.95rem; }

    /* Yardımcı */
    .hide-on-mobile { display: none; }

    /* Topbar */
    .topbar-corporate {
        padding: 0 10px;
    }

    .topbar-right .btn-text,
    .topbar-right .d-none-xs {
        display: none;
    }
}

/* ============================================
   BODY BOTTOM PADDING (mobile)
   ============================================ */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
}

/* ============================================
   TABLOLAR — yatay kaydırma
   ============================================ */
@media (max-width: 767px) {
    .table-responsive,
    .table-responsive-corporate {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--r-lg, 8px);
    }

    .table-corporate th,
    .table-corporate td,
    .table th,
    .table td {
        white-space: nowrap;
        font-size: 12px;
        padding: 7px 10px;
    }

    /* Tablo aksiyon butonları — sıkıştır */
    .table-corporate td:last-child .d-flex,
    .table td:last-child .d-flex {
        flex-wrap: nowrap;
        gap: 2px;
    }
}

/* ============================================
   FORMLAR — tam genişlik
   ============================================ */
@media (max-width: 767px) {
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .form-select,
    .form-control,
    .form-input-corporate,
    .form-select-corporate {
        font-size: 14px; /* iOS zoom önleme: ≥ 16px gerekmez, 14px yeter */
    }
}

/* ============================================
   MODALS — tam ekran (≤ 576px)
   ============================================ */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: calc(100dvh - var(--bottom-nav-h, 60px));
        max-height: calc(100dvh - var(--bottom-nav-h, 60px));
        display: flex;
        flex-direction: column;
        align-self: flex-start;
    }

    .modal-content {
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header { flex-shrink: 0; }

    .modal-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: var(--bg-elevated);
        z-index: 1055;
        padding: 10px 14px;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .modal-footer .btn { flex: 1; margin: 0; }

    /* Modal backdrop alt nava değmesin */
    .modal-backdrop {
        bottom: var(--bottom-nav-h, 60px);
    }

    /* WhatsApp textarea */
    .modal-body textarea#whatsapp-message {
        min-height: 100px;
        max-height: 180px;
    }
}

/* ============================================
   STAT KARTLAR — 2'li grid (mobile)
   ============================================ */
@media (max-width: 767px) {
    .row.g-2 .col-md-3,
    .row.g-2 .col-md-4,
    .row.g-3 .col-md-3,
    .row.g-3 .col-md-4 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Stat kartlar grid'i */
    .grid-corporate.grid-cols-5,
    .grid-corporate.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card-corporate {
        padding: 10px 12px;
        gap: 8px;
    }

    .stat-icon-corporate {
        width: 32px;
        height: 32px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .stat-card-label,
    .stat-label {
        font-size: 10px;
    }

    .stat-card-value,
    .stat-value {
        font-size: 17px;
    }
}

@media (max-width: 420px) {
    /* Stat kartlar tek kolon (çok küçük ekran) */
    .grid-corporate.grid-cols-5,
    .grid-corporate.grid-cols-4,
    .grid-corporate.grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .row.g-2 .col-md-3,
    .row.g-3 .col-md-3 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   DASHBOARD — Bugünkü durum mini grid
   ============================================ */
@media (max-width: 480px) {
    div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MÜŞTERI LISTESI
   ============================================ */
@media (max-width: 767px) {
    .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        gap: 6px;
    }

    .filter-btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .customer-meta {
        flex-direction: column;
        gap: 4px;
    }

    /* Gizlenecek sütun */
    #customersTable th:nth-child(4),
    #customersTable td:nth-child(4) { display: none; }
}

/* ============================================
   MÜŞTERİ DETAY SAYFASI
   ============================================ */
@media (max-width: 767px) {
    /* Info kartlar 2'li */
    .row.g-3 > .col-md-3 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .info-card-compact { padding: 8px 10px; }
    .info-card-value   { font-size: 13px; }

    /* Stepper */
    .stepper-wrapper {
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
    }

    .stepper-item {
        flex: 0 0 calc(33.33% - 6px);
        min-width: 60px;
    }

    /* Bağlantı çizgisi mobilde kaldır */
    .stepper-item::after { display: none; }

    .step-name { font-size: 9px; }

    .contact-value {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 13px;
    }

    /* Fotoğraf galeri 2'li */
    .photo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .row.g-3 > .col-md-3 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .stepper-item {
        flex: 0 0 calc(50% - 6px);
    }
}

/* ============================================
   KANBAN — Mobil
   ============================================ */
@media (max-width: 900px) {
    .kanban-container {
        display: block;
        min-width: 0;
        padding: 0;
        min-height: unset;
    }

    .kanban-column { display: none; border-radius: 0; }
    .kanban-column.active { display: flex; width: 100%; border-radius: 0; }
}

/* ============================================
   POS SATIŞ
   ============================================ */
@media (max-width: 767px) {
    .pos-container {
        flex-direction: column;
        height: auto;
    }

    .pos-left,
    .pos-right {
        width: 100%;
        height: auto;
        min-height: unset;
        border-right: none;
    }

    .pos-right { border-top: 1px solid var(--border); }

    .product-list { max-height: 260px; }
}

/* ============================================
   STOK (INVENTORY)
   ============================================ */
@media (max-width: 767px) {
    .row.g-3 > [class*="col-md-"] {
        width: 100%;
    }

    .inv-box .d-flex,
    #filterForm.d-flex {
        flex-wrap: wrap;
        gap: 6px;
    }

    .grid-corporate.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .inventory-table .d-none-mobile { display: none; }

    #filterForm input[name="search"] { width: 100%; }
}

/* ============================================
   FATURA / TEKLİF OLUŞTUR
   ============================================ */
@media (max-width: 767px) {
    .invoice-item-row { flex-direction: column; gap: 6px; }
    .invoice-totals { width: 100%; }
}

/* ============================================
   LOGIN
   ============================================ */
@media (max-width: 480px) {
    .login-container { padding: 20px; }
}

/* ============================================
   PUBLIC SORGU SAYFASI
   ============================================ */
@media (max-width: 767px) {
    .tracking-card  { padding: 16px; }
    .tracking-steps { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================
   DESKTOP BÜYÜK EKRAN (1280px+)
   ============================================ */
@media (min-width: 1280px) {
    .content-corporate {
        padding: 20px;
    }
}

/* ============================================
   GAP YARDIMCI (mobil override)
   ============================================ */
@media (max-width: 767px) {
    .gap-2 { gap: 6px; }
    .gap-3 { gap: 8px; }
    .mb-6  { margin-bottom: 14px; }
}