/*
 * actual-view.css — styles for the read-only "Real Account" view, shared by the
 * portal tab (portal.jsx) and the admin viewer (admin/real_accounts.php).
 * Ported from the finalised legacy-login.php dashboard, scoped under
 * `.actual-view` and driven by tokens.css variables so it themes (incl. dark).
 */
.actual-view { font-family: var(--f-body); color: var(--ink); }

.actual-view .av-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 1px 4px rgba(14,42,77,.04);
  overflow: hidden;
}
.actual-view .av-card + .av-card { margin-top: 20px; }
.actual-view .av-card-head {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 10px;
}
.actual-view .av-card-head-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.actual-view .av-card-head-sub   { font-size: 12px; color: var(--ink-4); }
/* Combined-portfolio chart header — same navy+bold treatment as the holdings
   Total row, so "this is the aggregate" reads as one consistent signal across
   the page rather than blending in with the per-holding chart cards below it. */
.actual-view .av-combined-label { color: var(--navy); }
.actual-view .av-combined-name  { font-size: 16px; font-weight: 700; color: var(--navy); }
.actual-view .av-card-body { overflow-x: auto; }

/* holdings table */
.actual-view .av-htbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.actual-view .av-htbl th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4); padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.actual-view .av-htbl th.num { text-align: right; }
.actual-view .av-htbl td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); vertical-align: middle; }
.actual-view .av-htbl td.num { text-align: right; font-family: var(--f-mono); font-size: 13px; }
.actual-view .av-htbl tbody tr:last-child td { border-bottom: none; }
.actual-view .av-htbl tr.av-total td { font-size: 17px; font-weight: 700; color: var(--navy); border-top: 2px solid var(--line); background: var(--surface); }
.actual-view .av-htbl tr.av-total td.num { font-size: 16px; color: var(--navy); }
.actual-view .av-htbl tr.av-total .av-name { color: var(--navy); font-size: 17px; }
.actual-view .av-name { font-weight: 600; color: var(--navy); }
.actual-view .av-sub  { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.actual-view .av-pill { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; vertical-align: middle; margin-left: 6px; }
.actual-view .av-pill-fund     { background: #E8F1FB; color: #2A5DA0; }
.actual-view .av-pill-strategy { background: #EAF4E8; color: #3D7034; }
.actual-view .av-pos { color: var(--pos); }
.actual-view .av-neg { color: var(--neg); }
.actual-view .av-neutral { color: var(--ink-3); }

/* chart */
.actual-view .av-chart-wrap { padding: 16px 20px 12px; }
.actual-view .av-chart-meta { display: flex; gap: 24px; margin-bottom: 14px; flex-wrap: wrap; }
.actual-view .av-chart-meta-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.actual-view .av-chart-meta-val   { font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--navy); margin-top: 2px; }
.actual-view .av-chart-meta-val.av-pos { color: var(--pos); }
.actual-view .av-chart-meta-val.av-neg { color: var(--neg); }
.actual-view .av-chart-svg { width: 100%; }

/* empty state */
.actual-view .av-empty { padding: 48px 24px; text-align: center; color: var(--ink-3); font-size: 14px; line-height: 1.7; }