:root{
  --btn-action-color: #6b6b67; /* muted */
  --btn-action-hover-bg: rgba(0,0,0,0.04);
  --btn-action-focus: rgba(59,130,246,0.12);
  --btn-action-radius: 6px;
  --btn-action-size: 36px;
}

/* Minimal icon-only action button used across lists */
.btn-action{
  background: transparent;
  border: 1px solid transparent;
  color: var(--btn-action-color);
  width: var(--btn-action-size);
  height: var(--btn-action-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, transform .06s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 1rem;
}

/* Slim variant with no extra padding (used for tight lists) */
.btn-action.btn-icon-only {
  padding: 0;
}

/* Icon sizing */
.btn-action .bi{
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}

/* Hover / focus states (subtle, accessible) */
.btn-action:hover{
  background: var(--btn-action-hover-bg);
  color: #374151;
  transform: translateY(-1px);
}

.btn-action:active{
  transform: translateY(0);
}

/* Accessible focus ring */
.btn-action:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--btn-action-focus);
  border-radius: var(--btn-action-radius);
}

/* Disabled */
.btn-action[disabled], .btn-action.disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-action{
    transition: none;
    transform: none;
  }
  .btn-action:hover{ transform: none; }
}