﻿/* Gère les variables. */

.app-with-two-sidebar {
    --id3c-sidebar-end-minified-width: 45px;
    --id3c-sidebar-end-width: 345px;
    --id3c-sidebar-end-expanded-width: 600px;
    --id3c-sidebar-end-minified-right-gap: 0;
    --id3c-sidebar-end-right-gap: calc(0px - var(--id3c-sidebar-end-width));
    --id3c-sidebar-end-expanded-right-gap: calc(0px - var(--id3c-sidebar-end-expanded-width));
    --id3c-header-height: 50px;
    --id3c-content-margin-right: var(--id3c-sidebar-end-minified-width);
    --id3c-scroll-to-top-margin-right: calc(var(--id3c-content-margin-right) - var(--id3c-sidebar-end-minified-width));
    --id3c-sidebar-bg: var(--app-sidebar-bg);
    --id3C-sidebar-component-color: var(--app-sidebar-component-color);
    --id3c-sidebar-section-component-color: rgba(var(--app-sidebar-component-color-rgb),.6);
    --id3c-sidebar-section-item-media-body-max-width: 270px;
    --id3c-sidebar-expanded-section-item-background-color: rgba(var(--bs-gray-600-rgb),.8);
    --id3c-sidebar-end-animation: none;
}

    .app-with-two-sidebar.app-sidebar-end-toggled,
    .app-with-two-sidebar.app-sidebar-end-mobile-toggled {
        --id3c-sidebar-end-right-gap: var(--id3c-sidebar-end-minified-width);
        --id3c-content-margin-right: calc(var(--id3c-sidebar-end-minified-width) + var(--id3c-sidebar-end-width));
    }

    .app-with-two-sidebar.app-sidebar-end-expanded-toggled {
        --id3c-sidebar-end-expanded-right-gap: calc(var(--id3c-sidebar-end-minified-width) + var(--id3c-sidebar-end-width));
    }

    .app-with-two-sidebar.app-sidebar-end-mobile-toggled {
        --id3c-sidebar-end-width: calc(100% - var(--id3c-sidebar-end-minified-width));
        --id3c-sidebar-end-expanded-width: 100%;
    }

        .app-with-two-sidebar.app-sidebar-end-mobile-toggled.app-sidebar-end-expanded-toggled {
            --id3c-sidebar-end-expanded-right-gap: 0;
        }

    .app-with-two-sidebar .connected-user-created-message {
        --id3c-sidebar-expanded-section-item-background-color: rgba(var(--bs-gray-600-rgb),.4);
    }

    .app-with-two-sidebar .maximized {
        --id3c-content-margin-right: 0;
    }

@media (max-width: 767.98px) {
    .app-with-two-sidebar {
        --id3c-header-height: 101px;
        --id3c-sidebar-section-item-media-body-max-width: var(--id3c-sidebar-end-width);
    }
}

/* Menus de droite. */

.app-with-two-sidebar .app-sidebar.app-sidebar-end-minified,
.app-with-two-sidebar .app-sidebar.app-sidebar-end,
.app-with-two-sidebar .app-sidebar.app-sidebar-end-expanded {
    padding-top: 0;
    top: var(--id3c-header-height);
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end-minified,
.app-with-two-sidebar .app-sidebar.app-sidebar-end-expanded {
    animation: var(--id3c-sidebar-end-animation) !important;
    left: auto !important;
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end,
.app-with-two-sidebar .app-sidebar.app-sidebar-end-expanded {
    color: var(--id3C-sidebar-component-color);
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end-minified {
    right: var(--id3c-sidebar-end-minified-right-gap);
    width: var(--id3c-sidebar-end-minified-width) !important;
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end {
    right: var(--id3c-sidebar-end-right-gap) !important;
    width: var(--id3c-sidebar-end-width);
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end-expanded {
    right: var(--id3c-sidebar-end-expanded-right-gap);
    width: var(--id3c-sidebar-end-expanded-width) !important;
}

/* Adaptation du thème. */

.app-with-two-sidebar .app-content,
.app-with-two-sidebar .page-footer-fixed {
    margin-right: var(--id3c-content-margin-right) !important;
}

.app-with-two-sidebar .btn-scroll-to-top {
    margin-right: var(--id3c-scroll-to-top-margin-right) !important;
}

.app-with-two-sidebar.app-sidebar-end-expanded-toggled .btn-scroll-to-top {
    z-index: unset;
}

.app-with-two-sidebar.app-sidebar-minified .app-sidebar.app-sidebar-end {
    right: var(--id3c-sidebar-end-right-gap) !important;
    width: var(--id3c-sidebar-end-width) !important;
}

/* Éléments du menu de droite. */
.app-with-two-sidebar .app-sidebar-end-minified .menu .menu-item:first-child .menu-link .menu-icon {
    /* Note : Correspond à la classe mt-2. */
    margin-top: calc(2 * .46875rem) !important;
}

.app-with-two-sidebar .app-sidebar-end-minified .menu .menu-item .menu-link {
    justify-content: center;
    padding: 7px 20px !important;
}

    .app-with-two-sidebar .app-sidebar-end-minified .menu .menu-item .menu-link:empty {
        padding: 0 !important;
    }

.app-with-two-sidebar .app-sidebar-end-minified .menu .menu-item.active .menu-link {
    background-color: transparent;
}

/* Sections du menu de droite. */

.app-with-two-sidebar .sidebar-right-section.active {
    height: calc(100vh - var(--id3c-header-height));
}

.app-with-two-sidebar .sidebar-right-section .sidebar-right-section-items,
.app-with-two-sidebar .sidebar-right-expanded-section .sidebar-right-expanded-section-items {
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

.app-with-two-sidebar .sidebar-right-section:not(.active),
.app-with-two-sidebar .sidebar-right-expanded-section:not(.active) {
    display: none !important;
}

.app-with-two-sidebar .sidebar-right-section .sidebar-right-section-subtitle {
    margin-left: 2.35em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Éléments d'une section du menu de droite. */

.app-with-two-sidebar .sidebar-right-section form,
.app-with-two-sidebar .sidebar-right-section .media {
    border: 1px solid var(--id3c-sidebar-section-component-color);
    border-left: none;
    border-right: none;
    color: var(--id3c-sidebar-section-component-color);
    /* Note : Correspond aux classes mx-2 et p-2. */
    margin-left: .46875rem !important;
    margin-right: .46875rem !important;
    padding: .46875rem !important;
    white-space: nowrap;
}

.app-with-two-sidebar .sidebar-right-section .media {
    cursor: pointer;
    display: flex;
}

    .app-with-two-sidebar .sidebar-right-section .media.active,
    .app-with-two-sidebar .sidebar-right-section .media:hover {
        color: var(--id3C-sidebar-component-color);
    }

        .app-with-two-sidebar .sidebar-right-section .media.active .media-heading,
        .app-with-two-sidebar .sidebar-right-section .media.active .media-content {
            white-space: normal;
        }

    .app-with-two-sidebar .sidebar-right-section form:not(.sidebar-right-section-form-hidden) + .sidebar-right-section-items .media:first-of-type,
    .app-with-two-sidebar .sidebar-right-section .media + .media,
    .app-with-two-sidebar .sidebar-right-section .media + .sidebar-item-update-form,
    .app-with-two-sidebar .sidebar-right-section .sidebar-item-update-form + .media {
        border-top: none;
    }

    .app-with-two-sidebar .sidebar-right-section .media .media-left {
        padding-right: 12px;
    }

        .app-with-two-sidebar .sidebar-right-section .media .media-left .media-object {
            color: var(--id3C-sidebar-component-color);
            font-size: 21px;
            line-height: 38px;
            width: 38px;
        }

        .app-with-two-sidebar .sidebar-right-section .media .media-left .media-object-link {
            text-decoration: none;
        }

            .app-with-two-sidebar .sidebar-right-section .media .media-left .media-object-link .media-object-icon {
                background: var(--id3c-sidebar-bg);
                border: 3px solid var(--id3c-sidebar-bg);
                color: var(--id3c-sidebar-section-component-color);
                display: block;
                font-size: 14px;
                height: 21px;
                margin-left: 17px;
                margin-top: -12px;
                position: relative;
                width: 21px;
            }

                .app-with-two-sidebar .sidebar-right-section .media .media-left .media-object-link .media-object-icon:hover {
                    color: var(--id3C-sidebar-component-color);
                }

    .app-with-two-sidebar .sidebar-right-section .media .media-body {
        max-width: var(--id3c-sidebar-section-item-media-body-max-width);
        width: 100%;
    }

        .app-with-two-sidebar .sidebar-right-section .media .media-body .media-heading {
            color: var(--id3C-sidebar-component-color);
            font-size: 12.5px;
            line-height: 18px;
            margin-bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-with-two-sidebar .sidebar-right-section .media .media-body p {
            font-size: 11px;
            line-height: 16px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-with-two-sidebar .sidebar-right-section .media .media-body .media-buttons > :not(:first-child) {
            margin-left: 2px;
        }

/* Éléments du menu de droite étendu. */

.app-with-two-sidebar .sidebar-right-expanded-section.active {
    height: 100%;
}

.app-with-two-sidebar .app-sidebar-end-expanded .message-item {
    background-color: var(--id3c-sidebar-expanded-section-item-background-color);
    max-width: 80%;
}

    .app-with-two-sidebar .app-sidebar-end-expanded .message-item .message-item-header {
        color: var(--id3c-sidebar-section-component-color);
    }

        .app-with-two-sidebar .app-sidebar-end-expanded .message-item .message-item-header a {
            color: var(--id3c-sidebar-section-component-color);
            text-decoration-color: var(--id3c-sidebar-section-component-color);
        }

.app-with-two-sidebar .app-sidebar-end-expanded .unseen-messages-bar hr {
    display: inline-block;
    margin: 0px 5px;
    vertical-align: middle;
    width: 38%;
}

/* Adaptation des composants */

@media (max-width: 767.98px) {
    .app-with-two-sidebar .list-buttons,
    .app-with-two-sidebar .panel-buttons {
        margin-right: var(--id3c-content-margin-right);
    }
}

.app-with-two-sidebar .app-sidebar.app-sidebar-end .select2-container--default .select2-selection--multiple {
    border-color: var(--app-component-border-color) !important;
}

.app-with-two-sidebar.app-sidebar-end-toggled .app-sidebar.app-sidebar-end .fc .fc-button {
    font-size: .6875rem !important;
    padding: 2px 6px !important;
}

.app-with-two-sidebar.app-sidebar-end-toggled .app-sidebar.app-sidebar-end .fc .fc-scrollgrid {
    border-collapse: collapse;
}
