/* ========================================
   GLOBAL MODAL FIX - Centered Positioning
   ========================================
   
   This file ensures ALL modals across the app are:
   - Perfectly centered horizontally and vertically
   - Have a full-screen semi-transparent overlay
   - Work consistently regardless of template-specific styles
   
   Include this file AFTER all other CSS to ensure it takes precedence.
*/

/* ========================================
   BASE MODAL CONTAINER
   ======================================== */

/* Primary modal class - fixed overlay covering entire viewport */
.modal,
.modal-overlay,
.delete-modal-overlay,
.modal-backdrop,
[class*="-modal"][style*="display"] {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow: auto !important;
}

/* Active/visible state - use flex to center content */
.modal.show,
.modal.active,
.modal[style*="flex"],
.modal[style*="block"],
.modal-overlay.show,
.modal-overlay.active,
.modal-overlay[style*="flex"],
.modal-overlay[style*="block"],
.delete-modal-overlay.show,
.delete-modal-overlay.active,
.delete-modal-overlay[style*="flex"],
.delete-modal-overlay[style*="block"],
[class*="-modal"][style*="flex"],
[class*="-modal"][style*="block"],
[class*="-modal"].show,
[class*="-modal"].active {
    display: flex !important;
}

/* ========================================
   MODAL CONTENT - Centered Box
   ======================================== */

/* Standard centered modal content */
.modal > .modal-content,
.modal-overlay > .modal-content,
.modal-overlay > .modal-panel,
.modal > .modal-panel,
.modal > form > .modal-content,
.modal-overlay > form > .modal-content,
/* Custom modal content classes */
[class*="-modal"] > [class*="-content"]:not([class*="nav"]):not([class*="header"]):not([class*="footer"]):not([class*="body"]),
[class*="-modal"] > .modal-overlay + [class*="-content"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: auto !important;
    background: var(--bg-primary, #ffffff) !important;
    border-radius: 16px !important;
    width: 92% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    animation: modalContentFadeIn 0.25s ease-out !important;
    z-index: 10000 !important;
}

/* Size variations */
.modal > .modal-content.modal-sm,
.modal-overlay > .modal-content.modal-sm {
    max-width: 420px !important;
}

.modal > .modal-content.modal-medium,
.modal-overlay > .modal-content.modal-medium,
.modal > .modal-content.modal-md,
.modal-overlay > .modal-content.modal-md {
    max-width: 520px !important;
}

.modal > .modal-content.modal-lg,
.modal-overlay > .modal-content.modal-lg,
.modal > .modal-content.modal-large,
.modal-overlay > .modal-content.modal-large {
    max-width: 800px !important;
}

.modal > .modal-content.modal-xl,
.modal-overlay > .modal-content.modal-xl {
    max-width: 1000px !important;
}

/* Full width on small screens */
@media (max-width: 640px) {
    .modal > .modal-content,
    .modal-overlay > .modal-content,
    .modal > .modal-panel,
    .modal-overlay > .modal-panel,
    [class*="-modal"] > [class*="-content"]:not([class*="nav"]):not([class*="header"]):not([class*="footer"]):not([class*="body"]) {
        width: 96% !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
    }
}

/* ========================================
   SPECIAL MODAL TYPES
   ======================================== */

/* Slide-out panel modals (like training schema builder) - keep slide behavior but fix positioning */
.modal.slide-panel .modal-content,
.modal-overlay.slide-panel .modal-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 900px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
}

.modal.slide-panel.show .modal-content,
.modal-overlay.slide-panel.show .modal-content,
.modal.slide-panel.active .modal-content,
.modal-overlay.slide-panel.active .modal-content {
    transform: translateX(0) !important;
}

/* Centered detail modals (alternative centered style used in some templates) */
.modal-detail,
.modal .modal-detail,
.modal-overlay .modal-detail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: auto !important;
    background: var(--bg-primary, #ffffff) !important;
    border-radius: 16px !important;
    width: 92% !important;
    max-width: 860px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35) !important;
    animation: modalContentFadeIn 0.25s ease-out !important;
}

/* Delete confirmation modals */
.delete-modal,
.modal.delete-modal,
.delete-modal-overlay .modal-content {
    max-width: 500px !important;
    border: 2px solid #ef4444 !important;
}

/* Folder videos modal specific */
.folder-videos-modal,
.modal .folder-videos-modal {
    max-width: 800px !important;
}

/* ========================================
   MODAL HEADER
   ======================================== */

.modal-header,
.modal .modal-header,
.modal-content .modal-header,
[class*="-modal"] [class*="-header"]:not([class*="page"]):not([class*="section"]):not([class*="card"]) {
    flex-shrink: 0 !important;
    padding: 1.5rem 2rem !important;
    background: var(--bg-primary, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.modal-header h3,
.modal .modal-header h3,
[class*="-modal"] [class*="-header"] h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #1f2937) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.modal-subtitle,
[class*="-modal"] [class*="subtitle"] {
    font-size: 0.875rem !important;
    color: var(--text-secondary, #6b7280) !important;
    margin: 0.25rem 0 0 0 !important;
}

@media (max-width: 640px) {
    .modal-header,
    .modal .modal-header,
    [class*="-modal"] [class*="-header"]:not([class*="page"]):not([class*="section"]):not([class*="card"]) {
        padding: 1.25rem 1.5rem !important;
    }
}

/* ========================================
   MODAL BODY
   ======================================== */

.modal-body,
.modal .modal-body,
.modal-content .modal-body,
[class*="-modal"] [class*="-body"]:not([class*="page"]):not([class*="section"]) {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.5rem 2rem !important;
    background: var(--bg-primary, #ffffff) !important;
}

@media (max-width: 640px) {
    .modal-body,
    .modal .modal-body,
    [class*="-modal"] [class*="-body"]:not([class*="page"]):not([class*="section"]) {
        padding: 1.25rem 1.5rem !important;
    }
}

/* ========================================
   MODAL FOOTER
   ======================================== */

.modal-footer,
.modal .modal-footer,
.modal-content .modal-footer,
[class*="-modal"] [class*="-footer"]:not([class*="page"]):not([class*="section"]):not([class*="card"]) {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    padding: 1rem 2rem !important;
    border-top: 1px solid var(--border-color, #e5e7eb) !important;
    background: var(--bg-primary, #ffffff) !important;
}

@media (max-width: 640px) {
    .modal-footer,
    .modal .modal-footer,
    [class*="-modal"] [class*="-footer"]:not([class*="page"]):not([class*="section"]):not([class*="card"]) {
        padding: 1rem 1.5rem !important;
        flex-direction: column-reverse !important;
    }
    
    .modal-footer button,
    .modal .modal-footer button,
    [class*="-modal"] [class*="-footer"] button {
        width: 100% !important;
    }
}

/* ========================================
   CLOSE BUTTON
   ======================================== */

.btn-close,
.modal .btn-close,
.modal-header .btn-close,
.modal-close-btn,
[class*="-modal"] .modal-close,
[class*="-modal"] [class*="-close"]:not([class*="flash"]):not([class*="alert"]) {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    background: var(--bg-secondary, #f3f4f6) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-secondary, #6b7280) !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    padding: 0 !important;
}

.btn-close:hover,
.modal-close-btn:hover,
[class*="-modal"] .modal-close:hover,
[class*="-modal"] [class*="-close"]:not([class*="flash"]):not([class*="alert"]):hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes modalContentFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   OVERRIDE TEMPLATE-SPECIFIC STYLES
   ======================================== */

/* Fix for templates that use position:fixed on modal-content */
.modal[style*="display: flex"] > div:not(.modal-content):not(.modal-panel):not(.modal-detail),
.modal[style*="display: block"] > div:not(.modal-content):not(.modal-panel):not(.modal-detail),
.modal-overlay[style*="display: flex"] > div:not(.modal-content):not(.modal-panel):not(.modal-detail),
.modal-overlay[style*="display: block"] > div:not(.modal-content):not(.modal-panel):not(.modal-detail),
[class*="-modal"][style*="display: flex"] > div:not([class*="overlay"]),
[class*="-modal"][style*="display: block"] > div:not([class*="overlay"]) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: auto !important;
}

/* Ensure no template can override the centering */
.modal.show > *,
.modal.active > *,
.modal[style*="flex"] > *:not(.modal-overlay):not(.modal-backdrop),
.modal[style*="block"] > *:not(.modal-overlay):not(.modal-backdrop),
[class*="-modal"].show > *:not([class*="overlay"]),
[class*="-modal"].active > *:not([class*="overlay"]),
[class*="-modal"][style*="flex"] > *:not([class*="overlay"]),
[class*="-modal"][style*="block"] > *:not([class*="overlay"]) {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Special fix for modals that might have inline styles */
.modal[style*="display: flex"],
.modal[style*="display: block"],
[class*="-modal"][style*="display: flex"],
[class*="-modal"][style*="display: block"] {
    align-items: center !important;
    justify-content: center !important;
}

/* Fix for any remaining modal variations */
[class*="modal"][class*="overlay"],
[class*="overlay"][class*="modal"] {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

[class*="modal"][class*="overlay"].show,
[class*="modal"][class*="overlay"].active,
[class*="modal"][class*="overlay"][style*="flex"],
[class*="modal"][class*="overlay"][style*="block"] {
    display: flex !important;
}