From d912ca8a6e4c1bd91e5df24398a4300005aad9c1 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Mon, 26 Jan 2026 12:23:42 +0000
Subject: [PATCH] Add result_visualization/css/components.css

---
 result_visualization/css/components.css | 152 ++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 result_visualization/css/components.css

diff --git a/result_visualization/css/components.css b/result_visualization/css/components.css
new file mode 100644
index 0000000..7d1b42b
--- /dev/null
+++ b/result_visualization/css/components.css
@@ -0,0 +1,152 @@
+:root {
+  --primary: #2b6cb0;
+  --secondary: #4a5568;
+  --background: #f7fafc;
+  --card-bg: #ffffff;
+  --border-color: #e2e8f0;
+  --text-color: #1a202c;
+  --text-muted: #718096;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --border-radius: 0.5rem;
+  --transition-fast: 0.15s ease-in-out;
+  --font-base: 'system-ui', sans-serif;
+}
+
+/* ===============================================
+   Filter Panel Styles
+   =============================================== */
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 160px;
+}
+
+.filter-item label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.filter-item select,
+.filter-item input {
+  padding: var(--spacing-sm);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  font-family: var(--font-base);
+  color: var(--text-color);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.filter-item select:focus,
+.filter-item input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.2);
+  outline: none;
+}
+
+.run-selector {
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.run-selector:hover,
+.run-selector:focus {
+  background-color: rgba(43, 108, 176, 0.05);
+  border-color: var(--primary);
+}
+
+/* ===============================================
+   Chart Panel Styles
+   =============================================== */
+.chart-panel {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.results-chart {
+  width: 100%;
+  height: 400px;
+  display: block;
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  overflow: hidden;
+}
+
+.results-chart canvas,
+.results-chart svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===============================================
+   Statistics Cards
+   =============================================== */
+.overview-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+}
+
+.stat-card {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.stat-card p {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+@media (min-width: 640px) {
+  .results-chart {
+    height: 500px;
+  }
+  .filter-panel {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (min-width: 1024px) {
+  .results-chart {
+    height: 600px;
+  }
+}
\ No newline at end of file