/**
 * Mobile Touch Target Fixes
 * Ensures all interactive elements meet iOS (44x44px) and Android (48x48px) minimum standards
 * Following WCAG 2.1 Level AAA (2.5.5 Target Size)
 */

@media (max-width: 640px) {
    /* CRITICAL: Touch Target Size Fixes for Mobile */
    /* iOS/Android minimum: 44x44px (Apple HIG) / 48x48px (Material Design) */
    
    button:not(.btn-sm):not(.no-min-height),
    a.btn,
    .card-shadow,
    [role="button"] {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Filter chips and category buttons */
    .category-chip,
    button[data-filter],
    button[data-category] {
        padding: 12px 16px !important;
        min-height: 48px !important;
    }
    
    /* 3-dot menu buttons on cards */
    .item-card button,
    button[onclick*="showItemOptions"],
    button[onclick*="editItem"],
    button[onclick*="viewItem"] {
        padding: 12px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Modal action buttons */
    [id*="modal"] button {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* FAB buttons - ensure adequate size (56px recommended for primary actions) */
    .fixed button,
    button.rounded-full,
    a.rounded-full {
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    /* Input fields - proper touch height */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* Checkbox and radio - larger touch area with padding */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        /* Add padding around for easier tapping */
        margin: 12px !important;
    }
    
    /* Label wrapper for checkboxes should have min height too */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Toggle switches */
    .toggle-switch {
        min-width: 56px !important;
        min-height: 32px !important;
        /* Add padding around toggle for easier tapping */
        padding: 8px !important;
    }
    
    /* Link tap targets in lists */
    nav a,
    .nav-link {
        padding: 12px 8px !important;
        min-height: 48px !important;
    }
    
    /* Tab bar and navigation items */
    #filterTabsMobile button,
    #filterTabsDesktop button {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* Card touch targets */
    .item-card,
    .card-shadow {
        cursor: pointer;
    }
    
    /* Search bar voice button */
    #voiceSearchBtn,
    #voiceSearchFAB,
    #voice-btn-smart,
    #addVoiceFAB {
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    /* Settings page toggle containers */
    .flex.items-center.justify-between:has(.toggle-switch) {
        min-height: 64px !important;
        padding: 8px 0 !important;
    }
    
    /* Close buttons in modals */
    button[onclick*="close"],
    button[onclick*="Close"],
    [data-modal-close] {
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    /* Dropdown menu items */
    [role="menu"] button,
    [role="menuitem"],
    .dropdown-menu button,
    .item-options-menu button {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
    
    /* Pagination and load more buttons */
    #loadMoreBtn,
    button[onclick*="loadMore"] {
        min-height: 48px !important;
        padding: 12px 24px !important;
    }
    
    /* Form submit and action buttons */
    form button[type="submit"],
    form button[type="button"],
    .action-buttons button {
        min-height: 48px !important;
        padding: 12px 24px !important;
    }
    
    /* Icon-only buttons need extra padding */
    button:not(:has(span)):not(:has(div)) {
        padding: 14px !important;
    }
    
    /* Spacing between touch targets (minimum 8px recommended) */
    /* REMOVED - These rules were breaking Tailwind's space-y utility classes */
    /* Tailwind handles spacing correctly, no need to override */
    
    /* Bottom action bar (iOS safe area) */
    .fixed.bottom-6 {
        bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }
    
    /* Ensure FAB doesn't overlap with iOS home indicator */
    @supports (padding: max(0px)) {
        .fixed.bottom-6.right-6 {
            bottom: max(24px, calc(20px + env(safe-area-inset-bottom))) !important;
        }
    }
}

/* Desktop: ensure buttons still look good */
@media (min-width: 641px) {
    button,
    a.btn {
        min-height: 40px;
        padding: 10px 16px;
    }
}