/*
 * Costs Calculator - Bootstrap 5 Styles
 * Migrated from jQuery UI to Bootstrap 5.3.8
 */

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

#costs {
  width: min-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

#lfcosts {
  width: min-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Settings panel loading overlay (shown while fetching universe 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;
}

/* ==========================================================================
   PANEL STYLING
   ========================================================================== */

.ui-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--bs-body-bg);
}

.c-ui-widget-content {
  padding: 10px;
  margin-bottom: 10px;
}

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

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

.ui-subheader {
  margin-bottom: 7px;
}

/* ==========================================================================
   INPUT SIZING
   ========================================================================== */

.level-input {
  width: 40px;
  text-align: center;
  margin-left: 2px;
  margin-right: 8px;
}

#max-planet-temp {
  width: 52px;
}

.fleet-input {
  width: 50px;
  text-align: center;
  margin-left: 2px;
  margin-right: 8px;
}

.res-input {
  width: 100px;
  text-align: center;
  margin-left: -10px;
  margin-right: -10px;
}

.input-2columns {
  width: 35px;
  text-align: center;
}

.input-3columns {
  width: 45px;
  text-align: center;
}

/* Wider inputs sized to fit ~6 characters: the LifeForms parameter tab fields
   and the research bonuses table value inputs */
#param-lifeforms .level-input,
#lf-research-bonuses-table .lf-research-cost-input,
#lf-research-bonuses-table .lf-research-time-input {
  width: 64px;
}

.input-in-table,
.lined .form-control-sm {
  height: 1.5rem;
  min-height: unset;
  padding-top: 0;
  padding-bottom: 0;
}

.ui-input-margin {
  margin-left: 2px;
  margin-right: 8px;
}

/* Checkbox and radio button spacing */
#technocrat,
#engineer,
#geologist,
#admiral,
#commander,
#research-bonus,
#full-numbers {
  margin-left: 0;
  margin-right: 5px;
}

/* ==========================================================================
   TAB STYLING
   ========================================================================== */

/* Main tabs */
#tab-0,
#tab-1,
#tab-2 {
  padding: 0;
}

/* Inner tabs */
#tab-0-1,
#tab-1-1,
#tab-0-2,
#tab-0-3,
#tab-0-4,
#tab-0-5,
#tab-0-6,
#tab-1-2,
#tab-1-3,
#tab-1-4 {
  padding: 0.3em 0;
}

/* Tab button adjustments */
.nav-tabs .nav-link {
  padding: 0.3em 1em;
}

/* ==========================================================================
   TABLE STYLING
   ========================================================================== */

.lined {
  border-collapse: collapse;
}

.lined th {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--bs-border-color);
  white-space: nowrap;
}

.lined td {
  border: 1px solid var(--bs-border-color);
  padding: 2px 8px;
  width: auto;
  white-space: nowrap;
}

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

/* Show/hide wrappers for race-specific controls (megalith, MRC) */
#megalith-level-wrap,
#mrc-level-wrap {
  display: flex;
}

/* Minimum width column */
td.min {
  width: 1%;
  white-space: nowrap;
}

/* ==========================================================================
   IRN DIALOG (MODAL)
   ========================================================================== */

/* 450px left the field row (see #irn-fields) 19px short of holding the Russian
   labels on one line. 480px clears it with room to spare and is still narrower
   than the planet table plus its scrollbar needs. */
#irn-calc .modal-dialog {
  max-width: 480px;
}

/* ==========================================================================
   LIFEFORM RESEARCH BONUSES TABLE (MODAL)
   ========================================================================== */

/* Shrink the dialog to just fit the table (no inner scrollbar) */
#lf-research-table .modal-dialog {
  width: fit-content;
  max-width: 95vw;
}

#lf-research-bonuses-table {
  margin: 0 auto;
}

/* Let the header row wrap so the value columns stay narrow */
#lf-research-bonuses-table th {
  white-space: normal;
  text-align: center;
  vertical-align: bottom;
}

#lf-research-bonuses-table th.lf-col-value {
  width: 6.5em;
}

/* The two labelled fields on one centred row. This was a four-cell `.table´ row,
   which cost width twice over: its 8px cell padding spent 64px on gaps, and a table
   distributes width by its own column measure rather than giving each label exactly
   the text it needs. Russian (`Уровень М.И.С.´ + `Количество планет´) came out 19px
   short and broke both labels onto two lines. A flex row spends only the gaps
   declared here, and `text-wrap: nowrap´ on the labels keeps a tight locale on one
   line. The row also drops the table's borders, which drew a rule across the dialog
   under a field.

   Wrapping is allowed on the outer row, not inside a pair: the longest locales
   (Spanish `Nivel de Red de Investigación´, Portuguese `Nivel da Rede de
   Pesquisas´) need ~530px and cannot share a row at any sane dialog width, so they
   drop the second pair to a second line with its label still intact. Everything up
   to Russian fits on the single row the layout is built for. */
#irn-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

.irn-field {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.irn-field label {
  text-wrap: nowrap;
}

/* Start-planet radios: make the selectable ones (planets with a lab level) stand
   out from the inactive ones. Default Bootstrap only dims disabled inputs to 0.5
   opacity, which is barely visible on the near-white radio fill. */
#irn-calc .form-check-input:not(:disabled) {
  border-color: var(--bs-primary);
  cursor: pointer;
}

#irn-calc .form-check-input:not(:disabled):hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

#irn-calc .form-check-input:disabled {
  opacity: 0.4;
  background-color: transparent;
}

/* Dark theme: make readonly planetsSpin field visually distinct from editable irn-level.
   Editable inputs are darker (more recessed), readonly inputs appear lighter/raised.
   !important overrides Bootstrap's transparent default. */
[data-bs-theme="dark"] #irn-calc .form-control:not([readonly]):not(:disabled) {
  background-color: rgb(15, 17, 21) !important;
}

.irn-calc-info {
  padding: 3px;
  text-align: center;
}

#lab-levels-div {
  height: 228px;
  overflow-y: auto;
  padding: 8px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

#open-llc-dialog {
  margin-right: 8px;
  vertical-align: text-top;
  cursor: pointer;
}

#research-lab-level {
  margin-right: 2px;
}

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

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.no-mp {
  margin: 0 !important;
  padding: 0 !important;
}

/* Allow tables to dictate the width of the entire container hierarchy */
#costs .tab-content,
#costs .tab-pane,
#lfcosts .tab-content,
#lfcosts .tab-pane {
  min-width: fit-content;
}

/* Border utilities */
.border-n {
  border-top: none !important;
}

.border-s {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.border-w {
  border-left: 1px solid var(--bs-border-color) !important;
}

.border-e {
  border-right: 1px solid var(--bs-border-color) !important;
}

/* ==========================================================================
   WARNING MESSAGES
   ========================================================================== */

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

#hint {
  margin-top: 20px;
  padding: 10px;
  background-color: var(--bs-info-bg-subtle);
  border-radius: var(--bs-border-radius);
}

/* ==========================================================================
   SPECIAL INPUTS
   ========================================================================== */

#research-cost-reduction,
#research-time-reduction,
#lf-terraformer-rdc {
  margin-right: -5px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 992px) {

  #costs,
  #lfcosts {
    max-width: 100%;
    padding: 0 10px;
  }

  .level-input,
  .fleet-input {
    width: 50px;
  }

  .lined td,
  .lined th {
    padding: 2px 4px;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  #costs {
    padding: 5px;
  }

  .level-input,
  .fleet-input {
    width: 45px;
  }

  .nav-tabs .nav-link {
    padding: 0.2em 0.6em;
    font-size: 0.9rem;
  }
}