/* 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 {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  width: auto;
  flex-wrap: nowrap;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scrollbar-width: thin;
  /* Horizontal scrolling with no visible edge is easy to miss on a phone, so the strip
     snaps per tab and fades at the trailing edge to show there is more. */
  scroll-snap-type: x proximity;
  /* The shadow only appears on the side that still has tabs behind it. The two cover
     gradients are attached to the content (`local`), so each sits over its shadow while
     that end is in view; when every tab fits, both ends are in view at once and both
     shadows stay covered. That makes the affordance switch itself off rather than shading
     a tab that is fully visible, which a plain mask on the trailing edge would do. */
  background:
    linear-gradient(to right, var(--shell-background) 30%, rgba(246, 248, 250, 0)),
    linear-gradient(to left, var(--shell-background) 30%, rgba(246, 248, 250, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(32, 59, 96, 0.16), rgba(32, 59, 96, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(32, 59, 96, 0.16), rgba(32, 59, 96, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.portfolio-selector #portfolio-filter-container .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  scroll-snap-align: start;
  height: 48px;
  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; }
/* 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; }
.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; }
}