/* ==========================================================================
   CLS Shared Modal Stylesheet
   Provides consistent modal design across all CLS plugins.
   ========================================================================== */

:root {
    --cls-modal-z-overlay: 100000;
    --cls-modal-z-content: 100001;
    --cls-modal-backdrop: rgba(12, 44, 61, 0.55);
    --cls-modal-backdrop-blur: 6px;
    --cls-modal-radius: 12px;
    --cls-modal-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    --cls-modal-header-bg: linear-gradient(135deg, #0b486b, #1f708d);
    --cls-modal-header-text: #ffffff;
    --cls-modal-body-bg: #f8fafc;
    --cls-modal-footer-bg: #ffffff;
    --cls-modal-footer-border: #e2e8f0;
    --cls-modal-max-width-sm: 460px;
    --cls-modal-max-width-md: 600px;
    --cls-modal-max-width-lg: 800px;
    --cls-modal-max-width-xl: 95%;
    --cls-modal-open-duration: 260ms;
    --cls-modal-open-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Shared open animations — applied to every modal pattern in use on the site.
   Keeps the overall "things just appearing" feel in check by fading the
   backdrop in while the dialog scales + rises into place.
   ========================================================================== */

@keyframes cls-modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cls-modal-dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* cls-modal-overlay pattern: backdrop IS the overlay, dialog is .cls-modal inside it */
.cls-modal-overlay.active {
    animation: cls-modal-backdrop-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
}
.cls-modal-overlay.active > .cls-modal {
    animation: cls-modal-dialog-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Bootstrap-compatible pattern (.modal.cls-styled) */
.modal.cls-styled.show {
    animation: cls-modal-backdrop-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
}
.modal.cls-styled.show .modal-content {
    animation: cls-modal-dialog-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Control Center modal (mu-plugins/cls-automation-control.php) */
.cls-cc-modal.is-open {
    animation: cls-modal-backdrop-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
}
.cls-cc-modal.is-open .cls-cc-modal__dialog {
    animation: cls-modal-dialog-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Share Compliance modal (#shareComplianceModal, inline-styled) — we can still
   animate it because it toggles from display:none to display:flex, which triggers
   a fresh keyframe run. Target the inline-styled dialog via its attribute. */
#shareComplianceModal[style*="display:flex"],
#shareComplianceModal[style*="display: flex"] {
    animation: cls-modal-backdrop-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
}
#shareComplianceModal[style*="display:flex"] > [role="dialog"],
#shareComplianceModal[style*="display: flex"] > [role="dialog"] {
    animation: cls-modal-dialog-in var(--cls-modal-open-duration) var(--cls-modal-open-ease) both;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Respect system accessibility preference. */
@media (prefers-reduced-motion: reduce) {
    .cls-modal-overlay.active,
    .cls-modal-overlay.active > .cls-modal,
    .modal.cls-styled.show,
    .modal.cls-styled.show .modal-content,
    .cls-cc-modal.is-open,
    .cls-cc-modal.is-open .cls-cc-modal__dialog,
    #shareComplianceModal[style*="display:flex"],
    #shareComplianceModal[style*="display: flex"],
    #shareComplianceModal[style*="display:flex"] > [role="dialog"],
    #shareComplianceModal[style*="display: flex"] > [role="dialog"] {
        animation: none !important;
    }
}

/* Body scroll lock */
body.cls-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Custom overlay pattern (non-Bootstrap modals)
   ========================================================================== */

.cls-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cls-modal-backdrop);
    -webkit-backdrop-filter: blur(var(--cls-modal-backdrop-blur));
    backdrop-filter: blur(var(--cls-modal-backdrop-blur));
    z-index: var(--cls-modal-z-overlay);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cls-modal-overlay.active {
    display: flex;
}

/* Modal container */
.cls-modal {
    background: #ffffff;
    border-radius: var(--cls-modal-radius);
    max-width: var(--cls-modal-max-width-md);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--cls-modal-shadow);
    z-index: var(--cls-modal-z-content);
    display: flex;
    flex-direction: column;
}

/* Size variants */
.cls-modal--sm {
    max-width: var(--cls-modal-max-width-sm);
}

.cls-modal--md {
    max-width: var(--cls-modal-max-width-md);
}

.cls-modal--lg {
    max-width: var(--cls-modal-max-width-lg);
}

.cls-modal--xl {
    max-width: var(--cls-modal-max-width-xl);
    width: 95%;
    height: 85vh;
}

/* Header */
.cls-modal-header {
    padding: 20px 24px;
    background: var(--cls-modal-header-bg);
    color: var(--cls-modal-header-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--cls-modal-radius) var(--cls-modal-radius) 0 0;
    flex-shrink: 0;
}

.cls-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Close button */
.cls-modal-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    filter: none !important;
    opacity: 1 !important;
}

.cls-modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
}

/* Body */
.cls-modal-body {
    padding: 24px;
    background: var(--cls-modal-body-bg);
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Footer */
.cls-modal-footer {
    padding: 16px 24px;
    background: var(--cls-modal-footer-bg);
    border-top: 1px solid var(--cls-modal-footer-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 var(--cls-modal-radius) var(--cls-modal-radius);
    flex-shrink: 0;
}

/* XL body (file viewer) — no padding, full height */
.cls-modal--xl .cls-modal-body,
.cls-modal--xl > .modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

/* ==========================================================================
   Bootstrap compatibility layer
   Since only bootstrap-grid.css is loaded (not full Bootstrap), .modal
   has NO positioning by default. This layer provides full-screen overlay
   positioning and flexbox centering. The .modal element itself acts as
   the backdrop — no separate .modal-backdrop is needed.
   ========================================================================== */

/* Base: hidden full-screen overlay */
.modal.cls-styled {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: var(--cls-modal-z-overlay) !important;
    background: var(--cls-modal-backdrop) !important;
    -webkit-backdrop-filter: blur(var(--cls-modal-backdrop-blur)) !important;
    backdrop-filter: blur(var(--cls-modal-backdrop-blur)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
    /* Flexbox centering */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* When shown — display as flex overlay */
.modal.cls-styled.show {
    display: flex !important;
}

/* Hide any separate backdrop that Bootstrap JS might create */
.modal-backdrop.cls-modal-backdrop {
    display: none !important;
}

/* The .modal-dialog becomes the centered content wrapper */
.modal.cls-styled .modal-dialog {
    max-width: var(--cls-modal-max-width-md);
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    pointer-events: none;
}

.modal.cls-styled .modal-dialog.cls-modal--sm {
    max-width: var(--cls-modal-max-width-sm);
}

.modal.cls-styled .modal-dialog.cls-modal--lg {
    max-width: var(--cls-modal-max-width-lg);
}

.modal.cls-styled .modal-dialog.cls-modal--xl {
    max-width: var(--cls-modal-max-width-xl);
    width: 95%;
}

.modal.cls-styled .modal-content {
    border: none;
    /* Reset the theme's broad `.modal-content { padding:20px }` (skin.css) which
       otherwise shows as a white gutter around the header. */
    padding: 0;
    border-radius: var(--cls-modal-radius);
    overflow: hidden;
    box-shadow: var(--cls-modal-shadow);
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    pointer-events: auto;
}

.modal.cls-styled .modal-header {
    padding: 20px 24px;
    background: var(--cls-modal-header-bg);
    color: var(--cls-modal-header-text);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--cls-modal-radius) var(--cls-modal-radius) 0 0;
    flex-shrink: 0;
}

.modal.cls-styled .modal-header .modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal.cls-styled .modal-body {
    padding: 24px;
    background: var(--cls-modal-body-bg);
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal.cls-styled .modal-footer {
    padding: 16px 24px;
    background: var(--cls-modal-footer-bg);
    border-top: 1px solid var(--cls-modal-footer-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 var(--cls-modal-radius) var(--cls-modal-radius);
    flex-shrink: 0;
}

/* XL variant for Bootstrap modals (file viewer) */
.modal.cls-styled .modal-dialog.cls-modal--xl .modal-content {
    height: 85vh;
}

.modal.cls-styled .modal-dialog.cls-modal--xl .modal-body {
    padding: 0;
    overflow: hidden;
}

/* ============================================================
   Close button on the LIGHT content modal

   >>> A WHITE GLYPH ON A WHITE HEADER IS NOT A CLOSE BUTTON. <<<

   .cls-modal-close above is built for the branded modals, whose headers are a
   dark teal — white-on-translucent-white reads perfectly there. #contentModal
   is the life-safety category modal, and its header is the same near-white as
   the card behind it, so the × was invisible: people reported these modals had
   no way to close them at all.

   Given its own treatment here rather than changed globally, because the dark
   header version is correct where it is. Floated over the content so it does
   not depend on the header having any height of its own — it is empty apart
   from this button, and an empty flex header can collapse to nothing.
   ============================================================ */
#contentModal .modal-content { position: relative; }

/*
 * >>> THE HEADER IS HIDDEN BY THE THEME, WHICH IS WHY THERE WAS NO CLOSE BUTTON. <<<
 *
 * skin.css carries `#contentModal .modal-dialog .modal-header { display: none }` — a higher
 * specificity than a plain `#contentModal .modal-header`, so restyling the button did nothing:
 * its parent was never rendered, and a child of display:none cannot be made visible by any
 * amount of styling on the child.
 *
 * Matched at the same specificity and forced, then collapsed to zero height so nothing else
 * moves. The button inside is absolutely positioned against .modal-content, so it escapes the
 * zero-height header and lands in the corner regardless.
 */
#contentModal .modal-dialog .modal-header {
    display: block !important;
    position: static;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border-bottom: 0;
    overflow: visible;
}

#contentModal .cls-modal-close {
    position: absolute !important;
    top: 14px;
    right: 16px;
    z-index: 20;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 20px !important;
    background: #ffffff !important;
    color: #12586e !important;
    border: 1px solid #dbe7ec !important;
    box-shadow: 0 2px 10px rgba(15, 76, 92, 0.14) !important;
    transition: background 160ms ease, border-color 160ms ease,
                color 160ms ease, transform 80ms ease !important;
}

#contentModal .cls-modal-close:hover {
    background: #eef9fb !important;
    border-color: #8ecbd9 !important;
    color: #0f4c5c !important;
}

#contentModal .cls-modal-close:active { transform: translateY(1px); }

#contentModal .cls-modal-close:focus-visible {
    outline: none;
    border-color: #14a6b5 !important;
    box-shadow: 0 0 0 3px rgba(20, 166, 181, 0.25) !important;
}

@media (prefers-reduced-motion: reduce) {
    #contentModal .cls-modal-close { transition: none !important; }
    #contentModal .cls-modal-close:active { transform: none !important; }
}