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

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

/* --- Fleet / parameter tables: tighten the default table cell padding.
       The .lined result tables are excluded: they set their own roomier
       padding below and the #flight id would otherwise win over it. --- */
#flight table:not(.lined) td,
#flight table:not(.lined) th {
  padding: 2px 4px;
  vertical-align: middle;
}

/* The two-column layout table holding the flight times and the arrival
   calculator beside them. It is not a parameter table, so the centring above
   must not apply: the general class shows twice as many speed rows, and the
   arrival panel would then drift down along with the taller left column. */
#flight table.flight-layout > tbody > tr > td {
  vertical-align: top;
}

/* ==========================================================================
   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. */
.flight-layout > tbody > tr > td.arrival-cell {
  width: 1px;
}

.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;
}

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

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