/* 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;
}

/* 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));
}

/* 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;
}