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

/* Reticle-style callout markers — a hollow ring + center pinpoint so the
   instrument underneath (the thing you're supposed to be looking at,
   including its label text) stays fully visible instead of being covered
   by a filled disc. The dark+glow box-shadow pair keeps the ring readable
   against both bright gauge faces and dark panel backgrounds. The step
   number lives in a small badge (.callout-badge) offset outside the ring
   so it never sits on top of the instrument's own wording. All three
   pieces (ring, center dot, badge) share one color via --callout-color so
   state changes only need to update a single variable. */
.callout {
  --callout-color: #ff9800;
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--callout-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* center the ring on the coordinate point */
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 10;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.75),
    0 0 6px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Exact-point marker at the ring's center — small enough to avoid covering
   the text underneath, but precise enough to still mark the spot. */
.callout::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--callout-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%);
}

.callout-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--callout-color);
  border: 1.5px solid rgba(0, 0, 0, 0.75);
  color: #000;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.callout.active {
  --callout-color: #1e78ff;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.75),
    0 0 0 4px rgba(30, 120, 255, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.6);
}

.callout.completed {
  --callout-color: #28a745;
}

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