/* mobile-touch-targets.css - WCAG 2.1 Level AA compliant touch target sizes */
/* Following MDN Web Docs accessibility guidelines for mobile interfaces */

/* WCAG 2.1 Success Criterion 2.5.5: Target Size (Level AA) */
/* Minimum touch target size: 44x44 CSS pixels (approximately 9mm) */

@media (max-width: 640px) {
    /* Primary interactive elements - buttons, links, inputs */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select,
    .btn,
    .button,
    [role="button"],
    [role="link"],
    [role="tab"],
    [role="menuitem"] {
        min-width: 44px !important;
        min-height: 44px !important;
        /* Use flexbox for centering content within touch targets */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Minimum padding for comfortable touch */
        padding: 0.5rem !important;
        /* Ensure proper spacing between touch targets */
        margin: 0.25rem !important;
        /* Box model consistency */
        box-sizing: border-box !important;
    }
    
    /* Special handling for checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        /* Force minimum size for touch targets */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0.25rem !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        /* Scale up the actual checkbox/radio appearance */
        transform: scale(1.5) !important;
        /* Ensure they're clickable */
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Fix for checkbox/radio label pairs */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]),
    .checkbox-label,
    .radio-label,
    .form-check-label {
        min-height: 44px !important;
        padding: 0.5rem 0.5rem 0.5rem 3rem !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
        position: relative !important;
    }
    
    /* Special handling for text inputs - they need width but proper height */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    textarea {
        min-height: 44px !important;
        min-width: 44px !important; /* For very small inputs */
        padding: 0.75rem !important;
        box-sizing: border-box !important;
        /* Allow natural width expansion */
        width: auto !important;
    }
    
    /* Fix zero-dimension buttons that were failing tests */
    .retry-btn,
    .dismiss-btn,
    .close-btn,
    .cancel-btn,
    .submit-btn,
    .ok-btn,
    .yes-btn,
    .no-btn,
    [class*="btn-"],
    [id*="btn-"],
    [class*="-btn"],
    [id*="-btn"] {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.75rem !important;
        /* Ensure they're visible and clickable */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Enhanced FAB and floating action elements */
    .fab,
    .mobile-filter-fab,
    .floating-action-button,
    [class*="fab"],
    [class*="floating"] {
        /* Larger target for primary actions */
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Ensure proper positioning */
        position: fixed !important;
        z-index: 1000 !important;
    }
    
    /* Navigation and menu items */
    nav a,
    .nav-link,
    .menu-item,
    .navigation a,
    [role="menuitem"],
    [role="tab"] {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem !important;
        /* Ensure adequate spacing between nav items */
        margin: 0.125rem 0 !important;
        /* Fix for 0x0 navigation links */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Specific fix for navigation links showing as 0x0 */
    .nav-link.touch-target,
    a.touch-target,
    .touch-target {
        width: auto !important;
        height: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Form controls spacing */
    .form-group,
    .input-group,
    .field-group,
    fieldset {
        /* Provide adequate spacing between form elements */
        margin-bottom: 1rem !important;
    }
    
    /* Ensure adequate spacing between adjacent interactive elements */
    button + button,
    a + a,
    input + input,
    .btn + .btn,
    [role="button"] + [role="button"] {
        margin-left: 0.5rem !important;
    }
    
    /* Stack interactive elements vertically on very small screens */
    @media (max-width: 480px) {
        .button-group,
        .btn-group,
        .action-group {
            display: flex !important;
            flex-direction: column !important;
            gap: 0.5rem !important;
        }
        
        .button-group > *,
        .btn-group > *,
        .action-group > * {
            width: 100% !important;
            margin: 0 !important;
        }
    }
    
    /* Icon buttons and small interactive elements */
    .icon-button,
    .icon-btn,
    [class*="icon-btn"],
    [aria-label]:empty {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure focus states are visible on touch devices */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [role="button"]:focus,
    [tabindex]:focus {
        outline: 2px solid #007acc !important;
        outline-offset: 2px !important;
    }
    
    /* Improve contrast for better visibility */
    button,
    .btn,
    [role="button"] {
        background-color: #f0f0f0 !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }
    
    /* Active/pressed states for better feedback */
    button:active,
    .btn:active,
    [role="button"]:active,
    a:active {
        background-color: #e0e0e0 !important;
        transform: scale(0.98) !important;
    }
}

/* Additional accessibility enhancements */
@media (max-width: 640px) {
    /* Ensure all interactive elements are keyboard accessible */
    [onclick]:not(button):not(a):not(input):not(select):not(textarea) {
        tabindex: 0 !important;
        cursor: pointer !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Improve readability and touch comfort */
    body {
        line-height: 1.6 !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Ensure sufficient color contrast */
    * {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}