/* ==========================================================================
   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(0, 0, 0, 0.5);
    --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%;
}

/* 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);
    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;
    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;
    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;
}