From e027459a9d81d7a9bc1d71fa0a0924f499a57779 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Thu, 26 Feb 2026 12:52:55 +0000
Subject: [PATCH] Add metrics_visualization/css/layout.css

---
 metrics_visualization/css/layout.css | 184 +++++++++++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 metrics_visualization/css/layout.css

diff --git a/metrics_visualization/css/layout.css b/metrics_visualization/css/layout.css
new file mode 100644
index 0000000..0cc1dde
--- /dev/null
+++ b/metrics_visualization/css/layout.css
@@ -0,0 +1,184 @@
+:root {
+  --color-bg: #f4f5f7;
+  --color-surface: #ffffff;
+  --color-border: #d0d4d9;
+  --color-primary: #1a73e8;
+  --color-text: #202124;
+  --color-text-light: #5f6368;
+  --color-hover: #e8f0fe;
+  --radius-base: 4px;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --max-content-width: 1200px;
+  --font-base: 'Segoe UI', Arial, sans-serif;
+  --font-size-base: 1rem;
+  --line-height-base: 1.5;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-base);
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  line-height: var(--line-height-base);
+}
+
+/* ========================= */
+/* App Shell Layout */
+/* ========================= */
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-sm) var(--spacing-md);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.filters-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.metrics-chart {
+  display: block;
+  flex: 1;
+  padding: var(--spacing-md);
+  max-width: var(--max-content-width);
+  margin: 0 auto;
+}
+
+.metrics-table {
+  background-color: var(--color-surface);
+  margin: var(--spacing-md) auto;
+  max-width: var(--max-content-width);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  overflow-x: auto;
+}
+
+.app-footer {
+  text-align: center;
+  padding: var(--spacing-md);
+  font-size: 0.875rem;
+  color: var(--color-text-light);
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+}
+
+/* ========================= */
+/* Chart Panel */
+/* ========================= */
+
+.chart-panel {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* ========================= */
+/* Table Styling */
+/* ========================= */
+
+.metrics-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.metrics-table th, .metrics-table td {
+  text-align: left;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.metrics-table th {
+  background-color: var(--color-bg);
+  font-weight: 600;
+  color: var(--color-text-light);
+}
+
+.metrics-table tr:hover {
+  background-color: var(--color-hover);
+}
+
+/* ========================= */
+/* Filter Panel */
+/* ========================= */
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.filter-label {
+  font-weight: 500;
+  color: var(--color-text-light);
+}
+
+.filters-panel select, .filters-panel input[type='checkbox'] {
+  padding: var(--spacing-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+}
+
+.filters-panel select:focus, .filters-panel input[type='checkbox']:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* ========================= */
+/* Responsive Adjustments */
+/* ========================= */
+
+@media (min-width: 768px) {
+  .filters-panel {
+    justify-content: flex-start;
+  }
+
+  .metrics-chart {
+    padding: var(--spacing-lg);
+  }
+
+  .chart-panel {
+    margin-bottom: var(--spacing-lg);
+  }
+}
+
+@media (min-width: 1024px) {
+  .filters-panel {
+    gap: var(--spacing-md);
+  }
+
+  .metrics-table th, .metrics-table td {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
+
+/* ========================= */
+/* Footer Copyright */
+/* ========================= */
+
+.app-footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: var(--spacing-sm);
+  font-size: 0.75rem;
+  color: var(--color-text-light);
+}
\ No newline at end of file