/* ── BPMN Process Viewer ─────────────────────────────────────────────────────── */

.process-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Loading / error states ─────────────────────────────────────────────────── */

.bpmn-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--color-muted, #999);
  font-size: 0.9rem;
}

.bpmn-state__icon {
  font-size: 48px;
  opacity: 0.4;
}

.bpmn-error { color: var(--color-danger, #e53935); }
.bpmn-loading .bpmn-state__icon { animation: bpmn-spin 1.6s linear infinite; }

@keyframes bpmn-spin {
  to { transform: rotate(360deg); }
}

/* ── Container + header ─────────────────────────────────────────────────────── */

.bpmn-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  height: 100%;
}

.bpmn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  background: var(--color-surface-alt, #f9f9f9);
}

.bpmn-header .material-symbols-outlined {
  font-size: 22px;
  color: var(--color-accent, #1565c0);
}

.bpmn-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

/* ── SVG viewport ───────────────────────────────────────────────────────────── */

.bpmn-viewport {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: var(--color-surface, #fff);
  /* Fine dot grid to give a canvas feel */
  background-image: radial-gradient(circle, var(--color-border, #e0e0e0) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bpmn-svg {
  display: block;
  width: 100%;
  min-height: 200px;
  overflow: visible;
}

/* ── BPMN Elements ──────────────────────────────────────────────────────────── */

/* StartEvent — filled green circle */
.bpmn-start {
  fill: #43a047;
  stroke: #2e7d32;
  stroke-width: 2;
}

/* EndEvent — red thick-border circle */
.bpmn-end-outer {
  fill: #e53935;
  stroke: #b71c1c;
  stroke-width: 3;
}
.bpmn-end-inner {
  fill: #b71c1c;
}

/* IntermediateCatchEvent — double ring */
.bpmn-int-outer {
  fill: white;
  stroke: #1565c0;
  stroke-width: 1.5;
}
.bpmn-int-inner {
  fill: none;
  stroke: #1565c0;
  stroke-width: 1.5;
}

/* Tasks — white rounded rects */
.bpmn-task,
.bpmn-user-task,
.bpmn-service-task,
.bpmn-script-task,
.bpmn-call-activity {
  fill: white;
  stroke: #607d8b;
  stroke-width: 1.5;
}
.bpmn-user-task    { stroke: #1565c0; }
.bpmn-service-task { stroke: #558b2f; }
.bpmn-script-task  { stroke: #795548; }
/* CallActivity: thick border */
.bpmn-call-activity {
  stroke-width: 3;
  stroke: #37474f;
}

/* SubProcess */
.bpmn-subprocess {
  fill: #fafafa;
  stroke: #90a4ae;
  stroke-width: 1.5;
  stroke-dasharray: 6 3;
}
.bpmn-subprocess-marker {
  fill: white;
  stroke: #90a4ae;
  stroke-width: 1;
}
.bpmn-subprocess-plus {
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 11px;
  font-weight: 700;
  fill: #607d8b;
}

/* Gateways — rotated squares */
.bpmn-exclusive-gw {
  fill: #fff9c4;
  stroke: #f9a825;
  stroke-width: 1.5;
}
.bpmn-parallel-gw {
  fill: #e3f2fd;
  stroke: #1565c0;
  stroke-width: 1.5;
}
.bpmn-inclusive-gw {
  fill: #fce4ec;
  stroke: #e91e63;
  stroke-width: 1.5;
}
.bpmn-inclusive-ring {
  fill: none;
  stroke: #e91e63;
  stroke-width: 1.5;
}

/* Gateway centre symbol */
.bpmn-gw-sym {
  text-anchor: middle;
  font-size: 14px;
  font-weight: 700;
  fill: #37474f;
  pointer-events: none;
}

/* ── Sequence flows ─────────────────────────────────────────────────────────── */

.bpmn-flow {
  fill: none;
  stroke: #78909c;
  stroke-width: 1.5;
}

.bpmn-arrowhead {
  fill: #78909c;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */

.bpmn-label {
  text-anchor: middle;
  font-size: 11px;
  font-family: system-ui, sans-serif;
  fill: #37474f;
  pointer-events: none;
}

.bpmn-task-label {
  text-anchor: middle;
  font-size: 11px;
  font-family: system-ui, sans-serif;
  fill: #1a1a1a;
  pointer-events: none;
}

.bpmn-flow-label {
  text-anchor: middle;
  font-size: 10px;
  font-family: system-ui, sans-serif;
  fill: #546e7a;
  pointer-events: none;
}