/* Shared keyboard/field focus contract. Loaded after route styles in every app shell.
   The inset contour covers the existing border without changing control geometry.
   !important is limited to focus decoration: legacy pages use competing focus rules. */
body:is(.app-page, .login-page) :where(button, a[href], input, select, textarea, [tabindex], [contenteditable="true"]):focus-visible,
body:is(.app-page, .login-page) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, [contenteditable="true"]):focus {
  outline: 2px solid var(--brand-primary, #087a5b) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transition-property: color, background-color, border-color, transform !important;
}

/* A pointer click on a close/action button must not leave the browser's second ring.
   Keyboard focus remains visible, including after focus returns from a dialog. */
body:is(.app-page, .login-page) :is(button, a[href], [role="button"]):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark actions need a light contour separated from the edge by the button fill. */
body:is(.app-page, .login-page) :is(.btn-primary, .btn-danger, .primary, .login-submit,
  .dr-primary, .sr-primary, .ic-primary, .gs-primary, .ir-btn-primary,
  .avatar-menu-trigger, .profile-tab.is-active, .pagination-button.is-active,
  #pagination button[aria-current="page"], .channel-support-whatsapp-link,
  .api-primary, .ct-more-apply, .destructive, .btn.danger,
  .peer-button:not(.peer-button-secondary), .ic-send,
  .cw-picker-done, .flatpickr-day.selected):focus-visible {
  outline-color: #fff !important;
  outline-offset: -4px !important;
}

/* Composed fields own one boundary. Buttons inside them own their own focus;
   focusing a reveal/clear/format action must not also highlight its field. */
body:is(.app-page, .login-page) :is(.login-password, .ps-phone, .ps-search-field,
  .sms-phone-control, .sms-picker-search, .automation-greetings .search,
  .channel-profile-control, .peer-secret-field, .cs-search, .dr-search, .hm-search,
  .ic-search, .ic-input-wrap, .tl-search, .template-editor-shell, .tw-rich-frame):focus-within {
  outline: none !important;
  box-shadow: none !important;
}

body:is(.app-page, .login-page) :is(.login-password, .ps-phone, .ps-search-field,
  .sms-phone-control, .sms-picker-search, .automation-greetings .search,
  .channel-profile-control, .peer-secret-field, .cs-search, .dr-search, .hm-search,
  .ic-search, .ic-input-wrap, .tl-search, .tw-rich-frame,
  .template-editor-shell:not(:has(.tw-rich-frame))):has(:is(input, select, textarea, [contenteditable="true"]):focus) {
  outline: 2px solid var(--brand-primary, #087a5b) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

body:is(.app-page, .login-page) :is(.login-password, .ps-phone, .ps-search-field,
  .sms-phone-control, .sms-picker-search, .automation-greetings .search,
  .channel-profile-control, .peer-secret-field, .cs-search, .dr-search, .hm-search,
  .ic-search, .ic-input-wrap, .tl-search, .template-editor-shell, .tw-rich-frame)
  :is(input, select, textarea, [contenteditable="true"]):focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Hidden native choices expose their focus through the visible choice surface. */
body.app-page :is(.campaign-tag, .cs-color, .aep-transfer-option, .switch-target, .ic-file-pick, .upload-control):focus-within,
body.app-page :is(.contact-tag-option, .contacts-column-option, .contact-custom-switch,
  .contact-consent-row, .settings-required-row, .template-switch, .tag-color-choice,
  .template-media-picker, .campaign-media-drop):has(input:focus-visible) {
  outline: 2px solid var(--brand-primary, #087a5b) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
body.app-page :is(.campaign-tag, .cs-color, .aep-transfer-option, .switch-target, .ic-file-pick, .upload-control,
  .contact-tag-option, .contacts-column-option, .contact-custom-switch, .contact-consent-row,
  .settings-required-row, .template-switch, .tag-color-choice, .template-media-picker, .campaign-media-drop) input:focus,
body.app-page .switch-target .switch:focus,
body.app-page .admin-segmented input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
body.app-page .admin-segmented input:focus-visible + span {
  outline: 2px solid var(--brand-primary, #087a5b) !important;
  outline-offset: -2px !important;
}
body.app-page .upload-control:has(button:focus) {
  outline: none !important;
}
body.app-page .template-switch:has(input:checked:focus-visible) {
  outline-color: #fff !important;
  outline-offset: -4px !important;
}

/* Validation remains visible while the field is focused. */
body:is(.app-page, .login-page) :is(input, select, textarea)[aria-invalid="true"],
body.app-page :is(.form-field, .contact-phone-field):is(.has-error, .is-invalid) :is(input, select, textarea) {
  box-shadow: none !important;
}
body.app-page :is(.form-field, .contact-phone-field):is(.has-error, .is-invalid) :is(input, select, textarea):focus,
body:is(.app-page, .login-page) :is(input, select, textarea)[aria-invalid="true"]:focus {
  outline-color: var(--brand-danger, #c52a3d) !important;
}

@media (forced-colors: active) {
  body:is(.app-page, .login-page) :focus-visible {
    outline-color: Highlight !important;
  }
}