/* Vizuál `bpmn-js` prepretý na tokeny Meridianu.
 *
 * Knižnica si nesie vlastný stylesheet a vlastné farby — čierny obrys, biele
 * plátno, modrý výber. To je druhý vizuálny jazyk vedľa Meridianu, a v tmavej
 * téme čierne na tmavom nevidno. Tento súbor je preto **jediné miesto**, kde sa
 * vendorovaný vzhľad prepisuje; všetky hodnoty sú `var(--…)`, žiadny hex
 * (ui-guide §3 pravidlo 1).
 *
 * Ide `<link>`om z dokumentu **za** stylesheetmi knižnice, nie importom z TSX:
 * v shelli rozväzuje moduly import mapa a stylesheet je `<link>` (S122).
 *
 * `!important` je tu nevyhnutné: `bpmn-js` kreslí `fill`/`stroke` ako **atribút
 * elementu** aj v inline štýle, takže obyčajná trieda by neprešla. Selektory sú
 * zúžené na `.bpmn-map`, teda na plátno mapy — mimo neho tento súbor nič nerobí.
 */

/* Mapa na celú obrazovku. Nesie to Fullscreen API na tom istom elemente; tieto
   pravidlá sú druhý nosič — bez nich by karta vo fullscreene zostala vysoká
   360 px na čiernom, a keď prehliadač fullscreen odmietne, vrstva to zvládne
   sama. Odsadenia sú z rady ui-guide §2.4. */
.mapa-cela {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ground);
  padding: 14px;
  overflow: auto;
}

/* Karta v tej vrstve vyplní výšku, aby plátno rástlo s ňou. */
.mapa-cela > section {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0 !important;
}

.bpmn-map {
  --canvas-fill-color: var(--surface);
  --element-selected-outline-stroke-color: var(--accent);
  --element-hover-outline-fill-color: var(--accent);
  background: var(--surface);
  font-family: var(--ui);
}

/* Uzly a hrany: obrys `--text`, výplň `--surface` — teda ten istý kontrast, aký
   má default bpmn.io (čierne na bielom), len tokenmi, takže v tmavej téme sa
   obráti. Sivý obrys (`--border-strong`) na svetlej výplni tu **nepatrí**:
   diagram je kresba, nie rám karty, a vyšedené uzly sa nedajú prečítať. */
.bpmn-map .djs-visual > :is(rect, circle, ellipse, polygon, path) {
  stroke: var(--text) !important;
}

.bpmn-map .djs-visual > :is(rect, circle, ellipse, polygon) {
  fill: var(--surface) !important;
}

/* Ikona druhu tasku (ozubené kolo, postavička) je `path` s výplňou — bez tohto
   by zostala v pôvodnej farbe knižnice. */
.bpmn-map .djs-shape .djs-visual > path {
  fill: var(--text) !important;
}

/* Šípka na konci hrany je `path` s výplňou — bez tohto by zostala čierna. */
.bpmn-map .djs-connection .djs-visual > path {
  fill: none !important;
}

.bpmn-map .djs-connection .djs-visual > polyline,
.bpmn-map .djs-connection .djs-visual > path[stroke-linecap] {
  stroke: var(--text) !important;
}

/* Šípka na konci hrany je `marker` mimo `.djs-visual` — v `<defs>` plátna. */
.bpmn-map marker :is(path, polyline, polygon) {
  fill: var(--text) !important;
  stroke: var(--text) !important;
}

/* Popisy — meno uzla aj popis hrany. */
.bpmn-map .djs-visual > text,
.bpmn-map .djs-visual > text > tspan,
.bpmn-map .djs-label {
  fill: var(--text) !important;
  font-family: var(--ui) !important;
}

/* ── stav behu (S154 R6) ── */

.bpmn-map .st-done .djs-visual > :is(rect, circle, ellipse, polygon) {
  fill: var(--ok-bg) !important;
  stroke: var(--ok-fg) !important;
}

.bpmn-map .st-active .djs-visual > :is(rect, circle, ellipse, polygon) {
  fill: var(--accent-soft) !important;
  stroke: var(--accent) !important;
}

.bpmn-map .st-waiting .djs-visual > :is(rect, circle, ellipse, polygon) {
  fill: var(--warn-bg) !important;
  stroke: var(--warn-fg) !important;
}

.bpmn-map .st-failed .djs-visual > :is(rect, circle, ellipse, polygon) {
  fill: var(--dan-bg) !important;
  stroke: var(--dan-fg) !important;
}

.bpmn-map :is(.st-done, .st-active, .st-waiting, .st-failed) .djs-visual > :is(rect, circle, ellipse, polygon) {
  stroke-width: 2px !important;
}

/* ── vybraný tick ──
   Nie je to stav behu, ale výber v timeline: uzol ho nesie **navyše** k svojej
   farbe, takže sa nesmie prejaviť výplňou — inak by prekryl `st-failed`. Preto
   prerušovaný obrys v `--accent`; je to iný nosič než `st-active`, ktorý má tú
   istú farbu ako plnú výplň. Pravidlo stojí za stavmi, aby prebilo ich
   `stroke-width` pri rovnakej špecifickosti. */
.bpmn-map .st-selected .djs-visual > :is(rect, circle, ellipse, polygon) {
  stroke: var(--accent) !important;
  stroke-width: 3px !important;
  stroke-dasharray: 6 3 !important;
}