﻿/* Opt-in wrapper */
.rz-focus-green {
    --rz-input-focus-border: 1px solid #16a34a;
    --rz-input-focus-shadow: inset 0 0 0 1px #16a34a;
}

    /* Text inputs (RadzenTextBox, TextArea, AutoComplete input, etc.) */
    .rz-focus-green input.rz-inputtext:focus,
    .rz-focus-green textarea.rz-inputtext:focus {
        border: 1px solid #16a34a !important; /* <-- forces ALL 4 sides */
        border-bottom: 1px solid #16a34a !important; /* <-- extra safety */
        box-shadow: inset 0 0 0 1px #16a34a !important;
        outline: none !important;
        box-sizing: border-box;
    }

    /* Wrapper components (DropDown, DatePicker, AutoComplete container, etc.) */
    .rz-focus-green .rz-dropdown:focus-within,
    .rz-focus-green .rz-autocomplete:focus-within,
    .rz-focus-green .rz-multiselect:focus-within,
    .rz-focus-green .rz-datepicker:focus-within,
    .rz-focus-green .rz-numeric:focus-within,
    .rz-focus-green .rz-dropdown.rz-state-focus,
    .rz-focus-green .rz-autocomplete.rz-state-focus,
    .rz-focus-green .rz-multiselect.rz-state-focus,
    .rz-focus-green .rz-datepicker.rz-state-focus,
    .rz-focus-green .rz-numeric.rz-state-focus {
        border: 1px solid #16a34a !important; /* <-- forces ALL 4 sides */
        border-bottom: 1px solid #16a34a !important;
        box-shadow: 0 0 0 2px rgba(22,163,74,.20) !important;
        box-sizing: border-box;
    }

    /* Turn on green focus for *any* RadzenFormField content */
    .rz-focus-green .rz-form-field:focus-within .rz-form-field-content {
        box-shadow: inset 0 0 0 2px #16a34a !important; /* full rectangle (all 4 sides) */
        border-radius: 6px; /* optional */
    }

        /* If Radzen is drawing an underline via pseudo-elements, force it green too */
        .rz-focus-green .rz-form-field:focus-within .rz-form-field-content::after,
        .rz-focus-green .rz-form-field:focus-within .rz-form-field-content::before {
            background-color: #16a34a !important;
        }

    /* Keep your input/textarea focus styling as well */
    .rz-focus-green input.rz-inputtext:focus,
    .rz-focus-green textarea.rz-inputtext:focus {
        border: 1px solid #16a34a !important;
        box-shadow: inset 0 0 0 1px #16a34a !important;
        outline: none !important;
    }

