/* ============================================================================
   Flight calculator — Bootstrap 5 skin
   Common pieces (.main-header, #warning, #hint, .ui-input-margin, .no-mp) come
   from common_bs.css; this file carries the flight-specific field sizes, small
   widgets and the result-table skin (.lined, .odd/.even), which follows the
   costs / queue / expeditions calculators.
   ========================================================================== */

#flight {
  margin: auto;
  max-width: 1000px;
}

/* Bootstrap's .accordion-item forces color: var(--bs-accordion-color)
   (#dee2e6 in dark mode), which reads as white against the calculator's
   cyan default text. Inherit so panel content matches the rest of the page. */
#params-accordion {
  --bs-accordion-color: inherit;
  --bs-accordion-active-color: inherit;
}

/* Reset button in the title header: the common_bs.css rule is the pre-Bootstrap
   floated icon, so restate the square outlined skin used by every other
   BS5 calculator. */
#reset {
  cursor: pointer;
  z-index: 10;
  width: 30px;
  height: 30px;
  border: 1px solid #dc3545;
  border-radius: 8px;
  margin-right: 0.2rem;
}

/* --- Narrow numeric fields keep their compact footprint under form-control --- */
.level-input        { width: 44px;  text-align: center; }
.level-input-small  { width: 36px;  text-align: center; }
.coord-input        { width: 40px;  text-align: center; }
.coord-input-small  { width: 32px;  text-align: center; }
.count-input        { width: 64px;  text-align: center; }
.input-7columns     { width: 60px;  text-align: center; }
/* 160px, as in the queue calculator: at 150px the content box is 132px and the
   `dd.mm.yyyy hh:mm:ss´ placeholder needs ~136px, so its last character was
   clipped on every empty date field. */
.startdate-input    { width: 160px; text-align: center; }
.flight-time-input  { width: 96px;  text-align: center; }
.tolerance-time-input { width: 64px; text-align: center; }
/* `.input-group > .form-control` outweighs the plain width classes above and
   stretches the field to 177px, so the two fields that carry a percent suffix
   need id-scoped rules of their own. */
#lf-mechan-general-enh,
#lf-rocktal-collector-enh { width: 64px; flex: 0 0 auto; }

/* Bootstrap's .is-invalid reserves padding-right for a warning icon, sized for
   left-aligned text. These fields are centred, so that reserved space shifts
   the centred value left of where it'd otherwise sit — on the narrow ones the
   trailing part of a date/time string (typically the seconds) ends up sitting
   right under the icon instead of clear of it. The red border already signals
   the error and the title attribute carries the format hint, so the icon adds
   nothing here; drop it and restore the plain form-control-sm padding. */
.startdate-input.is-invalid,
.flight-time-input.is-invalid,
.tolerance-time-input.is-invalid {
  background-image: none;
  padding-right: 0.5rem;
}

.speed-label {
  font-size: 0.8em;
  margin: 0 8px;
  white-space: nowrap;
}

/* Ship count grid: was a <table class="mx-auto">, three ships per row and one
   cell per part, so nine columns each sized to the widest name / speed / field
   in it. The grid has to keep those nine tracks rather than three ship-sized
   ones — with one track per ship the three parts only line up inside their own
   cell and the columns of names, speeds and inputs no longer share an edge.

   `auto` tracks reproduce the table's automatic column widths, and they only
   stretch to fill the row while justify-content is normal/stretch, so centring
   the tracks is also what keeps them shrink-to-fit (the old `mx-auto`). The
   gaps are the removed `td { padding: 2px 4px }` — 4px on each side of the
   boundary horizontally, 2px vertically — on top of the margins .speed-label
   and .ui-input-margin still carry. */
.ships-grid {
  grid-template-columns: repeat(9, auto);
  justify-content: center;
  justify-items: start;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

/* The two-column layout holding the flight times and the arrival calculator
   beside them (formerly a <table>; a `<div class="flight-layout d-flex">`
   now, SonarQube Web:S5256/S5257 — the `<table>` carried no `<th>` and was
   never tabular data, just a layout split). */
.flight-layout {
  align-items: flex-start;
}
.flight-layout > .flight-layout-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   RESULT TABLES (.lined) — highlighted header row and rules between cells.
   Shared look with the costs / queue / expeditions calculators.
   ========================================================================== */

.lined {
  border-collapse: collapse;
}

.lined th {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  padding: 3px 8px;
  border: 1px solid var(--bs-border-color);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.lined td {
  padding: 2px 8px;
  vertical-align: middle;
  border: 1px solid var(--bs-border-color);
}

/* Bootstrap scopes --bs-table-striped-bg to .table, so it resolves to nothing
   here; mix the stripe off the body colour instead, which flips with the theme. */
.lined tr.odd {
  background-color: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
}

.lined tr.even {
  background-color: transparent;
}

/* Highlight the hovered row: the tables are wide, so it helps to keep the eye
   on one speed step while reading across the columns. The stripe sits on the
   <tr>, hence the highlight goes on the cells to win over it. */
.lined tr:hover td {
  background-color: var(--bs-tertiary-bg);
}

/* Compact controls placed inside .lined tables (the LF ship bonus inputs) */
.lined .form-control-sm {
  height: 1.5rem;
  min-height: unset;
  padding-top: 0;
  padding-bottom: 0;
}

/* Save-point results are short numbers/coordinates: centre them under the
   centred headers instead of leaving them ragged against the new rules. */
#savepoints-galaxies td,
#savepoints-systems td,
#savepoints-planets td {
  text-align: center;
}

/* Four columns — the last one a full return date — have to fit in a third of
   the 1000px panel, so these tables get a smaller face and tighter cells than
   the other .lined tables. The headers are the abbreviated locale strings for
   the same reason (see flight.tpl). */
#savepoints-galaxies,
#savepoints-systems,
#savepoints-planets {
  font-size: 0.85em;
}

#savepoints-galaxies th,
#savepoints-systems th,
#savepoints-planets th,
#savepoints-galaxies td,
#savepoints-systems td,
#savepoints-planets td {
  padding: 2px 3px;
}

/* The return moment is the widest cell, so it is also the one that gives way:
   a seven-digit fuel bill or a wordy locale pushes the date onto its own line
   instead of pushing the whole table out of the panel. */
.savepoint-return {
  white-space: normal;
}

/* The `departure´ / `flight´ headings of the arrival calculator each carry a
   trailing icon button. A plain flex row would centre the title against the
   space left of that button, so the three headings would not line up with each
   other or with the `arrival´ one below. A three-column grid with equal outer
   tracks centres the title on the panel while the button keeps setting the row
   height. */
.flight-panel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Now that the panel is only as wide as it needs to be, the wordier locales
     would otherwise run the heading straight into the button. The gap applies
     to both sides, so the heading stays centred. */
  column-gap: 0.5rem;
}

.flight-panel-head .flight-panel-title {
  grid-column: 2;
  text-align: center;
}

.flight-panel-head .btn {
  grid-column: 3;
  justify-self: end;
}

/* The panel hugs its content rather than sitting in a fixed 220px cell: the
   spare width collected to the left of the centred heading, since the matching
   track on the right is the one holding the button. max-content keeps the
   headings off two lines, and squeezing the cell hands the slack back to the
   results table. flex: 0 0 auto is the flex equivalent of the old table
   cell's `width: 1px` shrink-to-fit trick. */
.flight-layout > .arrival-cell {
  flex: 0 0 auto;
}

.arrival-panel {
  width: max-content;
}

/* The regular and the recall pane hold different controls, and the panel is
   sized to its content — left alone, it would jump width on every tab switch
   and hand the slack back and forth with the results table. Stacking both panes
   in one grid cell lets the wider one size the panel for good; the inactive one
   keeps its box and is swapped out by visibility rather than display. */
.arrival-panel .tab-content {
  display: grid;
}

.arrival-panel .tab-content > .tab-pane {
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;
}

.arrival-panel .tab-content > .tab-pane.active {
  visibility: visible;
}

/* The rest of the arrival panel is centred as one column: the date fields are
   narrower than the panel, so they need the auto margins, and the leg rows are
   flex. Done here rather than with utility classes because the leg row markup
   also lives in flight-orchestration.js, which builds added rows.
   Only the two head buttons stay pinned right, via the grid above. */
.arrival-panel .tab-pane > .form-control {
  margin-inline: auto;
}

/* Each recall mode is a radio with the field it drives directly beneath it, so
   the two stay visibly paired once they sit one above the other. */
.recall-modes > div + div {
  margin-top: 0.25rem;
}

/* All four boxes — the two radios and the two fields — are of four different
   widths, and each row is centred on the panel rather than on its own mode, so
   the block reads as one stack down the middle. The rows stretch to the panel
   for that; the radios ride along on `text-center´, the fields are blocks of a
   fixed width and need the auto margins. The rule above cannot reach them: it
   only matches a direct child of the pane, and these sit a level deeper. */
.recall-modes .form-control {
  margin-inline: auto;
}

.arrival-panel .flight-leg {
  justify-content: center;
}

/* Read-only fields carry `ui-state-disabled´ — the marker the trade calculator
   uses — but here it wears the Bootstrap disabled-field skin instead of the
   legacy 50% fade: the arrival moment is the answer the panel exists to give,
   so it has to stay fully readable while still reading as not-editable. This is
   the same fill :disabled paints, so the computed <div>, which can carry no such
   attribute, ends up matching the switched-off speed override exactly. */
.ui-state-disabled {
  background-color: var(--bs-secondary-bg);
  cursor: default;
}

/* The universe name row and the SR_KEY row used to be two rows of one
   <table class="mx-auto">, so the table shrank to the width of its widest
   row and the SR_KEY input's flex-grow-1 only ever filled the leftover space
   inside that row. Converting the table to plain flex rows (see the flight
   refactor above) dropped that shrink-to-fit width, and the SR_KEY input
   grew to fill the full accordion body instead. width: max-content on this
   wrapper restores the old bound. */
.universe-panel-rows {
  width: max-content;
  max-width: 100%;
}

/* Bootstrap's .form-control sets width: 100%, and an auto flex-basis takes
   that as the item's flex-basis. On the SR_KEY row's flex-wrap line, the
   wrap test runs against that 100%-of-the-row hypothetical size before
   flex-grow/shrink ever get to redistribute space, so the input alone
   "doesn't fit" and the row splits into three lines: the label, the input,
   then the icon and buttons. flex-basis: 0 discards the width:100% for that
   test and lets flex-grow-1 size the input purely from the space its
   siblings leave — min-width: 0 keeps it free to shrink below its own
   content size too, so all five children share the one line as before. */
#api-code {
  flex-basis: 0;
  min-width: 0;
}

/* --- Small round icon buttons for the universe / fleet / api controls --- */
.uni-control-btn {
  width: 30px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- The take-to-calc arrow in each flight-times row --- */
.button-taketocalc {
  cursor: pointer;
  width: 26px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Flight leg sign / remove buttons in the arrival calculator --- */
.button-toggle,
.button-remove {
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hidden flight-times rows (in-between speed steps for non-general classes) */
#flight-times tr[hidden] {
  display: none;
}

/* Empty state: the twenty speed rows step aside for the row that says why the
   table has nothing to show. Hiding them here rather than through each row's
   `hidden´ attribute keeps this independent of the per-class striping, which
   owns that attribute and only ever sets it on the even rows. */
#flight-times.is-empty tr.speed-row {
  display: none;
}

/* The empty-systems override sits inline with the distance readout */
#empty-systems-count-spin {
  width: 64px;
  display: inline-block;
}

/* Panel loading overlay (shown while fetching server data) */
.panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

.panel-overlay-content {
  color: #fff;
  font-weight: bold;
}

.loading {
  position: relative;
}

/* --- Warning banner: a themed highlight box (shown via fadeIn from the renderer) --- */
#warning {
  background-color: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
  border-radius: var(--bs-border-radius);
  padding: 6px 12px;
}

/* --- Hint box: a quiet info panel under the tables --- */
#hint {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}