/* Universal Collapsible Module CSS */

/* Base collapsible styles - only active on mobile */
@media (max-width: 768px) {
    .collapsible-toggle {
        position: relative;
        transition: all 0.3s ease;
    }
    
    /* Hide content when collapsed */
    .collapsible-toggle.collapsed > * {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }
    
    
    /* Keep headers visible when collapsed */
    .collapsible-toggle.collapsed > .collapsible-header,
    .collapsible-toggle.collapsed > .b_title,
    .collapsible-toggle.collapsed > .s_title,
    .collapsible-toggle.collapsed > .section-title,
    .collapsible-toggle.collapsed > .detail-title,
    .collapsible-toggle.collapsed > .title {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin: revert !important;
        padding: revert !important;
        position: relative;
    }

    .collapsible-module .loading-widget{min-height: 0 !important;}
    
    
    /* Show content when expanded */
    .collapsible-toggle:not(.collapsed) > * {
        max-height: 2000px !important;
        opacity: 1 !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }
    

    /* Special handling for different title classes */
    .collapsible-toggle .b_title.collapsible-header::after,
    .collapsible-toggle .s_title.collapsible-header::after,
    .collapsible-toggle .section-title.collapsible-header::after,
    .collapsible-toggle .detail-title.collapsible-header::after,
    .collapsible-toggle .title.collapsible-header::after {
        right: 0;
        font-size: 14px;
    }

    /* Ensure titles remain visible */
    .collapsible-toggle .b_title,
    .collapsible-toggle .s_title, 
    .collapsible-toggle .section-title,
    .collapsible-toggle .detail-title,
    .collapsible-toggle .title {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        position: relative;
    }
}

/* Desktop: Hide all collapsible functionality */
@media (min-width: 769px) {
    .collapsible-header::after {
        display: none !important;
    }
    
    .collapsible-toggle {
        pointer-events: auto;
    }
    
    .collapsible-header {
        cursor: default;
        padding-right: 0;
    }
    
    /* Ensure all content is always visible on desktop */
    .collapsible-toggle > *,
    .collapsible-toggle.collapsed > * {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin: revert !important;
        padding: revert !important;
        position: relative;
    }
}

/* Compatibility with existing .leftbar .collapsible-module styles from company.css */
@media (max-width: 768px) {
    /* Universal collapsible module support - works anywhere, not just in leftbar/rightbar */
    .collapsible-module .module-toggle {
        position: relative;
    }
    
    .collapsible-module .module-toggle::after {
        content: "";
        background-image: url('/frontend/web/images/arrow-icon.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 12px;
        height: 12px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }
    
    .collapsible-module.collapsed .module-toggle::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    
    /* Universal module collapsed content hiding */
    .collapsible-module.collapsed > *:not(.b_title):not(.s_title):not(.detail-title):not(.module-toggle):not(.swot-section) {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }

    
    /* Keep universal headers visible when collapsed */
    .collapsible-module.collapsed > .b_title,
    .collapsible-module.collapsed > .s_title,
    .collapsible-module.collapsed > .detail-title,
    .collapsible-module.collapsed .module-toggle {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin: revert !important;
        padding: revert !important;
        position: relative;
    }
    
    /* Universal module expanded content */
    .collapsible-module:not(.collapsed) > *:not(.b_title):not(.s_title):not(.detail-title):not(.module-toggle) {
        max-height: 2000px !important;
        opacity: 1 !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }
    
    /* Special handling for nested .detail-title.module-toggle elements (like in SWOT page) */
    .collapsible-module .detail-title.module-toggle {
        position: relative;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    .collapsible-module.collapsed .detail-title.module-toggle {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin: revert !important;
        padding: revert !important;
        position: relative;
    }
}