From 744af1f81e8bf33d31bbbc40beced360f5ecc32a Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sat, 10 Jan 2026 14:23:00 +0000
Subject: [PATCH] Add data_visualization/css/components.css

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

diff --git a/data_visualization/css/components.css b/data_visualization/css/components.css
new file mode 100644
index 0000000..10c0d18
--- /dev/null
+++ b/data_visualization/css/components.css
@@ -0,0 +1,113 @@
+/* ==============================
+   Summary Cards
+   ============================== */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.summary-card {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.summary-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.summary-card h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.summary-card .metric-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #1c7ed6;
+}
+
+/* Color variations based on pinning setup */
+.summary-card.unpinned {
+  border-top: 4px solid #f03e3e;
+}
+.summary-card.half_pinned {
+  border-top: 4px solid #fab005;
+}
+.summary-card.pinned {
+  border-top: 4px solid #37b24d;
+}
+
+/* ==============================
+   Filter Panel
+   ============================== */
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.filter-option {
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.filter-option:hover {
+  background-color: #dee2e6;
+}
+
+.filter-option.active {
+  background-color: #1c7ed6;
+  color: #fff;
+  border-color: #1c7ed6;
+}
+
+/* ==============================
+   Chart Container
+   ============================== */
+.visualization-container {
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 400px;
+}
+
+@media (max-width: 768px) {
+  .chart-canvas {
+    height: 300px;
+  }
+}
+
+/* ==============================
+   Footer Notice
+   ============================== */
+footer {
+  text-align: center;
+  padding: 1rem 0;
+  font-size: 0.8rem;
+  color: #868e96;
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+}
\ No newline at end of file