/* Holdings tab only -- shared tokens, page chrome, stat-strip, accordion,
   filter chips, and the generic sortable-table skeleton live in sp5.css. */

.sp5-ratio-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--sp5-surface-alt); gap: 2px;
}
.sp5-ratio-bar__seg--up { background: var(--sp5-positive); }
.sp5-ratio-bar__seg--down { background: var(--sp5-negative); }

/* --- Heat maps --- */
.sp5-heatmap-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 1.25rem;
}
.sp5-heatmap-col { display: flex; flex-direction: column; gap: 0.75rem; }
.sp5-heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 1px; }
.sp5-heat-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.05rem; aspect-ratio: 1.5; border-radius: 2px; cursor: default; font-size: 0.68rem; line-height: 1.15;
}
.sp5-heat-tile .sp5-sym { font-weight: 700; font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.sp5-heat-tile .sp5-dollar { font-variant-numeric: tabular-nums; opacity: 0.85; font-size: 0.92em; }
.sp5-heat-tile .sp5-pct { font-variant-numeric: tabular-nums; opacity: 0.9; }
.sp5-heat-tile.is-sell-ready, .sp5-heat-tile.is-buy-ready { box-shadow: inset 0 0 0 2px var(--sp5-accent-strong); }
.sp5-heat-tile .sp5-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--sp5-accent-strong); color: #fff; font-size: 0.72rem; padding: 0.35rem 0.55rem;
  border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 3;
}
.sp5-heat-tile:hover .sp5-tip, .sp5-heat-tile:focus-visible .sp5-tip { opacity: 1; }
.sp5-heat-tile:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }
.sp5-heat-legend {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--sp5-ink-muted);
}
.sp5-heat-legend__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }

/* --- Allocation bars --- */
.sp5-alloc-bar { display: flex; height: 40px; border-radius: 6px; overflow: hidden; background: var(--sp5-surface-alt); }
.sp5-alloc-seg { position: relative; flex: 1 1 0; min-width: 1px; cursor: default; }
.sp5-alloc-seg.is-sell-ready, .sp5-alloc-seg.is-buy-ready { border-top: 4px solid var(--sp5-accent-strong); }
.sp5-alloc-seg .sp5-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--sp5-accent-strong); color: #fff; font-size: 0.72rem; padding: 0.3rem 0.5rem;
  border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 2;
}
.sp5-alloc-seg:hover .sp5-tip, .sp5-alloc-seg:focus-visible .sp5-tip { opacity: 1; }
.sp5-alloc-seg:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }

/* --- Ledger scroll region: filter chips + table header stay pinned while
   rows scroll inside a fixed-height div, so the result-count footer below
   stays put instead of requiring a full-page scroll. --- */
.sp5-ledger-scroll {
  max-height: min(70vh, 640px);
  /* Single scroll container for both axes -- if .sp5-table-wrap below also
     carried its own overflow-x, the browser silently gives it an implicit
     overflow-y too, which makes it a SECOND scroll container nested inside
     this one. The thead's position:sticky then anchors to that inner
     (never-actually-scrolling) wrapper instead of this element, so it
     doesn't stick at all -- it just scrolls away under the sticky filter
     row. Keeping overflow here, and only here, is what makes the filter
     row and thead stick correctly together. */
  overflow: auto;
  border: 1px solid var(--sp5-border);
  border-radius: 8px;
}
.sp5-ledger-scroll .sp5-filter-row {
  position: sticky; top: 0; left: 0; z-index: 2;
  background: var(--sp5-surface);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--sp5-border);
}
/* Cancel sp5.css's base .sp5-table-wrap { overflow-x: auto } here -- that
   rule alone (any non-'visible' overflow-x with overflow-y left at the
   default) is what creates the nested scroll container above. Horizontal
   overflow of the wide table is instead caught by .sp5-ledger-scroll itself. */
.sp5-ledger-scroll .sp5-table-wrap { overflow-x: visible; }
/* Sits directly under the sticky filter row -- offset is measured in JS
   (holdings.js) since the chip row can wrap to two lines on narrow viewports. */
.sp5-ledger-scroll .sp5-sortable-table thead th {
  top: var(--sp5-filter-row-h, 44px);
  z-index: 1;
}

/* --- Ledger table (column widths + row content; skeleton is .sp5-sortable-table in sp5.css) --- */
.sp5-ledger col.col-symbol { width: 21%; }
.sp5-ledger col.col-price { width: 11%; }
.sp5-ledger col.col-day { width: 14%; }
.sp5-ledger col.col-value { width: 12%; }
.sp5-ledger col.col-cost { width: 18%; }
.sp5-ledger col.col-gl { width: 15%; }
.sp5-ledger col.col-pct { width: 9%; }

/* Tighter row height for the Ledger specifically -- overrides the shared
   .sp5-sortable-table tbody td padding (sp5.css) which Performance doesn't
   use, so this doesn't touch that tab. */
.sp5-ledger tbody td { padding-top: 0; padding-bottom: 0; line-height: 1.15; vertical-align: middle; }

/* .sp5-sym / .sp5-sym--industry / their tooltip are shared with Performance
   -- moved to sp5.css. */
tr.sp5-is-sell-ready { box-shadow: inset 3px 0 0 var(--sp5-positive); }
tr.sp5-is-buy-ready { box-shadow: inset 3px 0 0 var(--sp5-accent); }