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

#queue {
  /* max-content (not min-content): queue's src/dst panels are laid out
     side-by-side via flex-wrap, and min-content would collapse a wrapping
     flex container to its widest single item, forcing panels to stack. */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: auto;
}

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

/* The settings panel's flex-wrap row has a large *unwrapped* intrinsic width
   (sum of all its items), which would otherwise inflate #queue's max-content
   size beyond what the tables need. width:0 removes its contribution to that
   calculation; min-width then stretches it back to the resolved, table-driven
   width so its own items still wrap normally. The panel also carries the
   Bootstrap m-1 utility (0.25rem margin per side); since margin sits outside
   the width, min-width:100% would add that 0.5rem back on top of the parent's
   width and overflow it — subtract it here so the panel's outer box (content
   + margin) exactly matches the parent's width. */
#general-settings-panel {
  width: 0;
  min-width: calc(100% - 0.5rem);
  box-sizing: border-box;
}

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

/* Header row pairing a subheader with a button (e.g. the queue clear button):
   the subheader's own margin-bottom !important would otherwise inflate the
   flex row's height and throw off align-items: center. */
.subheader-row .subheader {
  margin-bottom: 0 !important;
}

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

/* Inputs */
.level-input {
  width: 50px;
  text-align: center;
  margin-left: 2px;
  margin-right: 6px;
}

.total-fld-input {
  width: 70px;
}

.startdate-input {
  width: 160px;
  text-align: center;
}

/* Bootstrap's .is-invalid reserves padding-right for a warning icon, sized for
   left-aligned text. This field is centred, so that reserved space shifts the
   centred value left of where it'd otherwise sit, and the trailing part of the
   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, so
   drop the icon and restore the plain form-control-sm padding. */
.startdate-input.is-invalid {
  background-image: none;
  padding-right: 0.5rem;
}

#finish-moment-2,
#finish-moment-3 {
  display: inline-block;
  text-align: 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 finish 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 <span>, which can carry no such
   attribute, matches a switched-off input exactly. Identical to the rule in
   flight_bs.css — keep the two in step. */
.ui-state-disabled {
  background-color: var(--bs-secondary-bg);
  cursor: default;
}

/* Table styling (shared with costs/lfcosts/trade) */
.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;
  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;
}

/* Border helpers used by totals/transports rows */
.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; }

/* Action buttons in queue rows: keep them compact */
.queue-row-up,
.queue-row-down,
.queue-row-del {
  padding: 0.1rem 0.35rem;
}

.button-build,
.button-destroy {
  padding: 0.1rem 0.4rem;
  margin-left: 2px;
}

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

/* Dark theme: dim the bright red outlines */
[data-bs-theme="dark"] .btn-outline-danger.queue-row-del {
  --bs-btn-color: #b05050;
  --bs-btn-border-color: #b05050;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7a3030;
  --bs-btn-hover-border-color: #7a3030;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a3030;
  --bs-btn-active-border-color: #7a3030;
}

[data-bs-theme="dark"] .is-invalid {
  border-color: #b05050 !important;
  box-shadow: none !important;
}

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

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

  .level-input { width: 45px; }
  .startdate-input { width: 140px; }
}