Remove nav-tabs from vertical nav items on rights page

The nav-tabs border style was still active behind active
roles when selected, creating a blurred edge around the
pill. Remove nav-tabs, which is mean for a vertical tab-like
interface, like the rights categories.

Add some style to retain the border on hover, which gives some
nice feedback to the user as you mouse over the roles.

share/html/Admin/Elements/EditRights

@@ -212,7 +212,7 @@ if ($anchor =~ /AddPrincipal/) {
   <div class="row mt-2">
     <div class="col-3">
       <div class="principal-tabs">
-        <ul class="nav nav-tabs flex-column nav-pills" role="tablist" aria-orientation="vertical">
+        <ul class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
 <%perl>
 for my $category (@$Principals) {
     my ($name, $collection, $col, $loc) = @$category;
@@ -228,7 +228,7 @@ for my $category (@$Principals) {
         my $display = ref $col eq 'CODE' ? $col->($obj) : $obj->$col;
         my $id = "acl-" . $obj->PrincipalId;
 </%perl>
-          <li class="nav-item">
+          <li class="rt-rights-role nav-item mb-1">
             <a href="#<% $id %>" class="nav-link" id="<% "principal-tab-$id" %>" data-bs-toggle="tab" role="tab" aria-controls="<% $id %>" aria-selected="false">
               <% $loc ? loc($display) : $display %>
             </a>

share/static/css/elevator/rights-editor.css

@@ -44,3 +44,29 @@
 .rights-editor .tab-aggregates-checked-rights:not(.active) {
     background-color: var(--bs-secondary-bg);
 }
+
+/* Customize border color for principal tabs */
+.principal-tabs .rt-rights-role .nav-link {
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    transition: unset;
+}
+
+[data-bs-theme=light] {
+    .principal-tabs .rt-rights-role .nav-link.active {
+        border-color: var(--bs-nav-pills-link-active-bg);
+    }
+    .principal-tabs .rt-rights-role .nav-link:hover {
+        border-color: #ddd;
+    }
+}
+
+[data-bs-theme=dark] {
+    .principal-tabs .rt-rights-role .nav-link.active {
+        border-color: #515151;
+    }
+    .principal-tabs .rt-rights-role .nav-link:hover {
+        border-color: #666;
+    }
+}