/* Shared control states for the public site, user workspace and admin. */
:root {
  --iid-control-focus-color: var(--user-primary, var(--iid-primary, #2563eb));
}

/* Pointer focus uses the control's border. Keyboard focus stays visible. */
:where(a[href], button, summary, [tabindex], [role="button"], [role="checkbox"], [role="radio"], [role="option"], [role="combobox"], input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}
:where(a, button, summary, [tabindex], [role="button"], [role="checkbox"], [role="radio"], [role="option"], [role="combobox"]):focus:not(:focus-visible) {
  outline: none !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  outline: none !important;
  outline-offset: 0;
}
:where(input, select, textarea, button, [tabindex]):focus {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Native and Bootstrap controls keep their existing invalid/disabled states. */
:is(.form-control, .form-select):focus:not(.is-invalid):not([aria-invalid="true"]) {
  border-color: var(--iid-control-focus-color);
}
:is(.form-control, .form-select, .form-check-input, .btn):focus,
.btn-check:focus + .btn {
  box-shadow: none !important;
}
.btn-check:focus-visible + .btn {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}

/* Element Plus: draw one border on the visible wrapper, not the inner input. */
.account-auth {
  --iid-control-focus-color: var(--auth-primary, #245de0);
}
.el-form-item.is-error {
  --iid-control-focus-color: var(--el-color-danger, #dc2626);
}
/* Select, number and date controls focus an inner input with its own tabindex. */
:is(.el-input__inner, .el-select__input, .el-select-v2__combobox-input, .el-range-input):is(:focus, :focus-visible),
.el-select .el-input__inner:is(:focus, :focus-visible) {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
.el-input__wrapper:focus-within,
.el-input__wrapper.is-focus,
.el-select .el-input.is-focus .el-input__wrapper,
.el-cascader .el-input.is-focus .el-input__wrapper,
.el-select__wrapper.is-focused,
.el-select-v2__wrapper.is-focused,
.el-select-v2__wrapper:focus-within,
.el-range-editor.is-active,
.el-textarea__inner:focus {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--iid-control-focus-color) inset !important;
}
:is(.el-radio, .el-checkbox, .el-radio-button, .el-checkbox-button):focus-visible,
:is(.el-radio__original, .el-checkbox__original, .el-radio-button__original-radio, .el-checkbox-button__original):focus-visible {
  outline: none !important;
}
.el-radio__inner {
  box-shadow: none !important;
}
.el-radio__original:focus-visible + .el-radio__inner,
.el-checkbox__original:focus-visible + .el-checkbox__inner,
.el-radio-button__original-radio:focus-visible + .el-radio-button__inner,
.el-checkbox-button__original:focus-visible + .el-checkbox-button__inner,
.el-radio:focus-visible .el-radio__inner,
.el-checkbox:focus-visible .el-checkbox__inner {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}
.el-tabs__item:focus-visible {
  box-shadow: none !important;
}
.el-switch__input:focus-visible ~ .el-switch__core,
.el-color-picker:focus-visible:not(.is-disabled) .el-color-picker__trigger,
.el-date-table td:not(.disabled):focus-visible .el-date-table-cell__text,
.el-month-table td:focus-visible .cell,
.el-year-table td:focus-visible .cell {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}
:is(.el-color-picker, .el-date-table td, .el-month-table td, .el-year-table td):focus-visible {
  outline: none !important;
}

/* Naive UI: its input/selection border already supplies focus feedback. */
.n-input,
.n-base-selection {
  --n-box-shadow-focus: none !important;
  --n-box-shadow-active: none !important;
  --n-box-shadow-focus-warning: none !important;
  --n-box-shadow-active-warning: none !important;
  --n-box-shadow-focus-error: none !important;
  --n-box-shadow-active-error: none !important;
}
.n-checkbox,
.n-switch {
  --n-box-shadow-focus: none !important;
}
.n-radio {
  --n-box-shadow-focus: inset 0 0 0 1px var(--n-dot-color-active, var(--iid-control-focus-color)) !important;
}
.n-radio-button {
  --n-button-box-shadow-focus: inset 0 0 0 1px var(--iid-control-focus-color) !important;
}
:is(.n-checkbox, .n-radio, .n-base-selection, .n-base-selection-label):focus-visible {
  outline: none !important;
}
.n-checkbox:focus-visible .n-checkbox-box,
.n-radio:focus-visible .n-radio__dot {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}

/* PrimeVue: remove the theme's 0.2rem halo from all form/selection controls. */
.p-inputtext:enabled:focus,
.p-button:focus,
.p-togglebutton.p-focus,
.p-link:focus,
.p-dropdown:not(.p-disabled).p-focus,
.p-multiselect:not(.p-disabled).p-focus,
.p-treeselect:not(.p-disabled).p-focus,
.p-cascadeselect:not(.p-disabled).p-focus,
.p-listbox:not(.p-disabled).p-focus,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-focus,
.p-inputswitch.p-focus .p-inputswitch-slider,
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container,
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container,
.p-slider:not(.p-disabled) .p-slider-handle:focus,
.p-datatable .p-sortable-column:focus,
.p-column-filter-menu-button:focus,
.p-column-filter-clear-button:focus,
.p-datepicker :is(button, [tabindex]):focus {
  box-shadow: none !important;
}
/* These components focus a hidden input; show keyboard focus on its visible box. */
.p-checkbox:has(input:focus-visible) .p-checkbox-box,
.p-radiobutton:has(input:focus-visible) .p-radiobutton-box,
.p-inputswitch:has(input:focus-visible) .p-inputswitch-slider,
.p-togglebutton:has(input:focus-visible) {
  outline: 1px solid var(--iid-control-focus-color) !important;
  outline-offset: 2px;
}