/******************************************************/
/*     Modal dialogue boxes, alerts, and messages     */
/******************************************************/

/*
    To be used with a Javascript library that creates and displays
    alerts and other user messages and notices.
        This CSS sets the basic properties for displaying these
    alerts, but they can be customized further by the
    web site's own CSS.
*/


.modal_overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.3); /* Black w/ opacity */
}

.modal_dialog {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 10pt;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    text-align: center;
    border: 1px solid grey;
    border-radius: 5pt;
}

.modal_title, .modal_message {
    margin: 6pt;
}
.modal_title {
    font-weight: bold;
}

.modal_buttons {
    margin-top: 1em;
    text-align: right;
}

/* CSS for "toast" style self-disappearing user messages. */
/*
    Note: The JS for these is defined in /shared/cms/admin.js
    but it will need to get moved to /shared/js/modals.js before
    it becomes universally available for all websites and web apps.
        Also, the CSS here is not very flexible, eg., it hard-codes
    the font size. I'd like it to be better at adopting the default
    styles of the website's own CSS. It would help, I think, if the 
    JS code that generates these messages wrapped them in a <p> tag.
    But that will require looking at the order in which these style 
    sheets are loaded by websites.
        I can also see a potential conflict between this and the code
    in js/ajax.js for cancelling an in-progress AJAX request. That 
    code assumes the modal dialogue that shows the cancel button is 
    the last element added to the DOM. But it's conceivable that a 
    .toast-message element might be the most recently added DOM element.
*/
#toast-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* Newest at the bottom */
    align-items: flex-start;
    pointer-events: none;
}

.toast-message {
    background: rgba(60, 60, 60, 0.95);
    color: #fff;
    padding: 6pt 12pt;
    margin-top: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 10pt;
    opacity: 1;
    max-width: 50vw;
    min-width: 200px;
    word-break: break-word;
    white-space: normal;
    pointer-events: auto;
    transform: translateX(-100%);
    animation: toast-slide-in 0.4s cubic-bezier(.4,0,.2,1) forwards;
    transition: opacity 0.5s ease;
}

@keyframes toast-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}