/* Position Library — overrides */

:root {
  --vrl-file-row-height: 1.75rem;
}

/* Team/User scope switcher */
.group-scope-switcher .btn {
  min-width: 7rem;
}

/* Keep position action cluster compact and consistent */
.table-position td:last-child form {
  display: inline;
}

/* Supply / Financial / Retail tabs: one joined control with dividers, the
   same height as the small Add position button beside it, so it reads as a
   choice of three rather than three separate pills. */
.positions-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 1.5rem;
  padding: 1px;
  gap: 0;
  border: 1px solid var(--varial-border-interactive, #B9C3BD);
  border-radius: 0.375rem;
  background: var(--varial-card-bg, #FFFFFF);
}

.positions-tabs .nav-item {
  display: flex;
}

.positions-tabs .nav-item + .nav-item {
  border-left: 1px solid var(--varial-border, #E3E5DE);
}

.positions-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.6rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--varial-gray-700, #44403C);
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
}

.positions-tabs .nav-link:hover {
  color: var(--varial-gray-900, #131210);
  background: var(--varial-gray-50, #F5F5F4);
}

.positions-tabs .nav-link.active {
  color: var(--varial-action-text, #0F745B);
  background: color-mix(in srgb, var(--varial-action-text, #0F745B) 12%, var(--varial-card-bg, #FFFFFF));
}

.positions-tab-count {
  margin-left: 0.35rem;
  padding: 0.15em 0.45em;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--varial-gray-100, #F0EFEC);
  color: var(--varial-gray-700, #44403C);
}

.positions-tabs .nav-link.active .positions-tab-count {
  background: var(--varial-card-bg, #FFFFFF);
  color: var(--varial-action-text, #0F745B);
}

/* "Coming soon" marker on the placeholder Retail tab — a soft indigo info pill:
   readable (dark indigo on light indigo), calm rather than a loud amber warning.
   The second selector keeps the tint when the tab is active (beating the active-count
   override); the dark-theme rule lifts the text so it stays legible. */
.positions-tab-count.positions-tab-soon,
.positions-tabs .nav-link.active .positions-tab-count.positions-tab-soon {
  background: var(--varial-primary-soft, #eef2ff);
  color: var(--varial-primary, #1b3aa0);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

[data-bs-theme="dark"] .positions-tab-count.positions-tab-soon,
[data-bs-theme="dark"] .positions-tabs .nav-link.active .positions-tab-count.positions-tab-soon {
  color: var(--varial-primary-emphasis, #b6c7ff);
}

/* Supply/Financial/Retail + their count badges are only a few px from
   wrapping onto a second row on a phone-width card-header — shrink them
   enough to keep real headroom instead of sitting right at the edge. */
@media (max-width: 575.98px) {
  .positions-tabs {
    gap: 0.1rem;
  }

  .positions-tabs .nav-link {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
  }

  .positions-tabs .nav-link i {
    margin-right: 0.3rem !important;
  }

  .positions-tab-count {
    margin-left: 0.25rem;
    font-size: 0.625rem;
  }
}

/* Financial "book over time" chart — reserve height so the card doesn't collapse
   before Plotly measures the container (the Financial tab is hidden on load). */
.fin-timeline-chart {
  min-height: 300px;
}

/* Position modal section structure */
#addPositionModal .modal-body {
  padding: 0.75rem;
}

.position-modal-section {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  padding: 0.6rem 0.75rem;
}

.position-modal-section + .position-modal-section {
  margin-top: 0.5rem;
}

.position-modal-section-header {
  margin-bottom: 0.35rem;
}

.position-modal-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
}

/* Dropdown position type icons */
.dropdown-icon-solar { color: var(--varial-amber, #f59e0b); }
.dropdown-icon-wind { color: #3b82f6; }
.dropdown-icon-bess { color: var(--chart-tech-battery, #8b5cf6); }
.dropdown-icon-gas { color: #ef4444; }
.dropdown-icon-hydro { color: #06b6d4; }
.dropdown-icon-ppa { color: #10b981; }
.dropdown-icon-toll { color: #f97316; }
.dropdown-icon-swap { color: #6366f1; }
.dropdown-icon-cap { color: #ec4899; }
.dropdown-icon-floor { color: #14b8a6; }
.dropdown-icon-superpeak { color: #a855f7; }
.dropdown-icon-heads { color: #64748b; }

/* Map legend */
.position-map-legend {
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  font-size: 0.85rem;
  line-height: 1.6;
}
.position-map-legend .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.position-map-legend .legend-dot-solar { background: var(--varial-amber, #f59e0b); }
.position-map-legend .legend-dot-wind { background: #10b981; }
.position-map-legend .legend-dot-bess { background: var(--chart-tech-battery, #8b5cf6); }
.position-map-legend .legend-dot-gas { background: #6366f1; }
.position-map-legend .legend-dot-hydro { background: #3b82f6; }

/* Position explorer split layout (styled to match infrastructure mapping) */
.position-explorer-grid {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--varial-radius, 0.5rem);
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
  min-height: 80vh;
}

.position-map-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg, #fff);
}

.position-map-shell-hd,
.position-stats-hd {
  padding: 0.5rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color, #6c757d);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.position-stats-rail {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
}

.position-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.position-stat-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
}

.position-stat-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bs-secondary-color, #6c757d);
}

.position-stat-row-success .position-stat-count {
  color: var(--varial-success, #16A34A);
}

.position-stat-row-warning .position-stat-count {
  color: var(--varial-amber, #f59e0b);
}

.position-stats-subhd {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.position-infra-details .position-stat-row {
  padding: 0.5rem 0.875rem;
}

.position-infra-row-meta .position-stat-name,
.position-infra-row-meta .position-stat-count {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
}

.position-infra-section + .position-infra-section {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.position-infra-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.position-infra-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
}

.position-infra-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
}

.position-infra-toggle input {
  width: 0.95rem;
  height: 0.95rem;
}

.position-infra-table-wrap {
  max-height: 180px;
  overflow: auto;
}

.position-infra-table-row {
  cursor: pointer;
}

.position-infra-table-row:hover td {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

/* The book keeps its editable table in the first viewport, then gives the map
   a complete workspace-height canvas below it. The extra page height is
   intentional: scrolling to Snapshot should reveal a useful full map, rather
   than a second cramped half-screen panel. */
.position-library-workspace {
  height: auto;
  min-height: calc(100vh - 5rem);
}

.position-library-workspace .position-library-top-row {
  flex: 0 0 calc((100vh - 5rem) / 2);
}

.position-library-workspace .workspace-snapshot-card {
  flex: 0 0 calc(90vh - 4.5rem);
  min-height: calc(90vh - 4.5rem);
  overflow: hidden;
}

/* Map fullpage is already inside Snapshot's card shell. Remove its own outer
   border and rounding so the header, map and layers rail read as one card. */
#position-map-fullpage {
  border: 0;
  border-radius: 0;
}

/* Map fullpage dimensions for Position Library — fills Snapshot's full-height
   body rather than applying its own fixed viewport calculation. */
#position-map-fullpage {
  height: 100%;
  min-height: 360px;
  align-items: stretch;
}

#position-map-fullpage .map-canvas-wrap {
  flex: 2 1 0;
  min-width: 0;
}

#position-map-fullpage .map-tree-sidebar {
  flex: 1 1 0;
  min-width: 240px;
  max-width: none;
  width: auto;
  height: 100%;
  align-self: stretch;
}

/* Inside map-fullpage: canvas fills remaining width via flex */
#position-map-fullpage #position-map {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

/* Guest / unauthenticated map (inside position-map-shell + position-explorer-grid) */
.position-map-shell #position-map {
  flex: 1 1 0;
  height: 430px;
}

/* Adaptive feature contrast on the satellite/aerial basemap (#4066). The busy photo
   imagery competes with our vector features (generators, transmission lines,
   substations, REZ + subregion outlines), so lift them off any surface with a dark
   halo. Applied once per pane <svg> (not per path) so it stays cheap with hundreds of
   generator markers. The dark street/voyager basemaps don't need it — features already
   read there — so it's scoped to the satellite class the map sets when that tile is on. */
#position-map.posmap-satellite .leaflet-pane > svg {
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}

/* #4460: was an inline style="filter:drop-shadow(...)" on the substation "x"
   marker SVG (positions-map.js _SUBSTATION_X_ICON) — the value is a fixed
   constant, not per-datum, so it's a static class. */
.substation-x-icon-shadow {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}

@media (max-width: 991.98px) {
  .position-library-workspace .position-library-top-row,
  .position-library-workspace .workspace-snapshot-card {
    flex: 0 0 auto;
    min-height: 0;
  }

  #position-map-fullpage {
    height: auto;
    flex-direction: column;
  }

  #position-map-fullpage .map-canvas-wrap {
    height: min(70vh, 560px);
    flex: 1 1 auto;
  }

  /* Narrow screens: the on-map toolbar pills ARE the layer control (they wrap onto
     extra rows). The tree sidebar stacked below the map — it collapsed to a useless
     scrollbar strip and duplicated the pills — so hide it here; the pills cover every
     layer. */
  #position-map-fullpage .map-toolbar {
    flex-wrap: wrap;
  }

  #position-map-fullpage .map-toolbar-layers {
    flex-basis: 100%;
  }

  #position-map-fullpage .map-tree-sidebar {
    display: none;
  }

  #position-map-fullpage #position-map {
    min-height: 0;
    height: 100%;
  }

  .position-stats-rail {
    border-left: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
  }

  .position-map-shell #position-map {
    height: 320px;
  }
}

/* Compact, high-scan density for the position explorer table */

.table-position thead th {
  padding: 0.375rem 0.625rem;
  background-color: transparent;
  border-bottom: 1px solid var(--varial-border);
  color: var(--varial-gray-500);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-position thead th:first-child {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
}

.table-position thead th .sort-icon {
  font-size: 0.5rem;
  color: var(--varial-gray-400, #A8A29E);
  margin-left: 0.25rem;
}

.table-position tbody td {
  padding: 0.125rem 0.625rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

.table-position tbody tr.draggable-position > td {
  height: var(--vrl-file-row-height, 1.75rem);
}

.table-position .badge.badge-run-status {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
}

/* Keep RHS action controls on a consistent visual rail, with room to
   breathe off the card's right edge rather than hugging it flush — matches
   the Price-it/Value-it treatment in spot-home.css / var-home.css. */
.list-workspace .table-position td:last-child {
  padding-right: var(--vrl-list-actions-right-gutter, 1rem);
}

.list-workspace .table-position th.col-actions {
  padding-right: var(--vrl-list-actions-right-gutter, 1rem);
}

.list-workspace .table-position .col-actions {
  width: 8rem;
}

.table-position .dropdown-menu {
  font-size: 0.8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.table-position .dropdown-menu .dropdown-item {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}

.table-position .drag-handle {
  opacity: 0;
}

.table-position tr:hover .drag-handle {
  opacity: 1;
}

/* Position row actions kebab menu (mirrors forecast-actions-menu pattern) */
.table-position .position-actions-menu {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.table-position .position-actions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--varial-gray-600, #57534E);
  border-radius: 0.25rem;
  line-height: 1;
}

.table-position .position-actions-toggle:hover,
.table-position .position-actions-toggle:focus {
  color: var(--varial-primary, #1B3AA0);
  background-color: var(--varial-gray-100, #F3F1EB);
}

.table-position .position-actions-toggle i { font-size: 0.875rem; }

.table-position .position-actions-menu .dropdown-menu { min-width: 13rem; }

/* ── Bottom-row "Add <x> position" CTA (#3271) ──
   Mirrors the Financial tab's inline add button on the Supply tab: a centred
   outline button below the positions list. */
.lib-add-cta-row {
  text-align: center;
  padding: 0.75rem 0;
}

/* White with a teal outline, filling teal on hover, so the add row does not
   stack another solid teal block under the header's own Add button. */
.lib-add-cta.btn-success {
  --bs-btn-bg: var(--varial-card-bg, #FFFFFF);
  --bs-btn-color: var(--varial-action-text, #0F745B);
  --bs-btn-border-color: var(--varial-action-text, #0F745B);
  --bs-btn-hover-bg: var(--varial-action, #0C9474);
  --bs-btn-hover-border-color: var(--varial-action, #0C9474);
  --bs-btn-hover-color: var(--varial-white, #FFFFFF);
  --bs-btn-active-bg: var(--varial-action-hover, #0F745B);
  --bs-btn-active-color: var(--varial-white, #FFFFFF);
}

.lib-add-cta {
  font-weight: 600;
  padding-inline: 1.25rem;
}

/* ── Aggregate retail load-by-region chart (bottom snapshot card, Retail tab) ──
   One full-width chart with a single line per NEM region (each = the sum of that
   region's retail loads), coloured by the styleguide region palette. Plotly needs
   an explicit height or it renders 0-tall. */
.retail-aggregate-plot {
  width: 100%;
  min-width: 0; /* let Plotly's responsive SVG shrink with the card, never force overflow */
  min-height: 360px;
  overflow: hidden;
}

/* ── Positions page layout (Supply/Financial/Retail redesign) ──────────────────
   Two Bootstrap tab-contents are driven from one nav (positions-tabs.js): the
   combined table card's own #positions-tab-content, and the bottom snapshot
   card's #positions-snapshot-content (map / payoff diagram / aggregate load).
   Both share this fill/scroll treatment — Bootstrap's own `.tab-pane.active
   { display: block }` doesn't flex-fill, so the active pane needs its own
   flex+scroll rule here (this file loads after bootstrap.css, so it wins on
   equal specificity). */
.ws-tabs-content {
  flex: 1 1 auto;
  min-height: 0;
}
.ws-tabs-content > .tab-pane.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

/* The Supply and Retail tables still render through the shared list-workspace
   shell (list_base.html), which produces its own `.list-section > .card`. That
   chrome is right when the table is the whole card (Spot/VAR's combined table)
   but here it's nested one level inside the Positions card's own header/tabs —
   flatten it so there's a single visible border/shadow, not two. The Financial
   tab's table isn't list_base-based (position_financial_table.html), so its
   `.fin-table-card` needs the same treatment named explicitly. */
.positions-table-shell .tab-pane .card.list-workspace,
.positions-table-shell .tab-pane .fin-table-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.positions-table-shell .tab-pane .fin-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.positions-table-shell .tab-pane .fin-table-card .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.positions-table-shell .tab-pane .fin-table-card .table-responsive.fin-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Same flattening for the bottom snapshot card's Financial (payoff diagram) and
   Retail (aggregate load) panes — both render their own inner `.card`, which
   would otherwise nest inside the snapshot card's own chrome. The Supply pane
   (map) carries no card of its own, so it needs no equivalent rule. */
#financial-snapshot-pane .fin-payoff-card,
#retail-snapshot-pane .card {
  border: 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#financial-snapshot-pane .fin-payoff-card .card-body,
#retail-snapshot-pane .card .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Within Snapshot, a chart should consume the space left by its controls and
   footer, rather than keeping the standard fixed-height result-card canvas. */
#financial-snapshot-pane .fin-payoff-chart {
  flex: 1 1 auto;
  min-height: 0;
}

#retail-snapshot-pane #retail-aggregate:has(> .card),
#retail-snapshot-pane #retail-aggregate:has(> .card) > .card,
#retail-snapshot-pane #retail-aggregate:has(> .card) > .card > .card-body,
#retail-snapshot-pane .retail-aggregate-plot {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#retail-snapshot-pane .retail-aggregate-plot {
  overflow: hidden;
}