/*------------------------------------------------------------------------------------------------------------------------------------------
    MIXERGRID CONTAINER
------------------------------------------------------------------------------------------------------------------------------------------*/
#mixer-grid-container {
    flex-direction                           : column;
    width                                    : 100%;
    position                                 : relative;
    margin-top                               : 0.5rem;

    --main-bg-explain-color                  : var(--background-color-secondary-bis);
    --main-bg-highlight-color                : var(--grey-40);
    --box-shadow-color                       : rgba(0, 0, 0, 0.26);
    --box-shadow-columns-header              : 5px 5px 15px 5px var(--box-shadow-color);
    --box-shadow-rows-header                 : 5px 5px 15px 7px var(--box-shadow-color);

    /* Vu Meter */
    --vu-meter-width                         : 10px;
    --vu-meter-height                        : 20px;

    /* Cell */
    --cross-width                            : 25px;
    --cross-height                           : 25px;

    /* Border */
    --border-color                           : var(--grey-80);
    --border-transparent                     : transparent;

    /* Colonnes */
    --col-card-title-height                  : 60px;
    --col-channel-groups-title-height        : 40px;
    --col-channel-names-height               : 180px;
    --col-channel-names-title-height         : 100px;
    --col-vu-meter-margin-bottom             : 8px;
    --col-vu-meter-margin-top                : 5px;

    --total-columns-height                   : calc(
            var(--col-card-title-height) +
            var(--col-channel-groups-title-height) +
            var(--col-channel-names-title-height) +
            var(--vu-meter-height) +
            var(--vu-meter-height) +
            var(--vu-meter-height) +
            var(--border-large)
    );

    /* Lignes */
    --row-card-title-width                   : 120px;
    --row-channel-groups-title-width         : 95px;
    --row-channel-names-title-width          : 110px;
    --row-channel-names-vu-meter-margin      : 8px;
    --row-channel-names-title-padding-left   : 7px;

    --row-channel-name-interval-width : 155px;

    --margin-left-matrix-header              : calc(
            var(--row-card-title-width) +
            var(--row-channel-groups-title-width) +
            var(--row-channel-names-title-width) +
            var(--vu-meter-width) +
            var(--vu-meter-width) +
            var(--row-channel-names-vu-meter-margin) +
            var(--row-channel-names-vu-meter-margin) +
            var(--row-channel-names-title-padding-left) +
            var(--cross-width) +
            calc(var(--border-large) * 5)
    );

    /* Z-Index */
    --z-index-slices                         : 6;
    --z-index-input-box-headers-rows         : 22;
    --z-index-input-box-headers-cols         : 21;
    --z-index-rows                           : 3;
    --z-index-columns                        : 2;
    --z-index-input-box-cells                : 4;

    /* Sticky */
    --sticky-col-header-end-top: 5px;
    --sticky-row-header-end-left: 5px;
    --sticky-row-trim-end-left: 125px;
    --sticky-row-vumeter-end-left: 154px;

}
.squared {
    width  : var(--cross-width);
    height : var(--cross-height);
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    STICKY-CONTAINER (COLUMNS NAMES VISIBLES)
------------------------------------------------------------------------------------------------------------------------------------------*/
.sticky-container {
    display: flex;
    flex-direction: row;
    z-index: var(--z-index-columns);
    position: relative;
    width: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left:  calc(var(--margin-left-matrix-header) + var(--border-normal));

    &.is-sticky{
        position: sticky;
        top: var(--sticky-col-header-end-top);
        transition: top 0.1s ease-out;
    }

    .channels-name {
        display: flex;
        flex-direction: column;
        align-content: center;
        width: var(--cross-width);
        height: 200px;
        border-bottom: var(--border-large) solid transparent;
        border-right: var(--border-medium) solid transparent;
        &:first-child{
            border-left : var(--border-large) solid transparent;
            &.is-collapsed{
                border-left : var(--border-large) solid transparent;
            }
        }
        &:nth-child(8n) {
            border-right : 4px solid transparent;
        }
        &:last-child {
            border-right : var(--border-large) solid transparent;
        }
        &.highlight{
            background-color : var(--grey-40) !important;
        }
        &.is-collapsed{
            border-right : var(--border-large) solid transparent;
        }
    }

    .channels-name-title {
        &.columns{
            width: 100%;
            height: 60%;
            border-radius: var(--border-radius);

            p {
                margin-left   : -39px;
                margin-top    : 36px;
                transform     : rotate(-90deg);
                overflow      : hidden;
                white-space   : nowrap;
                text-overflow : ellipsis;
                width         : fit-content;
                min-width     : var(--col-channel-names-title-height);
            }

            &.highlight{
                background-color : var(--grey-40) !important;
            }

            &.is-sticky {
                box-shadow: var(--box-shadow-columns-header);
                border-radius: var(--border-radius);
            }
        }
    }

    .channel-name-input {
        width: 100%;
        height: 60%;
        box-sizing: border-box; /* Important pour que le padding/border ne depasse pas */
        text-align: center;
        border: 1px solid #007bff; /* Ou une autre couleur de focus */
        background-color: #333;
        color: #fff;

        &.columns {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
        }
    }

    .channels-name-trim-value {
        &.columns {
            display          : flex;
            justify-content  : center;
            align-items      : center;
            border-radius    : var(--border-radius);
            background-color : var(--background-color-tertiary);
            cursor           : pointer;
            position         : relative;
            margin-top       : 0;
            margin-bottom    : 0;
            transition       : height 0.2s ease-in-out, margin-top 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
            height           : var(--cross-height);
            width            : var(--cross-width);
            font-size        : small;

            &:hover {
                overflow      : visible;
                height        : 35px;
                margin-top    : -5px;
                margin-bottom : -5px;
                z-index       : 20;
            }

            &.is-sticky {
                box-shadow       : var(--box-shadow-columns-header);
            }
        }
        &.highlight{
            background-color : var(--grey-40) !important;
        }
    }

    .channels-name-vumeter {
        &.columns{
            align-self       : center;
            width            : var(--vu-meter-width);
            min-height       : var(--vu-meter-height);
            border-radius    : var(--border-radius);
            margin-bottom    : var(--col-vu-meter-margin-bottom);
            margin-top       : var(--col-vu-meter-margin-top);
            background-color : black
        }
    }

    .channels-name-interval {
        &.columns{
        width: 100%;
        height: 90%;
        border-radius: var(--border-radius);
        align-items: center;
        justify-content: center;

            p {
                transform     : rotate(-90deg);
                overflow      : hidden;
                white-space   : nowrap;
                text-overflow : ellipsis;
                width         : fit-content;
                min-width     : var(--col-channel-names-title-height);
                text-align: center;
            }

            &.highlight{
                background-color : var(--grey-40) !important;
            }
            &.is-sticky{
                background-color: var(--background-color-secondary-bis);
                box-shadow: var(--box-shadow-columns-header);
                border-radius: var(--border-radius);
            }
       }
    }
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MAIN HEADER CONTAINER
------------------------------------------------------------------------------------------------------------------------------------------*/
.main-header-container {
    display         : flex;
    width           : 100%;
    border-collapse : collapse;
    position        : relative;
    margin-bottom   : -205px;

    /*--------------------------------------------------------------------------
        CARD NAME
    --------------------------------------------------------------------------*/
    .card-name {
        display          : flex;
        position         : relative;
        background-color : var(--background-color-secondary-bis);
        box-sizing: border-box;

        &.columns {
            flex-direction          : column;
            text-align              : left;
            border-top              : 4px solid;
            border-top-color        : var(--element-color-brand);
            border-top-left-radius  : var(--border-radius);
            border-top-right-radius : var(--border-radius);
            margin-left : calc(var(--margin-left-matrix-header) + 1px);
        }

        &.rows {
            border-left               : 4px solid;
            border-top-left-radius    : var(--border-radius);
            border-bottom-left-radius : var(--border-radius);
            border-left-color         : var(--element-color-brand);
        }

        /* Card Name Title */
        .card-name-title {
            overflow      : hidden;
            white-space   : nowrap;
            text-overflow : ellipsis;

            &.columns {
                padding : 5px 0 12px 5px;
            }

            &.rows {
                padding : 5px 0 0 5px;
                width   : var(--row-card-title-width);
            }
        }

        /*--------------------------------------------------------------------------
            INTERVALS
        --------------------------------------------------------------------------*/
        .intervals-container {
            display : flex;

            &.columns {
                flex-direction : row;
            }

            &.rows {
                flex-direction : column;
            }

            .intervals {
                display         : flex;
                border-collapse : collapse;
                text-align      : left;
                position        : relative;

                &.columns {
                    flex-direction : column;
                }

                &.rows {
                    flex-direction : row;
                    border-top     : 1px solid var(--grey-80);
                }

                .intervals-title {
                    &.rows {
                        display     : flex;
                        align-items : baseline;
                        width       : var(--row-channel-groups-title-width);
                    }

                    &.columns {
                        display          : flex;
                        align-items      : center;
                        transform-origin : bottom;
                        transform        : rotate(-90deg);
                        position         : absolute;
                        gap              : 25px;
                        left             : -25px;
                        top              : 25px;

                        &.intervals-0{
                            gap : 37px;
                        }
                        &.intervals-1{
                            gap : 35px;
                        }

                        &.is-collapsed {
                            left : 8px;
                            top  : -9px;
                        }
                    }


                    & .intervals-title-text {
                        margin: 0;
                    }

                    .minus-plus-btn {
                        display          : flex;
                        background-color : transparent;
                        color            : var(--text-color-invert);
                        border           : var(--border-normal) solid var(--element-color-invert);
                        border-radius    : var(--border-radius);
                        place-content    : center;
                        align-items      : center;
                        cursor           : pointer;
                        &.rows{
                            margin-left: auto;
                        }
                        &.columns {
                            width  : 25px;
                            height : 25px;
                            margin : 0 5px;
                        }
                    }
                }


                /*--------------------------------------------------------------------------
                         CHANNELS NAME
                 --------------------------------------------------------------------------*/
                .channels-name-container {
                    display : flex;
                    border-collapse : collapse;
                    box-sizing       : border-box;

                    &.columns {
                        flex-direction  : row;
                        margin-top      : calc(
                                var(--col-card-title-height) +
                                var(--col-channel-groups-title-height) +
                                var(--col-vu-meter-margin-bottom)
                        );
                        border-bottom: var(--border-large) solid var(--border-color);
                    }

                    &.rows {
                        flex-direction : column;
                        border-bottom : var(--border-medium) solid var(--border-color);
                    }

                    .empty-channels-name {
                        display        : flex;
                        flex-direction : column;
                        align-content: center;
                        width          : var(--cross-width);
                        height         : var(--col-channel-names-height);
                        border-right   : var(--border-medium) solid var(--border-color);

                        &.group-border-left {
                            border-left: var(--border-large) solid var(--border-color);
                        }

                        &.group-border-right {
                            border-right: var(--border-large) solid var(--border-color);
                        }

                        &.is-collapsed{
                            border-right: var(--border-large) solid var(--border-color);
                        }
                    }

                    .channels-name {
                        display        : flex;
                        &.rows {
                            border-bottom : var(--border-normal) solid var(--border-color);
                            height        : var(--cross-height);

                            &.is-collapsed {
                                display: none !important;
                            }
                        }

                        &.highlight {
                            background-color : var(--grey-40) !important;
                        }
                    }

                    .channels-name-title {
                        display         : flex;
                        align-items     : center;
                        justify-content : center;
                        overflow        : hidden;
                        white-space     : nowrap;
                        flex-grow       : 1;

                        &.rows {
                            position      : sticky;
                            width         : var(--row-channel-names-title-width);
                            text-overflow : ellipsis;
                            padding-left  : var(--row-channel-names-title-padding-left);
                            border-radius : var(--border-radius);
                            left          : var(--sticky-row-header-end-left);
                        }

                        &.highlight{
                            background-color : var(--grey-40) !important;
                        }

                        &.is-sticky{
                            box-shadow: var(--box-shadow-rows-header);
                            border-radius: var(--border-radius);
                            z-index: var(--z-index-rows);
                        }
                    }

                    .channel-name-input {
                        &.rows {
                            position         : sticky;
                            width            : calc(var(--row-channel-names-title-width) + var(--row-channel-names-title-padding-left));
                            box-sizing       : border-box; /* Important pour que le padding/border ne depasse pas */
                            text-align       : center;
                            border           : 1px solid #007bff; /* Ou une autre couleur de focus */
                            background-color : #333;
                            color            : #fff;
                            left             : var(--sticky-row-header-end-left);
                            z-index: var(--z-index-rows);
                        }
                    }

                    .channels-name-trim-value {
                        &.rows {
                            display          : flex;
                            height           : var(--cross-height);
                            width            : var(--cross-width);
                            justify-content  : center;
                            align-items      : center;
                            position         : sticky;
                            border-radius    : var(--border-radius);
                            background-color : var(--background-color-tertiary);
                            cursor           : pointer;
                            margin-left      : 0;
                            margin-right     : 0;
                            transition       : width 0.2s ease-in-out, margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out;
                            font-size        : small;
                            left             : var(--sticky-row-trim-end-left);
                            z-index          : var(--z-index-rows);

                            &:hover {
                                width        : 35px;
                                margin-left  : -5px;
                                margin-right : -5px;
                                z-index      : 20;
                            }

                            &.is-sticky {
                                box-shadow : var(--box-shadow-rows-header);
                                z-index    : var(--z-index-rows);
                            }
                        }
                        &.highlight {
                            background-color : var(--grey-40) !important;
                        }
                    }

                    .channels-name-vumeter {
                        &.rows {
                            width            : var(--vu-meter-width);
                            min-height       : var(--vu-meter-height);
                            border-radius    : var(--border-radius);
                            margin           : 0 calc(var(--row-channel-names-vu-meter-margin) + var(--vu-meter-height)) 0 var(--row-channel-names-vu-meter-margin);
                            align-self       : center;
                            background-color : black;
                            position         : sticky;
                            left             : var(--sticky-row-vumeter-end-left);

                            .sticky-style {
                                z-index    : var(--z-index-rows);
                                box-shadow : var(--box-shadow-rows-header);
                            }
                            &.is-sticky{
                                z-index    : var(--z-index-rows);
                                box-shadow : var(--box-shadow-rows-header);
                            }
                        }
                    }

                    .channels-name-interval {
                        &.rows {
                            position        : sticky;
                            width           : var(--row-channel-name-interval-width);
                            justify-content : center;
                            align-items     : center;
                            border-radius   : var(--border-radius);
                            padding-right   : 10px;
                            margin-right    : calc(var(--vu-meter-height) + 3px);
                            left             : var(--sticky-row-header-end-left);

                            &.highlight{
                                background-color : var(--grey-40) !important;
                            }

                            &.is-sticky{
                                background-color : var(--background-color-secondary-bis);
                                box-shadow : var(--box-shadow-rows-header);
                                z-index    : var(--z-index-rows);
                            }
                        }
                    }

                    .mixer-grid-cell {
                        display          : flex;
                        position         : relative;
                        border-right   : var(--border-medium) solid var(--border-color);
                        background-color : var(--background-color-tertiary);
                        justify-content  : center;
                        align-items      : center;
                        cursor           : pointer;
                        height           : var(--cross-height);
                        width            : var(--cross-width);
                        font-size: small;

                        &.column-border-left {
                            border-left : var(--border-large) solid var(--border-color);
                            margin-left: 2px;
                        }

                        &.resume-cell {
                            border-right: var(--border-large) solid var(--border-color);
                            &:nth-child(8n) {
                                border-right : var(--border-large) solid var(--border-color);
                            }
                        }

                        &.column-border-right {
                            border-right : var(--border-large) solid var(--border-color);
                        }

                        &.selected {
                            background-color : var(--background-color-brand);
                        }

                        &.highlight{
                            background-color : var(--grey-40);
                        }

                        &.checkMarked {
                            background-color : var(--background-color-brand);
                        }
                    }
                }
            }
        }
    }
}

.intervals-container > .intervals.rows:first-child .channels-name.rows:first-child {
    border-top: calc( var(--border-large) - var(--border-normal) ) solid var(--border-color);
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MIXERGRID --- BORDERS
------------------------------------------------------------------------------------------------------------------------------------------*/

.borderRightMedium {
    border-right : var(--border-medium) solid var(--border-color);
}

.borderLeftMedium {
    border-left : var(--border-medium) solid var(--border-color);
}

.borderLeftLarge {
    border-left : var(--border-huge) solid var(--border-color);
}

.borderBottomLarge {
    border-bottom : var(--border-large) solid var(--border-color);
}

.borderTopMedium {
    border-top : var(--border-medium) solid var(--border-color);
}

.borderRightNormal {
    border-right : var(--border-normal) solid var(--border-color);
}

.borderTopNormal {
    border-top : var(--border-normal) solid var(--border-color);
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MIXERGRID --- BORDERS TRANSPARENT
------------------------------------------------------------------------------------------------------------------------------------------*/

.borderRightMediumTransparent {
    border-right : var(--border-medium) solid var(--border-transparent);
}

.borderLeftMediumTransparent {
    border-left : var(--border-medium) solid var(--border-transparent);
}

.borderLeftLargeTransparent {
    border-left : var(--border-huge) solid var(--border-transparent);
}

.borderBottomLargeTransparent {
    border-bottom : var(--border-large) solid var(--border-transparent);
}

.borderTopMediumTransparent {
    border-top : var(--border-medium) solid var(--border-transparent);
}

.borderRightNormalTransparent {
    border-right : var(--border-normal) solid var(--border-transparent);
}

.borderTopNormalTransparent {
    border-top : var(--border-normal) solid var(--border-transparent);
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    EXPLAIN ELEMENTS
------------------------------------------------------------------------------------------------------------------------------------------*/

.columns-explain-element {
    text-align       : center;
    height           : var(--vu-meter-height);
    background-color : var(--main-bg-explain-color);
    border-left      : var(--border-large) solid var(--border-color);
    border-right     : var(--border-large) solid var(--border-color);
}

.rows-explain-element {
    position         : absolute;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : 29px;
    height           : 100%;
    background-color : var(--main-bg-explain-color);
    left             : calc(var(--margin-left-matrix-header) - var(--vu-meter-height) - 8px);
    border           : var(--border-large) solid var(--border-color);
    box-sizing       : border-box;
}

.rows-explain-element p {
    white-space : nowrap;
    transform   : rotate(-90deg);
}