:root { --win: #d4d0c8; --blue: #316ac5; --dark-blue: #0a246a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; background: #8aa0b5; color: #111; }
body { overflow: auto; }
button { font: inherit; color: inherit; }

.app-shell { height: 100vh; min-width: 820px; min-height: 480px; background: var(--win); display: flex; flex-direction: column; border: 1px solid #666; }
.titlebar { height: 28px; flex: none; display: flex; align-items: center; padding: 0 7px; color: #fff; font-weight: bold; background: linear-gradient(90deg, var(--dark-blue), #3a6ea5); user-select: none; }
.app-icon { font-size: 16px; margin-right: 7px; }

/* Menü */
.menubar { height: 25px; flex: none; display: flex; align-items: center; padding-left: 3px; border-bottom: 1px solid #fff; }
.menubar button { border: none; background: transparent; padding: 3px 8px; cursor: default; }
.menubar button:hover, .menubar button.open { background: var(--dark-blue); color: #fff; }

/* Symbolleiste */
.toolbar { height: 36px; flex: none; display: flex; align-items: center; gap: 2px; padding: 3px 5px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; }
.toolbar button { width: 28px; height: 27px; border: 1px outset #f5f5f5; background: var(--win); font-size: 15px; padding: 0; cursor: pointer; }
.toolbar button:active, .toolbar button.active { border: 1px inset #fff; background: #b7c9e6; }
.toolbar button:disabled { opacity: .4; cursor: default; }
.sep { width: 1px; height: 26px; background: #888; margin: 0 4px; border-right: 1px solid #fff; }
.toolbar-label { margin-left: auto; padding-right: 8px; color: #444; }

.workspace { flex: 1; min-height: 0; display: flex; border-top: 1px solid #888; }

/* Linke Spalte: Navigator / Explorer / Assistent */
.left-column { width: 230px; flex: none; display: flex; flex-direction: column; border-right: 2px groove #eee; padding: 3px; }
.panel { background: #fff; border: 1px inset #fff; margin-bottom: 4px; overflow: auto; }
.navigator { height: 58%; display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; flex: none; background: var(--win); border-bottom: 1px solid #999; }
.tabs button, .diagram-tabs .tab { font-size: 11px; padding: 4px 9px; border: 1px outset #eee; background: var(--win); cursor: pointer; }
.tabs button.active, .diagram-tabs .tab.active { background: #fff; border-bottom-color: #fff; }

.tree { flex: 1; overflow: auto; padding: 4px 0; line-height: 1.75; user-select: none; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.ti { display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; padding-right: 6px; }
.ti:hover { background: #e8eef9; }
.ti.sel { background: var(--blue); color: #fff; }
.ti .tw { width: 12px; flex: none; text-align: center; font-size: 10px; }
.ti .ic { flex: none; display: inline-flex; }
.ti.obj { color: #333; font-size: 11px; }
.ti.obj.sel { color: #fff; }

.explorer { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px; gap: 4px; }
.explorer[hidden] { display: none; }
.explorer input { width: 100%; padding: 3px; border: 1px inset #ccc; font: inherit; }
#searchResults { flex: 1; overflow: auto; }
.hit-item { padding: 3px 4px; cursor: pointer; display: flex; gap: 5px; align-items: center; border-bottom: 1px dotted #ddd; }
.hit-item:hover { background: #e8eef9; }
.hit-item small { color: #666; display: block; }

.assistant { flex: 1; padding: 8px; background: #fffbe7; line-height: 1.4; }
.panel-title { background: #f0e8b4; border-bottom: 1px solid #c9ba6e; font-weight: bold; padding: 4px; margin: -8px -8px 8px; }
.assistant p { margin: 0 0 8px; }
.assistant button { display: block; width: 100%; margin: 4px 0; padding: 4px; border: 1px outset #eee; background: var(--win); cursor: pointer; text-align: left; }
.hint { margin-top: 10px; padding: 7px; text-align: center; background: #e7f3ff; border: 1px solid #9abbd9; font-weight: bold; }

/* Diagrammbereich */
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.diagram-tabs { height: 27px; flex: none; padding-left: 4px; display: flex; align-items: flex-end; border-bottom: 1px solid #888; overflow: hidden; }
.diagram-tabs .tab { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.diagram-tabs .x { padding: 0 3px; color: #555; border-radius: 2px; }
.diagram-tabs .x:hover { background: #c33; color: #fff; }
.diagram-row { flex: 1; min-height: 0; display: flex; }

.object-library { width: 150px; flex: none; background: #efeee9; border-right: 2px groove #fff; padding: 4px; overflow: auto; }
.library-title { font-weight: bold; text-align: center; padding: 4px; background: var(--win); border: 1px outset #fff; margin-bottom: 5px; }
.palette-item { display: flex; align-items: center; gap: 6px; padding: 4px 3px; margin: 1px 0; border: 1px solid transparent; cursor: grab; user-select: none; }
.palette-item:hover { border-color: #9aa; background: #fff; }
.palette-item.active { border-color: var(--blue); background: #dbe6f8; }
.lib-help { font-size: 10px; color: #555; margin-top: 9px; line-height: 1.35; }

.canvas-box { position: relative; flex: 1; min-width: 0; }
.canvas-wrap { position: absolute; inset: 0; overflow: auto; background: #fff; }
.canvas-wrap.placing svg { cursor: copy; }
.canvas-wrap.connecting .node { cursor: crosshair; }
#svg { display: block; }
#svg .node { cursor: move; }
#svg .verteiler { cursor: crosshair; }
#svg .docs { cursor: pointer; }
#svg .hit { cursor: pointer; pointer-events: stroke; }
.inline-edit { position: absolute; z-index: 5; resize: none; border: 2px solid var(--blue); font: 12px Tahoma, Arial, sans-serif; text-align: center; padding: 4px; background: #fff; }

.status-tip { position: absolute; right: 18px; bottom: 18px; background: #ffffe1; border: 1px solid #777; padding: 4px 8px; box-shadow: 2px 2px 4px #999; display: none; pointer-events: none; }
.statusbar { height: 23px; flex: none; border-top: 1px solid #777; display: flex; align-items: center; gap: 6px; padding: 2px; }
.statusbar span { border: 1px inset #eee; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar span:first-child { flex: 1; min-width: 0; }

/* Kontext- und Hauptmenüs */
.ctx-menu { position: fixed; z-index: 50; min-width: 200px; max-width: 440px; max-height: 80vh; overflow: auto; background: #f4f3ee; border: 1px solid #555; box-shadow: 3px 3px 6px rgba(0, 0, 0, .35); padding: 2px; }
.ctx-menu .mi { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; cursor: default; white-space: nowrap; }
.ctx-menu .mi:hover:not(.disabled):not(.header):not(.note) { background: var(--dark-blue); color: #fff; }
.ctx-menu .mi.disabled { color: #999; }
.ctx-menu .mi.header { font-weight: bold; color: #444; background: #e3e0d6; }
.ctx-menu .ck { width: 14px; text-align: center; }
.ctx-menu .lb { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ctx-menu .mi.note { white-space: normal; color: #333; }
.ctx-menu .kb { color: #666; padding-left: 18px; }
.ctx-menu .mi:hover:not(.disabled) .kb { color: #ddd; }
.ctx-menu .sep { height: 1px; background: #aaa; border-bottom: 1px solid #fff; margin: 3px 2px; }

/* Dialoge */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
.dlg { width: min(440px, 92vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--win); border: 2px outset #fff; box-shadow: 4px 4px 12px rgba(0, 0, 0, .4); }
.dlg-title { padding: 5px 8px; color: #fff; font-weight: bold; background: linear-gradient(90deg, var(--dark-blue), #3a6ea5); }
.dlg-body { padding: 12px; overflow: auto; line-height: 1.45; }
.dlg-body label { display: block; margin-bottom: 9px; }
.dlg-body input, .dlg-body textarea, .dlg-body select { display: block; width: 100%; margin-top: 3px; padding: 3px; border: 1px inset #ccc; font: inherit; background: #fff; }
.dlg-body label.check { display: flex; gap: 6px; align-items: center; }
.dlg-body label.check input { width: auto; margin: 0; }
.dlg-body textarea { min-height: 60px; resize: vertical; }
.dlg-body .info { color: #444; background: #fff; border: 1px solid #bbb; padding: 6px; margin-bottom: 9px; }
.dlg-body kbd { background: #fff; border: 1px solid #999; border-radius: 3px; padding: 0 4px; font-size: 11px; }
.dlg-body ul { margin: 4px 0 8px; padding-left: 18px; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; }
.dlg-buttons button { min-width: 84px; padding: 4px 10px; border: 1px outset #f5f5f5; background: var(--win); cursor: pointer; }
.dlg-buttons button.primary { border: 2px outset #f5f5f5; font-weight: bold; }

/* Verwendungsnachweis */
.uses-head { font-weight: bold; margin: 10px 0 3px; }
.dlg-body .use { display: block; width: 100%; text-align: left; padding: 3px 6px; margin: 1px 0; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.dlg-body .use:hover, .dlg-body .use:focus { border-color: var(--blue); background: #e8eef9; outline: none; }
.dlg-body .use small { display: block; color: #666; }

/* Vorlagen-Auswahl */
.dlg-body button.tpl { display: block; width: 100%; margin: 0 0 6px; padding: 6px 8px; text-align: left; border: 1px outset #f5f5f5; background: #fff; cursor: pointer; font: inherit; }
.dlg-body button.tpl:hover, .dlg-body button.tpl:focus { background: #e8eef9; outline: 1px solid var(--blue); }
.dlg-body button.tpl small { display: block; color: #555; margin-top: 2px; }

/* Schnellzugriff im Navigator */
.ti.fav-head { font-weight: bold; color: #7a5a00; cursor: default; }
.ti.fav-head .tw { color: #d4a000; font-size: 12px; }
.fav-empty { color: #888; font-size: 10px; padding-left: 18px; }

/* Zuordnen-Dialog und Dokumente im Navigator */
.dlg-body .use[hidden] { display: none; }
.dlg-body .assign-filter { margin-bottom: 8px; }
.ti .where { color: #888; font-size: 10px; margin-left: 6px; }
.ti.sel .where { color: #dde6f7; }

/* Sicherungskopien und Prozessprüfung */
.bk { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dotted #bbb; }
.bk-text { flex: 1; }
.bk-text small { display: block; color: #666; }
.bk button { padding: 3px 8px; border: 1px outset #f5f5f5; background: var(--win); cursor: pointer; font: inherit; }
.dlg-body .chk .lvl { display: inline-block; min-width: 56px; font-weight: bold; margin-right: 6px; }
.dlg-body .chk-error .lvl { color: #c62828; }
.dlg-body .chk-hint .lvl { color: #a35f00; }