/* Position Library — overrides */

:root {
  --vrl-table-section-left-gutter: 0.875rem;
  --vrl-file-row-height: 1.9rem;
}

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

/* Physical / Financial tabs (#3146) — underline tabs, one set at a time.
   The strip sits on a full-width baseline and the active tab carries a coloured
   underline, so it reads unambiguously as a selected tab (not a floating pill). */
.positions-tabs {
  gap: 0.25rem;
  border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

.positions-tabs .nav-link {
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}

.positions-tabs .nav-link:hover {
  color: var(--bs-body-color, #212529);
  background: var(--bs-tertiary-bg, #f1f3f5);
}

.positions-tabs .nav-link.active {
  color: var(--varial-primary, #2563eb);
  background: transparent;
  border-bottom-color: var(--varial-primary, #2563eb);
}

.positions-tab-count {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
}

.positions-tabs .nav-link.active .positions-tab-count {
  background: rgba(27, 58, 160, 0.12);
  color: var(--varial-primary, #2563eb);
}

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

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

/* Map fullpage dimensions for Position Library (no mapping.js to set height) */
#position-map-fullpage {
  height: 72vh;
  min-height: 520px;
  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));
}

@media (max-width: 991.98px) {
  #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: var(--varial-gray-200, #E4E2DC);
  border-bottom: 2px solid var(--varial-gray-300, #CCC9C3);
  color: var(--varial-gray-700, #38352F);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card:has(> .card-header + .card-body .table-position) > .card-header {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
  padding-right: var(--vrl-table-section-left-gutter, 0.875rem);
}

.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.9rem);
}

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

.table-position td:last-child .btn-icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
}

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

/* Hero CTA button group — full-width stacking on mobile */
.position-hero-cta { flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .position-hero-cta { flex-direction: column; align-items: stretch; }
  .position-hero-cta .dropdown { display: grid; }
}

/* ── Bottom-row "Add <x> position" CTA (#3271) ──
   Mirrors the Financial tab's inline add button on the Supply tab: a centred, gently
   glowing success button below the positions list. Same treatment as
   .fin-add-product-btn so the tabs read consistently. */
.lib-add-cta-row {
  text-align: center;
  padding: 0.75rem 0;
}

.lib-add-cta {
  font-weight: 600;
  padding-inline: 1.25rem;
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
  animation: lib-add-glow 2.4s ease-in-out infinite;
}

.lib-add-cta:hover {
  animation: none;
  box-shadow: 0 0 1rem 0.15rem rgba(5, 150, 105, 0.7);
}

@keyframes lib-add-glow {
  0%,
  100% {
    box-shadow: 0 0 0.35rem 0 rgba(5, 150, 105, 0.35);
  }
  50% {
    box-shadow: 0 0 1rem 0.15rem rgba(5, 150, 105, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lib-add-cta {
    animation: none;
    box-shadow: 0 0 0.6rem 0.1rem rgba(5, 150, 105, 0.5);
  }
}

/* ── Aggregate retail load-by-region chart (below the Retail tab table) ───────
   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;
}