/* ========== GLOBAL MOBILE FIX: 100vh sorunu ========== */
:root {
    --app-height: 100vh;
    --bottom-nav-height: 56px;
    --mobile-header-height: 64px;
}

body {
    background-color: #f8fafc;
}

.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Checkbox */
.checkbox-wrapper input:checked+div {
    background-color: #14b8a6;
    border-color: #14b8a6;
}

/* ========== MOBILE RESPONSIVE STYLES ========== */
@media (max-width: 768px) {

    /* Body: mobilde scroll kilidini kaldır */
    body {
        height: var(--app-height) !important;
        overflow: hidden !important;
        width: 100% !important;
        touch-action: manipulation;
    }

    /* Sidebar hidden by default on mobile */
    #sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: var(--app-height);
        z-index: 999;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 280px !important;
        overscroll-behavior: contain;
    }

    #sidebar.mobile-open {
        left: 0;
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Body scroll lock when sidebar/modal open */
    body.sidebar-open,
    body.modal-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Main content full width on mobile */
    #main-content {
        margin-left: 0 !important;
        width: 100% !important;
        height: var(--app-height) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: var(--mobile-header-height) !important;
        padding-bottom: var(--bottom-nav-height) !important;
    }

    /* Mobile header with hamburger */
    #mobile-header {
        display: flex !important;
        height: var(--mobile-header-height);
    }

    /* Content views wrapper - TEK SCROLL ALANI */
    .flex-1.relative.overflow-hidden {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }

    /* HIDDEN OVERRIDE - Tailwind hidden her zaman çalışsın */
    .hidden {
        display: none !important;
    }

    /* TÜM VIEW CONTAINER'LARI - absolute yerine relative */
    #view-shipment,
    #view-delivery,
    #view-finance,
    #view-inventory,
    #view-closing,
    #view-dashboard,
    #view-import,
    #view-broadcast {
        position: relative !important;
        inset: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 0.75rem !important;
        padding-bottom: 1.5rem !important;
        min-height: auto !important;
        height: auto !important;
    }

    /* SHIPMENT PAGE MOBILE FIX - sadece görünürken block */
    #view-shipment:not(.hidden) {
        display: block !important;
    }

    /* Product list section - sadece görünürken */
    #view-shipment:not(.hidden)>div:first-child {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 1rem !important;
    }

    /* Order summary section - sadece görünürken */
    #view-shipment:not(.hidden)>div:last-child {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Stok listesi */
    #product-list-container {
        display: block !important;
        height: auto !important;
        max-height: 300px !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #f8fafc;
        border-radius: 8px;
        padding: 0.5rem;
        touch-action: pan-y;
    }

    /* Her ürün kartı görünür olsun */
    #product-list-container>div {
        display: flex !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hazırlanan siparişler - gizle mobilde */
    #view-shipment .mt-4.border-t {
        display: none !important;
    }

    /* Sepet scroll */
    #cart-items {
        max-height: 250px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Teslimat listeleri */
    #delivery-koli-list,
    #delivery-merkez-list,
    #delivery-palet-list {
        max-height: 50vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Adjust padding for mobile */
    .p-8 {
        padding: 0.75rem !important;
    }

    .p-6 {
        padding: 0.75rem !important;
    }

    /* Grid adjustments */
    .grid-cols-2,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-3:not(#completed-orders-container) {
        grid-template-columns: 1fr !important;
    }

    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Form inputs - touch dostu 44px minimum */
    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important;
        touch-action: manipulation;
    }

    button {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Table responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Smaller text on mobile */
    .text-3xl {
        font-size: 1.5rem !important;
    }

    .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Fixed bottom nav */
    #mobile-bottom-nav {
        display: flex !important;
    }

    /* Desktop header hidden on mobile */
    header.h-16 {
        display: none !important;
    }

    /* Search input smaller on mobile */
    #prod-search,
    #prod-customer-select {
        flex: 1 !important;
        width: auto !important;
    }

    #view-shipment .flex.gap-4.mb-4 {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    /* Modal mobil optimize */
    #modal-overlay > div {
        max-width: 100% !important;
        max-height: calc(var(--app-height) - 2rem) !important;
        margin: 0.5rem !important;
        border-radius: 1rem !important;
    }

    #modal-overlay #modal-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Safe area padding (notch'lu cihazlar) */
    #mobile-header {
        padding-top: env(safe-area-inset-top) !important;
    }

    #mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Hide mobile elements on desktop */
#mobile-header,
#mobile-bottom-nav,
.sidebar-overlay {
    display: none;
}

/* Touch-friendly buttons */
@media (hover: none) {

    button,
    .cursor-pointer {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Bottom Nav Styles */
#mobile-bottom-nav {
    background: white;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    overflow: visible !important;
}

#mobile-bottom-nav button {
    min-height: auto !important;
    height: auto !important;
    font-size: 10px !important;
    transition: color 0.2s, background 0.2s;
    padding: 6px 2px !important;
    line-height: 1.2;
}

#mobile-bottom-nav button.active-nav {
    color: #10b981;
    background: #ecfdf5;
    border-radius: 8px;
}

#mobile-bottom-nav button i {
    font-size: 18px;
    display: block;
    margin-bottom: 2px;
}