/* Pfad-Ebenen-Marker auf SequenceFlows */
.djs-element.qs-pl-standard .djs-visual > path:not(.djs-hit) {
    stroke: #16a34a !important;
    stroke-width: 2.5px;
}
.djs-element.qs-pl-alternative .djs-visual > path:not(.djs-hit) {
    stroke: #ca8a04 !important;
    stroke-width: 2.5px;
}
.djs-element.qs-pl-exception .djs-visual > path:not(.djs-hit) {
    stroke: #dc2626 !important;
    stroke-width: 2.5px;
    /* Kein stroke-dasharray — gestrichelt ist fuer Message-Flows reserviert. */
}

/* End-Event-/Throw-Event-Border in Layer-Farbe */
.djs-element.qs-pl-standard.djs-shape .djs-visual > circle:not(.djs-hit) {
    stroke: #16a34a !important;
    stroke-width: 4px !important;
}
.djs-element.qs-pl-alternative.djs-shape .djs-visual > circle:not(.djs-hit) {
    stroke: #ca8a04 !important;
    stroke-width: 4px !important;
}
.djs-element.qs-pl-exception.djs-shape .djs-visual > circle:not(.djs-hit) {
    stroke: #dc2626 !important;
    stroke-width: 4px !important;
}

/* Hide-Marker (Flow + Shape + Label + MessageFlow). bpmn-js setzt
   style="display: block;" inline auf jedes <g class="djs-element">
   — daher !important noetig. */
.djs-element.qs-pl-hidden {
    display: none !important;
}

/* Bridge-Linien (durchverbundene Gateways): keine Pfeilspitze auf incoming,
   kein Default-/Conditional-Marker auf outgoing */
.djs-element.qs-pl-bridge-in .djs-visual > path:not(.djs-hit) {
    marker-end: none !important;
}
.djs-element.qs-pl-bridge-out .djs-visual > path:not(.djs-hit) {
    marker-start: none !important;
}

/* Trail-Linien zu hidden Flows: separate qs-trail-layer-Group, daher
   eigener Hide-Marker, nicht qs-pl-hidden. */
.qs-trail-layer .qs-trail.qs-trail-hidden {
    display: none;
}
/* Spur im Inneren eines ausgeblendeten Teilprozesses („Teilprozesse: Inhalt aus") —
   eigene Klasse, damit sie den Rest des Laufs nicht mit verbirgt. */
.qs-trail-layer .qs-trail.qs-trail-subhide {
    display: none;
}
/* Master-Sichtbarkeit AUS (Werkzeugmenü „Pfadspur"): verbirgt JEDE Spur im Layer —
   auch lose/Live-Spuren, die kein erfasster Lauf kennt. Greift über den Layer-Vorfahren,
   daher unabhängig von per-Element-Klassen (kein Bookkeeping bei Live-Redraw nötig). */
.qs-trail-layer.qs-trails-master-off .qs-trail {
    display: none;
}
/* Sim-Läufe-Fenster: dezenter Hover je Instanz-Zeile (führt das Auge; die Kerneinheit-/
   Cluster-Boxen sind die eigentlichen visuellen Gruppen — kein Zebra). */
.qs-plw-irow:hover {
    background: rgba(127, 140, 160, 0.14);
}
/* Trail-Layer NIE klickbar: die breiten (stroke-width 7) Spur-Pfade liegen genau über
   den Sequenzflüssen. Ohne pointer-events:none fingen sie Klicks ab → Flows ließen sich
   nicht mehr selektieren (Shapes schon). Per CSS abgesichert, falls die Inline-Style der
   Group bei Re-Import/CRDT-Modellersatz verloren geht. */
.qs-trail-layer,
.qs-trail-layer .qs-trail {
    pointer-events: none !important;
}

/* Kommentar- und XML-Marker: liegen als bpmn-js-Overlays in einem eigenen
   Container — qs-pl-hidden auf .djs-element greift nicht. recomputeVisibility
   setzt diese Klasse direkt auf den Marker-Dot. */
.qs-comment-dot.qs-marker-hidden,
.qs-xmli-dot.qs-marker-hidden {
    display: none !important;
}

/* --- Blau-Outline auf .djs-element.selected fuer Viewer (Screen/Mirror) ---
   Der bpmn-js-Viewer rendert Selection per default nicht visuell sichtbar.
   Diese Regel zeichnet die gleiche blaue Outline wie im Modeler, sodass die
   Admin-Selektion auf Screens + Mirror-Spielern nachvollziehbar ist. */
.djs-element.selected .djs-outline {
    visibility: visible !important;
    stroke: #3b82f6 !important;
    stroke-width: 2 !important;
    stroke-dasharray: none !important;
    fill: none !important;
}

/* --- Rückwärts-Erreichbarkeit (transient) ---
   Wird gesetzt von service.applyBackwardReachability(startEl). Ein
   "qs-pl-reachability-mode" auf dem djs-container dimmt alle Elemente,
   die NICHT qs-pl-reachable haben. qs-pl-reach-start erkennt erreichte
   Start-Events (Doppel-Akzent). */
.qs-pl-reachability-mode .djs-element:not(.qs-pl-reachable) {
    opacity: 0.22;
    transition: opacity 0.15s;
}
.djs-element.qs-pl-reachable .djs-visual > :not(.djs-hit) {
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.65));
}
.djs-element.qs-pl-reach-start .djs-visual > :not(.djs-hit) {
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.85));
}
/* Vorwärts-Erreichbarkeit (2026-08-12): erreichte ENDEREIGNISSE — amber
   Ziel-Akzent (unterscheidbar vom grünen Start-Akzent der Rückwärts-Analyse). */
.djs-element.qs-pl-reach-end .djs-visual > :not(.djs-hit) {
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9));
}

/* Context-Pad-Buttons fuer Pfad-Ebenen (Admin) */
.djs-context-pad .entry.qs-cm-cp {
    background-image: none !important;
    position: relative;
}
.djs-context-pad .entry.qs-cm-cp::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4);
}
.djs-context-pad .entry.qs-cm-cp-standard::before    { background: #22c55e; }
.djs-context-pad .entry.qs-cm-cp-alternative::before { background: #eab308; }
.djs-context-pad .entry.qs-cm-cp-exception::before   { background: #ef4444; }
.djs-context-pad .entry.qs-cm-cp-clear::before {
    background: transparent;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.5);
    border-style: dashed;
}
.djs-context-pad .entry.qs-cm-cp-clear::after {
    content: '×';
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #555;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
}

/* Aktive Membership-Indikator: ✓-Badge oben rechts am farbigen Button */
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 1.5px rgba(0, 0, 0, 0.4);
}
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-active::after {
    content: '✓';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #fff;
    color: #111;
    border-radius: 50%;
    font-size: 9px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* THEMEN-TAGS (2026-08-04): nicht sauber überbrückbare tag-versteckte Elemente
   werden GEDIMMT statt versteckt (ehrlicher Fallback — lieber zurückgenommen
   sichtbar als eine lügende Topologie). */
.djs-element.qs-tag-dim { opacity: 0.22; }
/* Leere Lane (2026-10-08): Streifen bleibt, nur der Titel wird blass —
   die Sicht verschiebt kein Layout, man sieht aber, dass hier etwas ausgeblendet ist. */
.djs-element.qs-lane-faded > .djs-visual > text { opacity: 0.3; }
.djs-element.qs-tag-dim .djs-visual { pointer-events: none; }

/* Stich-Kante zur gedimmten SACKGASSE (2026-08-13): in BRÜCKEN-Sprache —
   gestrichelt + neutral statt Ebenen-Farbe (3-Klassen-Selektor schlägt die
   qs-pl-*-Farbregeln bei gleicher !important-Stärke). Dimmung bleibt. */
.djs-element.qs-tag-dim.qs-tag-dimlink .djs-visual > path:not(.djs-hit) {
    stroke: #9aa2ad !important;
    stroke-dasharray: 6 4 !important;
}

/* GLOW (2026-08-11 Hover, 2026-08-13 auch dauerhaft via Farbpunkt-Pin):
   betroffene Elemente leuchten in der FARBE des Themas/der Ebene (Custom
   Property --qs-tag-glow-c, gesetzt von renderGlows; Fallback Amber).
   Gedimmte werden dabei voll sichtbar (der Glow fragt ja gerade „welche
   sind betroffen?"). !important, weil der Glow die Dimm-Opacity und etwaige
   Element-Filter temporär schlagen muss. MEHRFACH-Glows (Element in mehreren
   gepinnten Hervorhebungen) setzen stattdessen einen INLINE-filter mit
   Priority 'important' (gestapelte Ringe wie beim Co-Edit) — der gewinnt
   gegen diese Regel. */
.djs-element.qs-tag-hoverglow {
    filter: drop-shadow(0 0 3px var(--qs-tag-glow-c, #fbbf24)) drop-shadow(0 0 9px var(--qs-tag-glow-c, #fbbf24)) !important;
    opacity: 1 !important;
}

/* Kontextpad: Themen (Etikett) und Rollen (Person) — eigene, einfarbige Vektorsymbole
   (Lucide „tag“/„user“ als Maske, Farbe = Schriftfarbe des Pads → hell/dunkel).
   Doppelte Klasse .qs-cm-cp.qs-cm-cp-…: qs-bpmn-sim.css lädt NACH dieser Datei und setzt
   für jedes .qs-cm-cp ein leeres ::before — bei gleicher Spezifität gewann es, beide Einträge
   zeigten denselben leeren Kreis (Nutzer-Befund 2026-10-09). */
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-tag::before,
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-role::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 0;
    box-shadow: none;
    background: currentColor;
    -webkit-mask: var(--qs-cp-ico) center / contain no-repeat;
    mask: var(--qs-cp-ico) center / contain no-repeat;
}
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-tag { --qs-cp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2' fill='black'/%3E%3C/svg%3E"); }
.djs-context-pad .entry.qs-cm-cp.qs-cm-cp-role { --qs-cp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }

/* Teilprozesse zugeklappt darstellen (Sicht, 2026-10-13): Inhalt aufgeklappter
   Teilprozesse ausgeblendet, im Rahmen ein Platzhalter. Reine Darstellung. */
.djs-element.qs-sub-hide { display: none !important; }
.djs-element.qs-sub-dim { opacity: .22; }
.qs-sub-ph { display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; }
.qs-sub-ph-in { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 92%; text-align: center;
  font: 600 12px/1.3 var(--qs-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); color: #4b5563; }
.qs-sub-ph-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid #374151; border-radius: 2px; font: 700 14px/1 sans-serif; color: #374151; }
.qs-sub-ph-open { pointer-events: auto; cursor: pointer; font: 600 11px/1 var(--qs-font, sans-serif); padding: 4px 9px;
  border-radius: 4px; border: 1px solid #64748b; background: #fff; color: #334155; }
.qs-sub-ph-open:hover { border-color: #334155; background: #f1f5f9; }