From 91635f7f5295443ad2a1bb79ba3e29fe208b4664 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 17 Nov 2021 09:39:39 +0300
Subject: [PATCH] Fixed #1768 -  DataTable Focus Row Rectangle on Safari

---
 public/themes/arya-blue/theme.css               | 10 ++++++++--
 public/themes/arya-green/theme.css              | 10 ++++++++--
 public/themes/arya-orange/theme.css             | 10 ++++++++--
 public/themes/arya-purple/theme.css             | 10 ++++++++--
 public/themes/bootstrap4-dark-blue/theme.css    | 10 ++++++++--
 public/themes/bootstrap4-dark-purple/theme.css  | 10 ++++++++--
 public/themes/bootstrap4-light-blue/theme.css   | 10 ++++++++--
 public/themes/bootstrap4-light-purple/theme.css | 10 ++++++++--
 public/themes/fluent-light/theme.css            | 10 ++++++++--
 public/themes/lara-dark-blue/theme.css          | 10 ++++++++--
 public/themes/lara-dark-indigo/theme.css        | 10 ++++++++--
 public/themes/lara-dark-purple/theme.css        | 10 ++++++++--
 public/themes/lara-dark-teal/theme.css          | 10 ++++++++--
 public/themes/lara-light-blue/theme.css         | 10 ++++++++--
 public/themes/lara-light-indigo/theme.css       | 10 ++++++++--
 public/themes/lara-light-purple/theme.css       | 10 ++++++++--
 public/themes/lara-light-teal/theme.css         | 10 ++++++++--
 public/themes/luna-amber/theme.css              | 10 ++++++++--
 public/themes/luna-blue/theme.css               | 10 ++++++++--
 public/themes/luna-green/theme.css              | 10 ++++++++--
 public/themes/luna-pink/theme.css               | 10 ++++++++--
 public/themes/md-dark-deeppurple/theme.css      | 10 ++++++++--
 public/themes/md-dark-indigo/theme.css          | 10 ++++++++--
 public/themes/md-light-deeppurple/theme.css     | 10 ++++++++--
 public/themes/md-light-indigo/theme.css         | 10 ++++++++--
 public/themes/mdc-dark-deeppurple/theme.css     | 10 ++++++++--
 public/themes/mdc-dark-indigo/theme.css         | 10 ++++++++--
 public/themes/mdc-light-deeppurple/theme.css    | 10 ++++++++--
 public/themes/mdc-light-indigo/theme.css        | 10 ++++++++--
 public/themes/nova-accent/theme.css             | 10 ++++++++--
 public/themes/nova-alt/theme.css                | 10 ++++++++--
 public/themes/nova-vue/theme.css                | 10 ++++++++--
 public/themes/nova/theme.css                    | 10 ++++++++--
 public/themes/rhea/theme.css                    | 10 ++++++++--
 public/themes/saga-blue/theme.css               | 10 ++++++++--
 public/themes/saga-green/theme.css              | 10 ++++++++--
 public/themes/saga-orange/theme.css             | 10 ++++++++--
 public/themes/saga-purple/theme.css             | 10 ++++++++--
 public/themes/tailwind-light/theme.css          | 10 ++++++++--
 public/themes/vela-blue/theme.css               | 10 ++++++++--
 public/themes/vela-green/theme.css              | 10 ++++++++--
 public/themes/vela-orange/theme.css             | 10 ++++++++--
 public/themes/vela-purple/theme.css             | 10 ++++++++--
 43 files changed, 344 insertions(+), 86 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 7b45c6b5ed..a4692a6b50 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 315781afb9..a6b5274848 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 7f516685c5..58381a645a 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 1bbc949719..c5b6807777 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index ffc8ec6d7c..a5de41cfbf 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2304,7 +2304,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #e3f3fe;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #e3f3fe;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
@@ -3291,7 +3294,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #e3f3fe;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #e3f3fe;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 472430d593..cc6e678406 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2304,7 +2304,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #f0e6f5;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #f0e6f5;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
@@ -3291,7 +3294,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #f0e6f5;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #f0e6f5;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 1c28aafc03..7fde176a23 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(38, 143, 255, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #212529;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(38, 143, 255, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index b686e3ef53..b8f5f9f471 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(136, 60, 174, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #883cae;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #212529;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(136, 60, 174, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #883cae;
   color: #ffffff;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 11aab740ce..835bc537a0 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #323130;
   transition: box-shadow 0.2s;
-  outline-color: #605e5c;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #605e5c;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #edebe9;
   color: #323130;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #323130;
   transition: box-shadow 0.2s;
-  outline-color: #605e5c;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #323130;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #605e5c;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #edebe9;
   color: #323130;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 0aa299a4f2..fbf8386db4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -2327,7 +2327,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(147, 197, 253, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(147, 197, 253, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(147, 197, 253, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3314,7 +3317,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(147, 197, 253, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(147, 197, 253, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(147, 197, 253, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 30c8230595..faff516009 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -2327,7 +2327,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(165, 180, 252, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(165, 180, 252, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(165, 180, 252, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3314,7 +3317,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(165, 180, 252, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(165, 180, 252, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(165, 180, 252, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index f58d5d1e98..7182539b5e 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -2327,7 +2327,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(196, 181, 253, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(196, 181, 253, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(196, 181, 253, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3314,7 +3317,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(196, 181, 253, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(196, 181, 253, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(196, 181, 253, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index b3b57b623b..cb3f08632c 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -2327,7 +2327,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(94, 234, 212, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(94, 234, 212, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(94, 234, 212, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3314,7 +3317,6 @@
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: rgba(94, 234, 212, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(94, 234, 212, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(94, 234, 212, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 1b4d79d16a..ab0d9b534d 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -2327,7 +2327,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #BFDBFE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #BFDBFE;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EFF6FF;
   color: #3B82F6;
@@ -3314,7 +3317,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #BFDBFE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #BFDBFE;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EFF6FF;
   color: #3B82F6;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index eeb6b692ce..9430f99508 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -2327,7 +2327,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #C7D2FE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #C7D2FE;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #4338CA;
@@ -3314,7 +3317,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #C7D2FE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #C7D2FE;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #4338CA;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index a961dd5f06..9338c7a2cc 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -2327,7 +2327,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #DDD6FE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #DDD6FE;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F5F3FF;
   color: #6D28D9;
@@ -3314,7 +3317,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #DDD6FE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #DDD6FE;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F5F3FF;
   color: #6D28D9;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 5f458a792f..9971781da5 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -2327,7 +2327,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #99F6E4;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #99F6E4;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F0FDFA;
   color: #0F766E;
@@ -3314,7 +3317,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #99F6E4;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #99F6E4;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F0FDFA;
   color: #0F766E;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 9004ece1de..6f254360dd 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2304,7 +2304,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #FFE082;
   color: #212529;
@@ -3291,7 +3294,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #FFE082;
   color: #212529;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 413308fba4..6738348b19 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2304,7 +2304,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #81D4FA;
   color: #212529;
@@ -3291,7 +3294,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #81D4FA;
   color: #212529;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 75c3c277b3..0bc98e31e1 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2304,7 +2304,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #C5E1A5;
   color: #212529;
@@ -3291,7 +3294,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #C5E1A5;
   color: #212529;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 5b1a0ad826..9a82b1b484 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2304,7 +2304,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F48FB1;
   color: #212529;
@@ -3291,7 +3294,6 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F48FB1;
   color: #212529;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 3614f2469e..9b9bd52c24 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -2316,7 +2316,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -3303,7 +3306,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index f23a6b829a..bf2d40328a 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2316,7 +2316,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -3303,7 +3306,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 08fc7f9724..a2e25976f6 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -2316,7 +2316,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -3303,7 +3306,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index b169a7411d..a3f203dbbc 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2316,7 +2316,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -3303,7 +3306,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index cfa2f35b7e..4701374350 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -2316,7 +2316,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -3303,7 +3306,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 026c6deef5..c05c6501cb 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2316,7 +2316,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -3303,7 +3306,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index f7376b9014..d2f7d43777 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -2316,7 +2316,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -3303,7 +3306,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 7d17a6d9cc..14ed86ff52 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2316,7 +2316,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2358,6 +2357,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -3303,7 +3306,6 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
-  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3337,6 +3339,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 2e4405bf3a..9e4146bf27 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #e02365;
   color: #ffffff;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #e02365;
   color: #ffffff;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 9f727e7d0a..1c91af55d5 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 92e71eae83..6c9e0d9bf2 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #c2e9d8;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #c2e9d8;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #41b883;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #c2e9d8;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #c2e9d8;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #41b883;
   color: #ffffff;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 475ba31ad4..fc082028dd 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
-  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #8dcdff;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index f6df79c0a8..efebd9f05a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #666666;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: #e4e9ec;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #e4e9ec;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #AFD3C8;
   color: #385048;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #666666;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  outline-color: #e4e9ec;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #666666;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #e4e9ec;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #AFD3C8;
   color: #385048;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index d129f9f757..8005d317be 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #a6d5fa;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #a6d5fa;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #E3F2FD;
   color: #495057;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #a6d5fa;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #a6d5fa;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #E3F2FD;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 6e5e6713d8..e05fe82b31 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #b7e0b8;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #b7e0b8;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #E8F5E9;
   color: #495057;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #b7e0b8;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #b7e0b8;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #E8F5E9;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index d4ad041819..9a60444a40 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #ffe69c;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #ffe69c;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #FFF3E0;
   color: #495057;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #ffe69c;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #ffe69c;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #FFF3E0;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 9a3a6d5ca0..697047db91 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2292,7 +2292,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #df9eea;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #df9eea;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F3E5F5;
   color: #495057;
@@ -3279,7 +3282,6 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
-  outline-color: #df9eea;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #df9eea;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F3E5F5;
   color: #495057;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 16e641d25c..2b96c9ce96 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -2327,7 +2327,6 @@
   background: #ffffff;
   color: #3f3f46;
   transition: none;
-  outline-color: #6366F1;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2369,6 +2368,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #6366F1;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #312E81;
@@ -3314,7 +3317,6 @@
   background: #ffffff;
   color: #3f3f46;
   transition: none;
-  outline-color: #6366F1;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3348,6 +3350,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #3f3f46;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #6366F1;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #312E81;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index fc2c170cba..c34acc028b 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2292,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 73ce67e990..a678d57523 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2292,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 7fc8e545d4..f865db3f4e 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2292,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 2366646ecf..bff939cbc2 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2292,7 +2292,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);