/* The main dialog container */
.frmMgrModal {
    margin: auto;
    border: none;
    border-radius: 0.5rem;
    padding: 0; /* Remove default padding to let header/footer flush to edges */
    width: 91%; /* Bootstrap 'md' size */
    height: 90vh;
    max-height: 90vh;
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Prevents content from spilling over rounded corners */
  }

  /* Flex only when open — avoids overriding UA dialog:not([open]){display:none} */
  .frmMgrModal[open] {
    display: flex;
    flex-direction: column;
  }
  
  /* The backdrop (the area outside the modal) */
  .frmMgrModal::backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Bootstrap-style dark overlay */
    backdrop-filter: blur(2px); /* Optional: adds a modern frosted glass touch */
  }
  
  /* Modal Header */
  .frmMgrModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
  }
  
  .frmMgrModal .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
  }
  
  /* Modal Body (Iframe container) */
  .frmMgrModal .modal-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0; /* Allow flex child to shrink below content size */
    padding: 0;
    overflow: hidden;
  }
  
  .frmMgrModal iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
  }
  
  /* Modal Footer */
  .frmMgrModal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end; /* Aligns buttons to the right */
    flex-shrink: 0;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    gap: 0.5rem;
  }
  
  /* Generic Button Styling (If not already in your global CSS) */
  .frmMgrModal .btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    border: 1px solid transparent;
  }
  
  .frmMgrModal .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  .frmMgrModal .btn-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
  }
  
  .frmMgrModal .btn-close::before {
    content: "×"; /* Close icon fallback if you aren't using an SVG */
  }
  
  .frmMgrModal .btn-close:hover {
    opacity: 0.75;
  }
