Add separate group reset

resources/css/csp-safe.css

@@ -732,3 +732,85 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     background-color: rgba(30, 64, 175, 0.2); /* blue-900/20 */
 }
 
+/* Group Selection Styles */
+.group-checkbox {
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+}
+
+.group-row.selected {
+    background-color: rgba(59, 130, 246, 0.1); /* blue-500/10 */
+}
+
+.dark .group-row.selected {
+    background-color: rgba(59, 130, 246, 0.15); /* blue-500/15 */
+}
+
+/* Selection counter animation */
+#selection-counter {
+    transition: opacity 0.2s ease-in-out;
+}
+
+#selection-counter.hidden {
+    opacity: 0;
+}
+
+/* Reset selected button animation */
+#reset-selected-btn {
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+#reset-selected-btn:not(.hidden) {
+    animation: slideIn 0.2s ease-in-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Indeterminate checkbox styling */
+#select-all-groups:indeterminate {
+    background-color: rgb(156, 163, 175); /* gray-400 */
+    border-color: rgb(156, 163, 175);
+}
+
+.dark #select-all-groups:indeterminate {
+    background-color: rgb(107, 114, 128); /* gray-500 */
+    border-color: rgb(107, 114, 128);
+}
+
+/* Reset selected modal list styling */
+#reset-selected-list {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+#reset-selected-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+#reset-selected-list::-webkit-scrollbar-track {
+    background: rgb(243, 244, 246); /* gray-100 */
+    border-radius: 3px;
+}
+
+.dark #reset-selected-list::-webkit-scrollbar-track {
+    background: rgb(55, 65, 81); /* gray-700 */
+}
+
+#reset-selected-list::-webkit-scrollbar-thumb {
+    background: rgb(156, 163, 175); /* gray-400 */
+    border-radius: 3px;
+}
+
+.dark #reset-selected-list::-webkit-scrollbar-thumb {
+    background: rgb(107, 114, 128); /* gray-500 */
+}
+