/* The BMU Detail screen. */

/* The facts forms, condensed to the density of a definition list: the theme spaces form items for data
   entry (16px more above each row, 32px editors), which is twice what a read-only summary wants. */
/* One fact row's height, editor plus gap. Both columns are laid out in whole rows of it, so the facts under
   the map line up with the left column's: map and photo take six rows, the photo credit one. */
.gc-bmud-body {
  --gc-bmud-row: 2.4rem;
}

/* The theme's own selector, outranked by the wrapper: it gives every row after the first 16px on top. Each
   row is then exactly one --gc-bmud-row. */
.gc-bmud-facts .dx-layout-manager .dx-field-item,
.gc-bmud-facts .dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
  box-sizing: border-box;
  height: var(--gc-bmud-row);
  padding-top: 0;
  padding-bottom: 0.4rem;
}

.gc-bmud-facts .dx-field-item-label-text {
  font-weight: 600;
}

/* One label width for both forms. The form sizes labels from the plain text and sets that width inline, so
   bold "Offer Volume Accepted" would overrun its box. */
.gc-bmud-facts .dx-field-item-label-location-left {
  padding-right: 0.75rem;
}

.gc-bmud-facts .dx-field-item-label-content {
  width: 10.5rem !important;
}

.gc-bmud-facts .dx-texteditor-input {
  min-height: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* A status item: blob, then text, as tall as the editors beside it. */
.gc-bmud-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.9rem;
  padding: 0 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

/* The status blobs. */
.gc-blob {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.gc-blob-green { background-color: #1f9d55; }
.gc-blob-amber { background-color: #f08c00; }
.gc-blob-red { background-color: #d62828; }
.gc-blob-none { background-color: #adb5bd; }

/* Map and photo side by side over six fact rows (less the gap a row leaves below itself), then the credit
   over one. */
.gc-bmud-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: calc(6 * var(--gc-bmud-row)) var(--gc-bmud-row);
  column-gap: 0.5rem;
}

.gc-bmud-media > .gc-bmud-attribution {
  grid-column: 1 / -1;
}

.gc-bmud-map,
.gc-bmud-photo,
.gc-bmud-placeholder {
  width: 100%;
  height: calc(6 * var(--gc-bmud-row) - 0.4rem);
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.gc-bmud-photo {
  object-fit: cover;
}

.gc-bmud-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  background-color: #f8f9fa;
}

.gc-bmud-attribution {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: calc(var(--gc-bmud-row) - 0.4rem);
}

#gcBmudChart {
  height: 28rem;
}

/* The unit picker's rows: ids and fuel, then name and lead party, each kept to one line. */
.gc-bmud-option {
  line-height: 1.3;
}

.gc-bmud-option-ids {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.gc-bmud-option-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The photo credit: dashed underline, as the reports mark text with a tooltip. */
.gc-bmud-credit {
  color: inherit;
  text-decoration: underline dashed;
  text-underline-offset: 2px;
}

/* The legend toggles series on and off (bmud.legendClick), so it looks clickable. */
#gcBmudChart .dxc-legend .dxc-item {
  cursor: pointer;
}

/* The run-up/run-down chart's slider and its three readouts, as the specification's example lays them out. */
.gc-bmud-rate-slider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

.gc-bmud-rate-slider > div {
  flex: 1 1 auto;
}

.gc-bmud-readout {
  font-size: 1.6rem;
  font-weight: 600;
}

#gcBmudRateChart {
  height: 26rem;
}

/* Settlement Run under Settlement Date: the BM Unit picker takes what is left of the first row, and the date and run
   share a second column, their labels and boxes in its two tracks (subgrid), so both line up down it. Below md, the
   filters wrap as every header's do (site.css). */
@media (min-width: 768px) {
    #gcBmudControls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content max-content;
        /* The label's usual distance from its box, which the subgrid below takes between its two tracks. */
        column-gap: 0.5rem;
    }

    /* Clear of the date's label by the 1.5rem filters keep between them elsewhere. */
    #gcBmudControls > .gc-page-filter-wide {
        grid-column: 1;
        grid-row: 1;
        margin-right: 1rem;
    }

    #gcBmudControls > .gc-page-filter:not(.gc-page-filter-wide) {
        grid-column: 2 / 4;
        grid-template-columns: subgrid;
    }

    #gcBmudControls .dx-selectbox#gcBmudRun {
        width: 11rem;
    }
}