/*
 * ROSA Capital - App-specific supplementary styles
 *
 * Sits on top of rosa_design_tokens.css. Token values (colours, type
 * scale, spacing) are consumed through var(--rc-*); never redefined
 * here. This file covers layout + components the design tokens don't
 * ship out of the box: the auth / dashboard / admin chrome, the data
 * tables, the form styling.
 *
 * No gradients, no drop shadows, no glows. Every surface is a flat
 * cream page with navy ink. Oxblood is reserved for accent moments.
 */

/* ---------- Layout shells ---------- */

.shell {
  min-height: 100vh;
  background: var(--rc-cream);
  color: var(--rc-navy);
}

.narrow {
  max-width: 520px;
  margin: var(--rc-space-12) auto;
  padding: 0 var(--rc-space-3);
}

.wide {
  max-width: var(--rc-container-max);
  margin: 0 auto;
  padding: var(--rc-space-4) var(--rc-space-3) var(--rc-space-8);
}

/* ---------- Top navigation ---------- */

.topbar {
  background: var(--rc-cream);
  border-bottom: 1px solid var(--rc-mist);
  padding: var(--rc-space-2) 0;
}
.topbar .inner {
  max-width: var(--rc-container-max);
  margin: 0 auto;
  padding: 0 var(--rc-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
}
.topbar .brand img {
  display: block;
  /* 32px matches the compact logo variant's tuned size
     (rosa_compact_horizontal.svg). Primary horizontal is used at 60px+
     only — per brand rule: compact for <60px, primary for ≥60px, never
     interchange. */
  height: 32px;
  width: auto;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  font-size: var(--rc-text-sm);
  color: var(--rc-slate);
}
.topbar nav a {
  color: var(--rc-navy);
  font-weight: 500;
}
.topbar nav a:hover {
  opacity: 0.8;
  text-decoration: none;
}
.topbar .userbox {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  color: var(--rc-slate);
  font-size: var(--rc-text-sm);
}
.topbar form.logout {
  margin: 0;
}
.topbar form.logout button {
  padding: 6px 12px;
  font-size: var(--rc-text-xs);
  background: transparent;
  color: var(--rc-slate);
  border: 1px solid var(--rc-mist);
}
.topbar form.logout button:hover {
  color: var(--rc-navy);
  border-color: var(--rc-slate);
}

/* ---------- Form surfaces (login, etc.) ---------- */

.surface {
  background: #FFFFFF;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-md);
  padding: var(--rc-space-6);
}

label {
  display: block;
  margin: var(--rc-space-2) 0 6px 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-slate);
}

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  background: #FFFFFF;
  color: var(--rc-navy);
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  font-family: var(--rc-font-body);
  font-size: var(--rc-text-base);
}
input:focus {
  outline: none;
  border-color: var(--rc-navy);
}

button:not(.btn),
.btn {
  font-family: var(--rc-font-body);
}

.actions {
  margin-top: var(--rc-space-3);
  display: flex;
  gap: var(--rc-space-2);
  align-items: center;
}

/* ---------- Messages (error / info banners) ---------- */

.banner {
  padding: 12px 16px;
  border-radius: var(--rc-radius-sm);
  font-size: var(--rc-text-sm);
  margin: var(--rc-space-2) 0;
}
.banner-error {
  background: #F9E6E9;
  border: 1px solid var(--rc-oxblood);
  color: var(--rc-oxblood);
}
.banner-warning {
  background: #FAF1E0;
  border: 1px solid var(--rc-warning);
  color: var(--rc-warning);
}
.banner-info {
  background: #FFFFFF;
  border: 1px solid var(--rc-mist);
  color: var(--rc-slate);
}

/* ---------- Eyebrow + lead ---------- */

.lead {
  font-size: var(--rc-text-lg);
  color: var(--rc-navy);
  margin: var(--rc-space-1) 0 var(--rc-space-3);
}

/* ---------- Data table styling (extends design-token base table) ---------- */

.grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rc-font-body);
}
.grid td,
.grid th {
  text-align: left;
  vertical-align: top;
}
.grid .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Delivery-status pills for the Sent Items page */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--rc-radius-sm);
  font-size: var(--rc-text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill-ok { background: #E6F1EC; color: var(--rc-gain); }
.pill-err { background: #F9E6E9; color: var(--rc-oxblood); }
.pill-muted { background: var(--rc-mist); color: var(--rc-slate); }

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: #FFFFFF;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  font-size: var(--rc-text-sm);
  color: var(--rc-slate);
}
.stat strong {
  font-family: var(--rc-font-display);
  font-weight: 500;
  color: var(--rc-navy);
  font-variant-numeric: tabular-nums;
}

/* ---------- Dev fallback banner ---------- */

.dev-fallback {
  background: #FAF1E0;
  border: 1px solid var(--rc-warning);
  border-radius: var(--rc-radius-sm);
  padding: 14px 16px;
  margin: var(--rc-space-2) 0;
  font-size: var(--rc-text-sm);
}
.dev-fallback .label {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-warning);
  margin-bottom: 6px;
}
.dev-fallback a {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-text-xs);
  word-break: break-all;
}

/* ---------- Utility ---------- */

.muted { color: var(--rc-slate); }
.dim { color: var(--rc-smoke); }
.stack-sm > * + * { margin-top: var(--rc-space-1); }
.stack-md > * + * { margin-top: var(--rc-space-3); }
.stack-lg > * + * { margin-top: var(--rc-space-6); }
.row { display: flex; gap: var(--rc-space-2); flex-wrap: wrap; align-items: center; }
.row-spaced { display: flex; gap: var(--rc-space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }

hr {
  border: 0;
  border-top: 1px solid var(--rc-mist);
  margin: var(--rc-space-4) 0;
}

/* ---------- Portfolio detail page ---------- */
/* Used by templates/account_detail.html. Mirrors the static mockup
   "Portfolio Page Mockup May-26.html" so the live page lines up with
   the design Ross signed off on. */

.tag-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: var(--rc-space-3) 0 var(--rc-space-1);
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--rc-mist);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rc-navy);
}
.chip-label {
  color: var(--rc-smoke);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.portfolio-id {
  margin-left: auto;
  font-family: var(--rc-font-display);
  font-weight: 500;
  color: var(--rc-slate);
  font-size: 14px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rc-space-2);
  margin: var(--rc-space-2) 0 0;
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: #fff;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-md);
  padding: var(--rc-space-2);
  min-width: 0;
}
.card .label { font-size: 10.5px; }
.card .value {
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1400px) { .card .value { font-size: 26px; } }
.card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rc-smoke);
  font-weight: 500;
  margin-bottom: var(--rc-space-1);
}
.card .value {
  font-family: var(--rc-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--rc-navy);
  line-height: 1.1;
  /* font-size + truncation handled by earlier rule */
}
.card .sub {
  font-size: 13px;
  color: var(--rc-smoke);
  margin-top: 6px;
}

.gain { color: var(--rc-gain); }
.loss { color: var(--rc-loss); }

/* Per-sub-portfolio breakdown row */
.acct-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rc-space-2);
  margin: var(--rc-space-2) 0 0;
}
.acct-card {
  background: #fff;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-md);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.acct-pill {
  display: inline-block;
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
.acct-pill.acct-D, .acct-pill[class*=" acct-D"] { background: var(--rc-navy); }
.acct-pill.acct-J, .acct-pill[class*=" acct-J"] { background: var(--rc-brass); }
.acct-card .acct-pill {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.acct-card .body { flex: 1; }
.acct-card .head {
  font-size: 13px;
  font-weight: 500;
  color: var(--rc-navy);
  margin-bottom: 4px;
}
.acct-card .head-sub {
  font-size: 11px;
  color: var(--rc-smoke);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.acct-card .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  font-size: 12px;
}
.acct-card .stat-label {
  color: var(--rc-smoke);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.acct-card .stat-val {
  font-family: var(--rc-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--rc-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Holdings table card */
.table-card {
  background: #fff;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-md);
  overflow: hidden;
  margin-top: var(--rc-space-3);
}
.table-card .table-header {
  padding: var(--rc-space-3);
  border-bottom: 1px solid var(--rc-mist);
}
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table-card th {
  background: var(--rc-cream);
}
.table-card tr:last-child td { border-bottom: none; }

.sector-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--rc-slate);
  background: var(--rc-mist);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.fund-name {
  font-weight: 500;
  color: var(--rc-navy);
  font-size: 13px;
}
.fund-sub {
  font-size: 11px;
  color: var(--rc-smoke);
  margin-top: 2px;
  font-family: var(--rc-font-mono);
}

/* ---------- Phase 4b: Performance chart ---------- */
.chart-card {
  background: #fff;
  border: 1px solid rgba(10, 31, 61, 0.12);
  border-radius: 8px;
  padding: var(--rc-space-3);
  margin-top: var(--rc-space-4);
}
.chart-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-2);
  flex-wrap: wrap;
}
.chart-canvas-wrap {
  position: relative;
  height: 360px;
  width: 100%;
}
@media (max-width: 768px) {
  .chart-canvas-wrap { height: 280px; }
}

/* ---------- Phase 4b additions: charts row + recent-activity table ---------- */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-4);
}
@media (max-width: 980px) {
  .charts-row { grid-template-columns: 1fr; }
}
.charts-row .chart-card {
  margin-top: 0;
}

/* Transaction-type pill — colour-coded by category */
.txn-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(10, 31, 61, 0.08);
  color: var(--rc-navy);
}
.txn-purchase   { background: rgba(45, 106, 79, 0.15); color: var(--rc-gain); }
.txn-sale       { background: rgba(155, 44, 44, 0.15); color: var(--rc-loss); }
.txn-dividend   { background: rgba(198, 139, 35, 0.18); color: #8B5A0E; }
.txn-fee        { background: rgba(10, 31, 61, 0.10); color: var(--rc-navy); }

/* Phase 4b iteration: chart fills page width, allocation moved lower */
.chart-canvas-wrap-tall { height: 420px; }
@media (max-width: 768px) { .chart-canvas-wrap-tall { height: 320px; } }
.chart-canvas-wrap-doughnut { height: 340px; max-width: 720px; margin: 0 auto; }

.benchmark-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: var(--rc-space-2) 0;
  padding: 10px 12px;
  background: rgba(10, 31, 61, 0.04);
  border-radius: 6px;
  font-size: 13px;
}
.benchmark-toggles-label { font-weight: 600; margin-right: 4px; }
.benchmark-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border-radius: 4px;
}
.benchmark-toggle:hover { background: rgba(10, 31, 61, 0.06); }
.benchmark-toggle input { cursor: pointer; }
.bm-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Sortable table headers */
table.sortable th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  position: relative;
}
table.sortable th[data-sort-key]:hover {
  background: rgba(10, 31, 61, 0.04);
}
.sort-caret {
  display: inline-block;
  width: 8px;
  margin-left: 4px;
  color: rgba(10, 31, 61, 0.35);
  font-size: 10px;
}
table.sortable th.sort-asc  .sort-caret::after { content: "▲"; color: var(--rc-navy); }
table.sortable th.sort-desc .sort-caret::after { content: "▼"; color: var(--rc-navy); }

/* ---------- Round 2: filter bar + 2-row tiles + benchmark dropdown ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-3);
  margin: var(--rc-space-3) 0;
  padding: 10px 14px;
  background: rgba(10, 31, 61, 0.04);
  border-radius: 6px;
}
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--rc-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-chip {
  appearance: none;
  border: 1px solid rgba(10, 31, 61, 0.18);
  background: #fff;
  color: var(--rc-navy);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.filter-chip:hover { background: rgba(10, 31, 61, 0.06); }
.filter-chip.active {
  background: var(--rc-navy);
  color: var(--rc-cream);
  border-color: var(--rc-navy);
}
.filter-select {
  appearance: none;
  border: 1px solid rgba(10, 31, 61, 0.18);
  background: #fff;
  color: var(--rc-navy);
  padding: 5px 28px 5px 11px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%230A1F3D'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 8px;
}

.cards-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: var(--rc-space-3) 0 6px 0;
  color: rgba(10, 31, 61, 0.55);
}

/* Benchmark dropdown (replaces the row-of-checkboxes) */
.benchmark-dropdown {
  margin: var(--rc-space-2) 0;
  display: inline-block;
  position: relative;
}
.benchmark-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid rgba(10, 31, 61, 0.18);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: var(--rc-navy);
  user-select: none;
  list-style: none;
}
.benchmark-dropdown summary::-webkit-details-marker { display: none; }
.benchmark-dropdown-label { font-weight: 600; }
.benchmark-dropdown-count {
  background: rgba(10, 31, 61, 0.08);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
}
.benchmark-dropdown-caret { font-size: 10px; color: rgba(10, 31, 61, 0.5); }
.benchmark-dropdown[open] .benchmark-dropdown-caret { transform: rotate(180deg); display: inline-block; }
.benchmark-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid rgba(10, 31, 61, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(10, 31, 61, 0.12);
  padding: 10px 12px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Round 3: chart toggle buttons (% / £, include/exclude cash) */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--rc-space-2) 0;
  align-items: center;
}
.chart-toggle-group {
  display: inline-flex;
  border: 1px solid rgba(10, 31, 61, 0.18);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.chart-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rc-navy);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border-right: 1px solid rgba(10, 31, 61, 0.18);
}
.chart-toggle:last-child { border-right: 0; }
.chart-toggle:hover { background: rgba(10, 31, 61, 0.06); }
.chart-toggle.active {
  background: var(--rc-navy);
  color: var(--rc-cream);
}

/* ---------- Polish pass: page header, holdings table, allocation bars ---------- */
.page-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-1);
}
.page-title-row h1 { margin: 0; }
.page-status {
  font-size: 13px;
  color: var(--rc-slate);
}

/* Holdings table — narrower column rendering so 10 cols fit on desktop */
.holdings-table { table-layout: fixed; width: 100%; }
.holdings-table th, .holdings-table td {
  padding: 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Holdings column widths sum to exactly 100% so the fixed-layout
   table doesn't have to rescale. Fund takes the biggest share
   (truncates with ellipsis); Acct is tiny; the rest split evenly. */
.holdings-table .col-acct   { width: 4%; }
.holdings-table .col-fund   { width: 21%; max-width: 0; }
.holdings-table .col-units  { width: 9%; }
.holdings-table .col-avg    { width: 10%; }
.holdings-table .col-price  { width: 10%; }
.holdings-table .col-days   { width: 6%; }
.holdings-table .col-value  { width: 12%; }
.holdings-table .col-pnl    { width: 11%; }
.holdings-table .col-pnlpct { width: 8.5%; }
.holdings-table .col-alloc  { width: 8.5%; }
/* Total: 4 + 21 + 9 + 10 + 10 + 6 + 12 + 11 + 8.5 + 8.5 = 100%.
   Polish v7.1 rebalance: stole 7% from fund column (already ellipsis-
   truncates with hover-for-full via .fund-link[title]) and gave it to
   value (+3) / pnl (+2) / avg (+1) / price (+1). Value/pnl get the
   most because they carry the longest formatted numbers (£12,345,678
   and ±£1,234,567 respectively). */
.holdings-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rc-slate);
  font-weight: 600;
}
.holdings-table .fund-link {
  color: var(--rc-navy);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted rgba(10, 31, 61, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.holdings-table .fund-link:hover { color: var(--rc-oxblood); border-bottom-color: var(--rc-oxblood); }
.holdings-table .fund-link.no-link { border-bottom-style: none; cursor: help; }

/* Allocation HTML bars (replaces doughnut) */
.allocation-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: var(--rc-space-2);
}
.alloc-row {
  display: grid;
  grid-template-columns: 220px 1fr 100px 60px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.alloc-label {
  color: var(--rc-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alloc-bar-track {
  background: var(--rc-mist);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}
.alloc-bar-fill {
  background: var(--rc-navy);
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.alloc-row:nth-child(2n)  .alloc-bar-fill { background: var(--rc-oxblood); }
.alloc-row:nth-child(3n)  .alloc-bar-fill { background: var(--rc-brass); }
.alloc-row:nth-child(5n)  .alloc-bar-fill { background: var(--rc-gain); }
.alloc-row:nth-child(7n)  .alloc-bar-fill { background: var(--rc-info); }
.alloc-row:nth-child(11n) .alloc-bar-fill { background: var(--rc-slate); }
.alloc-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.alloc-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--rc-slate);
}
@media (max-width: 720px) {
  .alloc-row { grid-template-columns: 1fr 80px 60px; }
  .alloc-row .alloc-bar-track { grid-column: 1 / -1; }
}

/* Custom range pickers row */
.custom-range-pickers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.custom-range-pickers input[type="date"] {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--rc-mist);
  border-radius: 4px;
  background: #fff;
  color: var(--rc-navy);
  font-family: var(--rc-font-body);
}

/* Polish v2: inline brand wordmark (replaces the SVG logo on this page) */
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--rc-font-display);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand-rosa    { color: var(--rc-navy); }
.brand-capital { color: var(--rc-oxblood); margin-left: 8px; }

/* Range button group — replaces the <select> dropdown per mockup */
.range-buttons {
  display: inline-flex;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  background: #fff;
}
.range-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rc-navy);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-right: 1px solid var(--rc-mist);
  font-family: var(--rc-font-body);
}
.range-button:last-child { border-right: 0; }
.range-button:hover { background: rgba(10, 31, 61, 0.06); }
.range-button.active {
  background: var(--rc-navy);
  color: var(--rc-cream);
}
.filter-date {
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  background: #fff;
  color: var(--rc-navy);
  font-family: var(--rc-font-body);
}

/* Allocation tabs + table (replaces the .allocation-bars container, same row layout) */
.alloc-tabs {
  display: inline-flex;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  background: #fff;
}
.alloc-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rc-navy);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-right: 1px solid var(--rc-mist);
  font-family: var(--rc-font-body);
}
.alloc-tab:last-child { border-right: 0; }
.alloc-tab:hover { background: rgba(10, 31, 61, 0.06); }
.alloc-tab.active {
  background: var(--rc-navy);
  color: var(--rc-cream);
}
.allocation-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: var(--rc-space-2);
}
.allocation-table .alloc-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 2fr) 110px 70px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

/* Chart header inline controls (Polish v3: controls in header right) */
.chart-header-with-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rc-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--rc-space-2);
}
.chart-header-with-controls .chart-controls {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Polish v4: right-align range filter group; tighten dropdown panel */
.filter-group-right { margin-left: auto; }

.benchmark-dropdown-panel {
  gap: 2px !important;          /* tighter rows */
  padding: 6px 8px !important;
}
.benchmark-dropdown-panel .benchmark-toggle {
  padding: 4px 6px;
  gap: 8px;
  line-height: 1.2;
}

/* Holdings: ensure number cells AND header are right-aligned consistently */
.holdings-table th.num,
.holdings-table td.num {
  text-align: right;
}

/* Table action buttons (CSV download etc.) right-aligned in the header */
.table-header-with-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rc-space-2);
  flex-wrap: wrap;
}
.table-actions { display: inline-flex; gap: 8px; align-items: center; }
.download-btn {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--rc-mist);
  border-radius: var(--rc-radius-sm);
  background: #fff;
  color: var(--rc-navy);
  text-decoration: none;
}
.download-btn:hover {
  background: var(--rc-navy);
  color: var(--rc-cream);
  border-color: var(--rc-navy);
}

/* Load more row at bottom of activity table */
.load-more-row {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  padding: var(--rc-space-2);
  border-top: 1px solid var(--rc-mist);
  justify-content: center;
}
.load-more-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rc-navy);
  border-radius: var(--rc-radius-sm);
  background: #fff;
  color: var(--rc-navy);
  text-decoration: none;
}
.load-more-btn:hover {
  background: var(--rc-navy);
  color: var(--rc-cream);
}

/* Polish v6: activity table column widths + forced header right-align */

.activity-table { table-layout: fixed; width: 100%; }
.activity-table th, .activity-table td {
  padding: 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-table .col-date       { width: 80px; }
.activity-table .col-type       { width: 95px; }
.activity-table .col-instrument { width: auto; max-width: 0; }
.activity-table .col-qty        { width: 80px; }
.activity-table .col-price      { width: 80px; }
.activity-table .col-amount     { width: 110px; }
.activity-table .col-pnl-trade  { width: 100px; }
.activity-table .col-cash       { width: 105px; }

/* DERIVATIVES-account variant of the activity (cash ledger) table.
   Default widths truncate "Quantity" + "Cash balance" headers on TPP
   because futures rows carry longer numeric values and multi-currency
   running balances. Scoped via the .activity-table-deriv modifier so
   HOLDINGS accounts (7im SIPP) are unchanged. */
.activity-table.activity-table-deriv .col-qty   { width: 100px; }
.activity-table.activity-table-deriv .col-amount { width: 120px; }
.activity-table.activity-table-deriv .col-pnl-trade { width: 115px; }
.activity-table.activity-table-deriv .col-cash  { width: 140px; }

/* Closed-trades table: own column widths so the panel reads left-to-right
   without the right-heavy distortion from inheriting only the activity
   col-* widths (which left Instrument to absorb all stretch). */
.activity-table.closed-trades-table .ct-col-date       { width: 80px; }
.activity-table.closed-trades-table .ct-col-instrument { width: auto; max-width: 0; }
.activity-table.closed-trades-table .ct-col-qty        { width: 90px; }
.activity-table.closed-trades-table .ct-col-price      { width: 110px; }
.activity-table.closed-trades-table .ct-col-pnl        { width: 130px; }
.activity-table.closed-trades-table .ct-col-pnl-gbp    { width: 140px; }
.activity-table.closed-trades-table .ct-col-instrument .fund-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generic right-aligned button used by the closed-trades "Show all trades"
   toggle. Matches the look of the period-range buttons in the header. */
.rc-btn {
  background: var(--rc-color-card);
  color: var(--rc-color-text);
  border: 1px solid var(--rc-color-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.rc-btn:hover { background: var(--rc-color-hover, #f5f5f5); }

/* Polish v7: instrument cell truncates with ellipsis; full name on hover via td title attr.
   .fund-name is a block-level div, so it needs its own overflow rules — the td-level
   overflow/ellipsis doesn't propagate through a block child. */
.activity-table .col-instrument .fund-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Force right-alignment on .num headers — defensive against the
   sort-caret affecting visual centring. !important because we keep
   tripping on duplicate / ordering bugs. */
.holdings-table th.num,
.activity-table th.num { text-align: right !important; }

/* Sort caret must not push text leftward — absolute position so the
   text itself remains naturally right-aligned. */
.sort-caret {
  position: absolute;
  right: 4px;
  width: auto;
  margin-left: 0;
}
.holdings-table th[data-sort-key] { position: relative; padding-right: 16px; }

/* Load-all button — secondary visual weight vs Load 15 more */
.load-more-btn-all {
  background: var(--rc-cream);
  border-color: var(--rc-mist);
  color: var(--rc-slate);
  margin-left: 8px;
}
.load-more-btn-all:hover {
  background: var(--rc-slate);
  color: var(--rc-cream);
  border-color: var(--rc-slate);
}