/* ============================================================
   Portfolio page mock — Iter 12DI proposal
   Palette pulled from dashboard.css (Market Insight V2 / B2)
   ============================================================ */

:root {
  --bg:           #131316;
  --surface:      #1c1c20;
  --surface-2:    #1f1f24;
  --surface-hover:#222226;
  --border:       #2a2a30;
  --border2:      rgba(42,42,48,0.55);
  --accent:       #4F98A3;
  --accent-2:     #6FBCC9;
  --accent-bg:    rgba(79,152,163,0.10);
  --secondary:    #BB653B;
  --up:           #0EB35B;
  --up-bg:        rgba(14,179,91,0.12);
  --down:         #C24A4A;
  --down-bg:      rgba(194,74,74,0.12);
  --text:         #e0e0e0;
  --text-strong:  #ffffff;
  --text-muted:   #ffffff80;
  --text-faint:   #6e6e74;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow-sm:    0 1px 0 rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top bar (simplified mock of mi-topbar) ─── */
.mock-topbar {
  background: #1d1d22;
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex; align-items: center;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 10;
}
.mock-topbar-inner {
  display: flex; align-items: center; gap: 28px;
  width: 100%; max-width: 1440px; margin: 0 auto;
}
.mock-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; color: var(--text-strong);
  text-decoration: none;
}
.mock-brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
}
.mock-brand-light { color: var(--text-muted); font-weight: 500; }
.mock-brand-live {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--up-bg); color: var(--up);
  font-weight: 600; letter-spacing: 0.04em;
  margin-left: 6px;
}
.mock-brand-live::before { content: "●"; margin-right: 5px; font-size: 8px; }
.mock-nav { display: flex; gap: 22px; flex: 1; }
.mock-nav a {
  color: var(--text-muted); text-decoration: none; font-size: 13px;
  padding: 6px 0; position: relative;
}
.mock-nav a:hover { color: var(--text); }
.mock-nav a.active { color: var(--text-strong); }
.mock-nav a.active::after {
  content: ""; position: absolute; bottom: -19px; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
.mock-topbar-right { display: flex; align-items: center; gap: 12px; }
.mock-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4F98A3, #BB653B);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}

/* ─── Page ─── */
.portfolio-page {
  max-width: 1440px; margin: 0 auto;
  padding: 28px 24px 60px;
}

.portfolio-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.portfolio-title { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 0; letter-spacing: -0.01em; }
.portfolio-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* Iter 12EU: .portfolio-breadcrumb rules removed — markup was deleted from portfolio.html. */

/* ─── Sub-tab switcher (Dashboard | Holdings) ─── */
.pf-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  width: fit-content;
  margin-bottom: 22px;
}
.pf-tab-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-weight: 500; font-size: 13px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.pf-tab-btn:hover { color: var(--text); }
.pf-tab-btn.active {
  background: var(--accent); color: white;
  box-shadow: var(--shadow-sm);
}

.pf-panel { display: none; }
.pf-panel.active { display: block; animation: pf-fadeIn 0.25s ease both; }
@keyframes pf-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── KPI tiles ─── */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.pf-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.pf-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pf-kpi-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.pf-kpi-icon.value     { background: rgba(79,152,163,0.18); color: var(--accent-2); }
.pf-kpi-icon.profit    { background: rgba(14,179,91,0.16); color: var(--up); }
.pf-kpi-icon.irr       { background: rgba(150,120,255,0.16); color: #b08fff; }
.pf-kpi-icon.passive   { background: rgba(187,101,59,0.18); color: #d68a5a; }
.pf-kpi-label { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.pf-kpi-info { color: var(--text-faint); font-size: 11px; cursor: help; }

.pf-kpi-value {
  font-size: 24px; font-weight: 600; color: var(--text-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pf-kpi-value .pf-eye {
  color: var(--text-faint); font-size: 14px; margin-left: 6px; cursor: pointer;
}
.pf-kpi-sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pf-kpi-delta { font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pf-up   { color: var(--up); }
.pf-down { color: var(--down); }

/* Iter 13v — RAG signal pills used by the Signals column section.
   Compact, accessible (title attribute carries the rule reason), and
   keyboard-focusable via the parent <span> tooltip behaviour. The dot
   character (●) is colour-coded; — is rendered for none/no-data. */
.pf-sig {
  display: inline-block; min-width: 18px; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1;
  border-radius: 6px; padding: 2px 6px;
  cursor: help;
}
.pf-sig-green { color: #19a974; background: rgba(25, 169, 116, 0.12); }
.pf-sig-amber { color: #d9822b; background: rgba(217, 130, 43, 0.14); }
.pf-sig-red   { color: #d62828; background: rgba(214, 40, 40, 0.12); }
.pf-sig-none  { color: var(--text-muted); background: transparent; opacity: 0.6; }

/* ─── 2-column row: chart + sectors ─── */
.pf-row-2 {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 14px;
}
.pf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.pf-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pf-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  letter-spacing: 0.01em;
}
.pf-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.pf-chart-controls { display: flex; align-items: center; gap: 10px; }
.pf-timeframe {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.pf-tf-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 4px; cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.pf-tf-btn:hover { color: var(--text); }
.pf-tf-btn.active { background: var(--accent); color: white; }
.pf-unit-toggle {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.pf-unit-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 4px; cursor: pointer;
  min-width: 30px;
}
.pf-unit-btn.active { background: var(--accent); color: white; }

.pf-chart-wrap {
  height: 320px; position: relative;
}
.pf-chart-legend {
  display: flex; gap: 18px; margin-top: 12px;
  font-size: 12px;
}
.pf-chart-legend-item { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.pf-legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
.pf-chart-summary {
  display: flex; gap: 16px; margin-top: 6px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.pf-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.pf-summary-stat-label { color: var(--text-faint); font-size: 11px; letter-spacing: 0.02em; }
.pf-summary-stat-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Sector summary table (right of chart) ─── */
.pf-sector-list {
  display: flex; flex-direction: column;
  margin: 0 -4px;
}
/* Iter 12DZ — scrollable inner container so every sector is visible without
   stretching the panel taller than the chart card next to it. Header stays
   pinned at the top of the card. The max-height is tuned to roughly match
   the chart wrap (320px) plus the chart’s legend/summary so the two cards
   in the row stay visually aligned. */
#pfSectorRows {
  max-height: 360px;
  overflow-y: auto;
  /* Thin scrollbar that matches the rest of the app. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#pfSectorRows::-webkit-scrollbar { width: 8px; }
#pfSectorRows::-webkit-scrollbar-track { background: transparent; }
#pfSectorRows::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#pfSectorRows::-webkit-scrollbar-thumb:hover { background: var(--border2); }
.pf-sector-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.6fr;
  gap: 10px; padding: 0 12px 10px;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.pf-sector-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.6fr;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border2);
  position: relative;
  align-items: center;
  transition: background 0.15s;
}
.pf-sector-row:hover { background: var(--surface-hover); }
.pf-sector-row:last-child { border-bottom: none; }
.pf-sector-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
  background: var(--sector-color, var(--accent));
}
.pf-sector-name-block { display: flex; align-items: center; gap: 12px; }
.pf-sector-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--sector-color, var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.pf-sector-name { font-size: 13px; color: var(--text-strong); font-weight: 500; line-height: 1.3; }
.pf-sector-items { font-size: 11px; color: var(--text-muted); }
.pf-sector-val { font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; font-weight: 500; }
.pf-sector-invested { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-sector-gain { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-sector-gain-pct { font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-sector-alloc { font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

/* ─── Holdings tab ─── */
.pf-holdings-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pf-currency-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.pf-curr-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 4px; cursor: pointer;
}
.pf-curr-btn.active { background: var(--accent); color: white; }
.pf-show-sold { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.pf-show-sold input { cursor: pointer; }

.pf-search {
  flex: 1; min-width: 200px; max-width: 320px;
  position: relative; margin-left: auto;
}
.pf-search input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 32px 7px 12px;
  color: var(--text); font: inherit; font-size: 12px;
}
.pf-search input::placeholder { color: var(--text-faint); }
.pf-search input:focus { outline: none; border-color: var(--accent); background: rgba(79,152,163,0.06); }
.pf-search::after {
  content: "🔍"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; opacity: 0.5;
}

.pf-icon-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.pf-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }

.pf-add-btn {
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  margin-bottom: 14px;
}
.pf-add-btn:hover { background: var(--accent-2); }

/* Iter 12EQ — inline quick-add row for manual portfolios. Sits between the
   holdings toolbar and the sub-sub-tabs; only visible when exactly one
   manual (non-broker) portfolio is selected in the portfolio filter. */
.pf-quick-add {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pf-quick-add[hidden] { display: none; }
.pf-quick-add-target {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; flex-shrink: 0;
}
.pf-quick-add-target strong { color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; }
.pf-quick-add-fields {
  display: flex; align-items: center; gap: 8px;
  flex: 1; flex-wrap: wrap;
}
.pf-quick-add-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.pf-quick-add-input:focus {
  outline: none; border-color: var(--accent); background: var(--surface-hover);
}
.pf-quick-add-input::placeholder { color: var(--text-faint); }
.pf-quick-add-ticker { flex: 1.4; min-width: 120px; text-transform: uppercase; letter-spacing: 0.02em; }
.pf-quick-add-num    { flex: 1;   min-width: 90px; }
.pf-quick-add-ccy    { flex: 0 0 78px; cursor: pointer; }
.pf-quick-add-btn {
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pf-quick-add-btn:hover:not(:disabled) { background: var(--accent-2); }
.pf-quick-add-btn:disabled { opacity: 0.6; cursor: progress; }
.pf-quick-add-error {
  flex-basis: 100%;
  font-size: 12px;
  color: #ff6b6b;
  padding-top: 2px;
}
@media (max-width: 720px) {
  .pf-quick-add { padding: 12px; }
  .pf-quick-add-fields { gap: 6px; }
  .pf-quick-add-ticker { flex-basis: 100%; }
  .pf-quick-add-num,
  .pf-quick-add-ccy { flex: 1; }
  .pf-quick-add-btn { flex-basis: 100%; }
}

/* Holdings sub-sub-tabs */
.pf-h-subtabs {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pf-h-subtab {
  background: transparent; border: none;
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-h-subtab:hover { color: var(--text); }
.pf-h-subtab.active { color: var(--accent-2); border-bottom-color: var(--accent); }

.pf-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pf-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.pf-table thead th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 12px 11px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: relative;
  user-select: none;
}
.pf-table thead th.right { text-align: right; }

/* Iter 12EL — sortable + draggable column headers.
   - Sortable data <th>s gain a grab cursor and a hover background to
     signal they're interactive.
   - The sort indicator (▲ / ▼ / ↕) sits inline next to the label.
     Idle (↕) is rendered at low opacity so it doesn't distract; the
     active one (▲ / ▼) is full opacity.
   - Dragging shows a faded source and a left-edge accent on the drop
     target so the user can see exactly where the column will land. */
.pf-table thead th.pf-th-sortable { cursor: grab; }
.pf-table thead th.pf-th-sortable:hover { background: rgba(255,255,255,0.04); }
.pf-table thead th.pf-th-sortable:active { cursor: grabbing; }
.pf-table thead th .pf-th-label { vertical-align: middle; }
.pf-table thead th .pf-sort-ind {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.85;
}
.pf-table thead th .pf-sort-ind.pf-sort-ind-idle { opacity: 0.25; }
.pf-table thead th.pf-th-sort-asc,
.pf-table thead th.pf-th-sort-desc { color: var(--text); }
.pf-table thead th.pf-th-dragging { opacity: 0.4; }
.pf-table thead th.pf-th-dragover {
  box-shadow: inset 2px 0 0 0 var(--accent-2, #4e9cff);
}
.pf-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border2);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.pf-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.pf-table tbody tr:last-child td { border-bottom: none; }
.pf-table td.right { text-align: right; }

.pf-holding-cell { display: flex; align-items: center; gap: 10px; }
.pf-holding-logo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2); font-weight: 700; font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Iter 12DP5a — real FMP logo image (reuses the watchlist's image-stock
   CDN via the shared mi-logo.js helper). Fills the round container;
   falls back to .pf-holding-logo-fb (letters) via inline onerror when
   FMP returns 404 (ETFs, unlisted tickers). */
.pf-holding-logo-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.pf-holding-logo-fb {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  color: var(--accent-2); font-weight: 700; font-size: 11px;
  letter-spacing: 0.02em;
}
.pf-holding-name { color: var(--text-strong); font-weight: 500; line-height: 1.3; }
.pf-holding-ticker { color: var(--text-muted); font-size: 11px; }

.pf-two-line { line-height: 1.35; }
.pf-two-line-1 { color: var(--text-strong); }
.pf-two-line-2 { color: var(--text-muted); font-size: 11px; }

/* Iter 12EM — ensure red/green wins on Total profit + Daily cells.
   Without these compound selectors the .pf-two-line-1/.pf-two-line-2 colours
   would tie on specificity with .pf-up/.pf-down and the cascade order
   (these two-line rules are declared after pf-up/pf-down) meant the
   primary $ amount sometimes painted as text-strong instead of green/red.
   We also bump the primary line to font-weight 600 when it carries an
   up/down class so positive/negative P&L reads cleanly at a glance. */
.pf-two-line-1.pf-up   { color: var(--up);   font-weight: 600; }
.pf-two-line-1.pf-down { color: var(--down); font-weight: 600; }
.pf-two-line-2.pf-up   { color: var(--up); }
.pf-two-line-2.pf-down { color: var(--down); }

.pf-cell-checkbox { width: 30px; padding: 0 0 0 16px !important; }
.pf-cell-checkbox input { cursor: pointer; }
.pf-cell-action {
  width: 40px; text-align: right;
  color: var(--text-faint); cursor: pointer;
  user-select: none;
}
.pf-portfolio-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text);
}
/* Iter 15k3 — removed the .pf-portfolio-tag::before coloured square. The
   broker logo (rendered immediately before the chip in the Portfolios
   column via .pf-broker-cell) now serves the same "which broker is this"
   purpose, so the little gradient square was redundant clutter between the
   logo and the portfolio name. Removed globally — the chip itself keeps
   its text-only styling everywhere it's used (Portfolios column on the My
   Holdings tab plus the Portfolio column on the General tab). */

.pf-empty {
  padding: 60px 30px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}

/* Subtle disclaimer */
.pf-disclaimer {
  margin-top: 18px;
  font-size: 11px; color: var(--text-faint);
  text-align: center;
}

@media (max-width: 1180px) {
  .pf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pf-kpi-grid { grid-template-columns: 1fr; }
  .portfolio-page { padding: 18px 14px 40px; }
  .pf-table { font-size: 12px; }
  .mock-nav { display: none; }
}

/* ============================================================
   Iter 12DI.2 — additions: portfolio filter, add popover,
   columns popover, GBP toggle
   ============================================================ */

/* Header actions row — right side of page header */
.portfolio-header-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* ─── Portfolio filter (multi-select) ─── */
.pf-portfolio-filter { position: relative; }
.pf-pf-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pf-pf-trigger:hover { background: var(--surface-hover); border-color: #383840; }
.pf-pf-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--accent);
}
.pf-pf-icon { color: var(--text-muted); display: inline-flex; }
.pf-pf-label { color: var(--text); }
.pf-pf-count {
  background: var(--accent); color: white;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 10px;
  min-width: 18px; text-align: center;
}
.pf-pf-caret { color: var(--text-muted); font-size: 10px; }

/* ─── Generic popover ─── */
.pf-popover {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: #232328;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02) inset;
  padding: 10px;
  z-index: 50;
  min-width: 280px;
}
.pf-popover[hidden] { display: none; }
.pf-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px;
}
.pf-popover-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pf-popover-link {
  background: none; border: none; color: var(--accent-2);
  font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.pf-popover-link:hover { color: white; }

/* Portfolio filter rows */
.pf-pf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.pf-pf-row:hover { background: rgba(255,255,255,0.04); }
.pf-pf-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  background: transparent;
  border: 1.5px solid #4a4a52;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-pf-row input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.pf-pf-row input[type="checkbox"]:checked::after {
  content: ""; display: block;
  width: 4px; height: 8px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pf-pf-row-name { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pf-row-count { color: var(--text-faint); font-size: 12px; }
.pf-pf-divider { height: 1px; background: var(--border); margin: 4px 0; }
.pf-pf-all { font-weight: 500; }

/* Iter 12EP — popover head actions row (Clear + "+ New" stacked horizontally). */
.pf-popover-actions {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Iter 12EP — inline delete button on manual portfolios. Hidden until the row
   is hovered (or focused for keyboard users) to keep the list visually calm. */
.pf-pf-row-del {
  background: none; border: none; color: var(--text-faint);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 4px; border-radius: 3px;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.pf-pf-row:hover .pf-pf-row-del,
.pf-pf-row-del:focus { opacity: 1; }
.pf-pf-row-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }

/* ─── Add investments button + popover ─── */
.pf-add-wrap { position: relative; }
.pf-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s;
}
.pf-add-btn:hover { background: var(--accent-2); }
.pf-add-plus { font-size: 16px; line-height: 1; }
.pf-add-popover { min-width: 300px; padding: 12px; }
.pf-add-section { padding: 4px 0; }
.pf-add-section + .pf-add-section { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.pf-add-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 4px 8px;
}
.pf-add-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
}
.pf-add-card-row { display: flex; align-items: center; gap: 10px; }
.pf-add-card-icon {
  width: 28px; height: 28px;
  background: rgba(79,152,163,0.15);
  color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.pf-add-card-body { flex: 1; min-width: 0; }
.pf-add-card-title { font-size: 13px; font-weight: 500; color: var(--text); }
.pf-add-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pf-add-card-link { color: var(--accent-2); text-decoration: none; }
.pf-add-card-link:hover { text-decoration: underline; }
.pf-add-card-sync {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  opacity: 0.55;
  flex-shrink: 0;
}
.pf-add-card-cta {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 10px;
  cursor: pointer;
}
.pf-add-card-cta:hover { background: rgba(255,255,255,0.05); }
.pf-add-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: none;
  color: var(--text);
  font: inherit; font-size: 13px;
  text-align: left;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pf-add-row:hover { background: rgba(255,255,255,0.05); }
.pf-add-row-icon {
  width: 22px; height: 22px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500;
  flex-shrink: 0;
}

/* ─── Columns popover ─── */
.pf-cols-wrap { position: relative; }
.pf-cols-popover {
  min-width: 380px;
  padding: 12px;
}
.pf-cols-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 4px 6px;
}
.pf-cols-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.pf-col-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.pf-col-row:hover { background: rgba(255,255,255,0.04); }
.pf-col-row-label { color: var(--text); flex: 1; }
/* Iter 13x — (ⓘ) info icon beside signal rows. Hover/tap surfaces the
   native browser title-attribute tooltip with the green/amber/red rule. */
.pf-col-row-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: help;
  user-select: none;
  flex-shrink: 0;
}
.pf-col-row-info:hover { color: var(--accent-2); background: rgba(255,255,255,0.06); }
.pf-col-switch {
  position: relative;
  width: 26px; height: 14px;
  background: #3a3a40;
  border-radius: 14px;
  transition: background .15s;
  flex-shrink: 0;
}
.pf-col-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  background: #cfcfd3;
  border-radius: 50%;
  transition: left .15s, background .15s;
}
.pf-col-row.is-on .pf-col-switch { background: var(--accent-2); }
.pf-col-row.is-on .pf-col-switch::after { left: 14px; background: white; }
.pf-col-row.is-on .pf-col-row-label { color: var(--text-strong); }

/* Tabs row \u2014 Dashboard/Holdings on left, actions on right */
.pf-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pf-tabs-row .pf-tabs { margin-bottom: 0; }

/* ============================================================
   NEW TRANSACTION MODAL (Iter 12DN)
   Styled to match the reference: dark dialog, top portfolio
   selector, tabs (Trades/Incomes/Expenses/Cash), 2-column grid
   for paired inputs, and a 3-button footer.
   ============================================================ */
.pf-txn-dialog {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.pf-txn-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.pf-txn-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

/* Header */
.pf-txn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.pf-txn-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
}
.pf-txn-title-prefix { color: var(--text-strong); }
.pf-txn-pf-select-wrap { display: inline-flex; align-items: center; }
.pf-txn-pf-select {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--accent-2);
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  padding: 2px 22px 2px 4px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
                    linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-pf-select:focus { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pf-txn-pf-select option { background: var(--surface-2); color: var(--text); }
.pf-txn-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-txn-close:hover { background: var(--surface-hover); color: var(--text-strong); }

/* Tabs */
.pf-txn-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid var(--border);
}
.pf-txn-tab {
  appearance: none; background: none; border: none;
  color: var(--text-muted);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pf-txn-tab:hover { color: var(--text); }
.pf-txn-tab.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}

/* Panels (scrollable body) */
.pf-txn-panel {
  display: none;
  padding: 18px 20px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.pf-txn-panel.active { display: block; }
.pf-txn-soon {
  color: var(--text-muted);
  font-size: 14px;
  padding: 28px 6px;
  text-align: center;
}

/* Fields */
.pf-txn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pf-txn-field-full { width: 100%; }
.pf-txn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pf-txn-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pf-txn-req { color: var(--down); }
.pf-txn-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--text-muted); color: var(--text-muted);
  font-size: 10px; font-weight: 700;
  cursor: help;
  margin-left: 2px;
}
.pf-txn-hint { font-size: 12px; color: var(--text-muted); min-height: 14px; }

.pf-txn-input-wrap { position: relative; display: flex; align-items: stretch; }
.pf-txn-input,
.pf-txn-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 12px;
  appearance: none;
}
.pf-txn-input:focus,
.pf-txn-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(79,152,163,0.04);
}
.pf-txn-input::placeholder,
.pf-txn-textarea::placeholder { color: var(--text-faint); }
.pf-txn-select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-select option { background: var(--surface-2); color: var(--text); }
.pf-txn-input-caret {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 12px;
}
.pf-txn-input-suffix {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 0 28px 0 10px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-input-suffix option { background: var(--surface-2); color: var(--text); }
.pf-txn-input-wrap > .pf-txn-input + .pf-txn-input-suffix {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pf-txn-input-wrap > .pf-txn-input:has(+ .pf-txn-input-suffix) {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.pf-txn-textarea { resize: vertical; min-height: 70px; }

/* Error banner */
.pf-txn-error {
  margin: 0 20px 12px;
  padding: 10px 12px;
  border: 1px solid var(--down);
  background: var(--down-bg);
  color: var(--down);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Footer */
.pf-txn-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.pf-txn-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pf-txn-btn:hover { background: var(--surface-hover); }
.pf-txn-btn-cancel { color: var(--text); }
.pf-txn-btn-save {
  background: transparent;
  border-color: transparent;
  color: var(--accent-2);
}
.pf-txn-btn-save:hover { background: var(--accent-bg); }
.pf-txn-btn-save-more {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.pf-txn-btn-save-more:hover { background: var(--accent-2); border-color: var(--accent-2); }
.pf-txn-btn[disabled] {
  opacity: 0.55; cursor: not-allowed;
}

/* Mobile */
@media (max-width: 640px) {
  .pf-txn-dialog {
    width: calc(100vw - 12px);
    border-radius: 12px;
  }
  .pf-txn-grid-2 { grid-template-columns: 1fr; }
  .pf-txn-footer { flex-wrap: wrap; }
  .pf-txn-btn { flex: 1 1 auto; min-width: 0; }
}

/* ----------------------------------------------------------------
   Iter 13y — Transactions sub-tab (list view).
   Uses the pf-txnl- ("transactions list") prefix to avoid colliding
   with the pre-existing pf-txn- namespace used by the manual entry
   dialog. Lives inside #pfTableWrap, swapped in when the user clicks
   the Transactions sub-tab.
   ---------------------------------------------------------------- */
.pf-txnl-table th, .pf-txnl-table td {
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.pf-txnl-table th { color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; }
.pf-txnl-table tbody tr:hover { background: var(--surface-hover); }
.pf-txnl-num { text-align: right; font-variant-numeric: tabular-nums; }

.pf-txnl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.pf-txnl-badge-buy  { background: rgba(34,197,94,0.12);  color: #16a34a; border-color: rgba(34,197,94,0.3); }
.pf-txnl-badge-sell { background: rgba(239,68,68,0.12);  color: #dc2626; border-color: rgba(239,68,68,0.3); }
.pf-txnl-badge-div  { background: rgba(59,130,246,0.12); color: #2563eb; border-color: rgba(59,130,246,0.3); }
.pf-txnl-badge-fee  { background: rgba(148,163,184,0.12);color: #64748b; border-color: rgba(148,163,184,0.3); }

.pf-txnl-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}
.pf-txnl-error { color: #dc2626; }

.pf-txnl-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 4px;
  gap: 12px;
}
.pf-txnl-pager-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.pf-txnl-pager-btn:hover:not([disabled]) { background: var(--surface-hover); }
.pf-txnl-pager-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pf-txnl-pager-info { color: var(--text-faint); font-size: 12px; }

/* ──────────────────────────────────────────────────────────────
   Iter 14a-14f — Dashboard analytical lift
   - .pf-row-3  : 3-up insight row (movers / conviction / signals)
   - .pf-whatchanged + .pf-wc-*  : "What changed today" strip (14f)
   - .pf-movers-*  : winners/losers split (14a)
   - .pf-conv-buckets  : earnings conviction roll-up (14b)
   - .pf-sig-health  : green/amber/red bars (14c)
   - .pf-theme-list  : thematic exposure rows (14d)
   - .pf-factor-list : factor tilt rows (14e)
   - .pf-card-source : tiny data-freshness chip in card head
   ────────────────────────────────────────────────────────────── */

/* 3-up insight row */
.pf-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Tiny data-freshness chip used in card head right-edge */
.pf-card-source {
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ─── 14f: What changed today (full-width strip) ─── */
.pf-whatchanged {
  margin-top: 14px;
}
/* Iter 14g.a — AI narrative strip above the 3-column grid. Hidden by default;
   shown only when payload.narrative.text is present. */
.pf-wc-narrative {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 4px 0 16px;
  border: 1px solid var(--border-subtle, rgba(140, 140, 140, 0.18));
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04));
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text, #1f2937);
  flex-wrap: wrap;
}
.pf-wc-narr-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}
.pf-wc-narr-text {
  flex: 1 1 auto;
  min-width: 200px;
}
.pf-wc-narr-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pf-wc-narrative {
    font-size: 12.5px;
    padding: 10px 12px;
  }
  .pf-wc-narr-meta {
    font-size: 10px;
  }
}
.pf-wc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pf-wc-col {
  min-width: 0;
}
.pf-wc-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pf-wc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-wc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.pf-wc-row .pf-wc-tkr { font-weight: 600; color: var(--text-strong); }
.pf-wc-row .pf-wc-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-wc-row .pf-wc-pct { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); }
.pf-wc-empty { font-size: 13px; color: var(--text-faint); padding: 6px 8px; }

/* ─── 14a: Today's movers (winners/losers split) ─── */
.pf-movers-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pf-movers-col { min-width: 0; }
.pf-movers-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  opacity: 0.85;
}
.pf-movers-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-movers-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.pf-movers-row .pf-mv-tkr { font-weight: 600; color: var(--text-strong); }
.pf-movers-row .pf-mv-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-movers-empty { font-size: 12px; color: var(--text-faint); padding: 4px 8px; }

/* ─── 14b: Earnings conviction roll-up ─── */
.pf-conv-buckets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-conv-bucket {
  display: grid;
  grid-template-columns: 90px 1fr 56px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.pf-conv-label {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-conv-bar-wrap {
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  overflow: hidden;
}
.pf-conv-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 200ms ease;
}
.pf-conv-count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.pf-conv-buy    .pf-conv-label { color: var(--up); }
.pf-conv-buy    .pf-conv-bar   { background: var(--up); }
.pf-conv-hold   .pf-conv-label { color: #d9822b; }
.pf-conv-hold   .pf-conv-bar   { background: #d9822b; }
.pf-conv-sell   .pf-conv-label { color: var(--down); }
.pf-conv-sell   .pf-conv-bar   { background: var(--down); }
.pf-conv-none   .pf-conv-label { color: var(--text-faint); }
.pf-conv-none   .pf-conv-bar   { background: var(--text-faint); opacity: 0.5; }

/* ─── 14c: Signal health bars ─── */
.pf-sig-health {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pf-sig-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
}
.pf-sig-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.pf-sig-stack {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  position: relative;
}
.pf-sig-seg {
  height: 100%;
  transition: width 200ms ease;
}
.pf-sig-seg-green { background: #2c8b3b; }
.pf-sig-seg-amber { background: #d9822b; }
.pf-sig-seg-red   { background: #d62828; }
.pf-sig-counts {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-top: 4px;
  grid-column: 2;
}
.pf-sig-counts .pf-sig-c-g { color: #2c8b3b; }
.pf-sig-counts .pf-sig-c-a { color: #d9822b; }
.pf-sig-counts .pf-sig-c-r { color: #d62828; }

/* ─── 14d: Thematic exposure list ─── */
.pf-theme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.pf-theme-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.pf-theme-row:hover { background: rgba(255,255,255,0.04); }
.pf-theme-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.pf-theme-name {
  font-weight: 600;
  color: var(--text-strong);
}
.pf-theme-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.pf-theme-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.pf-theme-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.pf-theme-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  grid-column: 1 / -1;
}

/* ─── 14e: Factor exposure list ─── */
.pf-factor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px;
}
.pf-factor-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.pf-factor-name {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-factor-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.pf-factor-track::before {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.pf-factor-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 4px;
}
.pf-factor-fill.pf-up   { background: #2c8b3b; }
.pf-factor-fill.pf-down { background: #d62828; }
.pf-factor-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.pf-factor-value.pf-up   { color: #2c8b3b; }
.pf-factor-value.pf-down { color: #d62828; }
.pf-factor-meta {
  font-size: 11px;
  color: var(--text-faint);
  grid-column: 2 / 3;
}

/* Responsive: stack on small screens */
@media (max-width: 980px) {
  .pf-row-3 { grid-template-columns: 1fr; }
  .pf-wc-grid { grid-template-columns: 1fr; gap: 14px; }
  .pf-movers-split { grid-template-columns: 1fr 1fr; }
  .pf-factor-row { grid-template-columns: 80px 1fr 46px; }
  .pf-sig-row { grid-template-columns: 92px 1fr; }
  .pf-conv-bucket { grid-template-columns: 70px 1fr 48px; }
}
@media (max-width: 600px) {
  .pf-movers-split { grid-template-columns: 1fr; }
}

/* ============================================================
   Iter 15c–15h — Performance pills, freshness pill, export menu,
   benchmark select, drilldown modal, welcome card.

   All styles namespaced under .pf- to match the rest of the file
   and keep the cascade contained. Dark-only (no light theme on
   portfolio yet); palette pulled from :root tokens above.
   ============================================================ */

/* ---- Freshness pill (header-right) ---------------------------- */
.pf-freshness-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pf-freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pf-freshness-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}
.pf-freshness-pill.pf-fr-live {
  color: var(--up);
  border-color: rgba(14,179,91,0.35);
  background: var(--up-bg);
}
.pf-freshness-pill.pf-fr-live::before {
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(14,179,91,0.18);
  animation: pf-fr-pulse 2.4s ease-in-out infinite;
}
.pf-freshness-pill.pf-fr-stale {
  color: #d6a52b;
  border-color: rgba(214,165,43,0.35);
  background: rgba(214,165,43,0.10);
}
.pf-freshness-pill.pf-fr-stale::before { background: #d6a52b; }
.pf-freshness-pill.pf-fr-eod {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface-2);
}
.pf-freshness-pill.pf-fr-eod::before { background: var(--text-faint); }
@keyframes pf-fr-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14,179,91,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(14,179,91,0.08); }
}

/* ---- Export menu --------------------------------------------- */
.pf-export-wrap {
  position: relative;
  display: inline-flex;
}
.pf-export-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pf-export-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--text-strong);
}
.pf-export-trigger svg { opacity: 0.85; }
.pf-export-caret { opacity: 0.7; font-size: 10px; }
.pf-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), var(--shadow-sm);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-export-menu[hidden] { display: none; }
.pf-export-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.pf-export-item:hover { background: var(--surface-hover); }
.pf-export-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.pf-export-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Welcome card -------------------------------------------- */
.pf-welcome-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin: 16px 0;
  background: linear-gradient(135deg, var(--accent-bg) 0%, rgba(79,152,163,0.02) 100%);
  border: 1px solid rgba(79,152,163,0.35);
  border-radius: 12px;
}
.pf-welcome-card[hidden] { display: none; }
.pf-welcome-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(79,152,163,0.18);
  border-radius: 12px;
}
.pf-welcome-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.pf-welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pf-welcome-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-welcome-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  transition: color 0.18s;
}
.pf-welcome-check {
  font-size: 16px;
  color: var(--text-faint);
  line-height: 1;
  width: 16px;
  text-align: center;
}
.pf-welcome-done { color: var(--text-muted); text-decoration: line-through; }
.pf-welcome-done .pf-welcome-check { color: var(--up); }
@media (max-width: 600px) {
  .pf-welcome-card { grid-template-columns: 1fr; }
  .pf-welcome-icon { width: 44px; height: 44px; font-size: 22px; }
}

/* ---- Performance pills (replace IRR tile) -------------------- */
.pf-kpi-perf { /* no extra layout; the pills below sit inside */ }
.pf-perf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pf-perf-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-strong);
  white-space: nowrap;
}
.pf-perf-pill.pf-up   { color: var(--up);   border-color: rgba(14,179,91,0.35); background: var(--up-bg); }
.pf-perf-pill.pf-down { color: var(--down); border-color: rgba(194,74,74,0.35); background: var(--down-bg); }

/* ---- Drillable KPI tiles ------------------------------------- */
.pf-kpi-drillable {
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pf-kpi-drillable:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(79,152,163,0.18);
}
.pf-kpi-drillable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Benchmark select ---------------------------------------- */
.pf-benchmark-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.pf-benchmark-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.pf-benchmark-select {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 24px 4px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a0a0aa' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.pf-benchmark-select:hover {
  border-color: var(--accent);
  color: var(--text-strong);
}
.pf-benchmark-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Drilldown modal ----------------------------------------- */
.pf-drill-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-drill-modal[hidden] { display: none; }
.pf-drill-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pf-drill-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pf-drill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.pf-drill-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.pf-drill-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.pf-drill-close:hover { background: var(--surface-hover); color: var(--text-strong); }
.pf-drill-sub {
  padding: 8px 18px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.pf-drill-body {
  padding: 12px 18px 18px;
  overflow: auto;
}
.pf-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pf-drill-table th,
.pf-drill-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
}
.pf-drill-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-drill-table td.num,
.pf-drill-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-drill-table tbody tr:hover { background: var(--surface-hover); }
.pf-drill-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pf-drill-pill {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pf-drill-pill.pf-up   { border-color: rgba(14,179,91,0.35); background: var(--up-bg); }
.pf-drill-pill.pf-down { border-color: rgba(194,74,74,0.35); background: var(--down-bg); }
.pf-drill-pill-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pf-drill-pill-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.pf-drill-pill.pf-up   .pf-drill-pill-value { color: var(--up); }
.pf-drill-pill.pf-down .pf-drill-pill-value { color: var(--down); }
.pf-drill-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px solid var(--border2);
}
body.pf-modal-open { overflow: hidden; }

/* Iter 15i — sector rows are clickable: subtle hover lift + cursor + focus ring
   so the drilldown affordance is discoverable but doesn't shout. Matches the
   existing pf-kpi-drillable treatment. */
.pf-sector-row-drillable { cursor: pointer; transition: background .12s ease, transform .12s ease; }
.pf-sector-row-drillable:hover { background: var(--row-hover, rgba(0,0,0,.025)); }
.pf-sector-row-drillable:focus-visible { outline: 2px solid var(--accent, #5a8dff); outline-offset: -2px; border-radius: 6px; }

/* Iter 15j — Manage Brokerage Accounts pill, sits left of the freshness pill
   in the portfolio header. Same height / radius / font-size as
   .pf-freshness-pill so the row remains visually balanced; tinted teal to
   match the dashboard accent (which is also the colour of the active
   "Dashboard" tab and the chart line). Hover slightly intensifies the fill,
   focus-visible gets a 2px ring for keyboard users. */
.pf-brokerage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 152, 163, 0.15);
  border: 1px solid rgba(79, 152, 163, 0.45);
  color: #4f98a3;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.pf-brokerage-pill:hover {
  background: rgba(79, 152, 163, 0.25);
  border-color: rgba(79, 152, 163, 0.65);
  color: #5fb0bd;
}
.pf-brokerage-pill:active { transform: translateY(1px); }
.pf-brokerage-pill:focus-visible {
  outline: 2px solid #4f98a3;
  outline-offset: 2px;
}
.pf-brokerage-pill svg { flex: 0 0 auto; opacity: 0.9; }

/* On narrow screens collapse the label so the row doesn't wrap awkwardly. */
@media (max-width: 720px) {
  .pf-brokerage-pill span { display: none; }
  .pf-brokerage-pill { padding: 4px 8px; }
}

/* Iter 15k — Brokerage logos on the holdings table.
   .pf-broker-logo is a 20px square that holds either an <img> (Clearbit
   logo) or a coloured-initials fallback span. .pf-broker-logo-inline is the
   variant rendered next to the ticker symbol inside the holding cell — it's
   slightly smaller (14px) and uses lower opacity so it doesn't compete with
   the holding company logo. .pf-broker-cell wraps the Portfolios-column
   logo + chip so they align nicely. */
.pf-broker-cell { display: inline-flex; align-items: center; gap: 6px; }
.pf-broker-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2, rgba(255,255,255,0.04));
  flex: 0 0 auto;
}
.pf-broker-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pf-broker-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Inline variant inside the Holding cell: smaller + subtle. */
.pf-broker-logo-inline { width: 14px; height: 14px; border-radius: 3px; opacity: 0.75; margin-left: 6px; vertical-align: middle; }
.pf-broker-logo-inline .pf-broker-logo-inline-fallback,
.pf-broker-logo-inline .pf-broker-logo-fallback { font-size: 8px; }

/* Holding cell layout: ticker symbol + broker logo on one inline row. */
.pf-holding-ticker-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
}