From b8c2ef5aea2291440a87dff257da9bd7a0890169 Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Mon, 22 Jun 2026 23:05:42 +0000
Subject: [PATCH] T19: Add PropertiesPanel.css styling

---
 .../PropertiesPanel/PropertiesPanel.css       | 181 ++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 frontend/src/components/PropertiesPanel/PropertiesPanel.css

diff --git a/frontend/src/components/PropertiesPanel/PropertiesPanel.css b/frontend/src/components/PropertiesPanel/PropertiesPanel.css
new file mode 100644
index 0000000..40bf2e7
--- /dev/null
+++ b/frontend/src/components/PropertiesPanel/PropertiesPanel.css
@@ -0,0 +1,181 @@
+.properties-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-sm, 8px);
+  font-family: var(--font-family, sans-serif);
+  font-size: var(--font-size-md, 14px);
+  color: var(--text, #333);
+}
+
+/* ── Empty state ─────────────────────────────────────────────── */
+
+.properties-panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  padding: var(--spacing-lg, 24px);
+  text-align: center;
+}
+
+.properties-panel-empty-icon {
+  font-size: 48px;
+  margin-bottom: var(--spacing-md, 16px);
+  opacity: 0.5;
+}
+
+.properties-panel-empty-text {
+  color: var(--text-secondary, #888);
+  font-size: var(--font-size-sm, 12px);
+  line-height: 1.5;
+  max-width: 220px;
+}
+
+/* ── Header ──────────────────────────────────────────────────── */
+
+.properties-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  background-color: var(--surface-hover, rgba(0, 0, 0, 0.04));
+  border-radius: var(--border-radius, 4px);
+  margin-bottom: var(--spacing-xs, 4px);
+}
+
+.properties-panel-type-badge {
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--font-size-sm, 12px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--primary, #2563eb);
+}
+
+.properties-panel-id {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--text-secondary, #888);
+  font-family: monospace;
+}
+
+/* ── Fieldsets ───────────────────────────────────────────────── */
+
+.properties-panel-fieldset {
+  border: 1px solid var(--border, #e0e0e0);
+  border-radius: var(--border-radius, 4px);
+  padding: var(--spacing-sm, 8px);
+  margin: 0;
+}
+
+.properties-panel-fieldset legend {
+  font-weight: var(--font-weight-medium, 500);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-secondary, #666);
+  padding: 0 var(--spacing-xs, 4px);
+}
+
+/* ── Rows ────────────────────────────────────────────────────── */
+
+.properties-panel-row {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+}
+
+.properties-panel-row > * {
+  flex: 1;
+}
+
+/* ── Labels ──────────────────────────────────────────────────── */
+
+.properties-panel-label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: var(--spacing-xs, 4px);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-secondary, #666);
+}
+
+/* ── Inputs ──────────────────────────────────────────────────── */
+
+.properties-panel-input,
+.properties-panel-text-input,
+.properties-panel-select {
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid var(--border, #ccc);
+  border-radius: var(--border-radius, 4px);
+  background-color: var(--background, #fff);
+  color: var(--text, #333);
+  font-size: var(--font-size-md, 14px);
+  font-family: var(--font-family, sans-serif);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+}
+
+.properties-panel-input:focus,
+.properties-panel-text-input:focus,
+.properties-panel-select:focus {
+  outline: none;
+  border-color: var(--primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.properties-panel-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.properties-panel-input[type="number"]::-webkit-inner-spin-button,
+.properties-panel-input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* ── Color inputs ────────────────────────────────────────────── */
+
+.properties-panel-color-input {
+  width: 100%;
+  height: 28px;
+  padding: 2px;
+  border: 1px solid var(--border, #ccc);
+  border-radius: var(--border-radius, 4px);
+  background-color: var(--background, #fff);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.properties-panel-color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.properties-panel-color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.properties-panel-text-input {
+  margin-top: 2px;
+  font-size: var(--font-size-xs, 11px);
+  font-family: monospace;
+}
+
+/* ── Select ──────────────────────────────────────────────────── */
+
+.properties-panel-select {
+  cursor: pointer;
+  appearance: auto;
+}
+
+/* ── Responsive ──────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .properties-panel {
+    padding: var(--spacing-xs, 4px);
+  }
+
+  .properties-panel-row {
+    flex-direction: column;
+  }
+}