/* Position Library — dedicated financial (swap/cap/call/put) positions table.
   Loaded by templates/var/position-library.html. One flat row per held trade, styled
   like the main positions table (reuses .table-position, so the header + row density and
   dark-mode colours match). Instrument type is its own column; Region / Vintage / Side
   filters live inline in their column headers as dropdown menus (#3146). */

/* ── Card-header title + sub (used by the Payoff Diagram card) ── */
.fin-header-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}

.fin-header-sub {
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Payoff diagram chart mount — mirrors .results-chart-container's sizing
   without pulling in the whole var-results.css page stylesheet, which this page doesn't
   otherwise load. Matched skeleton height so swapping the loading shimmer for the
   rendered chart doesn't jump the layout. */
.fin-payoff-chart {
  min-height: 400px;
  min-width: 0;
  width: 100%;
}

.fin-payoff-chart > .vrl-skeleton-chart {
  height: 400px;
}

/* ── Column-header filter funnels (Status / Region / Vintage / Side) ── */
/* The funnel button + menu reuse the supply table's list-workspace classes
   (ws-col-head / ws-col-filter-btn / list-workspace-filter-menu) so the two tabs read
   the same; only nowrap on the header cell is table-specific here. */
.fin-col-filter {
  white-space: nowrap;
}

/* ── Capped-height scroll: ~10 rows then scroll, with a sticky header ── */
.fin-scroll {
  max-height: 26rem;
  overflow-y: auto;
}

.fin-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Sortable headers (table-position already styles the .sort-icon) ── */
.fin-table .fin-sort {
  cursor: pointer;
  user-select: none;
}

.fin-table .fin-sort[aria-sort="ascending"] .sort-icon,
.fin-table .fin-sort[aria-sort="descending"] .sort-icon {
  color: var(--varial-primary, #1b3aa0);
}

/* ── Instrument + side badges ── */
.fin-inst-badge {
  background: var(--varial-primary-soft, #eef2ff);
  color: var(--varial-primary, #1b3aa0);
  font-weight: 600;
}

[data-bs-theme="dark"] .fin-inst-badge {
  background: var(--varial-primary-soft);
  color: var(--varial-primary-emphasis, #b6c7ff);
}

/* Type column colour key — matches the "book over time" chart legend
   (swap = blue, cap = amber, call = green, put = purple). */
.fin-inst-badge.fin-inst-swap {
  background: rgba(37, 99, 235, 0.12);
  color: var(--varial-primary, #1b3aa0);
}
.fin-inst-badge.fin-inst-cap {
  background: var(--varial-amber-bg-light, #fef3c7);
  color: var(--varial-amber-dark, #d97706);
}
.fin-inst-badge.fin-inst-call {
  background: rgba(5, 150, 105, 0.14);
  color: var(--varial-success, #059669);
}
.fin-inst-badge.fin-inst-put {
  background: rgba(139, 92, 246, 0.14);
  color: var(--chart-tech-battery, #8b5cf6);
}

[data-bs-theme="dark"] .fin-inst-badge.fin-inst-swap { color: #93b4ff; }
[data-bs-theme="dark"] .fin-inst-badge.fin-inst-cap { color: var(--varial-amber-light, #fcd34d); }
[data-bs-theme="dark"] .fin-inst-badge.fin-inst-call { color: #6ee7b7; }
[data-bs-theme="dark"] .fin-inst-badge.fin-inst-put { color: #c4b5fd; }

/* ── TOD shape chip (#3521) ──
   A shaped swap (Overnight / Morning Peak / Midday / Evening Peak / Late Evening) carries a
   small neutral outline chip after its product name so the six shaped swaps read as distinct
   first-class rows. Flat (FD) swaps carry no chip — they are the standard baseload swap. */
.fin-shape-badge {
  background: transparent;
  color: var(--varial-text-muted, #5b6472);
  font-weight: 600;
  font-size: 0.72rem;
  border: 1px solid var(--varial-border, #e7e0cc);
}
[data-bs-theme="dark"] .fin-shape-badge {
  color: var(--varial-text-muted, #94a3b8);
  border-color: var(--varial-border, #334155);
}

.fin-side-badge {
  font-weight: 600;
}

.fin-side-buy {
  background: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success-text-emphasis, #0a3622);
}

.fin-side-sell {
  background: var(--bs-danger-bg-subtle, #f8d7da);
  color: var(--bs-danger-text-emphasis, #58151c);
}

/* ── Archived trades — greyed until restored (archiving replaces delete, #3146) ── */
.fin-row-archived {
  opacity: 0.55;
}

/* ── Inline edit inputs ── */
.fin-in-price,
.fin-in-mw,
.fin-in-premium {
  display: inline-block;
  max-width: 7rem;
}

.fin-side-input .btn {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

/* ── Segmented "Add financial position" controls (#3271) ──
   The inline add-row uses the same segmented button-groups as the wizard's financial row
   (product / region / vintage / quarter / side) instead of dropdowns. Compact sizing +
   the value-keyed region/side colours, duplicated here (they live in var-wizard.css for
   the wizard) so the standalone library page — which doesn't load var-wizard.css — matches. */
.fin-table .btn-group-sm > .btn,
#financial-pick .btn-group-sm > .btn {
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
}

/* New-product row — Product cell. The instrument buttons (Swap/Cap/Call/Put) and the swap
   TOD-block buttons are both inline-flex btn-groups, so they'd otherwise sit side by side and
   read cramped. Stack them left-aligned with a small gap so the two rows line up under each
   other and align with the rest of the add-row. */
.fin-new-product-cell {
  vertical-align: middle;
}
.fin-new-product-cell > .btn-group {
  display: flex;
  width: max-content;
  max-width: 100%;
}
.fin-new-product-cell > .btn-group + .btn-group {
  margin-top: 0.25rem;
}

/* Vintage toggle + year dropdown sit side by side (no stacked double-row). The year
   select keeps a compact fixed width; nowrap so the two stay on one line. */
.fin-new-yearwrap {
  white-space: nowrap;
}

.fin-new-yearwrap .fin-new-year {
  width: auto;
  min-width: 5rem;
  flex: 0 0 auto;
}

.fin-new-yearwrap .btn-group {
  flex: 0 0 auto;
}

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

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

/* Buy = green, Sell = red side toggle (value-keyed). */
.fin-side input[value="buy"] + label { color: var(--varial-success, #16a34a); }
.fin-side input[value="sell"] + label { color: var(--varial-danger, #dc2626); }
.fin-side input[value="buy"]:checked + label {
  background-color: var(--varial-success, #16a34a);
  border-color: var(--varial-success, #16a34a);
  color: #fff;
}
.fin-side input[value="sell"]:checked + label {
  background-color: var(--varial-danger, #dc2626);
  border-color: var(--varial-danger, #dc2626);
  color: #fff;
}

.fin-actions .btn + .btn {
  margin-left: 0.25rem;
}

/* ── "Add financial position" — centred, glowing primary CTA (#3271) ── */
.fin-add-trigger-row td {
  text-align: center;
}

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

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

@keyframes fin-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) {
  .fin-add-product-btn {
    animation: none;
    box-shadow: 0 0 0.6rem 0.1rem rgba(5, 150, 105, 0.5);
  }
}

/* ── Let row-action tooltips escape the wrapper on desktop (#3271) ──
   Match the supply table (.table-actions-unclipped): its wrapper is overflow:visible on
   desktop so the shared ws-tip (rendered above + centred) isn't clipped by the first row
   or the right edge. On desktop we drop the capped scroll + overflow so the financial tips
   behave identically; mobile keeps the responsive scroll for horizontal room. */
@media (min-width: 992px) {
  .fin-scroll {
    overflow: visible;
    max-height: none;
  }
  /* Internal scroll is gone on desktop, so the sticky header isn't needed (and would
     otherwise stick to the viewport). Keep it only for the mobile capped scroll. */
  .fin-scroll thead th {
    position: static;
  }
}