/**
 * Bootstrap Legacy Compatibility Layer
 * Provides Bootstrap 3 form/grid styles and Bootstrap 5 modal compatibility
 * for AJAX-loaded content (add customer, tasks, opportunities, leads, etc.)
 */

/* ===== Bootstrap 5 Modal Compatibility ===== */
/* Bootstrap 5 uses .show instead of .in for visible modals */
.modal.fade.show,
.modal.fade.in {
  opacity: 1;
}
.modal.fade.show .modal-dialog,
.modal.fade.in .modal-dialog {
  transform: translate(0, 0);
  min-width: 600px;
}
.modal.show {
  display: flex !important;
  visibility: visible !important;
  overflow: hidden !important; /* prevent overlay scroll; only inner content scrolls */
}
.modal.show .modal-dialog {
  z-index: 1056;
  position: relative;
}
.modal.hidden {
  display: none !important;
}

/* ===== Modal Dialog Sizing - All shared/AJAX modals ===== */
#add_customer_modal .modal-dialog,
#common_shared_modal .modal-dialog,
#preview_customer_modal .modal-dialog,
#view_video_modal .modal-dialog,
#ai_modal .modal-dialog,
#tinymce_modal .modal-dialog,
#openai_assistant_history_modal .modal-dialog,
#openai_assistant_modal .modal-dialog,
#assign_customer_modal .modal-dialog,
#callsmodal .modal-dialog,
#organization_call_modal .modal-dialog {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  min-width: 750px;
  width: 900px;
  max-width: 95%;
  max-height: calc(100vh - 2rem);
}
/* Modal content: flex column so body can scroll */
#add_customer_modal .modal-content,
#common_shared_modal .modal-content,
#preview_customer_modal .modal-content,
#view_video_modal .modal-content,
#ai_modal .modal-content,
#tinymce_modal .modal-content,
#openai_assistant_history_modal .modal-content,
#openai_assistant_modal .modal-content,
#assign_customer_modal .modal-content,
#callsmodal .modal-content,
#organization_call_modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
/* Modal headers stay fixed, don't shrink */
.modal-content .model-headline,
.modal-content .close-modal {
  flex-shrink: 0;
}
/* Scrollable body - fits viewport, scrolls when content overflows */
.add_customer_messagemodal_content,
.common_shared_modal_content,
.preview_customer_messagemodal_content,
.assign_customer_messagemodal_content,
.ai_modal_content,
.tinymce_modal_content,
.openai_assistant_history_modal_content,
.openai_assistant_modal_content,
.view_video_messagemodal_content,
.organization_call_modal_content,
#messagemodal_content {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== Bootstrap 3 Form/Grid - For modal content ===== */
.modal .row,
.add_customer_messagemodal_content .row,
.common_shared_modal_content .row,
.preview_customer_messagemodal_content .row,
.assign_customer_messagemodal_content .row,
.ai_modal_content .row,
.tinymce_modal_content .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.modal .row > [class*="col-"],
.add_customer_messagemodal_content .row > [class*="col-"],
.common_shared_modal_content .row > [class*="col-"],
.preview_customer_messagemodal_content .row > [class*="col-"],
.assign_customer_messagemodal_content .row > [class*="col-"],
.ai_modal_content .row > [class*="col-"],
.tinymce_modal_content .row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.modal .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.modal .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.modal .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.modal .col-md-3 { flex: 0 0 25%; max-width: 25%; }
.modal .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
@media (max-width: 768px) {
  .modal .col-md-12,
  .modal .col-md-6,
  .modal .col-md-4,
  .modal .col-md-3,
  .modal .col-md-2 { flex: 0 0 100%; max-width: 100%; }
}

/* ===== Form Controls ===== */
.modal .form-control,
.add_customer_messagemodal_content .form-control,
.common_shared_modal_content .form-control,
.assign_customer_messagemodal_content .form-control,
.ai_modal_content .form-control {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #374151;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.modal .form-control:focus,
.add_customer_messagemodal_content .form-control:focus {
  border-color: #3b82f6;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.modal textarea.form-control,
.add_customer_messagemodal_content textarea.form-control {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
}
.modal select.form-control,
.add_customer_messagemodal_content select.form-control {
  appearance: auto;
  -webkit-appearance: menulist;
}

/* ===== Form Groups & Labels ===== */
.modal .form-group,
.add_customer_messagemodal_content .form-group {
  margin-bottom: 15px;
}
.modal .form-group label,
.add_customer_messagemodal_content .row > div > label,
.add_customer_messagemodal_content label,
.common_shared_modal_content label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}
.modal .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

/* ===== Buttons in modals ===== */
.modal .btn,
.add_customer_messagemodal_content .btn,
.common_shared_modal_content .btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
}
.modal .btn-primary,
.add_customer_messagemodal_content .btn-primary {
  color: #fff;
  background-color: #0F172A;
  border-color: #0F172A;
}
.modal .btn-primary:hover {
  background-color: #1e293b;
  border-color: #1e293b;
}
.modal .btn-default,
.add_customer_messagemodal_content .btn-default {
  color: #374151;
  background-color: #fff;
  border-color: #d1d5db;
}
.modal .btn-default:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* ===== Admin form save button ===== */
.modal .adminform_savebutton,
.add_customer_messagemodal_content .adminform_savebutton {
  margin-top: 20px;
  padding: 15px 0;
}
.modal .adminform_savebutton input,
.add_customer_messagemodal_content .adminform_savebutton input {
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
}