/* gemeinsamer Scope für alle DNF-Formcontainer */
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) {
    --form-field-bg-editable: #fff;
    --form-field-color-editable: var(--bs-body-color);
    --form-field-border-editable: color-mix(in srgb, var(--bs-border-color, #ccc) 85%, #000 15%);
    --form-field-bg-readonly: #F5F5E5;
    --form-field-color-readonly: var(--bs-secondary-color, #666);
    --form-field-border-readonly: var(--bs-border-color, #E0E0E0);
    --form-field-bg-disabled: #EAEAEA;
    --form-field-color-disabled: #999;
    --form-field-border-disabled: var(--bs-border-color, #E0E0E0);
    --form-field-bg-valid: #E8F5E9;
    --form-field-border-valid: #2E7D32;
    --form-field-bg-invalid: #FFEBEE;
    --form-field-border-invalid: #D32F2F;
    --form-field-border-radius: 0;
    --form-field-border-focus: #2684FF;
    --form-field-focus-ring: rgba(38, 132, 255, .2);
    --form-label-color: var(--bs-secondary);
    --form-label-font-size: 85%;
    --form-help-color: var(--bs-secondary-color);
    --form-help-font-size: 80%;
    --form-headline-color: var(--bs-secondary-color);
    --form-headline-font-size: 105%;
    --form-validation-color-valid: #2E7D32;
    --form-validation-color-invalid: var(--bs-danger);
    --form-input-icon-color: var(--form-field-color-editable);
    --form-input-icon-size: 0.9rem;
    --form-input-icon-padding: 1.75rem;
    --form-select-icon-padding-left: 2.45rem;
    --form-control-validation-padding-right: .75rem;
    --form-select-validation-padding-right: 2.25rem;
    --form-control-sm-validation-padding-right: .5rem;
    --form-select-sm-validation-padding-right: 2rem;
    --form-panel-border-color: color-mix(in srgb, var(--bs-border-color, #ccc) 96%, #000 4%);
    --validation-color: var(--form-validation-color-invalid, var(--bs-danger, #DC3545));
}

/* readonly nur für readonly-container */
.dnf-form-group-readonly {
    --form-field-bg-editable: var(--form-field-bg-readonly);
    --form-field-color-editable: var(--form-field-color-readonly);
    --form-field-border-editable: var(--form-field-border-readonly);
}

/* Basisfelder */
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--form-field-bg-editable);
    color: var(--form-field-color-editable);
    border: 1px solid var(--form-field-border-editable);
    border-radius: var(--form-field-border-radius) !important;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select):focus {
    border-color: var(--form-field-border-focus);
    outline: none;
    box-shadow: 0 0 0 2px var(--form-field-focus-ring);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-control[readonly] {
    background-color: var(--form-field-bg-readonly);
    color: var(--form-field-color-readonly);
    border-color: var(--form-field-border-readonly);
    cursor: default;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select):disabled {
    background-color: var(--form-field-bg-disabled);
    color: var(--form-field-color-disabled);
    border-color: var(--form-field-border-disabled);
    cursor: not-allowed;
}

/* Validation */
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select):is(.is-valid, .is-invalid) {
    background-image: none !important;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select).is-valid {
    border-color: var(--form-field-border-valid);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select).is-invalid {
    border-color: var(--form-field-border-invalid);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select).is-valid:not([readonly]):not(:disabled) {
    background-color: var(--form-field-bg-valid);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-control, .form-select).is-invalid:not([readonly]):not(:disabled) {
    background-color: var(--form-field-bg-invalid);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-control:is(.is-valid, .is-invalid) {
    padding-right: var(--form-control-validation-padding-right);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-select:is(.is-valid, .is-invalid) {
    padding-right: var(--form-select-validation-padding-right);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .input-group-sm > .form-control:is(.is-valid, .is-invalid),
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-control-sm:is(.is-valid, .is-invalid) {
    padding-right: var(--form-control-sm-validation-padding-right);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .input-group-sm > .form-select:is(.is-valid, .is-invalid),
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-select-sm:is(.is-valid, .is-invalid) {
    padding-right: var(--form-select-sm-validation-padding-right);
}

/* dnf-input-with-icon */
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 100%;
}

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .form-control {
        position: relative;
        z-index: 1;
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon :is(.dnf-input-icon-prefix, .dnf-input-icon-suffix) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--form-input-icon-size);
        color: var(--form-input-icon-color);
        pointer-events: none;
        z-index: 2;
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .dnf-input-icon-prefix {
        left: 0.5rem;
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .dnf-input-icon-suffix {
        right: 0.5rem;
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon:has(.dnf-input-icon-prefix) .form-control {
        padding-left: var(--form-input-icon-padding);
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon:has(.dnf-input-icon-prefix) .form-select {
        padding-left: var(--form-select-icon-padding-left);
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon:has(.dnf-input-icon-suffix) .form-control {
        padding-right: var(--form-input-icon-padding);
    }

    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .form-control[readonly] ~ :is(.dnf-input-icon-prefix, .dnf-input-icon-suffix),
    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .form-control:disabled ~ :is(.dnf-input-icon-prefix, .dnf-input-icon-suffix),
    :is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .dnf-input-with-icon .form-select:disabled ~ :is(.dnf-input-icon-prefix, .dnf-input-icon-suffix) {
        color: var(--form-field-color-disabled);
    }

/* Sonstige Elemente */
:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .btn {
    border-radius: var(--form-field-border-radius) !important;
    margin: 0;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .form-headline {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--form-headline-color);
    font-size: var(--form-headline-font-size);
    font-weight: 500;
}

:is( .dnf-form-group .form-label, .dnf-form-group-readonly .form-label, .dnf-form-panel .form-label, .dnf-form-panel-alt .form-label, .form-label-standalone ) {
    display: block;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--form-label-color, var(--bs-secondary));
    font-size: var(--form-label-font-size, 85%);
}

:is( .dnf-form-group .form-label, .dnf-form-group-readonly .form-label, .dnf-form-panel .form-label, .dnf-form-panel-alt .form-label ) {
    margin-left: 0.25rem;
}

:is( .dnf-form-group .form-label-spaced, .dnf-form-group-readonly .form-label-spaced, .dnf-form-panel .form-label-spaced, .dnf-form-panel-alt .form-label-spaced, .form-label-standalone.form-label-spaced ) {
    margin-bottom: .5rem;
    white-space: normal;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) :is(.form-text, .input-subtext, .form-subtext) {
    color: var(--form-help-color);
    font-size: var(--form-help-font-size);
    margin-top: 0.25rem;
    margin-left: 0.25rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .valid-feedback {
    color: var(--form-validation-color-valid);
    font-size: var(--form-help-font-size);
}

:is( .dnf-form-group, .dnf-form-group-readonly, .dnf-form-panel, .dnf-form-panel-alt ) .invalid-feedback {
    color: var(--form-validation-color-invalid);
    font-size: var(--form-help-font-size);
}

:is( .dnf-form-panel, .dnf-form-panel-alt, .dnf-form-group.form-panel, .dnf-form-group-readonly.form-panel, .dnf-form-group.form-panel-alt, .dnf-form-group-readonly.form-panel-alt ) {
    border-radius: 0.375rem;
    padding: 1rem;
}

:is( .dnf-form-panel, .dnf-form-group.form-panel, .dnf-form-group-readonly.form-panel ) {
    border: 1px solid var(--form-panel-border-color);
}

:is( .dnf-form-panel-alt, .dnf-form-group.form-panel-alt, .dnf-form-group-readonly.form-panel-alt ) {
    background-color: var(--bs-light, #f8f9fa);
    border: 0;
}

:is( .dnf-form-panel, .dnf-form-panel-alt, .dnf-form-group.form-panel, .dnf-form-group-readonly.form-panel, .dnf-form-group.form-panel-alt, .dnf-form-group-readonly.form-panel-alt ) > .form-headline:first-child {
    margin-top: 0;
}

:is( .dnf-form-panel, .dnf-form-panel-alt, .dnf-form-group.form-panel, .dnf-form-group-readonly.form-panel, .dnf-form-group.form-panel-alt, .dnf-form-group-readonly.form-panel-alt ) > .panel-text {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 1rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

/* Validation-Messages */
.validation-message {
    margin-left: 0.25rem !important;
    margin-top: 0.2rem;
    font-size: var(--form-help-font-size, 0.875em);
    line-height: 1rem;
    color: var(--validation-color, var(--bs-danger, #DC3545));
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

    .validation-message :is(i, svg) {
        flex: 0 0 auto;
        line-height: 1;
        color: currentColor;
    }

    .validation-message > span {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.validation-errors {
    --ve-gap: 0.25rem;
    --validation-color: var(--form-validation-color-invalid, var(--bs-danger, #DC3545));
    color: var(--validation-color);
    display: flex;
    flex-direction: column;
    row-gap: var(--ve-gap);
}