/* gemeinsame Variablen für .dnf-form-group & .dnf-form-group-readonly (siehe auch https://developer.mozilla.org/en-US/docs/Web/CSS/:is) */
:is(.dnf-form-group, .dnf-form-group-readonly) {
    --form-field-bg-editable: #FFFFFF;
    --form-field-color-editable: var(--bs-body-color);
    --form-field-border-editable: var(--bs-border-color, #CCCCCC);
    --form-field-bg-readonly: #F5F5E5; /* Goldgelb */
    --form-field-color-readonly: var(--bs-secondary-color, #666666);
    --form-field-border-readonly: var(--bs-border-color, #E0E0E0);
    --form-field-bg-disabled: #EAEAEA;
    --form-field-color-disabled: #999999;
    --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; /* eckig */
    --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-validation-color-valid: #2E7D32;
    --form-validation-color-invalid: var(--bs-danger);
    --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-input-icon-color: var(--form-field-color-editable);
    --form-input-icon-size: 0.9rem;
    --form-input-icon-padding: 1.75rem; /* ~ Platz für Icon + Gap */
}

.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);
}

:is(.dnf-form-group, .dnf-form-group-readonly) .dnf-input-with-icon .form-control {
    position: relative; /* eigener stacking context */
    z-index: 1;
}

:is(.dnf-form-group, .dnf-form-group-readonly) .form-control,
:is(.dnf-form-group, .dnf-form-group-readonly) .form-select,
:is(.dnf-form-group, .dnf-form-group-readonly) .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) .form-control:focus,
    :is(.dnf-form-group, .dnf-form-group-readonly) .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) .form-control[readonly],
    :is(.dnf-form-group, .dnf-form-group-readonly) .form-select[readonly] {
        background-color: var(--form-field-bg-readonly);
        color: var(--form-field-color-readonly);
        border: 1px solid var(--form-field-border-readonly);
        cursor: default;
    }

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

/* Gemeinsame Valid/Invalid-Rahmenfarbe für alle */
:is(.dnf-form-group, .dnf-form-group-readonly)
:is(.form-control, .form-select).is-valid {
    border-color: var(--form-field-border-valid);
    background-image: none !important;
    padding-right: .75rem; /* Standard-Padding ohne Bootstrap-Validation-Icon */
}

:is(.dnf-form-group, .dnf-form-group-readonly)
:is(.form-control, .form-select).is-invalid {
    border-color: var(--form-field-border-invalid);
    background-image: none !important;
    padding-right: .75rem;
}

/* Nur editierbare Felder bekommen den grünen/roten Hintergrund */
:is(.dnf-form-group, .dnf-form-group-readonly)
: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)
: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) .input-group-sm > .form-control.is-valid,
:is(.dnf-form-group, .dnf-form-group-readonly) .input-group-sm > .form-control.is-invalid,
:is(.dnf-form-group, .dnf-form-group-readonly) .input-group-sm > .form-select.is-valid,
:is(.dnf-form-group, .dnf-form-group-readonly) .input-group-sm > .form-select.is-invalid {
    padding-right: .5rem; /* wie .form-control-sm in Bootstrap */
}

:is(.dnf-form-group, .dnf-form-group-readonly) .form-control-sm.is-valid,
:is(.dnf-form-group, .dnf-form-group-readonly) .form-control-sm.is-invalid,
:is(.dnf-form-group, .dnf-form-group-readonly) .form-select-sm.is-valid,
:is(.dnf-form-group, .dnf-form-group-readonly) .form-select-sm.is-invalid {
    padding-right: .5rem;
}



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

    /* Gemeinsamer Stil für Prefix/Suffix */
    :is(.dnf-form-group, .dnf-form-group-readonly)
    .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, 0.9rem);
        color: var(--form-input-icon-color, #000);
        pointer-events: none;
        z-index: 2;
    }

    /* Prefix: irgendeine .form-control *innerhalb* des Wrappers */
    :is(.dnf-form-group, .dnf-form-group-readonly)
    .dnf-input-with-icon:has(.dnf-input-icon-prefix) .form-control {
        padding-left: var(--form-input-icon-padding, 1.75rem);
    }

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

    /* Suffix: genauso, nur rechts */
    :is(.dnf-form-group, .dnf-form-group-readonly)
    .dnf-input-with-icon:has(.dnf-input-icon-suffix) .form-control {
        padding-right: var(--form-input-icon-padding, 1.75rem);
    }

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

    /* Readonly / disabled: Icon mit-dimmen */
    :is(.dnf-form-group, .dnf-form-group-readonly)
    .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-input-with-icon .form-control:disabled ~ :is(.dnf-input-icon-prefix, .dnf-input-icon-suffix) {
        color: var(--form-field-color-disabled);
    }



:is(.dnf-form-group, .dnf-form-group-readonly) .btn {
    border-radius: var(--form-field-border-radius) !important;
    margin: 0;
}

:is(.dnf-form-group, .dnf-form-group-readonly) .form-headline {
    display: block;
    margin-bottom: 0.25rem;
    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, .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%);
}

/* margin-left nur innerhalb von dnf-form-group/readonly */
:is(.dnf-form-group .form-label, .dnf-form-group-readonly .form-label) {
    margin-left: 0.25rem;
}

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

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

/* Bootstrap-kompatible Validation-Feedbacks */
:is(.dnf-form-group, .dnf-form-group-readonly) .valid-feedback {
    color: var(--form-validation-color-valid);
    font-size: var(--form-help-font-size);
}

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

/* Validation-Messages (ohne Bootstrap) */
/* Gemeinsamer Stil für alle Validation-Messages */
.validation-message {
    /*width: 100%;*/ /* 2025-10-27 DNF-SaS: testweise abgeschaltet - macht gerne Faxen (erzeugt sinnlose Scrollbars)*/
    margin-left: 0.25rem !important;
    margin-top: 0.2rem;
    font-size: var(--form-help-font-size, 0.875em);
    line-height: 1rem; /* kompakter */
    color: var(--validation-color, var(--form-validation-color-invalid, var(--bs-danger, #DC3545)));
    display: flex;
    align-items: flex-start; /* Icon + Text bündig */
    gap: 0.375rem; /* Abstand nur zwischen vorhandenen Kindern */
}

    .validation-message i,
    .validation-message 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;
    }

/* Kontext: innerhalb von (ReadOnly-)Form-Gruppen */
:is(.dnf-form-group, .dnf-form-group-readonly) {
    --validation-color: var(--form-validation-color-invalid, var(--bs-danger, #DC3545));
}

/* Validation Summary (ohne umgebende Form-Group nutzbar) */
.validation-errors {
    --validation-color: var(--form-validation-color-invalid, var(--bs-danger, #DC3545));
    --ve-gap: 0.25rem;
    color: var(--validation-color);
    display: flex;
    flex-direction: column;
    row-gap: var(--ve-gap);
}