/**

 * Invalid field borders — only AFTER save attempt (not on initial load).

 * Triggers: .field-invalid class, form.form-submitted, or .ng-touched/.ng-dirty

 */

:root {

    --app-validation-border: #f44336;

}



body.theme-dark {

    --app-validation-border: var(--app-danger, #ff6a7a);

}



/* ── Dark blue ── */

html body.theme-dark:not(.theme-dark-black) input.field-invalid,

html body.theme-dark:not(.theme-dark-black) input.p-inputtext.field-invalid,

html body.theme-dark:not(.theme-dark-black) .p-inputtext.field-invalid,

html body.theme-dark:not(.theme-dark-black) textarea.field-invalid,

html body.theme-dark:not(.theme-dark-black) form.form-submitted input.ng-invalid,

html body.theme-dark:not(.theme-dark-black) form.form-submitted .p-inputtext.ng-invalid,

html body.theme-dark:not(.theme-dark-black) .p-inputtext.ng-invalid.ng-touched,

html body.theme-dark:not(.theme-dark-black) .p-inputtext.ng-invalid.ng-dirty,

html body.theme-dark:not(.theme-dark-black) input.ng-invalid.ng-touched,

html body.theme-dark:not(.theme-dark-black) input.ng-invalid.ng-dirty,

html body.theme-dark:not(.theme-dark-black) form.form-submitted p-autocomplete.ng-invalid .p-autocomplete-multiple-container,

html body.theme-dark:not(.theme-dark-black) form.form-submitted p-autocomplete.ng-invalid > .p-autocomplete > .p-inputtext,

html body.theme-dark:not(.theme-dark-black) p-autocomplete.ng-invalid.ng-touched .p-autocomplete-multiple-container,

html body.theme-dark:not(.theme-dark-black) p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-multiple-container,

html body.theme-dark:not(.theme-dark-black) form.form-submitted p-dropdown.ng-invalid > .p-dropdown,

html body.theme-dark:not(.theme-dark-black) p-dropdown.ng-invalid.ng-touched > .p-dropdown,

html body.theme-dark:not(.theme-dark-black) p-dropdown.ng-invalid.ng-dirty > .p-dropdown,

html body.theme-dark:not(.theme-dark-black) form.form-submitted p-calendar.ng-invalid > .p-calendar > .p-inputtext,

html body.theme-dark:not(.theme-dark-black) p-calendar.ng-invalid.ng-touched > .p-calendar > .p-inputtext,

html body.theme-dark:not(.theme-dark-black) form.form-submitted p-multiselect.ng-invalid > .p-multiselect,

html body.theme-dark:not(.theme-dark-black) p-multiselect.ng-invalid.ng-touched > .p-multiselect {

    border: 1px solid var(--app-validation-border) !important;

    border-color: var(--app-validation-border) !important;

    box-shadow: inset 0 0 0 1px var(--app-validation-border) !important;

}



/* ── Dark black ── */

html body.theme-dark.theme-dark-black input.field-invalid,

html body.theme-dark.theme-dark-black input.p-inputtext.field-invalid,

html body.theme-dark.theme-dark-black .p-inputtext.field-invalid,

html body.theme-dark.theme-dark-black textarea.field-invalid,

html body.theme-dark.theme-dark-black form.form-submitted input.ng-invalid,

html body.theme-dark.theme-dark-black form.form-submitted .p-inputtext.ng-invalid,

html body.theme-dark.theme-dark-black .p-inputtext.ng-invalid.ng-touched,

html body.theme-dark.theme-dark-black .p-inputtext.ng-invalid.ng-dirty,

html body.theme-dark.theme-dark-black input.ng-invalid.ng-touched,

html body.theme-dark.theme-dark-black input.ng-invalid.ng-dirty,

html body.theme-dark.theme-dark-black form.form-submitted p-autocomplete.ng-invalid .p-autocomplete-multiple-container,

html body.theme-dark.theme-dark-black form.form-submitted p-autocomplete.ng-invalid > .p-autocomplete > .p-inputtext,

html body.theme-dark.theme-dark-black p-autocomplete.ng-invalid.ng-touched .p-autocomplete-multiple-container,

html body.theme-dark.theme-dark-black p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-multiple-container,

html body.theme-dark.theme-dark-black form.form-submitted p-dropdown.ng-invalid > .p-dropdown,

html body.theme-dark.theme-dark-black p-dropdown.ng-invalid.ng-touched > .p-dropdown,

html body.theme-dark.theme-dark-black p-dropdown.ng-invalid.ng-dirty > .p-dropdown,

html body.theme-dark.theme-dark-black form.form-submitted p-calendar.ng-invalid > .p-calendar > .p-inputtext,

html body.theme-dark.theme-dark-black p-calendar.ng-invalid.ng-touched > .p-calendar > .p-inputtext,

html body.theme-dark.theme-dark-black form.form-submitted p-multiselect.ng-invalid > .p-multiselect,

html body.theme-dark.theme-dark-black p-multiselect.ng-invalid.ng-touched > .p-multiselect {

    border: 1px solid var(--app-validation-border) !important;

    border-color: var(--app-validation-border) !important;

    box-shadow: inset 0 0 0 1px var(--app-validation-border) !important;

}



/* ── Light theme ── */

html body:not(.theme-dark) input.field-invalid,

html body:not(.theme-dark) .p-inputtext.field-invalid,

html body:not(.theme-dark) form.form-submitted .p-inputtext.ng-invalid,

html body:not(.theme-dark) form.form-submitted input.ng-invalid,

html body:not(.theme-dark) .p-inputtext.ng-invalid.ng-touched,

html body:not(.theme-dark) .p-inputtext.ng-invalid.ng-dirty,

html body:not(.theme-dark) form.form-submitted p-autocomplete.ng-invalid .p-autocomplete-multiple-container,

html body:not(.theme-dark) p-autocomplete.ng-invalid.ng-touched .p-autocomplete-multiple-container,

html body:not(.theme-dark) form.form-submitted p-dropdown.ng-invalid > .p-dropdown,

html body:not(.theme-dark) p-dropdown.ng-invalid.ng-touched > .p-dropdown {

    border: 1px solid var(--app-validation-border) !important;

    border-color: var(--app-validation-border) !important;

}



html body.theme-dark form.form-submitted p-editor.ng-invalid .p-editor-container .p-editor-content.ql-snow,

html body.theme-dark p-editor.ng-invalid.ng-touched .p-editor-container .p-editor-content.ql-snow,

html body.theme-dark p-editor.ng-invalid.ng-dirty .p-editor-container .p-editor-content.ql-snow {

    border-color: var(--app-validation-border) !important;

    box-shadow: inset 0 0 0 1px var(--app-validation-border) !important;

}



html body.theme-dark form.form-submitted p-checkbox.ng-invalid .p-checkbox-box,

html body.theme-dark p-checkbox.ng-invalid.ng-touched .p-checkbox-box,

html body.theme-dark form.form-submitted p-radiobutton.ng-invalid .p-radiobutton-box,

html body.theme-dark p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box {

    border-color: var(--app-validation-border) !important;

    box-shadow: 0 0 0 1px var(--app-validation-border) !important;

}