:root { font-family: Arial, sans-serif; color: #1f2937; background: #f3f4f6; }
body { margin: 0; }
header { display:flex; align-items:center; gap:2rem; padding:1rem 2rem; background:#111827; color:white; }
.brand { font-weight:700; font-size:1.2rem; }
nav a { color:white; text-decoration:none; margin-right:1rem; }
main { padding:2rem; }
.panel, .tree, .result, .card { background:white; border-radius:10px; padding:1rem; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-bottom:1rem; }
.toolbar { margin-bottom:1rem; }
input, select, button { padding:.55rem; margin:.25rem; border:1px solid #cbd5e1; border-radius:6px; }
button { background:#2563eb; color:white; cursor:pointer; border:0; }
button:hover { background:#1d4ed8; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:1rem; }
.card strong { display:block; font-size:2rem; }
.card span { color:#6b7280; }
.node { margin:.4rem 0 .4rem 1.2rem; border-left:2px solid #e5e7eb; padding-left:.8rem; }
summary { cursor:pointer; padding:.35rem; border-radius:6px; }
summary:hover { background:#f9fafb; }
.num { font-family:Consolas,monospace; color:#374151; margin-right:.5rem; }
.type { color:#6b7280; font-size:.85rem; margin-right:.5rem; }
.time { float:right; background:#eef2ff; padding:.15rem .45rem; border-radius:999px; }
.desc { color:#6b7280; margin:.25rem 0 .25rem 1rem; }
.inline-form { display:inline-block; margin-left:1rem; }
.inline-form button { background:#6b7280; font-size:.8rem; padding:.3rem .5rem; }
pre { background:#111827; color:white; padding:1rem; border-radius:8px; overflow:auto; }
.errors { color:#b91c1c; }
.hint { color:#6b7280; }

/* Prozessbaum: kompakte Zeilenaktionen */
.tree-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tree-main {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.tree-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .35rem;
}

.icon-form {
    display: inline;
    margin: 0;
}

button.icon-btn, .icon-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1f2937;
    border-radius: 6px;
    padding: 2px 7px;
    line-height: 1.2;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 26px;
}

button.icon-btn:hover, .icon-btn:hover {
    background: #f1f5f9;
}

button.icon-btn.delete:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

button.icon-btn.add:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.inline-add {
    margin: .25rem 0 .35rem 0;
}

.inline-add-form {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: center;
    margin: .35rem 0 .5rem 1.25rem;
    padding: .5rem;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
}

.inline-add-form input {
    min-width: 180px;
}

.btn-small {
    padding: 4px 10px;
}

button.icon-btn.move:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}


/* Kopfbereich fixieren, Baum separat scrollbar */
.prozess-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f3f4f6;
    padding: 0 0 .75rem 0;
    margin: -0.25rem 0 .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.prozess-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prozess-title-row h1 {
    margin-bottom: .1rem;
}

.subtitle {
    margin: 0;
    color: #6b7280;
}

.btn-secondary {
    background: #475569;
    color: #fff;
    border: 0;
    padding: .55rem .85rem;
    border-radius: 6px;
}

.btn-secondary:hover,
.btn-secondary.active {
    background: #0f172a;
}

.tree-scroll {
    max-height: calc(100vh - 235px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Sortierbuttons nur im Sortiermodus anzeigen */
.sort-action {
    display: none;
}

body.sort-mode .sort-action {
    display: inline;
}

body.sort-mode .tree {
    outline: 2px dashed #bfdbfe;
    outline-offset: 2px;
}

/* Fix: Kopfbereich wirklich oben halten und nur Baum scrollen */
html, body {
    height: 100%;
}

body {
    overflow: hidden;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

main {
    height: calc(100vh - 64px);
    box-sizing: border-box;
    overflow: auto;
}

.prozess-page {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.prozess-header {
    position: sticky;
    top: 0;
    z-index: 900;
    flex: 0 0 auto;
}

.tree-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.sort-toggle-form {
    margin: 0;
}

/* Sortierbuttons werden jetzt serverseitig über die Klasse am Baum aktiviert */
.sort-action {
    display: none !important;
}

.tree.sort-mode-active .sort-action {
    display: inline !important;
}

.tree.sort-mode-active {
    outline: 2px dashed #bfdbfe;
    outline-offset: 2px;
}

.toolbar-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}

.toolbar-stack .toolbar {
    margin-bottom: 0;
}

.sort-toggle-under-filter {
    align-self: flex-start;
    margin-left: 0;
}


/* Drag & Drop Sortierung nur im aktivierten Sortiermodus */
.tree.sort-mode-active .sort-action {
    display: inline;
}

.drag-drop-form-hidden {
    display: none;
}

.tree.sort-mode-active .js-sortable-row {
    cursor: grab;
}

.tree.sort-mode-active .js-sortable-row.dragging {
    opacity: .55;
}

.tree.sort-mode-active .js-sortable-row.drag-over-before {
    box-shadow: inset 0 3px 0 #2563eb;
    background: #eff6ff;
}

.tree.sort-mode-active .js-sortable-row.drag-over-after {
    box-shadow: inset 0 -3px 0 #2563eb;
    background: #eff6ff;
}

.tree.sort-mode-active .js-sortable-row.drag-not-allowed {
    background: #fee2e2;
    cursor: not-allowed;
}

/* Auswahl + Tastenkürzel-Aktionen */
.selection-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.btn-danger {
    background: #b91c1c;
    color: #fff;
    border: 0;
    padding: .55rem .85rem;
    border-radius: 6px;
}

.btn-danger:hover {
    background: #991b1b;
}

.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.selected-info {
    color: #475569;
    font-size: .9rem;
}

.tree-summary.selected {
    background: #dbeafe !important;
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.tree-summary.selected:hover {
    background: #bfdbfe !important;
}