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

/* ── 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. */
.qa-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem 0.75rem;
}

.qa-year-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.qa-year-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 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;
}

/* ── 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, labelled type buttons shown before a type is chosen. */
.qa-type-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

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

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

/* ── Coming-soon placeholder type buttons ─────────────────────────────
   Faded + dashed so the roadmap is visible but clearly not-yet-available.
   The concierge CTA in the footer covers "tell us and we'll set it up". */
.qa-soon-btn {
  opacity: 0.45;
  border-style: dashed;
  font-weight: 400;
}

.qa-soon-btn:hover {
  /* Bootstrap's .disabled already blocks pointer events; keep the faded look. */
  opacity: 0.45;
}

/* Hover label for greyed-out placeholder buttons. The button itself is .disabled
   (pointer-events: none), so the tip lives on a wrapping span that still receives
   hover — reveals "Coming soon" instantly (no ~1s native-title delay). */
.qa-soon-wrap {
  position: relative;
  display: inline-flex;
}

.qa-soon-wrap[data-soon-tip]::after {
  content: attr(data-soon-tip);
  display: none;
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.45rem;
  border-radius: var(--varial-radius-sm, 0.375rem);
  background: var(--chart-tech-black-coal, #1c1917);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

.qa-soon-wrap:hover::after {
  display: block;
}

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