Server Card schöner gemacht

Watcher/wwwroot/css/server-detail.css

@@ -1,20 +1,75 @@
-.info {
-    margin: 2rem;
-    margin-top: 3rem;
+/* Server Details - Info Card */
+.info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.hardware {
-    margin: 2rem;
-    margin-top: 3rem;
+.info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
+.info-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #6c757d;
+    display: flex;
+    align-items: center;
+}
+
+.info-value {
+    font-size: 0.95rem;
+    color: var(--color-text, #212529);
+    font-weight: 400;
+    padding-left: 1.25rem;
+}
+
+.info-value .text-muted {
+    font-style: italic;
+    font-size: 0.9rem;
+}
+
+/* Section Headers in Info Card */
+.card-body h6.text-muted {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.card-body h6.text-muted i {
+    font-size: 1rem;
+}
+
+/* Graph Container */
 .graphcontainer {
     height: 25rem;
     width: 100%;
-    background-color: var(--color-surface);
+    background-color: var(--color-surface, #f8f9fa);
+    border-radius: 0.375rem;
 }
 
 .graph {
     width: 100%;
     height: 22rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .info-item {
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .card-header .d-flex.gap-2 {
+        flex-wrap: wrap;
+    }
+
+    .card-header .btn-sm {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+    }
 }