/* Kyajet 2.26 — Bootstrap 5.3 migration layer
   Keeps the validated 2.24 application logic and the 2.25 visual language,
   while adapting Bootstrap 3-era markup/hooks to Bootstrap 5. */

/* Legacy application utility retained because Kyajet JS still toggles it. */
.hidden { display: none !important; }

/* Bootstrap 5 no longer ships Glyphicons. Keep the old semantic class names
   as a tiny local compatibility icon layer so application JS and history
   markup do not need an icon-library dependency. */
.glyphicon {
  display: inline-block;
  width: 1.05em;
  line-height: 1;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 700;
  vertical-align: -.04em;
}
.glyphicon::before { content: "•"; }
.glyphicon-plus-sign::before { content: "+"; }
.glyphicon-minus-sign::before { content: "−"; }
.glyphicon-arrow-right::before { content: "→"; }
.glyphicon-circle-arrow-up::before { content: "↑"; }
.glyphicon-exclamation-sign::before { content: "!"; }
.glyphicon-minus::before { content: "−"; }
.glyphicon-plus::before { content: "+"; }
.glyphicon-resize-horizontal::before { content: "↔"; }
.glyphicon-ban-circle::before { content: "×"; }
.glyphicon-stats::before { content: "▥"; }
.glyphicon-tasks::before { content: "≡"; }
.glyphicon-trash::before { content: "⌫"; }
.glyphicon-file::before { content: "▤"; }
.glyphicon-link::before { content: "↗"; }
.glyphicon-fire::before { content: "◆"; }

/* Bootstrap 5 image class equivalents for existing Kyajet sizing rules. */
.needleScheme img.img-fluid,
.jetScheme img.img-fluid,
#kyajet-logo,
#kyajetshare-logo {
  width: auto;
  max-width: min(100%, 477px);
  max-height: 118px;
  object-fit: contain;
}
#appstore-image.img-fluid {
  width: auto;
  max-width: 100%;
  max-height: 44px;
}

/* Tabs: Bootstrap 5 puts .active on the nav-link instead of the list item. */
.jumbotron ul.nav.nav-tabs {
  border-bottom: 1px solid var(--ky-border);
}
.nav-tabs .nav-item {
  flex: 1 1 0;
  margin: 0;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ky-text-soft);
  background: transparent;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--ky-primary-dark);
  border-color: var(--ky-border);
  background: #fff;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff;
  border-color: var(--ky-primary);
  background: var(--ky-primary);
  box-shadow: 0 7px 18px rgba(20, 111, 168, .22);
}

/* Form controls / input groups */
.form-control,
.form-select,
.input-group-text,
.btn {
  border-radius: var(--ky-radius-sm);
}
.form-control,
.form-select {
  min-height: 40px;
  border-color: var(--ky-border-strong);
  color: var(--ky-text);
  background-color: #fff;
  box-shadow: none;
  font-size: 15px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ky-primary);
  box-shadow: 0 0 0 3px rgba(20, 111, 168, .14);
}
.input-group-text {
  min-width: 46px;
  justify-content: center;
  border-color: var(--ky-border-strong);
  color: var(--ky-text-soft);
  background: var(--ky-surface-soft);
  font-weight: 700;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
  min-height: 40px;
}

/* Preserve old progress semantics that Bootstrap 5 removed. */
.progress { height: 14px; }
.progress-bar-success { background-color: var(--ky-success); }
.progress-bar-warning { background-color: var(--ky-warning); }

/* Compact buttons used around the jet/needle modifiers. */
.btn-sm {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 8px;
}

/* Feedback form validation icon after Bootstrap 3 has-feedback removal. */
.has-feedback .col-sm-9 { position: relative; }
.ky-field-error {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ky-danger);
  font-size: 13px;
  pointer-events: none;
}
textarea + .ky-field-error {
  top: 20px;
  margin-top: 0;
}

/* Shared setup/embed badges. */
.ky-setup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  white-space: normal;
  line-height: 1.35;
  font-size: 13px;
}

/* --- Setup / jetting workspace ---
   Replaces the Bootstrap-3 inline/input-group layout that caused controls to
   drift apart. The fieldset itself owns the layout; every control stays in a
   stable column with consistent height. */
#mixtureForm .setup-row-wrap {
  width: 100%;
}
#mixtureForm fieldset {
  display: grid;
  grid-template-columns: 112px 92px 132px 72px 80px 48px;
  justify-content: start;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 14px;
}
#mixtureForm .form-group.setup {
  display: block;
  min-width: 0;
  margin: 0;
}
#mixtureForm .form-group.setup > .input-group {
  width: 100%;
  flex-wrap: nowrap;
}
#mixtureForm .form-group.setup .form-control,
#mixtureForm .form-group.setup .form-select {
  width: 100%;
  min-width: 0;
  height: 40px;
}
#mixtureForm .setup-pilot .input-group-text {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
}
#mixtureForm .setup-action .input-group {
  justify-content: stretch;
}
#mixtureForm .setup-action .btn {
  width: 100%;
  min-width: 44px;
  height: 40px;
  padding: 7px;
}
#mixtureForm .input-group-text.color-row-1,
#mixtureForm .input-group-text.color-row-2,
#mixtureForm .input-group-text.color-row-3 {
  color: #fff;
  border: 0;
}
#mixtureForm .color-row-1 { background: #17a317; }
#mixtureForm .color-row-2 { background: #438fce; }
#mixtureForm .color-row-3 { background: #ed3942; }

/* Bootstrap 5 modal/input-group refinements. */
.modal-dialog { --bs-modal-width: 560px; }
.modal-header { align-items: center; }
#sharerModal .input-group > .btn { min-width: 96px; }

/* Bootstrap 5 dropped the old .form-inline and horizontal-form helpers.
   Kyajet's own layout remains intentionally explicit. */
#needleform,
#jetForm,
#jetdata,
#mixtureForm { width: 100%; }

@media (max-width: 900px) {
  #mixtureForm fieldset {
    grid-template-columns: 108px 86px 120px 68px 76px 46px;
    justify-content: start;
    gap: 7px;
    padding-inline: 11px;
  }
}

@media (max-width: 679px) {
  .needleScheme img.img-fluid,
  .jetScheme img.img-fluid,
  #kyajet-logo,
  #kyajetshare-logo { max-height: 82px; }
  #appstore-image.img-fluid { max-height: 36px; }

  .nav-tabs .nav-link,
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    font-size: 11px;
  }

  /* Two-column mobile grid; action button occupies its own compact cell. */
  #mixtureForm fieldset {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }
  #mixtureForm .setup-pilot,
  #mixtureForm .setup-main,
  #mixtureForm .setup-needle,
  #mixtureForm .setup-clip,
  #mixtureForm .setup-carb {
    width: 100%;
  }
  #mixtureForm .setup-needle { grid-column: 1 / -1; }
  #mixtureForm .setup-action {
    width: 48px;
    justify-self: start;
  }
  #mixtureForm .form-group.setup .form-control,
  #mixtureForm .form-group.setup .form-select,
  #mixtureForm .form-group.setup .input-group-text,
  #mixtureForm .setup-action .btn {
    min-height: 42px;
    height: 42px;
    font-size: 16px;
  }
  #mixtureForm .setup-pilot .input-group-text {
    display: flex;
    height: 42px;
  }

  .form-horizontal .row { margin-inline: 0; }
  .form-horizontal .col-form-label {
    padding-top: 0;
    padding-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link,
  .form-control,
  .form-select,
  .btn { transition: none !important; }
}

.ky-share-row { display: flex; justify-content: center; width: 100%; }