/* ── Base ─────────────────────────────────────────────────────────────────── */
body { background: #070d1a; color: #e2e8f0; font-family: 'Inter', system-ui, sans-serif; }
.card     { background: #111827; border: 1px solid #1f2937; border-radius: 12px; }
.card-sm  { background: #0f172a; border: 1px solid #1f2937; border-radius: 10px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
         border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.badge-purchase      { background:#052e16; color:#4ade80; }
.badge-redemption    { background:#450a0a; color:#f87171; }
.badge-switch_in     { background:#082f49; color:#38bdf8; }
.badge-switch_out    { background:#1c1917; color:#fb923c; }
.badge-reversal      { background:#1c1427; color:#c084fc; }
.badge-consolidation { background:#1a2035; color:#818cf8; }
.badge-other         { background:#1f2937; color:#94a3b8; }

/* ── Colour helpers ───────────────────────────────────────────────────────── */
.pos { color: #4ade80; }
.neg { color: #f87171; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; font-size:0.82rem; }
.tbl th { background:#0f172a; color:#94a3b8; font-weight:600;
          padding:10px 12px; text-align:left; border-bottom:1px solid #1f2937;
          position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.tbl td { padding:9px 12px; border-bottom:1px solid #111827;
          vertical-align: middle; white-space: nowrap; }
.tbl tr:hover td { background:#0f172a; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#111827; }
::-webkit-scrollbar-thumb { background:#374151; border-radius:3px; }

/* ── Form controls ───────────────────────────────────────────────────────── */
input, select { background:#0f172a; border:1px solid #374151; color:#e2e8f0;
                border-radius:8px; padding:8px 12px; font-size:0.85rem; outline:none; }
input:focus, select:focus { border-color:#3b82f6; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs button { padding:8px 20px; border-radius:8px; font-size:0.85rem;
               font-weight:500; transition: all 0.15s; }
.tabs button.active         { background:#1d4ed8; color:#fff; }
.tabs button:not(.active)   { color:#94a3b8; }
.tabs button:not(.active):hover { background:#1f2937; color:#e2e8f0; }

/* Advanced sub-tab variant (smaller) */
.adv-tab-btn { padding:6px 14px; border-radius:8px; font-size:0.78rem;
               font-weight:500; transition: all 0.15s; color:#94a3b8; }
.adv-tab-btn.active       { background:#1d4ed8; color:#fff; }
.adv-tab-btn:not(.active):hover { background:#1f2937; color:#e2e8f0; }

/* ── Privacy mode ────────────────────────────────────────────────────────── */
.privacy-mode .pii {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.25s;
  border-radius: 4px;
}

/* Privacy button active state */
.privacy-active { color: #facc15 !important; }

/* ── Investment Heatmap ──────────────────────────────────────────────────── */
.heatmap-wrap { overflow-x: auto; padding-bottom: 8px; }
.heatmap-grid { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column;
                grid-auto-columns: 14px; gap: 2px; }
.heatmap-cell { width:14px; height:14px; border-radius:2px; cursor:default;
                position: relative; }
.heatmap-cell[title]:hover::after {
  content: attr(title);
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #e2e8f0; font-size: 0.68rem; white-space: nowrap;
  padding: 3px 7px; border-radius: 5px; border: 1px solid #374151;
  pointer-events: none; z-index: 10;
}
.heatmap-empty  { background: #1f2937; }
.heatmap-l1     { background: #1e3a5f; }
.heatmap-l2     { background: #1d4ed8; }
.heatmap-l3     { background: #2563eb; }
.heatmap-l4     { background: #60a5fa; }
.heatmap-month-labels { display: flex; gap: 2px; font-size: 0.68rem; color: #6b7280;
                         margin-bottom: 4px; overflow: hidden; }
.heatmap-dow-labels { display: flex; flex-direction: column; gap: 2px; font-size: 0.65rem;
                       color: #6b7280; margin-right: 4px; line-height: 14px; }

/* ── Advanced section chevron ────────────────────────────────────────────── */
.rotate-180 { transform: rotate(180deg); }
#advChevron { transition: transform 0.2s; }