/* Kyajet 2.26.4 — chart label position, jet-dial alignment, and rounded field consistency */

/* Main chart labels: explicit desktop positioning as requested. */
#jetGraph.ky-chart .graphrich,
#mixtureGraph.ky-chart .graphrich,
#jetGraph.ky-chart .graphlean,
#mixtureGraph.ky-chart .graphlean {
  left: 490px;
  transform: translate(-50%, -50%);
  text-align: center;
}

#jetGraph.ky-chart .graphrich,
#mixtureGraph.ky-chart .graphrich {
  top: 90px;
}

#jetGraph.ky-chart .graphlean,
#mixtureGraph.ky-chart .graphlean {
  top: 165px;
}

/* Jet input fields: consistent fully rounded corners. */
#jetForm .input-group {
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: center;
}

#jetForm .form-group {
  margin: 0;
}

#jetForm .form-group > .input-group {
  gap: 0;
}

#jetForm .input-group-text,
#jetForm .form-control,
#jetForm .form-select {
  border-radius: var(--ky-radius-sm) !important;
}

#jetForm .input-group-text {
  min-width: 48px;
}

/* Jet dials: keep the jQuery-knob value centered inside the dial instead of drifting below. */
.ky-dial-card {
  grid-template-rows: 128px auto auto auto;
}

.ky-dial-visual {
  overflow: visible;
}

.ky-dial-visual input.knob {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.ky-dial-controls {
  margin: 2px 0 10px;
}

/* The dial cards themselves keep the same rounded language as the rest of the UI. */
.ky-dial-card,
.ky-dial-controls .btn {
  border-radius: var(--ky-radius-sm);
}

@media (max-width: 900px) {
  #jetGraph.ky-chart .graphrich,
  #mixtureGraph.ky-chart .graphrich,
  #jetGraph.ky-chart .graphlean,
  #mixtureGraph.ky-chart .graphlean {
    left: 50%;
  }
}

@media (max-width: 679px) {
  #jetForm .input-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  #jetGraph.ky-chart .graphrich,
  #mixtureGraph.ky-chart .graphrich {
    top: 96px;
  }

  #jetGraph.ky-chart .graphlean,
  #mixtureGraph.ky-chart .graphlean {
    top: 168px;
  }
}