@use 'toggle';

// hot fix
#infocob_crm_forms_admin_form_config {
    overflow: hidden;
}

.ms-drop input[type="checkbox"] {
    margin-top: 0.15rem;
}

.ms-choice > div {
    background: none;

    &.open {
        background: none;
    }
}

span {
    &.text {
        &.red {
            color: red;
        }

        &.blue {
            color: blue;
        }

        &.bold {
            font-weight: bold;
        }
    }
}

input {
    &.infocob_crm_forms_copy {
        width: 250px;
    }
}

.full-width {
    width: 100% !important;

    &.ms-parent {
        width: 100% !important;
    }
}

div.ms-parent {
    width: 100% !important;
}

table.form-table {

    select.input_type {
        cursor: default;
    }

    .option-dashicon:before {
        cursor: pointer;
    }

    .accordion-options {
        .form-table {
            border-collapse: separate;
            border: 1px dashed grey;

            .row-up-option, .row-down-option {
                cursor: pointer;
            }
        }
    }

    &.inputs, &.destinataires {
        tr {
            th {
                text-align: center;

                &.sm {
                    width: 50px;
                }
            }

            td {
                text-align: center;

                input:not([type='checkbox']), select {
                    width: 100%;
                }
            }
        }
    }
}

div.up-down-dashicons {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.input-flex {
    display: flex;
    padding-bottom: 0 !important;
}

#mode_avance_console {
    width: 100%;
    height: 100px;
}

.mode-avance-console {
    &.hidden {
        display: none;
    }
}

// ########################

#inputsList {
    //background: #f2f2f2;
    padding: 30px 0;

    .list-group-item {
        display: flex;
        flex-direction: column;
        border-radius: 5px;

        &:hover {
            border-color: #e85a0c;

            &.nested-1:not(.nestedGroup) {
                background: #faf3f1;
            }
        }

        > div.rowInputField {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 5px;
            //cursor: grab;

            flex-wrap: nowrap;

            > div {
                //cursor: default;
                align-self: center;
                justify-content: center;

                display: flex;
                flex-shrink: 2;
                flex-grow: 1;

                .handle {
                    cursor: move;
                }

                &.accept-file {
                    flex-grow: 10;
                    max-width: 150px;
                    min-width: 75px;
                }

                &:first-child {
                    justify-content: flex-start;
                }

                &:last-child {
                    justify-content: flex-end;
                }

                .option-dashicon {
                    width: 20px;
                }

                select, input:not([type='checkbox']) {
                    min-width: 50px;
                    width: 100%;
                }
            }
        }

        > div.options {

        }

        &.nested-1 {
            background: #f1f1f1;
            margin: 10px 0;
            display: block;
        }


        &.nestedGroup {
            background: white;
            border: 2px dashed #ccd0d4;
            padding: 20px;
            margin: 10px 0;

            .rowInputGroup {
                display: flex;

                div:not(.up-down-dashicons) {
                    margin: 10px;

                    label {
                        margin-right: 10px;
                    }
                }

                .inputsGroup {
                    display: flex;
                    width: 100%;

                    select {
                        min-width: 150px;
                    }
                }
            }

            .draggableZoneSeparator {
                border-bottom: 1px dotted black;
                margin-bottom: 20px;
                width: 100%;
            }
        }

    }
}

div.btnActions {
    display: flex;
    justify-content: center;

    button {
        padding: 10px;
        margin: 20px;
    }
}

/*
    Logo email config
 */
.logo_email {
    display: flex;
    flex-direction: row;
    text-align: center;

    .logo_actions {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;

        button {
            color: red;
        }
    }
}

/*
    Attachments email config
 */
.attachments_email {

    .add button {
        width: 100%;
    }

    .inputs {
        display: flex;
        flex-wrap: wrap;

        .input {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            width: 80%;

            figure {
                display: flex;
                flex-direction: column;
                align-items: center;

                figcaption {
                    overflow: hidden;
                    max-height: 50px;
                    //line-height: 50px;
                }
            }
        }
    }
}

.color-fields-row {
    display: flex;
    gap: 20px;

    .color-field-container {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .color-field-container label {
        display: block;
        margin-bottom: 5px;
    }

    .color-field {
        width: 100%;
        padding: 5px;
    }

    .wp-picker-open+.wp-picker-input-wrap {
        display: flex;
    }
}

.accordion-section {
    margin-bottom: 5px;
    border-bottom: 0;

    .accordion-toggle {
        display: flex;
        justify-content: space-between;
        background-color: white;
        color: #0073aa;
        padding: 15px 30px;
        border: 1px solid #ddd;
        cursor: pointer;
        text-align: left;
        font-weight: bold;
        font-size: 1rem;
        border-radius: 4px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%) rotate(0deg);
            right: 10px;
            width: 16px;
            height: 16px;
            mask-image: url("../chevron.svg");
            mask-size: contain;
            mask-position: center center;
            mask-repeat: no-repeat;
            background-color: #0073aa;
            -webkit-mask-image: url("../chevron.svg");
            -webkit-mask-size: contain;
            -webkit-mask-position: center center;
            -webkit-mask-repeat: no-repeat;
            transition: transform 0.3s ease;
        }

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

        .actions {
            display: flex;
        }
    }

    .accordion-content {
        display: none;
        padding: 20px 20px;
        background-color: #f1f1f1;
        border: 1px solid #ddd;
        border-top: none;
        margin-bottom: 15px;

        > :last-child {
            margin-bottom: 0;
        }
    }
}

/* Style de base pour les onglets */
.onglet {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tablink {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    border-bottom: 0px;
}

.tablink:hover {
    background-color: #ddd;
}

.tablink.active {
    background-color: #ffffff;
    border-bottom: none;
    font-weight: bold;
    color: #0073aa;
}

/* Style de contenu des onglets */
.tabcontent {
    display: none;
    padding: 20px;
}

.tabcontent.active { /* Pas d'espace ici */
    display: flex !important;
    flex-wrap: wrap;
}

/* Alignement et styles spécifiques pour chaque section */
.input-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 50%;
    margin-bottom: 15px;

    .ms-choice {
        width: 80%;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 20px;

        &>div.icon-caret {
            right: 21%;
            top: unset;
            margin-right: 5px;
        }
    }

    .ms-drop {
        position: relative;
        width: 80%;
        .ms-search {
            input {
                width: 100% !important;
            }
        }

        //ul > li input[type="checkbox"] {
        //    margin-left: 70px;
        //}
    }

    .ms-drop {
        min-width: 80%;
    }

    label {
        font-weight: bold;
        margin-bottom: 5px;
    }

    select, input:not([type='checkbox']) {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 80%;
        padding: 5px;
    }

    &:has(input[type='checkbox']) {
        display: flex;
        flex-direction: row;
        align-items: center;

        input[type='checkbox'] {
            margin-left: 15px;
        }
    }
}

.input-search,
.input-multiple {
    margin-top: 10px;
}

/* Styles pour les boutons et éléments supplémentaires */
.delInputRow {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    margin-right: 15px;
}

.delInputRow:hover {
    background-color: #d32f2f;
}

.duplicateRow {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    margin-right: 15px;

    &:hover {
        background-color: #005b91;
    }
}


.accordion-header-table,
.accordion-body-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.accordion-body-table td{
    width: 33.33%;
    text-align: left;
}

.header-list {
    padding: 15px 30px;
    background-color: #f9fafb;
    .accordion-header-table {
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: left;

        th:not(.empty){
            font-size: 1rem;
            width: calc(33.33% - 48px);
        }

        .empty {
            width: 90px;
        }
    }
}

.duplicate-toggle {
    background-color: #f0f0f0; /* Choisir une couleur de fond claire ou personnalisée */
    font-weight: bold;  /* Optionnel : pour un effet de distinction */
    border: 1px solid #ccc;  /* Optionnel : pour ajouter une bordure */
}

.tox-edit-area iframe {
    background: white !important;
    color: black !important;
}