/* Design-System "Petrol · Volt · Kupfer" v2.1 (H:\design-system-econsult.md), projektübergreifendes Update für die Econsult-Familie (siehe elt-planung-suite). Bootstrap bleibt Basis für Formulare/Tabellen/Modals; wir tönen die vorhandenen Bootstrap-Komponenten über deren eigene --bs-btn-*-Variablen um (globals.css lädt nach bootstrap.min.css, gleiche Spezifität gewinnt per Ladereihenfolge) statt Bootstrap zu ersetzen. Dark mode: Bootstrap schaltet seine eigenen Komponenten (Formulare, Modals, Cards, Alerts, ...) automatisch um, sobald `data-bs-theme="dark"` auf steht (gesetzt von ThemeToggle.tsx, persistiert in localStorage). Der custom Stromkreis-Grid nutzt dafür dieselben Tokens unten, per `:root[data-bs-theme="dark"]` überschrieben. */ :root { --color-primary: #1c3f52; /* Petrol */ --color-primary-dark: #0f2733; /* Petrol Dark */ --color-primary-deep: #0a1920; /* Petrol Deep */ --color-accent: #4e7e93; /* Petrol Light */ --color-accent-pale: #9dbac9; /* Petrol Pale */ --color-signal: #3fa66b; /* Volt - generelle aktiv/positiv-Farbe */ --color-signal-dark: #237a47; --color-attention: #c97a3b; /* Kupfer - bewusst selten, "braucht Aufmerksamkeit" */ --color-attention-dark: #9c5a26; --color-ink: #182229; /* Graphite */ --color-ink-soft: #59666d; /* Slate */ --color-bg: #ffffff; --color-surface: #f1f2ee; /* Fog */ --color-border: #dee2dc; --color-danger: #b04035; --color-danger-bg: #f7e6e3; --color-warn: #a9791e; --font-head: system-ui, "Segoe UI", "Helvetica Neue", sans-serif; --font-body: system-ui, "Segoe UI", "Helvetica Neue", sans-serif; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --radius: 12px; /* ── Grid/Editor-Tokens (hell) ──────────────────────────────────────── */ --panel-bg: #ffffff; --panel-bg-subtle: #f8fafc; --panel-border: #d9dee8; --panel-border-strong: #c4cddc; --input-border: #9fb6e0; --text-strong: #1f2937; --text-muted: #4b5563; --text-faint: #6b7280; --text-subtle: #475569; --accent-blue: #2563eb; --accent-blue-soft-bg: #eff6ff; --accent-blue-border: #bfdbfe; --accent-blue-strong-border: #4c7dd9; --accent-blue-drop-border: #2b6cb0; --accent-blue-marker: #1d4ed8; --surface-selected: #eaf1ff; --surface-header-row: #e8eef8; --surface-component-header: #e2e8f0; --surface-component-group: #f8fafc; --surface-component-footer: #f1f5f9; --surface-hover: #f3f4f6; --grid-warn: #d97706; --grid-warn-bg: #fff7ed; --grid-warn-strong: #9a3412; --grid-danger: #c2410c; --notice-info-bg: #ebf3ff; --notice-info-border: #bad1f7; --notice-error-bg: #fdecec; --notice-error-border: #f5b5b5; --notice-warning-bg: #fff7ed; --notice-warning-border: #fdba74; --notice-muted-bg: #f6f6f6; --notice-muted-border: #e4e4e4; --shadow-soft: rgba(15, 39, 51, 0.07); --shadow-strong: rgba(15, 39, 51, 0.28); --shadow-menu: rgba(0, 0, 0, 0.12); --shadow-drawer: rgba(31, 41, 55, 0.22); } :root[data-bs-theme="dark"] { --color-ink: #e6ecef; --color-ink-soft: #9db0b8; --color-bg: #141b20; --color-surface: #0f1519; --color-border: #2a3941; --color-danger: #e2664f; --color-danger-bg: #33201c; --color-warn: #e0983f; /* ── Grid/Editor-Tokens (dunkel) ────────────────────────────────────── */ --panel-bg: #182229; --panel-bg-subtle: #1c2830; --panel-border: #2c3c45; --panel-border-strong: #374a54; --input-border: #3c5568; --text-strong: #e6ecef; --text-muted: #aebdc4; --text-faint: #8798a0; --text-subtle: #9db0b8; --accent-blue: #6fa2f7; --accent-blue-soft-bg: #17253a; --accent-blue-border: #2c4a72; --accent-blue-strong-border: #6fa2f7; --accent-blue-drop-border: #4f84d6; --accent-blue-marker: #6fa2f7; --surface-selected: #17253a; --surface-header-row: #1a262f; --surface-component-header: #202e37; --surface-component-group: #1a262f; --surface-component-footer: #182229; --surface-hover: #1f2b33; --grid-warn: #e0983f; --grid-warn-bg: #2e2214; --grid-warn-strong: #f0b880; --grid-danger: #e2825f; --notice-info-bg: #182839; --notice-info-border: #2c4a72; --notice-error-bg: #33201c; --notice-error-border: #5c332c; --notice-warning-bg: #2e2214; --notice-warning-border: #6b4a1c; --notice-muted-bg: #1b2226; --notice-muted-border: #2a3338; --shadow-soft: rgba(0, 0, 0, 0.35); --shadow-strong: rgba(0, 0, 0, 0.55); --shadow-menu: rgba(0, 0, 0, 0.45); --shadow-drawer: rgba(0, 0, 0, 0.55); } html { scroll-behavior: smooth; } body { background-color: var(--color-surface); color: var(--color-ink); } a { color: var(--color-primary); } /* ── Bootstrap-Einfärbung auf Petrol/Volt/Kupfer ────────────────────────── */ .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark); --bs-btn-active-bg: var(--color-primary-deep); --bs-btn-active-border-color: var(--color-primary-deep); --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary); } .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-active-bg: var(--color-primary-dark); --bs-btn-active-border-color: var(--color-primary-dark); } .btn-success, .btn-outline-success { --bs-btn-bg: var(--color-signal); --bs-btn-border-color: var(--color-signal); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--color-signal-dark); --bs-btn-hover-border-color: var(--color-signal-dark); --bs-btn-active-bg: var(--color-signal-dark); --bs-btn-active-border-color: var(--color-signal-dark); } .btn-outline-success { --bs-btn-bg: transparent; --bs-btn-color: var(--color-signal-dark); --bs-btn-hover-color: #fff; } .form-control:focus, .form-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 0.25rem rgba(28, 63, 82, 0.15); } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .text-bg-secondary { background-color: var(--color-surface) !important; color: var(--color-ink-soft) !important; } .alert-success { --bs-alert-color: var(--color-signal-dark); --bs-alert-bg: #eaf6f0; --bs-alert-border-color: #b6e2ce; } :root[data-bs-theme="dark"] .alert-success { --bs-alert-color: #7fd6a7; --bs-alert-bg: #16291f; --bs-alert-border-color: #205a38; } /* ── App-Shell / Seitenleiste (nur auf der Projektseite) ────────────────── */ .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .sidebar { background: linear-gradient( 160deg, var(--color-primary-deep) 0%, var(--color-primary-dark) 45%, var(--color-primary) 100% ); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { padding: 22px 22px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-wordmark { font-size: 1.2rem; font-weight: 700; color: #fff; } .sidebar-bar { height: 3px; background: linear-gradient(90deg, var(--color-signal), var(--color-attention)); margin-top: 9px; width: 42px; border-radius: 2px; } .sidebar-tag { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-accent-pale); margin-top: 10px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; } .sidebar-section-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(199, 214, 224, 0.7); padding: 16px 14px 4px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: #c7d6e0; text-decoration: none; font-size: 0.92rem; font-weight: 500; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; } .sidebar-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; } .sidebar-link.active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 3px 0 0 var(--color-signal); } .sidebar-icon { width: 1.1em; display: inline-flex; justify-content: center; } .sidebar-footer { padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-theme-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: #c7d6e0; font-size: 0.92rem; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); width: 100%; text-align: left; cursor: pointer; } .sidebar-theme-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .app-shell-content { width: 100%; min-width: 0; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } .page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); } :root[data-bs-theme="dark"] .page-header h1 { color: var(--color-accent-pale); } .kicker { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 2px; font-weight: 600; } /* ── KPI-Kacheln ─────────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .kpi { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 9px; padding: 13px 15px; display: block; color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; } a.kpi:hover { color: inherit; text-decoration: none; box-shadow: 0 3px 8px var(--shadow-soft), 0 16px 32px -14px var(--shadow-strong); transform: translateY(-1px); } .kpi-label { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: var(--space-xs); font-weight: 600; display: flex; align-items: center; gap: 6px; } .kpi-value { font-size: 1.2rem; font-weight: 700; line-height: 1.1; color: var(--color-primary); } :root[data-bs-theme="dark"] .kpi-value { color: var(--color-accent-pale); } .card { border-radius: var(--radius); border-top: 3px solid var(--color-primary); box-shadow: 0 1px 2px var(--shadow-soft), 0 10px 24px -14px var(--shadow-strong); } .card-header { font-weight: 700; color: var(--color-primary); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } :root[data-bs-theme="dark"] .card-header { color: var(--color-accent-pale); } .table td input.form-control-sm, .table td select.form-select-sm { min-width: 8rem; } .tree-editor-shell { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .editor-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; position: sticky; top: 0; z-index: 12; padding: 0.35rem 0; background: var(--panel-bg); box-shadow: 0 1px 0 var(--panel-border-strong); } .editor-toolbar button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); padding: 0.28rem 0.6rem; border-radius: 4px; font-size: 0.82rem; } .editor-toolbar button:disabled { opacity: 0.45; } .editor-toolbar .project-device-drawer-toggle { border-color: var(--accent-blue); background: var(--accent-blue); color: #fff; font-weight: 600; } .active-view-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.4rem 0.5rem; border: 1px solid var(--accent-blue-border); border-radius: 5px; background: var(--accent-blue-soft-bg); color: var(--text-subtle); font-size: 0.78rem; } .active-view-label { font-weight: 600; } .active-view-chip, .active-view-reset { border: 1px solid var(--accent-blue-border); border-radius: 999px; background: var(--panel-bg); color: var(--text-subtle); padding: 0.18rem 0.48rem; font-size: 0.76rem; cursor: pointer; } .active-view-chip:hover, .active-view-reset:hover { border-color: var(--accent-blue); } .active-view-reset { margin-left: auto; font-weight: 600; } .distribution-power-summary { display: grid; grid-template-columns: repeat(3, minmax(12rem, 1fr)); gap: 0.5rem; padding: 0.55rem; border: 1px solid var(--panel-border); border-radius: 5px; background: var(--panel-bg-subtle); } .distribution-power-summary > div { display: flex; flex-direction: column; gap: 0.15rem; } .distribution-power-summary span { color: var(--text-subtle); font-size: 0.74rem; line-height: 1.2; } .distribution-power-summary strong { color: var(--text-strong); font-size: 0.95rem; } @media (max-width: 900px) { .distribution-power-summary { grid-template-columns: 1fr; } } .column-settings-menu { position: absolute; z-index: 9; margin-top: 2rem; border: 1px solid var(--panel-border); background: var(--panel-bg); border-radius: 5px; box-shadow: 0 6px 16px var(--shadow-menu); padding: 0.55rem; width: 340px; color: var(--text-strong); text-align: left; } .column-settings-title-row, .column-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .column-settings-title-row { margin-bottom: 0.25rem; font-size: 0.82rem; } .column-settings-close { border: 0 !important; background: transparent !important; color: var(--text-muted); padding: 0.05rem 0.2rem !important; font-size: 1rem !important; line-height: 1; cursor: pointer; } .column-settings-explanation { margin-bottom: 0.4rem; color: var(--text-muted); font-size: 0.72rem; line-height: 1.3; } .column-settings-search { width: 100%; margin-bottom: 0.4rem; border: 1px solid var(--panel-border-strong); border-radius: 4px; padding: 0.3rem 0.4rem; background: var(--panel-bg); color: var(--text-strong); font-size: 0.76rem; } .column-settings-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: 300px; overflow: auto; border: 1px solid var(--panel-border); border-radius: 4px; padding: 0.25rem; } .column-settings-item { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; border: 1px solid transparent; border-radius: 4px; padding: 0.1rem; } .column-settings-item.selected { border-color: var(--accent-blue-border); background: var(--accent-blue-soft-bg); } .column-settings-item.dragging { opacity: 0.55; } .column-settings-item.drop-target { border-color: var(--accent-blue-drop-border); background: var(--accent-blue-soft-bg); } .column-settings-item.locked { background: var(--panel-bg-subtle); } .column-visibility-button { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 0.2rem 0.25rem !important; color: inherit; text-align: left; font-size: 0.8rem; cursor: pointer; } .column-visibility-button:disabled { cursor: default; } .selection-marker { display: inline-flex; flex: 0 0 1rem; align-items: center; justify-content: center; color: var(--accent-blue-marker); font-weight: 700; } .column-settings-order { display: flex; gap: 0.2rem; } .column-settings-order button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); border-radius: 3px; font-size: 0.72rem; padding: 0.08rem 0.28rem; } .tree-grid-wrap { overflow: auto; border: 1px solid var(--panel-border); background: var(--panel-bg); width: 100%; max-width: 100%; min-width: 0; max-height: max(28rem, calc(100vh - 12rem)); scrollbar-gutter: stable; } .column-settings-empty { padding: 0.55rem 0.35rem; color: var(--text-faint); font-size: 0.76rem; } .column-settings-footer { justify-content: flex-end; margin-top: 0.45rem; } .column-settings-footer button.primary { border-color: var(--accent-blue); background: var(--accent-blue); color: #fff; } .tree-editor-layout { display: block; min-height: 560px; min-width: 0; position: relative; } .project-device-sidebar { border: 1px solid var(--panel-border); background: var(--panel-bg); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; } .project-device-sidebar h3 { margin: 0; font-size: 1rem; color: var(--text-strong); } .project-device-sidebar input, .project-device-sidebar select { width: 100%; border: 1px solid var(--panel-border-strong); border-radius: 4px; padding: 0.25rem 0.35rem; background: var(--panel-bg); color: var(--text-strong); } .project-device-list { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 0.4rem; } .project-device-item { border: 1px solid var(--panel-border-strong); background: var(--panel-bg-subtle); color: var(--text-strong); text-align: left; padding: 0.4rem; border-radius: 4px; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; } .project-device-item.selected { border-color: var(--accent-blue-strong-border); background: var(--accent-blue-soft-bg); } .project-device-item.dragging { opacity: 0.55; border-style: dashed; } .sidebar-actions { display: flex; flex-direction: column; gap: 0.5rem; } .sidebar-actions label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--text-strong); } .sidebar-actions button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); border-radius: 4px; padding: 0.3rem 0.45rem; font-size: 0.82rem; } .tree-grid { width: max-content; min-width: 0; border-collapse: collapse; font-size: 0.9rem; color: var(--text-strong); } .tree-grid th, .tree-grid td { border: 1px solid var(--panel-border); padding: 0.35rem 0.4rem; vertical-align: middle; } .tree-grid th { width: 1px; background: var(--panel-bg-subtle); position: sticky; top: 0; z-index: 2; vertical-align: top; white-space: normal; } .tree-grid td { white-space: nowrap; } .tree-grid .header-cell { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; min-width: 0; } .tree-grid .header-filter-btn { display: block; width: 100%; border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); border-radius: 3px; font-size: 0.75rem; padding: 0.15rem 0.35rem; white-space: nowrap; } .tree-grid .header-sort-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; color: var(--text-strong); font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; white-space: normal; text-align: left; cursor: pointer; } .project-device-drawer { position: fixed; z-index: 1040; top: 5.5rem; right: 1rem; left: auto; width: min(360px, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow: auto; border-radius: 0.5rem; box-shadow: 0 0.75rem 2rem var(--shadow-drawer); } .project-device-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .project-device-drawer-header span { color: var(--text-faint); font-size: 0.75rem; } .project-device-drawer-header button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); border-radius: 4px; padding: 0.25rem 0.4rem; font-size: 0.78rem; } .tree-grid .header-sort-btn:hover span:first-child, .tree-grid .header-sort-btn:focus-visible span:first-child { text-decoration: underline; } .tree-grid .sort-indicator { color: var(--accent-blue); font-size: 0.85rem; } .tree-grid .header-filter-btn.active { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-blue-soft-bg); } .tree-grid .header-filter-menu { position: absolute; z-index: 7; margin-top: 0.2rem; border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text-strong); box-shadow: 0 6px 16px var(--shadow-menu); width: 300px; padding: 0.55rem; text-align: left; } .tree-grid .header-filter-title-row, .tree-grid .header-filter-selection-actions, .tree-grid .header-filter-footer, .tree-grid .header-filter-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .tree-grid .header-filter-title-row { margin-bottom: 0.25rem; font-size: 0.82rem; } .tree-grid .header-filter-close { border: 0; background: transparent; color: var(--text-muted); padding: 0.05rem 0.2rem; font-size: 1rem; line-height: 1; cursor: pointer; } .tree-grid .header-filter-selection-actions { justify-content: flex-start; margin: 0.4rem 0 0.3rem; font-size: 0.72rem; } .tree-grid .header-filter-selection-actions span { margin-left: auto; color: var(--text-muted); } .tree-grid .header-filter-selection-actions button, .tree-grid .header-filter-footer button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); border-radius: 3px; padding: 0.18rem 0.35rem; font-size: 0.72rem; cursor: pointer; } .tree-grid .header-filter-explanation { margin-bottom: 0.4rem; color: var(--text-muted); font-size: 0.72rem; line-height: 1.3; white-space: normal; } .tree-grid .header-filter-search { width: 100%; border: 1px solid var(--panel-border-strong); border-radius: 4px; padding: 0.3rem 0.4rem; background: var(--panel-bg); color: var(--text-strong); font-size: 0.76rem; } .tree-grid .header-filter-values { display: flex; flex-direction: column; gap: 0.15rem; max-height: 210px; overflow: auto; border: 1px solid var(--panel-border); border-radius: 4px; padding: 0.25rem; } .tree-grid .header-filter-item { display: flex; align-items: center; gap: 0.35rem; width: 100%; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0.25rem 0.3rem; color: var(--text-strong); font-weight: 400; font-size: 0.75rem; text-align: left; cursor: pointer; } .tree-grid .header-filter-item:hover { background: var(--surface-hover); } .tree-grid .header-filter-item.selected { border-color: var(--accent-blue-border); background: var(--accent-blue-soft-bg); } .tree-grid .header-filter-empty { padding: 0.45rem 0.25rem; color: var(--text-faint); font-size: 0.74rem; } .tree-grid .header-filter-footer { margin-top: 0.45rem; } .tree-grid .header-filter-footer-actions { margin-left: auto; } .tree-grid .header-filter-footer button.primary { border-color: var(--accent-blue); background: var(--accent-blue); color: #fff; } .tree-grid .header-filter-footer button:disabled { opacity: 0.45; cursor: default; } .tree-grid .header-filter-warning { color: var(--grid-warn-strong); font-size: 0.7rem; white-space: normal; } .tree-grid .num { text-align: right; } .tree-grid .section-row td { background: var(--surface-header-row); font-weight: 600; } .tree-grid .structure-component-row td { padding: 0.38rem 0.6rem; border-bottom-color: var(--panel-border); } .tree-grid .structure-component-row.headerComponent td { background: var(--surface-component-header); } .tree-grid .structure-component-row.groupComponent td { background: var(--surface-component-group); } .tree-grid .structure-component-row.footerComponent td { background: var(--surface-component-footer); } .tree-grid .structure-component-content { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; } .tree-grid .structure-component-content strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .tree-grid .structure-component-protection { color: var(--text-subtle); font-size: 0.78rem; } .tree-grid .structure-component-actions { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; } .tree-grid .structure-component-actions button { font-size: 0.75rem; padding: 0.18rem 0.45rem; } .tree-grid .structure-component-fixed { color: var(--text-faint); font-size: 0.75rem; } .tree-grid .section-drop-cell { padding: 0.45rem 0.6rem; } .tree-grid .section-content { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .tree-grid .section-actions { display: flex; gap: 0.35rem; } .tree-grid .section-actions button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); padding: 0.2rem 0.45rem; border-radius: 3px; font-size: 0.78rem; } .tree-grid .summary-row td { background: var(--panel-bg-subtle); } .tree-grid .device-row td:first-child { color: var(--text-faint); } .tree-grid .empty-circuit-row td { background: var(--panel-bg-subtle); } .tree-grid tr.row-selected td { background: var(--surface-selected); } .tree-grid .placeholder-row td { background: var(--panel-bg-subtle); color: var(--text-faint); font-style: italic; } .tree-grid .cell-editable { cursor: text; } .tree-grid .cell-protection-trigger { color: var(--color-primary); cursor: pointer; font-weight: 600; transition: background-color 0.12s ease, box-shadow 0.12s ease; } :root[data-bs-theme="dark"] .tree-grid .cell-protection-trigger { color: var(--color-accent-pale); } .tree-grid .cell-protection-trigger:hover { background: rgba(63, 166, 107, 0.15); box-shadow: inset 0 0 0 1px var(--color-signal); } .tree-grid .cell-cable-sizing-trigger { color: var(--color-primary); cursor: pointer; font-weight: 600; transition: background-color 0.12s ease, box-shadow 0.12s ease; } :root[data-bs-theme="dark"] .tree-grid .cell-cable-sizing-trigger { color: var(--color-accent-pale); } .tree-grid .cell-cable-sizing-trigger:hover { background: rgba(63, 130, 166, 0.15); box-shadow: inset 0 0 0 1px var(--color-primary); } .tree-grid .cell-cable-sizing-trigger::after { content: " 🧮"; font-size: 0.8em; opacity: 0.7; } .tree-grid .device-drag-handle { cursor: grab; } .tree-grid .device-drag-handle.device-dragging { opacity: 0.55; } .tree-grid .circuit-drag-handle { cursor: grab; } .tree-grid .circuit-dragging-block td { opacity: 0.55; } .tree-grid .cell-selected { outline: 2px solid var(--accent-blue-strong-border); outline-offset: -2px; } .tree-grid .section-title { display: flex; align-items: baseline; gap: 0.75rem; } .tree-grid .section-title span { color: var(--text-subtle); font-size: 0.78rem; font-weight: 500; } .tree-grid .cell-invalid { outline: 2px solid var(--grid-danger); outline-offset: -2px; background: var(--grid-warn-bg) !important; } .tree-grid .cell-invalid input { border-color: var(--grid-danger); } .tree-grid input, .tree-grid select { width: 100%; min-width: 5rem; border: 1px solid var(--input-border); border-radius: 2px; padding: 0.2rem 0.3rem; background: var(--panel-bg); color: var(--text-strong); } .tree-grid .action-cell { display: flex; gap: 0.3rem; } .tree-grid .action-cell button { border: 1px solid var(--panel-border-strong); background: var(--panel-bg); color: var(--text-strong); padding: 0.2rem 0.45rem; border-radius: 3px; font-size: 0.78rem; } .tree-grid .drop-target-active { box-shadow: inset 0 0 0 2px var(--accent-blue-strong-border); background: var(--accent-blue-soft-bg) !important; } .tree-grid .drop-target-invalid { box-shadow: inset 0 0 0 2px var(--grid-warn); background: var(--grid-warn-bg) !important; } .tree-grid .drop-target-confirm { box-shadow: inset 0 0 0 2px var(--grid-warn); background: var(--grid-warn-bg) !important; } .tree-grid tr.circuit-insert-before td, .tree-grid tr.circuit-insert-after td { position: relative; } .tree-grid tr.circuit-insert-before td::before { content: ""; position: absolute; left: -1px; right: -1px; top: -2px; border-top: 4px solid var(--accent-blue); pointer-events: none; } .tree-grid tr.circuit-insert-before td:first-child::after { content: ""; position: absolute; left: -7px; top: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--accent-blue); pointer-events: none; } .tree-grid tr.circuit-insert-after td::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -2px; border-bottom: 4px solid var(--accent-blue); pointer-events: none; } .tree-grid tr.circuit-insert-after td:first-child::before { content: ""; position: absolute; left: -7px; bottom: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--accent-blue); pointer-events: none; } .drop-hint { font-size: 0.75rem; color: var(--accent-blue-marker); font-weight: 600; } .notice { padding: 0.5rem 0.75rem; border-radius: 4px; border: 1px solid transparent; color: var(--text-strong); } .notice.info { background: var(--notice-info-bg); border-color: var(--notice-info-border); } .notice.error { background: var(--notice-error-bg); border-color: var(--notice-error-border); } .notice.warning { background: var(--notice-warning-bg); border-color: var(--notice-warning-border); } .editor-error-notice { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .notice.muted { background: var(--notice-muted-bg); border-color: var(--notice-muted-border); color: var(--text-muted); } .todo-hint { color: var(--text-faint); font-size: 0.8rem; margin: 0; } @media (max-width: 720px) { .project-device-drawer { top: 4.5rem; max-height: calc(100vh - 5.5rem); } } /* ── Seitenleiste: eingeklappter Zustand ─────────────────────────────── */ .app-shell { transition: grid-template-columns 0.18s ease; } .app-shell-collapsed { grid-template-columns: 64px 1fr; } .sidebar { transition: padding 0.18s ease; } .sidebar-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sidebar-toggle { background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 6px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; line-height: 1; width: 26px; height: 26px; } .sidebar-toggle:hover { background: rgba(255, 255, 255, 0.18); } .sidebar-collapsed .sidebar-brand { padding: 16px 10px; flex-direction: column; align-items: center; } .sidebar-collapsed .sidebar-brand-text { display: none; } .sidebar-collapsed .sidebar-nav { padding: 12px 8px; } .sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px; } .sidebar-collapsed .sidebar-section-label, .sidebar-collapsed .sidebar-label { display: none; }