style: move styles from HTML to CSS for better organization

- Transferred styles related to the x-cloak directive, input, select, and badge components from settingsBase.html to custom.css.
- This change improves the separation of concerns by consolidating styles in a dedicated CSS file, enhancing maintainability and readability of the HTML structure.

assets/custom.css

@@ -1,3 +1,8 @@
+/* Add at the top of the file */
+[x-cloak=""] {
+    display: none !important;
+}
+
 /* Force page scrolling behavior */
 html, body {
   height: 100%;
@@ -548,4 +553,23 @@ thead.sticky-header {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+/* Settings Base Styles */
+.input {
+    border-radius: 0.3rem;
+}
+
+.select {
+    border-radius: 0.3rem;
+}
+
+.badge.badge-primary.badge-sm.changed-badge {
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.125rem;
+    height: 1rem;
 }

views/settings/settingsBase.html

@@ -77,31 +77,6 @@
         }
     };
 </script>
-<style>
-    [x-cloak] {
-        display: none !important;
-    }
-
-    .input {
-        border-radius: 0.3rem;
-    }
-
-    .select {
-        border-radius: 0.3rem;
-    }
-
-    .badge.badge-primary.badge-sm.changed-badge {
-        opacity: 1;
-        transition: opacity 0.3s ease-out;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 0.125rem;
-        /* mt-0.5 */
-        height: 1rem;
-        /* h-4 */
-    }
-</style>
 <div class="col-span-12" x-data="{ 
     notifications: [],
     hasChanges: false,