/* Mobile Improvements - Touch targets, spacing, and advanced features */

/* 1. Ensure all buttons meet 44x44px minimum touch target */
@media (max-width: 768px) {
    /* All buttons should have minimum touch target size */
    button, 
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    [role="button"],
    .btn-sm,
    .btn-xs,
    .btn-mini {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Override Bootstrap small button classes */
    .btn-sm {
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Small icon buttons need special handling */
    .btn-icon,
    button.close,
    .modal-close,
    .btn-close,
    .icon-button {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    /* Checkbox and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        /* Add invisible padding for touch target */
        position: relative;
        margin: 10px !important;
    }
    
    input[type="checkbox"]::before,
    input[type="radio"]::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: 44px;
        height: 44px;
        cursor: pointer;
    }
    
    /* Links that act as buttons */
    a[role="button"],
    .nav-link,
    .dropdown-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }
}

/* 2. Add more padding between interactive elements */
@media (max-width: 768px) {
    /* Form groups */
    .form-group,
    .option-group,
    .input-group {
        margin-bottom: 20px !important;
    }
    
    /* Consecutive buttons */
    button + button,
    .btn + .btn,
    a.btn + a.btn {
        margin-left: 12px !important;
    }
    
    /* List items with interactive elements */
    .job-card,
    .job-row,
    .list-item {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Navigation items */
    .nav-item {
        margin: 0 8px !important;
    }
    
    /* Cards and sections */
    .card,
    .section,
    .panel {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Table cells with buttons */
    td button,
    td .btn {
        margin: 4px !important;
    }
}

/* 3. Swipe gesture support preparation */
.swipeable {
    touch-action: pan-y !important; /* Allow vertical scroll, detect horizontal swipe */
    -webkit-user-select: none;
    user-select: none;
}

.swipe-container {
    overflow-x: hidden;
    position: relative;
}

.swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.swiped .swipe-actions {
    transform: translateX(0);
}

/* Navigation drawer for swipe */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: var(--bg-primary, #fff);
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.open {
    transform: translateX(280px);
}

/* 4. Pull to refresh styles */
.pull-to-refresh-container {
    position: relative;
    overflow: hidden;
}

.pull-to-refresh {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.3s ease;
}

.pull-to-refresh.pulling {
    top: 20px;
}

.pull-to-refresh.refreshing {
    top: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

.pull-to-refresh-icon {
    width: 24px;
    height: 24px;
    fill: var(--primary-color, #007bff);
}

/* 5. Offline support styles */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff6b6b;
    color: white;
    padding: 12px;
    text-align: center;
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    font-size: 14px;
}

.offline-banner.show {
    transform: translateY(0);
}

.offline-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Offline state for cards */
.offline-mode .job-card,
.offline-mode .card {
    opacity: 0.7;
    position: relative;
}

.offline-mode .job-card::after,
.offline-mode .card::after {
    content: 'Offline';
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff6b6b;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* 6. PWA install prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    transform: translateY(150%);
    transition: transform 0.3s ease;
}

.pwa-install-prompt.show {
    transform: translateY(0);
}

.pwa-install-prompt h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.pwa-install-prompt p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #666;
}

.pwa-install-buttons {
    display: flex;
    gap: 12px;
}

.pwa-install-buttons button {
    flex: 1;
}

/* 7. iOS Safe Area Support */
@supports (padding: max(0px)) {
    .mobile-nav-drawer,
    .offline-banner,
    .pwa-install-prompt {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    .mobile-nav-drawer {
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* 8. Improved touch feedback */
@media (hover: none) and (pointer: coarse) {
    button:active,
    .btn:active,
    a:active,
    .touchable:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    /* Ripple effect for Material Design-like feedback */
    .ripple {
        position: relative;
        overflow: hidden;
    }
    
    .ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .ripple:active::after {
        width: 300px;
        height: 300px;
    }
}

/* 9. Landscape mode optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .main-container {
        padding-top: 10px !important;
    }
    
    .nav-framer {
        padding: 8px 16px !important;
    }
    
    /* Reduce vertical spacing in landscape */
    .form-group,
    .card {
        margin-bottom: 12px !important;
    }
}

/* 10. Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Focus indicators */
    *:focus {
        outline: 3px solid var(--primary-color, #007bff) !important;
        outline-offset: 2px !important;
    }
    
    /* Skip links */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--primary-color, #007bff);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 0 0 4px 0;
        z-index: 10001;
    }
    
    .skip-link:focus {
        top: 0;
    }
}

/* 11. Performance optimizations */
@media (max-width: 768px) {
    /* Reduce animations for better performance */
    * {
        animation-duration: 0.3s !important;
    }
    
    /* Optimize scrolling */
    .scrollable {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Hardware acceleration for transforms */
    .card,
    .modal,
    .drawer {
        will-change: transform;
    }
}

/* 12. Bottom navigation enhancement */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 1000;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
}

.bottom-nav-item.active {
    color: var(--primary-color, #007bff);
}

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}