/* Portfolio overview, with selectors retained for XHR and live-price updates.
   Spacing, type and the content column come from the design-system tokens in
   styleguide/colors.css. Raw px values below are hairlines, dots and control heights,
   which are not spacing and do not belong on the 4px ladder. */
.portfolio-page .main-content {
  max-width: calc(var(--content-max) + var(--content-gutter) * 2);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--content-gutter) var(--spacing-2xl);
  overflow: visible;
}
.portfolio-page .portfolio-header { overflow: visible; margin-top: 0 !important; padding: 0; }

/* Zone 1: page title, with portfolio management as its only action */
.portfolio-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.portfolio-heading h1 { margin: 0; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.03em; }
.portfolio-heading .portfolio-manage {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--shell-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.portfolio-heading .portfolio-manage:hover { background: #edf2f5; color: var(--shell-ink); }

/* Zone 2: portfolio selector strip. #portfolio-filter-container is referenced by JS
   (portfolio-refresh.js, background-portfolio-manager.js) for pulse animations and badge
   updates, and holds only the portfolio tabs. The add-portfolio control is its sibling in
   .portfolio-add: inside the strip it scrolled out of reach on a phone. */
.portfolio-selector { display: flex; align-items: stretch; gap: var(--spacing-md); border-top: 0; border-bottom: 1px solid var(--shell-line); background: transparent; padding: 0; }
.portfolio-selector #portfolio-filter-container {
  --strip-row: 48px;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  width: auto;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  /* One row tall until the toggle beside it is pressed. The strip used to scroll sideways,
     which put twenty near-identical wallet names behind a scrollbar; clipping to the first row
     keeps the header one line tall and hands the rest to the toggle, which lets the strip wrap
     onto as many rows as it needs. Tabs arrive largest first, so the row that stays is the one
     worth reading. */
  max-height: var(--strip-row);
  overflow: hidden;
}
.portfolio-selector #portfolio-filter-container.show-all { max-height: none; }
.portfolio-selector #portfolio-filter-container .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  height: var(--strip-row);
  padding: 0 0 var(--spacing-md);
  margin: 0 !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--shell-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow: none;
  transform: none;
}
.portfolio-selector #portfolio-filter-container .btn:hover { color: var(--shell-ink); }
.portfolio-selector #portfolio-filter-container .btn-selected { color: var(--shell-green); border-bottom-color: var(--shell-green); font-weight: 800; }
.portfolio-selector #portfolio-filter-container .btn[data-role="filter"]::after {
  content: attr(data-positions-count);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: #eaf0f3;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
}
.portfolio-selector #portfolio-filter-container .btn-selected::after { background: #dff4e9; }
.portfolio-selector .position-badge { display: none; }
.portfolio-strip-tools { display: flex; align-items: flex-end; gap: var(--spacing-sm); flex-shrink: 0; padding-bottom: var(--spacing-md); }
.portfolio-strip-fold { height: 32px; padding: 0 var(--spacing-sm); border: 1px solid var(--shell-line); border-radius: var(--radius-sm); background: transparent; color: var(--shell-muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.portfolio-strip-fold:hover { background: #edf2f5; color: var(--shell-ink); }
.portfolio-strip-fold:focus-visible { outline: 2px solid var(--shell-ink); outline-offset: 1px; }
/* On a phone a row holds one or two tabs, so the toggle takes its own row under the strip
   rather than eating half of the one row there is. */
@media (max-width: 576px) {
  .portfolio-selector { flex-wrap: wrap; }
  .portfolio-selector #portfolio-filter-container { flex: 1 1 0; }
  .portfolio-strip-tools { order: 3; flex-basis: 100%; padding-top: var(--spacing-xs); }
}
/* An icon rather than a second labelled control: "Portfolios beheren" sits right above it
   and opens the same panel, so two labels read as one thing said twice. It sits beside the
   strip rather than in it, so it stays reachable once the strip scrolls, with its bottom
   edge on the tab labels. */
.portfolio-add {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  padding-bottom: var(--spacing-md);
}
.portfolio-selector .portfolio-add-tab {
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--shell-muted);
  box-shadow: none;
}
.portfolio-selector .portfolio-add-tab:hover { background: #edf2f5; color: var(--shell-ink); }

/* Zone 3: the balance and the actions on it. One grid, so the two columns share rows:
   the button row bottoms out on the balance, and the live-price line sits on the same
   baseline as the total-value caption. Centring two unequal columns, which is what this
   did before, leaves them sharing no line at all. */
.portfolio-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-md);
  align-items: end;
  padding: var(--spacing-xl) 0;
}
.portfolio-summary { display: contents; }
.portfolio-selection-name {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  color: var(--shell-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.portfolio-selection-name::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #23d59b; }
.portfolio-value-row { grid-area: 2 / 1; display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; }
.portfolio-page .portfolio-total-value {
  font-size: clamp(2.25rem, 3.2vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.portfolio-value-context { grid-area: 3 / 1; display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; color: var(--shell-muted); font-size: var(--text-xs); }
.portfolio-overview-actions { display: contents; }
.portfolio-action-buttons { grid-area: 2 / 2; display: flex; align-self: end; gap: var(--spacing-sm); }
.portfolio-action-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: 40px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  margin: 0 !important;
  background: white;
  color: var(--shell-ink);
  box-shadow: none;
}
.portfolio-action-buttons .btn-primary { background: var(--shell-ink); border-color: var(--shell-ink); color: white; }
.portfolio-action-buttons .btn:hover { background: #edf2f5; }
.portfolio-action-buttons .btn-primary:hover { background: #2c4e77; }
.portfolio-overview .live-price-status { grid-area: 3 / 2; display: inline-flex; align-items: center; justify-self: end; gap: var(--spacing-sm); color: var(--shell-muted); font-size: var(--text-xs); }

/* Holdings */
.portfolio-holdings { border: 1px solid var(--shell-line); border-radius: var(--radius-md); background: white; min-width: 0; box-shadow: 0 3px 10px #203b6003; }
/* The heading repeats the page title, so it is kept for assistive tech only and the strip
   carries the table's own controls. */
.portfolio-holdings-header { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-lg); }
.portfolio-currency { display: inline-flex; gap: var(--spacing-sm); align-items: center; color: var(--shell-muted); font-size: var(--text-xs); text-decoration: none; }
.portfolio-currency strong { background: #f3f6f8; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); color: var(--shell-ink); }
.portfolio-currency:hover { color: var(--shell-ink); }
.portfolio-currency:hover strong { background: #e7edf2; }
/* Narrow screens drop columns rather than scroll, but the wrapper keeps the table from
   pushing the page sideways when a very long symbol survives that. */
.portfolio-holdings .re_portfolio-table-container { position: relative; border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); margin: 0; min-height: 100px; box-shadow: none; overflow-x: auto; }
.portfolio-holdings .re_portfolio-table { font-size: var(--text-sm); }
.portfolio-holdings .re_portfolio-table thead th { background: #fafbfc; border-block: 1px solid #e9eef2; color: var(--shell-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; padding: var(--spacing-sm) var(--spacing-md); white-space: nowrap; }
.portfolio-holdings .re_portfolio-table tbody td { padding: var(--spacing-lg) var(--spacing-md); font-variant-numeric: tabular-nums; }
.portfolio-holdings .re_portfolio-table th:first-child, .portfolio-holdings .re_portfolio-table td:first-child { padding-left: var(--spacing-lg); }
.portfolio-holdings .re_portfolio-table th:last-child, .portfolio-holdings .re_portfolio-table td:last-child { padding-right: var(--spacing-lg); }
.portfolio-holdings .asset-info { gap: var(--spacing-sm); min-width: 140px; }
.portfolio-holdings .asset-name { font-size: var(--text-sm); font-weight: 800; }
.portfolio-holdings .asset-description, .portfolio-holdings .asset-symbol { font-size: var(--text-xs); margin-top: var(--spacing-xs); }
.portfolio-sync-icon { font-size: 0.65em; }
/* Chain of a wallet-synced position, and the chips that narrow the table to one chain of a
   wallet followed on several. Quiet by design: the chain qualifies a holding, it is not one. */
.portfolio-holdings .position-chain-label { display: inline-block; margin-left: var(--spacing-xs); padding: 0 var(--spacing-xs); border: 1px solid var(--shell-line); border-radius: var(--radius-sm); color: var(--shell-muted); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.portfolio-holdings .position-chain-filter { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border-top: 1px solid #e9eef2; }
/* Shape, colour and the selected state come from .btn-selected/.btn-unselected, the same pair
   the dashboard period switch uses. Only the size is taken down to the table's own meta type,
   through the button's variables rather than over them, and the macro's me-2 margin is dropped
   in favour of the row's flex gap. */
.portfolio-holdings .position-chain-filter .btn {
  --bs-btn-padding-x: var(--spacing-md);
  --bs-btn-padding-y: var(--spacing-xs);
  --bs-btn-font-size: var(--text-xs);
  margin: 0 !important;
  font-weight: 700;
}
.portfolio-holdings .primary-price, .portfolio-holdings .position-quantity { font-size: var(--text-sm); }
.portfolio-holdings .secondary-price { font-size: var(--text-xs); }
.portfolio-holdings .total-value .primary-price { font-size: var(--text-sm); font-weight: 800; }
.portfolio-holdings .price-change-24h { font-size: var(--text-xs); white-space: nowrap; }
.holding-actions-toggle { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border: 1px solid var(--shell-line); border-radius: var(--radius-sm); background: white; color: var(--shell-ink); }
.holding-actions-toggle:hover { background: #edf2f5; }
.holding-actions-menu { position: fixed; inset: auto; margin: 0; width: max-content; max-width: calc(100vw - var(--spacing-lg)); max-height: calc(100dvh - var(--spacing-lg)); overflow-y: auto; padding: var(--spacing-xs); border: 1px solid var(--shell-line); border-radius: var(--radius-md); box-shadow: 0 10px 30px #203b601b; background: white; color: var(--shell-ink); }
.holding-actions-menu .holding-action-link { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; border: 0; border-radius: var(--radius-sm); margin: 0 !important; padding: var(--spacing-sm) var(--spacing-sm); font-size: var(--text-xs); font-weight: 600; text-align: left; background: white; color: var(--shell-ink); box-shadow: none; }
.holding-actions-menu .holding-action-link:hover { background: #f3f6f8; transform: none; }
.holding-actions-menu .btn-danger { color: #b63b4a; }
.holding-actions-menu .holding-action-disabled { color: var(--shell-muted); opacity: 0.6; cursor: not-allowed; }
.portfolio-history-hint { display: flex; align-items: center; gap: var(--spacing-md); margin: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); border: 1px solid #e1efe8; background: #f4faf7; border-radius: var(--radius-sm); padding: var(--spacing-md); font-size: var(--text-xs); color: #3f6a5a; }
.portfolio-history-hint > i { padding: var(--spacing-sm); background: #e7f3ec; border-radius: var(--radius-sm); }
.portfolio-history-hint p { margin: var(--spacing-xs) 0 0; font-size: var(--text-xs); }
.portfolio-history-hint a { margin-left: auto; color: var(--shell-green) !important; white-space: nowrap; text-decoration: none; }
.portfolio-history-hint a i { margin-left: var(--spacing-sm); }

/* Group scope strip. Single-select: it narrows the whole page, totals and exports
   included, where the portfolio tabs below are a multi-select filter on the table.
   A segmented control carries that difference; the shared page-header-selector box
   it ships with belongs to the old header and clashes with the tab row. */
.portfolio-group-scope { border: 0; background: transparent; padding: 0; margin-bottom: var(--spacing-md); }
#portfolio-group-container {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: #eef2f5;
  overflow-x: auto;
  scrollbar-width: thin;
}
#portfolio-group-container .btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  min-height: 0;
  padding: 0 var(--spacing-md);
  margin: 0 !important;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--shell-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: none;
  transform: none;
}
#portfolio-group-container .btn:hover { color: var(--shell-ink); }
#portfolio-group-container .btn-selected {
  background: #fff;
  color: var(--shell-ink);
  box-shadow: 0 1px 3px #203b6017;
}

@media (max-width: 767px) {
  .portfolio-heading { margin-bottom: var(--spacing-md); gap: var(--spacing-sm); }
  .portfolio-heading .portfolio-manage { padding-inline: var(--spacing-sm); }
  .portfolio-overview { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-lg) 0; }
  .portfolio-selection-name, .portfolio-value-row, .portfolio-value-context { grid-area: auto; }
  /* Side by side, both labels overflow a 390px screen. */
  .portfolio-action-buttons { grid-area: auto; flex-direction: column; width: 100%; }
  .portfolio-action-buttons .btn { width: 100%; }
  .portfolio-overview .live-price-status { grid-area: auto; justify-self: start; }
  .portfolio-holdings-header { padding-inline: var(--spacing-md); }
  .portfolio-holdings .re_portfolio-table th, .portfolio-holdings .re_portfolio-table tbody td { padding: var(--spacing-md) var(--spacing-sm); }
  .portfolio-holdings .re_portfolio-table th:first-child, .portfolio-holdings .re_portfolio-table td:first-child { padding-left: var(--spacing-md); }
  .portfolio-holdings .re_portfolio-table th:last-child, .portfolio-holdings .re_portfolio-table td:last-child { padding-right: var(--spacing-md); }
  .portfolio-holdings .asset-info { gap: var(--spacing-sm); min-width: 0; }
  .portfolio-holdings .asset-name { max-width: 120px; overflow-wrap: anywhere; }
  .portfolio-history-hint { margin-inline: var(--spacing-sm); flex-wrap: wrap; }
  .portfolio-history-hint > i { display: none; }
  .portfolio-history-hint a { margin-left: 0; }
}

/* Chain detection in the wallet form: the button sits under the address, the chains it found
   list below it with their holdings. */
.wallet-chain-detect { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.wallet-chain-detect .wallet-detect-chains { justify-self: start; }
.wallet-detected-chains { color: var(--shell-muted); font-size: var(--text-xs); }
.wallet-detected-chain .form-check-label { color: var(--shell-ink); font-variant-numeric: tabular-nums; }