/**
 * ERKULLAR BİLİŞİM - Mobile Fix Override
 * Bu dosya mevcut sayfalara eklenerek mobil uyumluluk sorunlarını giderir.
 * Mevcut inline CSS'leri bozmadan üzerine yazar.
 * Her sayfanın </head> tagından önce eklenmelidir:
 * <link rel="stylesheet" href="sistem/mobile-fix.css">
 */

/* ===== GLOBAL OVERFLOW FIX ===== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* iOS input zoom fix */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ===== NAVBAR MOBILE FIX ===== */
@media (max-width: 991px) {
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100vh !important; height: 100dvh !important;
        background: linear-gradient(180deg, #FAFAFA 0%, #F0F0F5 100%) !important;
        z-index: 9999 !important;
        padding: 5rem 1.25rem 2rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-collapse:not(.show) { display: none !important; }
    .navbar-toggler { position: relative; z-index: 10000 !important; }
    .navbar-brand { position: relative; z-index: 10000 !important; }
}

/* ===== TABLE MOBILE FIX ===== */
@media (max-width: 767.98px) {
    /* Tables that have mobile-card alternatives: hide table */
    .table-card:has(~ #mobileCards),
    .table-card:has(~ .mobile-cards-container) {
        display: none !important;
    }

    /* Tables WITHOUT mobile-card alternatives: make scrollable */
    .table-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px !important;
    }
    .table-card .table {
        min-width: 550px;
    }
    .table-card .table thead th {
        font-size: 0.65rem !important;
        padding: 0.6rem 0.5rem !important;
        white-space: nowrap !important;
    }
    .table-card .table tbody td {
        font-size: 0.75rem !important;
        padding: 0.6rem 0.5rem !important;
    }

    /* Bootstrap table-responsive fix */
    .table-responsive {
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.06);
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile cards: show */
    .mobile-card { display: block !important; }

    /* Scroll hint for tables */
    .table-scroll-hint {
        display: block !important;
        text-align: center;
        padding: 0.4rem;
        font-size: 0.65rem;
        color: #8E8E93;
        font-weight: 600;
        background: #F5F5F7;
    }
}

@media (min-width: 768px) {
    .mobile-card { display: none !important; }
    .table-scroll-hint { display: none !important; }
}

/* ===== FORM MOBILE FIX ===== */
@media (max-width: 767.98px) {
    .form-row,
    .row.g-3,
    .row.g-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .form-card {
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    .form-actions,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-direction: column !important;
    }

    .form-actions .btn,
    .form-actions button {
        width: 100% !important;
    }

    /* Input groups */
    .input-group {
        flex-wrap: nowrap !important;
    }
}

/* ===== STATS MOBILE FIX ===== */
@media (max-width: 575.98px) {
    .stats-container {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .stat-card {
        padding: 0.875rem !important;
    }
    .stat-icon {
        width: 42px !important; height: 42px !important;
        font-size: 1.1rem !important;
        border-radius: 11px !important;
    }
    .stat-content h3 { font-size: 1.25rem !important; }
    .stat-content p { font-size: 0.65rem !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
}

/* ===== PAGE HEADER MOBILE FIX ===== */
@media (max-width: 767.98px) {
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .page-header h1 { font-size: 1.3rem !important; }
    .page-header .btn,
    .page-header button {
        width: 100% !important;
    }
}

/* ===== TABS MOBILE FIX ===== */
.service-type-tabs,
.service-tabs,
.nav-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap !important;
}
.service-type-tabs::-webkit-scrollbar,
.service-tabs::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar { display: none; }

.service-type-tab,
.service-tab,
.nav-tabs .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

@media (max-width: 575.98px) {
    .service-type-tab,
    .service-tab {
        padding: 0.6rem 0.875rem !important;
        font-size: 0.78rem !important;
    }
}

/* ===== BUTTON MOBILE FIX ===== */
@media (max-width: 767.98px) {
    .btn-action {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    .btn-action .d-mobile-none,
    .btn-action .btn-text-desktop { display: none; }
}

/* ===== MODAL MOBILE FIX ===== */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-content {
        border-radius: 16px !important;
    }
    .modal-body { padding: 1rem !important; }
    .modal-header { padding: 0.875rem 1rem !important; }
    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-direction: column !important;
        gap: 0.5rem;
    }
    .modal-footer .btn { width: 100% !important; }
}

/* ===== PAGINATION MOBILE FIX ===== */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap !important;
        gap: 0.2rem !important;
    }
    .page-link {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== CARD GRID MOBILE FIX ===== */
@media (max-width: 767.98px) {
    .mobile-card-body {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem 0.6rem !important;
    }
    .mobile-card-item.full {
        grid-column: 1 / -1 !important;
    }
    .mobile-card-footer .btn {
        width: 100% !important;
    }
}

/* ===== BADGE MOBILE FIX ===== */
@media (max-width: 575.98px) {
    .badge {
        font-size: 0.6rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* ===== FOOTER MOBILE FIX ===== */
@media (max-width: 575.98px) {
    footer {
        padding: 1rem 0 !important;
    }
    footer .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 0.4rem !important;
    }
    .footer-text {
        font-size: 0.7rem !important;
    }
}

/* ===== TOUCH TARGETS ===== */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .form-control, .form-select {
        min-height: 44px !important;
    }
    .nav-link {
        min-height: 44px !important;
    }
    .dropdown-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    a, button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ===== iOS SAFE AREA ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */
*, *::before, *::after {
    max-width: 100%;
}
table { max-width: none; }
img, video, iframe, canvas { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; max-width: 100%; }

/* ===== TABLE SCROLL HINT - Show on mobile ===== */
@media (max-width: 767.98px) {
    .table-scroll-hint {
        display: block !important;
        text-align: center;
        padding: 0.4rem;
        font-size: 0.65rem;
        color: var(--gray-500, #8E8E93);
        font-weight: 600;
        background: #F5F5F7;
        border-top: 1px solid rgba(0,0,0,0.04);
        border-radius: 0 0 16px 16px;
    }
}
@media (min-width: 768px) {
    .table-scroll-hint { display: none !important; }
}