/* Project-colored input highlight — React parity.
   React gives every editable control on a project page the env primary
   (`--brand-bg`) when it has focus: border in the primary color plus a faint
   1.6px ring of it (`.crf-input:focus`, `.styled-select-trigger-form:focus`,
   `.crf-input-active` in ContractRequestForm.css / StyledSelect.css). In Blazor
   that color is --projectrac-primary-color.

   Scope: every project page (`.project-page`, the ProjectLayout page) and the
   New Form flyout (`.form-slideout`, a sibling of the page — also ProjectLayout
   only). Landmark / login pages keep their own look.

   Without this, focus came from Bootstrap (blue #86b7fe ring), Telerik (a grey
   8% ring) or one-off rules in the secondary color. */

/* ---- Text-like controls -------------------------------------------------- */
/* Native inputs/selects/textareas, minus the ones that sit borderless INSIDE a
   wrapper which owns the box (Telerik's .k-input-inner, HierarchicalSelect,
   AmountCell, the flyout zoom %), and minus checkboxes/radios/buttons. */
:is(.project-page, .form-slideout) :is(
    input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset],
              [type=hidden], [type=range], [type=file], [type=color], [type=image]),
    textarea,
    select
):not(.k-input-inner, .hsel-input, .ft-cell-acct-input, .flyout-zoom-pct-input,
      :disabled, [aria-invalid=true]):focus,
/* Telerik TextBox / NumericTextBox / DatePicker / ComboBox / TextArea (.k-input,
   focus lands on the inner input → :focus-within) and DropDownList (.k-picker,
   focus on the wrapper itself). Telerik also flags focus with .k-focus. */
:is(.project-page, .form-slideout) :is(.k-input, .k-picker):not(.k-disabled, .k-invalid):is(:focus, :focus-within, .k-focus) {
    outline: none;
    border-color: var(--projectrac-primary-color, #5b9bd5);
    box-shadow: 0 0 0 1.6px color-mix(in srgb, var(--projectrac-primary-color, #5b9bd5) 18%, transparent);
}

/* ---- Checkboxes / radios ------------------------------------------------- */
/* Telerik paints the checked fill from its own primary token (default coral
   #ff6358); point that token at the project primary for these controls only,
   so Telerik buttons etc. keep their theme. Native ones use accent-color, as
   React does (`accent-color: var(--brand-bg)`). */
:is(.project-page, .form-slideout) :is(.k-checkbox, .k-radio) {
    --kendo-color-primary: var(--projectrac-primary-color, #5b9bd5);
    --kendo-color-on-primary: var(--projectrac-primary-text-color, #ffffff);
}

:is(.project-page, .form-slideout) input:is([type=checkbox], [type=radio]):not(.k-checkbox, .k-radio) {
    accent-color: var(--projectrac-primary-color, #5b9bd5);
}