/* StratSync Mobile UX Enhancements - DaVinci Framework Safe
 * These enhancements preserve all existing DaVinci CSS rules
 * Only adds mobile-specific improvements without overriding core styles
 */

/* Mobile Viewport and Base Settings */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* Touch-Friendly Enhancements (Preserves DaVinci) */
.mobile-touch-friendly {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Minimum Touch Target Sizes - Apple & Google Guidelines */
@media (max-width: 768px) {
    /* Enhance existing buttons without overriding DaVinci styles */
    .btn, 
    .smb-industry-btn, 
    .smb-btn,
    button,
    .nav-link,
    .dropdown-item {
        min-height: 48px !important; /* Apple/Android minimum */
        min-width: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Industry selector mobile optimization */
    .smb-industry-buttons {
        gap: 12px !important;
        padding: 8px !important;
    }
    
    .smb-industry-btn {
        flex: 1 1 auto !important;
        max-width: calc(50% - 6px) !important; /* Two columns on mobile */
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Challenge input mobile enhancement */
    .challenge-input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 16px !important;
        min-height: 56px !important;
    }
    
    .input-group .smb-btn {
        min-height: 56px !important;
        padding: 16px 24px !important;
        white-space: nowrap !important;
    }
}

/* Mobile Navigation Enhancements */
@media (max-width: 768px) {
    /* Bottom navigation for thumb reach - doesn't override DaVinci nav */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(59, 130, 246, 0.2);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: #94a3b8;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        padding: 8px;
        min-width: 48px;
        min-height: 48px;
        transition: all 0.2s ease;
    }
    
    .mobile-nav-item.active,
    .mobile-nav-item:hover {
        color: #3b82f6;
        transform: translateY(-2px);
    }
    
    .mobile-nav-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
}

/* Swipe Gesture Enhancements */
.mobile-swipe-container {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.mobile-swipe-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Mobile Dashboard Card Layout */
@media (max-width: 768px) {
    .mobile-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    
    .mobile-card {
        background: rgba(30, 41, 59, 0.8);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 16px;
        padding: 20px;
        backdrop-filter: blur(10px);
    }
    
    .mobile-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .mobile-card-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }
    
    .mobile-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #e2e8f0;
        margin: 0;
    }
}

/* Mobile Form Enhancements */
@media (max-width: 768px) {
    /* Prevent zoom on form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        transform: translateZ(0); /* Force GPU acceleration */
    }
    
    /* Large tap targets for form controls */
    .form-control,
    .form-select {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Radio buttons and checkboxes */
    .form-check-input {
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    .form-check-label {
        padding-left: 8px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Mobile Loading States - Non-intrusive */
@media (max-width: 768px) {
    /* Replace spinning FAB callouts with subtle mobile indicators */
    .fab-callouts-container {
        display: none !important; /* Hide on mobile to reduce cognitive load */
    }
    
    /* Mobile-friendly loading indicator */
    .mobile-loading-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(59, 130, 246, 0.1);
        border: 2px solid rgba(59, 130, 246, 0.3);
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: mobile-spin 1s linear infinite;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .mobile-loading-indicator.active {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes mobile-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Typography Adjustments */
@media (max-width: 768px) {
    /* Improve readability without breaking DaVinci typography */
    .mobile-readable {
        line-height: 1.6 !important;
        letter-spacing: 0.01em !important;
    }
    
    /* Larger tap targets for text links */
    a:not(.btn) {
        display: inline-block;
        min-height: 44px;
        padding: 8px 4px;
        display: flex;
        align-items: center;
    }
}

/* Pull-to-refresh Enhancement */
.mobile-pull-to-refresh {
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.mobile-pull-indicator {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 18px;
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-pull-indicator.active {
    opacity: 1;
    top: 10px;
}

/* Safe Area Adjustments for iPhone */
@supports(padding: max(0px)) {
    .mobile-safe-area-top {
        padding-top: max(20px, env(safe-area-inset-top));
    }
    
    .mobile-safe-area-bottom {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .mobile-card {
        background: rgba(15, 23, 42, 0.9);
        border-color: rgba(59, 130, 246, 0.3);
    }
    
    .mobile-bottom-nav {
        background: rgba(15, 23, 42, 0.98);
    }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .mobile-loading-indicator,
    .mobile-nav-item,
    .mobile-card {
        animation: none !important;
        transition: none !important;
    }
}

/* Landscape Orientation Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .smb-industry-buttons {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .smb-industry-btn {
        max-width: calc(25% - 8px) !important; /* Four columns in landscape */
    }
    
    .mobile-bottom-nav {
        height: 56px; /* Smaller in landscape */
    }
}

/* High-DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mobile-card-icon,
    .mobile-nav-icon {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}