/**
 * Mobile Touch Optimization for Modern UI Components
 * Enhances the modern validation, notification, modal, and tooltip systems for mobile devices
 * 
 * Key Features:
 * - Touch-optimized modal interactions
 * - Swipe gesture support
 * - Mobile-specific touch targets
 * - Enhanced mobile notifications
 */

/* CSS Variables for mobile optimization */
:root {
  /* Touch Target Sizes */
  --mobile-touch-target: 44px;
  --mobile-touch-margin: 8px;
  
  /* Mobile Modal Sizing */
  --mobile-modal-margin: 10px;
  --mobile-modal-max-height: calc(100vh - 40px);
  
  /* Mobile Animation Timing */
  --mobile-animation-duration: 0.25s;
  --mobile-swipe-threshold: 50px;
  
  /* Mobile Safe Areas */
  --mobile-safe-area-top: env(safe-area-inset-top, 20px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 20px);
  --mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-safe-area-right: env(safe-area-inset-right, 0px);
}

/* =======================
   MOBILE MODAL OPTIMIZATIONS
   ======================= */

/* Mobile Modal Container */
@media (max-width: 768px) {
  .modal {
    /* Enable touch interactions */
    touch-action: manipulation;
  }
  
  .modal-dialog {
    margin: var(--mobile-modal-margin);
    max-width: calc(100% - 20px);
    max-height: var(--mobile-modal-max-height);
    
    /* Enable smooth transforms for gestures */
    will-change: transform;
    transition: transform var(--mobile-animation-duration) ease-out;
  }
  
  /* Mobile Modal Content */
  .modal-content {
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  /* Mobile Modal Body - Scrollable */
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Touch-Optimized Close Button */
  .modal-header .btn-close,
  .modal-header .close {
    width: var(--mobile-touch-target);
    height: var(--mobile-touch-target);
    margin: var(--mobile-touch-margin);
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Mobile Modal Footer */
  .modal-footer {
    flex-shrink: 0;
    padding: 16px;
    gap: 12px;
    
    /* Stack buttons vertically on small screens */
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
    min-height: var(--mobile-touch-target);
    margin: 0;
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }
}

/* =======================
   SWIPE-TO-DISMISS MODALS
   ======================= */

/* Enable swipe gestures on modals */
@media (max-width: 768px) and (pointer: coarse) {
  .modal-content {
    position: relative;
  }
  
  /* Swipe indicator at top of modal */
  .modal-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #D1D5DB;
    border-radius: 2px;
    z-index: 1;
  }
  
  /* Add padding for swipe indicator */
  .modal-header {
    padding-top: 24px;
  }
  
  /* Swipe animation classes */
  .modal-content.swiping {
    transition: none;
  }
  
  .modal-content.swipe-dismiss {
    transform: translateY(100%);
    transition: transform var(--mobile-animation-duration) ease-out;
  }
}

/* =======================
   MOBILE NOTIFICATION OPTIMIZATIONS  
   ======================= */

/* Mobile-Optimized Notifications */
@media (max-width: 768px) {
  .dmx-notify {
    /* Respect mobile safe areas */
    top: var(--mobile-safe-area-top) !important;
    left: var(--mobile-safe-area-left) !important;
    right: var(--mobile-safe-area-right) !important;
    width: calc(100% - var(--mobile-safe-area-left) - var(--mobile-safe-area-right)) !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
    
    /* Enhanced for touch */
    min-height: var(--mobile-touch-target);
    padding: 16px 20px !important;
    
    /* Swipe gesture support */
    touch-action: pan-x;
    will-change: transform;
  }
  
  /* Notification close button optimization */
  .dmx-notify .btn-close {
    width: var(--mobile-touch-target);
    height: var(--mobile-touch-target);
    margin: -8px -8px -8px 8px;
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Multiple notification stacking for mobile */
  .dmx-notify:nth-child(1) { z-index: 1050; }
  .dmx-notify:nth-child(2) { 
    z-index: 1049; 
    top: calc(var(--mobile-safe-area-top) + 60px) !important;
    transform: scale(0.95);
  }
  .dmx-notify:nth-child(3) { 
    z-index: 1048; 
    top: calc(var(--mobile-safe-area-top) + 120px) !important;
    transform: scale(0.9);
    opacity: 0.8;
  }
}

/* Swipe-to-dismiss notifications */
@media (max-width: 768px) and (pointer: coarse) {
  .dmx-notify.swiping {
    transition: none;
  }
  
  .dmx-notify.swipe-dismiss-left {
    transform: translateX(-100%);
    transition: transform var(--mobile-animation-duration) ease-out;
  }
  
  .dmx-notify.swipe-dismiss-right {
    transform: translateX(100%);
    transition: transform var(--mobile-animation-duration) ease-out;
  }
}

/* =======================
   MOBILE FORM OPTIMIZATIONS
   ======================= */

/* Touch-Optimized Form Fields */
@media (max-width: 768px) {
  .modern-validation-field input,
  .modern-validation-field textarea,
  .modern-validation-field select {
    min-height: var(--mobile-touch-target);
    font-size: 16px; /* Prevents zoom on iOS */
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: rgba(69, 172, 255, 0.1);
  }
  
  /* Mobile form labels */
  .modern-validation-field label {
    font-size: 14px;
    font-weight: 500;
  }
  
  /* Mobile password strength indicator */
  .password-strength-container {
    margin-top: 12px;
  }
  
  .password-strength-bar {
    height: 6px; /* Slightly larger for mobile */
  }
  
  /* Mobile form buttons */
  .btn-modern-success,
  .form-control + .btn {
    min-height: var(--mobile-touch-target);
    font-size: 16px;
    font-weight: 500;
    
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: transparent;
  }
}

/* =======================
   MOBILE TOOLTIP ADAPTATIONS
   ======================= */

/* Mobile Tooltip Behavior */
@media (max-width: 768px) and (pointer: coarse) {
  /* Convert tooltips to tappable info on mobile */
  [data-bs-toggle="tooltip"] {
    position: relative;
  }
  
  /* Add visual indicator for tappable tooltips */
  [data-bs-toggle="tooltip"]::after {
    content: 'ⓘ';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.7;
  }
  
  /* Mobile tooltip styling */
  .tooltip {
    font-size: 14px;
  }
  
  .tooltip-inner {
    max-width: 250px;
    padding: 12px 16px !important;
    line-height: 1.4;
  }
}

/* Mobile Popover Optimizations */
@media (max-width: 768px) {
  .popover {
    max-width: calc(100vw - 40px);
    margin: 20px;
  }
  
  .popover-header {
    padding: 16px 20px !important;
    font-size: 16px !important;
  }
  
  .popover-body {
    padding: 20px !important;
    font-size: 15px;
    line-height: 1.5;
  }
  
  /* Touch-optimized popover close */
  .popover .btn-close {
    width: var(--mobile-touch-target);
    height: var(--mobile-touch-target);
  }
}

/* =======================
   MOBILE ACCESSIBILITY
   ======================= */

/* Enhanced Focus Management for Mobile */
@media (max-width: 768px) {
  /* Larger focus rings for touch devices */
  .modal:focus-within,
  .modern-validation-field input:focus,
  .dmx-notify:focus-within {
    outline: 3px solid #007bff;
    outline-offset: 2px;
  }
  
  /* Skip to content for screen readers */
  .modal .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .modal-content,
    .dmx-notify,
    .tooltip-inner,
    .popover {
      border: 2px solid currentColor;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .modal-dialog,
    .dmx-notify,
    .tooltip,
    .popover {
      transition: none !important;
      animation: none !important;
    }
  }
}

/* =======================
   LANDSCAPE ORIENTATION
   ======================= */

/* Landscape-specific adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .modal-dialog {
    max-height: calc(100vh - 20px);
    margin: 10px auto;
  }
  
  .modal-content {
    max-height: calc(100vh - 20px);
  }
  
  .modal-body {
    max-height: calc(100vh - 120px);
  }
  
  /* Adjust notifications for landscape */
  .dmx-notify {
    top: 10px !important;
    border-radius: 8px !important;
    max-width: 400px !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
  }
}

/* =======================
   PERFORMANCE OPTIMIZATIONS
   ======================= */

/* GPU acceleration for smooth animations */
@media (max-width: 768px) {
  .modal-dialog,
  .dmx-notify,
  .tooltip,
  .popover {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* Optimize scrolling performance */
  .modal-body {
    contain: layout style paint;
    content-visibility: auto;
  }
  
  /* Prevent layout thrashing on touch */
  .modal-content,
  .dmx-notify {
    contain: layout style;
  }
}

/* =======================
   DARK MODE MOBILE ADAPTATIONS
   ======================= */

@media (max-width: 768px) and (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  /* Dark mode swipe indicator */
  .modal-content::before {
    background: #6B7280;
  }
  
  /* Dark mode tooltip indicator */
  [data-bs-toggle="tooltip"]::after {
    background: #374151;
    color: #F9FAFB;
  }
}

/* =======================
   UTILITY CLASSES
   ======================= */

/* Mobile-specific utility classes */
@media (max-width: 768px) {
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-stack-buttons .btn {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
  
  .mobile-touch-target {
    min-height: var(--mobile-touch-target);
    min-width: var(--mobile-touch-target);
  }
}