/* ============================================================
   WARM FINANCIAL INTELLIGENCE — DESIGN SYSTEM TOKENS
   Light: warm parchment  ·  Dark: warm charcoal workspace
   ============================================================ */

/* Suppress all transitions during theme switch to prevent blink */
.theme-switching,
.theme-switching * {
  transition: none !important;
  animation: none !important;
}

:root {
  /* ── Accent ── */
  --primary-dark: #2f241d;
  --primary-gradient-start: #9a6b46;
  --primary-gradient-end: #7a5234;
  --primary-gradient-light: #9a6b46;
  --accent: #9a6b46;

  /* ── Surfaces ── */
  --bg-light: #fffdf9;
  --bg-card: #fffdf9;
  --bg-folio: #fffdf9;
  --bg-card-hover: #f3ede6;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-offwhite: rgba(248, 245, 241, 0.8);

  /* ── Typography ── */
  --text-primary: #2f241d;
  --text-secondary: #7a6c61;
  --text-tertiary: #a8998d;

  /* ── Semantic ── */
  --success: #2f8f5b;
  --success-light: rgba(47, 143, 91, 0.1);
  --success-dark: #1e6b42;
  --danger: #c65a52;
  --danger-btn: #b84e47;
  --danger-btn-hover: #a0403a;
  --warning: #c9872d;
  --warning-light: rgba(201, 135, 45, 0.1);
  --warning-dark: #7a4a10;

  /* ── Borders ── */
  --border-light: rgba(231, 222, 211, 0.7);
  --border-medium: #e7ded3;
  --border-primary: rgba(154, 107, 70, 0.18);
  --border-white: rgba(231, 222, 211, 0.5);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.09);
  --shadow-primary: 0 2px 8px rgba(154, 107, 70, 0.18);
  --shadow-primary-hover: 0 4px 12px rgba(154, 107, 70, 0.28);

  /* ── Scrollbar ── */
  --scrollbar-track: #eee6dc;
  --scrollbar-thumb: #b8a090;

  /* ── Misc ── */
  --bg-gradient: rgba(154, 107, 70, 0.06);

  /* ── Chart palette — muted, professional, warm-aligned ── */
  --wr-portfolio-color: var(--success);
  --wr-n50-color: #3d78c0;
  --wr-n500-color: #9068a8;
}

/* ── Dark Theme ── */
:root[data-theme="dark"] {
  /* ── Accent ── */
  --primary-dark: #100e0b;
  --primary-gradient-start: #c89666;
  --primary-gradient-end: #9a6b46;
  --primary-gradient-light: #8f6849;
  --accent: #c89666;

  /* ── Surfaces ── three distinct planes so the eye can orient
     page bg → #15120F  card → #1D1915  elevated card → #26201B  */
  --bg-light: #15120f;
  --bg-card: #1d1915;
  --bg-folio: rgba(29, 25, 21, 0.97);
  --bg-card-hover: #26201b;
  --bg-overlay: rgba(0, 0, 0, 0.78);
  --bg-offwhite: rgba(29, 25, 21, 0.9);

  /* ── Typography ──
     primary: bright warm white — strong contrast on very dark bg
     secondary: clearly legible mid-warm — not muted
     tertiary: labels & meta — visibly distinct from bg
     muted: disabled / placeholder only                              */
  --text-primary: #ede4d8;
  --text-secondary: #c8c2bc;
  --text-tertiary: #9e9892;

  /* ── Semantic ── */
  --success: #4dcc88;
  --success-light: rgba(77, 204, 136, 0.14);
  --success-dark: #4dcc88;
  --danger: #e07870;
  --danger-btn: #d06860;
  --danger-btn-hover: #bc5850;
  --warning: #e4a040;
  --warning-light: rgba(228, 160, 64, 0.14);
  --warning-dark: #e4a040;

  /* ── Borders — enough contrast on the darker surfaces ── */
  --border-light: rgba(60, 52, 44, 0.8);
  --border-medium: #3a3028;
  --border-primary: rgba(200, 150, 102, 0.26);
  --border-white: rgba(60, 52, 44, 0.6);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.68);
  --shadow-primary: 0 2px 6px rgba(200, 150, 102, 0.3);
  --shadow-primary-hover: 0 4px 14px rgba(200, 150, 102, 0.44);

  /* ── Scrollbar ── */
  --scrollbar-track: #1d1915;
  --scrollbar-thumb: #5a4838;

  /* ── Misc ── */
  --bg-gradient: rgba(200, 150, 102, 0.09);

  /* ── Chart palette — readable on very dark bg ── */
  --wr-portfolio-color: #4dcc88;
  --wr-n50-color: #6aaee8;
  --wr-n500-color: #c49ad4;
}

/* Dark mode specific styles */
:root[data-theme="dark"] body {
  color: var(--text-primary);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover {
  border-color: #8a5e3c;
}

:root[data-theme="dark"] input::placeholder {
  color: var(--text-tertiary);
}

:root[data-theme="dark"] .transaction-table {
  background: rgba(40, 36, 30, 0.6);
}

:root[data-theme="dark"] .transaction-table thead {
  background: rgba(196, 144, 106, 0.15);
}

:root[data-theme="dark"] .transaction-table td {
  border-bottom: 1px solid var(--border-medium);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .transaction-table tbody tr:hover {
  background: rgba(196, 144, 106, 0.08);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .gains-table th,
:root[data-theme="dark"] .gains-table td {
  border-bottom: 1px solid var(--border-medium);
}

:root[data-theme="dark"] .year-btn {
  background: rgba(37, 34, 25, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

:root[data-theme="dark"] .year-btn:hover {
  border-color: #b8845e;
  color: #b8845e;
}

:root[data-theme="dark"] .compact-holding-item {
  border-bottom: 1px solid var(--border-light);
}

:root[data-theme="dark"] .compact-summary-card {
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .compact-holding-meta {
  color: var(--text-tertiary);
}

:root[data-theme="dark"] .mobile-menu-header {
  border-bottom: 1px solid var(--border-light);
}

:root[data-theme="dark"] .card h3 {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .card {
  border-right-color: var(--border-light);
  border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .card.positive {
  background: rgba(69, 192, 126, 0.07);
}
:root[data-theme="dark"] .card.positive .subtext {
  color: var(--success);
}

:root[data-theme="dark"] .card.negative {
  background: rgba(224, 120, 112, 0.07);
}
:root[data-theme="dark"] .card.negative .subtext {
  color: var(--danger);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--bg-light);
  min-height: 100vh;
}

.container {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0px 15px;
}

.upload-section {
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}

.upload-section h2 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.file-input-container {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

input {
  padding: 10px;
  border: 2px solid var(--primary-gradient-start);
  border-radius: 10px;
  cursor: pointer;
  flex: 1;
  font-size: 13px;
  background: var(--bg-offwhite);
  transition: all 0.3s ease;
  height: 45px;
}

.load {
  height: 45px;
}

input:hover {
  border-color: var(--primary-gradient-end);
  background: var(--bg-card-hover);
}

button {
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.dashboard {
  display: none;
}

.dashboard.active {
  display: block;
}

/* ── Dashboard summary toolbar — XIRR dropdown only ── */

/* XIRR dropdown trigger */
.dsc-xirr-trigger {
  cursor: pointer;
  user-select: none;
}

.dsc-xirr-trigger:hover {
  color: var(--accent);
}

.dsc-xirr-trigger i {
  opacity: 0.6;
}

/* ── Privacy mode ─────────────────────────────────────────────────────── */
/* .priv-amt wraps ONLY the currency portion of a value — never a sibling
   % figure — so toggling privacy mode hides amounts while leaving % visible. */
.priv-amt {
  position: relative;
  display: inline-block;
  line-height: inherit;
  vertical-align: top;
}
body.privacy-mode .priv-amt {
  color: transparent !important;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
body.privacy-mode .priv-amt::after {
  content: "••••••";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-tertiary);
  letter-spacing: 1px;
  line-height: normal;
}

.priv-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.priv-eye-btn:hover {
  color: var(--text-primary);
}
.priv-eye-btn i {
  font-size: 13px;
}
body.privacy-mode .priv-eye-btn {
  color: var(--accent);
}
/* .topbar-overflow-btn's color is !important-locked (pre-existing tech debt,
   see .screenshot-btn/.theme-toggle/.topbar-overflow-btn block) — match it
   to make the topbar privacy button's active state visible. */
body.privacy-mode .topbar-overflow-btn.priv-eye-btn {
  color: var(--accent) !important;
}

.ht-total-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.compact-total-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* XIRR modal overlay */
.dsc-xirr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: color-mix(in srgb, var(--bg-overlay) 100%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dsc-xirr-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.dsc-xirr-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-light);
}

.dsc-xirr-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}

.dsc-xirr-opt:last-child {
  border-bottom: none;
}

.dsc-xirr-opt:hover {
  background: var(--bg-card-hover);
}

.dsc-xirr-opt.sel {
  background: var(--bg-gradient) 50%;
}

.dsc-xirr-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  flex-shrink: 0;
}

.dsc-xirr-radio.filled {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 40%, transparent 40%);
}

.dsc-xirr-opt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dsc-xirr-opt-lbl {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.dsc-xirr-opt-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.dsc-xirr-opt-val {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}

.dsc-xirr-opt-val.gain {
  color: var(--success);
}
.dsc-xirr-opt-val.loss {
  color: var(--danger);
}

/* Realized P&L breakdown modal */
.htr-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.htr-modal-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-light);
}
.htr-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.htr-modal-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.htr-col-headers {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-medium);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.htr-list {
  overflow-y: auto;
  flex: 1;
}
.htr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
}
.htr-row:last-child {
  border-bottom: none;
}
.htr-name {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.htr-val {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.htr-val.gain {
  color: var(--success);
}
.htr-val.loss {
  color: var(--danger);
}
.htr-pct {
  font-size: 11px;
  font-weight: 400;
}
.htr-pct.gain {
  color: var(--success);
}
.htr-pct.loss {
  color: var(--danger);
}
.htr-total {
  border-top: 1px solid var(--border-medium);
  padding: 13px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-gradient) 50%;
  border-radius: 0 0 16px 16px;
}
.htr-total-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.htr-total-val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.htr-total-val.gain {
  color: var(--success);
}
.htr-total-val.loss {
  color: var(--danger);
}
.htr-empty {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}
.ht-stat-label--clickable,
.stat-label--clickable {
  cursor: pointer;
}
.ht-stat-label--clickable:hover,
.stat-label--clickable:hover {
  opacity: 0.7;
}

/* Each cell — hero cell style */
.card {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 14px;
  text-align: center;
  gap: 2px;
  position: relative;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  transition: background 0.2s ease;
  min-width: 140px;
}

.card:hover {
  background: rgba(154, 107, 70, 0.04);
}

/* Bottom accent line per cell */
.card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(154, 107, 70, 0.2);
}

/* Label — tiny uppercase */
.card h3 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 2px;
}

/* Hero value — big */
.card .value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

/* Sub-text */
.card .subtext {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 1D change subtext on Current Value card */
.one-day-subtext {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}

.one-day-subtext--pos {
  color: var(--success);
}

.one-day-subtext--neg {
  color: var(--danger);
}

/* P&L gain cell tint */
.card.positive {
  background: rgba(47, 143, 91, 0.05);
}
.card.positive:hover {
  background: rgba(47, 143, 91, 0.08);
}
.card.positive::after {
  background: rgba(47, 143, 91, 0.45);
}
.card.positive .value,
.green {
  color: var(--success);
}
.card.positive .subtext {
  color: var(--success);
  opacity: 0.85;
}

/* P&L loss cell tint */
.card.negative {
  background: rgba(198, 90, 82, 0.05);
}
.card.negative:hover {
  background: rgba(198, 90, 82, 0.08);
}
.card.negative::after {
  background: rgba(198, 90, 82, 0.45);
}
.card.negative .value,
.red {
  color: var(--danger);
}
.card.negative .subtext {
  color: var(--danger);
  opacity: 0.85;
}

.folio-section {
  padding: 0;
  margin-bottom: 24px;
}

.folio-section h3 {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.folio-grid {
  display: block;
}

/* ============================================================
   FUND LIST TABLE (flt-*) — Desktop & Tablet holdings view
   ============================================================ */
.flt-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.flt-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--bg-card);
}

/* Current grid: 4 numeric cols × 13% = 52%; actions 8%; fund gets 40% */
.flt-td--r,
.flt-th--r {
  width: 13%;
  white-space: nowrap;
}

.flt-td:last-child,
.flt-th:last-child {
  width: 10%;
  white-space: nowrap;
}

/* Past grid: 3 numeric cols × 17% = 51%; actions 8%; fund gets 41% */
.flt-table--past .flt-td--r,
.flt-table--past .flt-th--r {
  width: 17%;
}

.flt-header-row {
  background: var(--bg-gradient);
  border-bottom: 1px solid var(--border-medium);
}

.flt-th {
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.flt-th--r {
  text-align: right;
}

.flt-row {
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  transition: background 0.15s ease;
  cursor: pointer;
}

.flt-row:last-child {
  border-bottom: none;
}
.flt-row--no-click {
  cursor: default;
}
.flt-row--no-click:hover {
  background: none;
}

.flt-row:hover {
  background: rgba(154, 107, 70, 0.04);
}

.past-limit-hidden,
[class].past-limit-hidden {
  display: none !important;
}

.past-holdings-expand-btn {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  font-size: 12px;
  font-family: inherit;
  padding: 4px 12px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.past-holdings-expand-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.flt-td {
  padding: 12px 16px;
  vertical-align: middle;
}

.flt-td--r {
  text-align: right;
}

.flt-fund-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flt-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  object-fit: contain;
}

.flt-logo--fallback {
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.flt-fund-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flt-fund-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.flt-fund-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.flt-fund-meta .folio-card-chip {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.flt-meta-1d {
  font-variant-numeric: tabular-nums;
}
.flt-meta-1d.gain {
  color: var(--success);
}
.flt-meta-1d.loss {
  color: var(--danger);
}

.flt-val {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.flt-val.gain {
  color: var(--success);
}
.flt-val.loss {
  color: var(--danger);
}

.flt-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.flt-sub.gain {
  color: var(--success);
}
.flt-sub.loss {
  color: var(--danger);
}

.flt-details-btn {
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.flt-details-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Sortable column headers */
.flt-th--sortable {
  cursor: pointer;
  user-select: none;
}
.flt-th--sortable:hover {
  color: var(--accent);
}
.flt-sort-icon::after {
  content: " ⇅";
  font-size: 9px;
  opacity: 0.4;
}
.flt-th--sort-asc .flt-sort-icon::after {
  content: " ↑";
  opacity: 0.9;
  color: var(--accent);
}
.flt-th--sort-desc .flt-sort-icon::after {
  content: " ↓";
  opacity: 0.9;
  color: var(--accent);
}

/* Tablet: tighter table to prevent overflow */
@media (max-width: 1199px) and (min-width: 768px) {
  .flt-btn-label {
    display: none;
  }
  .flt-details-btn {
    padding: 5px 8px;
  }
  .flt-th,
  .flt-td {
    padding: 10px 10px;
  }
}

/* ============================================
   FOLIO CARD — matches fundDetails card language
   ============================================ */

.folio-card {
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  flex-direction: column;
}

.folio-card:hover {
  box-shadow: var(--shadow-md);
}

/* Header bar — AMC + Folio chips */
.folio-card-header {
  padding: 9px 14px 7px;
  background: rgba(154, 107, 70, 0.07);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
}

/* Fund name as card header title */
.folio-card-name-header {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-header row: AMC + folio chips */
.folio-card-sub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 7px;
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  flex-wrap: wrap;
  row-gap: 4px;
}

.folio-card-amc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folio-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.folio-card-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  border: 1px solid rgba(154, 107, 70, 0.22);
  padding: 1px 7px;
  border-radius: 20px;
  line-height: 1.7;
}

.folio-card-chip--more {
  color: var(--text-tertiary);
  background: var(--bg-gradient);
  border-color: rgba(154, 107, 70, 0.15);
}

/* Fund name (legacy — keep for summary cards etc.) */
.folio-card-name {
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero metrics row (3-up) */
.folio-card-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

/* Desktop only: 4 items in 3-col grid — last orphan spans full row */
@media (min-width: 768px) {
  .folio-card-hero > .folio-card-hero-cell:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}

.folio-card-hero-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  text-align: center;
  gap: 2px;
  border-right: 1px solid rgba(154, 107, 70, 0.08);
}

.folio-card-hero-cell:last-child {
  border-right: none;
}

.folio-card-hero-cell--pnl-gain {
  background: rgba(47, 143, 91, 0.04);
}
.folio-card-hero-cell--pnl-loss {
  background: rgba(198, 90, 82, 0.04);
}
.folio-card-hero-cell--xirr {
  background: rgba(154, 107, 70, 0.03);
}

.folio-card-hero-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.folio-card-hero-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.folio-card-hero-value.gain {
  color: var(--success);
}
.folio-card-hero-value.loss {
  color: var(--danger);
}
.folio-card-hero-cell--xirr .folio-card-hero-value {
  color: var(--accent);
}

.folio-card-hero-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.folio-card-hero-cell--pnl-gain .folio-card-hero-sub {
  color: var(--success);
}
.folio-card-hero-cell--pnl-loss .folio-card-hero-sub {
  color: var(--danger);
}

/* 1D change in folio card Current Value cell */
.folio-1d-sub--pos {
  color: var(--success) !important;
}

.folio-1d-sub--neg {
  color: var(--danger) !important;
}

/* Secondary chip strip */
.folio-card-chips-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

.folio-card-meta-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 6px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
  background: rgba(154, 107, 70, 0.02);
}

.folio-card-meta-chip:last-child {
  border-right: none;
  display: none;
}

.folio-card-meta-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.folio-card-meta-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Legacy selectors kept for any other code that may still reference them */
.folio-info {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.folio-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}

.folio-stat .label {
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 11px;
}

.folio-stat .value {
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-size: 11px;
}

.folio-stat .gain {
  color: var(--success);
}

.folio-stat .loss {
  color: var(--danger);
}

.chart-section {
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}

.chart-section h3 {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.time-btn[data-period="2Y"],
.time-btn[data-period="4Y"] {
  display: none;
}

.perf-chart-card {
  display: grid;
  grid-template-areas: "tabs timefilter" "strip strip" "canvas canvas";
  grid-template-columns: 1fr auto;
  align-items: center;
}

.chart-stat-strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}

.chart-stat-strip.hidden {
  display: none;
}

.css-date {
  min-width: 90px;
}

.css-divider {
  width: 1px;
  height: 16px;
  background: var(--border-medium);
  margin: 0 16px;
  flex-shrink: 0;
}

.css-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}

.css-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.css-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.css-val.gain {
  color: var(--success);
}

.css-val.loss {
  color: var(--danger);
}

.perf-chart-header {
  grid-area: tabs;
  border-bottom: 1px solid var(--border-medium);
  padding: 14px 0 10px 16px;
}

.time-filter {
  grid-area: timefilter;
  border-bottom: 1px solid var(--border-medium);
  padding: 14px 16px 10px 0;
}

.perf-canvas-wrap {
  grid-area: canvas;
}

.chart-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chart-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.25);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.time-filter {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.time-filter::-webkit-scrollbar {
  display: none;
}

.time-btn {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.25);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.time-btn:hover {
  color: var(--text-primary);
}

.time-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.section-title {
  margin-top: 25px;
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.toast {
  background: var(--bg-folio);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--text-tertiary);
  color: var(--text-primary);
  padding: 12px 18px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  font-size: 13px;
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  font-weight: 500;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Tinted background + colored left bar per severity -- the flat
   var(--bg-folio) fill above was nearly indistinguishable from the page
   and every card behind it. Uses color-mix against the OPAQUE --bg-card
   (not the translucent --success-light/--warning-light tokens used for
   inline chips) -- a toast floats over arbitrary page content, so any
   alpha in its background lets that content bleed through and become
   unreadable. color-mix here always yields a solid, fully opaque color
   and adapts automatically for dark theme since both inputs do. */
.toast.success {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-card));
  border-left-color: var(--success);
}
.toast.warning {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-card));
  border-left-color: var(--warning);
}
.toast.error {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-card));
  border-left-color: var(--danger);
}
.toast.info {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border-left-color: var(--accent);
}

.current-holdings-header {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

#current-holdings .fund-card-separator {
  border-top: 1px solid rgba(154, 107, 70, 0.3);
  padding-top: 10px;
}

#current-holdings .fund-card-separator-header.folio-stat .label {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}

#current-holdings .fund-card-separator-space {
  margin-bottom: 15px;
}

#pastSection h3 {
  margin-bottom: 20px;
}

#pastSection h3 {
  margin-bottom: 20px;
}

.portfolio-analytics-section {
  background: var(--bg-card);
  padding: 25px;
  border-radius: 16px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
}

.portfolio-analytics-section h4 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  align-items: stretch;
}

.analytics-card {
  background: var(--bg-offwhite);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

#holdingsCard,
#familyHoldingsCard {
  grid-column: span 2;
}

#holdingsCard .chart-legend,
#holdingsCard .donut-labels,
#familyHoldingsCard .chart-legend,
#familyHoldingsCard .donut-labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.chart-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
}

.donut-section-title {
  margin-top: 12px;
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
}

.donut-section-title:first-child {
  margin-top: 0;
}

.weighted-returns-section h4 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
}

.returns-grid {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid rgba(154, 107, 70, 0.15);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

.return-card {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 14px;
  text-align: center;
  gap: 2px;
  position: relative;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  transition: background 0.2s ease;
  min-width: 140px;
}

.return-card:hover {
  background: rgba(154, 107, 70, 0.04);
}

.return-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(154, 107, 70, 0.2);
}

.return-card h4 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 2px;
}

.return-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.return-value.positive {
  color: var(--success);
}

.return-value.negative {
  color: var(--danger);
}

/* ── Weighted Returns Benchmark Comparison ──
   Colors defined in :root token block above — no duplication needed */

#weightedReturnsContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}

.wr-period-card {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
  gap: 10px;
  min-width: 180px;
}

.wr-period-card--last {
  border-right: none;
}

.wr-period-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wr-period-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wr-portfolio-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.wr-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}

.wr-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wr-bar-label {
  font-size: 11px;
  color: var(--text-secondary);
  width: 60px;
  flex-shrink: 0;
  text-align: right;
}

.wr-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(154, 107, 70, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.wr-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.wr-bar-pct {
  font-size: 11px;
  font-weight: 600;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

.wr-divider {
  height: 1px;
  background: rgba(154, 107, 70, 0.1);
  margin: 2px 0;
}

.wr-alpha-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wr-alpha-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wr-alpha-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.wr-alpha-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.wr-alpha-pos {
  background: rgba(47, 143, 91, 0.12);
  color: var(--success);
}

.wr-alpha-neg {
  background: rgba(198, 90, 82, 0.1);
  color: var(--danger);
}

.wr-alpha-na {
  background: rgba(154, 107, 70, 0.08);
  color: var(--text-tertiary);
}

.wr-legend {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid rgba(154, 107, 70, 0.1);
  font-size: 12px;
  color: var(--text-secondary);
}

.wr-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wr-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wr-legend-sep {
  flex: 1;
}

@media (max-width: 767px) {
  .wr-period-card {
    border-right: none;
    border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  }
  .wr-period-card--last {
    border-bottom: none;
  }
}

.analytics-card .chart-wrapper {
  min-height: 250px;
  overflow: visible; /* prevents label clipping */
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-light);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.loader-con {
  position: relative;
  width: 50%;
  height: 100px;
  overflow: hidden;
}

.loader-text {
  font-size: 16px;
  font-weight: 700;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.pfile {
  position: absolute;
  bottom: 25px;
  width: 40px;
  height: 50px;
  background: linear-gradient(135deg, #c4906a, #9a6b46);
  border-radius: 4px;
  transform-origin: center;
  animation: flyRight 3s ease-in-out infinite;
  opacity: 0;
}

.pfile::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 4px;
  background-color: #fffcf8;
  border-radius: 2px;
}

.pfile::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 6px;
  width: 18px;
  height: 4px;
  background-color: #fffcf8;
  border-radius: 2px;
}

@keyframes flyRight {
  0% {
    left: -10%;
    transform: scale(0);
    opacity: 0;
  }
  50% {
    left: 45%;
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    left: 100%;
    transform: scale(0);
    opacity: 0;
  }
}

.pfile {
  animation-delay: calc(var(--i) * 0.6s);
}

.transaction-section {
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}

#transactionSectionsWrapper {
  margin: 10px 0px 20px 0px;
}

.transaction-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  gap: 15px;
}

.transaction-section-header h3 {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.toggle-section-btn {
  background: var(--accent);
  color: #fffcf8;
  border: none;
  border-radius: 12px;
  padding: 6px 14px;
  height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.toggle-section-btn:hover {
  background: var(--primary-gradient-end, #7a5234);
  box-shadow: var(--shadow-primary);
}

.transaction-section-content {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
  transition: all 0.3s ease;
  border-top: 1px solid var(--border-light);
}

.transaction-section-content.hidden {
  display: none;
}

.transaction-section-content::-webkit-scrollbar,
.gains-trans::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.transaction-section-content::-webkit-scrollbar-track,
.gains-trans::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.transaction-section-content::-webkit-scrollbar-thumb,
.gains-trans::-webkit-scrollbar-thumb {
  background: rgba(154, 107, 70, 0.3);
  border-radius: 10px;
}

.transaction-section-content::-webkit-scrollbar-thumb:hover,
.gains-trans::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 107, 70, 0.5);
}

.trans-download {
  padding: 15px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.trans-download.hidden {
  display: none;
}

/* Transaction Table */
.transaction-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.5);
}

.transaction-table thead {
  background: var(--bg-gradient);
  border-bottom: 2px solid rgba(154, 107, 70, 0.3);
}

.transaction-table th {
  padding: 12px;
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transaction-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-size: 13px;
}

.transaction-table tbody tr:hover {
  background: rgba(154, 107, 70, 0.05);
  transition: background-color 0.2s ease;
}

.transaction-table .tx-type {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  background: rgba(154, 107, 70, 0.15);
  color: var(--accent);
}

.transaction-table .amount.buy-amount {
  color: var(--success);
}

.transaction-table .amount.sell-amount {
  color: var(--danger);
}

.view-tx-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  background: var(--accent);
  color: #fffcf8;
  border: none;
  border-radius: 12px;
  height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-primary);
}

.view-tx-btn:hover {
  box-shadow: var(--shadow-primary-hover);
  background: var(--primary-gradient-end, #7a5234);
}

.view-tx-btn:active {
  transform: translateY(1px);
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.transaction-modal {
  background: var(--bg-card);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  animation: slideUpModal 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes slideUpModal {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  gap: 20px;
  background: var(--bg-card);
}

.modal-header h2 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-primary);
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: none;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--border-primary);
  color: var(--text-primary);
  box-shadow: none;
}

.modal-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-card);
}

.modal-footer {
  padding: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg-card);
}

.modal-footer button {
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-primary);
  text-transform: UPPERCASE;
}

.modal-footer button:hover {
  box-shadow: var(--shadow-primary-hover);
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(154, 107, 70, 0.3);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 107, 70, 0.5);
}

.card.positive .value,
.green,
.transaction-table td.green {
  color: var(--success);
}

.card.negative .value,
.red,
.transaction-table td.red {
  color: var(--danger);
}

.dashboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  padding: 15px;
  border-bottom: 2px solid var(--border-primary);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg-light);
  z-index: 100;
}

.tab-container {
  flex: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 90%;
}

.dashboard-tabs .dashboard-tab-btn {
  padding: 10px 20px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  color: var(--text-secondary);
  box-shadow: none;
}

.dashboard-tab-btn:hover {
  background: rgba(154, 107, 70, 0.1);
  box-shadow: none;
}

.dashboard-tab-btn.active {
  background: var(--accent);
  color: white;
  border: transparent;
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.dashboard section {
  display: none;
}

.dashboard section.active-tab {
  display: block;
  padding: 16px 12px 30px;
}

/* ── Compact Transactions Page ──────────────────────────── */
.tx-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tx-page-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Section header with pills in top-right (e.g. Transaction Calendar) */
.section-header--with-pills {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-header--with-pills .section-header-left {
  min-width: 0;
}

.section-header-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section-header-pills {
    display: none;
  }
}

/* ── Transactions header stat pills ── */
.tx-stat-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.tx-stat-pill--total {
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  border: 1px solid rgba(154, 107, 70, 0.22);
}

.tx-stat-pill--active {
  color: var(--success-dark, #154d30);
  background: var(--success-light, #d4ede0);
  border: 1px solid rgba(47, 143, 91, 0.25);
}

:root[data-theme="dark"] .tx-stat-pill--active {
  color: var(--success);
  background: rgba(47, 143, 91, 0.12);
  border-color: rgba(47, 143, 91, 0.25);
}

.tx-section {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tx-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  flex-wrap: wrap;
  row-gap: 8px;
}

.tx-section-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tx-section-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.tx-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.tx-count-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.tx-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Segmented Active / All-time toggle ── */
.tx-view-seg {
  display: flex;
  gap: 5px;
}

.tx-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tx-seg-btn.active {
  background: var(--accent);
  color: #fff;
}

.tx-seg-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(154, 107, 70, 0.12);
  color: var(--accent);
}

.tx-seg-btn.active .tx-seg-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ── Month-grouped rows ── */
.tx-month-header td {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  background: var(--bg-light);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.tx-month-chevron {
  display: inline-block;
  width: 14px;
  font-size: 9px;
  color: var(--text-tertiary);
}

.tx-month-label {
  color: var(--text-secondary);
}

.tx-month-sum {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.tx-month-net {
  float: right;
  font-weight: 600;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.tx-month-net.gain {
  color: var(--success);
}

.tx-month-net.loss {
  color: var(--danger);
}

.tx-month-group.collapsed tr:not(.tx-month-header) {
  display: none !important;
}

.tx-scheme-cell small,
.tx-units-cell small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Fixed layout so Active / All-time tables keep identical column positions */
.tx-grouped-table {
  table-layout: fixed;
  width: 100%;
}

.tx-grouped-table th:nth-child(1),
.tx-grouped-table td:nth-child(1) {
  text-align: left;
}

.tx-grouped-table th:nth-child(n + 2),
.tx-grouped-table td:nth-child(n + 2) {
  text-align: right;
}

/* Columns: 1 Scheme · 2 Date · 3 Type · 4 Units · 5 NAV · 6 Amount */

/* Mobile (<=767px) */
.tx-grouped-table th:nth-child(1),
.tx-grouped-table td:nth-child(1) {
  width: 40%;
}

.tx-grouped-table th:nth-child(n + 2),
.tx-grouped-table td:nth-child(n + 2) {
  width: 10%;
}

/* Tablet (768px–1199px): 30 / 15 / 10 / 15 / 15 / 15 */
@media (min-width: 768px) and (max-width: 1199px) {
  .tx-grouped-table th:nth-child(1),
  .tx-grouped-table td:nth-child(1) {
    width: 30%;
  }
  .tx-grouped-table th:nth-child(2),
  .tx-grouped-table td:nth-child(2) {
    width: 15%;
  }
  .tx-grouped-table th:nth-child(3),
  .tx-grouped-table td:nth-child(3) {
    width: 10%;
  }
  .tx-grouped-table th:nth-child(4),
  .tx-grouped-table td:nth-child(4) {
    width: 15%;
  }
  .tx-grouped-table th:nth-child(5),
  .tx-grouped-table td:nth-child(5) {
    width: 15%;
  }
  .tx-grouped-table th:nth-child(6),
  .tx-grouped-table td:nth-child(6) {
    width: 15%;
  }
}

/* Desktop (>=1200px): 20 / 15 / 10 / 15 / 20 / 20 */
@media (min-width: 1200px) {
  .tx-grouped-table th:nth-child(1),
  .tx-grouped-table td:nth-child(1) {
    width: 20%;
  }
  .tx-grouped-table th:nth-child(2),
  .tx-grouped-table td:nth-child(2) {
    width: 15%;
  }
  .tx-grouped-table th:nth-child(3),
  .tx-grouped-table td:nth-child(3) {
    width: 10%;
  }
  .tx-grouped-table th:nth-child(4),
  .tx-grouped-table td:nth-child(4) {
    width: 15%;
  }
  .tx-grouped-table th:nth-child(5),
  .tx-grouped-table td:nth-child(5) {
    width: 20%;
  }
  .tx-grouped-table th:nth-child(6),
  .tx-grouped-table td:nth-child(6) {
    width: 20%;
  }
}

.tx-grouped-table .tx-type {
  background: rgba(47, 143, 91, 0.12);
  color: var(--success);
}

.tx-grouped-table .tx-type--sell {
  background: rgba(198, 90, 82, 0.12);
  color: var(--danger);
}

.tx-search {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid rgba(154, 107, 70, 0.2);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  width: 160px;
  transition: border-color 0.2s ease;
}

.tx-search:focus {
  border-color: rgba(154, 107, 70, 0.5);
}

.tx-search::placeholder {
  color: var(--text-tertiary);
}

.tx-dl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.08);
  border: 1px solid rgba(154, 107, 70, 0.2);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.tx-dl-btn:hover {
  background: rgba(154, 107, 70, 0.16);
}

.tx-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 480px;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

#activeTxTableWrap thead tr,
#activeTxTableWrap tbody tr,
#allTxTableWrap thead tr,
#allTxTableWrap tbody tr {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.tx-table-wrap::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.tx-table-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

.tx-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(154, 107, 70, 0.25);
  border-radius: 10px;
}

.tx-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 107, 70, 0.45);
}

/* Keep primary-btn / secondary-btn for other uses (upload page, etc.) */
.primary-btn {
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn:hover {
  box-shadow: var(--shadow-primary-hover);
}

.secondary-btn {
  padding: 12px 24px;
  background: var(--bg-card-hover);
  color: var(--accent);
  border: 2px solid var(--primary-gradient-start);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.secondary-btn:hover {
  background: rgba(154, 107, 70, 0.1);
}

.capital-gains-section {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.capital-gains-section.alltime-section {
  margin-bottom: 24px;
}

.section-header {
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
}

.section-subtitle {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 14px;
}

.gains-table-wrapper {
  margin-top: 20px;
}

.gains-table-wrapper h4 {
  margin: 20px 0 12px 0;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
}

.gains-table {
  width: 100%;
  border-collapse: collapse;
}

.gains-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 14px;
  border-bottom: 1px solid #ede7de;
}

.gains-table td {
  padding: 12px;
  border-bottom: 1px solid #ede7de;
  font-size: 14px;
  color: var(--text-primary);
}

.gain-summary td,
.gain-summary th {
  width: 25%;
}

.gains-table tr:last-child td {
  border-bottom: none;
}

.gains-table .gain {
  color: var(--success);
  font-weight: 600;
}

.gains-table .loss {
  color: var(--danger);
  font-weight: 600;
}

.gains-trans {
  max-height: 600px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.gains-trans thead tr,
.gains-trans tbody tr {
  scroll-snap-align: start;
}

.gains-table th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 2;
  text-align: left;
  padding: 12px;
}

.gains-table th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-medium);
}

.year-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.year-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  color: var(--text-secondary);
  height: 44px;
}

.year-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.year-btn.active {
  background: var(--accent);
  color: #fffcf8;
  border-color: transparent;
}
:root[data-theme="dark"] .year-btn.active {
  background: var(--accent);
  color: #fffcf8;
  border-color: transparent;
}

.gains-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.gains-summary-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.gains-summary-card h4 {
  margin: 0 0 12px 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.summary-row span:first-child {
  color: var(--text-secondary);
}

.summary-row.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid #ede7de;
  font-weight: 600;
}

.no-data {
  text-align: center;
  color: var(--text-tertiary);
  padding: 40px 20px;
  font-size: 14px;
}

.see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--bg-light);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.see-more-btn:hover {
  background: rgba(154, 107, 70, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

.see-more-btn i {
  margin-right: 4px;
  color: var(--text-tertiary);
}

.portfolio-valuation-section {
  background: var(--bg-card);
  padding: 25px;
  border-radius: 16px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
}

.chart-header {
  margin-bottom: 20px;
}

.chart-header h3 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.chart-subtitle {
  color: var(--text-tertiary);
  font-size: 13px;
}

.time-btn {
  transition: all 0.3s ease;
}

.time-btn[data-period="1M"] {
  display: inline-block;
}

.cache-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 10px;
}

.cache-status.cached {
  background: var(--success-light);
  color: var(--success);
}

.cache-status.stale {
  background: var(--warning-light);
  color: var(--warning);
}

.label-short {
  display: none;
}

@media (max-width: 767px) {
  .label-full {
    display: none;
  }
  .label-short {
    display: inline;
  }
}

.perf-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 0;
  box-shadow: var(--shadow-sm);
  margin: 12px 0;
  overflow: hidden;
}
.perf-canvas-wrap {
  width: 100%;
  height: 380px;
  position: relative;
  overflow-x: auto;
}

.chart-img-actions {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
  z-index: 10;
  display: none !important;
}

.perf-canvas-wrap:hover .chart-img-actions {
  opacity: 1;
}

.chart-img-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.chart-img-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.chart-zoom-reset {
  position: absolute;
  bottom: 32px;
  right: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
  z-index: 10;
}
.chart-zoom-reset:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.chart-zoom-reset.hidden {
  display: none;
}

#portfolioChart {
  width: 100% !important;
  max-width: 100%;
}

.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-card);
  z-index: 10;
  border-radius: 12px;
}

.chart-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(154, 107, 70, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.perf-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
  transition: opacity 0.3s ease;
  background: var(--bg-card);
}
.analytics-card {
  background: var(--bg-card);
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  min-height: unset;
  overflow: hidden;
}

.analytics-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--border-medium);
  background: rgba(154, 107, 70, 0.04);
}

.analytics-card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.analytics-card-sub {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.analytics-card-body {
  padding: 10px;
}

.analytics-card.loading {
  pointer-events: none;
}

.analytics-card .chart-wrapper {
  position: relative;
  height: auto;
  width: 100%;
  min-height: 320px;
  overflow: visible;
}

.analytics-card .chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-card);
  border-radius: 8px;
  z-index: 5;
}

.analytics-card.loading .chart-loading {
  display: flex;
}

.analytics-card:not(.loading) .chart-loading {
  display: none;
}

.analytics-card .chart-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(154, 107, 70, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ── Text-based bar chart ────────────────────────────── */
.text-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
  width: 100%;
}

.tbc-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tbc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.tbc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.tbc-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tbc-track {
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.tbc-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, #9a6b46);
  transition: width 0.5s ease;
}

/* ── Text-bar chart colour cycling — professional muted palette ── */
.tbc-row:nth-child(1) .tbc-fill {
  background: #9a6b46;
}
.tbc-row:nth-child(2) .tbc-fill {
  background: #3d78c0;
}
.tbc-row:nth-child(3) .tbc-fill {
  background: #2f8f5b;
}
.tbc-row:nth-child(4) .tbc-fill {
  background: var(--warning);
}
.tbc-row:nth-child(5) .tbc-fill {
  background: #9068a8;
}
.tbc-row:nth-child(6) .tbc-fill {
  background: #c65a52;
}
.tbc-row:nth-child(7) .tbc-fill {
  background: #5a8f82;
}
.tbc-row:nth-child(8) .tbc-fill {
  background: #8b7355;
}

/* Dark mode — same hues, slightly brighter for visibility */
:root[data-theme="dark"] .tbc-row:nth-child(1) .tbc-fill {
  background: #c4906a;
}
:root[data-theme="dark"] .tbc-row:nth-child(2) .tbc-fill {
  background: #6aaee8;
}
:root[data-theme="dark"] .tbc-row:nth-child(3) .tbc-fill {
  background: #45c07e;
}
:root[data-theme="dark"] .tbc-row:nth-child(4) .tbc-fill {
  background: #e4a040;
}
:root[data-theme="dark"] .tbc-row:nth-child(5) .tbc-fill {
  background: #b48ecf;
}
:root[data-theme="dark"] .tbc-row:nth-child(6) .tbc-fill {
  background: #e07870;
}
:root[data-theme="dark"] .tbc-row:nth-child(7) .tbc-fill {
  background: #7abcad;
}
:root[data-theme="dark"] .tbc-row:nth-child(8) .tbc-fill {
  background: #b09a78;
}
.tbc-row:nth-child(9) .tbc-fill {
  background: #7a6c61;
}
.tbc-row:nth-child(10) .tbc-fill {
  background: #d99440;
}
:root[data-theme="dark"] .tbc-row:nth-child(9) .tbc-fill {
  background: #a09080;
}
:root[data-theme="dark"] .tbc-row:nth-child(10) .tbc-fill {
  background: #e8b860;
}

[data-theme="dark"] .tbc-track {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Holdings Charts Section ────────────────────────── */
.hc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.hc-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 20px 24px;
}

.hc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.hc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.hc-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.hc-sub-tip {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hc-sub-popover {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: auto;
  right: 0;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: default;
  text-transform: none;
  letter-spacing: 0;
}
.hc-sub-tip:hover .hc-sub-popover {
  display: block;
}
@media (max-width: 767px) {
  .hc-sub-popover {
    left: 0;
    right: auto;
  }
}

.hc-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.hc-period-row {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
}

.hc-period-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hc-period-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.hc-period-btn:hover {
  background: var(--bg-gradient);
  border-color: rgba(154, 107, 70, 0.3);
  color: var(--text-primary);
}

.hc-period-btn--active {
  background: rgba(154, 107, 70, 0.12) !important;
  border-color: rgba(154, 107, 70, 0.4) !important;
  color: var(--accent) !important;
}

.hc-chips-inner {
  display: none;
}

.hc-chips-inner--open {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--bg-offwhite);
  border-radius: 10px;
  margin-top: 4px;
  border: 1px solid var(--border-light);
}

.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}

.hc-chip--off {
  opacity: 0.45;
}

.hc-chip-short {
  display: none;
}

.hc-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.6;
  transform: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease;
}
.hc-filter-toggle:hover,
.hc-filter-toggle:active {
  transform: none !important;
  box-shadow: none !important;
  color: var(--accent);
}

.hc-filter-badge {
  background: rgba(154, 107, 70, 0.15);
  color: var(--accent);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
}

.hc-returns-toggle {
  display: none;
}

@media (max-width: 767px) {
  .hc-chip-full {
    display: none;
  }
  .hc-chip-short {
    display: inline;
  }
  .hc-period-btn {
    padding: 3px 8px;
  }

  .hc-returns-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.6;
    margin-top: 10px;
    transform: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease;
  }
  .hc-returns-toggle:hover,
  .hc-returns-toggle:active {
    transform: none !important;
    box-shadow: none !important;
    color: var(--accent);
  }

  .hc-returns-row {
    display: none !important;
    margin-top: 8px;
  }
  .hc-returns-row--open {
    display: flex !important;
  }
}

.hc-chip-ret {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: 3px;
}
.hc-chip-ret.positive {
  color: var(--positive);
}
.hc-chip-ret.negative {
  color: var(--danger);
}
/* ── Asset allocation pills ────────────────────────────────────────────── */
.alloc-pill {
  background: #f1efe8;
  color: #5f5e5a;
}
.alloc-pill .ap-dot {
  background: #888780;
}
.ap-bar {
  background: #888780;
}

.ap-domestic-equity {
  background: #eaf3de;
  color: #3b6d11;
}
.ap-domestic-equity .ap-dot,
.ap-bar.ap-domestic-equity {
  background: #3b6d11;
}

.ap-global-equity {
  background: #e6f1fb;
  color: #185fa5;
}
.ap-global-equity .ap-dot,
.ap-bar.ap-global-equity {
  background: #185fa5;
}

.ap-hedged-equity {
  background: #eeedfe;
  color: #534ab7;
}
.ap-hedged-equity .ap-dot,
.ap-bar.ap-hedged-equity {
  background: #534ab7;
}

.ap-debt {
  background: #faeeda;
  color: #854f0b;
}
.ap-debt .ap-dot,
.ap-bar.ap-debt {
  background: #854f0b;
}

.ap-gold {
  background: #faf3dc;
  color: #7a5c0a;
}
.ap-gold .ap-dot,
.ap-bar.ap-gold {
  background: #7a5c0a;
}

.ap-silver {
  background: #f1efe8;
  color: #5f5e5a;
}
.ap-silver .ap-dot,
.ap-bar.ap-silver {
  background: #888780;
}

.ap-real-estate {
  background: #faece7;
  color: #993c1d;
}
.ap-real-estate .ap-dot,
.ap-bar.ap-real-estate {
  background: #993c1d;
}

.ap-cash {
  background: #f1efe8;
  color: #5f5e5a;
}
.ap-cash .ap-dot,
.ap-bar.ap-cash {
  background: #888780;
}

/* Dark mode — low-opacity bg, muted text */
:root[data-theme="dark"] .alloc-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
:root[data-theme="dark"] .alloc-pill .ap-dot {
  background: var(--text-tertiary);
}

:root[data-theme="dark"] .ap-domestic-equity {
  background: rgba(59, 109, 17, 0.18);
  color: #7ec05a;
}
:root[data-theme="dark"] .ap-domestic-equity .ap-dot {
  background: #7ec05a;
}
:root[data-theme="dark"] .ap-bar.ap-domestic-equity {
  background: #4a8f20;
}

:root[data-theme="dark"] .ap-global-equity {
  background: rgba(24, 95, 165, 0.18);
  color: #6fa8db;
}
:root[data-theme="dark"] .ap-global-equity .ap-dot {
  background: #6fa8db;
}
:root[data-theme="dark"] .ap-bar.ap-global-equity {
  background: #3178b8;
}

:root[data-theme="dark"] .ap-hedged-equity {
  background: rgba(83, 74, 183, 0.18);
  color: #9b94e0;
}
:root[data-theme="dark"] .ap-hedged-equity .ap-dot {
  background: #9b94e0;
}
:root[data-theme="dark"] .ap-bar.ap-hedged-equity {
  background: #6f68cc;
}

:root[data-theme="dark"] .ap-debt {
  background: rgba(133, 79, 11, 0.18);
  color: #c99840;
}
:root[data-theme="dark"] .ap-debt .ap-dot {
  background: #c99840;
}
:root[data-theme="dark"] .ap-bar.ap-debt {
  background: #a07828;
}

:root[data-theme="dark"] .ap-gold {
  background: rgba(122, 92, 10, 0.18);
  color: #c4a84a;
}
:root[data-theme="dark"] .ap-gold .ap-dot {
  background: #c4a84a;
}
:root[data-theme="dark"] .ap-bar.ap-gold {
  background: #9a8030;
}

:root[data-theme="dark"] .ap-real-estate {
  background: rgba(153, 60, 29, 0.18);
  color: #d47a5a;
}
:root[data-theme="dark"] .ap-real-estate .ap-dot {
  background: #d47a5a;
}
:root[data-theme="dark"] .ap-bar.ap-real-estate {
  background: #aa5840;
}

:root[data-theme="dark"] .ap-silver,
:root[data-theme="dark"] .ap-cash {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
:root[data-theme="dark"] .ap-silver .ap-dot,
:root[data-theme="dark"] .ap-cash .ap-dot {
  background: var(--text-tertiary);
}
:root[data-theme="dark"] .ap-bar.ap-silver,
:root[data-theme="dark"] .ap-bar.ap-cash {
  background: #5a5a58;
}

.hc-chip-since {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 3px;
  white-space: nowrap;
}

.hc-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hc-chart-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}

.hc-chart-wrap .chart-loading {
  display: none;
  border-radius: 8px;
}

.hc-chart-wrap.loading .chart-loading {
  display: flex;
}

.hc-chart-wrap.loading canvas {
  opacity: 0;
}

.hc-returns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.hc-ret-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.hc-ret-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hc-ret-name {
  color: var(--text-secondary);
}

.hc-ret-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hc-ret-val.positive {
  color: var(--gain-color, #2f8f5b);
}
.hc-ret-val.negative {
  color: var(--loss-color, #c65a52);
}

.hc-ret-since {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: 1px;
}

.hc-bw-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.hc-bw-card {
  flex: 1;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 0;
}

.hc-bw-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  margin-bottom: 5px;
  display: inline-block;
  letter-spacing: 0.2px;
}

.hc-bw-badge.best {
  background: rgba(47, 143, 91, 0.12);
  color: #1a6b3c;
}

.hc-bw-badge.worst {
  background: rgba(198, 90, 82, 0.12);
  color: #8b2020;
}

[data-theme="dark"] .hc-bw-badge.best {
  color: #5dd68a;
}
[data-theme="dark"] .hc-bw-badge.worst {
  color: #e88080;
}

.hc-bw-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.hc-bw-ret {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hc-bw-ret.positive {
  color: var(--gain-color, #2f8f5b);
}
.hc-bw-ret.negative {
  color: var(--loss-color, #c65a52);
}

.hc-bw-ann {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
}

.hc-alloc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 12px;
}

.hc-alloc-name {
  width: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hc-alloc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hc-alloc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hc-alloc-track {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.hc-alloc-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.hc-alloc-pct {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hc-alloc-val {
  display: none;
}

.hc-tenure-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.hc-tenure-tile {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}
.hc-tenure-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hc-tenure-badge--veteran {
  color: var(--accent);
}
.hc-tenure-badge--newest {
  color: var(--success);
}
.hc-tenure-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.hc-tenure-meta {
  font-size: 11px;
  color: var(--text-secondary);
}
.hc-tenure-meta strong {
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 1199px) {
  .hc-section-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .hc-card {
    padding: 16px;
  }
  .hc-header {
    flex-direction: column;
    gap: 2px;
  }
  .hc-alloc-row {
    grid-template-columns: 1fr auto;
  }
}

/* ── Donut chart + label list ────────────────────────── */
.analytics-card .chart-wrapper {
  display: flex;
  flex-direction: column;
}

.donut-canvas-box {
  position: relative;
  width: 100%;
  height: 170px;
  flex-shrink: 0;
}

.donut-canvas-box canvas {
  max-height: 100%;
}

.donut-labels {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 2px 2px;
  width: 100%;
}

.donut-label-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.3;
}

.donut-label-color {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  display: inline-block;
}

.donut-label-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
}

.donut-label-value {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.upload-tab-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 20px 0;
}
.upload-card {
  background: var(--bg-card);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 400px; /* Ensure consistent height */
}

.upload-card:hover {
  box-shadow: var(--shadow-primary);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.upload-card h3 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.upload-card p {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

p.instructions-note {
  color: var(--text-primary);
}

.upload-card .file-input-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.upload-card input[type="file"],
.upload-card input[type="password"] {
  width: 100%;
  margin: 0;
}

.upload-card .load,
.upload-card .primary-btn,
.upload-card .secondary-btn {
  width: 100%;
  margin: 0;
}

#casUploadSection {
  display: none;
}

#casUploadSection.show {
  display: block;
}

.dashboard.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.dashboard-tab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.instructions-card {
  background: var(--accent);
  color: white;
}

.instructions-card h3 {
  color: white;
}

.instructions-list {
  text-align: left;
  margin: 20px 0;
}

.instructions-list ol {
  padding-left: 20px;
  line-height: 1.8;
}

.instructions-list ol li {
  margin-bottom: 10px;
  font-size: 13px;
}

.instructions-list a {
  color: var(--accent);
  text-decoration: underline;
}

.instructions-list strong {
  font-weight: 600;
}

.instructions-note {
  background: rgba(255, 255, 255, 0.2);
  padding: 12px;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 13px;
}

.update-info small {
  color: var(--text-tertiary);
  font-size: 12px;
}

.dashboard-footer {
  background: var(--accent);
  color: white;
  padding: 12px;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-label {
  font-size: 11px;
  opacity: 0.9;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-value {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.holdings-eye-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: all 0.2s ease;
  margin-right: 0;
  box-shadow: none;
  vertical-align: middle;
  line-height: 1;
}

.holdings-eye-btn:hover {
  color: var(--primary-gradient-end);
  background: rgba(154, 107, 70, 0.1);
  border-radius: 4px;
  box-shadow: none;
}

.fund-card-separator canvas {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.fund-card-separator canvas.chart-ready {
  opacity: 1;
}

.fund-card-separator.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #f3ede6;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}

.fund-card-separator.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-card-hover);
  z-index: 9;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.dashboard-tab-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Hamburger Menu Styles */
.hamburger-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  box-shadow: none;
  font-size: 18px;
}

.hamburger-menu:hover {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  height: 100vh;
  background: var(--bg-card);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  transition: left 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--accent);
}

.mobile-menu-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: none;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mobile-menu-items {
  padding: 10px 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px 20px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: none;
}

.mobile-menu-item:hover {
  background: rgba(154, 107, 70, 0.05);
  border-left-color: var(--accent);
  box-shadow: none;
}

.mobile-menu-item.active {
  background: rgba(154, 107, 70, 0.1);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.mobile-menu-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.mobile-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}

.mobile-menu-item:disabled:hover {
  background: transparent;
  border-left-color: transparent;
}

.mobile-header {
  display: none;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.mobile-header div {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.dashboard-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.dashboard-tab-btn.disabled-tab,
.mobile-menu-item.disabled-tab {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: all !important; /* Allow pointer events to show cursor */
  position: relative;
}

.dashboard-tab-btn.disabled-tab:hover,
.mobile-menu-item.disabled-tab:hover {
  background-color: inherit;
}

.dashboard-tab-btn.disabled-tab::after,
.mobile-menu-item.disabled-tab::after {
  content: "🔒";
  margin-left: 5px;
  font-size: 0.8em;
}

.warning {
  color: var(--warning) !important;
}

.gains-table td.warning {
  color: var(--warning);
  font-weight: 600;
}

button.sidebar-menu-item,
button.mobile-menu-item {
  border-radius: 0;
}

#currentUserDisplay {
  padding: 8px 12px;
  background: var(--bg-gradient);
  border-radius: 8px;
  text-align: center;
}

.file-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-selector {
  flex: 1;
  padding: 10px 40px 10px 12px;
  border: 2px solid var(--primary-gradient-start);
  border-radius: 10px;
  font-size: 14px;
  background: var(--bg-card-hover);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

.user-selector:hover {
  border-color: var(--primary-gradient-end);
}

.user-selector:focus {
  outline: none;
  border-color: var(--primary-gradient-end);
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.1);
}

.danger-btn {
  background: var(--danger-btn);
  color: #fff;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.danger-btn:hover {
  background: var(--danger-btn-hover);
}

/* ── familyUserBreakdown grid ── */
#familyUserBreakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
}

/* ── family-user-card: folio-card design language ── */
.family-user-card {
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.family-user-card:hover {
  box-shadow: var(--shadow-md);
}

/* Card header — member name */
.family-user-card h4 {
  margin: 0;
  padding: 9px 14px 8px;
  background: rgba(154, 107, 70, 0.07);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Holdings count pill — pushed to the right */
.family-holdings-pill {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  border: 1px solid rgba(154, 107, 70, 0.22);
  padding: 1px 8px;
  border-radius: 20px;
  line-height: 1.7;
  letter-spacing: 0.2px;
}

/* Hero metrics row — Current Value | P&L | XIRR */
.family-user-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

/* Secondary rows below the hero strip */
.family-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px 8px;
  text-align: center;
  gap: 2px;
  border-right: 1px solid rgba(154, 107, 70, 0.08);
  background: transparent;
  border-bottom: none;
}

.family-stat-row:last-child {
  border-right: none;
}

/* Tinted cells for P&L and XIRR */
.family-stat-row.pnl-gain,
.family-stat-row.oneday-gain {
  background: rgba(47, 143, 91, 0.04);
}
.family-stat-row.pnl-loss,
.family-stat-row.oneday-loss {
  background: rgba(198, 90, 82, 0.04);
}
.family-stat-row.xirr-cell {
  background: rgba(154, 107, 70, 0.03);
}

.family-stat-row .label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.family-stat-row .value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.family-stat-row .value.gain,
.family-stat-row .sub-value.gain {
  color: var(--success);
}

.family-stat-row .value.loss,
.family-stat-row .sub-value.loss {
  color: var(--danger);
}

.family-stat-row .value.xirr {
  color: var(--accent);
}

/* Sub-value (% returns) */
.family-stat-row .sub-value {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.family-stat-row.pnl-gain .sub-value {
  color: var(--success);
}
.family-stat-row.pnl-loss .sub-value {
  color: var(--danger);
}

/* Meta chip strip (Invested, Units, etc.) below hero */
.family-user-meta-strip {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

.family-user-meta-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 6px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
  background: rgba(154, 107, 70, 0.02);
}

.family-user-meta-chip:last-child {
  border-right: none;
}

.family-user-meta-chip .meta-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.family-user-meta-chip .meta-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.install-pwa-card {
  background: linear-gradient(135deg, #2f8f5b 0%, #247a4d 100%);
  color: white;
}

.install-pwa-card h3,
.install-pwa-card p {
  color: white;
}

.install-pwa-card .primary-btn {
  background: var(--bg-card);
  color: var(--success);
  border: none;
}

.install-pwa-card .primary-btn:hover {
  background: var(--bg-card-hover);
}

.tab-container div:first-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

button.theme-toggle {
  background: none;
  box-shadow: none;
  padding: 2px 10px;
  color: var(--text-primary);
}

.theme-container {
  display: flex;
  align-items: self-start;
}

.theme-container button.theme-toggle {
  padding: 10px;
}

.theme-container button.theme-toggle i {
  font-size: 20px;
}

/* Screenshot button — sits inside theme-container, left of theme toggle */
.screenshot-btn {
  background: none;
  box-shadow: none;
  padding: 10px;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.screenshot-btn:hover,
.theme-toggle:hover {
  color: var(--accent);
  box-shadow: none;
}

.screenshot-btn.capturing {
  pointer-events: none;
  opacity: 0.5;
}

/* Mobile header: keep theme toggle the same size as the screenshot button */
.mobile-header button.theme-toggle {
  padding: 10px;
}

.mobile-header button.theme-toggle i {
  font-size: 20px;
}

/* ============================================
   COMPACT DASHBOARD — modern mobile-first redesign
   ============================================ */

.compact-dashboard {
  display: none;
  background: var(--bg-light);
  overflow: hidden;
  font-size: 12px;
}

/* Hero summary card — flat, screenshot-safe (no semi-transparent backgrounds) */
.compact-summary-card {
  background: var(--bg-card);
  margin-bottom: 10px;
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
}

#mainMobileSummary .compact-summary-card {
  margin: 0px;
}

.compact-header {
  background: var(--bg-gradient);
  padding: 14px 16px 12px;
}

:root[data-theme="dark"] .compact-header {
  background: rgba(184, 132, 94, 0.08);
}

.compact-header h3 {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin-bottom: 6px;
}

.compact-total-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.compact-1d-change {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.compact-1d-change.positive {
  color: var(--success);
}
.compact-1d-change.negative {
  color: var(--danger);
}

/* Stat grid — solid backgrounds, screenshot-safe */
.compact-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

:root[data-theme="dark"] .compact-stats {
  border-top-color: var(--border-light);
}

.compact-stat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: var(--bg-card);
  min-width: 0;
}

.compact-stat-row:nth-child(odd) {
  border-right: 1px solid rgba(154, 107, 70, 0.08);
}

:root[data-theme="dark"] .compact-stat-row:nth-child(odd) {
  border-right-color: var(--border-light);
}

.compact-stat-row:nth-child(n + 3) {
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

:root[data-theme="dark"] .compact-stat-row:nth-child(n + 3) {
  border-top-color: var(--border-light);
}

.compact-stat-row--full {
  grid-column: 1 / -1;
  border-right: none !important;
}

.compact-since-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 10px 16px;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}
.compact-since-line:empty {
  display: none;
}
:root[data-theme="dark"] .compact-since-line {
  border-top-color: var(--border-light);
}

.compact-stat-row.expandable {
  cursor: pointer;
  user-select: none;
}

.compact-stat-row .stat-label {
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
}

.compact-stat-row .stat-value {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Inline wrapper: value + % on same line, wraps on overflow */
.compact-stat-row .stat-value-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  width: 100%;
}

.compact-stat-row .stat-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.compact-stat-row .stat-value.positive {
  color: var(--success);
}
.compact-stat-row .stat-value.negative {
  color: var(--danger);
}
.compact-stat-row .stat-sub.positive {
  color: var(--success);
}
.compact-stat-row .stat-sub.negative {
  color: var(--danger);
}

/* Member breakdown rows inside family compact card */
.compact-members {
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:root[data-theme="dark"] .compact-members {
  border-top-color: var(--border-light);
}

.compact-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.compact-member-info {
  flex: 1;
  min-width: 0;
}

.compact-member-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.compact-member-bar-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(154, 107, 70, 0.12);
  margin-top: 4px;
  overflow: hidden;
}

:root[data-theme="dark"] .compact-member-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

.compact-member-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--primary-gradient-start);
}

.compact-member-value {
  text-align: right;
  flex-shrink: 0;
}

.compact-member-amt {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.compact-member-pnl {
  font-size: 10px;
  font-weight: 600;
}

.compact-member-pnl.positive {
  color: var(--success);
}
.compact-member-pnl.negative {
  color: var(--danger);
}

/* Controls bar */
.compact-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0px;
  background: var(--bg-light);
  gap: 6px;
}
.compact-ctrl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
}
.compact-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.compact-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 12px;
  pointer-events: none;
}
.compact-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border-radius: 999px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.compact-search-input::placeholder {
  color: var(--text-tertiary);
}
.compact-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.15);
}
.compact-sort-pill {
  height: 36px;
  flex-shrink: 0;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  -webkit-tap-highlight-color: transparent;
}
.compact-sort-pill:hover {
  border-color: var(--accent);
}
.compact-sort-pill:active {
  opacity: 0.75;
}
.chi-search-hidden,
[class].chi-search-hidden {
  display: none !important;
}
.csp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f8f5b;
  flex-shrink: 0;
}
.csp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
}
.csp-sheet {
  width: 100%;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px 32px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.csp-sheet--open {
  transform: translateY(0);
}
.csp-handle {
  width: 36px;
  height: 4px;
  background: var(--border-medium);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.csp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-light);
  margin-bottom: 4px;
}
.csp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.csp-reset {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  padding-right: 5px;
}
.csp-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.csp-option:last-of-type {
  border-bottom: none;
}
.csp-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.csp-radio.active {
  border-color: var(--text-primary);
}
.csp-radio.active::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-primary);
}
.csp-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.csp-dir-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.csp-apply {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  margin-top: 24px;
  cursor: pointer;
}

/* Sort & Display merged sheet — Sort by and Display shown as two columns
   at once (no tab switcher), Display option counts, and the Remember
   toggle row (reuses .ht-remember-row). Each sort row carries its own
   directional icon (see sortRowIcon in scripts.js) instead of a
   full-width "HIGH TO LOW" label, so column width isn't a tradeoff. */
.csp-dual-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 20px 0px 10px 0px;
}

.csp-dual-col-left {
  padding-right: 12px;
  border-right: 1px solid var(--border-medium);
}

.csp-dual-col-right {
  padding-left: 12px;
  min-width: 0;
}

.csp-dual-col-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 8px;
}

.csp-col-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.csp-col-icon {
  width: 13px;
  flex-shrink: 0;
  color: var(--border-medium);
  font-size: 11px;
}

.csp-col-icon.sel {
  color: var(--accent);
}

.csp-col-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}

.csp-col-label.sel {
  color: var(--text-primary);
  font-weight: 600;
}

.csp-col-check {
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}

.csp-col-radio {
  width: 18px;
  height: 18px;
}

.csp-col-radio.active::after {
  width: 9px;
  height: 9px;
}

.csp-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.csp-remember-row {
  padding: 14px 0 2px;
  margin-top: 4px;
}

/* Holdings list — gap stack, no shared card */
.compact-holdings-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 6px 0 10px;
}

/* Individual holding card */
.compact-holding-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.compact-holding-item.chi-hero--past {
  cursor: default;
}

/* Left: fund name + meta */
.compact-holding-info {
  flex: 1;
  min-width: 0;
}

.compact-holding-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.35;
  display: flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.compact-holding-meta {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right: values */
.compact-holding-values {
  text-align: right;
  flex-shrink: 0;
}

.compact-holding-current {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.compact-holding-current.green {
  font-weight: 700;
  color: var(--success);
  margin-bottom: 2px;
}

.compact-holding-current.red {
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 2px;
}

.compact-holding-invested {
  color: var(--text-tertiary);
  font-size: 10px;
}

.compact-holding-xirr,
.compact-holding-abs,
.compact-holding-1day {
  color: var(--text-tertiary);
  font-size: 10px;
}

.compact-holding-xirr .green,
.compact-holding-abs .green,
.compact-holding-1day .green {
  color: var(--success);
  font-weight: 600;
}

.compact-holding-xirr .red,
.compact-holding-abs .red,
.compact-holding-1day .red {
  color: var(--danger);
  font-weight: 600;
}

/* Arrow chevron removed from all compact holding items */
.compact-holding-item::after {
  display: none;
}

.compact-holding-values {
  padding-right: 0;
}

/* ============================================
   COMPACT HOLDINGS — HERO ROW REDESIGN
   ============================================ */

.chi-hero {
  display: block !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  overflow: hidden;
}

.chi-hero:last-child {
  border-bottom: none;
}

/* Coloured left accent bar */
.chi-accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 0;
}

.chi-accent--gain {
  background: linear-gradient(180deg, #2f8f5b 0%, #247a4d 100%);
}

.chi-accent--loss {
  background: linear-gradient(180deg, #c65a52 0%, #b84e47 100%);
}

/* Card body */
.chi-body--card {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
}

/* Top row: badge + info + chevron */
.chi-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* AMC badge */
.chi-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

.chi-badge--logo {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.chi-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Info block: name + sub line */
.chi-info {
  flex: 1;
  min-width: 0;
}

.chi-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chi-stats-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.chi-sub-line {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chi-stat-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.chi-stat-inline--pos {
  color: var(--success);
}
.chi-stat-inline--neg {
  color: var(--danger);
}

.chi-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.chi-stat-sep {
  font-size: 9px;
  color: var(--text-tertiary);
  margin: 0 1px;
}

/* Chevron */
.chi-chevron {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  opacity: 0.5;
}

/* Bottom stats row */
.chi-card-stats {
  display: flex;
  gap: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.chi-card-stat {
  flex: 1;
}

.chi-card-stat:last-child {
  flex: 1;
  min-width: max-content;
}

.chi-card-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.chi-card-stat-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.chi-stat-val--pos {
  color: var(--success);
}
.chi-stat-val--neg {
  color: var(--danger);
}

/* Dark mode overrides */

:root[data-theme="dark"] .chi-amc-pill {
  background: rgba(154, 107, 70, 0.12);
  border-color: rgba(154, 107, 70, 0.2);
  color: var(--text-tertiary);
}

:root[data-theme="dark"] .chi-pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-light);
}

.compact-family-breakdown {
  background: var(--bg-card);
  border-radius: 16px;
  margin: 6px 10px 10px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .compact-family-breakdown {
  background: var(--bg-card);
  border-color: var(--border-medium);
}

.transaction-modal {
  touch-action: pan-y;
}
.fund-composition-chart {
  padding: 8px 0;
  margin: 5px 0;
}

.composition-bar {
  display: flex;
  height: 36px;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 10px;
  background: transparent;
  gap: 3px;
  align-items: stretch;
}

.composition-segment {
  height: 100%;
  transition:
    opacity 0.2s,
    transform 0.15s;
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 0;
  min-width: 4px;
}

.composition-segment:first-child {
  border-radius: 8px 0 0 8px;
}

.composition-segment:last-child {
  border-radius: 0 8px 8px 0;
}

.composition-segment:only-child {
  border-radius: 8px;
}

.composition-segment:hover {
  opacity: 0.85;
}

.composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.fund-composition-chart.empty-composition {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.6;
  border-radius: 6px;
  background: var(--border-medium);
}

#fundDetailsModal .fund-composition-chart.empty-composition {
  height: 28px;
  margin-top: 0px;
}

.past-summary {
  display: none;
}

/* Fund Details Modal Styles ──────────────────────────────────
   Overlay modal on desktop/tablet, bottom sheet on mobile -- same standard
   as .gl-modal/.folio-management-modal. #fundDetailsModal-scoped selectors
   (not just .fund-details-modal) are used throughout so these overrides
   beat .transaction-modal's fullscreen rules by specificity regardless of
   where either is declared -- .transaction-modal is shared with the
   fundHoldings/fundTransaction sub-modals and other unrelated modals, so
   it can't be edited directly without affecting them. */
#fundDetailsModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
#fundDetailsModal .fund-details-modal {
  position: relative;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 1200px;
  height: auto;
  max-height: 92vh;
  top: auto;
  left: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  animation: fadeInModal 0.2s ease;
}
#fundDetailsModal .modal-header {
  flex-shrink: 0;
}
#fundDetailsModal .fdm-spinner-overlay {
  position: absolute;
}

/* Overlap / common-holding modals -- overlay on desktop/tablet, bottom
   sheet on mobile, same standard. All 4 share the .overlap-detail-modal
   panel class already; ID-scoped selectors since .transaction-modal-
   overlay/.transaction-modal are shared bases with unrelated modals.
   None of the 4 has a footer, and none stacks on another modal. */
#overlapDetailModal,
#commonHoldingDetailModal,
#allOverlapPairsModal,
#allCommonHoldingsModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
#overlapDetailModal .overlap-detail-modal,
#commonHoldingDetailModal .overlap-detail-modal,
#allOverlapPairsModal .overlap-detail-modal,
#allCommonHoldingsModal .overlap-detail-modal {
  position: relative;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 88vh;
  top: auto;
  left: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  animation: fadeInModal 0.2s ease;
}
#overlapDetailModal .modal-header,
#commonHoldingDetailModal .modal-header,
#allOverlapPairsModal .modal-header,
#allCommonHoldingsModal .modal-header {
  flex-shrink: 0;
}

/* Portfolio / family "all holdings" list modals -- same standard. Both
   need a new shared panel modifier class (.holdings-list-modal, added in
   the JS template) since neither had one before. Both have a footer with
   a single "Download as Excel" action; restyled to .gl-btn-primary with
   an override strong enough to beat the generic .modal-footer button
   rule (element selector, higher specificity than a lone class). Neither
   stacks on another modal. */
#portfolioHoldingsModal,
#familyHoldingsModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
#portfolioHoldingsModal .holdings-list-modal,
#familyHoldingsModal .holdings-list-modal {
  position: relative;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 88vh;
  top: auto;
  left: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  animation: fadeInModal 0.2s ease;
}
#portfolioHoldingsModal .modal-header,
#familyHoldingsModal .modal-header,
#portfolioHoldingsModal .modal-footer,
#familyHoldingsModal .modal-footer {
  flex-shrink: 0;
}
#portfolioHoldingsModal .modal-footer .gl-btn-primary,
#familyHoldingsModal .modal-footer .gl-btn-primary {
  padding: 9px 20px;
  background: var(--primary-gradient-light);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
#portfolioHoldingsModal .modal-footer .gl-btn-primary:hover,
#familyHoldingsModal .modal-footer .gl-btn-primary:hover {
  background: var(--primary-gradient-end);
}

/* Fund Holdings / Fund Transactions modals -- same standard. Both can be
   opened WHILE Fund Details is still open underneath (stacked), so they
   get a higher z-index than #fundDetailsModal's overlay (9999) to
   guarantee correct paint order now that Fund Details is a small card
   instead of an occluding fullscreen sheet. New shared panel modifier
   class (.holdings-list-modal, reused from the block above -- same
   look). Footer button restyled the same way. */
#fundHoldingsModal,
#fundTransactionModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
#fundHoldingsModal .holdings-list-modal,
#fundTransactionModal .holdings-list-modal {
  position: relative;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 88vh;
  top: auto;
  left: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  animation: fadeInModal 0.2s ease;
}
#fundHoldingsModal .modal-header,
#fundTransactionModal .modal-header,
#fundHoldingsModal .modal-footer,
#fundTransactionModal .modal-footer {
  flex-shrink: 0;
}
#fundHoldingsModal .modal-footer .gl-btn-primary,
#fundTransactionModal .modal-footer .gl-btn-primary {
  padding: 9px 20px;
  background: var(--primary-gradient-light);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
#fundHoldingsModal .modal-footer .gl-btn-primary:hover,
#fundTransactionModal .modal-footer .gl-btn-primary:hover {
  background: var(--primary-gradient-end);
}

.fdm-spinner-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-card);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fdm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(154, 107, 70, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fdm-spin 0.7s linear infinite;
}

@keyframes fdm-spin {
  to {
    transform: rotate(360deg);
  }
}

.fund-details-content {
  padding: 20px;
}

.fund-details-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.fund-details-section h3 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fund-details-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.fund-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg-offwhite);
  border-radius: 8px;
  border-left: 3px solid #9a6b46;
}

.fund-detail-stat .stat-label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fund-detail-stat .stat-value {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.fund-detail-stat .stat-value.gain {
  color: var(--success);
}

.fund-detail-stat .stat-value.loss {
  color: var(--danger);
}

/* ============================================
   COMPACT FUND STATISTICS SECTION
   ============================================ */

.fund-stats-compact {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

/* Header bar with title + inline badges */
.fund-stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  flex-wrap: wrap;
}

.fund-stats-header-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}

.fund-stats-header-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex: 1;
}

.fund-stats-header-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fund-stats-rating-badge,
.fund-stats-expense-badge,
.fund-stats-aum-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.fund-stats-rating-badge {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.fund-stats-expense-badge {
  background: rgba(198, 90, 82, 0.1);
  color: var(--danger);
  border: 1px solid rgba(198, 90, 82, 0.2);
}

.fund-stats-aum-badge {
  background: rgba(154, 107, 70, 0.12);
  color: var(--accent);
  border: 1px solid rgba(154, 107, 70, 0.25);
}

/* Each group row (Returns / Risk) */
.fund-stats-group {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

.fund-stats-group:last-child {
  border-bottom: none;
}

.fund-stats-group-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
}

.fund-stats-group--returns .fund-stats-group-label {
  background: rgba(47, 143, 91, 0.05);
  color: var(--success);
}

.fund-stats-group--risk .fund-stats-group-label {
  background: rgba(154, 107, 70, 0.05);
  color: var(--accent);
}

/* Cells inside a group */
.fund-stats-group-cells {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.fund-stats-cell {
  flex: 1;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  gap: 3px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
}

.fund-stats-cell:last-child {
  border-right: none;
}

.fund-stats-cell-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fund-stats-cell-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Returns get green tinted values */
.fund-stats-cell--return .fund-stats-cell-value {
  color: var(--success);
}

@media (max-width: 767px) {
  .fund-stats-cell {
    min-width: 55px;
    padding: 8px 4px;
  }
  .fund-stats-cell-value {
    font-size: 12px;
  }
  .fund-stats-group-label {
    min-width: 22px;
    padding: 10px 5px;
  }
  .fund-stats-header {
    padding: 8px 12px;
  }
}

/* ============================================
   ============================================ */

/* ============================================
   ============================================ */

/* Fund logo in folio-card-header */
.folio-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folio-card-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Fund logo + title wrapper in modal header */
.modal-header-fund-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.modal-header-fund-title h2 {
  margin: 0;
  min-width: 0;
}

.modal-fund-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 2px;
}

/* Fund Meta section */
.fund-meta-section {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

.fund-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  border-right: 1px solid rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

.fund-meta-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fund-meta-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.fund-meta-value--mono {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

@media (max-width: 767px) {
  .modal-fund-logo {
    width: 26px;
    height: 26px;
  }
  .folio-card-logo {
    width: 18px;
    height: 18px;
  }
}

.fund-summary-compact {
  margin-bottom: 20px;
}

/* Modal header — two-row layout */
.fdm-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
}

.fdm-header-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px 10px;
}

.fdm-header-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.fdm-header-row2 {
  display: flex;
  align-items: center;
  padding: 0 15px 12px;
  gap: 10px;
}

.fdm-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.fdm-meta-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.2);
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.6;
}

.fdm-risk-inline {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  gap: 6px;
  flex-shrink: 0;
}

.fdm-risk-inline .riskometer-track {
  display: inline-flex;
  gap: 3px;
}

.fdm-risk-inline .riskometer-label {
  font-size: 12px;
  font-weight: 600;
}

.fdm-tenure-tag {
  font-size: 12px;
  color: var(--text-tertiary);
}

.fdm-meta-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border-primary);
  margin: 0 8px;
  vertical-align: middle;
}

/* Compact stat strip */
.fdm-stat-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
  margin: 0;
}

.fdm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  text-align: center;
  gap: 3px;
  border-right: 1px solid var(--border-light);
}

.fdm-stat:last-child {
  border-right: none;
}

.fdm-stat-l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fdm-stat-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.fdm-stat-v.gain {
  color: var(--success);
}
.fdm-stat-v.loss {
  color: var(--danger);
}
.fdm-stat-v.accent {
  color: var(--accent);
}

.fdm-stat-s {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.fdm-stat-s.gain {
  color: var(--success);
}
.fdm-stat-s.loss {
  color: var(--danger);
}

/* Action links row — split-half with center divider */
.fdm-actions-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
  margin-top: 10px;
}

.fdm-action-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 12px;
  transition: background 0.15s;
}

.fdm-action-link:hover {
  background: rgba(154, 107, 70, 0.06);
  border-radius: 0;
}

.fdm-action-link--disabled,
.fdm-action-link[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.fdm-action-link i {
  font-size: 11px;
}

.fdm-action-badge {
  font-size: 10px;
  font-weight: 600;
  background: rgba(154, 107, 70, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--accent);
}

.fdm-actions-sep {
  width: 1px;
  background: var(--border-light);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .fdm-stat-strip {
    grid-template-columns: repeat(4, 1fr);
  }
  .fdm-actions-row {
    margin-top: 10px;
  }
  .fdm-stat:nth-child(4) {
    border-right: none;
  }
  .fdm-stat:nth-child(4) ~ .fdm-stat {
    border-top: 1px solid var(--border-light);
  }
  .fdm-stat-v {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .fdm-header-row2 {
    flex-wrap: wrap;
    align-items: center;
  }
  .fdm-header-meta {
    flex-basis: 100%;
  }
  .fdm-meta-divider {
    display: none;
  }
  .fdm-tenure-tag {
    flex: 1;
    margin-top: 4px;
  }
  .fdm-risk-inline {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ---- kept for other uses, remove old hero/chips/meta-bar below ---- */
.fund-summary-folio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fund-summary-folio-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  border: 1px solid rgba(154, 107, 70, 0.25);
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.6;
}

/* Hero row: kept for compatibility if needed */
.fund-summary-hero-card--xirr {
  background: rgba(154, 107, 70, 0.05);
}
.fund-summary-hero-card--xirr::after {
  background: rgba(154, 107, 70, 0.4);
}

.fund-summary-hero-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.fund-summary-hero-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.fund-summary-hero-card--pnl.gain .fund-summary-hero-value {
  color: var(--success);
}

.fund-summary-hero-card--pnl.loss .fund-summary-hero-value {
  color: var(--danger);
}

.fund-summary-hero-card--xirr .fund-summary-hero-value {
  color: var(--accent);
}

.fund-summary-hero-sub {
  font-size: 12px;
  font-weight: 600;
  margin-top: 1px;
}

.fund-summary-1d-sub--pos {
  color: var(--success);
}

.fund-summary-1d-sub--neg {
  color: var(--danger);
}

.fund-summary-hero-card--pnl.gain .fund-summary-hero-sub {
  color: var(--success);
}
.fund-summary-hero-card--pnl.loss .fund-summary-hero-sub {
  color: var(--danger);
}

/* Secondary chips row */
.fund-summary-chips-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(154, 107, 70, 0.1);
}

.fund-summary-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
  background: rgba(154, 107, 70, 0.02);
}

.fund-summary-chip:last-child {
  border-right: none;
}

.fund-summary-chip-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fund-summary-chip-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.fund-summary-chip-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

.fund-detail-chart-wrapper {
  position: relative;
  max-height: 250px;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 8px;
}

.fund-detail-chart-wrapper canvas {
  max-height: 250px;
}

/* Charts side by side on desktop */
.fund-details-charts-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.fund-charts-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rolling-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px 16px 16px;
}

.rolling-tile {
  background: rgba(154, 107, 70, 0.04);
  border-radius: 10px;
  padding: 12px;
}

.rolling-tile-period {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(154, 107, 70, 0.15);
}

.rolling-tile-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rolling-tile-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rolling-tile-lbl {
  font-size: 11px;
  color: var(--text-secondary);
}

.rolling-tile-val {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rolling-tiles-footer {
  display: none;
}

@media (max-width: 767px) {
  .rolling-tiles-footer {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px 16px 14px;
  }

  .fund-rolling-card .fund-chart-card-header .perf-since-label {
    display: none;
  }
}

/* Compact chart card — matches Summary/Stats/Folios language */
.fund-chart-card {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
  display: flex;
  flex-direction: column;
}

.fund-chart-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 42px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.fund-chart-card-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}

.fdm-perf-bm-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.fdm-perf-bm-btn {
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 8px;
  height: 22px;
  border-radius: 11px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.fdm-perf-bm-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.fdm-perf-bm-btn:not(.active):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fund-chart-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex: 1;
  white-space: nowrap;
}

/* Period filter tabs */
.fund-chart-period-tabs {
  display: flex;
  gap: 4px;
}

.fund-chart-period-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}

.fund-chart-period-btn:not(.active):not(:hover) {
  border-color: rgba(154, 107, 70, 0.15);
}

.fund-chart-period-btn:hover {
  color: var(--text-primary);
  background: rgba(154, 107, 70, 0.1);
}

.fund-chart-period-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Period stat strip below header */
.fund-chart-period-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(154, 107, 70, 0.03);
  border-bottom: 1px solid rgba(154, 107, 70, 0.07);
  min-height: 28px;
  flex-shrink: 0;
}

.fund-chart-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fund-chart-stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.fund-chart-stat-value.gain {
  color: var(--success);
}
.fund-chart-stat-value.loss {
  color: var(--danger);
}

.fund-chart-stat-pct {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}

/* Custom legend pills for performance chart */
.fund-chart-legend-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fund-chart-legend-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--pill-color, #9a6b46);
  opacity: 0.9;
}

.fund-chart-legend-pill--dashed {
  background: transparent;
  border: 1.5px dashed var(--pill-color, #9a6b46);
  color: var(--pill-color, #9a6b46);
  opacity: 1;
}

/* ============================================
   COMPACT FUND COMPOSITION CARD
   ============================================ */

.fund-composition-card {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

.fund-composition-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
}

.fund-composition-rows {
  display: flex;
  flex-direction: column;
}

.fund-composition-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 14px;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}

.fund-composition-row--last {
  border-bottom: none;
}

.fund-composition-row-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 38px;
  text-align: center;
  line-height: 1.4;
  flex-shrink: 0;
}

.fund-composition-row-body {
  flex: 1;
  min-width: 0;
}

.fund-composition-bar-wrap .composition-bar {
  height: 28px;
  margin-bottom: 6px;
}

.fund-composition-bar-wrap .composition-legend {
  gap: 8px;
  font-size: 10px;
}

/* Two-column layout for fund composition in modal */
.fund-composition-cols {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 12px;
  gap: 10px;
}

.fund-composition-col {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  overflow: hidden;
}

.fund-composition-col-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px 7px;
  background: rgba(154, 107, 70, 0.04);
  border-bottom: 1px solid var(--border-medium);
}

.fund-composition-col-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fund-composition-col-sub {
  font-size: 10px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

.fund-composition-col-body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
}

.comp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comp-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
}

.comp-bar-seg {
  height: 100%;
  transition: opacity 0.15s;
}

.comp-bar-seg:first-child {
  border-radius: 4px 0 0 4px;
}
.comp-bar-seg:last-child {
  border-radius: 0 4px 4px 0;
}
.comp-bar-seg:only-child {
  border-radius: 4px;
}

.comp-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.comp-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.comp-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comp-leg-name {
  font-size: 11px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-leg-pct {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.fund-composition-col-divider {
  display: none;
}

@media (max-width: 767px) {
  .fund-composition-cols {
    flex-direction: column;
    gap: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .fund-composition-col {
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }
}

/* Canvas wrapper — no inner white box */
.fund-chart-canvas-wrapper {
  padding: 8px 10px;
  flex: 1;
}

/* ── Tax-aware exit section ── */
.fund-tax-exit-section {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border-medium);
}

.fund-tax-exit-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  background: rgba(154, 107, 70, 0.08);
}

.fund-tax-exit-badge {
  margin-left: auto;
  background: rgba(201, 135, 45, 0.12);
  color: var(--warning);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.ftax-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  padding: 10px 14px;
}

@media (max-width: 767px) {
  .ftax-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ftax-card.ftax-card--net {
    order: -1;
    grid-column: 1 / -1;
    background: rgba(47, 143, 91, 0.08);
    border-color: rgba(47, 143, 91, 0.22);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    align-items: center;
  }
  .ftax-card--net .ftax-card-lbl {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 2px;
  }
  .ftax-card--net .ftax-card-sub {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }
  .ftax-card--net .ftax-card-val {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 18px;
  }
}

.ftax-card {
  background: var(--bg-folio);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px 11px;
}

.ftax-card--highlight {
  border-color: rgba(198, 90, 82, 0.28);
  background: rgba(198, 90, 82, 0.04);
}

.ftax-card-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.ftax-card-val {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.2;
}

.ftax-card-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.tax-nil {
  color: var(--success);
  font-weight: 600;
}

.fund-tax-outcome-val--warn {
  color: var(--danger);
}
.fund-tax-outcome-val--net {
  color: var(--success);
}

.ftax-insights-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.ftax-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 180px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ftax-insight--wait {
  background: rgba(201, 135, 45, 0.07);
  border: 1px solid rgba(201, 135, 45, 0.22);
}

.ftax-insight--wait i {
  color: var(--warning);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.ftax-insight--load {
  background: rgba(154, 107, 70, 0.06);
  border: 1px solid rgba(154, 107, 70, 0.18);
}

.ftax-insight--load i {
  color: var(--accent);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.ftax-insight strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ftax-split {
  padding: 5px 14px 10px;
  border-bottom: 0.5px solid var(--border-light);
}

.ftax-split-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: none;
}

.ftax-split-bar {
  height: 8px;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  margin-bottom: 8px;
}

.ftax-split-seg--st {
  background: var(--danger);
}

.ftax-split-seg--lt {
  background: var(--success);
}

.ftax-split-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ftax-split-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.ftax-split-lbl-short {
  display: none;
}

.ftax-split-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ftax-split-dot--st {
  background: var(--danger);
}

.ftax-split-dot--lt {
  background: var(--success);
}

.ftax-split-amt {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fund-details-charts-row .fund-details-section {
  margin-bottom: 0;
}

.composition-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.composition-charts-grid h4 {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.fund-details-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fund-details-actions button {
  flex: 1;
  min-width: 200px;
}

/* Quick Actions Card */
.fund-quick-actions-card {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

.fund-quick-actions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
}

.fund-quick-actions-body {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}

.fund-quick-action-btn {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.25);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.12s;
}

.fund-quick-action-btn i {
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
}

.fund-quick-action-btn:hover {
  background: rgba(154, 107, 70, 0.2);
  border-color: rgba(154, 107, 70, 0.5);
}

.fund-quick-action-btn:active {
  transform: translateY(0);
}

.fund-quick-action-btn--disabled,
.fund-quick-action-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg-light);
  border-color: rgba(255, 255, 255, 0.06);
}

.fund-quick-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(154, 107, 70, 0.2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  color: var(--accent);
  letter-spacing: 0.2px;
}

/* Old action btn styles — replaced by fdm-action-link above */

/* ============================================
   FUND DETAILS MODAL — PEERS SECTION
   ============================================ */
.fdm-peers-section {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
  margin-bottom: 20px;
}
.fdm-peers-view-more-wrap {
  padding: 8px 16px;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  display: flex;
  justify-content: flex-end;
}

.fdm-peers-view-more-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.06);
  border: 1px solid rgba(154, 107, 70, 0.2);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fdm-peers-view-more-btn:hover {
  background: rgba(154, 107, 70, 0.12);
}

.fdm-peers-table-wrap {
  overflow-x: auto;
}
.fdm-peers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--bg-card);
  table-layout: fixed;
}
.fdm-peers-table thead th {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  background: rgba(154, 107, 70, 0.04);
  border-bottom: 1px solid var(--border-medium);
  white-space: nowrap;
}
.fdm-peer-th-fund {
  width: 40%;
}
.fdm-peers-table thead th:not(.fdm-peer-th-fund) {
  width: calc(60% / 6);
}
.fdm-peers-table thead th.fdm-peer-th-sort {
  cursor: pointer;
  user-select: none;
}
.fdm-peers-table thead th.fdm-peer-th-sort:not(.fdm-peer-th-fund) {
  text-align: right;
}
.fdm-peers-table thead th.fdm-peer-th-sort:hover {
  color: var(--text-primary);
}
.fdm-sort-icon {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-left: 2px;
}
.fdm-peers-table tbody td {
  padding: 10px 12px;
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
  vertical-align: middle;
}
.fdm-peers-table tbody tr:first-child td {
  border-top: none;
}
.fdm-peers-table tbody tr.fdm-peer-current {
  background: rgba(154, 107, 70, 0.06);
  outline: 1px solid rgba(154, 107, 70, 0.2);
  outline-offset: -1px;
}
.fdm-peer-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fdm-peers-table .gain {
  color: var(--success);
  font-weight: 600;
}
.fdm-peers-table .loss {
  color: var(--danger);
  font-weight: 600;
}
.fdm-peers-table .warning {
  color: var(--warning);
  font-weight: 600;
}
.fdm-peer-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fdm-peer-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--bg-light);
  flex-shrink: 0;
}
.fdm-peer-logo-placeholder {
  background: var(--border-medium);
}
.fdm-peer-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.fdm-peer-house {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.fdm-peer-aum {
  color: var(--text-secondary);
  font-size: 11px;
}
.fdm-peer-rank-label {
  margin-top: 3px;
  line-height: 1;
}
.fdm-peer-rank-label i {
  font-size: 9px;
  color: var(--warning);
  margin-right: 1px;
}
.fdm-peer-risk-text {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .ftax-split-item {
    font-size: 10px;
  }

  .ftax-split-legend {
    gap: 16px;
  }

  .ftax-split-lbl-full {
    display: none;
  }

  .ftax-split-lbl-short {
    display: inline;
  }

  .fdm-mob-hide {
    display: none;
  }
  .fdm-peers-table {
    table-layout: auto;
  }
  .fdm-peer-th-fund {
    width: auto;
  }
  .fdm-peers-table thead th:not(.fdm-peer-th-fund) {
    width: auto;
  }
}

/* ============================================
   TRANSACTION CALENDAR
   ============================================ */

.txcal-year-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.txcal-year-tabs-wrap.txcal-no-overflow .txcal-year-arrow {
  display: none;
}

.txcal-year-arrow {
  flex-shrink: 0;
  width: 10px;
  height: 26px;
  border-radius: 6px;
  padding: 0px;
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition:
    opacity 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.txcal-year-arrow:hover:not(.disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.txcal-year-arrow.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.txcal-year-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.txcal-year-tabs::-webkit-scrollbar {
  display: none;
}

.txcal-year-dropdown-wrap {
  margin-bottom: 14px;
}

.txcal-year-select {
  padding: 7px 32px 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(154, 107, 70, 0.3);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.txcal-year-select:hover,
.txcal-year-select:focus {
  border-color: rgba(154, 107, 70, 0.6);
  outline: none;
}

.txcal-year-tab {
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(154, 107, 70, 0.3);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.txcal-year-tab.active {
  background: linear-gradient(
    135deg,
    var(--primary-gradient-start),
    var(--primary-gradient-end)
  );
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

.txcal-year-tab:hover {
  border-color: rgba(154, 107, 70, 0.5);
}

.txcal-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.txcal-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  flex-shrink: 0;
}

.txcal-legend-dot--invest {
  background: rgba(47, 143, 91, 0.45);
}
.txcal-legend-dot--redeem {
  background: rgba(198, 90, 82, 0.65);
}
.txcal-legend-dot--both {
  background: rgba(47, 143, 91, 0.9);
}

/* ── Transaction heatmap (GitHub-style, one row per year) ── */
.txhm {
  overflow-x: auto;
  padding-bottom: 4px;
}

.txhm-grid {
  display: grid;
  gap: 2px;
  min-width: 480px;
}

.txhm-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.txhm-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--bg-offwhite);
}

:root[data-theme="dark"] .txhm-cell {
  background: var(--bg-card-hover);
}

.txhm-cell--void {
  background: transparent;
}

.txhm-cell--invest {
  background: rgba(47, 143, 91, 0.45);
  cursor: pointer;
}

.txhm-cell--redeem {
  background: rgba(198, 90, 82, 0.65);
  cursor: pointer;
}

.txhm-cell--both {
  background: rgba(47, 143, 91, 0.9);
  cursor: pointer;
}

:root[data-theme="dark"] .txhm-cell--invest {
  background: rgba(69, 192, 126, 0.45);
}

:root[data-theme="dark"] .txhm-cell--redeem {
  background: rgba(224, 120, 112, 0.6);
}

:root[data-theme="dark"] .txhm-cell--both {
  background: rgba(69, 192, 126, 0.9);
}

.txhm-mrow {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  min-width: 480px;
}

.txhm-mlabel {
  grid-row: 1;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Fund Card Action Buttons */
.fund-card-actions {
  display: flex;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

.fund-action-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: none;
  transform: none;
}

.fund-action-btn + .fund-action-btn {
  border-left: 1px solid rgba(154, 107, 70, 0.1);
}

.fund-action-btn:hover {
  box-shadow: none;
}

.fund-action-btn.primary {
  background: rgba(154, 107, 70, 0.08);
  color: var(--accent);
}

.fund-action-btn.primary:hover {
  background: rgba(154, 107, 70, 0.15);
}

.fund-action-btn.secondary {
  background: transparent;
  color: var(--text-secondary);
  border-top: none;
}

.fund-action-btn.secondary:hover {
  background: var(--bg-gradient);
  color: var(--accent);
}

.fund-action-btn i {
  font-size: 11px;
}

.past-sort {
  justify-content: right;
}

.user-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.user-list-container.ul-dropdown-mode {
  max-height: none;
  overflow: visible;
}

/* User action bar */
.user-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.user-action-bar-primary {
  display: flex;
  gap: 8px;
  flex: 1;
}

.user-action-icon-btn {
  flex: 1 !important;
  width: auto !important;
  height: 44px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#deleteAllUsersBtn {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1199px) {
  .user-action-bar {
    flex-wrap: wrap;
  }
  .user-action-bar-primary {
    flex: 0 0 auto;
  }
  .user-action-icon-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
  }
  #deleteAllUsersBtn {
    flex: 1;
    min-width: 0;
  }
}

/* User dropdown (>5 users) */
.ul-dropdown {
  position: relative;
  width: 100%;
}

.ul-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.ul-trigger:hover,
.ul-trigger--open {
  border-color: var(--accent);
  background: var(--bg-offwhite);
  box-shadow: none;
}

.ul-trigger-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ul-trigger-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul-trigger-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul-trigger-chevron {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ul-trigger--open .ul-trigger-chevron {
  transform: rotate(180deg);
}

.ul-panel {
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 6px;
}

.ul-panel-scroll {
  max-height: 308px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ul-panel[hidden] {
  display: none;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: var(--bg-offwhite);
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.user-item:hover {
  border-color: var(--primary-gradient-start);
  background: var(--bg-card-hover);
}

.user-item.active {
  border-color: var(--primary-gradient-start);
  background: var(--bg-gradient);
}

.user-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-item-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.user-item-email {
  font-size: 12px;
  color: var(--text-tertiary);
  display: none;
}

.user-item-delete {
  background: var(--danger-btn);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  box-shadow: none;
}

.user-item-delete:hover {
  background: var(--danger-btn-hover);
}

.user-list-container::-webkit-scrollbar {
  width: 6px;
}

.user-list-container::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

.user-list-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

.user-item-settings {
  background: var(--primary-gradient-start);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  box-shadow: none;
  margin-right: 8px;
}

.user-item-settings:hover {
  background: var(--primary-gradient-end);
}

/* ── Folio management: centered overlay modal (not fullscreen) ───
   Mirrors the .gl-modal-overlay/.gl-modal pattern used by the Goals
   feature -- reuse the same convention instead of a one-off layout. */
.folio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.folio-management-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  animation: fadeInModal 0.2s ease;
  overflow: hidden;
}

.folio-management-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 16px;
}

/* Category section (Current/Past Holdings): a flat block, not a card --
   no border/shadow/background of its own, just vertical spacing. */
.folio-category {
  margin-bottom: 4px;
}

.folio-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 2px;
  border-top: 1px solid var(--border-light);
  transition: opacity 0.15s ease;
}

.folio-toggle-item.will-hide {
  opacity: 0.65;
}

.folio-toggle-item.will-hide .folio-toggle-name::after {
  content: "Hiding";
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--danger);
  background: rgba(198, 90, 82, 0.1);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

.folio-toggle-info {
  flex: 1;
  min-width: 0;
}

.folio-toggle-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13.5px;
}

.folio-toggle-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.folio-toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  background: var(--border-medium);
  border-radius: 13px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.folio-toggle-switch.active {
  background: var(--success);
}

.folio-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.folio-toggle-switch.active::after {
  transform: translateX(24px);
}

/* Compact toggle scoped to this modal -- .folio-toggle-switch is shared
   with the CAS-upload "remember hidden holdings" prompt elsewhere, so its
   base size stays untouched there. */
.folio-management-modal .folio-toggle-switch {
  width: 38px;
  height: 22px;
  border-radius: 12px;
}

.folio-management-modal .folio-toggle-switch::after {
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
}

.folio-management-modal .folio-toggle-switch.active::after {
  transform: translateX(16px);
}

.folio-management-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}

.folio-management-empty i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* AMC group: a plain uppercase sub-header row, not its own bordered/
   shadowed card -- one hairline divider separates it from the group above. */
.amc-group {
  margin-top: 4px;
}

.amc-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 2px 4px;
  border-top: 1px solid var(--border-medium);
}

.amc-group:first-child .amc-group-header {
  border-top: none;
  padding-top: 2px;
}

.amc-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.amc-name {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.amc-total {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Bulk AMC action: a plain text link, not a switch -- visually distinct
   from the per-folio toggles so bulk vs. individual actions read
   differently at a glance. */
.amc-bulk-toggle-switch {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}

.amc-bulk-toggle-switch:hover {
  color: var(--accent);
  opacity: 1;
}

.amc-folios {
  padding: 0;
}

#pastFolioGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#pastFolioGrid .capital-gains-section {
  margin-bottom: 20px;
  padding: 20px;
}

#pastFolioGrid .capital-gains-section:last-child {
  margin-bottom: 0;
}

/* Ensure folio-grid inside sections displays properly */
#pastFolioGrid .folio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

/* Section headers styling */
#pastFolioGrid .section-header {
  margin-bottom: 15px;
}

#pastFolioGrid .section-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#pastFolioGrid .section-subtitle {
  margin: 0;
}

.monthly-summary-container {
  background: var(--bg-card);
  padding: 25px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
}

.monthly-summary-container .gains-summary-card {
  margin: 0px !important;
}

/* 2-column card grid for 6M / 12M summary cards */
.monthly-summary-cards {
  grid-template-columns: repeat(2, 1fr) !important;
  margin: 20px 0 0;
}

@media (max-width: 767px) {
  .monthly-summary-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Average Monthly Summary — compact card layout */
.ms-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
}

.ms-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 16px;
}

.ms-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.ms-outlier-badge {
  font-size: 10px;
  font-weight: 600;
  color: #c9872d;
  background: rgba(201, 135, 45, 0.1);
  border: 1px solid rgba(201, 135, 45, 0.25);
  border-radius: 10px;
  padding: 2px 7px;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
}
.ms-outlier-popover {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 230px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
  text-align: left;
  cursor: default;
}
.ms-outlier-badge:hover .ms-outlier-popover {
  display: block;
}
.ms-typical-hdr {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}
.ms-typical-popover {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: default;
  text-transform: none;
  letter-spacing: 0;
}
.ms-typical-hdr:hover .ms-typical-popover {
  display: block;
}
.ms-pop-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.ms-pop-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.45;
}
.ms-pop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
}
.ms-pop-row:last-of-type {
  border-bottom: none;
}
.ms-pop-month {
  color: var(--text-secondary);
}
.ms-pop-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ms-pop-val.high {
  color: #2f8f5b;
}
.ms-pop-val.low {
  color: #c65a52;
}
.ms-pop-note {
  margin-top: 9px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.ms-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(231, 222, 211, 0.5);
}

.ms-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ms-summary-header {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
}

.ms-summary-col-hdr {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

.ms-summary-col-hdr.accent {
  color: var(--accent);
}

.ms-summary-lbl {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.ms-summary-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ms-summary-val.accent {
  color: var(--accent);
}
.ms-summary-val.gain {
  color: var(--gain);
}
.ms-summary-val.loss {
  color: var(--loss);
}

@media (max-width: 767px) {
  .ms-summary-grid {
    grid-template-columns: 1fr;
  }
}

.summary-table-wrapper {
  margin: 20px 0;
  overflow-x: auto;
}

/* Download icon on projection heading */
.proj-dl-btn {
  background: none;
  border: 1px solid rgba(154, 107, 70, 0.25);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}
.proj-dl-btn:hover {
  background: rgba(154, 107, 70, 0.09);
  border-color: rgba(154, 107, 70, 0.4);
}

/* Compact projection controls */
.proj-controls-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}
.proj-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.proj-ctrl-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.proj-ctrl-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.proj-ctrl-affix,
.proj-ctrl-prefix {
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.07);
  line-height: 1;
  flex-shrink: 0;
}
.proj-ctrl-affix {
  border-left: 1px solid var(--border-light);
}
.proj-ctrl-prefix {
  border-right: 1px solid var(--border-light);
}
.proj-ctrl-input-wrap {
  height: 40px;
}
.proj-ctrl-affix,
.proj-ctrl-prefix {
  height: 100%;
  display: flex;
  align-items: center;
}
.proj-ctrl-input {
  /* reset global input styles */
  all: unset;
  box-sizing: border-box;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  padding: 0 6px;
  width: 44px;
  text-align: left;
  cursor: text;
  -moz-appearance: textfield;
  appearance: textfield;
}
.proj-ctrl-input::-webkit-outer-spin-button,
.proj-ctrl-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.proj-ctrl-input:focus {
  outline: none;
}
.proj-ctrl-input:hover,
:root[data-theme="dark"] .proj-ctrl-input:hover {
  border-color: unset;
  background: transparent;
}
.proj-ctrl-sip {
  width: 80px;
}

@media (max-width: 767px) {
  .proj-controls-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .proj-ctrl {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .proj-ctrl-input-wrap {
    width: 100%;
  }
  .proj-ctrl-input {
    flex: 1;
    width: 0;
    min-width: 0;
  }
  .proj-ctrl-sip {
    width: 0;
  }
}

/* Legend pills */
.proj-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  margin: 12px 0;
}
.proj-legend-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
}

.proj-excel-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
}

.proj-excel-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

@media (max-width: 767px) {
  .proj-excel-btn {
    display: none;
  }

  .proj-pill {
    font-size: 10px;
    padding: 2px 7px;
    gap: 4px;
  }

  .proj-pill-typical {
    display: none;
  }
}
.proj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}
.proj-pill-line {
  width: 5px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}
.proj-pill-6m {
  color: #9a6b46;
  border-color: rgba(154, 107, 70, 0.28);
  background: rgba(154, 107, 70, 0.06);
}
.proj-pill-6m .proj-pill-line {
  background: #9a6b46;
}
.proj-pill-12m {
  color: #2f8f5b;
  border-color: rgba(47, 143, 91, 0.28);
  background: rgba(47, 143, 91, 0.06);
}
.proj-pill-12m .proj-pill-line {
  background: #2f8f5b;
}
.proj-pill-cus {
  color: #c9872d;
  border-color: rgba(201, 135, 45, 0.28);
  background: rgba(201, 135, 45, 0.06);
}
.proj-pill-cus .proj-pill-line {
  background: repeating-linear-gradient(
    90deg,
    #c9872d 0 4px,
    transparent 4px 7px
  );
}

/* Milestone cards */
.proj-milestone-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.proj-ms-card {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
}
.proj-ms-year {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-light);
}
.proj-ms-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
.proj-ms-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
}
.proj-ms-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.proj-ms-val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.proj-ms-v6m {
  color: #9a6b46;
}
.proj-ms-v12m {
  color: #2f8f5b;
}
.proj-ms-vcus {
  color: #c9872d;
}

@media (max-width: 767px) {
  .proj-milestone-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

#projectionChart {
  max-height: 400px;
}

.projection-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin: 30px 0;
  margin-bottom: 0px;
}

.projection-table-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border-light);
}

.custom-sip-projection {
  margin-top: 20px;
}

.projection-table-card h4 {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-light);
}

.projection-note {
  background: var(--bg-gradient);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #9a6b46;
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.projection-note i {
  font-size: 24px;
  color: var(--accent);
  flex-shrink: 0;
}

.projection-note strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
}

.projection-note ul {
  margin: 8px 0 0 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.projection-note li {
  margin-bottom: 4px;
}

.cagr-selector {
  background: var(--bg-gradient);
  padding: 15px;
  border-radius: 12px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  border: 2px solid var(--primary-gradient-start);
  justify-content: space-around;
}

.cagr-selector label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.cagr-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cagr-input-group input {
  width: 100px;
  padding: 10px;
  border: 2px solid var(--primary-gradient-start);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background: var(--bg-card);
  color: var(--text-primary);
}

.cagr-input-group input:focus {
  outline: none;
  border-color: var(--primary-gradient-end);
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.1);
}

.cagr-suffix {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.projection-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.cagr-prefix {
  padding: 0 8px;
  color: var(--text-secondary);
  font-weight: 600;
}

.summary-table-wrapper {
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.summary-table-wrapper table {
  min-width: 100%;
}

.projection-controls {
  display: grid;
  gap: 15px;
  margin-bottom: 30px;
}

.cagr-selector {
  background: var(--bg-gradient);
  padding: 12px 15px;
  border-radius: 12px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  border: 2px solid var(--primary-gradient-start);
}

.cagr-selector label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap;
  min-width: fit-content;
}

.cagr-input-group {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex-shrink: 0;
}

.cagr-input-group input {
  width: 100px;
  padding: 8px 24px 8px 8px;
  border: 2px solid var(--primary-gradient-start);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  background: var(--bg-card);
  color: var(--text-primary);
}

#customSipInput {
  width: 150px;
  padding-left: 24px; /* Left padding for prefix */
  padding-right: 8px;
}

.cagr-suffix,
.cagr-prefix {
  position: absolute;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  pointer-events: none;
}

.cagr-suffix {
  right: 8px;
}

.cagr-prefix {
  left: 8px;
}

.cagr-input-group input:focus {
  outline: none;
  border-color: var(--primary-gradient-end);
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.1);
}

/* Make projection tables scrollable on mobile */
.projection-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
  margin-bottom: 0px;
}

.projection-table-card {
  background: var(--bg-card);
  padding: 15px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border-light);
  overflow-x: auto;
}

.projection-table-card table {
  min-width: 100%;
}

#monthlySummarySection {
  margin: 30px 0px;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

#dynamicTotalPortfolioCard .card {
  text-align: center;
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-medium);
}

#dynamicTotalPortfolioCard .card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#dynamicTotalPortfolioCard .card .value {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 15px 0;
}

#dynamicTotalPortfolioCard .card .subtext {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.95;
}

@media (max-width: 1199px) {
  #dynamicTotalPortfolioCard .card .value {
    font-size: 2rem;
  }

  #dynamicTotalPortfolioCard .card .subtext {
    font-size: 0.85rem;
  }
}

/* Category header (Current/Past Holdings): flat row, no card background --
   sits directly on the modal surface. */
.folio-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 2px 10px;
  cursor: pointer;
  user-select: none;
}

.folio-category-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.folio-category-title h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

.folio-count-badge {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

.collapse-icon {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.collapse-icon.rotated {
  transform: rotate(-180deg);
}

.folio-category-content {
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
  opacity: 1;
}

.folio-category-content.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* Tax Planning Styles */
.tax-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.tax-summary-card {
  background: var(--bg-gradient);
  padding: 20px;
  border-radius: 12px;
  border: 2px solid var(--primary-gradient-start);
  text-align: center;
}

.tax-summary-card h4 {
  margin: 0 0 10px 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tax-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.tax-summary-subtext {
  font-size: 12px;
  color: var(--text-tertiary);
}

.holdings-split-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.holdings-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 16px;
  background: var(--bg-gradient);
  border-radius: 8px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.holdings-split-header:hover {
  background: rgba(154, 107, 70, 0.15);
}

.holdings-split-title {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.holdings-split-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.holdings-split-summary {
  display: flex;
  align-items: center;
  gap: 20px;
}

.holdings-split-stat {
  text-align: right;
}

.holdings-split-stat .label {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
}

.holdings-split-stat .value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.collapse-icon {
  font-size: 16px;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.collapse-icon.rotated {
  transform: rotate(-180deg);
}

.holdings-split-content {
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    padding 0.3s ease;
  opacity: 1;
  overflow: hidden;
}

.holdings-split-content.collapsed {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
}

.tax-holding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-offwhite);
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.tax-holding-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
}

.tax-holding-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 4px;
}

.tax-holding-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.tax-holding-values {
  text-align: right;
}

.tax-holding-value {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.tax-holding-percentage {
  font-size: 12px;
  color: var(--text-tertiary);
}

.tax-note {
  background: var(--bg-gradient);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #9a6b46;
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.tax-note i {
  font-size: 24px;
  color: var(--accent);
  flex-shrink: 0;
}

.tax-note strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
}

.tax-note ul {
  margin: 8px 0 0 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.tax-note li {
  margin-bottom: 4px;
}

/* ── Tax Disclaimer ── */
.tax-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0px;
  padding: 12px 16px;
  background: rgba(198, 90, 82, 0.06);
  border: 1px solid rgba(198, 90, 82, 0.18);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.tax-disclaimer i {
  color: var(--danger);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── Current Tax Rates Section ── */
.tax-rates-section {
  background: var(--bg-card);
  border-radius: 14px;
  margin-top: 24px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

.tax-rates-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
}

.tax-rates-icon {
  font-size: 15px;
}

.tax-rates-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.tax-rates-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tax-rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tax-rates-table thead tr {
  background: var(--bg-gradient);
}

.tax-rates-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  white-space: nowrap;
}

.tax-rates-table td {
  padding: 8px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--bg-gradient);
  vertical-align: top;
  line-height: 1.4;
}

.tax-rates-table tbody tr:last-child td {
  border-bottom: none;
}

.tax-rates-table td:first-child {
  color: var(--text-primary);
  font-weight: 500;
  min-width: 160px;
}

.tax-rates-table td strong {
  font-weight: 700;
}

.tax-rates-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.tax-rates-notes {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  background: rgba(154, 107, 70, 0.03);
}

.tax-rates-notes p {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 2px 0;
  line-height: 1.5;
}

/* Mobile: stacked card layout instead of scrolling table */
@media (max-width: 767px) {
  .tax-rates-table-wrapper {
    overflow-x: visible;
  }
  .tax-rates-table,
  .tax-rates-table thead,
  .tax-rates-table tbody,
  .tax-rates-table th,
  .tax-rates-table td,
  .tax-rates-table tr {
    display: block;
  }
  .tax-rates-table thead {
    display: none;
  }
  .tax-rates-table tbody tr {
    border-bottom: 1px solid rgba(154, 107, 70, 0.1);
    padding: 8px 14px;
  }
  .tax-rates-table tbody tr:last-child {
    border-bottom: none;
  }
  .tax-rates-table td {
    padding: 1px 0;
    border: none;
    min-width: unset;
    font-size: 12px;
  }
  .tax-rates-table td:first-child {
    font-size: 12.5px;
    margin-bottom: 4px;
    min-width: unset;
  }
  .tax-rates-table td:not(:first-child)::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-right: 6px;
    vertical-align: middle;
  }
}

/* Fund meta grid: desktop = 3 cols, last item fills remaining */
.fund-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.inv-limit-section .fund-meta-grid {
  grid-template-columns: repeat(5, 1fr);
}

/* tablet: 2 cols — last item fills 2 cells */
@media (max-width: 885px) and (min-width: 768px) {
  .fund-meta-grid,
  .inv-limit-section .fund-meta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* mobile: 2 cols — last item fills 2 cells */
@media (max-width: 767px) {
  .fund-meta-grid,
  .inv-limit-section .fund-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fund-meta-value--tax {
  color: var(--text-secondary);
  font-size: 12px;
}

@media (max-width: 767px) {
  #holdingsCard,
  #familyHoldingsCard {
    grid-column: span 1;
  }

  #holdingsCard .chart-legend,
  #holdingsCard .donut-labels,
  #familyHoldingsCard .chart-legend,
  #familyHoldingsCard .donut-labels {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1199px) {
  .mobile-header {
    display: flex;
  }

  .hamburger-menu {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  .dashboard-tabs .tab-container,
  .dashboard-tabs .theme-container {
    display: none;
  }

  .dashboard-tabs {
    padding: 15px;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }

  .see-more {
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .hamburger-menu,
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }

  .dashboard-tabs .tab-container,
  .dashboard-tabs .theme-container {
    display: flex;
  }
}

@media (max-width: 1199px) {
  .upload-icon {
    font-size: 36px;
  }

  .perf-canvas-wrap {
    height: 300px;
  }

  .perf-chart-card {
    grid-template-areas: "tabs" "strip" "canvas" "timefilter";
    grid-template-columns: 1fr;
  }

  .chart-stat-strip {
    height: auto;
    padding: 8px 12px;
  }

  .css-date {
    min-width: unset;
  }

  .css-divider {
    margin: 0 10px;
    height: 24px;
  }

  .css-item {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .css-label {
    font-size: 9px;
  }

  .css-val {
    font-size: 10px;
  }

  .perf-chart-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-medium);
  }

  .chart-tabs {
    justify-content: space-around;
    gap: 0;
  }

  .time-filter {
    justify-content: space-around;
    gap: 0;
    padding: 10px 16px 12px;
    border-bottom: none;
    border-top: 1px solid var(--border-medium);
  }

  .tab-btn {
    height: 26px;
    padding: 0 12px;
    font-size: 11px;
  }

  .time-btn[data-period="2Y"],
  .time-btn[data-period="4Y"] {
    display: none;
  }

  .upload-section h2 {
    font-size: 16px;
  }

  .modal-header h2 {
    font-size: 16px;
  }

  .transaction-table th,
  .transaction-table td {
    padding: 8px;
    font-size: 11px;
  }

  .view-tx-btn {
    padding: 8px 12px;
    font-size: 11px;
  }

  .dashboard-tab-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
  .tx-search {
    width: 120px;
  }
  .capital-gains-section {
    padding: 16px;
  }

  .gains-table th,
  .gains-table td {
    padding: 12px;
    font-size: 12px;
  }

  .section-header h3 {
    font-size: 16px;
  }

  .gains-table-wrapper h4 {
    font-size: 14px;
  }

  .gains-summary-grid {
    grid-template-columns: 1fr;
  }

  /* Hide detailed transaction tables on mobile & tablet — download button remains */
  .gains-trans,
  #yearGainsDisplay .gains-table-wrapper:has(.gains-trans),
  #capitalGainsContent
    > .capital-gains-section:last-child
    .gains-table-wrapper {
    display: none;
  }

  .footer-content {
    flex-direction: column;
    gap: 10px;
  }

  .footer-label,
  .footer-value {
    font-size: 12px;
  }

  .fund-details-content {
    padding: 10px;
  }

  .fund-details-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .fund-detail-stat {
    padding: 10px;
  }

  .fund-detail-chart-wrapper,
  .fund-detail-chart-wrapper canvas {
    max-height: 150px;
  }

  .fund-details-charts-row {
    gap: 12px;
  }

  .fund-charts-top-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rolling-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .fund-chart-period-tabs {
    gap: 4px;
    background: transparent;
    padding: 0;
  }

  .fund-chart-period-btn {
    padding: 4px 10px;
    font-size: 10px;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
  }

  .fund-chart-period-btn.active {
    border-color: var(--accent);
  }

  .fund-chart-card-title {
    font-size: 11px;
  }

  .composition-charts-grid {
    grid-template-columns: 1fr;
  }

  .fund-action-btn {
    font-size: 11px;
  }

  .fund-details-actions button {
    min-width: 100%;
  }

  .projection-tables {
    grid-template-columns: 1fr;
  }

  #projectionChart {
    max-height: 250px;
  }

  .monthly-summary-container {
    padding: 15px;
  }

  .section-header h3 {
    font-size: 16px;
  }

  .section-subtitle {
    font-size: 12px;
  }

  .gains-table th,
  .gains-table td {
    padding: 8px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  .gains-table th:first-child,
  .gains-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 1;
  }

  .gains-table thead th:first-child {
    z-index: 2;
  }

  .cagr-selector {
    padding: 10px 12px;
    gap: 8px;
  }

  .cagr-selector label {
    font-size: 11px;
  }

  .cagr-input-group input {
    padding: 6px 20px 6px 6px;
    font-size: 14px;
  }

  #customSipInput {
    padding-left: 20px;
    padding-right: 6px;
  }

  .cagr-suffix,
  .cagr-prefix {
    font-size: 12px;
  }

  .cagr-suffix {
    right: 6px;
  }

  .cagr-prefix {
    left: 6px;
  }

  .projection-tables {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .projection-table-card {
    padding: 12px;
  }

  .projection-table-card h4 {
    font-size: 13px;
  }

  #projectionChart {
    max-height: 200px;
  }

  .assets-grid {
    grid-template-columns: 1fr;
  }

  .additional-assets-container {
    padding: 15px;
  }

  .asset-card {
    padding: 15px;
  }

  .asset-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .asset-header h4 {
    font-size: 16px;
  }

  .summary-value {
    font-size: 24px;
  }

  .folio-category-header {
    padding: 12px 2px 8px;
  }

  .folio-category-title {
    gap: 8px;
  }

  .folio-category-title h4 {
    font-size: 14px;
  }

  .folio-count-badge {
    font-size: 11px;
  }

  .collapse-icon {
    margin-left: 8px;
    font-size: 11px;
  }

  .holdings-split-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .holdings-split-summary {
    width: 100%;
    justify-content: space-between;
  }

  .tax-summary-value {
    font-size: 24px;
  }

  .holdings-split-title {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  }

  .holdings-split-stat {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .compact-dashboard {
    display: none !important;
  }

  #family-dashboard .compact-dashboard {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .load {
    width: 100%;
  }
  body {
    background: var(--bg-card);
  }

  .container {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .folio-section {
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
  }

  .folio-card,
  .card,
  .analytics-card,
  .capital-gains-section {
    box-shadow: var(--shadow-lg);
  }

  .folio-card:hover,
  .upload-card:hover,
  .card:hover,
  .analytics-card:hover {
    box-shadow: var(--shadow-lg);
  }

  .folio-card-hero-value {
    font-size: 12px;
  }

  .folio-card-hero-cell {
    padding: 8px 4px;
  }

  .upload-tab-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
  }

  /* Subtle top separator before the last card (e.g. danger zone) in manage CAS */
  .upload-tab-content .upload-card:last-child {
    border-top: 2px solid var(--border-light);
    margin-top: 4px;
  }

  .secondary-btn {
    padding: 10px;
  }

  .dashboard-footer {
    margin-top: 20px;
  }

  .chart-section {
    box-shadow: none;
    background: none;
    border: none;
    margin-bottom: 0;
  }

  .portfolio-analytics-section {
    box-shadow: none;
    background: var(--bg-light);
    border: none;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
  }

  .secondary-btn {
    font-size: 12px;
  }

  .capital-gains-section {
    margin-bottom: 20px;
  }

  .dashboard-title {
    font-size: 16px;
  }

  .see-more.current-holdings-header {
    flex-wrap: wrap;
  }

  .see-more-btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  #dashboard .see-more-btn {
    margin-right: 20px;
  }

  .danger-btn {
    padding: 12px 12px;
    font-size: 11px;
  }
  .upload-section {
    margin-bottom: 16px;
  }

  .user-selector {
    background-size: 10px;
    padding: 10px 20px 10px 12px;
  }

  .dashboard-tabs {
    margin-bottom: 0;
    background: var(--bg-card);
  }

  .compact-dashboard {
    display: block;
  }

  /* .compact-dashboard's own overflow:hidden clips any position:sticky
     descendant -- sticky can't escape an overflow:hidden ancestor, so it
     silently no-ops instead of sticking. Both axes have to be "visible":
     per spec, if overflow-x and overflow-y differ and one is "visible",
     the browser silently converts that one to "auto" instead -- and
     "auto" blocks sticky exactly like "hidden" does. Setting only
     overflow-y:visible here (leaving overflow-x:hidden from the base
     rule) looked like a fix but the browser was quietly turning it back
     into overflow-y:auto, so sticky never actually applied. */
  .compact-dashboard {
    overflow: visible;
  }

  /* Keep search/sort reachable while scrolling a long holdings list --
     shared by #compactDashboard (current) and #compactPastDashboard (past),
     both stick just below the sticky top bar. */
  .compact-ctrl-bar {
    position: sticky;
    top: var(--topbar-height);
    z-index: 10;
    background: var(--bg-light);
    padding-top: 8px;
  }

  #dashSummaryCard {
    display: none;
  }

  #dashboard .see-more {
    display: none;
  }

  #family-dashboard .compact-dashboard {
    display: block;
  }

  #family-dashboard .compact-dashboard .compact-summary-card {
    margin-bottom: 0;
  }

  #family-dashboard #familySummaryToolbar {
    display: none;
  }

  #familyUserBreakdown,
  .family-user-breakdown-heading {
    display: none !important;
  }

  #family-dashboard .folio-section {
    display: none !important;
  }

  .fund-details-section {
    padding: 15px;
  }

  .fund-details-section h3 {
    font-size: 16px;
  }

  .fund-detail-stat .stat-label {
    font-size: 10px;
  }

  .fund-detail-stat .stat-value {
    font-size: 13px;
  }

  /* .current-holding-button is shown on mobile — tab is enabled */

  #pastSection {
    display: none !important;
  }

  #pastFolioGrid .capital-gains-section {
    margin-bottom: 15px;
    padding: 16px;
  }

  .monthly-summary-container {
    padding: 12px;
    margin: 20px 0;
    box-shadow: none;
    border: none;
  }

  #transactions .monthly-summary-container {
    margin: 0px;
  }

  .gains-table th,
  .gains-table td {
    padding: 6px 4px;
    font-size: 10px;
  }

  .cagr-input-group input {
    font-size: 13px;
  }

  #monthlySummarySection {
    margin: 0px;
  }

  .additional-assets-container {
    border-radius: 0px;
  }

  .folio-category-title {
    flex-wrap: wrap;
  }

  .folio-count-badge {
    margin-top: 6px;
  }

  .folio-management-content {
    padding: 4px 14px 16px;
  }
}

.hidden {
  display: none;
}

/* ============================================
   DEBUG CAS INJECT ROW
   ============================================ */

.debug-cas-inject-row {
  border-left: 3px solid #c9872d;
  padding-left: 14px;
  margin-left: -14px;
  background: rgba(201, 135, 45, 0.04);
  border-radius: 0 8px 8px 0;
}

:root[data-theme="dark"] .debug-cas-inject-row {
  background: rgba(201, 135, 45, 0.07);
}

.debug-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--warning);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 8px;
  text-transform: uppercase;
}

.debug-cas-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.debug-cas-file-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 9px 14px;
  border: 1px dashed rgba(201, 135, 45, 0.5);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(201, 135, 45, 0.04);
  transition:
    border-color 0.2s,
    background 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-cas-file-label:hover {
  border-color: var(--warning);
  background: rgba(201, 135, 45, 0.1);
  color: var(--text-primary);
}

.debug-cas-file-label i {
  color: var(--warning);
  flex-shrink: 0;
}

.debug-cas-file-label span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-cas-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid rgba(154, 107, 70, 0.25);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  resize: vertical;
  min-height: 110px;
  transition: border-color 0.2s;
  outline: none;
}

.debug-cas-textarea:focus {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(201, 135, 45, 0.12);
}

.debug-cas-textarea::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.debug-cas-actions {
  display: flex;
  gap: 8px;
}

.debug-cas-actions .cas-row-btn {
  flex: 1;
}

/* ============================================
   FUND TRANSACTION MODAL — FOLIO WISE TOGGLE
   ============================================ */

/* Right side of modal header: toggle + close button */
.modal-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Label wrapper for the toggle */
.fund-tx-folio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.fund-tx-folio-label-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Pill toggle — scoped away from .folio-toggle-switch to avoid conflicts */
.fund-tx-toggle-pill {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.fund-tx-toggle-pill input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.fund-tx-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-medium);
  border-radius: 20px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.fund-tx-toggle-track::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--bg-card);
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fund-tx-toggle-pill input[type="checkbox"]:checked + .fund-tx-toggle-track {
  background: var(--primary-gradient-start);
  background: var(--success);
}

.fund-tx-toggle-pill
  input[type="checkbox"]:checked
  + .fund-tx-toggle-track::before {
  transform: translateX(16px);
}

/* Folio-wise view wrapper — single table, no gaps needed */
.folio-wise-wrapper {
  padding: 0;
}

.folio-wise-table {
  width: 100%;
  border-collapse: collapse;
}

/* Folio group separator row */
.folio-group-header-row {
  background: var(--bg-gradient) !important;
}

.folio-group-header-row:hover {
  background: var(--bg-gradient) !important;
}

.folio-group-header-cell {
  padding: 10px 14px !important;
  border-top: 2px solid var(--border-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* First folio group — no top border */
.folio-group-separator:first-of-type .folio-group-header-cell {
  border-top: none !important;
}

.folio-tx-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: 6px;
}

.folio-tx-number,
.folio-tx-current-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
  margin-right: 12px;
}

/* Last row of each folio group gets a slightly stronger bottom border */
.folio-group-body tr:last-child td {
  border-bottom: 2px solid var(--border-light);
}

:root[data-theme="dark"] .folio-group-header-cell {
  border-top-color: var(--border-primary) !important;
  border-bottom-color: var(--border-medium) !important;
}

:root[data-theme="dark"] .folio-group-body tr:last-child td {
  border-bottom-color: var(--border-medium);
}

@media (max-width: 1199px) {
  .fund-tx-folio-label-text {
    display: none;
  }
}

/* ============================================
   COMPACT FOLIO TABLE
   ============================================ */

.folio-compact-section {
  background: var(--bg-card);
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
}

.folio-compact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
}

.folio-compact-header-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}

.folio-compact-header-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex: 1;
}

.folio-compact-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  background: rgba(154, 107, 70, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
}

.folio-compact-table {
  display: flex;
  flex-direction: column;
}

.folio-compact-row {
  display: flex;
  align-items: stretch;
  box-shadow: inset 0 -1px 0 0 rgba(154, 107, 70, 0.07);
  transition: background 0.15s ease;
}

.folio-compact-row:last-child {
  box-shadow: none;
}

.folio-compact-row:hover {
  background: rgba(154, 107, 70, 0.04);
}

.folio-compact-row--redeemed {
  opacity: 0.65;
}

.folio-compact-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 110px;
  border-right: 1px solid rgba(154, 107, 70, 0.1);
  background: rgba(154, 107, 70, 0.03);
  flex-shrink: 0;
}

.folio-compact-number {
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.folio-compact-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 20px;
}

.folio-compact-badge--active {
  background: rgba(47, 143, 91, 0.15);
  color: var(--success);
  border: 1px solid rgba(47, 143, 91, 0.25);
}

.folio-compact-badge--redeemed {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-tertiary);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.folio-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.folio-status-dot--active {
  background: var(--success);
}

.folio-status-dot--redeemed {
  background: var(--text-tertiary);
}

.folio-compact-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
}

.folio-compact-cell:last-child {
  border-right: none;
}

.folio-compact-cell-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.folio-compact-cell-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.folio-compact-cell-value.gain {
  color: var(--success);
}
.folio-compact-cell-value.loss {
  color: var(--danger);
}

.folio-compact-pct {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}

.folio-lbl-short {
  display: none;
}

@media (max-width: 767px) {
  .folio-compact-cell--hold,
  .folio-compact-cell--pct {
    display: none;
  }
  .folio-compact-id {
    min-width: 80px;
    padding: 8px 10px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .folio-compact-cell {
    padding: 8px 4px;
  }
  .folio-compact-cell-value {
    font-size: 11px;
  }
  .folio-lbl-full {
    display: none;
  }
  .folio-lbl-short {
    display: inline;
  }
  .folio-status-dot.folio-lbl-short {
    display: inline-block;
  }
  .folio-pnl-lbl {
    display: none;
  }
}

/* Legacy folio-details kept for any other usage */
.folio-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.folio-details-card {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.folio-details-card:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}

.folio-details-card--redeemed {
  opacity: 0.7;
}

.folio-details-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-gradient);
  border-bottom: 1px solid var(--border-light);
  gap: 10px;
}

.folio-details-number {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: monospace;
  letter-spacing: 0.02em;
}

.folio-details-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.folio-details-badge--active {
  background: rgba(47, 143, 91, 0.15);
  color: var(--success);
}

.folio-details-badge--redeemed {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text-tertiary);
}

.folio-details-stats {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folio-details-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.folio-details-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.folio-details-stat-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.folio-details-stat-value.gain {
  color: var(--success);
}

.folio-details-stat-value.loss {
  color: var(--danger);
}

@media (max-width: 1199px) {
  .folio-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CAS PANEL  — folio-card language
   Desktop only (≥1025px). Mobile/tablet use original upload-card layout.
   ============================================================ */

/* ── Manage Data redesign (md-*) ── */
.md-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.md-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.md-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.md-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.md-sec-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.md-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.md-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.md-card-icon-danger {
  background: rgba(198, 90, 82, 0.1);
  color: var(--danger);
}
.md-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.md-card-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.md-card-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.md-update-info-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 12px;
}
.md-update-slots {
  margin-bottom: 14px;
}
.md-update-slot {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-card-hover);
  border-radius: 8px;
  padding: 10px 12px;
}
.md-update-slot > i {
  font-size: 15px;
  color: var(--text-tertiary);
  margin-top: 2px;
  flex-shrink: 0;
}
.md-update-slot-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.md-update-slot-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.md-update-notes {
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.md-update-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.md-update-note > i {
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.md-update-note strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.md-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.md-upload-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-file-input,
.md-inp {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  box-sizing: border-box;
  min-height: 50px;
}

.md-file-label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 50px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  box-sizing: border-box;
  cursor: pointer;
}
.md-howto {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
}
.md-howto-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.md-howto-steps {
  padding-left: 14px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.md-howto-steps a {
  color: var(--accent);
}

.md-user-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.md-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.md-icon-btn-danger {
  border-color: rgba(198, 90, 82, 0.3);
  color: var(--danger);
}
.md-btn {
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-align: center;
}
.md-btn-primary {
  background: var(--accent);
  color: #fff;
}
.md-btn-outline {
  background: transparent;
  border: 1px solid rgba(154, 107, 70, 0.3);
  color: var(--accent);
}
.md-btn-danger {
  background: var(--danger);
  color: #fff;
}
.md-btn-auto {
  width: auto;
  margin-left: auto;
}
@media (hover: hover) {
  .md-btn-primary:hover {
    opacity: 0.9;
  }
  .md-btn-outline:hover {
    background: rgba(154, 107, 70, 0.08);
  }
  .md-btn-danger:hover {
    background: var(--danger-btn-hover) !important;
    color: #fff !important;
    border-color: transparent !important;
  }
  .md-icon-btn:hover {
    background: rgba(154, 107, 70, 0.08);
  }
}
@media (max-width: 1199px) {
  .md-layout {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  .md-upload-row {
    grid-template-columns: 1fr 1fr;
  }
  .md-two-col {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .md-upload-row {
    grid-template-columns: 1fr;
  }
  .md-two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile & tablet: original upload-card grid ── */
.cas-panels-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 20px;
}

.cas-panel {
  background: var(--bg-card);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-medium);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cas-panel:hover {
  box-shadow: var(--shadow-primary);
}

/* Panel header hidden on mobile — rows use cas-row-title as heading */
.cas-panel-header {
  display: none;
}

/* Each action row — stacked vertically like an upload-card */
.cas-panel-row.hidden {
  display: none !important;
}

.cas-panel-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(154, 107, 70, 0.18);
}

.cas-panel-row--last {
  border-bottom: none;
  padding-bottom: 0;
}

.cas-panel-row:first-child {
  padding-top: 0;
}

.cas-row-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cas-row-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text-primary);
}

.cas-row-icon i {
  font-size: 24px;
}

.cas-row-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cas-row-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.cas-row-info {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.cas-row-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cas-row-btn {
  width: 100%;
}

/* Clear Cache checklist in cas-row-info */
.clear-cache-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.clear-cache-checklist span {
  white-space: nowrap;
}

.cas-file-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cas-file-inputs input,
.cas-file-inputs .load {
  width: 100%;
}

/* Instructions panel — gradient like original instructions-card */
.cas-panel--instructions {
  background: var(--accent);
  color: white;
  border-color: transparent;
}

.cas-panel--instructions .cas-row-title,
.cas-panel--instructions .cas-row-icon {
  color: white;
}

.cas-panel--instructions .cas-row-sub {
  color: rgba(255, 255, 255, 0.85);
}

.cas-instructions-body {
  flex: 1;
}

.cas-steps {
  padding-left: 20px;
  margin: 0 0 14px;
}

.cas-steps li {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 6px;
}

.cas-steps a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.cas-steps strong {
  color: #fff;
  font-weight: 600;
}

:root[data-theme="dark"] .cas-steps strong {
  color: var(--text-primary);
}

:root[data-theme="dark"] .cas-steps li {
  color: var(--text-secondary);
}

.cas-note {
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
}

:root[data-theme="dark"] .cas-note {
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.25);
}

/* ── Desktop only: compact side-by-side panel layout ── */
@media (min-width: 1200px) {
  .cas-panels-row {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
  }

  .cas-panel {
    padding: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(154, 107, 70, 0.15);
    background: var(--bg-card);
    backdrop-filter: none;
  }

  .cas-panel:hover {
    box-shadow: var(--shadow-sm);
  }

  /* Show panel header on desktop */
  .cas-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 9px;
    background: rgba(154, 107, 70, 0.07);
    border-bottom: 1px solid rgba(154, 107, 70, 0.1);
    flex-shrink: 0;
  }

  .cas-panel-header-icon {
    font-size: 15px;
    line-height: 1;
    color: var(--accent);
  }

  .cas-panel-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
  }

  /* Rows go horizontal: meta left, action right */
  .cas-panel-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 20px;
  }

  .cas-panel-row:first-child {
    padding-top: 16px;
  }

  .cas-row-meta {
    flex: 1;
    min-width: 0;
  }

  .cas-row-icon {
    font-size: 20px;
    margin-top: 1px;
    width: 26px;
    text-align: center;
    color: var(--accent);
  }

  .cas-row-icon i {
    font-size: 18px;
  }

  .cas-row-title {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .cas-row-sub {
    font-size: 12px;
    line-height: 1.4;
  }

  .cas-row-info {
    font-size: 11px;
    margin-top: 3px;
  }

  .cas-row-action {
    flex-shrink: 0;
    align-items: flex-end;
    width: auto;
  }

  /* User list: allow it to grow but cap width so names don't overflow */
  .cas-panel-row .user-list-container {
    max-width: 280px;
    width: 280px;
    overflow-x: hidden;
    word-break: break-word;
  }

  .cas-row-btn {
    white-space: nowrap;
    width: auto;
  }

  .cas-file-inputs {
    min-width: 240px;
    width: 240px;
  }

  /* Instructions panel — desktop: gradient panel (light) / elevated card (dark) */
  .cas-panel--instructions {
    background: linear-gradient(
      135deg,
      var(--primary-gradient-start) 0%,
      var(--primary-gradient-end) 100%
    );
    border-color: transparent;
  }

  :root[data-theme="dark"] .cas-panel--instructions {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--accent);
  }

  .cas-panel--instructions .cas-panel-header {
    background: rgba(0, 0, 0, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  :root[data-theme="dark"] .cas-panel--instructions .cas-panel-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: var(--border-medium);
  }

  .cas-panel--instructions .cas-panel-header-title {
    color: #fff;
  }

  :root[data-theme="dark"] .cas-panel--instructions .cas-panel-header-title {
    color: var(--text-primary);
  }

  .cas-panel--instructions .cas-panel-header-icon {
    color: #fff;
  }

  :root[data-theme="dark"] .cas-panel--instructions .cas-panel-header-icon {
    color: var(--accent);
  }

  /* Instructions body fills card */
  .cas-panel--instructions .cas-panel-row {
    flex: 1;
    padding: 18px 20px;
    border-bottom: none;
  }

  .cas-panel--instructions .cas-panel-row:hover {
    background: transparent;
  }

  .cas-panel--instructions .cas-row-meta {
    display: none; /* header bar already labels the panel */
  }

  .cas-panel--instructions .cas-instructions-body {
    padding: 0;
  }

  .cas-panel--instructions .cas-row-action {
    width: 100%;
    align-items: stretch;
  }

  .cas-steps li {
    font-size: 13px;
  }
}

/* ── Mobile: no hover lift ── */
@media (max-width: 767px) {
  .cas-panels-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cas-panel {
    padding: 20px;
    padding-top: 0px;
    border: 1px solid rgba(154, 107, 70, 0.22);
    box-shadow: var(--shadow-sm);
  }

  .cas-panel--instructions {
    border: none;
    border-top: 3px solid rgba(154, 107, 70, 0.35);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }

  .cas-panel-row {
    padding: 18px 0;
    border-bottom: 1px solid rgba(154, 107, 70, 0.22);
    position: relative;
  }

  /* Stronger visible line using a pseudo-element that extends full bleed */
  .cas-panel-row:not(.cas-panel-row--last)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -20px;
    right: -20px;
    height: 1px;
    background: rgba(154, 107, 70, 0.18);
  }

  .cas-panel-row--last {
    padding-bottom: 0;
  }

  .cas-panel-row--last::after {
    display: none;
  }

  .cas-panel:hover {
    box-shadow: none;
  }
}

/* Dark mode */
:root[data-theme="dark"] .cas-panel {
  border-color: rgba(154, 107, 70, 0.2);
}

:root[data-theme="dark"] .cas-panel-row:hover {
  background: var(--bg-gradient);
}

/* Full-width single-panel row (Backup & Restore) */
.cas-panels-row--single {
  grid-template-columns: 1fr !important;
  padding-top: 0;
  margin-bottom: 20px;
}

@media (min-width: 1200px) {
  .cas-panels-row--single {
    padding-top: 0;
  }
}

:root[data-theme="dark"] .additional-assets-container {
  border-color: rgba(154, 107, 70, 0.2);
}

#transactionCalendarSection {
  margin-bottom: 20px;
}

.cas-instructions-action {
  width: 100%;
}

.cas-instructions-body {
  width: 100%;
}

@media (min-width: 1200px) {
  /* Desktop: hide the in-row title, panel header is enough */
  .cas-instructions-meta {
    display: none;
  }

  /* Instructions row fills the whole panel below the header */
  .cas-instructions-row {
    flex: 1;
    padding: 18px 20px;
    border-bottom: none;
  }

  .cas-instructions-row:hover {
    background: transparent;
  }

  .cas-instructions-action {
    width: 100%;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .cas-instructions-row {
    flex: 1;
    padding: 18px 20px;
    border-bottom: none;
    border-top: 1px solid rgba(154, 107, 70, 0.22);
    padding: 20px;
  }
}

/* ============================================================
   MOBILE FIXES
   1. Overlap & Expense Impact table overflow
   2. Fund details modal bottom buttons hidden under nav
   ============================================================ */

/* ── 1. Overlap Analysis + Expense Impact: scrollable tables on mobile ── */

/* Wrap every gains-table inside overlapContent / expenseContent
   in a scroll container so wide columns don't blow out the layout */
#overlapContent .gains-table-wrapper,
#expenseContent .gains-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* subtle shadow to hint at horizontal scroll */
  border-radius: 8px;
}

/* The tables themselves must not shrink — let them be their natural width
   and let the wrapper scroll */
#overlapContent .gains-table,
#expenseContent .gains-table {
  min-width: 520px; /* enough for 4–5 columns to breathe */
  width: 100%;
}

/* On mobile, tighten cell padding so content is as compact as possible */
@media (max-width: 1199px) {
  #overlapContent .gains-table th,
  #overlapContent .gains-table td,
  #expenseContent .gains-table th,
  #expenseContent .gains-table td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap; /* keep each cell on one line; wrapper scrolls */
  }

  /* "Funds" column (last col in common-holdings table) can wrap */
  #overlapContent .gains-table td:last-child {
    white-space: normal;
    min-width: 120px;
    max-width: 200px;
  }

  /* Expense impact: fund name column can wrap, numbers stay nowrap */
  #expenseContent .gains-table td:first-child {
    white-space: normal;
    min-width: 130px;
    max-width: 180px;
  }

  /* Section wrapper: no side padding that eats table space */
  #overlapContent .capital-gains-section,
  #expenseContent .capital-gains-section {
    padding: 14px 12px;
  }

  #overlapContent,
  #expenseContent {
    overflow-x: hidden; /* parent doesn't scroll, only the wrapper does */
  }
}

@media (max-width: 1199px) {
  .transaction-modal {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal-content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }

  .modal-footer {
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
  }
}

@media (max-width: 767px) {
  .fund-quick-actions-body {
    flex-direction: column;
    gap: 8px;
  }

  .fund-quick-action-btn {
    width: 100%;
    min-width: unset;
    justify-content: center;
    padding: 12px 16px;
  }
}

/* ============================================================
   MODERN TAB REDESIGN — v2
   Transactions, Capital Gains, Tax Planning,
   Overlap Analysis, Portfolio Health
   Matches Dashboard · Current Holdings · Manage CAS language:
   hero-row cells · pill labels · compact rows · clean tables
   ============================================================ */

/* ── Shared section wrapper (replaces old capital-gains-section padding) ── */
.cg-section {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.13);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

/* ── Compact section header bar (like folio-card-header) ── */
.cg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 9px;
  background: var(--bg-gradient);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  gap: 12px;
  flex-wrap: wrap;
}

.cg-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cg-section-title i {
  font-size: 15px;
  color: var(--accent);
  width: 16px;
}

.cg-section-title h3,
.cg-section-title h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.1px;
}

.cg-section-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cg-section-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Hero stat strip (like summary-cards / folio-card-hero) ── */
.cg-hero-strip {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(154, 107, 70, 0.09);
  background: var(--bg-card);
}

.cg-hero-cell {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid var(--bg-gradient);
  position: relative;
  transition: background 0.15s;
}

.cg-hero-cell:last-child {
  border-right: none;
}

.cg-hero-cell:hover {
  background: rgba(154, 107, 70, 0.03);
}

.cg-hero-cell::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(154, 107, 70, 0.15);
}

.cg-hero-cell.gain-cell {
  background: var(--bg-card);
}
.cg-hero-cell.gain-cell::after {
  background: rgba(47, 143, 91, 0.4);
}
.cg-hero-cell.loss-cell {
  background: var(--bg-card);
}
.cg-hero-cell.loss-cell::after {
  background: rgba(198, 90, 82, 0.4);
}
.cg-hero-cell.accent-cell {
  background: var(--bg-card);
}
.cg-hero-cell.accent-cell::after {
  background: rgba(154, 107, 70, 0.35);
}

.cg-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cg-hero-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.cg-hero-value.gain {
  color: var(--success);
}
.cg-hero-value.loss {
  color: var(--danger);
}
.cg-hero-value.accent {
  color: var(--accent);
}

.cg-hero-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.cg-hero-sub.gain {
  color: var(--success);
  opacity: 0.85;
}
.cg-hero-sub.loss {
  color: var(--danger);
  opacity: 0.85;
}

/* ── Pill / chip buttons (year selector, FY tabs) ── */
.cg-pill-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cg-pill-bar-wrap.cg-pill-no-overflow .cg-pill-arrow {
  display: none;
}

.cg-pill-arrow {
  flex-shrink: 0;
  width: 10px;
  height: 26px;
  border-radius: 6px;
  padding: 0px;
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition:
    opacity 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.cg-pill-arrow:hover:not(.disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.cg-pill-arrow.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.cg-pill-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  background: var(--bg-card);
}

.cg-pill-bar::-webkit-scrollbar {
  display: none;
}

.cg-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: rgba(154, 107, 70, 0.08);
  border: 1px solid rgba(154, 107, 70, 0.18);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: none;
}

.cg-pill:hover {
  background: rgba(154, 107, 70, 0.15);
  color: var(--text-primary);
  border-color: rgba(154, 107, 70, 0.35);
  box-shadow: none;
}

.cg-pill.active {
  background: linear-gradient(
    135deg,
    var(--primary-gradient-start),
    var(--primary-gradient-end)
  );
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

.cg-pill.gain-pill {
  background: rgba(47, 143, 91, 0.12);
  border-color: rgba(47, 143, 91, 0.25);
  color: var(--success);
}
.cg-pill.loss-pill {
  background: rgba(198, 90, 82, 0.1);
  border-color: rgba(198, 90, 82, 0.22);
  color: var(--danger);
}
.cg-pill.warning-pill {
  background: rgba(201, 135, 45, 0.1);
  border-color: rgba(201, 135, 45, 0.22);
  color: var(--warning);
}

/* ── Compact download button ── */
.cg-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.22);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  box-shadow: none;
  height: 30px;
}

.cg-dl-btn:hover {
  background: rgba(154, 107, 70, 0.22);
  box-shadow: var(--shadow-primary);
}

.cg-dl-btn i {
  font-size: 12px;
}

/* ── Modern gains table ── */
.cg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}

.cg-table thead tr {
  background: var(--bg-gradient);
  border-bottom: 1px solid rgba(154, 107, 70, 0.15);
}

.cg-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.cg-table th:hover {
  color: var(--text-primary);
}

.cg-table tbody tr {
  border-bottom: 1px solid var(--bg-gradient);
  transition: background 0.12s;
}

.cg-table tbody tr:last-child {
  border-bottom: none;
}

.cg-table tbody tr:hover {
  background: rgba(154, 107, 70, 0.04);
}

.cg-table td {
  padding: 9px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  vertical-align: middle;
}

.cg-table td.fund-name-cell {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  max-width: 220px;
}

.cg-table td.gain {
  color: var(--success);
  font-weight: 600;
}
.cg-table td.loss {
  color: var(--danger);
  font-weight: 600;
}
.cg-table td.warning {
  color: var(--warning);
  font-weight: 600;
}
.cg-table td.accent {
  color: var(--accent);
  font-weight: 600;
}

/* ── Health Score hero circle ── */
.health-hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 20px;
  background: var(--bg-offwhite);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  gap: 6px;
}

.health-score-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.health-score-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.health-score-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 3px solid;
  position: relative;
}

.health-score-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.health-score-denom {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
}

.health-grade-badge {
  font-size: 15px;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.health-grade-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Health detail card ── */
.health-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-gradient);
  transition: background 0.12s;
}

.health-detail-row:last-child {
  border-bottom: none;
}

.health-detail-row:hover {
  background: rgba(154, 107, 70, 0.03);
}

.health-detail-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
}

.health-detail-info {
  flex: 1;
  min-width: 0;
}

.health-detail-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: capitalize;
  margin-bottom: 2px;
}

.health-detail-msg {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.health-detail-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.health-detail-score {
  font-size: 15px;
  font-weight: 800;
}

.health-progress-bar {
  width: 80px;
  height: 4px;
  background: rgba(154, 107, 70, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.health-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Collapsible holding split rows (Tax Planning) ── */
.tp-holding-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg-gradient);
  transition: background 0.12s;
}

.tp-holding-row:last-child {
  border-bottom: none;
}

.tp-holding-row:hover {
  background: rgba(154, 107, 70, 0.03);
}

.tp-holding-identity {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.tp-holding-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.4;
}

.tp-holding-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tp-holding-meta-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tp-pill-equity {
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.2);
  color: var(--accent);
}

.tp-pill-taxcat {
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.2);
  color: var(--accent);
}

.tp-pill-taxcat--equity {
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.2);
  color: var(--accent);
}

.tp-pill-taxcat--hybrid {
  background: rgba(201, 135, 45, 0.1);
  border: 1px solid rgba(201, 135, 45, 0.25);
  color: var(--warning);
}

.tp-pill-taxcat--debt {
  background: rgba(47, 143, 91, 0.1);
  border: 1px solid rgba(47, 143, 91, 0.25);
  color: var(--success);
}

.tp-pill-days {
  background: rgba(201, 135, 45, 0.1);
  border: 1px solid rgba(201, 135, 45, 0.2);
  color: var(--warning);
}

.tp-pill-units {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.15);
  color: var(--text-tertiary);
}

.tp-holding-meta-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tp-holding-values {
  text-align: right;
  flex-shrink: 0;
}

.tp-holding-cur-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.tp-holding-gain {
  font-size: 12px;
  font-weight: 600;
}
.tp-holding-gain.gain {
  color: var(--success);
}
.tp-holding-gain.loss {
  color: var(--danger);
}

/* ── Collapsible section header (Tax Planning / Overlap) ── */
.cg-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  gap: 12px;
}

.cg-collapsible-header:hover {
  background: rgba(154, 107, 70, 0.1);
}

.cg-collapsible-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cg-collapsible-left i {
  font-size: 15px;
  color: var(--accent);
  width: 16px;
  flex-shrink: 0;
}

.cg-collapsible-left h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cg-collapsible-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cg-collapsible-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.cg-collapsible-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.cg-collapsible-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.cg-collapsible-stat-value.gain {
  color: var(--success);
}
.cg-collapsible-stat-value.loss {
  color: var(--danger);
}

.cg-chevron {
  font-size: 13px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
}

.cg-chevron.open {
  transform: rotate(-180deg);
}

/* ── Overlap fund-pair row ── */
.overlap-pair-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--bg-gradient);
  transition: background 0.12s;
}

.overlap-pair-row:last-child {
  border-bottom: none;
}

.overlap-pair-row:hover {
  background: rgba(154, 107, 70, 0.03);
}

.overlap-fund-names {
  flex: 0 0 50%;
  width: 50%;
  padding: 7px 12px;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
  min-width: 0;
  overflow: hidden;
}

.overlap-fund-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlap-fund-name.secondary {
  color: var(--text-tertiary);
  font-weight: 500;
}

.overlap-pct-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  gap: 3px;
  flex: 0 0 25%;
  width: 25%;
  text-align: center;
  border-right: 1px solid rgba(154, 107, 70, 0.07);
}

.overlap-pct-val {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.overlap-pct-val.gain {
  color: var(--success);
}
.overlap-pct-val.warning {
  color: var(--warning);
}
.overlap-pct-val.loss {
  color: var(--danger);
}
.overlap-pct-val.accent {
  color: var(--accent);
}

.overlap-pct-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.overlap-stocks-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  flex: 0 0 25%;
  width: 25%;
  text-align: center;
}

.overlap-stocks-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.overlap-row-clickable {
  cursor: pointer;
}

.overlap-row-clickable:hover {
  background: rgba(154, 107, 70, 0.08);
}

.overlap-row-clickable:active {
  transform: scale(0.997);
}

.overlap-row-clickable .overlap-stocks-num {
  color: var(--accent);
}

.overlap-stocks-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

/* ── Common holdings row ── */
.common-holding-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--bg-gradient);
  transition: background 0.12s;
}

.common-holding-row:last-child {
  border-bottom: none;
}

.common-holding-row:hover {
  background: rgba(154, 107, 70, 0.03);
}

.common-holding-name {
  flex: 0 0 40%;
  width: 40%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding-right: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.common-holding-count {
  flex: 0 0 10%;
  width: 10%;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.common-holding-weight {
  flex: 0 0 10%;
  width: 10%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

.common-holding-funds {
  flex: 0 0 40%;
  width: 40%;
  font-size: 12px;
  color: var(--text-tertiary);
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Overlap & common-holding mobile overrides ── */
@media (max-width: 767px) {
  .overlap-fund-names {
    padding: 8px 10px;
  }

  .overlap-fund-name {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .overlap-pct-cell,
  .overlap-stocks-cell {
    padding: 8px 6px;
  }

  .overlap-pct-val {
    font-size: 15px;
  }

  .overlap-stocks-num {
    font-size: 14px;
  }

  .common-holding-row {
    padding: 7px 10px;
  }

  .common-holding-name {
    flex: 0 0 38%;
    width: 38%;
    font-size: 12px;
  }

  .common-holding-count {
    flex: 0 0 12%;
    width: 12%;
    font-size: 12px;
  }

  .common-holding-weight {
    flex: 0 0 12%;
    width: 12%;
    font-size: 12px;
  }

  .common-holding-funds {
    flex: 0 0 38%;
    width: 38%;
    font-size: 11px;
    padding-left: 8px;
  }
}

/* ── Overlap detail modal ── */
.overlap-detail-content {
  padding: 20px 16px 32px;
}

.overlap-detail-fund-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.overlap-detail-fund-card {
  flex: 1;
  min-width: 0;
  background: rgba(154, 107, 70, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
}

.overlap-detail-fund-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.overlap-detail-fund-label.fund-b {
  color: var(--primary-gradient-end);
}

.overlap-detail-fund-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.overlap-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 14px;
}

.overlap-detail-summary-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.overlap-detail-summary-pct {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(154, 107, 70, 0.1);
}

.overlap-detail-summary-pct.gain {
  color: var(--success);
  background: var(--success-light);
}

.overlap-detail-summary-pct.warning {
  color: var(--warning-dark);
  background: var(--warning-light);
}

.overlap-detail-summary-pct.loss {
  color: var(--danger);
  background: rgba(198, 90, 82, 0.12);
}

.overlap-detail-table {
  border: 1px solid rgba(154, 107, 70, 0.1);
  border-radius: 14px;
  overflow: hidden;
}

.overlap-detail-table-header,
.overlap-detail-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.overlap-detail-table-header {
  background: var(--bg-gradient);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.overlap-detail-stock-row {
  border-top: 1px solid rgba(154, 107, 70, 0.07);
  font-size: 13px;
}

.overlap-detail-stock-row:hover {
  background: rgba(154, 107, 70, 0.03);
}

.overlap-detail-stock-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlap-detail-table-header .overlap-detail-stock-name {
  font-weight: 700;
}

.overlap-detail-stock-pct {
  flex: 0 0 70px;
  width: 70px;
  text-align: right;
  font-weight: 700;
  color: var(--accent);
}

.overlap-detail-stock-pct.fund-b {
  color: var(--primary-gradient-end);
}

.overlap-detail-stock-row .overlap-detail-stock-pct {
  font-weight: 600;
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .overlap-detail-table-header,
  .overlap-detail-stock-row {
    gap: 0;
  }

  .overlap-detail-table-header .overlap-detail-stock-name,
  .overlap-detail-stock-row .overlap-detail-stock-name {
    flex: 0 0 50%;
    width: 50%;
    padding-right: 14px;
    border-right: 1px solid rgba(154, 107, 70, 0.07);
  }

  .overlap-detail-table-header .overlap-detail-stock-pct,
  .overlap-detail-stock-row .overlap-detail-stock-pct {
    flex: 0 0 25%;
    width: 25%;
    text-align: center;
    border-right: 1px solid rgba(154, 107, 70, 0.07);
  }

  .overlap-detail-table-header .overlap-detail-stock-pct:last-child,
  .overlap-detail-stock-row .overlap-detail-stock-pct:last-child {
    border-right: none;
  }

  .overlap-detail-stock-row .overlap-detail-stock-pct {
    font-size: 16px;
    font-weight: 800;
  }
}

@media (max-width: 767px) {
  .overlap-detail-content {
    padding: 16px 12px 28px;
  }

  .overlap-detail-fund-cards {
    flex-direction: column;
    gap: 8px;
  }

  .overlap-detail-stock-pct {
    flex: 0 0 56px;
    width: 56px;
    font-size: 12px;
  }

  .overlap-detail-stock-name {
    font-size: 12px;
  }
}

/* ── Two-column variant (single fund/value table, e.g. stock overlap modal) ── */
.overlap-detail-table.two-col .overlap-detail-stock-name {
  flex: 1 1 auto;
  width: auto;
  border-right: none;
}

.overlap-detail-table.two-col .overlap-detail-stock-pct {
  flex: 0 0 90px;
  width: 90px;
  text-align: right;
  border-right: none;
}

.overlap-detail-avg-row {
  background: var(--bg-gradient);
  border-top: 1px solid rgba(154, 107, 70, 0.15) !important;
}

.overlap-detail-avg-row .overlap-detail-stock-name,
.overlap-detail-avg-row .overlap-detail-stock-pct {
  font-weight: 800;
  color: var(--text-primary);
}

/* ── Overlap Calculator ── */
.overlap-calc-body {
  padding: 14px;
}

#overlapCalcResult {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  opacity: 1;
  transform: translateY(0);
}

.overlap-calc-result-fade {
  opacity: 0;
  transform: translateY(8px);
}

.overlap-calc-selectors {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.overlap-calc-select-card {
  flex: 1;
  min-width: 0;
  background: rgba(154, 107, 70, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.overlap-calc-select-card:hover {
  background: rgba(154, 107, 70, 0.12);
}

.overlap-calc-select-wrap {
  position: relative;
  margin-top: 4px;
}

/* ── Custom dropdown trigger ── */
.ocd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  min-width: 0;
}

.ocd-trigger-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ocd-chevron {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Trigger avatar (small, inline) */
.ocd-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-light);
  padding: 2px;
}

.ocd-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ocd-avatar--a.ocd-avatar--text {
  background: #4482c9;
}
.ocd-avatar--b.ocd-avatar--text {
  background: #85b4e0;
  color: #1e40af;
}
:root[data-theme="dark"] .ocd-avatar--a.ocd-avatar--text {
  background: #3a6aaa;
}
:root[data-theme="dark"] .ocd-avatar--b.ocd-avatar--text {
  background: #5a8cbf;
  color: #c8dff5;
}

/* ── Bottom sheet overlay ── */
.ocd-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  animation: ocdOverlayIn 0.22s ease forwards;
}

@keyframes ocdOverlayIn {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.45);
  }
}

/* ── Bottom sheet panel ── */
.ocd-sheet {
  width: 100%;
  max-height: 82vh;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.ocd-sheet--open {
  transform: translateY(0);
}

.ocd-drag-pill {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-medium);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.ocd-sheet-header {
  padding: 14px 18px 10px;
  flex-shrink: 0;
}

.ocd-sheet-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ocd-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ocd-slot-badge--a {
  background: #4482c9;
}
.ocd-slot-badge--b {
  background: #85b4e0;
  color: #1e40af;
}
:root[data-theme="dark"] .ocd-slot-badge--a {
  background: #3a6aaa;
}
:root[data-theme="dark"] .ocd-slot-badge--b {
  background: #5a8cbf;
  color: #c8dff5;
}

/* ── Search bar ── */
.ocd-search-wrap {
  position: relative;
  margin: 0 14px 10px;
  flex-shrink: 0;
}

.ocd-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.ocd-search-input {
  width: 100%;
  background: var(--bg-light);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 14px 10px 36px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.ocd-search-input:focus {
  border-color: rgba(154, 107, 70, 0.5);
}

.ocd-search-input::placeholder {
  color: var(--text-tertiary);
}

/* ── Fund list ── */
.ocd-list {
  overflow-y: auto;
  flex: 1;
  padding: 0 0 16px;
}

.ocd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border-light);
}

.ocd-item:last-child {
  border-bottom: none;
}

.ocd-item:active,
.ocd-item:hover {
  background: var(--bg-gradient);
}

.ocd-item--disabled {
  cursor: default;
  opacity: 0.55;
}

.ocd-item--disabled:active,
.ocd-item--disabled:hover {
  background: transparent;
}

.ocd-item--selected {
  background: var(--bg-gradient);
}

/* Item avatar (larger, in list) */
.ocd-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 15%;
  object-fit: contain;
  flex-shrink: 0;
}

.ocd-item-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--primary-gradient-start),
    var(--primary-gradient-end)
  );
}

.ocd-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ocd-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.ocd-item-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

/* Radio button */
.ocd-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.ocd-radio--checked {
  background: linear-gradient(
    135deg,
    var(--primary-gradient-start),
    var(--primary-gradient-end)
  );
  border-color: transparent;
  color: #fff;
  font-size: 11px;
}

.ocd-radio--disabled {
  opacity: 0.4;
  background: var(--bg-light);
}

/* ── Dark mode ── */
:root[data-theme="dark"] .ocd-sheet {
  background: var(--bg-card);
}

:root[data-theme="dark"] .ocd-search-input {
  background: var(--bg-light);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

:root[data-theme="dark"] .ocd-search-input:focus {
  border-color: rgba(154, 107, 70, 0.5);
}

:root[data-theme="dark"] .ocd-item {
  border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .ocd-item:hover {
  background: rgba(154, 107, 70, 0.1);
}

:root[data-theme="dark"] .ocd-item--selected {
  background: rgba(154, 107, 70, 0.1);
}

:root[data-theme="dark"] .ocd-item-avatar {
  background: var(--bg-card);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .ocd-avatar {
  background: var(--bg-card);
}

.overlap-calc-venn {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.overlap-venn-svg {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.overlap-venn-svg {
  overflow: visible;
}

@keyframes venn-circle-a-settle {
  0% {
    transform: translateX(-70px);
    animation-timing-function: ease-in-out;
  }
  20% {
    transform: translateX(42px);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: translateX(-25px);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translateX(15px);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translateX(-5px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes venn-circle-b-settle {
  0% {
    transform: translateX(70px);
    animation-timing-function: ease-in-out;
  }
  20% {
    transform: translateX(-42px);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: translateX(25px);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translateX(-15px);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translateX(5px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateX(0);
  }
}

.overlap-venn-circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateX(0);
}

.overlap-venn-circle.circle-a.overlap-venn-start {
  transform: translateX(-70px);
}

.overlap-venn-circle.circle-b.overlap-venn-start {
  transform: translateX(70px);
}

.overlap-venn-circle.circle-a:not(.overlap-venn-start) {
  animation: venn-circle-a-settle 2s linear forwards;
}

.overlap-venn-circle.circle-b:not(.overlap-venn-start) {
  animation: venn-circle-b-settle 2s linear forwards;
}

.overlap-calc-details {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.overlap-calc-details.visible {
  opacity: 1;
  transform: translateY(0);
}

.overlap-calc-pct {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.overlap-calc-pct span {
  font-size: 18px;
  font-weight: 700;
}

.overlap-calc-pct.gain {
  color: var(--success);
}

.overlap-calc-pct.warning {
  color: var(--warning);
}

.overlap-calc-pct.loss {
  color: var(--danger);
}

.overlap-calc-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.overlap-calc-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(154, 107, 70, 0.08);
  color: var(--text-secondary);
}

.overlap-calc-badge.gain {
  background: var(--success-light);
  color: var(--success-dark);
}

.overlap-calc-badge.warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.overlap-calc-badge.loss {
  background: rgba(198, 90, 82, 0.12);
  color: var(--danger);
}

.overlap-calc-description {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 auto 12px;
}

.overlap-calc-table {
  margin-bottom: 16px;
}

.overlap-calc-viewall-btn {
  display: block;
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: rgba(154, 107, 70, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.overlap-calc-viewall-btn:hover {
  background: rgba(154, 107, 70, 0.14);
}

.no-top-radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 767px) {
  .overlap-calc-body {
    padding: 14px 10px;
  }

  .overlap-calc-selectors {
    flex-direction: column;
    gap: 8px;
  }

  .overlap-calc-pct {
    font-size: 26px;
  }

  .overlap-calc-pct span {
    font-size: 18px;
  }

  .overlap-venn-svg {
    width: 180px;
  }
}

.cg-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(201, 135, 45, 0.05);
  border-top: 1px solid rgba(201, 135, 45, 0.12);
}

.cg-note i {
  color: var(--warning);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cg-note-body {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.cg-note-body strong {
  color: var(--text-primary);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cg-note-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cg-note-body li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.cg-note-body li::before {
  content: "›";
  color: var(--warning);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Section title (inline inside tab) ── */
.cg-sub-title {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  border-bottom: 1px solid rgba(154, 107, 70, 0.07);
  background: var(--bg-card);
}

/* Override old capital-gains-section inside new tabs */
#capitalGainsContent .capital-gains-section,
#taxPlanningContent .capital-gains-section,
#overlapContent .capital-gains-section,
#healthScoreContent .capital-gains-section {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.13);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
}

/* Override old section-header inside these tabs */
#capitalGainsContent .section-header,
#taxPlanningContent .section-header,
#overlapContent .section-header,
#healthScoreContent .section-header {
  padding: 12px 16px 10px;
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  margin: 0;
}

#capitalGainsContent .section-header h3,
#taxPlanningContent .section-header h3,
#overlapContent .section-header h3,
#healthScoreContent .section-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

#capitalGainsContent .section-header .section-subtitle,
#taxPlanningContent .section-header .section-subtitle,
#overlapContent .section-header .section-subtitle,
#healthScoreContent .section-header .section-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0;
}

/* Override year-btn inside capital gains */
#capitalGainsContent .year-btn,
#capitalGainsContent .gains-year-selector {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
  background: var(--bg-card);
}

#capitalGainsContent .year-btn button,
.year-btn {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(154, 107, 70, 0.08);
  border: 1px solid rgba(154, 107, 70, 0.18);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: none;
}

#capitalGainsContent .year-btn button:hover,
.year-btn:hover {
  background: rgba(154, 107, 70, 0.15);
  box-shadow: none;
}

#capitalGainsContent .year-btn button.active,
.year-btn.active {
  background: linear-gradient(
    135deg,
    var(--primary-gradient-start),
    var(--primary-gradient-end)
  );
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

/* Override gains-summary-grid inside tabs */
#capitalGainsContent .gains-summary-grid,
#taxPlanningContent .gains-summary-grid,
#overlapContent .gains-summary-grid,
#expenseContent .gains-summary-grid {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(154, 107, 70, 0.09);
  gap: 0;
}

#capitalGainsContent .gains-summary-card,
#taxPlanningContent .gains-summary-card,
#overlapContent .gains-summary-card,
#expenseContent .gains-summary-card {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px 12px;
  gap: 4px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  border-right: 1px solid rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid var(--bg-gradient);
  position: relative;
}

#capitalGainsContent .gains-summary-card:last-child,
#taxPlanningContent .gains-summary-card:last-child,
#overlapContent .gains-summary-card:last-child,
#expenseContent .gains-summary-card:last-child {
  border-right: none;
}

#capitalGainsContent .gains-summary-card::after,
#taxPlanningContent .gains-summary-card::after,
#overlapContent .gains-summary-card::after,
#expenseContent .gains-summary-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(154, 107, 70, 0.15);
}

#capitalGainsContent .gains-summary-card h4,
#taxPlanningContent .gains-summary-card h4,
#overlapContent .gains-summary-card h4,
#expenseContent .gains-summary-card h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
  text-align: center;
}

#capitalGainsContent .gains-summary-card .summary-row,
#taxPlanningContent .gains-summary-card .summary-row,
#overlapContent .gains-summary-card .summary-row,
#expenseContent .gains-summary-card .summary-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

#capitalGainsContent .gains-summary-card .summary-row span:first-child,
#taxPlanningContent .gains-summary-card .summary-row span:first-child,
#overlapContent .gains-summary-card .summary-row span:first-child,
#expenseContent .gains-summary-card .summary-row span:first-child {
  display: none; /* label already in h4 */
}

#capitalGainsContent .gains-summary-card .summary-row span:last-child,
#taxPlanningContent .gains-summary-card .summary-row span:last-child,
#overlapContent .gains-summary-card .summary-row span:last-child,
#expenseContent .gains-summary-card .summary-row span:last-child {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
#expenseContent .gains-summary-card .summary-row span.gain {
  color: var(--success);
}
#expenseContent .gains-summary-card .summary-row span.warning {
  color: var(--warning);
}
#expenseContent .gains-summary-card .summary-row span.loss {
  color: var(--loss-color, #c65a52);
}

/* gains-table inside these tabs */
#capitalGainsContent .gains-table,
#overlapContent .gains-table,
#expenseContent .gains-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

#capitalGainsContent .gains-table thead tr,
#overlapContent .gains-table thead tr,
#expenseContent .gains-table thead tr {
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.13);
}

#capitalGainsContent .gains-table th,
#overlapContent .gains-table th,
#expenseContent .gains-table th {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  white-space: nowrap;
}

#capitalGainsContent .gains-table td,
#overlapContent .gains-table td,
#expenseContent .gains-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bg-gradient);
  font-size: 12px;
  color: var(--text-secondary);
  vertical-align: middle;
}

#capitalGainsContent .gains-table tbody tr:hover,
#overlapContent .gains-table tbody tr:hover,
#expenseContent .gains-table tbody tr:hover {
  background: rgba(154, 107, 70, 0.04);
}

#capitalGainsContent .gains-table tbody tr:last-child td,
#overlapContent .gains-table tbody tr:last-child td,
#expenseContent .gains-table tbody tr:last-child td {
  border-bottom: none;
}

/* gains-table-wrapper inside tabs */
#capitalGainsContent .gains-table-wrapper,
#overlapContent .gains-table-wrapper,
#expenseContent .gains-table-wrapper {
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 10px;
}

#capitalGainsContent .gains-table-wrapper h4,
#overlapContent .gains-table-wrapper h4,
#expenseContent .gains-table-wrapper h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  padding: 8px 12px 6px;
  margin: 0;
  background: rgba(154, 107, 70, 0.04);
  border-bottom: 1px solid rgba(154, 107, 70, 0.07);
}

/* Expense Impact — TER disclaimer */
.ei-ter-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px;
  background: rgba(201, 135, 45, 0.07);
  border: 1px solid rgba(201, 135, 45, 0.22);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ei-ter-disclaimer i {
  color: var(--warning);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* card subtext (below the value) */
.ei-card-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* numeric columns — right-aligned */
#expenseContent .gains-table th.ei-col-num,
#expenseContent .gains-table td.ei-col-num {
  text-align: right;
}

/* hide Current Value column on mobile */
@media (max-width: 767px) {
  #expenseContent .gains-table .ei-col-value {
    display: none;
  }
}

/* Tax planning summary cards */
#taxPlanningContent .tax-summary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
  border-bottom: none;
}
.tp-sum-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 20px;
}
.tp-sum-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tp-sum-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-sum-icon--lt {
  background: rgba(47, 143, 91, 0.1);
  color: var(--success);
}
.tp-sum-icon--st {
  background: rgba(154, 107, 70, 0.1);
  color: var(--primary-gradient-start);
}
.tp-sum-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tp-sum-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.tp-sum-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.tp-sum-bar {
  height: 3px;
  background: var(--border-medium);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
}
.tp-sum-bar-fill {
  height: 100%;
  border-radius: 2px;
  max-width: 100%;
}
.tp-sum-bar-fill--lt {
  background: var(--success);
}
.tp-sum-bar-fill--st {
  background: var(--primary-gradient-start);
}
.tp-sum-divider {
  border: none;
  border-top: 1px solid var(--border-medium);
  margin: 0 0 14px;
}
.tp-sum-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tp-sum-stat + .tp-sum-stat {
  border-left: 1px solid var(--border-medium);
  padding-left: 14px;
}
.tp-sum-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.tp-sum-stat-val-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-sum-stat-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.tp-stat-gain {
  color: var(--success);
}
.tp-stat-loss {
  color: var(--danger, #c65a52);
}
.tp-sum-stat-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.tp-sum-info-btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-gradient-start);
  color: var(--primary-gradient-start);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.tp-sum-info-btn:hover,
.tp-sum-info-btn.active {
  background: var(--primary-gradient-start);
  color: #fff;
}
.tp-sum-breakdown {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    margin-top 0.18s ease;
}
.tp-sum-breakdown.open {
  max-height: 80px;
  opacity: 1;
  margin-top: 10px;
}
.tp-sum-breakdown-inner {
  padding-top: 10px;
  border-top: 1px solid var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tp-sum-brow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-tertiary);
}
.tp-sum-brow-val {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 500;
}
.tp-sum-brow-tax {
  font-size: 10px;
  color: var(--primary-gradient-start);
  margin-left: 4px;
}

/* Holdings split redesign for Tax Planning */
#taxPlanningContent .holdings-split-section {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(154, 107, 70, 0.15);
  overflow: hidden;
}

#taxPlanningContent .holdings-split-section:last-child {
  margin-bottom: 0;
}

#taxPlanningContent .holdings-split-header {
  display: grid;
  grid-template-columns: 22px 3fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(154, 107, 70, 0.08);
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  transition: background 0.15s;
}

#taxPlanningContent .holdings-split-title {
  grid-column: 1 / 5;
  flex: unset;
  justify-content: flex-start;
}

#taxPlanningContent .holdings-split-summary {
  display: contents;
  flex: unset;
}

#taxPlanningContent .holdings-split-stat:last-child {
  text-align: right;
}

#taxPlanningContent .holdings-split-header:hover {
  background: rgba(154, 107, 70, 0.13);
}

#taxPlanningContent .holdings-split-title i {
  font-size: 13px;
  color: var(--primary, #9a6b46);
  opacity: 0.8;
}

#taxPlanningContent .holdings-split-title h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

#taxPlanningContent .holdings-split-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#taxPlanningContent .holdings-split-content.collapsed {
  max-height: 0;
}

#taxPlanningContent .tax-holding-item {
  display: grid;
  grid-template-columns: 22px 3fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 10px 14px 10px 11px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

#taxPlanningContent .tax-holding-item:last-child {
  border-bottom: none;
}

#taxPlanningContent .tax-holding-item:hover {
  background: rgba(154, 107, 70, 0.045);
  border-left-color: rgba(154, 107, 70, 0.5);
}

#taxPlanningContent .tax-holding-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.4;
}

#taxPlanningContent .tax-holding-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tax holding item - expandable wrapper */
#taxPlanningContent .tax-holding-wrap {
  border-bottom: 1px solid rgba(154, 107, 70, 0.07);
  transition: background 0.15s;
}
#taxPlanningContent .tax-holding-wrap:last-child {
  border-bottom: none;
}

.tp-fund-icon {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
}
.tp-fund-values {
  text-align: right;
}
.tp-fund-gain {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-fund-gain.gain {
  color: var(--success);
}
.tp-fund-gain.loss {
  color: var(--danger);
}
.tp-fund-meta {
  display: contents;
}
.tp-fund-meta-cat {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: capitalize;
}
.tp-fund-meta-units {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-fund-meta-cost {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-fund-meta-days {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  grid-column: 6;
  grid-row: 1;
}
.tp-lot-cost-col {
  text-align: right;
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Folio batch detail panel */
#taxPlanningContent .tax-holding-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
  background: rgba(154, 107, 70, 0.025);
  border-top: 1px dashed rgba(154, 107, 70, 0.1);
}
#taxPlanningContent .tax-holding-detail.open {
  max-height: 2000px;
}

/* ── Compact lot rows (Transactions-style) ── */
.tp-folio-grp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px 3px;
  background: var(--bg-gradient);
}
.tp-folio-grp-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tp-folio-count {
  font-size: 10px;
  color: var(--text-tertiary);
}
.tp-lot-col-hdrs,
.tp-lot-row {
  display: grid;
  grid-template-columns: 22px 3fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
}
.tp-lot-icon i.tp-icon-buy {
  display: inline-block;
  transform: rotate(135deg);
}
.tp-lot-col-hdrs {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}
.tp-section-col-hdrs {
  background: rgba(154, 107, 70, 0.03);
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  padding-top: 6px;
}
.tp-lot-col-hdrs span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.tp-lot-col-r {
  text-align: right;
}
.tp-lot-row {
  border-top: 1px solid rgba(154, 107, 70, 0.05);
}
.tp-lot-row:hover {
  background: rgba(154, 107, 70, 0.04);
}
.tp-lot-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(47, 143, 91, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--success);
}
.tp-lot-date-col {
  min-width: 0;
}
.tp-lot-date-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-lot-date {
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tp-held-pill {
  display: none;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
}
.tp-lot-sub {
  display: none;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.tp-lot-units-col {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-lot-val-col {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-lot-held-col {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tax note upgrade */
#taxPlanningContent .tax-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(201, 135, 45, 0.04);
  border-top: 1px solid rgba(201, 135, 45, 0.1);
}

#taxPlanningContent .tax-note i {
  color: var(--warning);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

#taxPlanningContent .tax-note ul {
  padding-left: 0;
  list-style: none;
  margin: 4px 0 0;
}

#taxPlanningContent .tax-note li {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

#taxPlanningContent .tax-note li::before {
  content: "›";
  color: var(--warning);
  font-weight: 700;
}

/* ── Health score inline style override (for old inline styles) ── */
#healthScoreContent [style*="text-align: center"] {
  padding: 24px 16px 16px !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* Transactions page — scoped table density */
#transactions .tx-table-wrap .transaction-table thead {
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
}

/* thead must actually stay pinned — the scroll-snap padding below assumes it does,
   otherwise the row underneath bleeds into the reserved gap and looks cut in half */
#transactions .tx-table-wrap .transaction-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-card);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 10px;
}

#transactions .tx-table-wrap .transaction-table td {
  padding: 10px;
  font-size: 12px;
}

#transactions .tx-table-wrap .transaction-table .tx-type {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
}

/* ── Overlap: table is already gains-table, just fix spacing ── */
#overlapContent .capital-gains-section {
  margin-top: 0;
}

#overlapContent .gains-table-wrapper:not(:first-child) {
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

/* ── Shared empty-state component ── icon + title + subtitle + optional
   action, used for "no search matches" and "no data at all" states across
   the app (transactions search, current/past holdings search, etc.) */
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px 20px;
}

.app-empty.compact {
  padding: 22px 16px;
}

.app-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  font-size: 18px;
}

.app-empty.compact .app-empty-icon {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.app-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-empty-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
  max-width: 260px;
}

.app-empty-action {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(154, 107, 70, 0.3);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.app-empty-action:hover {
  background: rgba(154, 107, 70, 0.08);
}

/* ── No-data state ── */
.cg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

.cg-empty i {
  font-size: 28px;
  opacity: 0.35;
}

/* ── Dark mode overrides for new classes ── */
:root[data-theme="dark"] .cg-section {
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .cg-section-head,
:root[data-theme="dark"] .cg-collapsible-header {
  background: rgba(196, 144, 106, 0.12);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .cg-hero-cell {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .cg-table thead tr {
  background: rgba(196, 144, 106, 0.14);
}

:root[data-theme="dark"] .cg-table th {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .cg-table td,
:root[data-theme="dark"] .cg-table tbody tr {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .cg-note {
  background: rgba(228, 160, 64, 0.09);
  border-color: rgba(228, 160, 64, 0.22);
}

:root[data-theme="dark"] .health-progress-bar {
  background: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] #capitalGainsContent .gains-summary-card,
:root[data-theme="dark"] #taxPlanningContent .gains-summary-card,
:root[data-theme="dark"] #overlapContent .gains-summary-card,
:root[data-theme="dark"] #expenseContent .gains-summary-card {
  border-color: var(--border-light);
}

:root[data-theme="dark"] #capitalGainsContent .gains-table th,
:root[data-theme="dark"] #overlapContent .gains-table th,
:root[data-theme="dark"] #expenseContent .gains-table th {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #capitalGainsContent .gains-table td,
:root[data-theme="dark"] #overlapContent .gains-table td,
:root[data-theme="dark"] #expenseContent .gains-table td {
  border-color: var(--border-light);
}

:root[data-theme="dark"] #taxPlanningContent .tax-summary-card {
  border-color: var(--border-light);
}

:root[data-theme="dark"] #taxPlanningContent .tax-holding-item {
  border-color: var(--border-light);
}

:root[data-theme="dark"] #taxPlanningContent .holdings-split-header {
  background: rgba(196, 144, 106, 0.11);
}

:root[data-theme="dark"] #taxPlanningContent .holdings-split-header:hover {
  background: rgba(196, 144, 106, 0.18);
}

:root[data-theme="dark"] .overlap-pair-row,
:root[data-theme="dark"] .common-holding-row {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .overlap-detail-fund-card {
  background: rgba(196, 144, 106, 0.15);
}

:root[data-theme="dark"] .overlap-detail-table {
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .overlap-detail-table-header {
  background: rgba(196, 144, 106, 0.13);
}

:root[data-theme="dark"] .overlap-detail-stock-row {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .overlap-calc-select-card {
  background: rgba(196, 144, 106, 0.14);
}

:root[data-theme="dark"] .overlap-calc-select-card:hover {
  background: rgba(196, 144, 106, 0.22);
}

:root[data-theme="dark"] .ocd-drag-pill {
  background: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .overlap-calc-badge {
  background: rgba(196, 144, 106, 0.15);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .overlap-calc-viewall-btn {
  background: rgba(196, 144, 106, 0.14);
}

:root[data-theme="dark"] .overlap-calc-viewall-btn:hover {
  background: rgba(196, 144, 106, 0.22);
}

:root[data-theme="dark"] .tp-holding-row {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .cg-pill {
  background: rgba(196, 144, 106, 0.15);
  border-color: rgba(196, 144, 106, 0.3);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .cg-pill.active {
  background: linear-gradient(135deg, #c4906a, #9a6b46);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(196, 144, 106, 0.35);
}

:root[data-theme="dark"] .cg-pill:hover {
  border-color: rgba(196, 144, 106, 0.55);
}

:root[data-theme="dark"] .cg-dl-btn {
  background: rgba(196, 144, 106, 0.15);
  border-color: rgba(196, 144, 106, 0.32);
  color: var(--primary-gradient-start);
}

:root[data-theme="dark"] #transactions .tx-section {
  border-color: var(--border-medium);
}

:root[data-theme="dark"] #transactions .tx-section-header {
  background: rgba(196, 144, 106, 0.1);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] #transactions .tx-table-wrap .transaction-table thead {
  background: rgba(154, 107, 70, 0.12);
}

:root[data-theme="dark"] .tx-search {
  background: var(--bg-card);
  border-color: rgba(154, 107, 70, 0.25);
}

/* Mobile list — hidden on tablet/desktop; the desktop table is what shows there */
.tx-mobile-list {
  display: none;
}

/* ── Transactions page: mobile — separate compact list markup instead of
   reflowing the table. Two earlier attempts to force the <table> into a
   card layout via CSS grid tricks broke on table-layout/specificity
   quirks, so this renders as its own dedicated DOM (see createTransactionTable
   in scripts.js) shown only at this breakpoint. ── */
@media (max-width: 767px) {
  #transactions .tx-section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #transactions .tx-view-seg {
    justify-content: center;
  }

  #transactions .tx-section-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  #transactions .tx-search {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 36px;
  }

  /* Icon-only on mobile — just enough width for the icon, search takes the rest */
  #transactions .tx-dl-btn {
    flex-shrink: 0;
    width: auto;
    padding: 0 10px;
    justify-content: center;
    height: 36px;
    font-size: 13px;
    border-radius: 10px;
  }

  #transactions .tx-dl-btn-label {
    display: none;
  }

  /* Let the page scroll naturally on mobile instead of a cramped nested
     scrollbox — the mobile list should never scroll independently under
     the section header. */
  #transactions .tx-table-wrap {
    max-height: none;
    overflow: visible;
  }

  #transactions .tx-responsive-wrap .transaction-table {
    display: none;
  }

  #transactions .tx-mobile-list {
    display: block;
  }

  #transactions .txm-month:last-child {
    margin-bottom: 0;
  }

  #transactions .txm-month-hdr {
    padding: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
  }

  #transactions .txm-chevron {
    display: inline-block;
    width: 14px;
    font-size: 9px;
    color: var(--text-tertiary);
  }

  #transactions .txm-month-sum {
    font-weight: 500;
    text-transform: none;
    margin-left: 2px;
  }

  #transactions .txm-month-net {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  #transactions .txm-month-net.gain {
    color: var(--success);
  }

  #transactions .txm-month-net.loss {
    color: var(--danger);
  }

  #transactions .txm-rows {
    background: var(--bg-card);
    border: 0.5px solid var(--border-light);
    border-radius: 0px 0px 12px 12px;
    overflow: hidden;
  }

  #transactions .txm-month.collapsed .txm-rows {
    display: none;
  }

  #transactions .txm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--border-light);
  }

  #transactions .txm-row:last-child {
    border-bottom: none;
  }

  #transactions .txm-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: rgba(47, 143, 91, 0.12);
    color: var(--success);
  }

  #transactions .txm-icon.sell {
    background: rgba(198, 90, 82, 0.12);
    color: var(--danger);
  }

  /* fa-arrow-right rotated to point down-left (buy/invested) or up-right
     (sell/withdrawn) — the diagonal fa-arrow-down-left/up-right icons are
     Font Awesome Pro-only and silently fail to render on the free tier. */
  #transactions .txm-icon.buy i {
    transform: rotate(135deg);
  }

  #transactions .txm-icon.sell i {
    transform: rotate(-45deg);
  }

  #transactions .txm-text {
    flex: 1;
    min-width: 0;
  }

  #transactions .txm-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #transactions .txm-sub {
    font-size: 10.5px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #transactions .txm-amt {
    flex-shrink: 0;
    text-align: right;
  }

  #transactions .txm-amt-val {
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: block;
  }

  #transactions .txm-amt-val.gain {
    color: var(--success);
  }

  #transactions .txm-amt-val.loss {
    color: var(--danger);
  }

  #transactions .txm-amt-units {
    font-size: 10px;
    color: var(--text-tertiary);
    display: block;
    font-variant-numeric: tabular-nums;
  }
}

/* ============================================================
   V3 FIXES — Capital Gains, All-Time Summary, Mobile Tables
   ============================================================ */

/* ── 1. expenseContent card treatment (mirrors other tab overrides) ── */
#expenseContent .capital-gains-section {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.13);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

#expenseContent .section-header {
  padding: 12px 16px 10px;
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  margin: 0;
}

#expenseContent .section-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

#expenseContent .section-header .section-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0;
}

/* ── 2. All-Time Summary — targeted via .alltime-summary-grid class (set in JS) ──
   The broad #capitalGainsContent .gains-summary-grid override hides labels and
   center-aligns values (hero-cell style). We restore the all-time grid to a
   proper labelled card layout by targeting its unique class.
──────────────────────────────────────────────────────────── */

.alltime-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  flex-wrap: unset !important;
}

.alltime-summary-grid .gains-summary-card {
  flex: unset !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0px !important;
  gap: 0 !important;
  text-align: left !important;
  background: var(--bg-offwhite) !important;
  border: 1px solid rgba(154, 107, 70, 0.13) !important;
  border-radius: 12px !important;
  position: relative;
  margin-bottom: 15px;
}

.alltime-summary-grid .gains-summary-card:first-child {
  margin-left: 15px;
}

.alltime-summary-grid .gains-summary-card:last-child {
  margin-right: 15px;
}

.alltime-summary-grid .gains-summary-card::after {
  display: none !important;
}

/* Card title: Equity / Debt / Hybrid */
.alltime-summary-grid .gains-summary-card h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: capitalize !important;
  color: var(--text-primary) !important;
  margin: 0 0 10px !important;
  text-align: left !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(154, 107, 70, 0.1) !important;
}

/* Labelled rows: restore row layout */
.alltime-summary-grid .gains-summary-card .summary-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
}

/* Restore the label span (hidden by the broad override) */
.alltime-summary-grid .gains-summary-card .summary-row span:first-child {
  display: inline !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Value span */
.alltime-summary-grid .gains-summary-card .summary-row span:last-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.2px !important;
}

/* Total Gains separator row */
.alltime-summary-grid .gains-summary-card .summary-row.total {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(154, 107, 70, 0.12) !important;
}

.alltime-summary-grid .gains-summary-card .summary-row.total span:first-child {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* Dark mode */
:root[data-theme="dark"] .alltime-summary-grid .gains-summary-card {
  background: rgba(37, 34, 25, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mobile: stack cards */
@media (max-width: 1199px) {
  .alltime-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. Capital gains section spacing ── */
#capitalGainsContent .capital-gains-section {
  margin-bottom: 16px;
}

/* ── 4. Mobile: gains table horizontal scroll + first-column width ── */
@media (max-width: 1199px) {
  #capitalGainsContent .gains-table-wrapper,
  #overlapContent .gains-table-wrapper,
  #expenseContent .gains-table-wrapper,
  #taxPlanningContent .gains-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #capitalGainsContent .gains-table-wrapper {
    display: none;
  }

  #capitalGainsContent .gains-table td:first-child,
  #capitalGainsContent .gains-table th:first-child,
  #overlapContent .gains-table td:first-child,
  #overlapContent .gains-table th:first-child,
  #expenseContent .gains-table td:first-child,
  #expenseContent .gains-table th:first-child {
    max-width: 140px;
    min-width: 110px;
    white-space: normal;
    word-break: break-word;
  }

  #capitalGainsContent .gains-table td:not(:first-child),
  #capitalGainsContent .gains-table th:not(:first-child),
  #overlapContent .gains-table td:not(:first-child),
  #overlapContent .gains-table th:not(:first-child),
  #expenseContent .gains-table td:not(:first-child),
  #expenseContent .gains-table th:not(:first-child) {
    white-space: nowrap;
  }

  .alltime-summary-grid .gains-summary-card {
    margin: 0px 15px;
  }

  .alltime-summary-grid .gains-summary-card:last-child {
    margin-bottom: 15px;
  }
}

/* ── 5. Expense Impact table: force min-width so it scrolls rather than squishes ── */
@media (max-width: 1199px) {
  #expenseContent .gains-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #expenseContent .gains-table {
    min-width: 520px;
  }

  #expenseContent .gains-table td:first-child,
  #expenseContent .gains-table th:first-child {
    max-width: 130px;
    min-width: 100px;
    white-space: normal;
    word-break: break-word;
  }
}

/* ============================================================
   V4 FIXES — Color coding & Mobile expense table columns
   ============================================================ */

/* ── 1. Restore .gain / .loss / .warning color on gains-table td ──
   The tab-scoped override sets color: var(--text-secondary) on ALL td,
   which kills the per-cell color classes. Fix by adding higher-specificity
   rules that restore the correct colors for colored cells.
──────────────────────────────────────────────────────────── */
#capitalGainsContent .gains-table td.gain,
#overlapContent .gains-table td.gain,
#expenseContent .gains-table td.gain {
  color: var(--success);
  font-weight: 600;
}

#capitalGainsContent .gains-table td.loss,
#overlapContent .gains-table td.loss,
#expenseContent .gains-table td.loss {
  color: var(--danger);
  font-weight: 600;
}

#capitalGainsContent .gains-table td.warning,
#overlapContent .gains-table td.warning,
#expenseContent .gains-table td.warning {
  color: var(--warning);
  font-weight: 600;
}

/* ── 2. Expense Impact mobile table: hide Current Value, Annual Cost columns ──
   On mobile only show: Fund Name | Expense Ratio | Lifetime Cost
   Columns by index: 1=Fund Name, 2=Current Value, 3=Expense Ratio,
                     4=Annual Cost, 5=Lifetime Cost
──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* Hide Current Value (col 2) and Annual Cost (col 4) */
  #expenseContent .gains-table th:nth-child(2),
  #expenseContent .gains-table td:nth-child(2),
  #expenseContent .gains-table th:nth-child(5),
  #expenseContent .gains-table td:nth-child(5) {
    display: none;
  }

  /* No min-width needed now that we only have 3 columns */
  #expenseContent .gains-table {
    min-width: unset;
  }

  /* Give fund name column more room since fewer columns */
  #expenseContent .gains-table td:first-child,
  #expenseContent .gains-table th:first-child {
    max-width: unset;
    min-width: unset;
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 767px) {
  .cas-panel--instructions {
    background: var(--accent);
  }

  :root[data-theme="dark"] .cas-panel--instructions {
    background: var(--bg-card-hover);
    border-left: 3px solid var(--accent);
  }

  /* Keep the Overlap Analysis cards looking like the desktop version */
  #overlapContent.cg-section,
  #overlapContent .cg-section {
    margin-bottom: 16px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(154, 107, 70, 0.13);
  }
}

/* ============================================
   CG YEAR GAINS DISPLAY — folio-card design language
   ============================================ */

.cg-year-display {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cg-year-hero {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 0px 15px;
}

.cg-year-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 15px;
  margin-top: 0px;
}

.cg-year-cat-card {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.cg-year-cat-card:hover {
  box-shadow: var(--shadow-md);
}

.cg-year-transactions {
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 15px;
}

.cg-year-tx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(154, 107, 70, 0.05);
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
  flex-wrap: wrap;
  gap: 10px;
}

.cg-year-tx-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

/* ============================================
   ALL-TIME SUMMARY HERO — folio-card design language
   ============================================ */

.cg-alltime-hero {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 15px;
}

.alltime-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 0;
}

/* Override gains-summary-card defaults when it's also a folio-card */
.alltime-summary-grid .gains-summary-card.folio-card {
  background: var(--bg-card);
  border: 1px solid rgba(154, 107, 70, 0.15);
  border-radius: 14px;
  padding: 0;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.alltime-summary-grid .gains-summary-card.folio-card:hover {
  box-shadow: var(--shadow-md);
}

/* ── Monthly stat cards (6-month / 12-month summary) ── */
.monthly-stat-card {
  padding: 16px 18px;
}

.monthly-stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.monthly-stat-header i {
  color: var(--accent);
  font-size: 13px;
}

.monthly-stat-rows {
  display: flex;
  flex-direction: column;
}

.monthly-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-light);
}

.monthly-stat-row:last-child {
  border-bottom: none;
}

.monthly-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.monthly-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.monthly-stat-value.gain {
  color: var(--success);
}
.monthly-stat-value.loss {
  color: var(--danger);
}

.monthly-stat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.monthly-stat-footer-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.monthly-stat-footer-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── No-data pill style ── */
.cg-pill--no-data {
  opacity: 0.65;
}
.cg-pill--no-data.active {
  opacity: 1;
}

/* ── DATA NOT AVAILABLE banner ── */
.cg-no-data-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
}
.cg-no-data-banner i {
  font-size: 36px;
  color: rgba(154, 107, 70, 0.4);
  margin-bottom: 4px;
}
.cg-no-data-banner span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cg-no-data-banner p {
  font-size: 12px;
  margin: 0;
  color: var(--text-tertiary);
}

@media (max-width: 767px) {
  .cg-year-hero .folio-card-hero,
  .cg-alltime-hero .folio-card-hero {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tax Holdings: Tablet (≤1024px) ─────────────────────────────────── */
@media (min-width: 768px) {
  #taxPlanningContent .holdings-split-header {
    align-items: center;
  }

  #taxPlanningContent .holdings-split-title {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ── Tax Holdings: Mobile (≤500px) ──────────────────────────────────── */
@media (max-width: 767px) {
  #taxPlanningContent .holdings-split-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #taxPlanningContent .holdings-split-title {
    grid-column: unset;
  }
  #taxPlanningContent .holdings-split-summary {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  #taxPlanningContent .holdings-split-stat:first-child {
    text-align: left;
  }

  /* Mobile lot rows — cost column hidden */
  .tp-lot-col-hdrs,
  .tp-lot-row {
    grid-template-columns: 24px 2fr 2fr 2.5fr 2.5fr;
  }
  .tp-lot-cost-col,
  .tp-lot-cost-hdr,
  .tp-fund-meta-cost {
    display: none;
  }
  .tp-fund-meta-cat {
    display: inline;
  }
  #taxPlanningContent .tax-holding-item .tp-holding-meta-pill {
    display: none;
  }
  /* Mobile fund header: Option C — name+value row 1, meta+gain row 2 */
  #taxPlanningContent .tax-holding-item {
    grid-template-columns: 22px 1fr auto;
    row-gap: 3px;
  }
  #taxPlanningContent .tax-holding-item .tp-lot-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
  #taxPlanningContent .tax-holding-item .tax-holding-info {
    grid-column: 2;
    grid-row: 1;
  }
  #taxPlanningContent .tax-holding-item .tp-fund-values {
    display: contents;
  }
  #taxPlanningContent .tax-holding-item .tp-lot-val-col {
    grid-column: 3;
    grid-row: 1;
  }
  #taxPlanningContent .tax-holding-item .tp-fund-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    grid-column: 2;
    grid-row: 2;
  }
  #taxPlanningContent .tax-holding-item .tp-fund-gain {
    grid-column: 3;
    grid-row: 2;
  }
  .tp-lot-units-col,
  .tp-lot-held-col {
    display: revert;
  }
  .tp-held-pill {
    display: none;
  }
  .tp-lot-sub {
    display: none;
  }
  .tp-lot-val-col {
    text-align: right;
  }
  /* Revert font sizes to compact on mobile */
  .tp-lot-date {
    font-size: 11px;
  }
  .tp-lot-units-col {
    font-size: 11px;
  }
  .tp-lot-val-col {
    font-size: 11px;
  }
  .tp-lot-cost-col {
    font-size: 11px;
  }
  .tp-lot-held-col {
    font-size: 10px;
  }
  .tp-lot-col-hdrs span {
    font-size: 9px;
  }
  .tp-hdr-desktop {
    display: none;
  }
  .tp-fund-meta-units,
  .tp-fund-meta-cost,
  .tp-fund-meta-days {
    font-size: 10px;
  }

  .holdings-split-title {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  }
}

/* =============================================
   Returns Performance Card (replaces bar chart)
   ============================================= */

.fund-perf-card {
  display: flex;
  flex-direction: column;
}

/* ── Performance vs Benchmark Table ─────────────────────────────────────── */
/* ── Performance table (new) ─────────────────────────────────────────────── */
.perf-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.perf-bm-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.perf-bm-vs {
  font-size: 11px;
  color: var(--text-tertiary);
}
.perf-bm-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.perf-bm-label input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.pft-wrap {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}
.pft-footnote {
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.5;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 4px;
  text-align: center;
}
.pft-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.pft-table thead th {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-gradient);
  border-bottom: 1px solid var(--border-light);
  text-align: right;
  white-space: nowrap;
}
.pft-table thead th.pft-col-name {
  text-align: left;
  width: 55%;
}
.pft-col-rolling,
.pft-col-alpha {
  width: 22.5%;
}
.pft-table tbody tr {
  border-bottom: 1px solid var(--border-light);
}
.pft-table tbody tr:last-child {
  border-bottom: none;
}
.pft-table tbody tr.pft-bench {
  background: var(--bg-gradient);
}
.pft-table tbody tr.pft-bench-first td {
  border-top: 1px solid var(--border-medium);
}
.pft-table tbody td {
  padding: 9px 10px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pft-table tbody td.pft-col-name {
  text-align: left;
  width: 55%;
}
.pft-name {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pft-sub {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.pft-bench .pft-name,
.pft-bench-name .pft-name {
  font-weight: 400;
  color: var(--text-secondary);
}
.pft-pos {
  color: var(--success);
  font-weight: 600;
}
.pft-neg {
  color: var(--danger);
  font-weight: 600;
}
.pft-neu {
  color: var(--text-tertiary);
}

@media (max-width: 767px) {
  .perf-controls {
    gap: 10px;
  }
  .pft-table {
    font-size: 11px;
  }
  .pft-table thead th,
  .pft-table tbody td {
    padding: 7px 6px;
  }
  .pft-sub {
    display: none;
  }
  .pft-hide-mobile {
    display: none;
  }
}

/* ── Info tooltip (info-tip) ─────────────────────────────────────────────── */
.info-tip {
  cursor: pointer;
}
#info-tip-bubble {
  position: fixed;
  background: var(--bg-card, #fffcf8);
  color: var(--text-primary, #2f241d);
  border: 1px solid var(--border-primary, #e7ded3);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  width: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 9999;
  text-align: left;
  display: none;
}
#info-tip-bubble.visible {
  display: block;
}

/* =============================================
   Fund Risk Metrics — Risk level & Turnover
   ============================================= */

.fund-stats-group--risk-meta {
  align-items: stretch;
  border-bottom: none;
}

.fund-stats-group--risk-meta .fund-stats-group-label {
  background: rgba(198, 90, 82, 0.05);
  color: var(--danger);
}

.fund-stats-risk-meta-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0;
  padding: 10px 14px;
  flex-wrap: wrap;
  gap: 16px;
}

.fund-stats-risk-level-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.riskometer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.riskometer-track {
  display: flex;
  align-items: center;
  gap: 5px;
}

.riskometer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s;
}

.riskometer-dot--active {
  width: 13px;
  height: 13px;
}

.riskometer-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.fund-stats-turnover-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* turnover is now inline in the metrics row — no special override needed */

/* =============================================
   Fund Info – full-width rows
   ============================================= */

.fund-meta-row-full {
  border-top: 1px solid rgba(154, 107, 70, 0.08);
}

.fund-meta-item--full {
  border-right: none;
  border-bottom: none;
  padding: 10px 18px;
}

.fund-meta-desc {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Fund Details Modal: Returns Table ───────────────────────────────────── */
.perf-table-wrapper {
  overflow-x: auto;
  margin: 0 -1px;
}
.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.perf-head-row {
  background: var(--bg-gradient);
  border-bottom: 1px solid var(--border-light);
}
.perf-th {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: right;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.perf-th--period {
  text-align: left;
  padding-left: 10px;
}
.perf-row {
  border-bottom: 1px solid var(--border-light);
}
.perf-row:last-child {
  border-bottom: none;
}
.perf-cell {
  padding: 8px 10px;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.perf-cell--period {
  text-align: left;
  padding-left: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
.perf-val--gain {
  color: var(--success);
  font-weight: 600;
}
.perf-val--loss {
  color: var(--danger);
  font-weight: 600;
}
.perf-since-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-top: auto;
  font-size: 12px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-gradient);
}
.perf-since-label {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.perf-since-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

@media (max-width: 767px) {
  .perf-th,
  .perf-cell {
    padding: 7px 6px;
    font-size: 10.5px;
  }
  .perf-th--period,
  .perf-cell--period {
    padding-left: 10px;
  }
  .riskometer-dot {
    width: 8px;
    height: 8px;
  }
  .riskometer-dot--active {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 767px) {
  .perf-cell--desktop,
  .perf-th--desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .fund-details-content .perf-cell--desktop,
  .fund-details-content .perf-th--desktop {
    display: none;
  }
}

/* ── OCD Desktop Dropdown ── */
.ocd-dd {
  position: fixed;
  z-index: 10001;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.13),
    0 2px 8px rgba(154, 107, 70, 0.08);
  width: 320px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  /* transform-origin is set dynamically in _ocdDDPosition() to match the trigger */
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  pointer-events: none;
}

.ocd-dd--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ocd-dd--above {
  transform: translateY(6px) scale(0.98);
}

.ocd-dd--above.ocd-dd--open {
  transform: translateY(0) scale(1);
}

.ocd-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}

.ocd-dd-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ocd-dd-close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition:
    background 0.12s,
    color 0.12s;
  padding: 0;
  flex-shrink: 0;
}

.ocd-dd-close:hover {
  background: var(--bg-light);
  color: var(--text-primary);
}

.ocd-dd-search-wrap {
  position: relative;
  padding: 10px 10px 8px;
  flex-shrink: 0;
}

.ocd-dd-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.ocd-dd-search {
  width: 100%;
  background: var(--bg-light);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
  box-sizing: border-box;
}

.ocd-dd-search:focus {
  border-color: rgba(154, 107, 70, 0.5);
  background: var(--bg-card);
}

.ocd-dd-search::placeholder {
  color: var(--text-tertiary);
  font-size: 12.5px;
}

.ocd-dd-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 8px;
}

.ocd-dd-list .ocd-item {
  padding: 9px 14px;
  border-radius: 0;
}

.ocd-dd-list .ocd-item-avatar {
  width: 30px;
  height: 30px;
}

.ocd-dd-list .ocd-item-avatar--text {
  font-size: 12px;
}

.ocd-dd-list .ocd-item-name {
  font-size: 12.5px;
}

.ocd-dd-list .ocd-item--focused {
  background: rgba(154, 107, 70, 0.08);
}

.ocd-dd-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Trigger card highlight when dropdown is open */
.overlap-calc-select-card--active {
  background: rgba(154, 107, 70, 0.14) !important;
}

/* Dark mode */
:root[data-theme="dark"] .ocd-dd {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(196, 144, 106, 0.15);
  border-color: var(--border-medium);
}

:root[data-theme="dark"] .ocd-dd-search {
  background: var(--bg-light);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

:root[data-theme="dark"] .ocd-dd-search:focus {
  border-color: rgba(154, 107, 70, 0.5);
  background: var(--bg-card);
}

:root[data-theme="dark"] .ocd-dd-list .ocd-item--focused {
  background: rgba(154, 107, 70, 0.12);
}

/* ===== Holdings Toolbar (Summary + Search) — Desktop/Tablet only ===== */
.holdings-toolbar {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.ht-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-light);
  margin-bottom: 14px;
}

.ht-value-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ht-fund-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
}

.ht-total-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ht-1d-change {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.ht-1d-change.gain {
  color: var(--success);
}
.ht-1d-change.loss {
  color: var(--danger);
}

.ht-value-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ht-exits {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.ht-exits-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  width: 72px;
  flex-shrink: 0;
}

.ht-exits-pos {
  background: var(--success);
}
.ht-exits-neg {
  background: var(--danger);
}

.ht-exits-text {
  font-size: 12px;
  color: var(--text-tertiary);
}

.ht-exits-text .gain {
  color: var(--success);
  font-weight: 600;
}
.ht-exits-text .loss {
  color: var(--danger);
  font-weight: 600;
}

.ht-top-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.ht-search-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ht-nav-links {
  display: flex;
  gap: 8px;
}

.ht-nav-links .ht-nav-link {
  height: 38px;
}

.ht-since-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  justify-content: right;
  padding-right: 3px;
}

/* ── Desktop/Tablet Display dropdown (Top 10 / All / Profitable / Loss) ── */
.ht-display-wrap {
  position: relative;
  flex-shrink: 0;
}

.ht-display-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.ht-display-btn i {
  color: var(--accent);
  font-size: 10px;
}

.ht-display-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.ht-display-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  overflow: hidden;
}

.ht-display-popover-hdr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 14px 6px;
}

.ht-display-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
  border-top: 0.5px solid var(--border-light);
}

.ht-display-opt:hover {
  background: var(--bg-card-hover);
}

.ht-display-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  flex-shrink: 0;
}

.ht-display-opt.sel .ht-display-radio {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--bg-card);
}

.ht-display-opt-label {
  flex: 1;
}

.ht-display-opt-count {
  color: var(--text-tertiary);
  font-size: 11px;
}

.ht-remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px dashed var(--border-light);
}

@media (max-width: 767px) {
  .ht-remember-row {
    padding-top: 18px;
  }
}

.ht-remember-text {
  flex: 1;
}

.ht-remember-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.ht-remember-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  line-height: 1.3;
}

.ht-remember-row .folio-toggle-switch {
  width: 34px;
  height: 19px;
  border-radius: 10px;
}

.ht-remember-row .folio-toggle-switch::after {
  width: 13px;
  height: 13px;
  top: 3px;
  left: 3px;
}

.ht-remember-row .folio-toggle-switch.active::after {
  transform: translateX(15px);
}

/* ── Scope hint below Current Holdings grid (desktop/tablet) ── */
.hc-display-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

/* ── Scope hint inside Sort & Display sheet (mobile, current holdings only) ── */
.csp-display-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}

.ht-nav-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--bg-card);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.ht-nav-link:hover {
  background: rgba(154, 107, 70, 0.15);
  color: var(--primary-gradient-start);
  border-color: rgba(154, 107, 70, 0.22);
}

.ht-bottom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.ht-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ht-stat-item.left {
  flex: 0 0 auto;
}

.ht-stat-item.right {
  flex: 0 0 auto;
  text-align: right;
}

.ht-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.ht-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ht-stat-value.gain {
  color: var(--success);
}
.ht-stat-value.loss {
  color: var(--danger);
}

.ht-stat-pct {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ht-stat-pct.gain {
  color: var(--success);
}
.ht-stat-pct.loss {
  color: var(--danger);
}

.ht-stat-value--meta {
  font-weight: 500;
  font-size: 14px;
}

.fam-avatars {
  display: flex;
  align-items: center;
}

.fam-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 2px solid var(--bg-card);
  margin-left: -8px;
  background: rgba(154, 107, 70, 0.12);
  color: var(--accent);
  flex-shrink: 0;
}

.fam-av:first-child {
  margin-left: 0;
}

.fam-av--more {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.fam-av-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 4px;
  text-align: right;
}

.holdings-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 160px;
}

.holdings-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 13px;
  pointer-events: none;
  transition: color 0.15s ease;
}

.holdings-search-input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 36px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.holdings-search-input::placeholder {
  color: var(--text-tertiary);
}

.holdings-search-input:focus {
  border-color: var(--primary-color, var(--accent-color, #9a6b46));
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.15);
}

.holdings-search-input:focus + .holdings-search-icon,
.holdings-search-wrap:has(.holdings-search-input:focus) .holdings-search-icon {
  color: var(--primary-color, var(--accent-color, #9a6b46));
}

/* Mobile uses the compact dashboard — hide this toolbar entirely */
@media (max-width: 767px) {
  .holdings-toolbar {
    display: none;
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .holdings-toolbar {
    padding: 12px 16px 14px;
  }

  .ht-total-value {
    font-size: 22px;
  }

  .ht-stat-value {
    font-size: 13px;
  }

  .ht-top-right {
    min-width: 0;
  }
}

/* ============================================
   NEW APP SHELL — Collapsible Left Sidebar + Slim Top Bar
   ============================================ */

:root {
  --sidebar-width-collapsed: 60px;
  --sidebar-width-expanded: 235px;
  --topbar-height: 60px;
}

/* ---------- Top bar ---------- */
.dashboard-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-bottom: 2px solid var(--border-primary);
  position: sticky;
  top: 0;
  background: var(--bg-light);
  z-index: 100;
  flex-wrap: nowrap;
  height: var(--topbar-height);
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
}

.dashboard-tabs .dashboard-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: var(--text-primary);
}

.theme-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  gap: 10px;
}

/* "Manage CAS" quick-action button in top bar */
.topbar-cas-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
}

.topbar-cas-btn i {
  font-size: 20px;
}

.topbar-cas-btn:hover {
  color: var(--accent);
  box-shadow: none;
}

.topbar-cas-btn.active {
  color: var(--accent);
}

/* ---------- Topbar meta chips ---------- */
.topbar-meta {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.topbar-divider--meta {
  display: none;
  width: 1px;
  height: 18px;
  background: var(--border-light);
  flex-shrink: 0;
  margin: 0 2px;
}

.topbar-user-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px 0 4px;
  height: 32px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(154, 107, 70, 0.1);
  border: 1px solid rgba(154, 107, 70, 0.25);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(154, 107, 70, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.topbar-user-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overflow button — always visible */
.topbar-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 15px;
}

.topbar-overflow-btn:hover {
  background: rgba(154, 107, 70, 0.08);
  box-shadow: none;
}

/* Overflow dropdown — mobile only */
.topbar-overflow-menu {
  display: none;
  position: absolute;
  top: calc(var(--topbar-height) + 2px);
  right: 10px;
  z-index: 300;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 190px;
  overflow: hidden;
}

.topbar-overflow-menu.open {
  display: block;
}

.topbar-overflow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.topbar-user-chip--sm {
  font-size: 11px;
  padding: 2px 8px 2px 3px;
}

.topbar-user-chip--sm .topbar-avatar {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

/* Mobile user switcher (inside overflow menu) */
.topbar-mobile-user-list {
  display: none;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.topbar-mobile-user-list.open {
  display: block;
}
.topbar-mobile-user-list .topbar-user-dropdown-item {
  padding: 9px 14px;
}

.topbar-user-dropdown-item {
  border-radius: 0px;
}

/* User switcher dropdown */
.topbar-user-chip-wrap {
  position: relative;
}
.topbar-user-chip-wrap.multi-user .topbar-user-chip {
  cursor: pointer;
}
.topbar-user-chip-caret {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 2px;
  transition: transform 0.15s;
  display: none;
}
.topbar-user-chip-wrap.multi-user .topbar-user-chip-caret {
  display: inline;
}
.topbar-user-chip-wrap.open .topbar-user-chip-caret {
  transform: rotate(180deg);
}
.topbar-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1100;
  overflow: hidden;
}
.topbar-user-chip-wrap.open .topbar-user-dropdown {
  display: block;
}
.topbar-user-dropdown-header {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-light);
}
.topbar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.topbar-user-dropdown-item:hover {
  background: var(--bg-gradient);
}
.topbar-user-dropdown-item.active {
  background: rgba(154, 107, 70, 0.08);
}
.topbar-user-dropdown-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(154, 107, 70, 0.18);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-user-dropdown-item.active .topbar-user-dropdown-avatar {
  background: rgba(154, 107, 70, 0.28);
}
.topbar-user-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.topbar-user-dropdown-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-user-dropdown-email {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-user-dropdown-check {
  margin-left: auto;
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
  width: 12px;
  visibility: hidden;
}
.topbar-user-dropdown-item.active .topbar-user-dropdown-check {
  visibility: visible;
}

.topbar-overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
}

.topbar-overflow-item + .topbar-overflow-item {
  border-top: 1px solid var(--border-light);
}
.topbar-overflow-item:hover {
  background: var(--bg-gradient);
  box-shadow: none;
  transform: none;
}
.topbar-overflow-item i {
  font-size: 14px;
  color: var(--text-secondary);
  width: 16px;
}

.topbar-overflow-dates {
  border-top: 1px solid var(--border-light);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topbar-overflow-date-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 8px;
  border-left: 3px solid transparent;
}
.topbar-overflow-date-row--stats {
  border-left-color: var(--accent);
}
.topbar-overflow-date-row--nav {
  border-left-color: var(--success);
}
.topbar-overflow-date-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.topbar-overflow-date-val {
  font-size: 10px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Desktop/tablet: hide user/nav repeat inside overflow menu */
.topbar-overflow-meta--mobile {
  display: none;
  border-bottom: 1px solid var(--border-light);
  width: 100%;
}

/* Mobile (≤768px): hide chips from topbar, show them only inside overflow */
@media (max-width: 767px) {
  .topbar-meta,
  .topbar-divider--meta {
    display: none !important;
  }

  .topbar-overflow-meta--mobile {
    display: flex;
  }

  button.topbar-overflow-meta--mobile {
    padding: 10px 12px;
  }
}

/* ---------- App Sidebar ---------- */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width-collapsed);
  background: var(--bg-card);
  border-right: 1px solid var(--border-light);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
  overflow: hidden;
}

/* Hover = temporary overlay preview, doesn't shift content */
.app-sidebar:hover {
  width: var(--sidebar-width-expanded);
}

/* Click-toggled expanded state shifts content too (see body.sidebar-expanded) */
.app-sidebar.expanded {
  width: var(--sidebar-width-expanded);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.sidebar-brand-icon {
  font-size: 22px;
  flex-shrink: 0;
  color: var(--primary-gradient-start);
}

/* Icon inside the brand box */
.sidebar-brand-icon-box i {
  font-size: 13px;
  color: #fffcf8;
}

.sidebar-brand-text {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--primary-gradient-start);
}

.app-sidebar:hover .sidebar-brand-text,
.app-sidebar.expanded .sidebar-brand-text {
  opacity: 1;
}

.sidebar-header .mobile-menu-close {
  display: none;
  color: var(--text-primary);
}

.sidebar-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
}

.sidebar-group {
  margin-bottom: 6px;
}

.sidebar-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.6;
  padding: 10px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  text-align: left;
  box-shadow: none;
  white-space: nowrap;
  border-radius: 0;
}

.sidebar-menu-item i {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-menu-item span {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.app-sidebar:hover .sidebar-menu-item span,
.app-sidebar.expanded .sidebar-menu-item span {
  opacity: 1;
}

.sidebar-menu-item:hover {
  background: rgba(154, 107, 70, 0.09);
  border-left-color: var(--accent);
  box-shadow: none;
  color: var(--accent);
}

.sidebar-menu-item.active {
  background: rgba(154, 107, 70, 0.13);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-menu-item:disabled,
.sidebar-menu-item.disabled-tab {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: transparent;
}

.sidebar-menu-item.disabled-tab::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 0.75em;
  opacity: 0.6;
}

.app-sidebar:not(:hover):not(.expanded):not(.mobile-active)
  .sidebar-group-label {
  opacity: 0;
  padding-top: 6px;
  padding-bottom: 0;
  height: 6px;
}

.sidebar-footer {
  display: none;
  border-top: 1px solid var(--border-light);
  padding: 10px;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Content offset for fixed sidebar ---------- */
.container {
  margin-left: var(--sidebar-width-collapsed);
  transition: margin-left 0.25s ease;
}

body.sidebar-expanded .container {
  margin-left: var(--sidebar-width-expanded);
}

/* Old elements no longer used in the new layout */
.mobile-header,
.mobile-menu,
.tab-container {
  display: none !important;
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* ---------- Responsive ---------- */
@media (min-width: 1200px) {
  .hamburger-menu {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  /* Force theme-container visible on tablet — overrides legacy rule */
  .dashboard-tabs .theme-container {
    display: flex !important;
  }

  .sidebar-toggle {
    display: none !important;
  }

  .hamburger-menu {
    display: flex;
  }

  .container,
  body.sidebar-expanded .container {
    margin-left: 0 !important;
  }

  .app-sidebar {
    left: -100%;
    width: 260px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    transition: left 0.3s ease;
  }

  .app-sidebar.mobile-active {
    left: 0;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-sidebar:hover,
  .app-sidebar.expanded {
    width: 260px;
  }

  .sidebar-brand-text,
  .sidebar-menu-item span,
  .sidebar-group-label {
    opacity: 1 !important;
  }

  .sidebar-header .mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: none;
    width: 32px;
    height: 32px;
    padding: 0;
  }

  /* Tablet: hide CAS label text, icon only */
  .topbar-cas-btn span {
    display: none;
  }

  /* Tablet: sidebar-footer unused */
  .sidebar-footer {
    display: none;
  }
}

@media (max-width: 767px) {
  .dashboard-title {
    font-size: 15px;
  }

  /* Mobile: sidebar-footer unused */
  .sidebar-footer {
    display: none;
  }

  .dashboard-tabs {
    padding: 10px;
  }

  #transactionSectionsWrapper {
    margin: 10px 0 20px;
  }
}

/* ===== Screenshot mode — disable backdrop-filter (html2canvas can't render it) ===== */
body.screenshot-mode .upload-section,
body.screenshot-mode .folio-card,
body.screenshot-mode .analytics-card,
body.screenshot-mode .chart-section,
body.screenshot-mode .compact-dashboard,
body.screenshot-mode .compact-summary-card,
body.screenshot-mode .compact-header,
body.screenshot-mode .compact-stat-row,
body.screenshot-mode .compact-members,
body.screenshot-mode .modal-content,
body.screenshot-mode .portfolio-analytics-section {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== Hide scrollbars on mobile/tablet (≤ 768px) ===== */
@media (max-width: 767px) {
  /* Firefox */
  * {
    scrollbar-width: none;
  }

  /* Chrome / Safari / Edge */
  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

/* ============================================================
   WARM FINANCIAL INTELLIGENCE — VISUAL POLISH
   ============================================================ */

/* ── Body ── */
body {
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar brand icon: colored amber square box ── */
.sidebar-brand-icon-box {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--primary-gradient-start);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffcf8;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Sidebar brand labels container ── */
.sidebar-brand-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.sidebar-brand-sub {
  font-size: 9.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 1;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

/* ── Sidebar nav items: rounded, no left-border ── */
.sidebar-menu-item {
  border-left: none !important;
  border-radius: 8px !important;
  margin: 1px 6px !important;
  padding: 9px 10px !important;
  width: calc(100% - 12px) !important;
}

.sidebar-menu-item:hover {
  background: rgba(154, 107, 70, 0.08) !important;
  border-left-color: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.sidebar-menu-item.active {
  background: rgba(154, 107, 70, 0.1) !important;
  border-left-color: transparent !important;
  color: var(--primary-gradient-start) !important;
  font-weight: 600 !important;
}

/* ── Topbar background and border ── */
.dashboard-tabs {
  background: var(--bg-light) !important;
  border-bottom: 1px solid var(--border-medium) !important;
  margin-bottom: 0 !important;
}

/* ── Dashboard title in topbar ── */
.dashboard-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── Topbar "Manage Data" button: bordered by default, amber when active ── */
.topbar-cas-btn.manage-data-button {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 10px !important;
  padding: 0 13px !important;
  height: 32px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.topbar-cas-btn.manage-data-button:hover {
  background: rgba(154, 107, 70, 0.08) !important;
  color: var(--primary-gradient-start) !important;
  border-color: rgba(154, 107, 70, 0.22) !important;
  box-shadow: none !important;
}

/* Filled amber only when the manage-data tab is active */
.topbar-cas-btn.manage-data-button.active {
  background: var(--primary-gradient-start) !important;
  color: #fffcf8 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* ── Screenshot + Theme toggle: bordered icon buttons ── */
.screenshot-btn,
button.theme-toggle,
.theme-container button.theme-toggle,
.topbar-overflow-btn {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-medium) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.theme-container button.theme-toggle i {
  font-size: 13px !important;
}

.screenshot-btn:hover,
button.theme-toggle:hover {
  background: rgba(154, 107, 70, 0.08) !important;
  color: var(--primary-gradient-start) !important;
  border-color: rgba(154, 107, 70, 0.22) !important;
  box-shadow: none !important;
}

/* ── Sidebar toggle: desktop only ── */
@media (min-width: 1200px) {
  .sidebar-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-medium) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .sidebar-toggle:hover {
    background: rgba(154, 107, 70, 0.08) !important;
    color: var(--primary-gradient-start) !important;
    border-color: rgba(154, 107, 70, 0.22) !important;
  }
}

.card {
  padding: 14px 18px !important;
  border-right: 1px solid var(--border-light) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  text-align: left !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
}

/* No hover tint on KPI cells */
.card:hover {
  background: transparent !important;
}

/* Remove positive/negative background tinting on KPI cells */
.card.positive,
.card.negative,
.card.positive:hover,
.card.negative:hover {
  background: transparent !important;
}

/* Remove bottom accent line */
.card::after {
  display: none !important;
}

.card h3 {
  font-size: 10px !important;
  letter-spacing: 0.7px !important;
  font-weight: 700 !important;
}

.card .value {
  font-size: 22px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.card .subtext {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ── Portfolio analytics section: flat, no card wrapper (desktop only) ── */
@media (min-width: 768px) {
  .portfolio-analytics-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
}

#family-dashboard .portfolio-analytics-section {
  margin-top: 20px;
}

.portfolio-analytics-section > h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--text-tertiary) !important;
  margin-bottom: 14px !important;
}

/* ── Analytics cards: clean card style directly on body ── */
.analytics-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── folio-card ── */
.folio-card {
  border-radius: 16px !important;
  border: 1px solid var(--border-medium) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Compact holdings list rows ── */
.compact-holding-item {
  border-bottom: 1px solid var(--border-light) !important;
  transition: background 0.1s !important;
}

/* ── Dark mode overrides ── */
/* dashboard-tabs dark rule already defined near top of dark-mode block */

/* ── Tabular numbers on all financial figures ── */
.value,
.stat-value,
.compact-total-value,
.folio-card-hero-value,
.holding-value {
  font-variant-numeric: tabular-nums;
}

.compact-total-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   WARM FINANCIAL INTELLIGENCE — SECTION FLATTING & HEADING STANDARDIZATION
   ══════════════════════════════════════════════════════════════ */

/* ── All section active-tab: outer breathing room owned here, not per-section ── */
@media (min-width: 1200px) {
  .dashboard section.active-tab {
    padding: 24px 16px !important;
  }
}

/* ── Flatten ALL page-level section wrapper cards ── */
.upload-section,
.chart-section,
.transaction-section,
.capital-gains-section,
.folio-section,
.overlap-analysis-section,
.health-score-section,
.expense-section,
#overlapContent .capital-gains-section,
#healthScoreContent .capital-gains-section,
#expenseContent .capital-gains-section,
#capitalGainsContent .capital-gains-section,
#pastFolioGrid .capital-gains-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Standardized section heading: small uppercase label ── */
.section-heading-label,
.upload-section > h2,
.upload-section > h3,
.chart-section > h3,
.transaction-section > h3,
.capital-gains-section > h3,
.folio-section > h3,
.section-header > h3,
.portfolio-analytics-section > h4,
#overlapContent .capital-gains-section > h3,
#healthScoreContent .capital-gains-section > h3,
#expenseContent .capital-gains-section > h3,
#capitalGainsContent .capital-gains-section > h3 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--text-tertiary) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* ── weighted-returns-section heading: match section label style ── */
.weighted-returns-section > h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--text-tertiary) !important;
  margin-bottom: 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   WARM FINANCIAL INTELLIGENCE — CARD STANDARDIZATION, BUTTON HOVER, HERO CELLS
   ══════════════════════════════════════════════════════════════ */

/* ── Card standard: match analytics-card (bg-card, border-medium, 14px radius, shadow-sm) ── */
.monthly-summary-container,
.monthlySummarySection,
#monthlySummarySection,
#capitalGainsContent .capital-gains-section,
#capitalGainsContent .cg-summary {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px;
}

/* ── capital-gains-section used generically in other pages stays flat ── */
.capital-gains-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── capitalGains page overrides the flat rule above (more specific wins) ── */
#capitalGainsContent .capital-gains-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 0 !important;
}

#capitalGainsContent .capital-gains-section.alltime-section {
  margin-bottom: 16px !important;
}

/* ── chart-section title matches card header style ── */
.chart-section > .section-header > h3,
.monthly-summary-container > h3,
.monthly-summary-container > h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--text-tertiary) !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ── Warm amber hover: standard for ALL interactive buttons ── */
.overlap-calc-viewall-btn:hover,
.fund-action-btn:hover,
.fund-action-btn.primary:hover,
.fund-action-btn.secondary:hover,
.topbar-cas-btn:not(.active):hover,
.sidebar-menu-item:not(.active):hover,
.tab-btn:hover,
.chart-tab:hover,
.filter-btn:hover,
.health-detail-btn:hover,
.cg-filter-btn:hover,
.compare-btn:hover,
.action-btn:hover,
button[class*="-btn"]:not([class*="active"]):not([class*="primary"]):not(
    [class*="non-global"]
  ):hover {
  background: rgba(154, 107, 70, 0.15) !important;
  color: var(--primary-gradient-start) !important;
  border-color: rgba(154, 107, 70, 0.22) !important;
  box-shadow: none !important;
}
.md-layout button.md-btn.md-btn-danger:hover {
  background: var(--danger-btn-hover) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── primary/filled buttons: slightly stronger amber tint on hover ── */
.fund-action-btn.primary:hover {
  background: rgba(154, 107, 70, 0.15) !important;
}

/* ── Hero cells: remove bottom border ── */
.folio-card-hero-cell,
.cg-hero-cell {
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════════
   WARM FINANCIAL INTELLIGENCE — HERO CELL BORDERS, BUTTON SHADOWS, CAS PANEL CORNERS
   ══════════════════════════════════════════════════════════════ */

/* ── Remove ALL hero cell bottom borders and pseudo-element accent bars ── */
.folio-card-hero-cell,
.cg-hero-cell,
#taxPlanningContent .tax-summary-card,
.tax-summary-card,
.expense-hero-cell,
.overlap-hero-cell,
[class*="hero-cell"] {
  border-bottom: none !important;
}

#taxPlanningContent .tax-summary-card::after,
.cg-hero-cell::after,
[class*="hero-cell"]::after {
  display: none !important;
}

/* ── Remove box-shadow from action/utility buttons ── */
.overlap-calc-viewall-btn,
.tx-dl-btn,
.fund-action-btn,
.filter-btn,
.tab-btn,
.chart-tab,
.cg-filter-btn,
.compare-btn {
  box-shadow: none !important;
}
.overlap-calc-viewall-btn:hover,
.tx-dl-btn:hover {
  box-shadow: none !important;
}

/* ── CAS panel: clip inner backgrounds to rounded corners ── */
.cas-panel {
  overflow: hidden !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 14px !important;
}

.cas-panel--instructions {
  background: var(--primary-gradient-start) !important;
  overflow: hidden !important;
}

:root[data-theme="dark"] .cas-panel--instructions {
  background: var(--bg-card-hover) !important;
  border: 1px solid var(--border-medium) !important;
  border-left: 3px solid var(--accent) !important;
}

/* ── monthly-summary-container: no double-card from nested capital-gains-section ── */
.monthly-summary-container .capital-gains-section,
.monthly-summary-container .chart-section,
#monthlySummarySection .capital-gains-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   WARM FINANCIAL INTELLIGENCE — HEADING, BUTTON, CONTAINER REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Section headings: text-primary, no uppercase, 13px ── */
.section-heading-label,
.upload-section > h2,
.upload-section > h3,
.chart-section > h3,
.transaction-section > h3,
.capital-gains-section > h3,
.folio-section > h3,
.section-header > h3,
.portfolio-analytics-section > h4,
.weighted-returns-section > h4,
.chart-section > .section-header > h3,
.monthly-summary-container > h3,
.monthly-summary-container > h4,
#overlapContent .capital-gains-section > h3,
#healthScoreContent .capital-gains-section > h3,
#expenseContent .capital-gains-section > h3,
#capitalGainsContent .capital-gains-section > h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.1px !important;
  color: var(--text-primary) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* ── Subtitles: text-secondary ── */
.section-subtitle,
.section-header p,
p.section-subtitle {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

/* ── overlap-calc-viewall-btn: base bg = hover bg, only color shifts on hover ── */
.overlap-calc-viewall-btn {
  background: rgba(154, 107, 70, 0.08) !important;
  box-shadow: none !important;
}
.overlap-calc-viewall-btn:hover {
  background: rgba(154, 107, 70, 0.15) !important;
  color: var(--primary-gradient-start) !important;
  box-shadow: none !important;
}

/* ── Monthly: #monthlySummarySection is the outer card; inner .monthly-summary-container is flat ── */
#monthlySummarySection {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px;
  margin: 0 0 20px;
}
#monthlySummarySection .monthly-summary-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── projection-table-card h4: subtle bg header strip ── */
.projection-table-card h4 {
  background: var(--bg-gradient) !important;
  margin: -20px -20px 15px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
}

/* ── projection-table-card: compact, non-scrollable ── */
.projection-table-card {
  padding: 15px 20px 12px 15px !important;
  overflow: hidden !important;
  overflow-x: visible !important;
}

.projection-table-card table {
  min-width: unset !important;
  width: 100% !important;
  font-size: 10px !important;
}

.projection-table-card th,
.projection-table-card td {
  padding: 9px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Fix h4 negative margins to match new padding (top 15px, left 15px, right 20px) */
.projection-table-card h4 {
  margin: -15px -20px 12px -15px !important;
}

/* ── cagr-selector: compact, low-key ── */
.cagr-selector {
  background: transparent !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 10px 0 !important;
  gap: 10px !important;
}

.cagr-selector label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

.cagr-input-group input {
  min-width: 70px !important;
  padding: 5px 20px 5px 6px !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

#customSipInput {
  width: 110px !important;
  padding-left: 20px !important;
}

.cagr-input-group input:focus {
  border-color: var(--primary-gradient-start) !important;
  box-shadow: none !important;
}

.cagr-suffix,
.cagr-prefix {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-tertiary) !important;
}

/* ── expenseContent: card wrapper matching analytics-card standard ── */
#expenseContent {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  overflow: hidden !important;
}

/* inner capital-gains-section stays flat inside the card ── */
#expenseContent .capital-gains-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── expenseContent: reset outer div, card on inner capital-gains-section ── */
#expenseContent {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#expenseContent .capital-gains-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  overflow: hidden !important;
}

/* ── expenseContent: remove gains-summary-card bottom borders and accent bar ── */
#expenseContent .gains-summary-card {
  border-bottom: none !important;
}

#expenseContent .gains-summary-card::after {
  display: none !important;
}

#expenseContent .gains-summary-grid {
  border-bottom: 1px solid var(--border-light) !important;
}

/* ── expenseContent: remove double padding ── */
#expenseContent .capital-gains-section {
  padding: 0 !important;
}

#expenseContent .gains-table-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  #monthlySummarySection {
    margin: 10px 0px;
    padding: 15px;
  }

  .projection-controls {
    gap: 0;
  }

  .weighted-returns-section {
    margin: 30px 0 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   CAPITAL GAINS — REDESIGN: CATEGORY CARDS, ITR2, QUARTERLY
   ══════════════════════════════════════════════════════════════ */

/* ── Year category cards (Equity / Hybrid / Debt) ── */
.cg-year-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.cg-year-cat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.cg-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.cg-cat-icon {
  font-size: 15px;
}
.cg-cat-name {
  font-weight: 600;
}

.cg-cat-rows {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cg-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.cg-cat-row-label {
  color: var(--text-secondary);
}
.cg-cat-row-value {
  font-weight: 500;
  color: var(--text-primary);
}

.cg-cat-row-value.loss {
  color: var(--danger) !important;
}

.cg-cat-row-value.gain {
  color: var(--success) !important;
}

.cg-cat-row--total {
  border-top: 1px solid var(--border-light);
  padding-top: 7px;
  margin-top: 2px;
  font-weight: 600;
}

.cg-cat-row--total .cg-cat-row-label {
  color: var(--text-primary);
  font-weight: 600;
}

.cg-cat-row--sub .cg-cat-row-label {
  color: var(--text-tertiary);
  font-size: 11px;
}
.cg-cat-row--sub .cg-cat-row-value {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* ── ITR2-ready figures ── */

#itr2FilingContent,
#cgTableFContent {
  margin-top: 20px;
}

#itr2FilingContent.collapsed,
#cgTableFContent.collapsed {
  margin-top: 0px;
}

.itr2-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.itr2-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  overflow: hidden;
}

.itr2-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.itr2-term-block {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border-light);
}

.itr2-term-block:last-child {
  border-bottom: none;
}

.itr2-term-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.itr2-term-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.itr2-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(154, 107, 70, 0.1);
  color: var(--primary-gradient-start);
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.itr2-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  color: var(--text-secondary);
}

.itr2-row span:last-child {
  font-weight: 500;
  color: var(--text-primary);
}

.itr2-row--exempt {
  color: var(--text-tertiary) !important;
}
.itr2-row--exempt span:last-child {
  color: var(--text-tertiary) !important;
}

.itr2-row--net {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  font-weight: 600;
}

.itr2-row--net span:first-child {
  color: var(--text-primary);
  font-weight: 600;
}
.itr2-row--net.gain span:last-child {
  color: var(--success) !important;
}
.itr2-row--net.loss span:last-child {
  color: var(--danger) !important;
}

/* ── Quarter-wise accrual table ── */
.cg-quarterly-section {
  margin-bottom: 20px;
}

.cg-quarterly-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
}

.cg-quarterly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.cg-quarterly-table th {
  background: var(--bg-gradient);
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-medium);
}

.cg-quarterly-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.cg-quarterly-table tr:last-child td {
  border-bottom: none;
}
.cg-quarterly-table tbody tr:hover td {
  background: rgba(154, 107, 70, 0.03);
}

.cg-q-total-row td {
  background: var(--bg-gradient) !important;
  font-weight: 600;
  border-top: 1px solid var(--border-medium);
}

/* ── Transactions header ── */
.cg-year-tx-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.cg-year-tx-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Collapsible section (compact labelled toggle bar) ──
   Used by "Actual ITR2 filing figures" and "Table F entry values", both
   collapsed by default. While collapsed, only this one-line bar shows —
   not the section's full title+subtitle block, which lives inside the
   collapsible content and appears once expanded. */
.dash-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0px;
  padding: 10px 14px;
  background: rgba(154, 107, 70, 0.05);
  border: 1px solid rgba(154, 107, 70, 0.1);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.dash-collapsible-toggle:hover {
  background: rgba(154, 107, 70, 0.09);
}

.dash-collapsible-toggle-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.85;
}

.dash-collapse-chevron {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
}

/* Chevron points down while collapsed, flips up once opened */
.dash-collapse-chevron.open {
  transform: rotate(180deg);
}

.dash-collapsible-content {
  overflow: hidden;
  max-height: 4000px;
  opacity: 1;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin 0.25s ease;
}

.dash-collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.dash-collapsible-subtitle {
  margin-bottom: 14px !important;
}

.itr2-filing-note,
.cg-quarterly-warning {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(198, 90, 82, 0.06);
  border: 1px solid rgba(198, 90, 82, 0.18);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

/* ── Mobile responsive ── */
@media (max-width: 767px) {
  .cg-year-cat-grid,
  .itr2-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   CAPITAL GAINS — FLATTEN ALL SECTION WRAPPERS, KEEP ONLY DATA CARDS
   ══════════════════════════════════════════════════════════════ */

/* All section-level wrappers inside capitalGainsContent are flat */
#capitalGainsContent .capital-gains-section,
#capitalGainsContent .alltime-section,
#capitalGainsContent .itr2-section,
#capitalGainsContent .cg-quarterly-section,
#capitalGainsContent .cg-year-transactions,
#capitalGainsContent .cg-year-display {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Section headings inside capitalGainsContent: plain, no color transforms */
#capitalGainsContent .section-header h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 4px !important;
}

/* Category card header: no colored bg, plain white */
.cg-cat-header {
  background: transparent !important;
}

/* ITR2 cat card header: no colored bg */
.itr2-cat-head {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   CAPITAL GAINS — CLEAN UX PASS: Remove all amber headers, flatten cards
   ══════════════════════════════════════════════════════════════ */

/* Section-level heading area: strip the amber tinted bg box completely */
#capitalGainsContent .section-header {
  background: transparent !important;
  padding: 0 0 10px 0 !important;
  border-radius: 0 !important;
  border: none !important;
}
#capitalGainsContent .section-header h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 0 3px 0 !important;
}
#capitalGainsContent .section-header .section-subtitle,
#capitalGainsContent .section-header p {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* Transactions block: flat, no card */
#capitalGainsContent .cg-year-transactions {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Transactions header row: plain flex, no amber bg */
#capitalGainsContent .cg-year-tx-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 12px 0 !important;
}

/* Category cards grid: remove side margins that indent from page edge */
#capitalGainsContent .cg-year-cat-grid {
  margin: 0 !important;
}

/* ITR2 cards grid: no extra margin */
#capitalGainsContent .itr2-cards-grid {
  margin: 0 !important;
}

/* Quarterly table wrap: no extra margin-top */
#capitalGainsContent .cg-quarterly-wrap {
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   CAPITAL GAINS — TRANSACTIONS BLOCK = tx-section PATTERN
   PILL BAR = flat, no background
   ══════════════════════════════════════════════════════════════ */

/* FY pill bar: no card bg, no bottom border — just pills on page bg */
.cg-pill-bar-wrap {
  margin-bottom: 16px;
}
.cg-pill-bar {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* Transactions block: styled like .tx-section */
#capitalGainsContent .cg-year-transactions {
  background: var(--bg-card) !important;
  border: 1px solid rgba(154, 107, 70, 0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* Transactions header: styled like .tx-section-header */
#capitalGainsContent .cg-year-tx-header {
  background: rgba(154, 107, 70, 0.05) !important;
  border-bottom: 1px solid rgba(154, 107, 70, 0.1) !important;
  padding: 10px 14px !important;
}

/* gains-table-wrapper inside the transactions card: flat passthrough */
#capitalGainsContent .cg-year-transactions .gains-table-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .cg-pill-bar-wrap {
    margin: 0px 10px 16px 10px;
  }
  .alltime-summary-grid {
    grid-template-columns: 1fr;
  }
  .cg-year-hero .folio-card-hero,
  .cg-alltime-hero .folio-card-hero {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Center All-Time Detailed Transactions and FY Detailed tx headers on mobile */
  #capitalGainsContent .section-header[style*="display: flex"],
  .cg-year-tx-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cg-year-tx-title {
    text-align: center;
  }

  #taxPlanningContent .holdings-split-section {
    margin: 0 0 16px;
  }
  .tax-rates-section,
  .tax-disclaimer {
    margin: 14px 0 20px;
  }

  #taxPlanningContent .tax-summary-cards {
    grid-template-columns: 1fr;
  }
  .tp-sum-value {
    font-size: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 — Dashboard v2 & Portfolio Composition page
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1199px) {
  .dash-h-type {
    display: none;
  }
}

/* ── Section dividers ───────────────────────────────────────────────────── */
.dash-section-divider {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 25px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.65;
}
.dash-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-medium);
}

.dash-section-divider--first {
  margin-top: 0;
}

/* ── Portfolio Overview 3-col grid ─────────────────────────────────────── */
.dash-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 4px;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .dash-main-grid {
    grid-template-columns: 1fr 1fr;
  }
  #dashAllocationCard {
    grid-column: span 2;
  }
}
@media (max-width: 767px) {
  .dash-main-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Individual dash section card ──────────────────────────────────────── */
.dash-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-section-card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-section-card-sub {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}
.dash-section-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background 0.15s;
  white-space: nowrap;
}
.dash-section-link:hover {
  background: rgba(154, 107, 70, 0.08);
}

/* ── Loading / empty states ─────────────────────────────────────────────── */
.dash-snippet-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
.dash-snippet-empty {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: 10px 0;
  margin: 0;
}

/* ── Health snippet ─────────────────────────────────────────────────────── */
.dash-health-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-health-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-health-ring {
  width: 72px;
  height: 72px;
}
.dash-health-score {
  position: absolute;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dash-health-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dash-health-grade {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.health-grade--excellent,
.health-grade--great {
  color: var(--success);
}
.health-grade--good {
  color: var(--success);
}
.health-grade--fair {
  color: var(--warning);
}
.health-grade--poor {
  color: var(--danger);
}
.dash-health-sublabel {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.dash-health-weakest {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}
.dash-health-factors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.dash-hf-row {
  display: grid;
  grid-template-columns: 90px 1fr 26px;
  align-items: center;
  gap: 8px;
}
.dash-hf-label {
  font-size: 11px;
  color: var(--text-secondary);
}
.dash-hf-bar-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(154, 107, 70, 0.1);
  overflow: hidden;
}
.dash-hf-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.dash-hf-bar-fill--success {
  background: var(--success);
}
.dash-hf-bar-fill--warning {
  background: var(--warning);
}
.dash-hf-bar-fill--negative {
  background: var(--danger);
}
.dash-hf-score {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.dash-hf-score--success {
  color: var(--success);
}
.dash-hf-score--warning {
  color: var(--warning);
}
.dash-hf-score--negative {
  color: var(--danger);
}
/* Health ring arc — class-based so CSS vars resolve correctly */
.dash-health-ring-arc--success {
  stroke: var(--success);
}
.dash-health-ring-arc--warning {
  stroke: var(--warning);
}
.dash-health-ring-arc--negative {
  stroke: var(--danger);
}

/* ── Returns snippet (tabular) ──────────────────────────────────────────── */
.dash-ret-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-ret-table thead th {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border-medium);
}
.dash-ret-table thead th:first-child {
  text-align: left;
}
.dash-ret-table tbody tr {
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}
.dash-ret-table tbody tr:last-child {
  border-bottom: none;
}
.dash-ret-table tbody td {
  padding: 8px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.dash-ret-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.dash-ret-port {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-ret-port.positive {
  color: var(--success);
}
.dash-ret-port.negative {
  color: var(--danger);
}
.dash-ret-bench {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dash-ret-bench-val {
  font-weight: 500;
}
.dash-alpha-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.dash-alpha-badge.alpha-pos {
  background: rgba(47, 143, 91, 0.12);
  color: var(--success);
}
.dash-alpha-badge.alpha-neg {
  background: rgba(198, 90, 82, 0.1);
  color: var(--danger);
}

/* ── Allocation bar ─────────────────────────────────────────────────────── */
.dash-alloc-bar-track {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(154, 107, 70, 0.08);
  margin-bottom: 12px;
}
.dash-alloc-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}
.dash-alloc-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.dash-alloc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-alloc-name {
  color: var(--text-secondary);
  flex: 1;
  font-weight: 500;
}
.dash-alloc-pct {
  color: var(--text-primary);
  font-weight: 700;
}
.dash-alloc-more {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Insights row (3 colored-border cards) ──────────────────────────────── */
.dash-insights-row {
  margin-bottom: 4px;
}
.dash-insights-row-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 767px) {
  .dash-insights-row-inner {
    grid-template-columns: 1fr;
  }
}
.dash-insight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-insight-card:hover {
  background: rgba(154, 107, 70, 0.03);
}
.dash-insight-bigval {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 4px;
}
.dash-insight-onesub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Holdings table (2-col fund grid) ──────────────────────────────────── */
.dash-holdings-table {
  margin-top: 4px;
}
.dash-h-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 767px) {
  .dash-h-list {
    grid-template-columns: 1fr;
  }
  .dash-h-type {
    display: none;
  }
  #dashSummaryCard {
    display: none !important;
  }
  #dashboard .compact-dashboard {
    display: block !important;
  }
  #current-holdings .folio-section {
    display: none !important;
  }
  #current-holdings .compact-dashboard {
    display: block !important;
  }
}
.dash-h-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(154, 107, 70, 0.12);
  min-width: 0;
  overflow: hidden;
}
.dash-h-row:last-child {
  border-bottom: none;
}
.dash-h-rank {
  font-size: 11px;
  color: var(--text-secondary);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  font-weight: 500;
}
.dash-h-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.dash-h-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-h-amc {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-h-type {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(154, 107, 70, 0.08);
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}
.dash-h-right {
  text-align: right;
  flex-shrink: 0;
}
.dash-h-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dash-h-ret {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dash-h-ret.positive {
  color: var(--success);
}
.dash-h-ret.negative {
  color: var(--danger);
}

.family-user-breakdown-heading {
  margin-bottom: 10px;
}

/* ── Family Holdings Breakdown — 2-col list inside dash-section-card ──────── */
.fam-bk-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 767px) {
  .fam-bk-cols {
    grid-template-columns: 1fr;
  }
}

.fam-bk-col {
  display: flex;
  flex-direction: column;
}

.fam-bk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(154, 107, 70, 0.1);
}
.fam-bk-row:last-child {
  border-bottom: none;
}

.fam-bk-name-col {
  flex: 1;
  min-width: 0;
}
.fam-bk-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fam-bk-chip {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  font-weight: 500;
}
.fam-bk-stat {
  text-align: right;
  flex-shrink: 0;
  width: 72px;
}
.fam-bk-val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.3;
}
.fam-bk-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  line-height: 1.2;
}
.fam-bk-val.positive,
.fam-bk-sub.positive {
  color: var(--success);
}
.fam-bk-val.negative,
.fam-bk-sub.negative {
  color: var(--danger);
}

/* vertical separator between the two columns */
.fam-bk-col:first-child {
  padding-right: 16px;
  border-right: 1px solid var(--border-medium);
}
.fam-bk-col:last-child {
  padding-left: 16px;
  padding-right: 0;
}

.fam-bk-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-medium);
  margin-bottom: 2px;
}
.fam-bk-col-header .fam-bk-name-col {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.7;
}
.fam-bk-col-header .fam-bk-stat {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: right;
}

/* ── Family segment bar (reuses dash-alloc-* classes) ───────────────────── */
.fam-seg-card .chart-wrapper {
  padding: 4px 0 0;
}

/* ── Avg. Holding XIRR coloring ─────────────────────────────────────────── */
.avg-xirr-val.positive {
  color: var(--success);
}
.avg-xirr-val.negative {
  color: var(--danger);
}

/* ── Portfolio Composition page ─────────────────────────────────────────── */
#portfolio-composition .portfolio-analytics-section > h4 {
  display: none;
}

/* ── Milestones & Monthly Flow 2-col grid ───────────────────────────────── */
.dash-milestone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 4px;
}
.dash-milestone-grid > .dash-section-card {
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .dash-milestone-grid {
    grid-template-columns: 1fr;
  }
}

#dashMilestonesList,
#dashFlowContent {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Milestone list */
.ms-list {
  padding: 4px 0;
  flex: 1;
}
.ms-row {
  display: flex;
  align-items: stretch;
  padding: 0 14px;
}
.ms-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ms-dot {
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}
.ms-line {
  width: 2px;
  flex: 1;
  min-height: 6px;
}
.ms-body {
  flex: 1;
  min-width: 0;
  padding: 6px 0 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--bg-gradient);
}
.ms-row:last-child .ms-body {
  border-bottom: none;
}
.ms-amount {
  font-size: 12.5px;
  font-weight: 700;
}
.ms-meta {
  font-size: 10.5px;
  margin-top: 1px;
}
.ms-r {
  text-align: right;
  flex-shrink: 0;
}
.ms-eta {
  font-size: 11.5px;
  font-weight: 600;
}
.ms-eta-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.ms-row.ms-past .ms-dot {
  width: 9px;
  height: 9px;
  background: var(--success);
  margin-top: 8px;
  box-shadow: 0 0 0 2px rgba(47, 143, 91, 0.15);
}
.ms-row.ms-past .ms-line {
  background: rgba(47, 143, 91, 0.2);
}
.ms-row.ms-past .ms-amount {
  color: var(--text-secondary);
}
.ms-row.ms-past .ms-meta {
  color: var(--success);
}

.ms-row.ms-current .ms-dot {
  width: 13px;
  height: 13px;
  background: var(--accent);
  margin-top: 6px;
  box-shadow: 0 0 0 3px rgba(154, 107, 70, 0.18);
}
.ms-row.ms-current .ms-line {
  background: rgba(154, 107, 70, 0.15);
}
.ms-row.ms-current .ms-body {
  background: var(--bg-gradient);
  margin: 0 -14px 0 0;
  padding: 8px 14px 8px 10px;
  border-top: 1px solid rgba(154, 107, 70, 0.08);
  border-bottom: 1px solid rgba(154, 107, 70, 0.08);
}
.ms-row.ms-current .ms-amount {
  color: var(--accent);
  font-size: 13.5px;
}
.ms-row.ms-current .ms-meta {
  color: var(--text-secondary);
}

.ms-row.ms-next .ms-dot {
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border: 2px solid var(--warning);
  margin-top: 7px;
  box-shadow: 0 0 0 2px rgba(201, 135, 45, 0.14);
}
.ms-row.ms-next .ms-line {
  background: var(--border-medium);
}
.ms-row.ms-next .ms-amount {
  color: var(--warning);
}
.ms-row.ms-next .ms-meta {
  color: var(--text-secondary);
}
.ms-row.ms-next .ms-eta {
  color: var(--warning);
}

.ms-row.ms-future .ms-dot {
  width: 8px;
  height: 8px;
  background: var(--bg-card);
  border: 2px solid var(--border-medium);
  margin-top: 8px;
}
.ms-row.ms-future .ms-line {
  background: var(--border-medium);
}
.ms-row.ms-future .ms-amount {
  color: var(--text-primary);
}
.ms-row.ms-future .ms-meta {
  color: var(--text-tertiary);
}
.ms-row.ms-future .ms-eta {
  color: var(--text-secondary);
}

.ms-row.ms-far .ms-dot {
  width: 7px;
  height: 7px;
  background: var(--bg-card);
  border: 2px solid var(--border-medium);
  margin-top: 9px;
  opacity: 0.55;
}
.ms-row.ms-far .ms-line {
  background: var(--border-medium);
  opacity: 0.5;
}
.ms-row.ms-far .ms-amount {
  color: var(--text-secondary);
}
.ms-row.ms-far .ms-eta {
  color: var(--text-tertiary);
}
.ms-row.ms-far .ms-meta {
  color: var(--text-tertiary);
}

.ms-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
  vertical-align: middle;
}
.ms-badge.ms-badge-reached {
  background: rgba(47, 143, 91, 0.1);
  color: var(--success);
}
.ms-badge.ms-badge-here {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
}
.ms-badge.ms-badge-next {
  background: rgba(201, 135, 45, 0.1);
  color: var(--warning);
}

.ms-footer {
  padding: 8px 14px;
  font-size: 10px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-medium);
  text-align: center;
  margin-top: auto;
}

/* Monthly Flow card */
.mf-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
}

@media (max-width: 767px) {
  .ms-row {
    padding: 0;
  }
  .mf-body {
    padding: 12px 0;
  }
}
.mf-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mf-stat {
  background: rgba(154, 107, 70, 0.04);
  border: 1px solid rgba(154, 107, 70, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
}
.mf-stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.mf-stat-val {
  font-size: 17px;
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mf-stat-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.mf-sec-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}
.mf-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  overflow: hidden;
}
.mf-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mf-bar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 66px;
  width: 100%;
}
.mf-bar {
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  flex: 1;
}
.mf-bar.buy {
  background: rgba(47, 143, 91, 0.75);
}
.mf-bar.sell {
  background: rgba(198, 90, 82, 0.75);
}
.mf-bar-label {
  font-size: 8.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.mf-legend {
  display: flex;
  gap: 10px;
  margin-top: 3px;
}
.mf-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--text-secondary);
}
.mf-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}
.mf-legend-dot.buy {
  background: rgba(47, 143, 91, 0.75);
}
.mf-legend-dot.sell {
  background: rgba(198, 90, 82, 0.75);
}

.mf-compare {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mf-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(154, 107, 70, 0.07);
}
.mf-compare-row:last-child {
  border-bottom: none;
}
.mf-compare-label {
  font-size: 11px;
  color: var(--text-secondary);
}
.mf-compare-val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mf-pace {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(154, 107, 70, 0.05);
  border: 1px solid rgba(154, 107, 70, 0.12);
  border-radius: 8px;
  padding: 9px 10px;
}
.mf-pace i {
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.mf-pace-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mf-pace-text b {
  color: var(--accent);
  font-weight: 700;
}

.projection-table-card .gains-table th:not(:first-child),
.projection-table-card .gains-table td:not(:first-child) {
  text-align: right;
}

/* Remove hover backgrounds on touch devices (no mouse pointer) */
@media (hover: none) {
  .card:hover,
  .folio-card:hover,
  .return-card:hover,
  .upload-card:hover,
  .family-user-card:hover,
  .dash-insight-card:hover,
  .cas-panel:hover,
  .cas-panel-row:hover,
  :root[data-theme="dark"] .cas-panel-row:hover,
  .composition-segment:hover,
  .folio-group-header-row:hover,
  .folio-compact-row:hover,
  .folio-details-card:hover,
  .folio-category-header:hover,
  .holdings-split-header:hover,
  .tax-holding-item:hover,
  .tp-holding-row:hover,
  .health-detail-row:hover,
  .cg-hero-cell:hover,
  .overlap-pair-row:hover,
  .flt-row:hover {
    background: unset;
    box-shadow: none;
  }
}

/* ============================================================
   GOAL TRACKING  (gl- prefix)
   ============================================================ */

/* ── Two-column layout: main content + right sidebar ── */
.gl-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.gl-main {
  min-width: 0;
}
.gl-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gl-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  padding: 16px 18px;
}
.gl-sidebar-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.gl-sidebar-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  margin-bottom: 10px;
}

/* Full-width footer row below the capacity/step-up/usage strip -- kept as
   its own line rather than nested in a stat tile, so it doesn't skew any
   one tile's height when a portfolio is tagged. */
.gl-portfolio-line {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.gl-cap-freed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 2px;
  padding: 10px 13px;
  background: var(--bg-card-hover);
  border-radius: 10px;
  gap: 12px;
}
.gl-cap-freed-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.gl-cap-freed-body {
  flex: 1;
  min-width: 0;
}
.gl-cap-freed-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.gl-cap-freed-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.gl-cap-freed-amt {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.gl-cap-freed-sub-right {
  font-size: 10.5px;
  color: var(--text-secondary);
  text-align: right;
}
.gl-cap-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.gl-cap-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.gl-cap-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-gradient);
  color: var(--primary-gradient-start);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.gl-cap-action-btn:hover {
  background: var(--primary-gradient-light);
  color: #fff;
}

/* ── Capacity/KPI row -- one instrument panel: capacity, step-up, usage ── */
.gl-cap-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.gl-cap-top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 0;
}
.gl-cap-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gl-cap-stats-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.gl-cap-divider {
  background: var(--border-light);
  width: 1px;
  min-height: 32px;
  align-self: stretch;
}
.gl-cap-top > .gl-cap-stat:first-child {
  padding-right: 24px;
}
.gl-cap-top > .gl-cap-stat:nth-child(2) {
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  padding-left: 24px;
  padding-right: 24px;
}
/* ── Step-up schedule chips (Option B) ── */
.gl-stepup-sched {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.gl-sched-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s;
  background: rgba(154, 107, 70, 0.08);
  color: var(--accent);
}
.gl-sched-chip:hover {
  filter: brightness(0.93);
}
.gl-sched-chip i {
  font-size: 9px;
}
.gl-sched-arr {
  color: var(--text-tertiary);
  font-size: 11px;
}
.gl-sched-add {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
}
.gl-sched-add:hover {
  color: var(--text-secondary);
}
/* ── Step-up override panel ── */
.gl-suo-wrap {
  grid-column: 2 / 4;
  grid-row: 2;
  border-left: 1px solid var(--border-light);
  padding: 0px;
}

.gl-suo-wrap--open {
  padding: 12px 0 8px 24px;
}

.gl-suo-panel {
  flex-direction: column;
  gap: 10px;
}
.gl-suo-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.gl-suo-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gl-suo-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gl-suo-sep {
  font-size: 13px;
  color: var(--text-tertiary);
  padding-bottom: 8px;
  flex-shrink: 0;
}
.gl-suo-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
  padding: 0 0 8px;
  align-self: flex-end;
}
.gl-suo-clear-btn:hover {
  color: var(--text-secondary);
}
.gl-suo-preview {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 0;
}
.gl-suo-preview strong {
  color: var(--text-primary);
}
.gl-suo-phases {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gl-suo-tl-bar {
  display: flex;
  align-items: center;
  height: 14px;
}
.gl-suo-tl-seg {
  flex: 1;
  height: 3px;
}
.gl-suo-tl-seg-1 {
  background: var(--accent);
  border-radius: 3px 0 0 3px;
  opacity: 0.6;
}
.gl-suo-tl-seg-2 {
  background: var(--success);
  border-radius: 0 3px 3px 0;
  opacity: 0.6;
}
.gl-suo-tl-knot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-medium);
  flex-shrink: 0;
}
.gl-suo-tl-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gl-suo-tl-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gl-suo-tl-lbl-1 {
  color: var(--accent);
}
.gl-suo-tl-lbl-2 {
  color: var(--success);
}
.gl-suo-tl-yr {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.gl-cap-usage-section {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  min-width: 0;
}
.gl-cap-usage-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}
.gl-cap-usage-allocated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--success);
}
.gl-cap-usage-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.gl-cap-usage-available {
  color: var(--text-secondary);
}
.gl-cap-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gl-cap-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.capacity-input {
  padding-left: 5px;
}

.gl-cap-amount-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.gl-cap-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gl-cap-amount--success {
  color: var(--success);
}
.gl-cap-amount-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 0;
}
.gl-sched-chip--typical {
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.gl-sched-chip--typical:hover {
  filter: none;
}
.gl-cap-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Shared bordered pill-box input look (mirrors .proj-ctrl-input-wrap),
   reused across every numeric/percent input in this feature: capacity/
   step-up edit, goal amount/CAGR/inflation, folio %, Customize-manually
   SIP/corpus/assumption fields. */
.gl-input-wrap {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.gl-input-wrap--full {
  display: flex;
  width: 100%;
}
.gl-input-wrap--sm {
  height: 32px;
}
.gl-input-wrap--sip {
  width: 150px;
}
.gl-input-prefix,
.gl-input-affix {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(154, 107, 70, 0.07);
  flex-shrink: 0;
}
.gl-input-prefix {
  border-right: 1px solid var(--border-light);
}
.gl-input-affix {
  border-left: 1px solid var(--border-light);
}
.gl-input-wrap input {
  all: unset;
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  padding: 0 10px;
  cursor: text;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  width: 136px;
}
.gl-input-wrap input::-webkit-outer-spin-button,
.gl-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.gl-input-wrap input::placeholder {
  font-weight: 400;
  color: var(--text-tertiary);
  opacity: 0.7;
}
.gl-input-wrap input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.gl-cap-nudge {
  font-size: 11.5px;
  color: var(--warning-dark);
  background: var(--warning-light);
  border-radius: 7px;
  padding: 7px 10px;
  line-height: 1.45;
}
.gl-cap-tappable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  padding: 5px;
  width: 150px;
}
.gl-cap-tappable:hover {
  background: var(--border-light);
  border-bottom: 1px solid var(--accent);
}
.gl-cap-edit-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

.gl-cap-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.gl-cap-usage-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
}
.gl-cap-usage-bar {
  height: 8px;
  background: var(--border-medium);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.gl-cap-usage-fill {
  height: 100%;
  background: var(--success);
  border-radius: 7px;
  transition: width 0.4s ease;
}
/* Waterfall explainer (top of sidebar) */
.gl-wf-explainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gl-wf-explain-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gl-wf-explain-step i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Goal list (accordion) ── */
/* One shared card holding the header row + every goal row, so it reads as
   an actual table -- previously each goal was its own separately-bordered,
   rounded, gapped card floating below a header with no container of its
   own, which read as two disconnected pieces of UI rather than one table. */
/* ── Contribution journey table ── */
.gl-contrib-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 16px;
}
.gl-contrib-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-card-hover);
}
.gl-seg-ctrl {
  display: flex;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.gl-seg-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--text-tertiary);
}
.gl-seg-btn--on {
  background: var(--bg-card);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.gl-contrib-tbl-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 460px;
  -webkit-overflow-scrolling: touch;
}
.gl-contrib-tbl {
  width: 100%;
  border-collapse: collapse;
}
.gl-contrib-th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
  border-bottom: 1px solid var(--border-medium);
  background: var(--bg-card);
  white-space: nowrap;
}
.gl-contrib-th--yr {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 3;
}
.gl-contrib-th--r {
  text-align: right;
}
.gl-contrib-th--total {
  color: var(--accent);
}
.gl-contrib-th--corpus {
  color: var(--success);
}
.gl-contrib-td--corpus {
  font-weight: 700;
  font-size: 13px;
  color: var(--success);
}
.gl-contrib-td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  vertical-align: middle;
}
.gl-contrib-td--yr {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
}
.gl-contrib-td--done {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 11px;
}
.gl-contrib-td--wf-trickle {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 13px;
}
.gl-contrib-td--last {
  color: var(--text-secondary);
}
.gl-contrib-td--total {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.gl-goal-journey-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gl-goal-journey-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.gl-goal-journey-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-left: 3px;
}

/* ── Custom goal-journey dropdown (mirrors .gl-cat-select) ────── */
.gl-goal-journey-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  max-width: 240px;
  transition: border-color 0.15s;
}
.gl-goal-journey-select:hover,
.gl-goal-journey-select.open {
  border-color: var(--accent);
}
.gl-goal-journey-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gl-goal-journey-select-label--placeholder {
  color: var(--text-tertiary);
  font-weight: 500;
}
.gl-goal-journey-select .gl-cat-chevron {
  right: 10px;
  color: var(--accent);
}
.gl-goal-journey-options {
  display: none;
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .gl-goal-journey-options {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.gl-goal-journey-select.open .gl-goal-journey-options {
  display: block;
}
.gl-goal-journey-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.gl-goal-journey-opt:hover {
  background: var(--bg-light);
}
.gl-goal-journey-opt.gl-goal-journey-opt-selected {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  font-weight: 700;
}
:root[data-theme="dark"] .gl-goal-journey-opt.gl-goal-journey-opt-selected {
  background: rgba(200, 150, 102, 0.12);
}
.gl-goal-journey-empty {
  padding: 34px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.gl-contrib-td--growth {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--success);
  margin-top: 1px;
}
.gl-contrib-yr {
  display: flex;
  align-items: center;
  gap: 7px;
}
.gl-contrib-yr-num {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.gl-contrib-yr-cal {
  display: block;
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.gl-contrib-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  white-space: nowrap;
}
.gl-contrib-badge--free {
  background: rgba(154, 107, 70, 0.08);
  color: var(--accent);
  border: 1px solid var(--border-primary);
}
.gl-contrib-delta {
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.gl-contrib-delta--up {
  color: var(--success);
}
.gl-contrib-delta--down {
  color: var(--danger);
}
.gl-contrib-phase-row td {
  padding: 0;
  border-bottom: none;
}
.gl-contrib-phase-banner {
  background: rgba(47, 143, 91, 0.05);
  border-top: 1px dashed rgba(47, 143, 91, 0.25);
  border-bottom: 1px dashed rgba(47, 143, 91, 0.25);
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success);
}
.gl-contrib-goal-banner {
  background: rgba(154, 107, 70, 0.05);
  border-top: 1px dashed rgba(154, 107, 70, 0.3);
  border-bottom: 1px dashed rgba(154, 107, 70, 0.3);
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.gl-contrib-grand td {
  background: rgba(154, 107, 70, 0.05) !important;
  border-top: 1px solid var(--border-medium);
  border-bottom: none;
}
.gl-contrib-grand-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.gl-contrib-grand-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.gl-contrib-td--grand-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.gl-contrib-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 18px;
  font-size: 11px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-light);
  background: var(--bg-offwhite);
}
.gl-contrib-foot-item--phase {
  color: var(--success);
}
.gl-contrib-foot-item--goal {
  color: var(--accent);
}

.gl-goal-list {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
}
.gl-goal-row {
  padding: 14px 10px 12px 18px;
}
.gl-goal-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.gl-goal-row:not(:last-child)[data-expanded="true"] {
  border-bottom: 2px solid var(--border-primary);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 4px -4px var(--shadow-lg);
  margin-bottom: 5px;
}

/* ── Goal table: header row + per-goal grid rows ── */
.gl-ghead {
  display: grid;
  grid-template-columns: 28px 1.8fr 1fr 1.1fr 0.85fr 0.85fr 0.9fr 40px;
  gap: 12px;
  /* +3px left to match .gl-goal-row's 3px accent border-left, which ghead
     itself doesn't have, so the columns line up with the rows below. */
  padding: 14px 18px 10px 21px;
  border-bottom: 1px solid var(--border-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.gl-grow-main {
  display: grid;
  grid-template-columns: 28px 1.8fr 1fr 1.1fr 0.85fr 0.85fr 0.9fr 40px;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.gl-priority-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gl-gname-cell {
  min-width: 0;
}
.gl-gname {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-gtag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gl-gcol {
  min-width: 0;
}
.gl-gval {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-gval--warn {
  color: var(--danger);
}
.gl-gval-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-gdate {
  font-size: 12.5px;
  white-space: nowrap;
}
.gl-gdate-sub {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Status pill (3-tier) */
.gl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.gl-status-pill--solo {
  background: var(--success-light);
  color: var(--success);
}
.gl-status-pill--unreachable {
  background: rgba(198, 90, 82, 0.1);
  color: var(--danger);
}

/* Kebab menu -- replaces the old always-visible edit/delete icon buttons */
.gl-kebab-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.gl-kebab {
  width: 26px;
  height: 26px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.gl-kebab:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

.gl-kebab-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  min-width: 170px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gl-kebab-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.gl-kebab-menu button:hover {
  background: var(--border-light);
}
.gl-kebab-menu button i {
  width: 14px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.gl-kebab-menu-danger {
  color: var(--danger) !important;
}
.gl-kebab-menu-danger i {
  color: var(--danger) !important;
}

/* Expanded detail body -- flat, divider-separated columns (no per-column
   tile background/border, so the row's own card border stays the one real
   boundary instead of stacking boxes inside boxes). */
.gl-goal-row-body[data-expanded="false"] {
  display: none;
}

.gl-goal-row-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.gl-goal-row-body-grid {
  display: flex;
}
.gl-goal-detail-col {
  flex: 1;
  padding: 0 18px;
  border-left: 1px solid var(--border-light);
  min-width: 0;
}
.gl-goal-detail-col:first-child {
  padding-left: 0;
  border-left: none;
}
.gl-goal-detail-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.gl-goal-stale-warning {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--warning-dark);
  margin-top: 4px;
}
.gl-goal-detail-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.gl-goal-detail-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.gl-goal-detail-note {
  font-size: 10.5px;
  color: var(--accent);
  margin-top: 4px;
}

/* Funding timeline mini-chart */
.gl-timeline-track {
  position: relative;
  height: 4px;
  background: var(--border-medium);
  border-radius: 2px;
  display: flex;
  margin: 16px 0 6px;
}
.gl-timeline-seg {
  height: 100%;
  background: var(--success);
}
.gl-timeline-seg--dashed {
  background: transparent;
  border-top: 2px dashed var(--text-tertiary);
  height: 0;
  align-self: center;
}
.gl-timeline-dot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg-light);
  transform: translate(-50%, -50%);
}
.gl-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.gl-timeline-sub {
  color: var(--text-tertiary);
}

/* Status narrative */
.gl-status-narrative {
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 0;
}
.gl-status-narrative--ok {
  color: var(--success);
}
.gl-status-narrative--warn {
  color: var(--warning-dark);
}
.gl-status-narrative--danger {
  color: var(--danger);
}

/* Linked investments list */
.gl-linked-inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.gl-linked-inv-row:last-of-type {
  border-bottom: none;
}
.gl-linked-inv-info {
  min-width: 0;
}
.gl-linked-inv-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gl-linked-inv-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.gl-linked-inv-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gl-goal-linked-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.gl-linked-toggle-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 10px;
  background: none;
  border: 1px dashed var(--border-medium);
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.gl-linked-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Fix this goal panel */
.gl-fix-teaser {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(198, 90, 82, 0.08);
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.gl-fix-teaser i {
  color: var(--danger);
  font-size: 12px;
}
.gl-fix-teaser strong {
  font-weight: 700;
}
.gl-fix-teaser-cta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.gl-fix-panel {
  margin-top: 6px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: rgba(198, 90, 82, 0.05);
  border: 1px solid rgba(198, 90, 82, 0.18);
  border-radius: 12px;
}
.gl-fix-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.gl-fix-head i {
  color: var(--danger);
  margin-top: 2px;
}
.gl-fix-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}
.gl-fix-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.gl-fix-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gl-fix-options-grid--expanded {
  grid-template-columns: repeat(4, 1fr);
}
.gl-fix-option-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.gl-fix-option-card:hover {
  border-color: var(--accent);
}
.gl-fix-option-card--selected {
  border-color: var(--accent);
  background: rgba(154, 107, 70, 0.06);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.gl-fix-option-card--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.gl-fix-option-card--disabled:hover {
  border-color: var(--border-medium);
}
.gl-fix-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.gl-fix-card-head i {
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.gl-fix-option-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.gl-fix-option-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.gl-fix-option-result {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  padding-top: 8px;
}
.gl-fix-impact-col {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
}
.gl-fix-impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.gl-fix-impact-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.gl-fix-impact-stats-left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.gl-fix-impact-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.gl-fix-impact-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.gl-fix-impact-ok {
  color: var(--success);
}
.gl-fix-impact-warn {
  color: var(--danger);
}
.gl-fix-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.gl-fix-apply-btn {
  padding: 8px 16px;
}

.gl-folios-linked {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Empty state ── */
.gl-empty {
  text-align: center;
  padding: 64px 24px 80px;
  max-width: 480px;
  margin: 0 auto;
}
.gl-empty-icon {
  font-size: 40px;
  color: var(--border-medium);
  margin-bottom: 18px;
}
.gl-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.gl-empty-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 26px;
}
.gl-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gl-empty-btn:hover {
  opacity: 0.88;
}

.gl-io-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-gradient);
  color: var(--primary-gradient-start);
  border-color: rgba(154, 107, 70, 0.22);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex: auto;
  text-align: center;
  justify-content: center;
}

.gl-io-btn:hover {
  background: var(--primary-gradient-light);
  color: #fff;
}

/* ── Annual check-in card ── */
.gl-checkin {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(201, 135, 45, 0.3);
  border-left: 3px solid var(--warning);
  border-radius: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gl-checkin-icon {
  color: var(--warning);
  font-size: 16px;
  padding-top: 2px;
  flex-shrink: 0;
}
.gl-checkin-body {
  flex: 1;
  min-width: 200px;
}
.gl-checkin-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.gl-checkin-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gl-checkin-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gl-checkin-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gl-checkin-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.gl-checkin-suo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gl-checkin-arr {
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.gl-checkin-suo-elapsed {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--bg-card-hover);
  border-radius: 7px;
  align-self: flex-end;
}
.gl-checkin-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.gl-checkin-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-medium);
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.gl-checkin-btn--confirm {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.gl-checkin-btn--confirm:hover {
  background: #7a5538;
  border-color: #7a5538;
}
.gl-checkin-btn--skip {
  background: transparent;
  color: var(--text-secondary);
}
.gl-checkin-btn--skip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* ── Shared modal overlay ── */
.gl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.gl-modal-overlay.hidden {
  display: none;
}

/* ── Goal modal ── */
.gl-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}
.gl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.gl-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.gl-modal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gradient);
  color: var(--primary-gradient-start);
  border-color: rgba(154, 107, 70, 0.22);
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.gl-modal-close:hover {
  background: var(--primary-gradient-light);
  color: #fff;
}
.gl-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.gl-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.gl-modal-footer .gl-btn-danger {
  margin-right: auto;
}

/* ── Form elements ── */
.gl-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gl-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.gl-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.gl-form-label span {
  font-weight: 400;
  color: var(--text-tertiary);
}
.gl-form-input,
.gl-form-select {
  padding: 9px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-folio);
  outline: none;
  transition: border-color 0.15s;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.gl-form-input:focus,
.gl-form-select:focus {
  border-color: var(--accent);
}

.gl-form-select {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239a6b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
:root[data-theme="dark"] .gl-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c89666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* ── Custom category dropdown ─────────────────────────────── */
.gl-cat-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-folio);
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.gl-cat-select:hover,
.gl-cat-select.open {
  border-color: var(--accent);
}
.gl-cat-label {
  flex: 1;
  min-width: 0;
}
.gl-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.gl-cat-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--accent);
  transition: transform 0.15s;
  pointer-events: none;
}
.gl-cat-select.open .gl-cat-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.gl-cat-options {
  display: none;
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .gl-cat-options {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.gl-cat-select.open .gl-cat-options {
  display: block;
}
.gl-cat-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.gl-cat-opt:hover {
  background: var(--bg-light);
}
.gl-cat-opt.gl-cat-opt-selected {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  font-weight: 600;
}
:root[data-theme="dark"] .gl-cat-opt.gl-cat-opt-selected {
  background: rgba(200, 150, 102, 0.12);
}
.gl-cat-opt.gl-cat-opt-selected:hover {
  background: rgba(154, 107, 70, 0.15);
}
:root[data-theme="dark"] .gl-cat-opt.gl-cat-opt-selected:hover {
  background: rgba(200, 150, 102, 0.18);
}

/* ── Month picker: two custom dropdowns (Month, Year) ─────────── */
.gl-monthyear-picker {
  display: flex;
  gap: 8px;
}
.gl-my-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-folio);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.gl-my-dropdown--year {
  flex: 0 0 110px;
}
.gl-my-dropdown:hover,
.gl-my-dropdown.open {
  border-color: var(--accent);
}
.gl-my-label {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.gl-my-dropdown .gl-cat-chevron {
  right: 10px;
}
.gl-my-options {
  display: none;
  position: fixed;
  background: var(--bg-folio);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  overflow-y: auto;
  max-height: 220px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .gl-my-options {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.gl-my-dropdown.open .gl-my-options {
  display: block;
}
.gl-my-opt {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
  font-variant-numeric: tabular-nums;
}
.gl-my-opt:hover {
  background: var(--bg-light);
}
.gl-my-opt.gl-my-opt-selected {
  background: rgba(154, 107, 70, 0.1);
  color: var(--accent);
  font-weight: 600;
}
:root[data-theme="dark"] .gl-my-opt.gl-my-opt-selected {
  background: rgba(200, 150, 102, 0.12);
}
.gl-my-opt.gl-my-opt-disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

.gl-form-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.gl-form-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border-light);
  user-select: none;
}
.gl-form-section-label--static {
  cursor: default;
}
.gl-form-section-label span {
  font-weight: 400;
  text-transform: none;
  color: var(--text-tertiary);
}
.gl-assumptions-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Buttons ── */
.gl-btn-primary {
  padding: 9px 20px;
  background: var(--primary-gradient-light);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gl-btn-primary:hover {
  background: var(--primary-gradient-end);
  color: #fff;
}
.gl-btn-secondary {
  padding: 9px 16px;
  background: var(--bg-gradient);
  color: var(--primary-gradient-start);
  border-color: rgba(154, 107, 70, 0.22);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.gl-btn-secondary:hover {
  background: var(--primary-gradient-light);
  color: #fff;
}

/* ── Folio link panel ── */
.gl-link-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}
.gl-link-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.gl-link-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.gl-link-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.gl-link-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.gl-link-empty {
  text-align: center;
  padding: 32px 0;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.6;
}
.gl-link-stale-section {
  background: var(--bg-folio);
  border: 1px solid rgba(201, 135, 45, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.gl-link-stale-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warning-dark);
}
.gl-link-stale-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 3px 0 10px;
  line-height: 1.5;
}
.gl-link-stale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(201, 135, 45, 0.25);
  flex-wrap: wrap;
}
.gl-link-stale-row:first-of-type {
  border-top: none;
}
.gl-link-stale-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.gl-link-stale-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gl-link-stale-btn {
  padding: 6px 12px;
  font-size: 11.5px;
  white-space: nowrap;
}
.gl-link-fund-group {
  margin-bottom: 18px;
}
.gl-link-fund-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.gl-link-folio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.gl-link-folio-row:last-child {
  border-bottom: none;
}
.gl-link-folio-row {
  transition: background 0.1s;
  border-radius: 6px;
  margin: 0 -6px;
  padding: 8px 6px;
}
.gl-link-folio-row:hover {
  background: var(--bg-light);
}
.gl-link-folio-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: none;
  max-width: 10%;
}
.gl-link-body {
  scrollbar-gutter: stable;
}
.gl-link-select-all {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
  transition: opacity 0.1s;
}
.gl-link-select-all:hover {
  opacity: 1;
  text-decoration: underline;
}
.gl-link-fund-name-text {
  flex: 1;
  min-width: 0;
}
.gl-link-folio-info {
  flex: 1;
  min-width: 0;
}
.gl-link-folio-no {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gl-link-folio-val {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.gl-link-folio-pct {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* ── Waterfall projection chart (pure CSS, stacked vertical bars) ── */
.gl-wf-tabs {
  display: flex;
  gap: 2px;
  margin: 12px 0;
  padding: 3px;
  background: var(--bg-offwhite);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.gl-wf-tab {
  flex: 1;
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.gl-wf-tab--active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.glwc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.glwc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
}
.glwc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.glwc-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 16px;
  height: 240px;
  padding-top: 8px;
}
.glwc-bucket {
  display: grid;
  grid-template-rows: 1fr 40px;
  justify-items: center;
  flex: 1;
  height: 100%;
}
.glwc-bar {
  width: 100%;
  max-width: 64px;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: var(--border-primary);
  align-self: stretch;
  justify-self: center;
}
.glwc-seg {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}
.glwc-axis-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
  padding-top: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.glwc-axis-sub {
  color: var(--text-tertiary);
  font-size: 10px;
}
.gl-wf-narrative {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 9px 10px;
  border-radius: 8px;
  margin-top: 10px;
}
.gl-wf-narrative--ok {
  background: var(--success-light);
  color: var(--success);
}
.gl-wf-narrative--warn {
  background: rgba(198, 90, 82, 0.08);
  color: var(--danger);
}

/* ── Customize-manually modal ── */
.gl-modal--wide {
  max-width: 780px;
}
.gl-fix-modal-sub {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 22px 0;
  flex-shrink: 0;
}
.gl-fix-modal-body {
  padding: 14px 22px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.gl-link-bulk-row {
  display: flex;
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}
.gl-modal--sm {
  max-width: 420px;
}
.gl-cz-intro {
  font-size: 13px;
  color: var(--text-secondary);
}
.gl-cz-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--danger);
  background: rgba(198, 90, 82, 0.08);
  border-radius: 8px;
  padding: 9px 12px;
}
.gl-cz-section {
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.gl-cz-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.gl-cz-optional {
  font-weight: 400;
  color: var(--text-tertiary);
}
.gl-cz-section-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.gl-cz-available {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.gl-cz-available--over {
  color: var(--danger);
}
.gl-cz-slider-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.5fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.gl-cz-slider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gl-cz-slider-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.gl-cz-slider-amt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  justify-content: flex-end;
}
.gl-cz-slider-pct {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
}
.gl-cz-slider {
  grid-column: 1 / -1;
  accent-color: var(--accent);
}
.gl-cz-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border-light);
}
.gl-cz-timeline-row,
.gl-cz-corpus-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.6fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.gl-cz-timeline-name,
.gl-cz-corpus-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gl-cz-timeline-current,
.gl-cz-corpus-current {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.gl-cz-timeline-delta,
.gl-cz-corpus-delta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--success);
  text-align: right;
}
.gl-cz-assume-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  align-items: end;
  gap: 10px;
  padding: 8px 0;
}
.gl-cz-assume-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gl-cz-assume-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gl-cz-assume-field label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.gl-cz-impact-panel {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px 14px;
}
.gl-cz-impact-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.gl-cz-impact-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 0;
}
.gl-cz-impact-ok {
  color: var(--success);
  font-weight: 700;
}
.gl-cz-impact-warn {
  color: var(--danger);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   MOBILE  (≤767px)
   ═══════════════════════════════════════════════════════ */
/* Tablet: the fixed 340px sidebar column and single-line goal-row header
   only work with real desktop width -- collapse to a single column and let
   the header wrap here too, well above the phone-specific breakpoint below,
   which layers on tighter font/grid squeezing for actual phone widths. */
@media (max-width: 1024px) {
  /* Fix panel adjustments */
  .gl-fix-impact-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gl-fix-impact-stats-right {
    border-top: 1px solid var(--border-medium);
    padding-top: 14px;
  }
  .gl-fix-footer {
    justify-content: space-around;
  }
  .gl-fix-footer button {
    width: 40%;
  }

  /* Stack sidebar below main — everything else stays desktop-identical */
  .gl-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gl-main > *:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .gl-input-wrap input {
    width: unset;
  }
  .gl-fix-footer button {
    width: 100%;
  }

  /* Two-column layout → stack */
  .gl-layout {
    grid-template-columns: 1fr;
  }

  /* Capacity card: Monthly + Step-up side by side, suo-wrap before usage */
  .gl-cap-card {
    padding: 14px;
  }
  .gl-cap-top {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .gl-cap-top > .gl-cap-stat:first-child {
    padding-right: 12px;
    padding-bottom: 12px;
    grid-column: 1;
    grid-row: 1;
  }

  .gl-sched-chip--typical {
    white-space: nowrap;
    min-height: 19px;
  }

  .gl-cap-top > .gl-cap-stat:nth-child(2) {
    border-left: 1px solid var(--border-light);
    border-right: none;
    padding-left: 16px;
    padding-right: 0;
    padding-bottom: 12px;
    border-top: none;
    grid-column: 2;
    grid-row: 1;
  }
  .gl-cap-freed-right {
    display: none;
  }
  .gl-sched-chip-1,
  .gl-sched-arr {
    display: none;
  }
  /* suo-wrap in row 2 — no border when collapsed, border only when open */
  .gl-suo-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: none;
    padding-left: 0;
  }
  .gl-suo-wrap.gl-suo-wrap--open {
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* usage in row 3 */
  .gl-cap-usage-section {
    grid-column: 1 / -1;
    grid-row: 3;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
  }
  .gl-cap-amount {
    font-size: 20px;
  }

  /* Goal list: compact mobile card */
  .gl-ghead {
    display: none;
  }
  .gl-goal-row {
    padding: 16px 10px;
  }
  .gl-gname {
    font-size: 14px;
  }
  /* 4-col grid: badge | name | status-pill | kebab — no padding-right needed */
  /* Flex row: badge | name(flex:1) | pill | kebab — pill/kebab guaranteed right edge */
  .gl-grow-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
  }
  .gl-grow-main > .gl-priority-badge {
    flex-shrink: 0;
    order: 1;
    margin-top: 2px;
    margin-right: 8px;
  }
  .gl-gname-cell {
    flex: 1;
    min-width: 0;
    order: 2;
  }
  .gl-grow-main > .gl-status-pill {
    flex-shrink: 0;
    order: 3;
    align-self: center;
    margin-left: 8px;
  }
  .gl-kebab-wrap {
    flex-shrink: 0;
    order: 4;
    position: relative;
    margin-left: 6px;
    align-self: flex-start;
  }
  /* Force a hard line break after the badge/name/pill/kebab row. Without
     this, flex-wrap decides line breaks using each item's flex-basis
     (name-cell's flex:1 has a base size of 0), so the SIP column below can
     get pulled onto row 1 alongside the fixed-width items, squeezing the
     name cell down to almost nothing. A zero-height 100%-basis item forces
     the next item (order 5+) onto its own line regardless of pixel widths. */
  .gl-grow-main::after {
    content: "";
    flex-basis: 100%;
    order: 4;
    height: 0;
  }
  /* hide target-value and projected-value cols by default */
  .gl-grow-main > .gl-gcol:nth-child(3),
  .gl-grow-main > .gl-gcol:nth-child(4) {
    display: none;
  }
  /* SIP: left half of row 2 */
  .gl-grow-main > .gl-gcol:nth-child(5) {
    flex: 0 0 50%;
    min-width: 0;
    order: 5;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    margin-top: 10px;
  }
  .gl-grow-main > .gl-gcol:nth-child(5)::before {
    content: "Monthly SIP";
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }
  /* Date: right half of row 2 */
  .gl-grow-main > .gl-gcol:nth-child(6) {
    flex: 0 0 50%;
    min-width: 0;
    order: 6;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    margin-top: 10px;
    text-align: right;
  }
  .gl-grow-main > .gl-gcol:nth-child(6)::before {
    content: "Target Date";
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }
  /* When expanded: reveal target + projected as row 3 */
  .gl-goal-row[data-expanded="true"] .gl-grow-main > .gl-gcol:nth-child(3) {
    display: block;
    flex: 0 0 50%;
    min-width: 0;
    order: 7;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    margin-top: 10px;
  }
  .gl-goal-row[data-expanded="true"]
    .gl-grow-main
    > .gl-gcol:nth-child(3)::before {
    content: "Target Amount";
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }
  .gl-goal-row[data-expanded="true"] .gl-grow-main > .gl-gcol:nth-child(4) {
    display: block;
    flex: 0 0 50%;
    min-width: 0;
    order: 8;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    margin-top: 10px;
    text-align: right;
  }
  .gl-goal-row[data-expanded="true"]
    .gl-grow-main
    > .gl-gcol:nth-child(4)::before {
    content: "Projected Value";
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }
  /* Expanded detail body: stack timeline + status each full-width */
  .gl-goal-row-body-grid {
    flex-direction: column;
    gap: 14px;
  }
  .gl-goal-detail-col {
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
  }
  .gl-goal-detail-col:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* Goal journey card: eyebrow on its own row, dropdown + toggle share row 2 */
  .gl-goal-journey-hd {
    flex-direction: column;
    align-items: stretch;
  }
  .gl-goal-journey-row2 {
    width: 100%;
  }

  /* Contribution journey: only Year / Annual / Projected Corpus on mobile */
  .gl-contrib-th--r:not(.gl-contrib-th--total):not(.gl-contrib-th--corpus) {
    display: none;
  }
  .gl-contrib-td:not(.gl-contrib-td--yr):not(.gl-contrib-td--total):not(
      .gl-contrib-td--corpus
    ):not(.gl-contrib-td--grand-amt) {
    display: none;
  }
  .gl-contrib-td--grand-amt:not(.gl-contrib-td--total):not(
      .gl-contrib-td--done
    ) {
    display: none;
  }
  /* Year column: shrink to minimum content width */
  .gl-contrib-th--yr,
  .gl-contrib-td--yr {
    width: 1%;
  }

  .gl-goal-row:not(:last-child) {
    border-bottom: 2px solid var(--border-primary);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 4px -4px var(--shadow-lg);
    margin-bottom: 5px;
  }

  /* Fix panel */
  .gl-fix-options-grid,
  .gl-fix-options-grid--expanded {
    grid-template-columns: 1fr;
  }
  .gl-fix-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Waterfall chart */
  .glwc-chart {
    gap: 10px;
  }

  /* Customize modal rows: stack */
  .gl-cz-slider-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gl-cz-slider-amt {
    justify-content: flex-start;
  }
  .gl-cz-slider-pct {
    text-align: left;
  }
  .gl-cz-timeline-row,
  .gl-cz-corpus-row,
  .gl-cz-assume-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .gl-cz-timeline-delta,
  .gl-cz-corpus-delta {
    text-align: left;
  }
  .gl-modal--wide {
    max-width: 100%;
  }

  /* Form row: stack on mobile */
  .gl-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Modal → bottom sheet */
  .gl-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .gl-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .gl-modal--open {
    transform: translateY(0);
  }
  .gl-link-panel {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .gl-link-panel--open {
    transform: translateY(0);
  }
  .gl-modal::before,
  .gl-link-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  /* Card actions: wrap naturally */
  .gl-folios-linked {
    width: 100%;
  }

  /* Folio management modal → bottom sheet, same treatment as .gl-modal */
  .folio-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .folio-management-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .folio-management-modal--open {
    transform: translateY(0);
  }
  .folio-management-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  /* Fund details modal → bottom sheet, same treatment as .gl-modal */
  #fundDetailsModal {
    align-items: flex-end;
    padding: 0;
  }
  #fundDetailsModal .fund-details-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #fundDetailsModal .fund-details-modal--open {
    transform: translateY(0);
  }
  #fundDetailsModal .fund-details-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  /* Overlap / common-holding modals → bottom sheet */
  #overlapDetailModal,
  #commonHoldingDetailModal,
  #allOverlapPairsModal,
  #allCommonHoldingsModal {
    align-items: flex-end;
    padding: 0;
  }
  #overlapDetailModal .overlap-detail-modal,
  #commonHoldingDetailModal .overlap-detail-modal,
  #allOverlapPairsModal .overlap-detail-modal,
  #allCommonHoldingsModal .overlap-detail-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #overlapDetailModal .overlap-detail-modal--open,
  #commonHoldingDetailModal .overlap-detail-modal--open,
  #allOverlapPairsModal .overlap-detail-modal--open,
  #allCommonHoldingsModal .overlap-detail-modal--open {
    transform: translateY(0);
  }
  #overlapDetailModal .overlap-detail-modal::before,
  #commonHoldingDetailModal .overlap-detail-modal::before,
  #allOverlapPairsModal .overlap-detail-modal::before,
  #allCommonHoldingsModal .overlap-detail-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  /* Portfolio / family holdings + Fund Holdings / Fund Transactions
     modals → bottom sheet (all four share .holdings-list-modal) */
  #portfolioHoldingsModal,
  #familyHoldingsModal,
  #fundHoldingsModal,
  #fundTransactionModal {
    align-items: flex-end;
    padding: 0;
  }
  #portfolioHoldingsModal .holdings-list-modal,
  #familyHoldingsModal .holdings-list-modal,
  #fundHoldingsModal .holdings-list-modal,
  #fundTransactionModal .holdings-list-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #portfolioHoldingsModal .holdings-list-modal--open,
  #familyHoldingsModal .holdings-list-modal--open,
  #fundHoldingsModal .holdings-list-modal--open,
  #fundTransactionModal .holdings-list-modal--open {
    transform: translateY(0);
  }
  #portfolioHoldingsModal .holdings-list-modal::before,
  #familyHoldingsModal .holdings-list-modal::before,
  #fundHoldingsModal .holdings-list-modal::before,
  #fundTransactionModal .holdings-list-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
}