/* Bootstrap's `.text-muted` (and other utilities built on the "secondary"
   color) default to a near-black color meant for light backgrounds — this
   app never sets `data-bs-theme="dark"`, it only applies `.bg-dark`
   manually, so anywhere `.text-muted` sits inside `.bg-dark` it renders
   almost invisibly. Override the variable it reads from, scoped to
   `.bg-dark`, so it resolves to a readable light gray instead. */
.bg-dark {
  --bs-secondary-color: rgba(173, 181, 189, 0.75);
  --bs-secondary-color-rgb: 173, 181, 189;
}

/* Cockpit image wrapper — position: relative so % callouts work.
   `aspect-ratio` is set inline via JS (see flow_viewer.js / flow_test.js)
   from the image's real naturalWidth/naturalHeight once it loads. That gives
   this box a size the browser can solve deterministically against max-width/
   max-height (both plain percentages of the column, which has a definite
   height) instead of `max-height: 100%` on the <img> itself, which can never
   resolve — CSS percentage heights need a containing block with a *specified*
   (non-auto) height, and this wrapper's height is otherwise content-derived.
   Without this, the <img> silently ignored its height cap and rendered
   taller than the wrapper, which desynced the wrapper's box (used for the
   callout %s) from the image's actual visible box. */
.cockpit-wrapper {
  position: relative;
  line-height: 0; /* removes gap below inline img */
  max-width: 100%;
  max-height: 100%;
  transform: scale(1);
  transform-origin: 50% 50%;
  /* No CSS transition here — panning/zooming between steps is driven frame-
     by-frame from JS (see animateTo() in flow_viewer.js / flow_test.js) so
     it can follow a curved path through a step's optional bulge point,
     which a plain CSS transition of transform-origin can't do (it only
     interpolates in a straight line). */
}

/* Dashed line tracing the flow's step order, bulging through each step's
   curve point when it has one. viewBox 0-100 matches the callout %
   coordinate system exactly, so the path always lines up with the dots. */
.flow-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.flow-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.5;
  stroke-dasharray: 1.6 1.2;
  stroke-linecap: round;
}

.cockpit-img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

/* Flow editor: bound the image within the card without cropping it */
#pickerWrapper {
  width: auto;
  max-width: 100%;
  max-height: 60vh;
}

#pickerWrapper .cockpit-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
}

/* Circular callout dots — translucent fill so the instrument underneath
   (the thing you're supposed to be looking at) stays visible; the border
   and text-shadow keep the marker itself easy to find. */
.callout {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #000;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* center the circle on the coordinate point */
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.callout:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.callout.active {
  background: rgba(30, 120, 255, 0.4);
  border-color: #fff;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 4px rgba(30, 120, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.8);
}

.callout.completed {
  background: rgba(40, 167, 69, 0.4);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.0);
}

/* Picker mode: crosshair cursor on the image */
.cockpit-wrapper.pick-mode {
  cursor: crosshair;
}

/* Picker dot (admin step placement) */
.picker-dot {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #000;
  z-index: 10;
  pointer-events: none;
}

.picker-dot.placed {
  background: rgba(255, 165, 0, 0.85);
}

.picker-dot.active-target {
  background: rgba(255, 60, 60, 0.9);
  color: #fff;
  animation: pulse 1s infinite;
}

/* Curve (bulge) point marker — smaller and dashed so it reads as a guide
   point rather than an actual instrument location. */
.picker-dot.curve-marker {
  width: 20px;
  height: 20px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  background: rgba(99, 179, 237, 0.55);
  font-size: 10px;
}

.picker-dot.curve-marker.active-target {
  background: rgba(255, 60, 60, 0.85);
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 60, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0); }
}

/* Step rows in admin form */
.step-row.pick-active {
  border-color: rgba(255, 60, 60, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(255, 60, 60, 0.4);
}

.step-row.dragging {
  opacity: 0.4;
}

.drag-handle {
  cursor: grab;
  color: var(--bs-secondary-color, #adb5bd);
  font-size: 1.1rem;
  line-height: 1;
}

.drag-handle:active {
  cursor: grabbing;
}