/* Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Override Underlying Dash Styling */

.modal-header {
    font-size: 1.44rem;
    line-height: 1.35;
    background-color: #003658;
    border-bottom: none;    
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.modal-title {
    font-size: 1.25rem;
    line-height: 1;
}

.modal-body {
    background-color: #003658;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;    
}

/* Apply border-radius if modal-body is the last child (i.e., no footer present) */
body .modal-content > .modal-body:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.modal-footer {
    background-color: #003658;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;    
    border-top: none;
}

.modal-content {
    border-radius: 6px;
    border: 1px solid #ebebeb;
    z-index: 1000;
    overflow: visible !important;  /* Ensure dropdown appears above modal */
}

/* Preserve full-screen modal behavior without restricting height */
.modal-dialog-fullscreen {
    height: 100vh;  /* Ensures full height is maintained */
    width: 100vw;   /* Ensures full width is maintained */
    overflow: visible !important; 
    overflow-y: auto !important;  /* Enable scrolling for other content in the full-screen modal */
    z-index: 1000;    
}


/* Maintain scrolling for modal content when needed */
.modal-dialog {
    overflow: visible !important;
    overflow-y: auto !important;  /* Ensure scroll for long content */
    z-index: 1000 !important;  /* Ensure modal appears above all other elements */
}

/* Ensure parent containers do not have restrictive overflow */
body.modal-open {
    overflow: visible !important;  /* Allow body overflow when modal is open */
}

/* Ensure overflow is allowed in scrollable modals -  */
.modal-dialog-scrollable {
    overflow: visible !important;
}

.modal-dialog-scrollable .modal-body {
    overflow: visible;
}

/* Modal Text Input Styling */
.modal_text_input_medium {
/* applying !important to override text_input width - tech debt - create classes for various widths, 
then can remove this hack */
    width: 15rem !important;    
}

/* @media(min-width: 1200px) */
.modal-xl {
    max-width: 1500px
}

.modal-fullscreen .modal-header {
    background-color: #20374C;
}

.modal-fullscreen .modal-body {
    background-color: #0a1a27;
}

.modal-fullscreen .modal-footer {
    background-color: #20374C;
} 


/* Stacking Modal Handling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Apply background to all modals except the last one (which is assumed to be the topmost) */
.modal.show ~ .modal.show {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Dynamically Hide Headers and Footers  
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Hide the modal footer if it is empty */
.modal-footer:empty {
    display: none;
}

/* Hide the modal header if it is empty */
.modal-header:empty {
    display: none;
}




/* Modal Prompt Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button_modal_prompt {
    background-color: #438FFD;
    color: white;
    border: none;
    padding: 2.5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 6px 4px;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    border-radius: 6px;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
    transition-duration: 0.4s ease;
}
  
.button_modal_prompt:hover {
    background-color: #0969F4;
}


/* Unauthorized Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.modal_footer_unauthorized {
    background-color: #003658;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;    
    border-top: none;
}



/* Margin Handling Within Modals  
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Need to revist below */

/* Remove margin from all elements inside a modal EXCEPT the modal itself and these components */
/* .modal *:not(.modal-content):not(.modal-dialog):not(.button):not(.special_button)
:not(.button_right_arrow):not(.button_inactive):not(.button_mark_complete):not(.send_button)
:not(.button_reset):not(.button_themed):not(.button_themed_reverse):not(.add_date_range)
:not(.add_date_component):not(.button_download_file):not(.button_download_file):not(.dropdown)
:not(.dropdown_large):not(.dropdown_xlarge):not(.dropdown_responsive):not(.number_input)
:not(.number_input_large):not(.switch):not(.text_input):not(.text_input_large):not(.upload) {
    margin: 0 !important;
    box-sizing: border-box; /* Ensure padding and borders are included in the width calculation */
/* } */ 

/* Specific component style when inside a modal */
/* .modal .button_right_arrow,
.modal .button,
.modal .special_button,
.modal .button_inactive,
.modal .button_mark_complete,
.modal .send_button,
.modal .button_reset,
.modal .button_themed,
.modal .button_themed_reverse,
.modal .component_div, 
.modal .add_date_range,
.modal .add_date_component,
.modal .button_download_file,
.modal .dropdown,
.modal .dropdown_large,
.modal .dropdown_xlarge,
.modal .dropdown_responsive,
.modal .number_input, 
.modal .number_input_large, 
.modal .switch, 
.modal .text_input, 
.modal .text_input_large, 
.modal .upload {
    margin: 8px; 
} */