/* Modal Fixes - Ensure all popups fit within screen
   ================================================== */

/* Base modal overlay - always full screen with scroll */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 1rem !important;
  z-index: 9999 !important;
}

/* Modal container - constrained to viewport */
.modal-overlay .modal {
  max-width: min(900px, calc(100vw - 2rem)) !important;
  max-height: calc(100vh - 2rem) !important;
  width: 100% !important;
  margin: auto !important;
  overflow-y: auto !important;
  position: relative !important;
}

/* Modal content scrollable */
.modal-overlay .modal > div {
  max-height: calc(100vh - 4rem) !important;
  overflow-y: auto !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.5rem !important;
  }

  .modal-overlay .modal {
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    border-radius: 0.75rem !important;
  }

  .modal-overlay .modal > div {
    max-height: calc(100vh - 2rem) !important;
    padding: 1rem !important;
  }

  /* Reduce textarea height on mobile */
  .modal-overlay textarea {
    min-height: 100px !important;
    max-height: 200px !important;
  }
}

/* Small height screens */
@media (max-height: 600px) {
  .modal-overlay .modal {
    max-height: calc(100vh - 1rem) !important;
  }

  .modal-overlay .modal > div {
    max-height: calc(100vh - 2rem) !important;
    padding: 1rem !important;
  }

  .modal-overlay textarea {
    min-height: 80px !important;
    max-height: 150px !important;
  }
}

/* Prevent body scroll when modal is open */
body:has(.modal-overlay.active) {
  overflow: hidden !important;
}

/* Admin modals */
.admin-modal {
  position: fixed !important;
  inset: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 1rem !important;
}

.admin-modal .modal-content {
  max-width: min(800px, calc(100vw - 2rem)) !important;
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  margin: auto !important;
}

/* Card modal specific */
#cardModal .modal {
  max-width: min(900px, calc(100vw - 2rem)) !important;
}

#cardModal .modal-content {
  max-height: calc(100vh - 4rem) !important;
  overflow-y: auto !important;
}

#cardModal .modal-image {
  max-height: min(400px, 40vh) !important;
}

#cardModal .modal-details {
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
}

/* Note modal specific */
.modal-overlay:has(#readingNoteInput) .modal {
  max-width: min(600px, calc(100vw - 2rem)) !important;
}

/* Ensure close button is always visible */
.modal-close {
  position: sticky !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 10 !important;
  float: right !important;
}

/* Fix for very small screens */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 0.25rem !important;
  }

  .modal-overlay .modal {
    max-width: calc(100vw - 0.5rem) !important;
    border-radius: 0.5rem !important;
  }

  .modal-overlay .modal > div {
    padding: 1rem !important;
  }

  .modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
}

/* Landscape mobile */
@media (max-width: 768px) and (max-height: 500px) {
  .modal-overlay .modal {
    max-height: calc(100vh - 0.5rem) !important;
  }

  .modal-overlay .modal > div {
    max-height: calc(100vh - 1rem) !important;
    padding: 0.75rem !important;
  }

  #cardModal .modal-content {
    flex-direction: row !important;
  }

  #cardModal .modal-image {
    max-height: calc(100vh - 2rem) !important;
    flex: 0 0 35% !important;
  }
}

/* Share Modal Specific Fixes */
#shareModal canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

#shareModal #shareImageContainer {
  width: 100% !important;
  display: block !important;
}

#shareModal > div > div {
  max-width: min(700px, calc(100vw - 2rem)) !important;
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  position: relative !important;
}

@media (max-width: 768px) {
  #shareModal > div > div {
    padding: 1.5rem !important;
    padding-top: 3rem !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
  }
}

@media (max-height: 700px) {
  #shareModal canvas {
    max-height: 65vh !important;
  }
}

@media (max-height: 600px) {
  #shareModal canvas {
    max-height: 55vh !important;
  }
}