/* 
  Global modal width overrides
  This file contains CSS to standardize modal widths across the application
*/

/* 
  Modal Width Classes - Use these classes on modal containers
  .modal-dialog-wide - For wide modals (1600px)
  .modal-dialog-medium - For medium-sized modals (1200px)
  .modal-dialog-standard - For standard modals (800px)
*/

/* Position the modal backdrop to center items vertically */
[data-modal-frame-target="backdrop"] {
  align-items: center !important;
  justify-content: center !important;
}

/* Base modal styles that apply to all modals */
[data-modal-frame-target="backdrop"] > div,
turbo-frame#modal > div,
.modal-dialog {
  max-width: 95vw;
  margin: 0 auto;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Wide modal variant (1600px) */
[data-modal-frame-target="backdrop"] > div,
turbo-frame#modal > div,
.modal-dialog,
.modal-dialog-wide {
  width: 1600px;
}

/* Medium modal variant (1200px) */
.modal-dialog-medium {
  width: 1200px;
}

/* Standard modal variant (800px) */
.modal-dialog-standard {
  width: 800px;
}

/* Ensure modal content fills the container */
.modal-content {
  width: 100%;
  border: none;
}

/* Ensure modal body elements have appropriate width */
.modal-body, 
.p-6 {
  width: 100%;
  max-width: 100%;
}

/* Visual enhancements for modals */
[data-modal-frame-target="backdrop"] > div {
  border: 2px solid #4f46e5;
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.2);
}

/* Fix double borders */
turbo-frame#modal > div {
  border: none;
  box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  [data-modal-frame-target="backdrop"] > div,
  turbo-frame#modal > div,
  .modal-dialog,
  .modal-dialog-wide,
  .modal-dialog-medium,
  .modal-dialog-standard {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }
  
  /* Remove border on mobile for cleaner look */
  [data-modal-frame-target="backdrop"] > div {
    border-width: 0;
  }
}

/* Ensure Trix editor has appropriate height in modals */
.trix-editor {
  min-height: 200px;
}