/* Overrides for Metrics page toggle buttons
   Scope: only affects buttons that include the `toggle` class */

/* Keep light buttons light on hover/focus/active/checked so they don't look selected */
.btn-check:active + .btn.btn-light-primary.toggle,
.btn-check:checked + .btn.btn-light-primary.toggle,
.btn.btn-light-primary.toggle.active,
.btn.btn-light-primary.toggle.show,
.btn.btn-light-primary.toggle:active:not(.btn-active),
.btn.btn-light-primary.toggle:focus:not(.btn-active),
.btn.btn-light-primary.toggle:hover:not(.btn-active),
.show > .btn.btn-light-primary.toggle {
    background-color: var(--bs-light-bg-subtle) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline/shadow for any `.toggle` button */
.toggle:focus,
.toggle:focus-visible,
.toggle:active,
.toggle:focus-within,
.btn.toggle:focus,
.btn.toggle:focus-visible,
.btn.toggle:active,
.btn.toggle:focus:active,
button.toggle:focus,
button.toggle:focus-visible,
button.toggle:active,
button.toggle:focus:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Optional: avoid mobile tap highlight */
.toggle {
    -webkit-tap-highlight-color: transparent;
}