.dotation-parameters {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

    .dotation-parameters .inputs {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

        .dotation-parameters .inputs .dot-label {
            width: 15%;
            height: 100%;
            text-align: right;
            margin-right: 0.625rem;
            margin-top: 0.3125rem;
        }

        .dotation-parameters .inputs .dot-checkbox {
            width: 45%;
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
            margin: 0.3125rem 0.625rem;
        }

        .dotation-parameters .inputs .input-panel {
            width: 80%;
            height: 100%;
        }


        .dotation-parameters .inputs .titre {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .titre .titre-input {
                height: 3.75rem;
            }


        .dotation-parameters .inputs .periode {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
            margin-bottom: 0.625rem;
        }

            .dotation-parameters .inputs .periode .periode-input {
                display: flex;
                gap: 0.625rem;
                flex-direction: row;
            }



        .dotation-parameters .inputs .options {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .options .options-input {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                height: 10.3125rem;
            }

                .dotation-parameters .inputs .options .options-input.suivi-qte {
                    height: 6.5rem;
                }

                .dotation-parameters .inputs .options .options-input.bilan {
                    height: 3.75rem;
                }


                .dotation-parameters .inputs .options .options-input.test {
                    height:  2.5rem;
                }

                    .dotation-parameters .inputs .options .options-input.test .dot-checkbox {
                        width: 100%;
                    }


        .dotation-parameters .inputs .group {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .group .group-input {
                height: 3.75rem;
            }


        .dotation-parameters .inputs .filter {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .filter .filter-input {
                height: 3.75rem;
            }

        .dotation-parameters .inputs .horaires {
            height: 100%;
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .horaires .horaires-input {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                flex-wrap: wrap;
                height: 5rem;
            }

                .dotation-parameters .inputs .horaires .horaires-input .dot-checkbox {
                    width: 25%;
                    gap: 0.25rem;
                    margin: 0.3125rem 0;
                }


        .dotation-parameters .inputs .section {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .section.show {
                visibility: initial;
            }

            .dotation-parameters .inputs .section.hide {
                display: none;
            }

            .dotation-parameters .inputs .section .section-input {
                height: 3.75rem;
            }

        .dotation-parameters .inputs .group {
            display: flex;
            gap: 0.625rem;
            flex-direction: row;
        }

            .dotation-parameters .inputs .group.show {
                visibility: initial;
            }

            .dotation-parameters .inputs .group.hide {
                display: none;
            }

            .dotation-parameters .inputs .group .group-input {
                height: 3.75rem;
            }

/* Period selector (Dates / X jours) — PeriodSelector.razor */
.dotation-parameters .inputs .periode .periode-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}


.dotation-parameters .inputs .periode .dot-label {
    margin-top: 1.375rem;
}

    /* Each method is a row: radio | label | controls. Both rows always visible; the inactive one is disabled. */
.dotation-parameters .inputs .periode .periode-method,
.dotation-parameters .inputs .periode .periode-method label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dotation-parameters .inputs .periode .periode-radio {
    margin-top: 0.6rem;
    flex: 0 0 auto;
}

.dotation-parameters .inputs .periode .periode-method-label {
    min-width: 4.5rem;
    padding-top: 0.5rem;
    white-space: nowrap;
}

.dotation-parameters .inputs .periode .periode-xdays {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.dotation-parameters .inputs .periode .periode-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dotation-parameters .inputs .periode .periode-stepper .k-numerictextbox {
        flex: 1 1 auto;
    }

    .dotation-parameters .inputs .periode .periode-stepper .k-input-inner {
        text-align: center;
    }

.dotation-parameters .inputs .periode .periode-days-suffix {
    margin-left: 1rem;
    white-space: nowrap;
    color: #666;
}

.dotation-parameters .inputs .periode .periode-computed {
    background-color: #e3f0fd;
    color: #1a73e8;
    border-radius: 0.25rem;
    padding: 0.4rem 0.6rem;
}

.dotation-parameters .inputs .periode .periode-dates {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dotation-parameters .inputs .periode .periode-dates .k-datepicker {
        flex: 1 1 auto;
    }

.dotation-parameters .inputs .periode .periode-dates-arrow {
    color: #666;
}