/* ============================================================
   TOUCH-OPTIMIZED CSS - Dokunmatik Ekran Uyumluluğu
   Tüm sayfalar için genel dokunmatik ekran iyileştirmeleri
   ============================================================ */

/* === 1. GLOBAL TOUCH DEFAULTS === */

/* Prevent iOS zoom on input focus (font-size must be >= 16px) */
input, select, textarea {
    font-size: 16px !important;
}

/* Disable double-tap zoom on all interactive elements */
a, button, input, select, textarea, label,
.nav-item, .table-card, .product-item, .category-tab-btn,
.category-sidebar-item, .area-btn, .tab-pill, .pay-method-btn,
.icon-btn, .btn, .m-btn, .settings-nav-item, .settings-toggle,
.order-item-row, .stat-card, .pm-product-card, .pm-btn-edit,
.pm-btn-delete, .act, .pill, .feat-card, .sbtn, .lp-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure all scrollable containers support touch scrolling */
.nav-menu,
.product-section,
.order-section,
.order-summary-list,
.category-sidebar,
.settings-content,
.settings-sidebar,
.settings-nav,
.modal-body,
.xr-table-scroll,
.category-tabs,
#mobileCategoryTabs,
#subCategoryTabs,
#tableFilters,
#tablesGrid,
.grid-layout,
.modern-grid-layout,
.product-list,
.premium-card,
.data-table,
.finance-nav,
.pills,
.feat-row,
.quick-order-layout,
.quick-product-container,
.quick-summary-panel,
[style*="overflow"],
[style*="overflow-x"],
[style*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevent scroll chaining - stops parent from scrolling when child hits boundary */
.product-section,
.order-section,
.order-summary-list,
.category-sidebar,
.modal-body,
.settings-content,
.nav-menu,
.xr-table-scroll {
    overscroll-behavior: contain;
}

/* === 2. TOUCH-FRIENDLY SCROLLBAR BEHAVIOR === */

/* Hide scrollbars on touch devices but keep functionality */
@media (pointer: coarse) {
    /* Thin scrollbar for all scrollable elements */
    * {
        scrollbar-width: thin;
    }
    
    /* Horizontal scroll containers - hide scrollbar completely */
    .category-tabs,
    #mobileCategoryTabs,
    #subCategoryTabs,
    #tableFilters,
    .pills,
    .feat-row,
    .settings-sidebar,
    .finance-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .category-tabs::-webkit-scrollbar,
    #mobileCategoryTabs::-webkit-scrollbar,
    #subCategoryTabs::-webkit-scrollbar,
    #tableFilters::-webkit-scrollbar,
    .pills::-webkit-scrollbar,
    .feat-row::-webkit-scrollbar,
    .settings-sidebar::-webkit-scrollbar,
    .finance-nav::-webkit-scrollbar {
        display: none;
    }
}

/* === 3. TOUCH TARGET SIZES (min 44px) === */

/* All buttons minimum 44px touch target */
button, .btn, .icon-btn, a.nav-item, .m-btn,
.area-btn, .tab-pill, .pay-method-btn,
.category-tab-btn, .category-sidebar-item,
.settings-nav-item, .pm-btn-edit, .pm-btn-delete,
.btn-icon-danger, .sidebar-toggle-btn, .sidebar-close-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Toggle switches - larger touch target */
.settings-toggle {
    min-width: 52px;
    min-height: 32px;
    padding: 4px;
}

/* Checkbox and radio - larger */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* === 4. ACTIVE STATES (replaces hover on touch) === */

/* Touch devices: use :active instead of :hover for visual feedback */
@media (pointer: coarse) {
    /* Disable hover transforms that feel janky on touch */
    .table-card:hover,
    .product-item:hover,
    .stat-card:hover,
    .xr-stat:hover,
    .pm-product-card:hover,
    .lp-bento-card:hover,
    .lp-pricing-card:hover,
    .lp-visual-card:hover {
        transform: none !important;
    }
    
    /* Active press feedback */
    .table-card:active {
        transform: scale(0.98) !important;
        opacity: 0.9;
    }
    
    .product-item:active {
        transform: scale(0.95) !important;
        border-color: var(--accent) !important;
        opacity: 0.85;
    }
    
    .btn:active,
    button:active,
    .m-btn:active,
    .icon-btn:active {
        transform: scale(0.96) !important;
        opacity: 0.85;
    }
    
    .nav-item:active,
    .settings-nav-item:active {
        opacity: 0.7;
    }
    
    .area-btn:active,
    .tab-pill:active,
    .category-tab-btn:active,
    .category-sidebar-item:active {
        transform: scale(0.95) !important;
        opacity: 0.8;
    }
    
    .pay-method-btn:active {
        transform: scale(0.95) !important;
    }
    
    .stat-card:active {
        transform: scale(0.97) !important;
        opacity: 0.9;
    }
    
    .pm-product-card:active {
        transform: scale(0.98) !important;
    }
    
    .order-item-row:active {
        opacity: 0.8;
        background: rgba(0,0,0,0.04);
    }
    
    /* Pill and featured card active */
    .pill:active {
        transform: scale(0.95);
    }
    
    .feat-card:active {
        transform: scale(0.98);
    }
    
    /* Landing page buttons */
    .lp-btn:active {
        transform: scale(0.97) !important;
    }
}

/* === 5. HORIZONTAL SCROLL CONTAINERS - TOUCH DRAG === */

/* Ensure horizontal scroll containers work with touch drag */
.category-tabs,
#mobileCategoryTabs,
#subCategoryTabs,
#tableFilters,
.pills,
.feat-row,
.settings-sidebar,
.finance-nav,
.report-header-actions {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

/* Individual items in horizontal scroll snap */
.category-tab-btn,
.area-btn,
.tab-pill,
.pill,
.feat-card,
.settings-nav-item {
    scroll-snap-align: start;
}

/* === 6. VERTICAL SCROLL CONTAINERS === */

/* Explicit scroll containers need pan-y for vertical touch scroll */
/* NOTE: .main-wrapper is the scroll container (height:100vh, overflow-y:auto in style.css) */
.product-section,
.order-section,
.order-summary-list,
.category-sidebar,
.nav-menu,
.settings-content,
.modal-body,
.xr-table-scroll,
#tablesGrid {
    touch-action: pan-y;
}

/* === 7. MODAL TOUCH IMPROVEMENTS === */

/* Modal on touch devices */
@media (pointer: coarse) {
    .modal {
        /* Prevent background scroll */
        touch-action: none;
    }
    
    .modal-content {
        touch-action: auto;
    }
    
    .modal-body {
        touch-action: pan-y;
    }
    
    /* Close button larger on touch */
    .modal-header .icon-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}

/* === 8. TABLE/DATA TOUCH SCROLLING === */

/* Horizontal scroll for tables on touch */
.premium-card,
[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.data-table,
.settings-table,
.payment-methods-table,
.xr-table {
    touch-action: pan-x pan-y;
}

/* === 9. PREVENT TEXT SELECTION ON INTERACTIVE ELEMENTS === */

@media (pointer: coarse) {
    button, .btn, .nav-item, .table-card, .product-item,
    .area-btn, .tab-pill, .category-tab-btn, .category-sidebar-item,
    .pay-method-btn, .icon-btn, .m-btn, .settings-nav-item,
    .stat-card, .act, .pill, .feat-card, .sbtn, .lp-btn {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* === 10. SAFE AREA INSETS (Notched devices) === */

@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .sidebar {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    
    .modal {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .order-section {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* === 11. TOUCH DEVICE - GENERAL IMPROVEMENTS === */

@media (pointer: coarse) {
    /* Faster transitions on touch (no hover delay) */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Improve scroll performance with hardware acceleration */
    /* Note: translateZ creates a new stacking/scrolling context - only use on actual scroll containers */
    .product-list,
    .order-summary-list,
    .nav-menu,
    #tablesGrid,
    .category-tabs {
        will-change: scroll-position;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* Larger gap between items for easier touch targeting */
    .grid-layout {
        gap: 14px;
    }
    
    .product-list {
        gap: 10px;
    }
    
    /* Order items - easier to tap */
    .order-item-row {
        padding: 14px;
        margin-bottom: 8px;
    }
    
    /* Settings rows - bigger touch area */
    .settings-row {
        padding: 16px 0;
        min-height: 52px;
    }
    
    /* Settings sidebar items - bigger touch area */
    .settings-sidebar .settings-nav-item {
        padding: 16px 24px;
        min-height: 48px;
    }
    
    /* Nav items taller */
    .nav-item {
        padding: 14px 16px;
        min-height: 48px;
    }
    
    /* Search bar input - bigger */
    .search-bar {
        min-height: 44px;
    }
    
    .search-bar input {
        min-height: 36px;
    }
    
    /* Select dropdowns */
    select, .settings-select {
        min-height: 44px;
        padding: 10px 14px;
    }
    
    /* Input fields */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    .settings-input,
    .login-input {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Slider - bigger thumb for touch */
    .settings-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }
    
    .settings-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }
    
    /* Toggle switch - easier to tap */
    .settings-toggle {
        width: 52px;
        height: 28px;
    }
    
    .settings-toggle .toggle-slider:before {
        width: 22px;
        height: 22px;
    }
    
    .settings-toggle input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }
}

/* === 12. TOUCH DEVICE - TABLET SPECIFIC (768px - 1366px) === */

@media (pointer: coarse) and (min-width: 768px) {
    /* Category sidebar items - bigger */
    .category-sidebar-item {
        padding: 14px 16px;
        min-height: 48px;
        font-size: 0.88rem;
    }
    
    /* Product items slightly larger */
    .product-item {
        min-height: 120px;
    }
    
    /* Order buttons grid - more spacing */
    .order-section > div:last-child {
        gap: 14px;
    }
    
    /* Area filter buttons */
    .area-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        min-height: 44px;
    }
    
    /* Payment method buttons */
    .pay-method-btn {
        min-height: 52px;
        font-size: 0.9rem;
    }
    
    /* Table cards - bigger touch target */
    .m-btn {
        min-height: 44px;
        padding: 12px 10px;
        font-size: 0.8rem;
    }
}

/* === 13. PREVENT BODY BOUNCE ON iOS === */

html {
    overscroll-behavior: none;
}

body {
    overscroll-behavior-y: contain;
}

/* When modal is open, lock body scroll completely */
/* Note: position:fixed is handled by JS (_lockBodyScroll) to preserve scroll position */
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
}

/* === 14. SMOOTH MOMENTUM SCROLLING === */

/* Enable momentum scrolling (iOS rubber-band effect) */
.product-section,
.order-section,
.order-summary-list,
.nav-menu,
.settings-content,
.category-sidebar,
.modal-body,
.main-wrapper {
    -webkit-overflow-scrolling: touch;
}

/* === 15. TOUCH-FRIENDLY LOGIN PAGE === */

@media (pointer: coarse) {
    .login-input {
        min-height: 52px;
        font-size: 16px !important;
    }
    
    .login-btn {
        min-height: 52px;
        font-size: 1rem;
    }
    
    .login-remember {
        min-height: 44px;
        padding: 8px 0;
    }
    
    .login-remember input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/* === 16. KITCHEN VIEW TOUCH === */

@media (pointer: coarse) {
    #kitchenView .premium-card,
    #kitchenView .order-item-row {
        min-height: 48px;
    }
}

/* === 17. REPORT VIEW TOUCH === */

@media (pointer: coarse) {
    .report-header-actions {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .report-header-actions .btn {
        min-height: 48px;
        min-width: 120px;
    }
    
    .xr-stat {
        min-height: 80px;
    }
}

/* === 18. FINANCE VIEW TOUCH === */

@media (pointer: coarse) {
    .finance-nav .nav-item {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* === 19. CONTEXT MENU PREVENTION === */

@media (pointer: coarse) {
    /* Prevent long-press context menu on interactive elements */
    button, .btn, .nav-item, .table-card, .product-item, .m-btn,
    .icon-btn, .area-btn, .tab-pill, img {
        -webkit-touch-callout: none;
    }
}

/* === 20. TOUCH-FRIENDLY CONFIRM/ALERT MODALS === */

@media (pointer: coarse) {
    .confirm-modal .modal-content {
        min-width: 300px;
    }
    
    .confirm-modal .btn {
        min-height: 52px;
        font-size: 1rem;
    }
}