/* One visual-state contract for Bootstrap primary and existing filled brand
   buttons. Legacy pages use !important colors/shadows; the narrowly scoped
   visual declarations below prevent those rules from overriding states.
   Geometry, contents, events and enabled/disabled conditions remain unchanged. */
:root body :is(.btn, button, a):is(
  .btn-primary, .lm-btn-primary-glow-sm, .lm-btn-primary-pill,
  .lm-cosmic-btn-primary, .lm-mypage-top-btn, .lm-btn-irb,
  .lm-btn-confirm-action, .lm-btn-submit-notice, .lm-btn-retry,
  .lm-btn-study-action.btn-manage-apps
) {
  --lm-button-bg: var(--admin-brand, var(--ops-blue, var(--lm-primary)));
  --lm-button-hover-bg: color-mix(in srgb, var(--lm-button-bg) 88%, #000);
  --lm-button-active-bg: color-mix(in srgb, var(--lm-button-bg) 76%, #000);
  --bs-btn-bg: var(--lm-button-bg);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--lm-button-bg);
  --bs-btn-hover-bg: var(--lm-button-hover-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--lm-button-hover-bg);
  --bs-btn-active-bg: var(--lm-button-active-bg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--lm-button-active-bg);
  --bs-btn-disabled-bg: var(--lm-button-disabled-bg);
  --bs-btn-disabled-color: var(--lm-button-disabled-text);
  --bs-btn-disabled-border-color: var(--lm-button-disabled-border);
  --bs-btn-disabled-opacity: 1;
  background: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;

  &:is(.lm-btn-primary-glow-sm, .lm-btn-primary-pill, .lm-cosmic-btn-primary,
       .lm-mypage-top-btn, .lm-btn-irb, .lm-btn-confirm-action, .lm-btn-retry) {
    --lm-button-bg: var(--lm-button-purple-bg, var(--lm-button-purple));
  }

  &:hover:not(:disabled, [disabled], .disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
    background: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--bs-btn-hover-color) !important;
  }

  &:is(:active, .active, [aria-pressed="true"]):not(:disabled, [disabled], .disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
    background: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
    color: var(--bs-btn-active-color) !important;
  }

  &:is(:disabled, [disabled], .disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
    background: var(--bs-btn-disabled-bg) !important;
    border-color: var(--bs-btn-disabled-border-color) !important;
    color: var(--bs-btn-disabled-color) !important;
  }

  &:is(:disabled, [disabled], .disabled, [aria-disabled="true"]) {
    pointer-events: none;
    cursor: not-allowed;
  }

  &:is([aria-busy="true"], .is-loading) {
    cursor: progress;
  }

  &:focus-visible {
    outline: 3px solid var(--admin-accent, var(--color-focus)) !important;
    outline-offset: 3px;
  }

  /* Existing icon colors follow the label in disabled/loading states too. */
  :is(i, svg) {
    color: inherit !important;
  }
}

/* Retain the existing dashboard's blue variant without duplicating states. */
:where(.lm-workspace-page) {
  --lm-button-purple-bg: var(--lm-primary);
}

@media (prefers-reduced-motion: reduce) {
  :root body :is(.btn, button, a):is(
    .btn-primary, .lm-btn-primary-glow-sm, .lm-btn-primary-pill,
    .lm-cosmic-btn-primary, .lm-mypage-top-btn, .lm-btn-irb,
    .lm-btn-confirm-action, .lm-btn-submit-notice, .lm-btn-retry,
    .lm-btn-study-action.btn-manage-apps
  ) {
    transition: none !important;
  }
}