/* ===== SAFARI-SPECIFIC MODAL SCROLLING FIXES ===== */
/* Comprehensive fix for Safari browser modal scrolling issues */

/* ===== SAFARI DETECTION AND BASE FIXES ===== */
/* Target Safari specifically using CSS supports query */
@supports (-webkit-appearance: none) and (not ((-moz-appearance: none) or (-ms-ime-align: auto))) {
  
  /* ===== CORE MODAL STRUCTURE FIXES FOR SAFARI ===== */
  
  /* Fix position fixed issues in Safari */
  .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Prevent Safari scroll bounce */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto; /* Disable touch scrolling which causes issues */
  }

  /* Fix modal dialog positioning for Safari */
  .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 5vh auto !important;
    /* Use viewport units that Safari handles better */
    max-height: 90vh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ===== LARGE MODAL SPECIFIC FIXES ===== */
  
  .modal-large,
  .modal-dialog.modal-large {
    /* Force better flexbox behavior */
    display: flex !important;
    flex-direction: column !important;
    width: 90vw !important;
    max-width: 850px !important;
    min-height: 50vh !important;
    max-height: 90vh !important;
  }

  /* Fix modal body scrolling - the main issue */
  .modal-large .modal-body {
    /* Remove problematic calc() with vh units */
    max-height: none !important;
    height: 100% !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    
    /* Safari-safe scrolling properties */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important; /* Disable touch scrolling */
    overscroll-behavior: auto !important; /* Use default behavior */
    
    /* Force GPU acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
    
    /* Ensure proper layout */
    position: relative;
    z-index: 1;
  }

  /* Fix modal header and footer */
  .modal-large .modal-header,
  .modal-large .modal-footer {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* ===== PORTFOLIO ADD PROJECT MODAL SPECIFIC FIXES ===== */
  
  #addProjectModal .modal-dialog {
    width: 90vw !important;
    max-width: 900px !important;
  }

  #addProjectModal .modal-body {
    /* Specific height for add project modal */
    min-height: 400px !important;
    max-height: 70vh !important;
  }

  /* Fix form sections within scrolling area */
  #addProjectModal .form-section {
    flex-shrink: 0 !important;
    position: relative !important;
  }

  /* ===== VAULT BROWSER MODAL FIXES ===== */
  
  #vaultBrowserModal .modal-dialog,
  #projectMediaModal .modal-dialog {
    width: 95vw !important;
    max-width: 1200px !important;
  }

  /* ===== DROPDOWN POSITIONING FIXES IN MODALS ===== */
  
  .modal .select-items {
    position: fixed !important;
    z-index: 99999 !important;
    /* Prevent dropdown from causing modal scroll issues */
    max-height: 200px !important;
    overflow-y: auto !important;
  }

  /* ===== PREVENT BODY SCROLL WHEN MODAL IS OPEN ===== */
  
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ===== SAFARI SCROLLBAR FIXES ===== */
  
  .modal-body::-webkit-scrollbar {
    width: 14px !important; /* Slightly wider for easier touch interaction */
    background: transparent;
  }

  .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 255, 136, 0.05) !important;
    border-radius: 8px !important;
  }

  .modal-body::-webkit-scrollbar-thumb {
    background: var(--kluxe-green) !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    background-clip: content-box !important;
    min-height: 30px !important;
  }

  .modal-body::-webkit-scrollbar-thumb:hover {
    background: #00cc77 !important;
    background-clip: content-box !important;
  }

  /* ===== RESPONSIVE ADJUSTMENTS FOR SAFARI MOBILE ===== */
  
  @media (max-width: 768px) {
    .modal-dialog {
      margin: 2vh auto !important;
      width: 95vw !important;
      max-height: 95vh !important;
    }

    .modal-large .modal-body {
      max-height: 75vh !important;
      padding: 1rem !important;
    }

    /* Ensure touch scrolling works on mobile Safari */
    .modal-body {
      -webkit-overflow-scrolling: touch !important;
    }
  }

  @media (max-height: 700px) {
    .modal-dialog {
      margin: 1vh auto !important;
      max-height: 98vh !important;
    }

    .modal-large .modal-body {
      max-height: 70vh !important;
    }
  }

  /* ===== IOS SAFARI SPECIFIC FIXES ===== */
  
  @media (max-width: 768px) and (orientation: portrait) {
    .modal {
      /* Account for iOS Safari's dynamic viewport */
      height: 100dvh !important; /* Use dynamic viewport height if supported */
    }

    .modal-dialog {
      max-height: 90dvh !important;
    }
  }
}

/* ===== FALLBACK FOR NON-SAFARI BROWSERS ===== */
/* Ensure the fixes don't break other browsers */
@supports not ((-webkit-appearance: none) and (not ((-moz-appearance: none) or (-ms-ime-align: auto)))) {
  
  /* Maintain existing behavior for non-Safari browsers */
  .modal-large .modal-body {
    max-height: calc(90vh - 240px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus management for Safari */
.modal.active {
  /* Ensure modal content is focusable */
  contain: layout style;
}

.modal-dialog {
  /* Improve focus outline visibility */
  outline: none;
}

.modal-body:focus-within {
  /* Visual indication when modal content has focus */
  box-shadow: inset 0 0 0 2px rgba(0, 255, 136, 0.3);
}

/* ===== ANIMATION FIXES FOR SAFARI ===== */

@supports (-webkit-appearance: none) {
  .modal.active .modal-dialog {
    /* Smoother animations in Safari */
    animation: safariModalSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes safariModalSlide {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===== DEBUGGING AIDS (Remove in production) ===== */

/* Uncomment to debug modal issues visually */
/*
.modal {
  border: 2px solid red !important;
}

.modal-dialog {
  border: 2px solid blue !important;
}

.modal-body {
  border: 2px solid green !important;
}
*/

/* ===== FEATURED WORK MODAL OVERFLOW FIX (ALL BROWSERS, MOBILE) ===== */
@media (max-width: 768px) {
  #projectMediaModal.modal {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  #projectMediaModal .modal-dialog,
  #projectMediaModal .modal-dialog.modal-large {
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #projectMediaModal .modal-header {
    flex-shrink: 0 !important;
  }

  #projectMediaModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }
}