/*
 * Moon Calculator - Bootstrap 5 Styles
 * Migrated from jQuery UI to Bootstrap 5.3.8
 * Shared pieces (.main-header, .subheader, warning banner, tooltip skin)
 * follow the same conventions as the graviton / terraformer calculators.
 */

#moon {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: auto;
}

/* The unit tables live inside the creation panel and are the widest content on
   the page, so the panel has to keep contributing to #moon's max-content width
   (the usual width:0 / min-width:100% containment trick would clip them). */
#destroy-settings-panel,
#create-settings-panel {
  box-sizing: border-box;
}

/* Stack every parameter tab in the same grid cell so the widest and tallest
   one sizes the panel once and for all. Bootstrap hides inactive panes with
   display:none, which would drop them out of that intrinsic sizing and make
   the whole (max-content, centred) calculator jump on every tab switch, so
   they are hidden with visibility instead. */
#paramTabContent {
  display: grid;
}

#paramTabContent>.tab-pane {
  display: block;
  grid-area: 1 / 1;
}

/* Collapsed to zero height so only the active pane drives the panel height,
   while the grid column still sizes to the widest pane. */
#paramTabContent>.tab-pane:not(.active) {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.main-header {
  width: auto;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px;
  margin: 2px;
}

.subheader {
  text-align: center;
  font-weight: 600;
  margin: 0 0 6px 0 !important;
  padding: 2px 6px;
}

#reset-ds,
#reset-cr,
#reset-ph {
  cursor: pointer;
  z-index: 10;
  width: 30px;
  height: 30px;
  border: 1px solid #dc3545;
  border-radius: 8px;
  margin-right: 0.2rem;
}

/* Layout tables: tighten the default cell padding and align vertically. */
#moon table td {
  padding: 2px 4px;
  vertical-align: middle;
}

/* The unit tables hold three name/max/count triplets per row. Separate the
   triplets and right-align the "max" column so the numbers hug their input. */
.unit-table td:nth-child(3n + 1) {
  padding-left: 12px;
}

.unit-table td:nth-child(3n + 2) {
  text-align: right;
  padding-right: 0;
}

/* Inputs */
.level-input {
  width: 60px;
  text-align: center;
}

/* The moon diameter carries a `km´ addon, so it needs the input-group escape.
   common_bs.css already supplies one for .level-input, but at 3.5rem - repeating
   it here (same specificity, loaded later) keeps the field at the 60px of the
   plain level inputs it sits next to. */
.input-group>.form-control.level-input {
  flex: 0 0 auto;
  width: 60px;
}

.count-input {
  width: 80px;
  text-align: center;
}

/* Bootstrap's input-group overrides width utilities that are not id-scoped, so
   the percentage field inside it gets its own rule. The `flex´ reset matters as
   much as the width: Bootstrap forces `.input-group > .form-control
   { flex: 1 1 auto; width: 1% }`, and leaving the grow/shrink in place lets the
   field stretch or collapse away from its fixed 60px. */
#rc-capacity-increase,
#phalanx-range-bonus,
#discoverer-bonus {
  flex: 0 0 auto;
  width: 60px;
  text-align: center;
}

/* Number of units that would reach the maximum moon creation chance. */
.max-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* A label that carries a real count is clickable: it fills the adjacent input.
   The renderer sets data-max-count only for units that can contribute; a dash
   (no dataset) stays non-interactive. */
.max-label[data-max-count] {
  cursor: pointer;
}

.max-label[data-max-count]:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* The computed readouts are rendered as <div class="form-control">, which can
   carry neither `readonly´ nor `disabled´, so they wear the `ui-state-disabled´
   marker class instead — the same marker the flight and trade calculators use.
   The fill is the one :disabled paints, so a computed readout and a switched-off
   input look alike, while the text stays fully readable. */
.ui-state-disabled {
  background-color: var(--bs-secondary-bg);
  cursor: default;
}

/* Read-only result fields (rendered as form-control divs) */
.chance-show {
  width: 60px;
  text-align: center;
}

/* Every chance readout carries its `%´ as an input-group addon, the same way the
   editable percentage field above does, so it needs the same escape rule:
   Bootstrap's `.input-group > .form-control { flex: 1 1 auto; width: 1% }`
   outranks the plain class width and would stretch the readout. */
.input-group>.form-control.chance-show {
  flex: 0 0 auto;
  width: 60px;
}

.resource-show {
  width: 110px;
  text-align: center;
}

/* The "8.366 – 8.944" diameter range needs room for two grouped numbers. It
   carries its `km´ as an input-group addon, so it needs the same flex/width
   escape as the chance readouts above. */
.size-show {
  width: 140px;
  text-align: center;
}

.input-group>.form-control.size-show {
  flex: 0 0 auto;
  width: 140px;
}

/* Phalanx readouts that hold a single small integer: a range, a distance, a
   count of systems and a level all stay well inside three digits. The range and
   the distance carry a `systems´ addon, hence the same input-group escape the
   readouts above need. */
.systems-show {
  width: 60px;
  text-align: center;
}

.input-group>.form-control.systems-show {
  flex: 0 0 auto;
  width: 60px;
}

/* The covered systems, one segment per contiguous run. A circular galaxy wraps
   into the widest case there is - "480 – 499, 1 – 29". */
.segments-show {
  width: 190px;
  text-align: center;
}

/* One badge per equally likely diameter roll. These are a supporting readout,
   not a call to action, so they are outlined rather than filled - Bootstrap's
   solid `text-bg-secondary´ shouted over the results block. All three custom
   properties flip with the theme. */
.size-badge {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--bs-secondary-color);
  background-color: transparent;
  border: 1px solid var(--bs-border-color);
}

/* Warning banner (shared look with the graviton / queue calculators) */
#warning {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 20px;
  text-align: center;
  background-color: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

#warning.visible {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Responsive */
@media (max-width: 992px) {
  #moon {
    max-width: 100%;
    padding: 0 10px;
  }
}