/**
 * Mobile Touch Target Optimization
 * 
 * WCAG 2.1 Level AAA Compliance:
 * - Minimum touch target size: 44×44 CSS pixels
 * - Recommended size: 48×48 CSS pixels
 * - Spacing between targets: 8px minimum
 * 
 * Applied to: Mobile devices (< 768px width)
 * Phase: 3.2 - Touch Target Optimization
 * Date: December 30, 2025
 */

/* ========================================================================
   MOBILE-ONLY SCOPE (< 768px)
   ======================================================================== */

@media (max-width: 767px) {
    
    /* ====================================================================
       1. BUTTONS - Minimum 44px height
       ==================================================================== */
    
    /* Small buttons become full-sized on mobile */
    .btn-sm {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    /* Standard buttons ensure minimum size */
    .btn {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* Large buttons for primary actions */
    .btn-lg {
        min-height: 52px;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    /* Icon-only buttons need explicit sizing */
    .btn > i.fa:only-child,
    .btn > i.fas:only-child,
    .btn > i.far:only-child {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Full-width buttons for forms */
    .modal-footer .btn,
    form .btn-primary,
    form .btn-success {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* ====================================================================
       2. LINKS - Larger click areas
       ==================================================================== */
    
    /* Navigation links */
    .nav-link {
        min-height: 48px;
        padding: 12px 16px !important;
        display: flex;
        align-items: center;
    }
    
    /* Tab navigation */
    .nav-tabs .nav-link {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    /* Pill navigation */
    .nav-pills .nav-link {
        min-height: 48px;
        padding: 12px 20px;
        margin-bottom: 8px;
    }
    
    /* Breadcrumb links */
    .breadcrumb-item a {
        min-height: 44px;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Action links in tables/lists */
    .table td a,
    .list-group-item a {
        min-height: 44px;
        padding: 10px 12px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Icon links need padding */
    a > i.fa:only-child,
    a > i.fas:only-child,
    a > i.far:only-child {
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* ====================================================================
       3. FORM INPUTS - Comfortable sizing
       ==================================================================== */
    
    /* Text inputs */
    .form-control,
    .form-select {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* Small form controls become standard size */
    .form-control-sm,
    .form-select-sm {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Textarea comfortable sizing */
    textarea.form-control {
        min-height: 120px;
        font-size: 16px;
    }
    
    /* ====================================================================
       4. CHECKBOXES & RADIOS - Larger hit areas
       ==================================================================== */
    
    /* Larger checkboxes */
    input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        min-height: 24px;
        margin-right: 12px;
        cursor: pointer;
    }
    
    /* Larger radios */
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        min-height: 24px;
        margin-right: 12px;
        cursor: pointer;
    }
    
    /* Form check labels with larger click area */
    .form-check-label {
        min-height: 44px;
        padding: 10px 8px;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }
    
    /* Form check wrapper */
    .form-check {
        min-height: 44px;
        padding: 10px 0;
        margin-bottom: 8px;
    }
    
    /* ====================================================================
       5. DROPDOWNS & SELECT BOXES
       ==================================================================== */
    
    /* Dropdown toggle buttons */
    .dropdown-toggle {
        min-height: 48px;
        padding: 12px 20px;
    }
    
    /* Dropdown menu items */
    .dropdown-menu .dropdown-item {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    
    /* Select boxes */
    select.form-select {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px;
    }
    
    /* ====================================================================
       6. PAGINATION - Larger page buttons
       ==================================================================== */
    
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 4px;
    }
    
    /* Pagination spacing */
    .pagination .page-item {
        margin: 4px 2px;
    }
    
    /* ====================================================================
       7. TABLES - Action buttons
       ==================================================================== */
    
    /* Table action buttons */
    .table td .btn {
        min-width: 44px;
        min-height: 44px;
        margin: 4px 2px;
    }
    
    /* Table row actions (edit, delete, etc.) */
    .table .action-buttons a,
    .table .action-buttons button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
    }
    
    /* ====================================================================
       8. LIST GROUPS - Clickable items
       ==================================================================== */
    
    .list-group-item {
        min-height: 56px; /* Slightly larger for content */
        padding: 16px;
    }
    
    .list-group-item-action {
        min-height: 56px;
        padding: 16px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }
    
    /* ====================================================================
       9. CARDS - Interactive cards
       ==================================================================== */
    
    .card.card-hover,
    .card[onclick] {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }
    
    .card-header .btn {
        min-height: 44px;
    }
    
    .card-footer .btn {
        min-height: 44px;
    }
    
    /* ====================================================================
       10. BADGES - Clickable badges
       ==================================================================== */
    
    .badge[onclick],
    .badge.clickable,
    a.badge {
        min-height: 32px;
        min-width: 32px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    /* ====================================================================
       11. MODALS - Mobile-optimized
       ==================================================================== */
    
    /* Modal header close button */
    .modal-header .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
    
    /* Modal footer buttons */
    .modal-footer .btn {
        min-height: 48px;
        flex: 1;
        margin: 4px;
    }
    
    /* ====================================================================
       12. SEARCH & FILTERS
       ==================================================================== */
    
    /* Search input with button */
    .input-group .btn {
        min-width: 48px;
        min-height: 48px;
    }
    
    /* Filter buttons */
    .filter-buttons .btn {
        min-height: 44px;
        margin: 4px;
    }
    
    /* ====================================================================
       13. TOOLTIPS & POPOVERS - Suppress on mobile
       ==================================================================== */
    
    /* Disable tooltips on touch devices (they don't work well) */
    [data-bs-toggle="tooltip"] {
        pointer-events: auto !important;
    }
    
    /* ====================================================================
       14. CUSTOM HORIZON CRM COMPONENTS
       ==================================================================== */
    
    /* Quick action buttons (lead/client detail pages) */
    .quick-actions .btn {
        min-height: 48px;
        min-width: 48px;
        margin: 8px 4px;
    }
    
    /* Email action buttons (Smart Inbox) */
    .email-actions .btn,
    .inbox-actions .btn {
        min-height: 48px;
        padding: 12px 16px;
        margin: 4px;
    }
    
    /* Quote line item actions */
    .quote-line-item .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    
    /* Task checkboxes */
    .task-list .form-check-input {
        width: 28px !important;
        height: 28px !important;
        margin-right: 16px;
    }
    
    /* Appointment time slots */
    .appointment-slot {
        min-height: 56px;
        padding: 12px;
        margin: 8px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }
    
    /* Calendar navigation */
    .calendar-nav .btn {
        min-width: 48px;
        min-height: 48px;
    }
    
    /* ====================================================================
       15. SPACING - Prevent accidental taps
       ==================================================================== */
    
    /* Spacing between adjacent buttons */
    .btn + .btn {
        margin-left: 8px;
    }
    
    /* Vertical spacing for stacked buttons */
    .d-grid .btn + .btn {
        margin-left: 0;
        margin-top: 8px;
    }
    
    /* List item spacing */
    .list-group-item + .list-group-item {
        border-top-width: 1px;
        margin-top: 2px;
    }
    
    /* Form group spacing */
    .form-group,
    .mb-3 {
        margin-bottom: 16px !important;
    }
    
    /* ====================================================================
       16. TOUCH FEEDBACK - Visual confirmation
       ==================================================================== */
    
    /* Active state for buttons */
    .btn:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
    
    /* Active state for links */
    a:active,
    .nav-link:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
    
    /* Active state for list items */
    .list-group-item-action:active {
        background-color: rgba(0, 0, 0, 0.05);
        transition: background-color 0.1s ease;
    }
    
    /* ====================================================================
       17. ACCESSIBILITY - Tap highlight
       ==================================================================== */
    
    /* Custom tap highlight color (brand blue) */
    a, button, input, select, textarea, .btn, .nav-link, .list-group-item-action {
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
        tap-highlight-color: rgba(37, 99, 235, 0.2);
    }
    
    /* ====================================================================
       18. EDGE CASES - Special handling
       ==================================================================== */
    
    /* Ensure minimum spacing in button groups */
    .btn-group .btn {
        margin: 0 2px;
    }
    
    /* Input group buttons */
    .input-group .btn {
        margin: 0;
    }
    
    /* Navbar toggle (hamburger) */
    .navbar-toggler {
        min-width: 48px;
        min-height: 48px;
        padding: 12px;
    }
    
    /* Close buttons */
    .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
}

/* ========================================================================
   TABLET OPTIMIZATION (768px - 991px)
   ======================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    
    /* Slightly smaller but still comfortable */
    .btn {
        min-height: 44px;
        padding: 10px 18px;
    }
    
    .form-control,
    .form-select {
        min-height: 44px;
        padding: 10px 14px;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ========================================================================
   PRINT - Hide mobile-specific controls
   ======================================================================== */

@media print {
    .mobile-bottom-nav,
    .mobile-menu-overlay,
    .btn-sm,
    [data-bs-toggle] {
        display: none !important;
    }
}