Routes fixed, new ui

Watcher/wwwroot/css/site.css

@@ -1,22 +1,66 @@
-html {
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-html {
-  position: relative;
-  min-height: 100%;
+:root {
+    --color-bg: #0d1b2a;
+    --color-surface: #1b263b;
+    --color-accent: #415a77;
+    --color-primary: #0d6efd;
+    --color-text: #ffffff;
+    --color-muted: #c0c0c0;
+    --color-success: #14a44d;
+    --color-danger: #ff6b6b;
 }
 
 body {
-  margin-bottom: 60px;
-}
+    background-color: var(--color-bg);
+    color: var(--color-text);
+}
+
+a {
+    color: var(--color-primary);
+}
+
+.card, .navbar, .form-control, .dropdown-menu {
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    border: none;
+}
+
+.form-control {
+    background-color: var(--color-accent);
+    color: var(--color-text);
+}
+
+.form-control::placeholder {
+    color: var(--color-muted);
+}
+
+.navbar .nav-link,
+.dropdown-item {
+    color: var(--color-text);
+}
+
+.btn-primary {
+    background-color: var(--color-primary);
+    border: none;
+}
+
+.btn-danger {
+    background-color: var(--color-danger);
+    border: none;
+}
+
+.btn-pocketid {
+    background-color: var(--color-success);
+    color: white;
+}
+
+.btn-pocketid:hover {
+    background-color: #0f8c3c;
+}
+
+.table {
+    color: var(--color-text);
+}
+
+hr {
+    border-top: 1px solid var(--color-accent);
+}