/* Position Library Quick Add modal — DUID picker styles.
   (Mode selector cards converged onto the global selector-tile component, 3C.3.) */

/* ── Position name headline ───────────────────────────────────────────
   The name is the first field for every position type; give it a headline
   weight and a divider so it reads as the form's title, not just another
   input (it was easy to miss). The larger input is form-control-lg in markup. */
.qa-name-headline {
  border-bottom: 1px solid var(--varial-border, #E7E0CC);
  padding-bottom: 1rem;
}

.qa-name-headline-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  margin-bottom: 0.4rem;
}

[data-bs-theme="dark"] .qa-name-headline {
  border-bottom-color: var(--varial-border, #3a4150);
}

/* ── Form-as-table layout (#3900) ─────────────────────────────────────
   The create form is one grouped, editable table. Each position type is the
   same table; only the row groups differ. A group is a bordered card with an
   uppercase header; a row is `label │ value │ source-badge`, and every row
   carries a one-line descriptor under its title so nothing is unexplained.
   The value cells host the existing controls (segmented btn-check groups,
   inputs, selects) untouched — this is a re-skin, so all ids/names are kept. */
/* Widen the create modal beyond modal-xl so the full-width descriptor line fits
   on one line and the table has room to breathe. */
.qa-modal-wide {
  max-width: min(1240px, 92vw);
}

/* Scrollable modal + a <form> wrapping body+footer: Bootstrap's scrollable flex-chain
   expects .modal-body / .modal-footer as direct children of .modal-content, but this
   modal nests them inside a <form>, so the form (not the body) absorbs the height and
   the footer gets clipped off-screen. Re-thread the chain through the form: it fills the
   remaining height as a flex column, the body scrolls, the footer stays pinned. */
#quickAddModal .modal-dialog-scrollable .modal-content {
  overflow: hidden;
}

#quickAddModal .modal-dialog-scrollable > .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#quickAddModal .modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.qa-group {
  margin-top: 0.7rem;
}

.qa-group:first-child {
  margin-top: 0;
}

/* The source-gated wrapper's first group (Capacity) is a :first-child too, so the
   rule above zeroes it — restore the gap below the Location group that precedes it. */
#qa-post-source > .qa-group:first-child {
  margin-top: 0.7rem;
}

.qa-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--varial-primary, #1b3aa0);
  padding: 0.4rem 0.75rem;
  background: var(--varial-primary-soft, #eef2ff);
  border: 1px solid var(--varial-border, #E7E0CC);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
}

.qa-group-head i {
  color: var(--varial-primary, #2563EB);
}

.qa-group-body {
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Settings-list row: the label + its descriptor sit on the left; the control is
   right-aligned on the right. No source badge. Controls share a fixed width so
   they line up in a clean right-hand column down the table. */
.qa-trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  column-gap: 2rem;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border-top: 1px solid var(--varial-border, #E7E0CC);
}

.qa-group-body > .qa-trow:first-child {
  border-top: none;
}

/* Mode rows (MLF / strike / fee) grow downward as the chosen mode discloses its
   inputs — top-align so the title sits with the toggle. */
.qa-trow--mode {
  align-items: start;
}

.qa-trow-label {
  min-width: 0;
}

.qa-trow--mode .qa-trow-label {
  padding-top: 0.25rem;
}

.qa-trow-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  line-height: 1.25;
}

.qa-trow-title .text-muted {
  font-weight: 400;
}

/* Descriptor, always visible under the title (it has the full left column now). */
.qa-trow-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1.2;
  margin-top: 0;
}

.qa-trow-value {
  justify-self: stretch;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

/* Value cell for a mode row stacks the toggle over its disclosed inputs, kept
   right-aligned with the rest of the control column. */
.qa-trow--mode .qa-trow-value {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Badge column removed per design — the control itself carries the meaning. */
.qa-trow-badge {
  display: none;
}

/* Derived contract-end readout (PPA/toll: end = start + tenor) — reads as a value beside
   the start selects, not an input. Nowrap so "Ends Dec 2031" stays on one line. */
.qa-date-end-display {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Tenor row: years + months + the derived-end readout all share ONE line. Wrapping the
   controls in this group keeps them out of the `.qa-trow-value > .form-control` full-width
   rule that was stretching each input onto its own line. */
.qa-tenor-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
  width: 100%;
}

/* Compact tenor number inputs (years + months) so "5 yr 0 mo → Ends …" fits one line. */
.qa-tenor-group .qa-tenor-num {
  width: 4rem;
  flex: 0 0 auto;
}

/* Field-state affordance — so the long form reads as progress, not a wall. A row whose
   control carries a value gets a green rail + tick; a required (non-"(optional)") row
   still empty gets an amber rail. Driven by refreshFormFieldStates() in the JS. Amber,
   not red, since an untouched-but-required field is "to do", not an error. */
.qa-trow.is-filled {
  box-shadow: inset 3px 0 0 var(--varial-success, #059669);
  background: color-mix(in srgb, var(--varial-success, #059669) 5%, transparent);
}

.qa-trow.is-filled .qa-trow-title::after {
  content: "\2713";
  color: var(--varial-success, #059669);
  font-weight: 700;
  margin-left: 0.4rem;
}

.qa-trow.is-needed {
  box-shadow: inset 3px 0 0 var(--varial-amber, #F59E0B);
  background: color-mix(in srgb, var(--varial-amber, #F59E0B) 7%, transparent);
}

/* A read-only resolved value (model-fixed rows, resolved MLF estimate, …). */
.qa-trow-readonly {
  font-size: 0.85rem;
  color: var(--bs-body-color, #212529);
  font-variant-numeric: tabular-nums;
}

/* A full-width sub-block inside a group (the DUID search widget) — not a label/value
   row, so it gets its own padding and top rule to sit flush in the table. */
.qa-block {
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--varial-border, #E7E0CC);
}

.qa-group-body > .qa-block:first-child {
  border-top: none;
}

/* A toggle-only wrapper that groups several rows (new-build location, tech/CF, capacity).
   `display: contents` lets its rows sit directly in the group table; `d-none` still hides
   the whole wrapper (display:none wins over display:contents). */
.qa-subgroup {
  display: contents;
}

/* Consistent control sizing: every control fills the fixed 16rem value column so the
   whole right-hand edge — inputs, selects, segmented groups, date pairs — lines up. */
.qa-trow-value > .form-control,
.qa-trow-value > .form-select,
.qa-trow-value > .input-group,
/* The resolved Avg-CF indicator is a read-only display box, not a form control —
   size it to the same full column so it lines up with the inputs above/below it. */
.qa-trow-value > #qa-cf-indicator {
  width: 100%;
  max-width: 100%;
}

.qa-trow-value > #qa-cf-indicator {
  text-align: left;
}

/* Segmented button groups (source / region / mode toggles) stretch to the column and
   share width equally, so N/Q/V/S/T reads as one full-width control like the selects. */
.qa-trow-value > .btn-group {
  width: 100%;
  flex-wrap: nowrap;
}

.qa-trow-value > .btn-group > .btn,
.qa-trow-value > .btn-group > .btn-check + .btn {
  flex: 1 1 0;
  /* Keep multi-word toggle labels (Existing asset / Model estimate) on one line —
     nowrap sets each button's min-width to its text, and the labels sum to under
     the 16rem column, so the group fits one row instead of wrapping words. */
  white-space: nowrap;
}

/* Month / year dropdowns (commissioning + contract dates): a start→end pair shares the
   fixed value column evenly rather than each taking a fixed width, so they line up too. */
.qa-trow-value .qa-date-select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

/* Multi-cell builders (per-year strike / MLF grid cells) stay narrow and inline. */
.qa-trow-value .qa-inline-field .form-control {
  width: 9rem;
}

.qa-trow-value .qa-mode-detail .form-control {
  width: 9rem;
}

/* The single-value disclosed field in a mode row (degradation, MLF fixed value, PPA
   strike / escalation, toll fee) fills the value column like every other input — its unit
   or label sits inline at the right edge — so the whole control column lines up instead of
   this one field sitting at a narrow 9rem. (More specific than the rule above; the per-year
   grid builders aren't in a .qa-inline-field, so they keep the narrow cells.) */
.qa-trow--mode .qa-trow-value .qa-mode-detail,
.qa-trow--mode .qa-trow-value .qa-inline-field {
  width: 100%;
}

.qa-trow--mode .qa-trow-value .qa-inline-field .form-control {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* The read-only resolved value (model-fixed rows) reads as plain right-aligned text. */
.qa-trow-value .qa-trow-readonly {
  font-variant-numeric: tabular-nums;
}

/* The disclosed inputs under a mode toggle. */
.qa-mode-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}

/* An inline field (input + unit / short label) that the JS shows/hides with `d-none`.
   The custom display survives the toggle: Bootstrap's `.d-none {display:none!important}`
   wins when present, this inline-flex applies when it's removed. */
.qa-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Source badge (mirrors _assumptions.html — Bootstrap subtle tokens are theme-aware).
   `.qa-badge` just standardises the pill size where the row builds it inline. */
.qa-badge {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Footer legend explaining the three source badges. */
.qa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.qa-legend .qa-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.15rem;
  display: inline-block;
}

.qa-legend-dot--input { background: var(--bs-success, #16a34a); }
.qa-legend-dot--default { background: var(--bs-secondary, #6c757d); }
.qa-legend-dot--fixed { background: var(--bs-warning, #ffc107); }

/* Stack rows to one column on a narrow modal so nothing is crushed. */
@media (max-width: 640px) {
  .qa-trow {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }
  .qa-trow-value {
    justify-self: start;
    justify-content: flex-start;
  }
  .qa-trow--mode .qa-trow-value {
    align-items: flex-start;
  }
}

/* ── Per-year strike / fee grid (PPA + toll "Annual fixed" mode) ───────
   One compact labelled cell per tenor year, wrapping into a responsive grid
   so a 10-year deal reads as a tidy block rather than a long column. */
/* One compact year/price row per line (label │ input), not a wide grid of cells. */
.qa-year-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 18rem;
}

.qa-year-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.qa-year-label {
  flex: 0 0 4.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0;
}

.qa-year-cell .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── DUID table picker ── */
.qa-duid-table-wrap {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: 0.4rem;
}

.qa-duid-table-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--bs-light, #f8f9fa);
  z-index: 1;
  font-size: 0.72rem;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
}

.qa-duid-table-wrap tbody td {
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}

.qa-duid-table-wrap tbody tr {
  cursor: pointer;
}

.qa-duid-table-wrap tbody tr:hover td {
  background-color: var(--varial-primary-bg-light, #dbeafe);
}

/* ── Selected DUID info box ── */
.qa-selected-info {
  background: var(--varial-primary-bg-light, #dbeafe);
  border: 1px solid var(--varial-primary, #2563EB);
  border-radius: 0.4rem;
  padding: 0.75rem;
}

/* ── Metadata glance panel ── */
.qa-metadata-panel {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0.3rem;
  padding: 0.5rem 0.5rem 0.25rem;
}

.qa-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.75rem;
}

.qa-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.qa-meta-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 600;
}

.qa-meta-value {
  font-size: 0.82rem;
  color: var(--bs-body-color, #212529);
}

.qa-meta-mono {
  font-family: var(--bs-font-monospace, monospace);
  font-weight: 700;
  color: var(--varial-primary, #2563EB);
}

.qa-meta-nocode {
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-meta-editable-badge {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bs-warning-bg-subtle, #fff3cd);
  color: var(--bs-warning-text-emphasis, #664d03);
  border-radius: 0.2rem;
  padding: 0.05rem 0.25rem;
  vertical-align: middle;
  font-style: normal;
}

.qa-meta-input {
  font-size: 0.82rem;
  width: 100%;
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: 0.25rem;
  padding: 0.15rem 0.35rem;
  background: var(--varial-white, #fff);
  color: var(--bs-body-color, #212529);
  line-height: 1.3;
}

.qa-meta-input:focus {
  outline: none;
  border-color: var(--varial-primary, #2563EB);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.qa-meta-footer {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
}

/* ── Dark mode ─────────────────────────────────────────────────────
   These surfaces hardcode light fills (sticky header, pale-blue hover/info,
   translucent-white panel, white meta input) that don't flip with the theme
   and so render light-on-light under the dark body text. Repaint onto dark
   surfaces / accent tints. */
[data-bs-theme="dark"] .qa-duid-table-wrap thead th {
  background: var(--varial-bg-subtle);
}

[data-bs-theme="dark"] .qa-duid-table-wrap tbody tr:hover td {
  background-color: var(--varial-primary-soft);
}

[data-bs-theme="dark"] .qa-selected-info {
  background: var(--varial-primary-soft);
}

[data-bs-theme="dark"] .qa-metadata-panel {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .qa-meta-input {
  background: var(--varial-gray-50);
  color: var(--varial-gray-900);
}

/* ── Optional-depth accordion: location map + address geocoder ─────────
   The collapsible "Location & connection" section hosts a Leaflet picker.
   Leaflet needs an explicit container height, and the geocoder dropdown
   floats over the address input. */
.qa-map-wrap {
  position: relative;
}

#qa-location-map {
  height: 320px;
  width: 100%;
  border-radius: var(--varial-radius, 0.5rem);
  border: 1px solid var(--varial-border-color, #dee2e6);
}

.qa-address-dropdown {
  position: absolute;
  z-index: 1080;
  left: 0;
  right: 0;
  background: var(--varial-white, #fff);
  border: 1px solid var(--varial-border-color, #dee2e6);
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--varial-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.qa-addr-result {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.qa-addr-result:hover {
  background: var(--varial-primary-soft, #eef2ff);
}

.qa-addr-empty {
  color: var(--bs-secondary-color, #6c757d);
  cursor: default;
}

.qa-map-pin {
  color: var(--varial-primary, #1b3aa0);
  font-size: 1.4rem;
  text-align: center;
}

.qa-generator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.qa-map-sat-btn {
  background: var(--varial-white, #fff);
  border: none;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.qa-map-sat-btn.active {
  background: var(--varial-primary-soft, #eef2ff);
}

[data-bs-theme="dark"] .qa-address-dropdown {
  background: var(--varial-bg-subtle);
}

[data-bs-theme="dark"] .qa-map-sat-btn {
  background: var(--varial-bg-subtle);
  color: var(--varial-gray-900);
}

/* ── Financial product (swap/cap) inline row ──────────────────────────
   Product · Region · Vintage · Year · Quarter on one line, mirroring the
   in-valuation trade table. Wraps gracefully on narrow modals. */
.qa-fin-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}

.qa-fin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.qa-fin-field-region {
  /* Region has five options — let it take the slack before others wrap. */
  flex: 1 1 auto;
  min-width: 0;
}

.qa-fin-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-fin-year-group {
  width: 8rem;
}

/* Numeric trade-term inputs (MW / strike / premium) sit inline in the same row as the
   segmented controls, so they carry a fixed compact width rather than filling the row. */
.qa-fin-num {
  width: 7rem;
}

/* Quarter selector for CY/FY vintages: greyed in place, not removed, so the
   grid keeps its width and the other fields don't jump. The disabled radios
   are dimmed by Bootstrap's btn-check styling; this just fades the label. */
.qa-fin-field--disabled .qa-fin-label {
  opacity: 0.5;
}


/* Buy = green, Sell = red side toggle — mirrors the in-valuation financial row so the
   modal and the table read the same. Unchecked coloured text; checked fills. */
#qa-fin-side-buy + label { color: var(--varial-success, #16a34a); }
#qa-fin-side-sell + label { color: var(--varial-danger, #dc2626); }
#qa-fin-side-buy:checked + label {
  background-color: var(--varial-success, #16a34a);
  border-color: var(--varial-success, #16a34a);
  color: #fff;
}
#qa-fin-side-sell:checked + label {
  background-color: var(--varial-danger, #dc2626);
  border-color: var(--varial-danger, #dc2626);
  color: #fff;
}

/* ── Financial section = two-row form mirroring the trade table ───────────────
   The instrument (product · shape · side) sits on one grid row, the delivery
   period + prices on the next, so the section never overflows a narrow modal.
   Scoped to the modal so it renders wherever the modal is used (not just the
   library page where positions-financial-table.css loads) and doesn't clash with
   that table's own unscoped rules. */
.qa-fin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Unified control sizing — the segmented button-groups, the number inputs
   (MW / strike / premium) and the year stepper all share one padding /
   font-size / line-height so each grid row reads as one consistent band of
   controls, not short pills beside taller inputs. Unscoped from #quickAddModal
   so the library page's inline trade editor (positions-financial-table.js),
   which reuses .qa-fin-form, renders identically. */
.qa-fin-form .btn-group-sm > .btn,
.qa-fin-form .qa-fin-num,
.qa-fin-form .input-group-sm > .form-control,
.qa-fin-form .input-group-sm > .btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.qa-fin-form .qa-fin-num {
  display: inline-block;
  width: 6.5rem;
}

.qa-fin-form .qa-fin-year-group {
  width: 8rem;
}

/* Keep the five region toggles — and the other segmented groups — on a single
   line. TAS was wrapping to a second full-width row. */
.qa-fin-form .fin-region-group,
.qa-fin-form .fin-side,
.qa-fin-form .fin-quarter,
.qa-fin-form .fin-vintage {
  flex-wrap: nowrap;
}

/* Compact single-letter region chips (N/Q/V/S/T) — equal, narrow widths so the
   group stays tight instead of five wide buttons hogging the row. */
.qa-fin-form .fin-region-group > .btn {
  min-width: 1.9rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* Product field: instrument group + compact time-of-day shape buttons on one line. */
.qa-fin-form .fin-product {
  display: flex;
  width: max-content;
  max-width: 100%;
}

/* Shape buttons stay one row (no wrap) — compact letter labels + [data-tip] hovers. */
.qa-fin-form .fin-tod-block {
  flex-wrap: nowrap;
}

/* Per-region colours: unchecked = coloured text, checked = filled + white text. */
#quickAddModal .fin-region-group input[value="NSW1"] + label { color: var(--chart-region-nsw, #2563eb); }
#quickAddModal .fin-region-group input[value="QLD1"] + label { color: var(--chart-region-qld, #f59e0b); }
#quickAddModal .fin-region-group input[value="VIC1"] + label { color: var(--chart-region-vic, #16a34a); }
#quickAddModal .fin-region-group input[value="SA1"]  + label { color: var(--chart-region-sa,  #ff4d6d); }
#quickAddModal .fin-region-group input[value="TAS1"] + label { color: var(--chart-region-tas, #9333ea); }
#quickAddModal .fin-region-group input[value="NSW1"]:checked + label {
  background-color: var(--chart-region-nsw, #2563eb);
  border-color: var(--chart-region-nsw, #2563eb);
  color: #fff;
}
#quickAddModal .fin-region-group input[value="QLD1"]:checked + label {
  background-color: var(--chart-region-qld, #f59e0b);
  border-color: var(--chart-region-qld, #f59e0b);
  color: #fff;
}
#quickAddModal .fin-region-group input[value="VIC1"]:checked + label {
  background-color: var(--chart-region-vic, #16a34a);
  border-color: var(--chart-region-vic, #16a34a);
  color: #fff;
}
#quickAddModal .fin-region-group input[value="SA1"]:checked + label {
  background-color: var(--chart-region-sa, #ff4d6d);
  border-color: var(--chart-region-sa, #ff4d6d);
  color: #fff;
}
#quickAddModal .fin-region-group input[value="TAS1"]:checked + label {
  background-color: var(--chart-region-tas, #9333ea);
  border-color: var(--chart-region-tas, #9333ea);
  color: #fff;
}

/* ── Physical-asset guided fan: optional header tags ──────────────────
   Small pill on the right of each optional accordion header (before the
   chevron) so the user can see at a glance the panel is optional. The two
   required steps are now a flat always-visible section, so no "Required" tag. */
.qa-fan-tag {
  margin-left: auto;
  margin-right: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}

.qa-fan-tag-opt {
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Category type picker (modal open state) ──────────────────────────
   Grouped selector-tile grids shown before a type is chosen. Categories
   stack vertically; each holds a Bootstrap row-cols grid of tiles. */
.qa-type-cats {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.qa-type-cat {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.qa-type-cat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
}

/* Per-category accent on the tile icon bubble only — the taxonomy reads at a
   glance while selection state stays the uniform brand blue. color-mix keeps
   the fill a token-derived tint that works on both light and dark grounds. */
.qa-type-cat--off .selector-tile-icon {
  background: color-mix(in srgb, var(--varial-success, #059669) 12%, transparent);
  color: var(--varial-success, #059669);
}

.qa-type-cat--ret .selector-tile-icon {
  background: color-mix(in srgb, var(--varial-purple, #9333EA) 12%, transparent);
  color: var(--varial-purple, #9333EA);
}

.qa-type-cat--fin .selector-tile-icon {
  background: color-mix(in srgb, var(--varial-amber-dark, #D97706) 14%, transparent);
  color: var(--varial-amber-dark, #D97706);
}

/* Short screens: instead of scrolling the type picker, tighten the whole grid so all
   categories fit. Scoped to this modal so the shared selector-tile stays untouched, and
   keyed on viewport height (the picker overflows vertically). The modal stays scrollable
   as a fallback for very small screens and for the longer type-specific form. */
@media (max-height: 900px) {
  #quickAddModal .qa-type-cats {
    gap: 0.7rem;
  }
  #quickAddModal .qa-type-cat {
    gap: 0.3rem;
  }
  #quickAddModal .qa-type-cats .row {
    --bs-gutter-y: 0.4rem;
  }
  #quickAddModal .qa-type-cats .selector-tile--sm {
    padding: 0.5rem 0.7rem 0.45rem;
  }
  #quickAddModal .qa-type-cats .selector-tile--sm .selector-tile-icon {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }
  #quickAddModal .qa-type-cats .selector-tile--sm .selector-tile-desc {
    line-height: 1.25;
  }
}

/* Very short screens: drop the one-line descriptor too — the icon + name identify the
   type — to claw back the last rows so the picker fits without scrolling. */
@media (max-height: 760px) {
  #quickAddModal .qa-type-cats .selector-tile-desc {
    display: none;
  }
}

/* Coming-soon tiles (Gas / PHES): the selector-tile-option--disabled component
   state already fades + blocks selection; the "Soon" badge carries the message. */

/* Cleaner ground for the quick-add modal — the global cream body bg (#FAF7EE)
   reads heavy behind the white tiles. Light → white; dark keeps its deep navy. */
#quickAddModal .modal-content {
  background-color: var(--varial-card-bg, #ffffff);
}

[data-bs-theme="dark"] #quickAddModal .modal-content {
  background-color: var(--varial-bg, #0F172A);
}

/* Quieter Cancel — the concierge link is the footer's real emphasis. */
#quickAddModal .qa-cancel-btn {
  font-weight: 500;
}

/* ── Collapsed type summary (shown after a type is chosen) ─────────────
   Replaces the always-open picker grid with a compact bar so the details
   below get the room. A clear divider separates it from the form body. */
.qa-type-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: 0.4rem;
  background: var(--varial-primary-soft, #eef2ff);
}

.qa-type-summary-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-type-summary-name {
  font-weight: 600;
  color: var(--varial-primary, #1b3aa0);
}

[data-bs-theme="dark"] .qa-type-summary {
  background: var(--varial-primary-soft);
}

[data-bs-theme="dark"] .qa-type-summary-name {
  color: var(--varial-primary-emphasis, #b6c7ff);
}

/* Divider between the type section and the form body. */
.qa-type-divider {
  margin: 0.75rem 0 1rem;
  border: 0;
  border-top: 1px solid var(--varial-border, #E7E0CC);
}

/* ── Footer concierge CTA (item 3) ────────────────────────────────────
   Sits between Cancel and Add Position; replaces the old picker caption. */
.qa-footer-note {
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-footer-note a {
  font-weight: 600;
}

/* ── Retail load section ───────────────────────────────────────────────
   Constrain the optional annual-energy input so it doesn't span the modal. */
.qa-retail-energy input {
  max-width: 12rem;
}

/* ── Real-terms (RTXX) base-year selector ──────────────────────────────
   Compact "RT [year]" input group sitting beside the PPA strike / toll fee, so
   the value's real-terms basis is captured inline without stealing the row. */
.qa-rt-year-group {
  width: 8rem;
  flex: 0 0 auto;
}

/* ── Y0..Yn repricing rows (PPA strike / toll fee) ─────────────────────
   Tenor-driven grid of compact "Yn [amount]" cells — one per contract year.
   Wraps to as many columns as fit, so a 10-year deal reads as a tidy block. */
.qa-offset-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.4rem 0.6rem;
  margin-top: 0.25rem;
}

.qa-offset-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.qa-offset-label {
  flex: 0 0 1.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bs-secondary-color, #6c757d);
}

.qa-offset-input {
  min-width: 0;
}