/**
 * iOS WebKit Fixes for WKWebView
 *
 * Fixes button/touch interaction issues on iOS app
 * Issue: Many buttons appear "useless" on iOS - don't respond to taps
 *
 * Root Causes:
 * 1. Missing tap highlight feedback (users can't tell if they tapped)
 * 2. Missing cursor: pointer (iOS interprets as non-clickable)
 * 3. Touch targets below 44px minimum (iOS HIG requirement)
 * 4. 300ms click delay (should use touch events)
 * 5. Double-tap zoom interfering with buttons
 */

/* ============================================================================
 * FIX 1: iOS Tap Highlight (Visual Feedback)
 * ============================================================================
 * ISSUE: iOS doesn't show when user taps - buttons feel broken
 * FIX: Add subtle tap highlight color
 */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

button,
a,
.btn,
[role="button"],
[onclick],
input[type="submit"],
input[type="button"],
label {
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* Primary buttons get stronger highlight */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
 * FIX 2: Cursor Pointer (Clickability Indicator)
 * ============================================================================
 * ISSUE: Missing cursor: pointer makes iOS think element is not interactive
 * FIX: Explicitly mark all interactive elements
 */
button,
a,
.btn,
[role="button"],
[onclick],
.clickable,
.dropdown-toggle,
.nav-link,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
label,
select {
    cursor: pointer !important;
}

/* Ensure disabled elements show not-allowed */
button:disabled,
.btn:disabled,
[disabled] {
    cursor: not-allowed !important;
}

/* ============================================================================
 * FIX 3: Touch Action (Prevent Double-Tap Zoom)
 * ============================================================================
 * ISSUE: Double-tapping buttons triggers zoom instead of action
 * FIX: Disable double-tap zoom on interactive elements
 */
button,
a,
.btn,
[role="button"],
[onclick],
input,
select,
textarea,
label {
    touch-action: manipulation !important;
}

/* ============================================================================
 * FIX 4: Minimum Touch Target Size (44x44px iOS HIG)
 * ============================================================================
 * ISSUE: Buttons below 44px are hard to tap on iOS
 * FIX: Ensure all interactive elements meet minimum size
 */
button,
.btn,
a.btn,
[role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon-only buttons need explicit sizing */
.btn-sm,
button.btn-sm,
.navbar-toggler {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem 0.75rem !important;
}

/* Navbar links */
.nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
}

/* Dropdown items */
.dropdown-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on focus */
}

/* Checkbox and radio need larger tap area */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
    transform: scale(1.3);
}

/* ============================================================================
 * FIX 5: Prevent iOS Form Zoom
 * ============================================================================
 * ISSUE: iOS zooms in when tapping inputs with font-size < 16px
 * FIX: Use 16px minimum for form inputs
 */
@supports (-webkit-touch-callout: none) {
    /* Only apply on iOS */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================================================
 * FIX 6: WebKit Appearance Reset
 * ============================================================================
 * ISSUE: iOS Safari applies its own button styling that can block clicks
 * FIX: Reset appearance while maintaining clickability
 */
button,
input[type="submit"],
input[type="button"],
select {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Re-add appearance for specific controls that need it */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ============================================================================
 * FIX 7: Active State Styling
 * ============================================================================
 * ISSUE: No visual feedback when button is being pressed
 * FIX: Add :active state styling
 */
button:active,
.btn:active,
a:active,
[role="button"]:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
    transition: all 0.1s ease !important;
}

/* ============================================================================
 * FIX 8: Dropdown Menu Touch Issues
 * ============================================================================
 * ISSUE: Bootstrap dropdowns don't always open on iOS
 * FIX: Increase touch target and ensure proper event handling
 */
.dropdown-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.15) !important;
    touch-action: manipulation !important;
}

.dropdown-toggle::after {
    pointer-events: none !important; /* Arrow doesn't intercept clicks */
}

.dropdown-menu {
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling */
}

/* ============================================================================
 * FIX 9: Modal Backdrop Touch Issues
 * ============================================================================
 * ISSUE: Modal backdrops might not be tappable to close
 * FIX: Ensure proper z-index and pointer events
 */
.modal-backdrop {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================================
 * FIX 10: Link Underline/Text Selection
 * ============================================================================
 * ISSUE: Long press on links triggers text selection instead of action
 * FIX: Disable user-select on interactive elements
 */
button,
a,
.btn,
[role="button"] {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* But allow selection in text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* ============================================================================
 * FIX 11: Password Toggle Button (Eye Icon)
 * ============================================================================
 * ISSUE: Password visibility toggle button doesn't work on iOS
 * FIX: Ensure proper sizing and clickability
 */
.password-toggle,
button[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* ============================================================================
 * FIX 12: OAuth Buttons (Google, Microsoft)
 * ============================================================================
 * ISSUE: OAuth login buttons don't respond to taps
 * FIX: Ensure proper sizing and remove any pointer-events blocks
 */
.btn-oauth,
.btn-google,
.btn-microsoft {
    min-height: 48px !important; /* Extra height for important actions */
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

.btn-oauth svg,
.oauth-icon {
    pointer-events: none !important; /* Don't block parent click */
}

/* ============================================================================
 * FIX 13: Language Selector
 * ============================================================================
 * ISSUE: Language dropdown doesn't open on iOS
 * FIX: Proper sizing and iOS-specific fixes
 */
#languageSelect,
select.form-select {
    min-height: 44px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    /* Removed: -webkit-appearance: menulist - caused double dropdown arrows */
}

/* ============================================================================
 * FIX 14: Tenant Switcher Modal Trigger
 * ============================================================================
 * ISSUE: Tenant switcher button doesn't open modal
 * FIX: Ensure button is properly sized and clickable
 */
button[data-bs-toggle="modal"] {
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* ============================================================================
 * FIX 15: ZKONG Status Badge (Clickable Indicator)
 * ============================================================================
 * ISSUE: ZKONG status indicator doesn't respond when clicked
 * FIX: Ensure proper sizing and cursor
 */
.zkong-status-badge,
#zkong-status-indicator {
    min-height: 44px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.1) !important;
    pointer-events: auto !important;
}

.zkong-status-badge * {
    pointer-events: none !important; /* Children don't block parent click */
}

/* ============================================================================
 * FIX 16: Table Row Click Issues
 * ============================================================================
 * ISSUE: Clickable table rows don't respond
 * FIX: Proper cursor and touch handling
 */
tr[onclick],
.table-row-clickable {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.05) !important;
}

/* ============================================================================
 * FIX 17: Navbar Hamburger Toggle
 * ============================================================================
 * ISSUE: Mobile menu toggle doesn't work
 * FIX: Ensure proper sizing and clickability
 */
.navbar-toggler {
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

.navbar-toggler-icon {
    pointer-events: none !important; /* Don't block parent click */
}

/* ============================================================================
 * FIX 18: Form Submit Buttons
 * ============================================================================
 * ISSUE: Form submit buttons don't submit
 * FIX: Ensure proper styling and no pointer blocks
 */
button[type="submit"],
input[type="submit"] {
    min-height: 44px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
 * FIX 19: Card Click Areas
 * ============================================================================
 * ISSUE: Clickable cards don't respond
 * FIX: Ensure proper sizing and cursor
 */
.card[onclick],
.clickable-card,
a.card {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.05) !important;
}

/* ============================================================================
 * FIX 20: iOS Safe Area Support
 * ============================================================================
 * ISSUE: Buttons hidden behind notch/home indicator
 * FIX: Add padding for safe areas
 */
@supports (-webkit-touch-callout: none) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ============================================================================
 * DEBUGGING: Visual Indicator for Clickable Elements
 * ============================================================================
 * Uncomment to see which elements are properly marked as clickable
 */
/*
button:not(:disabled),
a:not([href=""]),
.btn:not(:disabled),
[onclick],
[role="button"] {
    outline: 2px dashed green !important;
    outline-offset: 2px;
}

button:disabled,
.btn:disabled {
    outline: 2px dashed red !important;
}
*/