/* Shared focus policy, loaded after page styles: a purple field border with a
   quiet halo, not a second browser-blue outline. Keep keyboard focus visible. */
:root {
    --f-focus: #7740ff;
    --portal-focus-border: #7740ff;
    --portal-focus-halo: rgb(119 64 255 / 12%);
    --portal-focus-error: #d43f66;
}

body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :focus-visible {
    outline: 2px solid var(--portal-focus-border);
    outline-offset: 2px;
}

/* These overrides deliberately beat legacy Bootstrap and page-specific rings.
   Checkboxes, radios, file pickers and other non-text controls keep their own
   keyboard indicators; the hidden select of an enhanced dropdown is excluded. */
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(
    input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="hidden"],[type="button"],[type="submit"],[type="reset"])),
    textarea,
    select:where(:not(.futroo-dropdown.is-enhanced > select))
):is(:focus,:focus-visible) {
    border-color: var(--portal-focus-border) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--portal-focus-halo) !important;
}

/* Composite controls draw focus on the visible wrapper, not their borderless
   child input/trigger. This also covers searchable country/city comboboxes. */
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(
    .portal-search,.admin-toolbar-search,.teachers-local-search,.teachers-filter,
    .reports-teacher-search,.reports-filter,.challenge-directory-search,.challenge-directory-select,
    .school-log-search,.school-table-search,.school-location-control,
    .teacher-report-teacher-search,.teacher-report-challenge-search,.teacher-report-filter,
    .school-teacher-profile-search,.school-teacher-profile-sort,.settings-language-select,
    .auth-field,.futroo-dropdown
):focus-within,
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) .futroo-dropdown.is-open {
    border-color: var(--portal-focus-border) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--portal-focus-halo) !important;
}

body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(
    .portal-search,.admin-toolbar-search,.teachers-local-search,.teachers-filter,
    .reports-teacher-search,.reports-filter,.challenge-directory-search,.challenge-directory-select,
    .school-log-search,.school-table-search,.school-location-control,
    .teacher-report-teacher-search,.teacher-report-challenge-search,.teacher-report-filter,
    .school-teacher-profile-search,.school-teacher-profile-sort,.settings-language-select,.auth-field
) :is(input,select):focus,
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) .futroo-dropdown-trigger:is(:focus,:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Invalid fields must remain distinguishable, even while focused/open. */
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(input,textarea,select,.futroo-dropdown):is([aria-invalid="true"],.is-invalid,.field-invalid):focus,
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) .futroo-dropdown.field-invalid:is(:focus-within,.is-open),
body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(.auth-field,.school-location-control):has([aria-invalid="true"]):focus-within {
    border-color: var(--portal-focus-error) !important;
    box-shadow: 0 0 0 2px rgb(212 63 102 / 13%) !important;
}

/* OTP input is transparent; its active visible cell carries the focus cue. */
.futroo-login-page .auth-otp-group:focus-within .auth-otp-cell.is-active {
    border-color: var(--portal-focus-border);
    background: #faf7ff;
    box-shadow: 0 0 0 2px var(--portal-focus-halo);
}
.futroo-login-page .auth-otp-group:has([aria-invalid="true"]) .auth-otp-cell {
    border-color: var(--portal-focus-error);
}

/* Shadows disappear in high-contrast mode, so use the system focus outline. */
@media (forced-colors: active) {
    body:is(.futroo-portal-page,.futroo-login-page,.teacher-onboarding-body) :is(input,textarea,select,.futroo-dropdown-trigger):focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }
}