/*
 * UNIVERSAL MODAL SYSTEM (2024)
 * - .modal-overlay: dimmed background, always present, sits behind all modals
 * - .modal-base: base class for all modals (appearance, shadow, border, etc.)
 *
 * All modal-related appearance and interactivity is managed here.
 *
 * To update modal dimming, opacity, or click behavior, edit this file only.
 */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1050;
  pointer-events: auto;
  transition: opacity 0.2s;
}
.modal-overlay.active {
  display: block;
  opacity: 1;
}

.credential-modal,
.credential-modal * {
  direction: ltr !important;
  text-align: left !important;
}

/* Base modal appearance for all modals */
.modal-base,
.modal-content,
.edit-study-modal-content,
.edit-review-modal-content,
.edit-post-modal-content,
.add-post-modal-content,
.add-review-modal-content,
.add-study-modal-content,
.edit-publication-modal-content,
.add-publication-modal-content {
  background: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
  border-radius: 12px;
  z-index: 1055 !important;
  position: relative;
}

/* REMOVED: All problematic modal positioning and pointer-events fixes */

@media (prefers-color-scheme: dark) {
  .modal-base,
  .modal-content {
    background: #1e293b !important;
    color: #f1f5f9 !important;
  }

  /* Modal header/footer border and shadow */
  .modal-header, .modal-footer {
    border-color: #334155 !important;
  }
}

/* Ensure modal is always above overlay */
.modal.show {
  z-index: 1055 !important;
}

/* Prevent background interaction when modal is open */
body.modal-open #modal-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
  z-index: 1050 !important;
}
body:not(.modal-open) #modal-overlay {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* CRITICAL: Ensure modal-overlay doesn't block modals with higher z-index */
body.modal-open #modal-overlay {
  pointer-events: auto;
}

/* CRITICAL: Hide modal-overlay when preVerificationModal is shown */
#preVerificationModal.show ~ #modal-overlay,
body.modal-open #preVerificationModal.show ~ #modal-overlay,
body:has(#preVerificationModal.show) #modal-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  visibility: hidden !important;
}

/* REMOVED: Modal interactivity restrictions */

/* Hide Bootstrap's default modal backdrop since we use our own overlay */
.modal-backdrop {
  display: none !important;
}

/* Ensure modal content is always fully opaque and clickable */
.modal-content,
.modal-base {
  opacity: 1 !important;
  background: #fff !important;
  pointer-events: auto !important;
}

/* CRITICAL: Pre-Verification Modal - Aggressive fixes based on Modal-Debugging-Guide.md */
/* Default state: hidden */
#preVerificationModal {
  z-index: 99999 !important;
  pointer-events: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Only show when .show class is present */
#preVerificationModal.show {
  z-index: 99999 !important;
  pointer-events: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Only apply to children when modal is shown */
#preVerificationModal.show * {
  pointer-events: auto !important;
  z-index: 100004 !important;
  position: relative !important;
}

/* Modal dialog - only when shown */
#preVerificationModal.show .modal-dialog {
  z-index: 100000 !important;
  pointer-events: auto !important;
  position: relative !important;
  margin: 1.75rem auto !important;
  max-width: 800px !important;
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
  height: auto !important;
}

/* Override modal-dialog-scrollable to ensure header/footer are visible */
#preVerificationModal.show .modal-dialog-scrollable {
  height: auto !important;
  max-height: calc(100% - 3.5rem) !important;
}

#preVerificationModal.show .modal-dialog-scrollable .modal-content {
  max-height: 90vh !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Modal content - ensure full visibility */
#preVerificationModal.show .modal-content {
  z-index: 100001 !important;
  pointer-events: auto !important;
  position: relative !important;
  opacity: 1 !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  max-height: 90vh !important;
}

/* Modal header - ensure visible */
#preVerificationModal.show .modal-header {
  pointer-events: auto !important;
  z-index: 100002 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-shrink: 0 !important;
}

/* Modal body - scrollable */
#preVerificationModal.show .modal-body {
  pointer-events: auto !important;
  z-index: 100002 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Modal footer - ensure visible */
#preVerificationModal.show .modal-footer {
  pointer-events: auto !important;
  z-index: 100002 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-shrink: 0 !important;
}

/* Interactive elements - only when shown */
#preVerificationModal.show button,
#preVerificationModal.show .btn,
#preVerificationModal.show a,
#preVerificationModal.show input,
#preVerificationModal.show select,
#preVerificationModal.show textarea {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100003 !important;
  position: relative !important;
}

/* Hide backdrop for this modal */
#preVerificationModal ~ .modal-backdrop,
body.modal-open .modal-backdrop:has(~ #preVerificationModal) {
  display: none !important;
  z-index: -1 !important;
}

/* Ensure form elements are interactive */
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal .form-control,
.modal .form-select,
.modal .btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1058 !important;
  position: relative !important;
}

/* REMOVED: Overly broad form elements rule */

/* Additional fixes for modal interactivity */
.modal-header,
.modal-body,
.modal-footer {
  pointer-events: auto !important;
  z-index: 1058 !important;
  position: relative !important;
}

/* REMOVED: Universal pointer-events rule that was causing issues */

/* Ensure close button is clickable */
.modal .btn-close,
.modal .close {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1059 !important;
  position: relative !important;
}

/* FINAL VISUAL POP: Stronger shadow, white border, and brightness boost for all modals */
.modal-content {
  box-shadow: 0 0 60px 20px rgba(0,0,0,0.5) !important;
  border: 2px solid #fff !important;
  filter: brightness(1.08) !important;
}

/* CRITICAL: Force LTR layout for specific modals only (English site language) */
html:not([lang="fa"]) #quickRegisterBookModal,
html:not([lang="fa"]) #editPriceAvailabilityModal,
html:not([lang="fa"]) #addPostModalTestRename,
html:not([lang="fa"]) #editPostModal {
  direction: ltr !important;
  text-align: left !important;
}

/* Publication modal: LTR shell in English; Persian RTL handled in persian-form-rtl.css */
html:not([lang="fa"]) #addPublicationModal {
  direction: ltr !important;
  text-align: left !important;
}

/* CRITICAL: Fix for unblockModal - ensure it's only interactive when shown */
#unblockModal:not(.show) {
  pointer-events: none !important;
  z-index: -1 !important;
  display: none !important;
  visibility: hidden !important;
}

/* Ensure unblockModal doesn't block page elements when hidden */
#unblockModal:not(.show) * {
  pointer-events: none !important;
}

/* CRITICAL: Ensure all page buttons are always clickable by default */
.btn,
button,
a.btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1 !important;
  position: relative !important;
}

/* Exception: Only buttons inside unblockModal when it's NOT shown should not be clickable */
#unblockModal:not(.show) .btn,
#unblockModal:not(.show) button {
  pointer-events: none !important;
}

#unblockModal.show {
  z-index: 99999 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Only apply to direct children of modal, not all descendants */
#unblockModal > .modal-dialog {
  pointer-events: auto !important;
  z-index: 100000 !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
  max-width: 500px !important;
  width: 90% !important;
}

#unblockModal .modal-dialog > .modal-content {
  pointer-events: auto !important;
  z-index: 100001 !important;
  opacity: 1 !important;
  background: #fff !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#unblockModal .modal-content > .modal-header {
  pointer-events: auto !important;
  z-index: 100002 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid #dee2e6 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#unblockModal .modal-header > .modal-title {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#unblockModal .modal-content > .modal-body {
  pointer-events: auto !important;
  z-index: 100002 !important;
  padding: 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#unblockModal .modal-content > .modal-footer {
  pointer-events: auto !important;
  z-index: 100002 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 1rem 1.5rem !important;
  border-top: 1px solid #dee2e6 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Only target buttons inside the modal content */
#unblockModal .modal-content button,
#unblockModal .modal-content .btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100003 !important;
}

/* Force LTR for form elements within specific modals only (English site language) */
html:not([lang="fa"]) #quickRegisterBookModal *,
html:not([lang="fa"]) #editPriceAvailabilityModal *,
html:not([lang="fa"]) #addPostModalTestRename *,
html:not([lang="fa"]) #editPostModal * {
  direction: ltr !important;
  text-align: left !important;
}

html:not([lang="fa"]) #addPublicationModal * {
  direction: ltr !important;
  text-align: left !important;
}

/* Specific overrides for form elements in specific modals only (English) */
html:not([lang="fa"]) #quickRegisterBookModal .form-label,
html:not([lang="fa"]) #quickRegisterBookModal .form-control,
html:not([lang="fa"]) #quickRegisterBookModal .form-select,
html:not([lang="fa"]) #quickRegisterBookModal .input-group,
html:not([lang="fa"]) #quickRegisterBookModal .btn,
html:not([lang="fa"]) #editPriceAvailabilityModal .form-label,
html:not([lang="fa"]) #editPriceAvailabilityModal .form-control,
html:not([lang="fa"]) #editPriceAvailabilityModal .form-select,
html:not([lang="fa"]) #editPriceAvailabilityModal .input-group,
html:not([lang="fa"]) #editPriceAvailabilityModal .btn,
html:not([lang="fa"]) #addPostModalTestRename .form-label,
html:not([lang="fa"]) #addPostModalTestRename .form-control,
html:not([lang="fa"]) #addPostModalTestRename .form-select,
html:not([lang="fa"]) #addPostModalTestRename .input-group,
html:not([lang="fa"]) #addPostModalTestRename .btn,
html:not([lang="fa"]) #editPostModal .form-label,
html:not([lang="fa"]) #editPostModal .form-control,
html:not([lang="fa"]) #editPostModal .form-select,
html:not([lang="fa"]) #editPostModal .input-group,
html:not([lang="fa"]) #editPostModal .btn {
  direction: ltr !important;
  text-align: left !important;
}

/* Override any RTL styles that might be inherited for specific modals only (English) */
html:not([lang="fa"]) #quickRegisterBookModal .row,
html:not([lang="fa"]) #quickRegisterBookModal .col-md-6,
html:not([lang="fa"]) #editPriceAvailabilityModal .row,
html:not([lang="fa"]) #editPriceAvailabilityModal .col-md-6,
html:not([lang="fa"]) #addPostModalTestRename .row,
html:not([lang="fa"]) #addPostModalTestRename .col-md-6,
html:not([lang="fa"]) #editPostModal .row,
html:not([lang="fa"]) #editPostModal .col-md-6 {
  direction: ltr !important;
  text-align: left !important;
}

/* CRITICAL: Override any existing RTL styles for specific modals only (English) */
html:not([lang="fa"]) #quickRegisterBookModal,
html:not([lang="fa"]) #quickRegisterBookModal *,
html:not([lang="fa"]) #editPriceAvailabilityModal,
html:not([lang="fa"]) #editPriceAvailabilityModal *,
html:not([lang="fa"]) #addPostModalTestRename,
html:not([lang="fa"]) #addPostModalTestRename *,
html:not([lang="fa"]) #editPostModal,
html:not([lang="fa"]) #editPostModal * {
  direction: ltr !important;
  text-align: left !important;
}

/* Force LTR for specific problematic elements in specific modals only (English) */
html:not([lang="fa"]) #quickRegisterBookModal .arabic-text,
html:not([lang="fa"]) #quickRegisterBookModal .persian-text,
html:not([lang="fa"]) #editPriceAvailabilityModal .arabic-text,
html:not([lang="fa"]) #editPriceAvailabilityModal .persian-text {
  direction: ltr !important;
  text-align: left !important;
}

/* Edit Post Modal: LTR fields in English only; Persian RTL handled in persian-form-rtl.css */
html:not([lang="fa"]) #editPostTitle,
html:not([lang="fa"]) #editPostContent {
  direction: ltr !important;
  text-align: left !important;
}

/* Book title styling with two-line limit */
.book-title,
.book-card-3d .book-title,
.book-card .book-title {
  /* Force two-line display */
  display: block !important;
  height: 2.6rem !important; /* Exactly 2 lines */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  
  /* Ensure proper display */
  width: 100% !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  
  /* Maintain readability with smaller font to encourage wrapping */
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
}

/* Override any Bootstrap text truncation classes that might be applied */
.book-title.text-truncate,
.book-card-3d .book-title.text-truncate,
.book-card .book-title.text-truncate {
  display: block !important;
  height: 2.6rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* Ensure book titles in the Publications by Subject section follow two-line limit */
#publications-by-subject-tab-pane .book-title,
#publications-by-subject-tab-pane .book-card-3d .book-title,
#publications-by-subject-tab-pane .book-card .book-title {
  display: block !important;
  height: 2.6rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Additional overrides for any other potential truncation sources */
.book-title[style*="overflow"],
.book-title[style*="text-overflow"],
.book-title[style*="white-space"] {
  display: block !important;
  height: 2.6rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* Force override any CSS that might be setting max-width or width constraints */
.book-title,
.book-card-3d .book-title,
.book-card .book-title {
  max-width: 100% !important;
  width: 100% !important;
  min-width: auto !important;
}

/* Additional enforcement for two-line display */
.book-title,
.book-card-3d .book-title,
.book-card .book-title {
  /* Force two-line behavior */
  height: 2.6rem !important; /* Exactly 2 lines */
  min-height: 2.6rem !important;
  max-height: 2.6rem !important;
}

/* Ensure all book cards have consistent height */
.book-card-3d,
.book-card {
  height: 100% !important;
  min-height: 400px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Fix book info container to handle variable heights */
.book-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Book author styling with single-line limit */
.book-author,
.book-card-3d .book-author,
.book-card .book-author {
  /* Force single-line display */
  display: block !important;
  height: 1.3rem !important; /* Exactly 1 line */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  
  /* Ensure proper display */
  width: 100% !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: nowrap !important; /* Prevent wrapping to force single line */
  
  /* Maintain readability */
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.25rem !important;
}

/* Override any Bootstrap text truncation classes for author */
.book-author.text-truncate,
.book-card-3d .book-author.text-truncate,
.book-card .book-author.text-truncate {
  display: block !important;
  height: 1.3rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure book authors in the Publications by Subject section follow single-line limit */
#publications-by-subject-tab-pane .book-author,
#publications-by-subject-tab-pane .book-card-3d .book-author,
#publications-by-subject-tab-pane .book-card .book-author {
  display: block !important;
  height: 1.3rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Additional overrides for any other potential truncation sources for author */
.book-author[style*="overflow"],
.book-author[style*="text-overflow"],
.book-author[style*="white-space"] {
  display: block !important;
}

/* Publisher Content Styling - Preserve Word formatting */
.publisher-content {
  /* Ensure proper text flow */
  word-wrap: break-word;
  overflow-wrap: break-word;
  
  /* Preserve spacing and margins */
  margin: 0;
  padding: 0;
  
  /* Allow all HTML formatting to display */
  white-space: normal;
}

/* CRITICAL: Allow inline styles from Word documents to work naturally */
.card-body .publisher-content,
.publisher-content {
  /* Let inline styles work naturally - don't override them */
  display: block;
}

/* CRITICAL: Remove all CSS overrides to let inline styles work naturally */
/* Word document inline styles have the highest specificity and should be preserved */
/* No CSS rules should override inline styles from Word documents */

/* CRITICAL: No CSS rules should override inline styles from Word documents */

/* Publication Card Image Styling - Ensure proper 2:3 aspect ratio (portrait) */

/* Direct styling for publication cover images */
.publication-cover-image,
.publication-item .card-img-top {
    width: 100% !important;
    height: 300px !important; /* Fixed height for 2:3 aspect ratio */
    object-fit: contain !important; /* Show full image without cropping */
    object-position: center !important;
    display: block !important;
    background-color: #f8f9fa; /* Light background for letterboxing */
}

/* Legacy support for other publication card classes */
.publication-card img,
.book-card img,
.book-card-3d img {
  width: 100% !important;
  height: 300px !important; /* Fixed height for consistent display */
  object-fit: contain !important; /* Show full image without cropping */
  object-position: center !important;
  display: block !important;
  background-color: #f8f9fa; /* Light background for letterboxing */
}

/* Publication Card Container - Ensure proper sizing */
.publication-card,
.book-card,
.book-card-3d {
  overflow: hidden !important;
}

/* Report / share modals: keep below navbar and scroll when content is tall */
#reportUserModal,
#reportContentModal,
#shareProfileModal {
  z-index: 99999 !important;
}

#reportUserModal.show,
#reportContentModal.show,
#shareProfileModal.show {
  display: block !important;
  padding-top: var(--lc-navbar-height, 3.75rem) !important;
  overflow: hidden !important;
  height: 100vh !important;
  box-sizing: border-box !important;
}

#reportUserModal.show .modal-dialog.modal-dialog-scrollable,
#reportContentModal.show .modal-dialog.modal-dialog-scrollable,
#shareProfileModal.show .modal-dialog.modal-dialog-scrollable {
  height: calc(100vh - var(--lc-navbar-height, 3.75rem) - 1rem) !important;
  max-height: calc(100vh - var(--lc-navbar-height, 3.75rem) - 1rem) !important;
  margin: 0.5rem auto !important;
}

#reportUserModal.show .modal-dialog-scrollable .modal-content,
#reportContentModal.show .modal-dialog-scrollable .modal-content,
#shareProfileModal.show .modal-dialog-scrollable .modal-content {
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#reportUserModal.show .modal-header,
#reportUserModal.show .modal-footer,
#reportContentModal.show .modal-header,
#reportContentModal.show .modal-footer,
#shareProfileModal.show .modal-header,
#shareProfileModal.show .modal-footer {
  flex-shrink: 0 !important;
}

#reportUserModal.show .modal-dialog-scrollable .modal-body,
#reportContentModal.show .modal-dialog-scrollable .modal-body,
#shareProfileModal.show .modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}