/**
 * Universal Modal Sidebar Awareness System - CSS
 * 
 * Provides dynamic modal positioning based on sidebar state across all pages.
 * Works in conjunction with universal-modal-sidebar.js to automatically adjust
 * modal positioning when the sidebar is expanded, collapsed, or hidden.
 * 
 * Features:
 * - Responsive modal positioning for desktop and mobile
 * - Smooth transitions between sidebar states
 * - No conflicts with existing Bootstrap modal styles
 * - Graceful degradation if JavaScript fails
 * 
 * Requirements: All CSS-related requirements from universal-modal-sidebar-fix specification
 * 
 * @version 1.0.0
 * @author LS-DOP Development Team
 */

/* ============================================================================
   Desktop Sidebar-Aware Modal Positioning
   Requirements: 3.1, 3.2, 3.3, 7.1, 7.2
   ============================================================================ */

@media (min-width: 769px) {
    /**
     * Expanded sidebar state (250px width)
     * Requirements: 3.1
     * 
     * When sidebar is expanded, offset modal to the right to avoid overlap.
     * The sidebar width is 250px, so we offset by that amount and reduce
     * the modal's max-width accordingly.
     */
    .modal-dialog.sidebar-expanded {
        margin-left: 280px !important;
        margin-right: 1.75rem !important;
        max-width: calc(100% - 280px - 3.5rem) !important;
        width: calc(100% - 280px - 3.5rem) !important;
    }
    
    /**
     * Collapsed sidebar state (60px width)
     * Requirements: 3.2
     * 
     * When sidebar is collapsed, use smaller offset since sidebar is narrower.
     * The collapsed sidebar width is 60px, so we offset by 80px (60px + 20px margin).
     */
    .modal-dialog.sidebar-collapsed {
        margin-left: 80px !important;
        margin-right: 1.75rem !important;
        max-width: calc(100% - 80px - 3.5rem) !important;
        width: calc(100% - 80px - 3.5rem) !important;
    }
    
    /**
     * Smooth transitions between sidebar states
     * Requirements: 3.4, 3.5
     * 
     * Provides smooth animation when sidebar state changes or window is resized.
     * Uses 0.3s ease timing to match sidebar transition timing.
     */
    .modal-dialog {
        transition: margin-left 0.3s ease, max-width 0.3s ease, width 0.3s ease !important;
    }
    
    /**
     * Hidden sidebar state (no offset needed)
     * Requirements: 3.3
     * 
     * When sidebar is hidden (or doesn't exist), modal uses default Bootstrap positioning.
     * No additional CSS needed - this is the default state.
     */
}

/* ============================================================================
   Mobile Responsive Behavior
   Requirements: 7.1, 7.2, 7.3, 7.4
   ============================================================================ */

/**
 * Mobile viewport (≤768px)
 * Requirements: 7.1, 7.2
 * 
 * On mobile, sidebar is hidden, so modal should use full available width.
 * Override any sidebar-aware positioning classes that might be applied.
 */
@media (max-width: 768px) {
    .modal-dialog,
    .modal-dialog.sidebar-expanded,
    .modal-dialog.sidebar-collapsed {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
}

/* ============================================================================
   Modal Content and Body Optimization
   Requirements: 3.1, 3.2, 3.3
   ============================================================================ */

/**
 * Ensure modal content doesn't overflow
 * Requirements: 3.1, 3.2, 3.3
 * 
 * Prevents content from overflowing when modal width is constrained
 * by sidebar positioning.
 */
.modal-content {
    max-width: 100%;
    overflow: hidden;
}

/**
 * Modal body scrolling
 * Requirements: 3.1, 3.2, 3.3
 * 
 * Ensures modal body can scroll if content is too tall,
 * while maintaining proper positioning relative to sidebar.
 */
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* ============================================================================
   Utility Classes for Manual Control
   Requirements: 5.4
   ============================================================================ */

/**
 * Disable sidebar awareness for specific modals
 * Requirements: 5.4
 * 
 * Apply this class to a modal to disable the universal sidebar awareness
 * and use default Bootstrap positioning instead.
 * 
 * Usage: <div class="modal modal-sidebar-aware-disabled">
 */
.modal-sidebar-aware-disabled .modal-dialog {
    margin-left: 1.75rem !important;
    margin-right: 1.75rem !important;
    max-width: calc(100% - 3.5rem) !important;
    transition: none !important;
}

/**
 * Force full-width modal (ignore sidebar)
 * Requirements: 5.4
 * 
 * Apply this class to force a modal to use full width regardless of sidebar state.
 * Useful for modals that need maximum space.
 * 
 * Usage: <div class="modal modal-full-width">
 */
.modal-full-width .modal-dialog {
    margin-left: 1.75rem !important;
    margin-right: 1.75rem !important;
    max-width: calc(100% - 3.5rem) !important;
}

/* ============================================================================
   Modal Backdrop and Z-Index Management
   Requirements: 3.1, 3.2, 3.3
   ============================================================================ */

/**
 * Ensure modal and backdrop have proper z-index
 * Requirements: 3.1, 3.2, 3.3
 * 
 * Z-Index层级（从低到高）:
 * 1040 - Header
 * 1045 - Modal Backdrop（遮罩层）
 * 1050 - Sidebar
 * 1055 - Modal（弹窗本身）
 * 
 * 这样确保：
 * - Backdrop 在 Sidebar 下面（不遮挡 Sidebar）
 * - Modal 在 Sidebar 上面（不被 Sidebar 遮挡）
 * - Backdrop 在 Modal 下面（可以点击 Modal 内容）
 */

/* Modal backdrop - 在 sidebar 下面，但在 header 上面 */
.modal-backdrop {
    z-index: 1045 !important;
    position: fixed !important;
}

/* Modal container - 在 sidebar 和 backdrop 上面 */
.modal {
    z-index: 1055 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
}

/* Ensure modal is displayed correctly */
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal dialog - 确保在 modal 容器内正确显示 */
.modal-dialog {
    position: relative !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Modal content - 确保可以交互 */
.modal-content {
    position: relative !important;
    pointer-events: auto !important;
}

/* ============================================================================
   Responsive Modal Sizing
   Requirements: 7.3, 7.4
   ============================================================================ */

/**
 * Tablet viewport (769px - 1024px)
 * Requirements: 7.3
 * 
 * On tablets, provide slightly more margin for better readability.
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-dialog.sidebar-expanded {
        margin-left: 280px;
        max-width: calc(100% - 280px - 2rem);
    }
    
    .modal-dialog.sidebar-collapsed {
        margin-left: 80px;
        max-width: calc(100% - 80px - 2rem);
    }
}

/**
 * Large desktop viewport (>1400px)
 * Requirements: 7.4
 * 
 * On large screens, provide more breathing room for modals.
 */
@media (min-width: 1400px) {
    .modal-dialog.sidebar-expanded {
        margin-left: 280px;
        max-width: calc(100% - 280px - 4rem);
    }
    
    .modal-dialog.sidebar-collapsed {
        margin-left: 80px;
        max-width: calc(100% - 80px - 4rem);
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

/**
 * Print-friendly modal styles
 * 
 * When printing, remove sidebar offsets and use full width.
 */
@media print {
    .modal-dialog,
    .modal-dialog.sidebar-expanded,
    .modal-dialog.sidebar-collapsed {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================================
   Accessibility Enhancements
   Requirements: 6.1, 6.2, 6.3, 6.4
   ============================================================================ */

/**
 * Focus visible styles for modal elements
 * Requirements: 6.1, 6.2
 * 
 * Ensures keyboard navigation is clearly visible.
 */
.modal-dialog:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/**
 * Reduced motion support
 * Requirements: 6.3
 * 
 * Respects user's preference for reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
    .modal-dialog {
        transition: none !important;
    }
}

/* ============================================================================
   Browser-Specific Fixes
   ============================================================================ */

/**
 * Safari-specific fixes
 * 
 * Safari sometimes has issues with calc() in max-width.
 * This ensures proper rendering.
 */
@supports (-webkit-appearance: none) {
    @media (min-width: 769px) {
        .modal-dialog.sidebar-expanded {
            max-width: calc(100vw - 280px - 3.5rem);
        }
        
        .modal-dialog.sidebar-collapsed {
            max-width: calc(100vw - 80px - 3.5rem);
        }
    }
}

/* ============================================================================
   Debug Mode Styles (Optional)
   ============================================================================ */

/**
 * Debug mode visual indicators
 * 
 * Add 'debug-mode' class to body to enable visual debugging.
 * Shows colored borders to indicate sidebar state.
 * 
 * Usage: document.body.classList.add('debug-mode');
 */
.debug-mode .modal-dialog.sidebar-expanded {
    border: 3px solid #28a745;
}

.debug-mode .modal-dialog.sidebar-collapsed {
    border: 3px solid #ffc107;
}

.debug-mode .modal-dialog:not(.sidebar-expanded):not(.sidebar-collapsed) {
    border: 3px solid #dc3545;
}