/* holdings.html -- filer browser table over data/thirteenf_snapshot.json plus
   a pie chart of one selected filer's holdings (fetched on demand from that
   filer's own data/<cik>_13f.json). Reuses the site's white-card /
   var(--color-border)-border / 8px-radius table language (see
   css/screener.css) rather than sharing that file, matching the site's
   per-page-stylesheet convention (see css/rankings.css). */

body {
  background: var(--color-bg);
  color: var(--color-text);

  /* Vivid, page-scoped overrides of the shared chart-series palette for the
     donut chart below -- deliberately not changed in css/base.css, since
     --chart-series-1..6 is also used by js/trend-chart.js on company.html
     and compare.html, and bumping their saturation here shouldn't leak into
     those unrelated charts. --chart-series-7/8/9..15/other/other-faint have
     no other consumer (see js/holdings.js), so overriding them here rather
     than in base.css is just for consistency, not strictly required.

     2026-08-24: --chart-series-1..15/other switched to the exact neon
     SERIES_COLORS_EXTENDED/OTHER_SLICE_COLOR hex values from
     Social-Media/common/palette.py, at the user's request to match the
     branded social-card pie chart's colors. Same values in all three
     theme blocks below (light default, prefers-color-scheme dark, explicit
     [data-theme="dark"]) -- unlike the rest of this palette, these neon
     hues aren't theme-adjusted, since they're meant to match the social
     cards' colors exactly rather than track the site's own light/dark
     brand palette. --chart-series-other-faint is untouched (unused by
     js/holdings.js; no faint variant exists in the neon palette). */
  --chart-series-1: #3d5afe;
  --chart-series-2: #ff9100;
  --chart-series-3: #00e5ff;
  --chart-series-4: #ffea00;
  --chart-series-5: #ff2fb0;
  --chart-series-6: #39ff14;
  --chart-series-7: #b026ff;
  --chart-series-8: #ff1744;
  --chart-series-9: #ff5c8a;
  --chart-series-10: #1de9b6;
  --chart-series-11: #7c4dff;
  --chart-series-12: #ffc400;
  --chart-series-13: #ff6e40;
  --chart-series-14: #40c4ff;
  --chart-series-15: #c6ff00;
  --chart-series-other: #4a5178;
  --chart-series-other-faint: #e3e7ec;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    --chart-series-1: #3d5afe;
    --chart-series-2: #ff9100;
    --chart-series-3: #00e5ff;
    --chart-series-4: #ffea00;
    --chart-series-5: #ff2fb0;
    --chart-series-6: #39ff14;
    --chart-series-7: #b026ff;
    --chart-series-8: #ff1744;
    --chart-series-9: #ff5c8a;
    --chart-series-10: #1de9b6;
    --chart-series-11: #7c4dff;
    --chart-series-12: #ffc400;
    --chart-series-13: #ff6e40;
    --chart-series-14: #40c4ff;
    --chart-series-15: #c6ff00;
    --chart-series-other: #4a5178;
    --chart-series-other-faint: #2e3a4e;
  }
}

:root[data-theme="dark"] body {
  --chart-series-1: #3d5afe;
  --chart-series-2: #ff9100;
  --chart-series-3: #00e5ff;
  --chart-series-4: #ffea00;
  --chart-series-5: #ff2fb0;
  --chart-series-6: #39ff14;
  --chart-series-7: #b026ff;
  --chart-series-8: #ff1744;
  --chart-series-9: #ff5c8a;
  --chart-series-10: #1de9b6;
  --chart-series-11: #7c4dff;
  --chart-series-12: #ffc400;
  --chart-series-13: #ff6e40;
  --chart-series-14: #40c4ff;
  --chart-series-15: #c6ff00;
  --chart-series-other: #4a5178;
  --chart-series-other-faint: #2e3a4e;
}

.holdings-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.2em 1.2em 5em 1.2em;
}

.holdings-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: 0.6em;
}

.holdings-page-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.25em 0;
}

.holdings-page-subtitle {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin: 0;
}

.holdings-page-count {
  flex: 0 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 0.45em 1em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-blue);
  white-space: nowrap;
}

.holdings-coverage-note {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin: 0 0 1.4em 0;
}

.holdings-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1em 1.4em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .04);
  padding: 1.2em 1.4em;
  margin-bottom: 1.6em;
}

.holdings-filter {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1 1 260px;
}

.holdings-filter label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.holdings-filter input {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5em 0.6em;
  font-size: 0.92rem;
  color: var(--brand-ink);
  background: var(--color-surface);
}

.holdings-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .04);
  overflow-x: auto;
  margin-bottom: 2em;
}

.holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.holdings-table thead th {
  text-align: left;
  padding: 0.85em 1em;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.holdings-table thead th:hover {
  color: var(--brand-blue);
}

.holdings-table td {
  padding: 0.85em 1em;
  border-bottom: 1px solid var(--color-surface-tint);
  vertical-align: middle;
  white-space: nowrap;
}

.holdings-table tbody tr {
  cursor: pointer;
}

.holdings-table tbody tr:hover {
  background: var(--color-surface-soft);
}

.holdings-table tbody tr.is-selected {
  background: var(--brand-blue-soft);
}

.holdings-table tbody tr:last-of-type td {
  border-bottom: none;
}

.holdings-col-right {
  text-align: right;
}

.holdings-col-left {
  text-align: left;
}

.holdings-manager-cell {
  font-weight: 700;
  color: var(--brand-ink);
}

.holdings-empty-state {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .04);
  padding: 3em 1.5em;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* Pie chart detail panel */

.holdings-detail-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .04);
  padding: 1.6em;
  margin-bottom: 1.6em;
}

.holdings-detail-section:empty {
  display: none;
}

.holdings-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 1.2em;
}

.holdings-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0;
}

.holdings-detail-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.holdings-detail-body {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
  align-items: flex-start;
}

.holdings-pie-chart-wrap {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
}

.holdings-pie-chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.holdings-pie-legend {
  flex: 1 1 320px;
  min-width: 0;
}

.holdings-legend-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--color-surface-tint);
  font-size: 0.88rem;
}

.holdings-legend-row:last-child {
  border-bottom: none;
}

.holdings-legend-row--capped .holdings-legend-name,
.holdings-legend-row--capped .holdings-legend-value,
.holdings-legend-row--capped .holdings-legend-pct {
  font-weight: 700;
  color: var(--color-text);
}

.holdings-legend-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: 100%;
  padding: 0.5em 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-surface-tint);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
}

.holdings-legend-toggle-arrow {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease;
}

.holdings-legend-toggle-arrow.rotated {
  transform: rotate(180deg);
}

.holdings-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.holdings-legend-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.holdings-legend-value {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.holdings-legend-pct {
  flex: 0 0 auto;
  width: 3.6em;
  text-align: right;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .holdings-filters {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .holdings-detail-body {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .holdings-pie-legend {
    flex-basis: auto;
  }

  .holdings-pie-chart-wrap {
    width: 220px;
  }
}