/* /MainPage/MainPage.css */

.MainPageContentArea {
    --MainPageHeaderHeight: 50px;
}

.MainPageContentArea {
    width: 100%;
    height: 100%;

    background-color: var(--mainPageBgColor);
    color: var(--textColor);

    .MainPageHeader {
        width: 100%;
        height: var(--MainPageHeaderHeight);

        display: flex;
        justify-content: space-between;
        align-items: center;

        background-color: var(--mainPageHeaderBgColor);
        border-bottom: 1px solid var(--mainPageBorderColor);

        .MainPageHeaderLeftContent {
            display: flex;
            align-items: center;
            gap: 16px;

            .MainPageBurgerToggle {
                background: none;
                color: var(--textColor);

                border: none;

                font-size: 24px;

                cursor: pointer;
            }

            .MainPageTitle {
                font-size: 20px;
                font-weight: bold;
                text-decoration: none;
                color: var(--textColor);
            }

            .ThemeToggleButton {
                width: 24px;
                height: 24px;

                background: none;
                border: none;

                cursor: pointer;

                .ThemeIcon {
                    width: 24px;
                    height: 24px;
                    fill: var(--textColor);
                }
            }
        }
    }

    .MainPageContent {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;

        .MainPageContentBody {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 0;
            flex: 1;
            background-color: var(--mainPageBodyBgColor);
        }
    }

    .MainPageContent {
        height: calc(100% - 51px); /*100% - hauteur MainPageHeader et sa border bottom*/
        min-height: 0;
        .MainPageContentModuleBar {
            z-index: 11;
            .MainPageContentModuleBarContent {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                flex: 1;

                .MainPageContentModuleBarModules {
                    display: flex;
                    flex-direction: column;

                    .MainPageContentModuleBarOrganizationModules,
                    .MainPageContentModuleBarHealthAndWellBeingModules {
                        .MainPageContentModuleBarOrganizationModulesHeader,
                        .MainPageContentModuleBarHealthAndWellBeingModulesHeader {
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--textColor);
                            cursor: pointer;
                            border: none;
                        }
                        .MainPageContentModuleBarOrganizationModulesBody,
                        .MainPageContentModuleBarHealthAndWellBeingModulesBody {
                            display: none;
                            overflow: hidden;
                            max-height: 0;
                            opacity: 0;
                            transition:
                                max-height 0.3s ease-out,
                                opacity 0.3s ease-out;

                            div button {
                                background-color: var(--mainPageButtonBgColor);
                                border: none;
                                color: var(--textColor);
                                cursor: pointer;
                            }
                        }
                        .show {
                            display: flex;
                            flex-direction: column;
                            max-height: 1000px;
                            opacity: 1;
                            transition:
                                max-height 0.5s ease-in,
                                opacity 0.3s ease-in;
                        }
                    }
                }
            }
        }

        .MainPageContentModuleBarSupport {
            font-size: 14px;
            color: var(--textColor);

            .MainPageContentModuleBarSupportBody {
                display: flex;
                flex-direction: column;
                gap: 8px;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transition:
                    max-height 0.3s ease-out,
                    opacity 0.2s ease-out,
                    visibility 0s linear 0.3s;

                &.show {
                    max-height: 1000px;
                    opacity: 1;
                    visibility: visible;
                    transition:
                        max-height 0.5s ease-in,
                        opacity 0.3s ease-in,
                        visibility 0s linear 0s;
                }

                div button {
                    background-color: var(--mainPageButtonBgColor);
                    border: none;
                    color: var(--textColor);
                    cursor: pointer;
                }
            }
        }
    }

    .MainPageContentModuleBar {
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Empêche le contenu de dépasser */

        position: absolute;
        top: var(--MainPageHeaderHeight);
        left: 0;

        width: 320px;
        height: calc(100% - var(--MainPageHeaderHeight));

        background-color: var(--mainPageModuleBarBgColor);
        border-right: 1px solid var(--mainPageBorderColor);

        transform: translateX(-100%); /* Masquée par défaut */
        transition: transform 0.3s ease;

        &.visible {
            display: flex;
            justify-content: space-between;
            transform: translateX(0);
        }

        .MainPageContentModuleBarAccount {
            display: flex;
            flex-direction: row;
            align-items: center;

            border-top: 1px solid var(--mainPageBorderColor);

            .MainPageIconButton {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;

                background-color: var(--mainPageBgColor);
                color: var(--textColor);

                width: 200px;
                height: 48px;

                border: none;

                cursor: pointer;

                img {
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
}

/* Smartphones */
@media (max-width: 767px) {
    .MainPageContentArea {
        .MainPageContent {
            display: flex;
            flex-direction: row;

            .MainPageContentModuleBar {
                position: absolute;
                top: var(--MainPageHeaderHeight);
                left: 0;

                width: min(92%, 380px);
                height: calc(100% - var(--MainPageHeaderHeight));

                background-color: var(--mainPageModuleBarBgColor);
                border-right: 1px solid var(--mainPageBorderColor);

                transform: translateX(-100%);
                transition: transform 0.3s ease;

                display: flex;
                flex-direction: column;

                overflow: hidden;
                &.visible {
                    transform: translateX(0);
                }

                .MainPageContentModuleBarContent {
                    min-height: 0;
                    overflow-y: auto;
                    overscroll-behavior: contain;
                    padding: 8px 10px 14px;
                    scrollbar-width: thin;
                }

                .MainPageContentModuleBarOrganizationModulesHeader,
                .MainPageContentModuleBarHealthAndWellBeingModulesHeader,
                .MainPageContentModuleBarSupportHeader {
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    min-height: 58px;
                    margin: 4px 0;
                    padding: 10px 44px 10px 14px;
                    border-radius: 10px;
                    background-color: var(--mainPageCardBgColor);
                    font-size: 17px;
                    line-height: 1.25;
                    touch-action: manipulation;
                    user-select: none;

                    &::after {
                        position: absolute;
                        right: 15px;
                        top: 50%;
                        display: grid;
                        place-items: center;
                        width: 26px;
                        height: 26px;
                        border-radius: 50%;
                        background-color: var(--mainPageButtonBgColor);
                        content: "⌄";
                        font-size: 19px;
                        line-height: 1;
                        transform: translateY(-50%);
                    }

                    &:active {
                        background-color: var(--activeElementHoverColor);
                    }

                    &:has(+ .show)::after {
                        transform: translateY(-50%) rotate(180deg);
                    }
                }

                .MainPageContentModuleBarOrganizationModulesBody,
                .MainPageContentModuleBarHealthAndWellBeingModulesBody {
                    gap: 6px;

                    > div {
                        display: flex;
                        align-items: center;
                        min-height: 60px;
                        padding: 6px 10px;
                        border: 1px solid var(--mainPageBorderColor);
                        border-radius: 10px;
                        background-color: var(--mainPageButtonBgColor);

                        > svg {
                            flex: 0 0 36px;
                            width: 36px;
                            height: 36px;
                            margin-right: 12px !important;
                        }

                        > button {
                            align-self: stretch;
                            flex: 1;
                            min-width: 0;
                            min-height: 48px;
                            padding: 8px 4px;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 1.25;
                            text-align: left;
                            touch-action: manipulation;
                        }
                    }
                }

                .MainPageContentModuleBarSupport {
                    margin-top: 6px;
                    font-size: 16px;
                }

                .MainPageContentModuleBarSupportBody {
                    gap: 6px;

                    > div {
                        display: flex;
                        align-items: stretch;
                        min-height: 60px;
                        padding: 6px 10px;
                        border: 1px solid var(--mainPageBorderColor);
                        border-radius: 10px;
                        background-color: var(--mainPageButtonBgColor);

                        > button {
                            flex: 1;
                            width: 100%;
                            min-width: 0;
                            min-height: 48px;
                            padding: 8px 4px;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 1.25;
                            text-align: left;
                            touch-action: manipulation;
                        }

                        &:active {
                            background-color: var(--activeElementHoverColor);
                        }
                    }
                }
            }
            .MainPageContentBody {
                height: 100%;
                &.expanded {
                }
            }
        }
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .MainPageContentArea {
        .MainPageContent {
            display: flex;
            flex-direction: row;

            .MainPageContentModuleBar {
                position: absolute;
                top: var(--MainPageHeaderHeight);
                left: 0;

                width: 400px;
                height: calc(100% - var(--MainPageHeaderHeight));

                background-color: var(--mainPageModuleBarBgColor);
                border-right: 1px solid var(--mainPageBorderColor);

                transform: translateX(-100%);
                transition: transform 0.3s ease;

                display: flex;
                flex-direction: column;

                overflow: hidden;
                &.visible {
                    transform: translateX(0);
                }
            }
            .MainPageContentBody {
                height: calc(100% - var(--MainPageHeaderHeight));
                &.expanded {
                }
            }
        }
    }
}

/* Petits laptops */
@media (min-width: 1025px) and (max-width: 1919px) {
    .MainPageContentArea {
        .MainPageContent {
            display: flex;
            flex-direction: row;

            .MainPageContentModuleBar {
                position: absolute;
                top: var(--MainPageHeaderHeight);
                left: 0;

                width: 320px;
                height: calc(100% - var(--MainPageHeaderHeight));

                background-color: var(--mainPageModuleBarBgColor);
                border-right: 1px solid var(--mainPageBorderColor);

                transform: translateX(-100%);
                transition: transform 0.3s ease;

                display: flex;
                flex-direction: column;

                overflow: hidden;
                &.visible {
                    transform: translateX(0);
                }
            }
            .MainPageContentBody {
                height: 100% ;
            }
        }
    }
}

/* Desktop */
@media (min-width: 1920px) {
    .MainPageContentArea {
        .MainPageContent {
            display: flex;
            flex-direction: row;
            .MainPageContentModuleBar {
                transform: translateX(-100%);
                transition: transform 0.3s ease; /* ← TRANSITION PRÉSENTE */

                width: 400px;
                height: calc(100% - var(--MainPageHeaderHeight));
                border-right: 1px solid var(--mainPageBorderColor);
                &.visible {
                    transform: translateX(0);
                }
            }
            .MainPageContentBody {
                height: 100%;
            }
        }
    }
}