/* PEG shared site-wide CSS — Bootstrap/jQuery-free, version-agnostic.
 * Served via GitHub Pages and loaded ONCE, site-wide, from the
 * scheduling.pegenv.com global header/footer (MVIS) — not per-DataPage.
 *
 * Renamed from peg-modal.css (2026-09-15) to match docs/peg-sitewide.js,
 * which now holds every shared JS helper, not just the modal — see that
 * file's header for the full rename note, including that whatever loads
 * the old peg-modal.css/.js URLs still needs to be repointed at the new
 * names outside this repo. Currently modal-only; other shared styles
 * belong here too as they're added.
 *
 * Modal: deliberately namespaced (.peg-modal*, #peg-modal) so it can't
 * collide with either Bootstrap's own .modal/.modal-dialog classes OR the
 * legacy #cb-modal/.modal-dialog markup still declared locally by
 * un-migrated DataPages. Confirmed in production 2026-09-15 that reusing
 * #cb-modal for this file's own container produced a broken hybrid on at
 * least one unmigrated DataPage — see docs/peg-sitewide.js for the full
 * story. Removing Bootstrap sitewide, and finishing the legacy migration,
 * are both separate, later passes — not a dependency of this file.
 *
 * position:fixed, corrected 2026-09-15. Briefly tried position:relative (so
 * tall content, e.g. a long Change Log, would scroll via the page instead
 * of an internal box) — that broke two things confirmed in production:
 * (1) the backdrop is `.peg-modal__backdrop { position:absolute; inset:0 }`,
 * sized relative to #peg-modal's OWN box — with position:relative that box
 * shrinks to just the dialog's height, so the backdrop only dimmed a strip
 * that tall instead of the whole page; (2) a position:relative element sits
 * at a fixed spot in the DOCUMENT (wherever MVIS placed it, near the top),
 * so every modal opened there instead of centered in the current viewport,
 * regardless of where you clicked or how far you'd scrolled.
 *
 * Fixed properly: #peg-modal stays position:fixed;inset:0 (always exactly
 * viewport-sized, so the backdrop always covers the whole screen and the
 * modal always appears in your current view) — but #peg-modal ITSELF is
 * now the scrolling container (overflow-y:auto), with no height cap on
 * .peg-modal__dialog. Scrolling then feels identical to "scrolling the
 * page" (the fixed overlay IS the full viewport), while the backdrop never
 * stops covering everything. Centering uses margin:auto on the dialog
 * (not align-items:center on the container) — align-items:center clips the
 * start of content taller than the container once it needs to scroll, a
 * well-known flexbox gotcha; margin:auto doesn't have that problem.
 *
 * Source of truth: this repo, docs/peg-sitewide.css. Edit here, push,
 * done — no MVIS or DataPage edit needed for a CSS-only change.
 */
#peg-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#peg-modal::-webkit-scrollbar {
    display: none;
}

#peg-modal.peg-modal--open {
    display: flex;
}

.peg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.peg-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    width: 600px;
    max-width: 95vw;
    margin: auto;
}

.peg-modal__dialog.modal-sm { width: 400px; }
.peg-modal__dialog.modal-md { width: 600px; }
.peg-modal__dialog.modal-lg { width: 900px; }
.peg-modal__dialog.modal-xl { width: 1200px; }
.peg-modal__dialog.modal-fullscreen {
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
}

.peg-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e2e2;
}

.peg-modal__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.peg-modal__close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.peg-modal__close:hover {
    color: #333;
}

.peg-modal__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* A Caspio form's own rendered content is usually narrower than the
   dialog and left-aligned by default, leaving it bunched to one side.
   align-items:center above centers it as a block instead — deliberately
   NOT forcing children to 100% width, which would remove the extra
   space align-items:center needs to center within. */

@media (max-width: 768px) {
    .peg-modal__dialog {
        width: 95vw !important;
    }
}