— DIESER Wrapper ist das echte
* Flex-Kind (FlexBox-Kinder bekommen die Klasse dagegen auf ihr eigenes Root; bestätigt
* im FlexBoxRenderer: `item.isA('sap.m.FlexBox') ? direkt : in div`). Eine
* ScrollContainer(height=100%) liegt also in einem Wrapper mit default min-height:auto
* und flex:0 1 auto → der Wrapper kann NICHT unter seinen Inhalt schrumpfen → die
* Region wächst über den Viewport, der overflow:hidden-Container kappt unten und der
* innere Scrollbalken greift nie (Liste unten abgeschnitten — u.a. die BPMN-Liste).
* Fix: den WRAPPER wachsen+schrumpfen lassen; dann greift der ScrollContainer-Scroll.
* Deckt ALLE Kategorien ab (releases/infra/personen/bpmn/prozesse/agents/graph), auch
* verschachtelte (Descendant-Selector). */
.bkCatSection .sapMFlexItem:has(> .sapMScrollCont) {
flex: 1 1 auto;
min-height: 0;
}
/* defensiv: greift auch falls eine VBox renderType=Bare nutzt (kein Wrapper → Control
ist selbst das Flex-Kind). Schadet bei vorhandenem Wrapper nicht. */
.bkCatSection > .sapMScrollCont,
.bkDocsTabContent > .sapMScrollCont {
flex: 1 1 auto;
min-height: 0;
}
/* ===================== Doc Editor Box ===================== */
.bkDocEditorBox {
height: 100%;
min-height: 0;
overflow: hidden;
}
/* View-Modus: der gerenderte Doku-Inhalt liegt in einer ScrollContainer, die in der
bkDocEditorBox-VBox in einem .sapMFlexItem-Wrapper steckt → Wrapper muss schrumpfen,
sonst wird langer Doku-Inhalt unten abgeschnitten (gleiche Ursache wie die Listen). */
.bkDocEditorBox > .sapMFlexItem:has(> .sapMScrollCont) {
flex: 1 1 auto;
min-height: 0;
}
.bkDocEditHeader {
gap: 0.5rem;
flex-shrink: 0;
}
/* Typ-/Status-Select-Spalten im Doc-Editor-Header: Mindestbreite damit die
Werte nicht abgeschnitten werden (ersetzt das frühere inline style="min-width:160px"). */
.bkDocEditField { min-width: 10rem; }
/* Editor + Preview nebeneinander */
.bkDocEditorSplit {
flex: 1 1 auto;
height: 0;
min-height: 0;
overflow: hidden;
}
.bkDocEditorPane {
flex: 0 0 50%;
max-width: 50%;
border-right: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 0.5rem;
}
.bkDocPreviewPane {
flex: 0 0 50%;
max-width: 50%;
overflow: auto;
display: flex;
flex-direction: column;
padding: 0 0.5rem;
}
/* Textarea fuer Markdown */
.bkMdTextarea.sapMTextArea {
flex: 1 1 auto;
height: calc(100% - 1.5rem) !important;
min-height: 12rem;
font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
font-size: 0.875rem;
resize: none;
}
.bkMdTextarea.sapMTextArea > .sapMTextAreaInner {
height: 100% !important;
}
/* Markdown-Vorschau / View-Container */
.bkMdPreviewContainer,
.bkMdViewContainer {
flex: 1 1 auto;
overflow: auto;
}
/* View-Modus: konsistentes Innen-Padding fuer Meta-Zeile, Markdown und Versions-Panel.
(sap.m liefert hier kein Padding out-of-the-box — daher zentral in rem.) */
.bkDocViewContent {
box-sizing: border-box;
padding: 1.25rem 1.75rem 3.5rem;
max-width: 60rem;
}
/* Markdown buendig zum Container-Padding (kein doppeltes Inset, Trennlinien nicht full-bleed) */
.bkDocViewContent .bkMdPreview {
padding-left: 0;
padding-right: 0;
}
/* ===================== Prozess-Cockpit (Wave 6) ===================== */
.bkProzessCockpit {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Sub-Header nicht schrumpfen, IconTabBar fuellt den Rest (renderType=Bare -> direkte Flex-Kinder) */
.bkProzessCockpit > .sapMBar { flex: 0 0 auto; }
/* Wrapper begrenzt die IconTabBar auf den VERBLEIBENDEN Platz (nach Sub-Header +
Usage-Panel + Prompt-Zeile). stretchContentHeight macht die IconTabBar height:100%
— das bezieht sich dann auf diesen Wrapper, nicht auf das ganze Cockpit. */
.bkProzessTabsWrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.bkProzessTabs {
flex: 1 1 auto;
min-height: 0;
}
.bkProzessTabs.sapMITB { height: 100%; }
/* IconTabBar-Inhalt die volle Hoehe nutzen lassen (Scroll im Tab) */
.bkProzessTabs > .sapMITBContentInner,
.bkProzessTabs .sapMITBContent {
height: 100%;
}
.bkProzDocEmpty {
padding: 1.5rem 0;
color: var(--sapContent_LabelColor, #6a6d70);
font-style: italic;
}
/* Wave 7: Projektübergreifend-Panel — nicht im Flex wachsen (IconTabBar behält Höhe) */
.bkProzessUsage { flex: 0 0 auto; }
/* K3: E2E-Ketten — Sektion (Mid, renderType=Bare: Sub-Header fix, Liste scrollt) + Begin-Panel */
.bkE2ESection { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.bkE2ESection > .sapMBar { flex: 0 0 auto; }
.bkE2EPanel { flex: 0 0 auto; margin: 0 0 0.5rem 0; }
/* S4: Prompt-to-Edit-Zeile am Cockpit-Fuss */
.bkProzPromptRow {
flex: 0 0 auto;
padding: 0.5rem 1rem;
border-top: 1px solid var(--sapGroup_ContentBorderColor, #2a2f35);
background: var(--sapObjectHeader_Background, transparent);
}
.bkProzPromptRow .bkProzPromptInput { flex: 1 1 auto; }
/* S3: Release-Hub Label-Spalte */
.bkHubLabel { display: inline-block; min-width: 7rem; }
/* Provenance-Banner (Version · Agent · Run) ueber gerendertem Doku-Inhalt */
.bkProvenance {
font-size: 0.8125rem;
color: var(--sapContent_LabelColor, #8c8f94);
padding: 0.3rem 0 0.7rem;
margin-bottom: 0.85rem;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #2a2f35);
}
.bkProvenance .bkProvAgent { color: var(--sapInformativeColor, #5caeff); font-weight: 600; }
.bkProvIcon::before { content: "\21BB "; opacity: 0.7; }
/* Versions-Diff (Delta-Vergleich) */
.bkVersionToggle .sapMBtn { margin-right: 0.5rem; }
.bkDiff { font-family: "Fira Code", "Cascadia Code", Consolas, monospace; font-size: 0.8125rem; }
.bkDiffLine { white-space: pre-wrap; word-break: break-word; padding: 0 0.5rem; line-height: 1.55; border-radius: 2px; }
.bkDiffAdd { background: rgba(46, 160, 67, 0.18); color: var(--sapPositiveColor, #4caf7d); }
.bkDiffDel { background: rgba(248, 81, 73, 0.16); color: var(--sapNegativeColor, #e06c6c); }
.bkDiffCtx { opacity: 0.55; }
.bkDiffEmpty { padding: 1rem; color: var(--sapContent_LabelColor, #8c8f94); font-style: italic; }
/* P2.8: konsistentes Padding + klare Abstände zwischen den Panels im Release-Detail
(sapUiResponsiveContentPadding liefert hier 0; Panels lagen ohne Gap aneinander). */
.bkReleaseContent {
box-sizing: border-box;
padding: 1.25rem 1.75rem 3rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.bkReleaseContent > .sapMPanel { margin: 0; }
.bkMdPreview {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--sapTextColor, #1d2d3e);
word-break: break-word;
}
.bkMdPreview h1,
.bkMdPreview h2,
.bkMdPreview h3,
.bkMdPreview h4 {
color: var(--sapTextColor, #1d2d3e);
margin: 1rem 0 0.4rem;
line-height: 1.3;
}
.bkMdPreview h1 { font-size: 1.5rem; border-bottom: 2px solid var(--sapHighlightColor, #0070f2); padding-bottom: 0.3rem; }
.bkMdPreview h2 { font-size: 1.25rem; border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5); padding-bottom: 0.2rem; }
.bkMdPreview h3 { font-size: 1.05rem; }
.bkMdPreview p { margin: 0.5rem 0; }
.bkMdPreview ul,
.bkMdPreview ol { margin: 0.5rem 0 0.5rem 1.5rem; }
.bkMdPreview li { margin: 0.2rem 0; }
.bkMdPreview code {
background: var(--sapField_Background, #f5f6f7);
border: 1px solid var(--sapField_BorderColor, #bcc3ca);
border-radius: 3px;
padding: 0.1em 0.35em;
font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
font-size: 0.85em;
color: var(--sapTextColor, #1d2d3e);
}
.bkMdPreview pre {
background: var(--sapField_Background, #f5f6f7);
border: 1px solid var(--sapField_BorderColor, #bcc3ca);
border-radius: 4px;
padding: 0.75rem 1rem;
overflow-x: auto;
margin: 0.75rem 0;
}
.bkMdPreview pre code {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
}
.bkMdPreview blockquote {
border-left: 4px solid var(--sapHighlightColor, #0070f2);
margin: 0.75rem 0;
padding: 0.25rem 0.75rem;
color: var(--sapContent_LabelColor, #6a6d70);
background: var(--sapField_Background, #f5f6f7);
}
.bkMdPreview a {
color: var(--sapLinkColor, #0064d9);
text-decoration: none;
}
.bkMdPreview a:hover { text-decoration: underline; }
.bkMdPreview hr {
border: none;
border-top: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
margin: 1rem 0;
}
.bkMdPreview table {
border-collapse: collapse;
width: 100%;
margin: 0.75rem 0;
}
.bkMdPreview th,
.bkMdPreview td {
border: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
padding: 0.35rem 0.75rem;
text-align: left;
}
.bkMdPreview th {
background: var(--sapList_HeaderBackground, #f5f6f7);
font-weight: 600;
}
/* Dark-Mode Anpassungen (via SAP CSS-Variablen - automatisch) */
/* Versions-Metadaten */
.bkDocMeta {
gap: 0.4rem;
align-items: center;
}
/* ===================== Wave 3: Infrastruktur ===================== */
.bkInfraKvList {
gap: 0.5rem;
}
.bkKvRow {
gap: 0.75rem;
align-items: flex-start;
min-height: 1.5rem;
}
.bkKvKey {
flex: 0 0 9rem;
min-width: 9rem;
color: var(--sapContent_LabelColor, #6a6d70);
font-size: 0.8125rem;
padding-top: 0.1rem;
}
/* ===================== End-Spalte: Page-Content strecken ===================== */
/* Die End-Spalten-Page muss ihren Content-Bereich auf volle Hoehe strecken */
#container-docs---app--endPage > .sapMPageHeader ~ .sapMPageSection,
#container-docs---app--endPage .sapMPageContent {
display: flex;
flex-direction: column;
height: 100%;
}
/* ===================== End-Spalte: Sub-Header + Sektionen ===================== */
/* Sub-Header (Bar innerhalb der End-Spalte als Ersatz fuer customHeader bei merged Page) */
.bkSubHeader {
flex-shrink: 0;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
min-height: 2.75rem;
background: var(--sapPageHeader_Background, var(--sapBaseColor, #fff));
}
/* End-Sektionen fuellen die verbleibende Hoehe */
.bkEndSection {
height: 100%;
overflow: hidden;
}
.bkBpmnEditorSection {
display: flex;
flex-direction: column;
height: 100%;
}
/* ===================== Task 1: Master-Spalte — vollstaendiges Padding-Fix ===================== */
/*
* Das SAP-FCL-Master-Spalten-Page-Header-Title-Element klebt am linken Rand (x=0).
* Ursache: Die sap.m.Page rendert den Titel in .sapMBarMiddle ohne left-padding
* wenn kein navButton vorhanden ist. Wir setzen einen expliziten linken Einzug.
*/
/* Seitentitel "Projekte" — linken Einzug auf der Bar-Middle sicherstellen */
#container-docs---app--masterPage .sapMPageHeader .sapMBarMiddle,
.bkMasterPage .sapMPageHeader .sapMBarMiddle {
padding-left: 1rem !important;
}
/* Suchfeld im Master: voller horizontaler Rand (bereits per sapUiSmallMarginBeginEnd,
aber der FCL-Container setzt manchmal padding:0 — Absicherung via !important) */
#container-docs---app--masterPage .sapMSF,
.bkMasterPage .sapMSF {
margin-left: 1rem !important;
margin-right: 1rem !important;
width: calc(100% - 2rem) !important;
box-sizing: border-box;
}
/* Projektliste im Master: gleicher Einzug */
#container-docs---app--masterPage .sapMList,
.bkMasterPage .sapMList {
padding-left: 0;
}
/* Liste-Items sollen linken Standard-Rand haben */
#container-docs---app--masterPage .sapMLIB,
.bkMasterPage .sapMLIB {
padding-left: 1rem;
}
/* IllustratedMessage im Master zentriert, nicht am Rand */
#container-docs---app--masterPage .sapMIllu,
.bkMasterPage .sapMIllu {
margin: 1rem auto;
}
/* BusyIndicator im Master: Einzug */
#container-docs---app--masterPage .sapMBusyIndicator,
.bkMasterPage .sapMBusyIndicator {
margin-left: 1rem;
}
/* ===================== Task 1: Detail-Spalte (Mid) — Tab-Content Padding ===================== */
/*
* IconTabBar-Content hat oft kein Padding. Tab-Inhalte brauchen
* mindestens 1rem Seitenrand damit Text/Kontrollen nicht an der Kante kleben.
*/
/* Allgemeiner IconTabBar-Inhalt */
#container-docs---app--detailTabs > .sapMITBContainerDiv,
.bkDetailTabBar > .sapMITBContainerDiv {
padding: 0;
}
/* Tab-Content-Bereiche: Listen/Tabellen ohne eigene XML-Margin brauchen Seitenabstand.
* releaseList + personTable + bpmnList haben kein sapUiSmallMarginBeginEnd in XML.
* agentList hat sapUiSmallMarginBeginEnd auf dem inneren VBox des CustomListItem — ok.
* infraTable hat sapUiSmallMarginBeginEnd auf dem aeusseren VBox — ok.
* guideList + docList liegen in Panels die selbst Padding mitbringen — ok.
* Loesung: direkte margin-Regel fuer die drei Liste-Elemente ohne XML-Margin. */
#container-docs---app--releaseList,
#container-docs---app--bpmnList,
#container-docs---app--personTable {
margin-left: 1rem !important;
margin-right: 1rem !important;
width: calc(100% - 2rem) !important;
box-sizing: border-box;
}
/* Uebriger Reset (padding-left war falsch gesetzt — kein !important-Override noetig) */
#container-docs---app--guideList,
#container-docs---app--docList,
#container-docs---app--agentList,
#container-docs---app--infraTable {
padding-left: 0;
}
/* ===================== Wave 3: BPMN-Editor ===================== */
/*
* Flex-Hoehen-Kette:
* FCL end-Column (100vh)
* → sapMPage (height:100%)
* → sapMPageContent (display:flex, flex-direction:column, height:100%)
* → .bkBpmnEditorSection VBox (flex:1 1 auto, display:flex, flex-direction:column)
* rendered by SAP as:
* → bkSubHeader Bar (flex-shrink:0)
* → bkBpmnEditorLayoutHtml core:HTML → sapMHTML wrapper (flex:1 1 auto)
* → inner div (flex:1 1 auto)
* → .bkBpmnEditorLayout (display:flex, flex-direction:row, flex:1 1 auto)
* → .bkBpmnCanvasWrapper (flex:1 1 auto)
* → #bkBpmnCanvas (height:100%, min-height:24rem)
*/
/* Die VBox mit class="bkBpmnEditorSection bkEndSection" rendert als .sapMVBox.
* Sie benoetigt display:flex + flex:1 1 auto damit sie die volle Hoehe der Page
* ausfuellt (sapMPageContent ist ein flex-column-Container). */
.bkBpmnEditorSection,
.bkBpmnEditorSection.sapMVBox {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden;
}
/* Generell: alle sapMVBox-Direktkinder des sapMPageContent in der End-Spalte
* muessen flex-grow haben damit sie die volle Hoehe ausnutzen.
* Betrifft auch die doc/release VBoxes. */
#container-docs---app--endPage .sapMPageContent > .sapMVBox,
#container-docs---app--endPage .sapMPageContent > .sapMScrollCont {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* SAP core:HTML hat KEINEN eigenen Wrapper-DIV — es setzt die ID direkt auf den
* root-Content-DIV. Daher ist #container-docs---app--bpmnEditorLayoutHtml == .bkBpmnEditorLayout.
* Diese Regel ergaenzt/korrigiert unsere spaetere #ID-Regel: */
.bkBpmnEditorSection > .bkBpmnEditorLayout,
.bkBpmnEditorSection > div:not(.bkSubHeader) {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* BPMN-Detailansicht: Tab-Leiste (Diagramm | Verknüpfungen) — gespiegelt von den
* Prozess-Tabs (.bkProzessTabs). Wrapper + IconTabBar füllen die Resthöhe; der
* Tab-Inhalt scrollt selbst → nichts wird mehr am Viewport-Rand abgeschnitten
* (löst #133/#134: „Verknüpfte Test-Cases" fielen unten raus). */
.bkBpmnTabsWrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.bkBpmnTabs {
flex: 1 1 auto;
min-height: 0;
}
.bkBpmnTabs.sapMITB { height: 100%; }
.bkBpmnTabs > .sapMITBContentInner,
.bkBpmnTabs .sapMITBContent {
height: 100%;
min-height: 0;
}
/* Diagramm-Tab: Canvas-Row (HBox) füllt die volle Tab-Höhe, damit bpmn-js korrekt rendert. */
.bkBpmnTabs .sapMITBContent > .bkBpmnEditorRow.sapMFlexBox {
height: 100%;
}
.bkBpmnVerknuepfungen { box-sizing: border-box; }
/* ===================== BPMN: Canvas + KI-Chat-Layout ===================== */
/* Horizontales Layout: Canvas links, KI-Chat-Pane rechts.
* Die frühere core:HTML-Hülle (.bkBpmnEditorLayout) wurde durch eine UI5-HBox
* (.bkBpmnEditorRow) ersetzt; darin: Canvas-core:HTML (.bkBpmnCanvasHtml) +
* Chat-Fragment (.bkBpmnChatPaneUi5). */
.bkBpmnEditorRow.sapMFlexBox {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100%;
overflow: hidden;
display: flex !important;
flex-direction: row !important;
}
/* SAP core:HTML setzt die Control-ID direkt auf den root-DIV des content-Strings.
* Der Canvas-Wrapper soll die verbleibende Breite füllen. */
.bkBpmnCanvasHtml {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Wrapper-DIV fuer den bpmn-js Canvas: fuellt die verbleibende Hoehe */
.bkBpmnCanvasWrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
/* min-height 0 (war 62vh): der Wrapper MUSS schrumpfen können, sonst füllt der Canvas 62vh und das
* darunterliegende „Verknüpfte Test-Cases"-Panel wird aus dem overflow:hidden-Container geklippt
* (#133/#134 — Panel unten abgeschnitten). Der Canvas-Floor (#bkBpmnCanvas min-height) hält die
* Mindesthöhe; bei eingeklapptem Panel wächst der Canvas via flex:1 1 auto wieder voll auf. */
min-height: 0;
position: relative;
}
/* core:HTML erzeugt ein inneres DIV — dieses muss ebenfalls strecken */
.bkBpmnCanvasWrapper > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
/* Das bkBpmnCanvas-DIV wird per JS erzeugt und braucht volle Hoehe.
* height:100% sichert pixelgenaue Hoehe fuer bpmn-js ab (zusaetzlich zu flex).
* sapBackgroundColor (z.B. #f5f6f7 in sap_horizon) statt sapBaseColor (#fff/transparent). */
#bkBpmnCanvas {
width: 100%;
height: 100%;
flex: 1 1 auto;
/* Floor abgesenkt (war 62vh): bei aufgeklapptem „Verknüpfte Test-Cases"-Panel darunter muss der
* Canvas weit genug schrumpfen, sonst läuft das Panel unten aus dem Viewport (Clipping, #126).
* Sind keine/wenige Tests da, wächst der Canvas via flex:1 1 auto wieder auf die volle Höhe.
* Floor 28vh (war 40vh): bei vielen verknüpften Test-Cases muss der Canvas weit genug schrumpfen,
* damit das Panel inkl. Scroll-Liste komplett im Viewport bleibt (#133 — Panel fiel unten raus). */
min-height: 28vh;
background: var(--sapBackgroundColor, #f5f6f7);
position: relative;
overflow: hidden;
}
/* bpmn-js eigene Powered-by ausblenden */
.bjs-powered-by {
display: none !important;
}
/* ===================== BPMN: Context-Pad-Icons via bpmn-font ===================== */
/*
* bpmn-js context-pad entries use background-image (SVG data-URIs) by default.
* Fix: force font-icon rendering via ::before pseudo-element from bpmn-font.css.
*/
.djs-context-pad .entry {
background-image: none !important;
background-color: var(--sapBaseColor, #fff);
font-family: "bpmn" !important;
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
line-height: 1;
}
.djs-context-pad .entry:hover {
background-color: var(--sapHoverColor, rgba(0,0,0,0.05));
}
/* ===================== BPMN: Dark-Mode ===================== */
/*
* In Dark-Themes ist der bpmn-js Canvas weiss-auf-weiss — nicht lesbar.
* Kurze Helfer-Mixin-Klasse statt langes Theme-Prefix-Wiederholen.
* Da CSS keine Mixins hat: wir definieren CSS-Custom-Properties im .bkBpmnCanvas-Dark-Mixin
* und nutzen :is() um alle drei Dark-Themes zusammenzufassen.
*/
/* Hintergrund: Canvas-DIV + SVG-Container */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) #bkBpmnCanvas {
background: #1c2228 !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-container {
background: #1c2228 !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-container > svg {
background: #1c2228 !important;
}
/* SVG-Hintergrund-Rechteck (bpmn-js rendert ein background rect) */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-container svg > g > rect:first-child,
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-svg-content-0 rect {
fill: #1c2228 !important;
}
/* Gitter-Pattern-Rechtecke */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-container pattern rect {
fill: rgba(255,255,255,0.05) !important;
}
/* BPMN-Shapes: Rechtecke (tasks), Kreise (events), Rauten (gateways) */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element .djs-visual rect,
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element .djs-visual circle,
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element .djs-visual polygon,
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element .djs-visual ellipse {
stroke: #8bb8e8 !important;
fill: #22303f !important;
}
/* Labels in BPMN-Shapes: heller Text */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element .djs-label text,
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-element text {
fill: #d8e4f0 !important;
}
/* Verbindungslinien: Pfade + Marker */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-connection .djs-visual path {
stroke: #8bb8e8 !important;
fill: none !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) marker path {
fill: #8bb8e8 !important;
stroke: #8bb8e8 !important;
}
/* Palette */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-palette {
background: #1e2832 !important;
border-color: #2e3d4d !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-palette .entry {
color: #c8d4e0 !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-palette .entry:hover {
background: rgba(139,184,232,0.15) !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-palette .separator {
border-color: #2e3d4d !important;
}
/* Context-Pad */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-context-pad {
background: transparent !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-context-pad .entry {
background: #1e2832 !important;
border-color: #2e3d4d !important;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-context-pad .entry:hover {
background: #2a3a4a !important;
}
/* WICHTIG: UI5 1.120.30 (css-variables) setzt KEIN data-sap-ui-theme auf ,
* d.h. alle [data-sap-ui-theme=...]-Regeln oben sind faktisch tot. Der Dark-Mode
* fuer bpmn-js laeuft ueber die per JS gesetzte .bkBpmnDark-Klasse am #bkBpmnCanvas
* (siehe _initBpmnModeler/_applyBpmnDarkMode) + Renderer-Optionen. Das Context-Pad
* wird dynamisch erst bei Selektion erzeugt und vom JS-Patch nicht erfasst — daher
* hier ueber den funktionierenden .bkBpmnDark-Hook stylen (sonst weisse Kaesten). */
#bkBpmnCanvas.bkBpmnDark .djs-context-pad .entry {
background: #1e2832 !important;
color: #c8d4e0 !important;
border: 1px solid #2e3d4d !important;
box-shadow: none !important;
}
#bkBpmnCanvas.bkBpmnDark .djs-context-pad .entry:hover {
background: #2a3a4a !important;
color: #ffffff !important;
}
/* Lasso / Selection */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .djs-lasso-overlay {
fill: rgba(139,184,232,0.12) !important;
stroke: #5ba4f5 !important;
}
/* KI-Chat-Pane in Dark-Mode */
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .bkBpmnChatPaneUi5.sapMVBox {
background: #1a2430;
border-color: #2e3d4d;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .bkBpmnChatTitleUi5 {
color: #8bb8e8;
border-color: #2e3d4d;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .bkBpmnChatHintUi5 {
color: #5b7ea0;
}
:is([data-sap-ui-theme="sap_horizon_dark"],
[data-sap-ui-theme="sap_fiori_3_dark"],
[data-sap-ui-theme="sap_horizon_hcb"]) .bkBpmnChatInputRowUi5.sapMFlexBox {
border-color: #2e3d4d;
}
/* ===================== Responsive: Phone (max 480px) ===================== */
@media (max-width: 480px) {
.bkSettings {
flex-direction: column;
height: auto !important;
}
.bkSettingsNav {
flex: 0 0 auto !important;
width: 100% !important;
border-right: none;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
}
.bkSettingsBody {
width: 100% !important;
}
/* BPMN auf Phone: Chat-Pane unten statt rechts */
.bkBpmnEditorRow.sapMFlexBox {
flex-direction: column !important;
}
.bkBpmnChatPaneUi5.sapMVBox {
flex: 0 0 16rem;
max-width: 100%;
min-width: 0;
border-left: none;
border-top: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
}
/* BPMN auf Phone: minimale Hoehe */
.bkBpmnCanvasWrapper,
#bkBpmnCanvas {
min-height: 18rem;
}
}
/* ===================== Release List Items ===================== */
.bkReleaseListItem {
padding: 0.75rem 1rem;
width: 100%;
justify-content: space-between;
align-items: center;
}
.bkReleaseListMain {
flex: 1 1 auto;
min-width: 0;
}
.bkReleaseTitle {
font-size: 0.9375rem;
color: var(--sapTextColor, #1d2d3e);
}
.bkReleaseVersion {
flex-shrink: 0;
}
.bkReleaseListMeta {
gap: 0.25rem;
align-items: center;
}
.bkMetaIcon {
font-size: 0.75rem;
color: var(--sapContent_LabelColor, #6a6d70);
}
.bkMetaDot {
user-select: none;
}
.bkReleaseArrow {
flex-shrink: 0;
color: var(--sapContent_LabelColor, #6a6d70);
font-size: 0.875rem;
margin-left: 0.75rem;
}
/* ===================== Release Detail — Commit Rows ===================== */
.bkCommitRow {
gap: 0.375rem;
align-items: center;
flex-wrap: wrap;
}
.bkCommitSubject {
flex: 1 1 auto;
min-width: 0;
color: var(--sapTextColor, #1d2d3e);
}
.bkCommitSha .sapMObjStatusText {
font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
font-size: 0.75rem;
}
.bkCommitSha {
background: var(--sapField_Background, #f5f6f7);
border: 1px solid var(--sapField_BorderColor, #bcc3ca);
border-radius: 3px;
padding: 0 0.35rem;
font-size: 0.75rem;
}
/* ===================== IllustratedMessage max-width ===================== */
.sapMIllu {
max-width: 32rem;
margin: 2rem auto !important;
}
/* ===================== BPMN Context-Pad Icon Fix ===================== */
/* KEIN manuelles data-action -> Codepoint-Mapping mehr!
* Die Context-Pad-Eintraege tragen bereits die korrekten bpmn-icon-*-Klassen
* (z.B. bpmn-icon-trash, bpmn-icon-connection-multi) — exakt wie die Palette,
* die korrekt rendert. Der frühere Override erzwang font-family:bpmn + falsche
* Codepoints (\e003 etc.), die im self-hosted Font (Codepoints im \e8xx-Bereich)
* nicht existieren → leere weiße Kästchen. Entfernt: native bpmn-font.css-Regeln
* (.bpmn-icon-*:before mit korrekten \e8xx-Codepoints) greifen jetzt auch hier. */
/* ===================== Responsive: Tablet + Phone (max 768px) ===================== */
/* P1-4: Editor-Split auf Tablets ebenfalls untereinander stapeln */
@media (max-width: 768px) {
/* Editor untereinander statt nebeneinander */
.bkDocEditorSplit {
flex-direction: column;
}
.bkDocEditorPane,
.bkDocPreviewPane {
flex: 0 0 auto;
max-width: 100%;
min-height: 12rem;
border-right: none;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
}
/* KI-Chat-Pane auf Tablet: schmaeler */
.bkBpmnChatPaneUi5.sapMVBox {
flex: 0 0 22rem;
max-width: 24rem;
min-width: 16rem;
}
}
/* ===================== Side-Navigation (Icon-Rail) + Body-Layout ===================== */
/* Body: Rail links + FCL rechts, fuellt die Page-Hoehe. */
.bkBody {
height: 100%;
width: 100%;
}
.bkBody > .sapFFCL {
flex: 1 1 auto;
min-width: 0;
height: 100%;
}
/* Icon-Rail: schmale, immer sichtbare Navigationsleiste (6 Kategorien). */
.bkRail {
flex: 0 0 auto;
width: 3.25rem;
height: 100%;
box-sizing: border-box;
padding: 0.5rem 0;
gap: 0.25rem;
align-items: center;
background: var(--sapShell_Background, var(--sapBaseColor, #fff));
border-right: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
}
.bkRail .bkRailBtn.sapMBtn {
width: 2.5rem;
min-width: 2.5rem;
height: 2.5rem;
margin: 0;
border-radius: 0.5rem;
}
/* Aktiver Eintrag = Emphasized-Button (via type-Binding) — Icon-Groesse leicht anheben. */
.bkRail .bkRailBtn .sapMBtnIcon {
font-size: 1.125rem;
}
/* Content-Page (Begin-Spalte): die Kategorie-Sektion soll die Hoehe der
Content-Flaeche fuellen (innerer ScrollContainer scrollt). Der Projekt-Header
liegt im customHeader -> UI5 reserviert dessen Platz nativ (kein Overlap). */
.bkContentPage .sapMPageContent {
display: flex;
flex-direction: column;
height: 100%;
}
/* Projekt-Select nicht auf 0 kollabieren (Card c_1ef45fc2dc „nicht breit genug"). */
.bkProjSelect { min-width: 12rem; }
/* Kategorie-Sektion fuellt die verbleibende Hoehe; innere ScrollContainer scrollen. */
.bkCatSection {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ===================== Karten-Feedback 2026-06-16: Politur ===================== */
/* BPMN-Canvas: dezentes Punkt-Raster statt leerer Flaeche (Card c_48d14fded0). */
#bkBpmnCanvas {
background-color: var(--sapBackgroundColor, #f5f6f7);
background-image: radial-gradient(var(--sapContent_ForegroundBorderColor, #c2c2c2) 0.0625rem, transparent 0.085rem);
background-size: 1.25rem 1.25rem;
background-position: -0.0625rem -0.0625rem;
}
#bkBpmnCanvas.bkBpmnDark {
background-color: #1c2228;
background-image: radial-gradient(rgba(255,255,255,0.07) 0.0625rem, transparent 0.085rem);
}
/* Release-/Doku-Markdown: sauberere Tabellen + Task-Listen (Card c_06a44c5387). */
.bkMdPreview table {
border: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
border-radius: 6px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.bkMdPreview th,
.bkMdPreview td {
border: none;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
}
.bkMdPreview tr:last-child td { border-bottom: none; }
.bkMdPreview tbody tr:nth-child(even) { background: var(--sapList_AlternatingBackground, rgba(127,127,127,0.04)); }
/* GFM-Task-Listen: Bullet weg, Checkbox sauber ausrichten. */
.bkMdPreview li:has(> input[type="checkbox"]) {
list-style: none;
margin-left: -1rem;
}
.bkMdPreview input[type="checkbox"] {
width: 1rem;
height: 1rem;
vertical-align: -2px;
margin-right: 0.5rem;
accent-color: var(--sapButton_Emphasized_Background, #0070f2);
}
/* Agent-Feedback-Dialog: Formular-Abstaende + Empty zentriert (Card c_1bc98827fe). */
.bkDialogForm { gap: 0.35rem; padding: 0.25rem 0.25rem 0.5rem; }
.bkDialog .sapMListNoData { text-align: center; color: var(--sapContent_LabelColor, #6a6d70); }
/* ===================== Design-Review-Politur 2026-06-16 ===================== */
/* (#1) Aktion-Buttons in Kategorie-Toolbars nicht am rechten Rand kleben/kappen. */
.bkCatSection .sapMTB { padding-right: 1rem; box-sizing: border-box; }
/* (#9) ShellBar: Trennlinie + dezente Tiefe + besserer secondTitle-Kontrast. */
.bkShellPage .sapFShellBar {
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.10);
/* Großes Standard-Padding (3rem/48px) links verkleinern — kein "Loch" zwischen Rand und Logo. */
padding-left: 1rem !important;
padding-right: 1.25rem !important;
}
.bkShellPage .sapFShellBarSecondTitle {
opacity: 0.9;
font-weight: 600;
}
/* (#10) Projekt-Select: etwas Fiori-Feinschliff (Radius + Hover-Border). */
.bkProjSelect.sapMSlt { border-radius: 0.5rem; }
.bkProjSelect.sapMSlt:hover { border-color: var(--sapField_Hover_BorderColor, var(--sapHighlightColor, #0070f2)); }
/* (#11) FCL-Spalten-Splitter-Grip deutlicher sichtbar/interaktiv. */
.bkFcl .sapFFCLColumnSeparatorGrip { opacity: 1; }
.bkFcl .sapFFCLColumnSeparator:hover .sapFFCLColumnSeparatorGrip {
background: var(--sapHighlightColor, #0070f2);
}
/* (#8) Icon-Rail: aktiver Eintrag dezent (heller Tint + farbiges Icon + linke
Akzentleiste) statt vollflaechigem blauem Block. Rail leicht verbreitert. */
.bkRail { width: 3.5rem; }
.bkRail .bkRailBtn.sapMBtn {
width: 2.75rem;
min-width: 2.75rem;
height: 2.75rem;
}
/* aktiven Emphasized-Inner entschaerfen: Tint statt Vollfarbe */
.bkRail .bkRailBtn .sapMBtnInner.sapMBtnEmphasized {
background-color: var(--sapButton_Selected_Background, rgba(13,110,253,0.16)) !important;
border-color: transparent !important;
box-shadow: none !important;
}
.bkRail .bkRailBtn .sapMBtnInner.sapMBtnEmphasized .sapMBtnIcon {
color: var(--sapButton_Selected_TextColor, var(--sapHighlightColor, #0070f2)) !important;
}
/* linke Akzentleiste am Rail-Rand fuer den aktiven Eintrag */
.bkRail .bkRailBtn.sapMBtn:has(.sapMBtnEmphasized) { position: relative; }
.bkRail .bkRailBtn.sapMBtn:has(.sapMBtnEmphasized)::before {
content: "";
position: absolute;
left: -0.375rem;
top: 0.45rem;
bottom: 0.45rem;
width: 0.1875rem;
border-radius: 0 0.125rem 0.125rem 0;
background: var(--sapHighlightColor, #0070f2);
}
/* ===================== BPMN: kein manuelles Zeichnen (Viewer) + XML-Editor ===================== */
/* Palette + Context-Pad ausblenden — Prozesse werden per Agent erzeugt oder als XML korrigiert. */
#bkBpmnCanvas .djs-palette,
#bkBpmnCanvas .djs-context-pad { display: none !important; }
/* BPMN-XML-Editor-Pane (ersetzt das frühere Properties-Panel) */
.bkBpmnXmlPane {
flex: 0 0 34rem;
max-width: 34rem;
min-width: 22rem;
display: flex;
flex-direction: column;
border-left: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
background: var(--sapPageHeader_Background, var(--sapBaseColor, #fff));
overflow: hidden;
}
.bkBpmnXmlTitle {
font-size: 0.8125rem;
font-weight: 600;
color: var(--sapContent_LabelColor, #6a6d70);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.625rem 0.875rem 0.375rem;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
flex-shrink: 0;
}
.bkBpmnXmlText {
flex: 1 1 auto;
min-height: 12rem;
margin: 0.5rem 0.75rem 0.25rem;
padding: 0.5rem;
box-sizing: border-box;
resize: none;
font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
font-size: 0.8125rem;
line-height: 1.5;
border: 1px solid var(--sapField_BorderColor, #bcc3ca);
border-radius: 0.25rem;
background: var(--sapField_Background, #fff);
color: var(--sapTextColor, #1d2d3e);
white-space: pre;
overflow: auto;
}
.bkBpmnXmlText:focus {
outline: none;
border-color: var(--sapHighlightColor, #0070f2);
}
.bkBpmnXmlMsg {
min-height: 1rem;
padding: 0 0.875rem;
font-size: 0.75rem;
flex-shrink: 0;
}
.bkBpmnXmlMsgOk { color: var(--sapPositiveColor, #107e3e); }
.bkBpmnXmlMsgErr { color: var(--sapNegativeColor, #bb0000); }
.bkBpmnXmlApply {
flex-shrink: 0;
margin: 0.25rem 0.75rem 0.75rem;
padding: 0.5rem;
border: none;
border-radius: 0.375rem;
background: var(--sapButton_Emphasized_Background, #0070f2);
color: var(--sapButton_Emphasized_TextColor, #fff);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.bkBpmnXmlApply:hover { background: var(--sapButton_Emphasized_Hover_Background, #0064d9); }
/* (Das frühere „Verknüpfte Test-Cases"-Panel unter dem Canvas wurde durch den
* Verknüpfungen-Tab ersetzt — die zugehörigen .bkBpmnTestCasesPanel/.bkBpmnTestCaseScroll-
* Regeln sind dadurch entfallen.) */
/* ===================== BPMN: KI-Chat-Pane (UI5-Fragment) ===================== */
/* Container-VBox des Fragments (BpmnChat.fragment.xml) — rechte Spalte neben dem Canvas. */
.bkBpmnChatPaneUi5.sapMVBox {
flex: 0 0 34rem; max-width: 34rem; min-width: 22rem;
display: flex; flex-direction: column;
border-left: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5);
background: var(--sapPageHeader_Background, var(--sapBaseColor, #fff));
overflow: hidden;
}
.bkBpmnChatTitleUi5 {
font-size: 0.8125rem; font-weight: 600; color: var(--sapContent_LabelColor, #6a6d70);
text-transform: uppercase; letter-spacing: 0.04em;
padding: 0.625rem 0.875rem 0.375rem;
border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5); flex-shrink: 0;
}
/* Nachrichten-Scrollbereich füllt die Höhe. */
.bkBpmnChatMsgsUi5.sapMScrollCont { flex: 1 1 auto; min-height: 0; }
.bkBpmnChatMsgsUi5 .sapMScrollContScroll { padding: 0.75rem; }
.bkBpmnChatHintUi5 { color: var(--sapContent_LabelColor, #6a6d70); font-size: 0.8125rem; line-height: 1.5; display: block; }
/* FeedListItem-Bubbles: Rolle steuert Farbe + Ausrichtung über die Custom-Klasse. */
.bkBpmnChatMsgsUi5 .sapMList .sapMLIB { border-bottom: 0; background: transparent; padding: 0; }
.bkBpmnChatItem .sapMFeedListItem { padding: 0; margin: 0.25rem 0; }
.bkBpmnChatItem .sapMFeedListItemText {
max-width: 90%; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
font-size: 0.8125rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; display: inline-block;
}
.bkBpmnChatItem .sapMFeedListItemHeader, .bkBpmnChatItem .sapMFeedListItemFooter { display: none; }
.bkBpmnChatItem--user .sapMFeedListItem { text-align: right; }
.bkBpmnChatItem--user .sapMFeedListItemText { background: var(--sapButton_Emphasized_Background, #0070f2); color: var(--sapButton_Emphasized_TextColor, #fff); }
.bkBpmnChatItem--ai .sapMFeedListItemText { background: var(--sapField_Background, #f5f6f7); color: var(--sapTextColor, #1d2d3e); border: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5); }
.bkBpmnChatItem--err .sapMFeedListItemText { background: var(--sapField_Background, #f5f6f7); color: var(--sapNegativeColor, #bb0000); border: 1px solid var(--sapNegativeColor, #bb0000); }
/* Eingabezeile: TextArea + Senden. */
.bkBpmnChatInputRowUi5.sapMFlexBox { flex-shrink: 0; gap: 0.5rem; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--sapGroup_ContentBorderColor, #e5e5e5); box-sizing: border-box; }
.bkBpmnChatPromptUi5 { min-width: 0; }
.bkBpmnChatSendUi5 { flex-shrink: 0; }
/* ── F8.8: Traceability-Graph-/Impact-View ───────────────────────────── */
.bkGraphBar { background: transparent; border: none; }
.bkGraphHost { display: flex; justify-content: center; padding: .5rem; min-width: 780px; }
.bkGraphSvg { width: 760px; height: 520px; max-width: 100%; }
.bkGraphEdgeLbl { font-size: 10px; fill: var(--sapContent_LabelColor, #6a6d70); font-family: var(--sapFontFamily, sans-serif); }
.bkGraphNodeIcon, .bkGraphFocusIcon { fill: #fff; font-weight: 700; font-family: var(--sapFontFamily, sans-serif); }
.bkGraphNodeIcon { font-size: 14px; }
.bkGraphFocusIcon { font-size: 20px; }
.bkGraphNodeLbl { font-size: 12px; fill: var(--sapTextColor, #32363a); font-family: var(--sapFontFamily, sans-serif); }
.bkGraphFocusLbl { font-size: 13px; font-weight: 700; fill: var(--sapTextColor, #32363a); font-family: var(--sapFontFamily, sans-serif); }
.bkGraphNode circle { transition: r .1s ease; }
.bkGraphNode:hover circle { r: 25; stroke: var(--sapTextColor, #32363a); stroke-width: 2; }
/* ===================== Prozess-Test-Cases-Liste (Tab „Test Cases") ===================== */
/*
* Vorher gequetscht: Lab-Icon klebte am Text, Titel/Feature-Slug/Run/Status ohne
* Abstände, lange BELEG-…-Slugs brachen unschön um. Jetzt klare Zeilenstruktur mit
* eigener Icon-Spalte, Abständen und Ellipsis für lange Feature-Slugs.
*/
.bkProzTestItem .bkProzTestRow {
padding: 0.5rem 0.25rem;
gap: 1rem;
}
.bkProzTestMain {
gap: 0.75rem;
min-width: 0; /* erlaubt Ellipsis im Kind */
flex: 1 1 auto;
}
.bkProzTestIcon {
flex: 0 0 auto;
color: var(--sapContent_NonInteractiveIconColor, #6a6d70);
font-size: 1.125rem;
width: 1.75rem;
height: 1.75rem;
line-height: 1.75rem;
text-align: center;
}
.bkProzTestText {
min-width: 0; /* Voraussetzung für text-overflow im Text-Control */
gap: 0.125rem;
justify-content: center;
}
.bkProzTestTitle {
font-weight: 600;
color: var(--sapTextColor, #32363a);
}
.bkProzTestSub {
font-size: 0.8125rem;
color: var(--sapContent_LabelColor, #6a6d70);
}
.bkProzTestMeta {
flex: 0 0 auto;
gap: 0.75rem;
white-space: nowrap;
}
.bkProzTestStatus { margin-inline-start: 0.25rem; }
/* ===================== Traceability-Matrix (CALM/SolMan-Stil) ===================== */
.bkTraceMatrix .bkTraceProzCell { gap: 0.125rem; }
.bkTraceProzTitle { font-weight: 600; color: var(--sapTextColor, #32363a); }
.bkTraceProzKey { font-size: 0.75rem; font-family: var(--bk-font-mono); }
.bkTraceCellIcon {
font-size: 1.25rem;
width: 100%;
text-align: center;
}
/* Vorhandene Verknüpfung = anklickbar (Cursor + Hover-Hervorhebung). */
.bkTraceLinkable { cursor: pointer; }
.bkTraceMatrix .sapMLIB:hover .bkTraceLinkable { opacity: 0.85; }
.bkTraceTestsCell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.4rem; width: 100%; }
/* #127 Test-Cases-Badges: kompakt, lesbar, nicht gequetscht. */
.bkTraceTestBadge { white-space: nowrap; font-size: 0.78rem; }
.bkTraceTestBadge .sapMObjStatusText { font-weight: 600; }
/* #127 Prozess-Name: saubere Umbrüche statt Mitten-im-Wort-Abschnitt; langer key bricht weich um. */
.bkTraceProzTitle { line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.bkTraceProzKey { overflow-wrap: anywhere; white-space: normal; opacity: 0.6; }
.bkTraceMatrix .bkTraceProzCell { padding: 0.15rem 0; }
/* Lücke = dezent ausgegraut, nicht klickbar. */
.bkTraceGap { opacity: 0.35; cursor: default; }
.bkTraceMatrix .sapMListTblCell { vertical-align: middle; }
/* ━━━ #105 Typografie- & Traceability-Matrix-Feinschliff (ansprechender) ━━━ */
/* Crispere Schrift app-weit (Antialiasing + bessere Kerning/Ligaturen). */
body, .sapMText, .sapMLabel, .sapMTitle, .sapMObjectIdentifierTitle, .sapMSLITitleOnly, .sapMSLITitle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Überschriften markanter (engeres Tracking, klarere Hierarchie). */
.sapMTitle { letter-spacing: -0.012em; }
.sapMPanelHdr .sapMTitle, .sapMPanelWrappingDivTb .sapMTitle { font-weight: 600; }
/* Traceability-Matrix: ruhiger Tabellenkopf, Zeilen-Hover, vertikal zentrierte Status-Icons. */
.bkTraceMatrix .sapMListTblHeaderCell .sapMText,
.bkTraceMatrix .sapMListTblHeaderCell .sapMLabel {
text-transform: uppercase; font-size: 0.70rem; letter-spacing: 0.05em;
font-weight: 700; color: var(--sapContent_LabelColor, #8c8f94);
}
.bkTraceMatrix .sapMListTblSubRow, .bkTraceMatrix .sapMListTblRow { transition: background-color 0.12s ease; }
.bkTraceMatrix .sapMListTblRow:hover { background: var(--sapList_Hover_Background, rgba(120,160,255,0.06)); }
.bkTraceMatrix .sapMListTblCell { vertical-align: middle; padding-top: 0.55rem; padding-bottom: 0.55rem; }
/* Prozess-Titel kräftiger, der Key dezent monospace darunter. */
.bkTraceMatrix .sapMObjectIdentifierTitle, .bkTraceMatrix .sapMListTblCell .sapMTitle { font-weight: 600; letter-spacing: -0.005em; }
.bkTraceMatrix .sapMObjectIdentifierText { font-family: var(--bk-font-mono); font-size: 0.70rem; opacity: 0.62; }
/* Status-Icons (BPMN/Doku/Test) etwas größer + zentriert für ruhigeres Raster. */
.bkTraceMatrix .sapMListTblCell .sapUiIcon { font-size: 1.05rem; }
/* Karten/Panels generell mit etwas mehr Luft + weicheren Kanten. */
.bkCatSection .sapMPanel { border-radius: var(--bk-radius-panel); }
/* #114 Sichtbare Textauswahl — im Dark-Theme war die Markierung unsichtbar (gleiche Farbe wie Text). */
::selection { background: #2563eb !important; color: #ffffff !important; }
::-moz-selection { background: #2563eb !important; color: #ffffff !important; }
input::selection, textarea::selection { background: #2563eb !important; color: #ffffff !important; }
/* #114 (verstärkt): SAP-Theme setzt eigene ::selection — daher !important + SAP-Inner-Selektoren. */
.sapMInputBaseInner::selection, .sapMTextArea textarea::selection, textarea::selection,
.sapMText::selection, .sapMLabel::selection, .sapMTitle::selection, span::selection, div::selection,
.sapUiText::selection, code::selection, pre::selection { background: #2563eb !important; color: #ffffff !important; }
.sapMInputBaseInner::-moz-selection, .sapMTextArea textarea::-moz-selection, textarea::-moz-selection { background: #2563eb !important; color: #ffffff !important; }
/* ── Doku-Orchestrator (Lücken-Chat) — Layout identisch zur Backstraße ─────── */
.bsDokuChatBody { box-sizing: border-box; padding: 1rem 1.25rem; }
.bsDokuChatGaps.sapMPanel { flex-shrink: 0; margin-bottom: 0.75rem; }
.bsDokuChatInput { flex-shrink: 0; margin-top: 0.75rem; }
.bsDokuChatScroll { min-height: 0; }
.bsDokuChatMsgs { background: transparent; }
.bsDokuChatMsgs .sapMLIB { border-bottom: none; }
.bsDokuChatGapList .sapMLIB { padding-left: 0.25rem; }
.bsDokuChatBusy { flex-shrink: 0; padding: 0.5rem 0.5rem 0.25rem; }
.bsDokuChatBusyText { font-style: italic; color: var(--sapContent_LabelColor, #6a6d70); }
/* Docs-Einbettung: sap.m.VBox wickelt das Fragment in einen .sapMFlexItem-Wrapper, der ohne
Höhe auf 0 kollabiert (die Page ist Enkel, nicht Kind). Nur den DIREKTEN Wrapper + Page füllen. */
.bkDokuChatCat > .sapMFlexItem { height: 100%; min-height: 0; flex: 1 1 auto; }
.bkDokuChatCat > .sapMFlexItem > .sapMPage { height: 100%; }