/* Modal Styles - Replacement for Telerik RadWindow */

/* Dialog element base styling */
dialog.custom-modal {
    position: fixed;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    overflow: visible;
    z-index: 1000;
}

/* app.css still carries Foundation 5's reveal styles, and they apply to every <dialog>:
   visibility: hidden on the dialog and display: none on its backdrop. Foundation's script
   is what made its own modals visible, and it never runs for these, so an open dialog
   stayed invisible while still blocking the page underneath. Both are undone here. */
dialog.custom-modal::backdrop {
    display: block;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
}

dialog.custom-modal[open] {
    display: block;
    visibility: visible;
}

/* Modal content container */
dialog.custom-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
}

/* Modal header */
dialog.custom-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
}

dialog.custom-modal .modal-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Close button */
dialog.custom-modal .close-modal {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    margin: 0; /* app.css gives every button a bottom margin, which made the header 81px */
    width: 30px;
    height: 30px;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

dialog.custom-modal .close-modal:hover {
    opacity: 1;
    color: #333;
}

/* Modal body */
dialog.custom-modal .modal-body {
    padding: 20px;
    overflow: auto;
    flex: 1;
}

/* A framed page brings its own layout, so the body around it has no padding and the
   iframe fills whatever height the header leaves. ModalHelper's pixel height assumes a
   60px header, which dialogs without a title don't have, so here it is only a starting
   size. A framed page taller than its frame scrolls inside the iframe, not the body. */
dialog.custom-modal .modal-body:has(> iframe) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

dialog.custom-modal .modal-body > iframe {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
}

/* Specific sizing for common modals */
dialog.custom-modal.small {
    width: 350px;
    height: 230px;
}

dialog.custom-modal.medium {
    width: 450px;
    height: 200px;
}

dialog.custom-modal.large {
    width: 800px;
    height: 500px;
}

/* Responsive adjustments */
@media screen and (max-width: 640px) {
    dialog.custom-modal {
        width: 95vw !important;
        max-width: 95vw;
        height: auto !important;
        max-height: 90vh;
    }

    dialog.custom-modal .modal-body {
        max-height: 70vh;
    }
}

/* Animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

dialog.custom-modal[open] {
    animation: modalFadeIn 0.3s ease-out;
}

/* Text alignment utilities */
dialog.custom-modal .text-center {
    text-align: center;
}