/* ── Every modal looks like the dashboard's Workflow Task dialog ─────────────────────────────────
   That dialog (#modal_ht in _Layout; its rules are in Theme.css under #WorkflowModalFrame) is the
   design the user chose on 2026-09-24 for all of them: a rounded white panel with a soft shadow, a
   light header bar with the title in bold on the left and a round close button on the right, and a
   line under it. Before, each modal had its own look, most of them a grey (#a6a6a6) or black header
   bar from Theme.css's .modal-header-light / -dark with a small "x".

   The same rules cover the three kinds of dialog in the app: Bootstrap modals (.modal), jQuery UI
   dialogs (.ui-dialog, the "Are you sure?" questions) and the alerts and confirmations from
   scripts/Common/AlertMessageDialog.js. The colours are the variables below, one set per theme.

   Loaded by _Layout, _LinksPartialView (the pages shown in frames) and each page that builds its own
   <head> and opens dialogs (Login, the verification and exception forms, DocRecord/DocData ...): a
   new page like that needs it too. Not part of site.css because Login can't take site.css (it caps
   every input at 280px). Selectors start at body so they outrank Theme.css, which pages load after
   this file as well as before it. */
body {
    --modal-bg: #ffffff;
    --modal-bar-bg: #f8f9fa;
    --modal-border: #dee2e6;
    --modal-text: #212529;
    --modal-close-bg: rgba(0, 0, 0, 0.05);
    --modal-close-hover-bg: rgba(0, 0, 0, 0.1);
    --modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --modal-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The Workflow Task dialog's dark colours, with a close button that shows on them (its 5% black
   circle disappeared on the dark header). */
body.dark,
body.linkpartial-dark {
    --modal-bg: #1e1e1e;
    --modal-bar-bg: #1e1e1e;
    --modal-border: #383838;
    --modal-text: #f8f9fa;
    --modal-close-bg: rgba(255, 255, 255, 0.08);
    --modal-close-hover-bg: rgba(255, 255, 255, 0.16);
    --modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* An open dialog keeps the scroll to itself. Bootstrap means to lock the page behind (.modal-open),
   but this app's body scrolls regardless, so once a dialog's content, or the page framed in it (the
   dashboard's Workflow Task), reached its end, the wheel went on to scroll the page behind. */
.modal,
.ui-dialog .ui-dialog-content {
    overscroll-behavior: contain;
}

/* Bootstrap modals. */
body .modal .modal-content {
    border: 1px solid var(--modal-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--modal-shadow) !important;
    background-color: var(--modal-bg) !important;
}

/* The title on the left, anything else the header holds after it, the close button last on the
   right, whatever order the markup has them in (several modals put the close button first). */
body .modal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--modal-border) !important;
    border-radius: 11px 11px 0 0 !important;
    background: var(--modal-bar-bg) !important;
    color: var(--modal-text) !important;
}

    /* Bootstrap 3's clearfix (the dashboard loads it) would be two more items in the row. */
    body .modal .modal-header::before,
    body .modal .modal-header::after {
        content: none !important;
        display: none !important;
    }

body .modal .modal-header .modal-title,
body .modal .modal-header > h1,
body .modal .modal-header > h2,
body .modal .modal-header > h3,
body .modal .modal-header > h4,
body .modal .modal-header > h5,
body .modal .modal-header > h6 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--modal-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    color: var(--modal-text) !important;
}

    body .modal .modal-header .modal-title b,
    body .modal .modal-header .modal-title strong {
        font-weight: 700 !important;
        color: inherit !important;
    }

body .modal .modal-header .close {
    order: 99;
    flex: 0 0 32px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--modal-close-bg) !important;
    color: var(--modal-text) !important;
    opacity: 0.7 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

    /* Every close button shows the Workflow Task dialog's bold "X", whatever its markup holds: an
       "X", a "×" or an "x", bare or in a <b> or a <span>, so they came out in three sizes. That
       dialog and the two others styled with it in Theme.css draw their own. */
    body .modal:not(#WorkflowModalFrame):not(#WorkflowCompleteModal):not(#ViewReceiptFrame) .modal-header .close > * {
        display: none !important;
    }

    body .modal:not(#WorkflowModalFrame):not(#WorkflowCompleteModal):not(#ViewReceiptFrame) .modal-header .close::before {
        content: 'X';
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
    }

    body .modal .modal-header .close:hover,
    body .modal .modal-header .close:focus {
        opacity: 1 !important;
        background: var(--modal-close-hover-bg) !important;
        color: var(--modal-text) !important;
        transform: scale(1.05);
    }

/* In line with the title. Not !important, so a modal that sets its own keeps it; and not the
   .reveal-modal ones, whose body is a page in a frame edge to edge (site.css). */
.modal:not(.reveal-modal) .modal-body {
    padding: 20px 24px;
    color: var(--modal-text);
}

body .modal .modal-footer {
    gap: 8px;
    padding: 12px 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--modal-border) !important;
    border-radius: 0 0 11px 11px !important;
    background: var(--modal-bar-bg) !important;
}

    .modal .modal-footer > * {
        margin: 0;
    }

/* The Workflow Task dialogs keep their own rules (Theme.css); in the dark theme their panel stayed
   white round the edges and their close button's circle didn't show. */
body.dark #WorkflowModalFrame .modal-content,
body.dark #WorkflowCompleteModal .modal-content,
body.dark #ViewReceiptFrame .modal-content {
    background-color: var(--modal-bg) !important;
}

body.dark #WorkflowModalFrame .modal-header .close,
body.dark #WorkflowCompleteModal .modal-header .close,
body.dark #ViewReceiptFrame .modal-header .close {
    background: var(--modal-close-bg) !important;
}

    body.dark #WorkflowModalFrame .modal-header .close:hover,
    body.dark #WorkflowCompleteModal .modal-header .close:hover,
    body.dark #ViewReceiptFrame .modal-header .close:hover {
        background: var(--modal-close-hover-bg) !important;
    }

/* jQuery UI dialogs. */
body .ui-dialog {
    padding: 0 !important;
    border: 1px solid var(--modal-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--modal-shadow) !important;
    background: var(--modal-bg) !important;
    color: var(--modal-text);
}

body .ui-dialog .ui-dialog-titlebar {
    position: relative;
    margin: 0 !important;
    padding: 14px 64px 14px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--modal-border) !important;
    border-radius: 11px 11px 0 0 !important;
    background: var(--modal-bar-bg) !important;
    color: var(--modal-text) !important;
}

body .ui-dialog .ui-dialog-title {
    float: none !important;
    display: block;
    width: auto !important;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--modal-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--modal-text) !important;
}

/* jQuery UI's close button is an icon with hidden text; Theme.css draws a "×" after it. */
body .ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--modal-close-bg) !important;
    opacity: 0.7 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

    body .ui-dialog .ui-dialog-titlebar-close:hover,
    body .ui-dialog .ui-dialog-titlebar-close:focus {
        opacity: 1 !important;
        background: var(--modal-close-hover-bg) !important;
    }

    body .ui-dialog .ui-dialog-titlebar-close .ui-icon,
    body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
    body .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
        display: none !important;
    }

    body .ui-dialog .ui-dialog-titlebar-close::after {
        content: 'X';
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        text-indent: 0;
        color: var(--modal-text);
    }

body .ui-dialog .ui-dialog-content {
    padding: 20px 24px !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--modal-text);
    background: transparent !important;
}

body .ui-dialog .ui-dialog-buttonpane {
    margin: 0 !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--modal-border) !important;
    border-radius: 0 0 11px 11px;
    background: var(--modal-bar-bg) !important;
}

    body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        float: none !important;
    }

        body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
            margin: 0 !important;
        }

    /* Theme.css draws the second button ("No", "Cancel") light in every theme. */
    body.dark .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:not(:first-child),
    body.linkpartial-dark .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:not(:first-child) {
        background: #333;
        border-color: #555;
        color: #eee;
    }

        body.dark .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:not(:first-child):hover,
        body.linkpartial-dark .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:not(:first-child):hover {
            background: #444;
            border-color: #777;
            color: #fff;
        }

/* The alerts and confirmations (AlertMessageDialog.js). They draw themselves with inline styles
   in this same look, so they are right on a page without this file too; this adds the dark theme. */
body.dark .dv-dialog,
body.linkpartial-dark .dv-dialog {
    border-color: var(--modal-border) !important;
    background: var(--modal-bg) !important;
    box-shadow: var(--modal-shadow) !important;
}

    body.dark .dv-dialog-header,
    body.linkpartial-dark .dv-dialog-header {
        border-bottom-color: var(--modal-border) !important;
        background: var(--modal-bar-bg) !important;
    }

    body.dark .dv-dialog-title,
    body.linkpartial-dark .dv-dialog-title,
    body.dark .dv-dialog-body,
    body.linkpartial-dark .dv-dialog-body {
        color: var(--modal-text) !important;
    }

    body.dark .dv-dialog-footer,
    body.linkpartial-dark .dv-dialog-footer {
        border-top-color: var(--modal-border) !important;
        background: var(--modal-bar-bg) !important;
    }