/* ==========================================================================
   Model Profile — Header, Card Grid Layout & Components
   v2-aligned: CSS variables, responsive grid, dark/light theme safe
   ========================================================================== */

/* ==========================================================================
   MODEL PROFILE HEADER
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.mp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}

.mp-breadcrumb__link {
  color: var(--v2-primary, var(--accent, #6366F1));
  text-decoration: none;
  font-weight: 500;
}

.mp-breadcrumb__link:hover {
  text-decoration: underline;
}

.mp-breadcrumb__sep {
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
  font-size: 9px;
}

.mp-breadcrumb__current {
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  font-weight: 500;
}

/* ---------- Title Row ---------- */
.mp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mp-title-row__left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
  margin: 0;
  line-height: 1.2;
}

.mp-title-row__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- Compare + Allocation Row ---------- */
.mp-compare-alloc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 10px;
}

/* Compare bar */
.mp-compare-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.mp-compare-bar__label {
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  font-weight: 500;
}

.mp-compare-bar__input {
  width: 90px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--v2-border-color, var(--border, #e5e7eb));
  border-radius: var(--v2-radius-sm, 6px);
  background: var(--v2-surface, var(--surface, #fff));
  color: var(--v2-text-primary, var(--text-primary, #111827));
  outline: none;
  transition: border-color 0.15s;
}

.mp-compare-bar__input:focus {
  border-color: var(--v2-primary, var(--accent, #6366F1));
}

.mp-compare-bar__vs {
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
  font-size: 12px;
  font-style: italic;
}

.mp-compare-bar__benchmark {
  color: var(--v2-primary, var(--accent, #6366F1));
  font-weight: 600;
  font-size: 13px;
}

/* Allocation strip */
.mp-alloc-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mp-alloc-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
}

.mp-alloc-strip__label {
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
}

.mp-alloc-strip__value {
  color: var(--v2-text-primary, var(--text-primary, #111827));
  font-weight: 700;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 767px) {
  .mp-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mp-compare-alloc-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mp-title { font-size: 20px; }
}

/* ==========================================================================
   MODEL OVERVIEW — CARD GRID
   ========================================================================== */

/* ---------- Page Container ---------- */
.v2-model-overview {
  padding: 10px 12px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------- Top Row Header ---------- */
.v2-mo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.v2-mo-topbar__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
  letter-spacing: 0.01em;
}

.v2-mo-topbar__actions {
  display: flex;
  gap: 6px;
}

.v2-mo-topbar__actions .v2-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  background: transparent;
  border: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.08)));
  border-radius: var(--v2-radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.v2-mo-topbar__actions .v2-btn-icon:hover {
  background: var(--v2-surface-hover, rgba(0,0,0,.04));
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

/* ---------- Responsive Card Grid ---------- */
.v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .v2-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .v2-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Card Base ---------- */
.v2-card {
  background: var(--v2-surface, var(--surface, #fff));
  border: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.08)));
  border-radius: var(--v2-radius-lg, 12px);
  box-shadow: var(--v2-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.v2-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.06)));
}

.v2-card__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  margin: 0;
}

.v2-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
  transition: background 0.15s, color 0.15s;
}

.v2-card__action:hover {
  background: var(--v2-surface-hover, rgba(0,0,0,.04));
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

.v2-card__action svg {
  width: 12px;
  height: 12px;
}

.v2-card__body {
  padding: 10px 12px 12px;
  flex: 1;
}

/* ---------- Performance Card ---------- */
.v2-perf-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.v2-perf-stat__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.v2-perf-stat__label {
  font-size: 10px;
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
  margin-top: 1px;
}

.v2-chart {
  width: 100%;
  min-height: 140px;
}

/* ---------- Risk Profile Tiles ---------- */
.v2-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.v2-risk-tile {
  background: var(--v2-surface-muted, var(--surface-muted, rgba(0,0,0,.025)));
  border-radius: var(--v2-radius-md, 8px);
  padding: 10px 12px;
}

.v2-risk-tile.is-wide {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
}

.v2-risk-tile.is-wide .v2-risk-tile__block {
  flex: 1;
}

.v2-risk-tile__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
  margin-bottom: 4px;
}

.v2-risk-tile__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
  line-height: 1.2;
}

.v2-risk-tile__note {
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}

/* ---------- Asset Allocation ---------- */
.v2-alloc-body {
  display: flex;
  gap: 14px;
  align-items: center;
}

.v2-alloc-chart-wrap {
  flex: 0 0 120px;
}

.v2-alloc-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.v2-alloc-legend__row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.06)));
  font-size: 12px;
}

.v2-alloc-legend__row:last-child {
  border-bottom: none;
}

.v2-alloc-legend__name {
  color: var(--v2-text-primary, var(--text-primary, #111827));
  font-weight: 500;
}

.v2-alloc-legend__pct {
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

@media (max-width: 767px) {
  .v2-alloc-body { flex-direction: column; }
  .v2-alloc-chart-wrap { flex: none; align-self: center; }
}

/* ---------- Key Fundamentals ---------- */
.v2-fund-section {
  margin-bottom: 12px;
}

.v2-fund-section:last-child {
  margin-bottom: 0;
}

.v2-fund-section__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.v2-fund-section__label.is-primary {
  color: var(--v2-primary, var(--accent, #6366F1));
}

.v2-fund-section__label.is-accent {
  color: var(--v2-accent, var(--teal, #14B8A6));
}

.v2-fund-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v2-fund-metric__label {
  font-size: 10px;
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
}

.v2-fund-metric__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

/* ---------- AG Grid Overrides (blend into card) ---------- */
.v2-aggrid.ag-theme-balham {
  --ag-background-color: transparent;
  --ag-header-background-color: transparent;
  --ag-odd-row-background-color: transparent;
  --ag-row-border-color: var(--v2-border-color, var(--border, rgba(0,0,0,.06)));
  --ag-border-color: transparent;
  --ag-foreground-color: var(--v2-text-primary, var(--text-primary, #111827));
  --ag-secondary-foreground-color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  border: none !important;
}

.v2-aggrid.ag-theme-balham .ag-root-wrapper {
  border: none;
}

.v2-aggrid.ag-theme-balham .ag-row {
  font-size: 12px;
}

.v2-aggrid .ag-cell {
  padding: 6px 10px;
}

/* ---------- Progress Bars (Active Bets) ---------- */
.v2-bets-list {
  display: flex;
  flex-direction: column;
}

.v2-bets-item {
  padding: 7px 0;
}

.v2-bets-item + .v2-bets-item {
  border-top: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.06)));
}

.v2-bets-item.has-separator {
  border-top: 2px solid var(--v2-border-color, var(--border, rgba(0,0,0,.12)));
  margin-top: 2px;
  padding-top: 10px;
}

.v2-bets-item__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 11px;
}

.v2-bets-item__direction {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.v2-bets-item__name {
  color: var(--v2-text-primary, var(--text-primary, #111827));
  font-weight: 500;
}

.v2-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--v2-surface-muted, var(--surface-muted, rgba(0,0,0,.06)));
  overflow: hidden;
}

.v2-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.v2-progress-fill.is-green {
  background: var(--v2-success, var(--success, #22C55E));
}

.v2-progress-fill.is-red {
  background: var(--v2-danger, var(--danger, #EF4444));
}

/* ---------- Utility Text Colors ---------- */
.text-positive { color: var(--v2-success, var(--success, #22C55E)); }
.text-negative,
.text-danger   { color: var(--v2-danger, var(--danger, #EF4444)); }
.text-info     { color: var(--v2-accent, var(--teal, #14B8A6)); }
.text-muted    { color: var(--v2-text-muted, var(--text-muted, #9ca3af)); }

/* ---------- Pill Toggle Buttons (shared) ---------- */
.mp-pill-toggle {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid var(--v2-border-color, var(--border, #e5e7eb));
  background: transparent;
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  cursor: pointer;
  transition: all 0.15s;
}

.mp-pill-toggle:hover {
  border-color: var(--v2-primary, var(--accent, #6366F1));
  color: var(--v2-primary, var(--accent, #6366F1));
}

.mp-pill-toggle.is-active {
  background: var(--v2-primary, var(--accent, #6366F1));
  border-color: var(--v2-primary, var(--accent, #6366F1));
  color: #fff;
}

/* ==========================================================================
   HOLDINGS TAB
   ========================================================================== */

.mp-holdings {
  padding: 10px 12px;
}

/* ---------- Toolbar ---------- */
.mp-holdings__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mp-holdings__subtabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--v2-border-color, var(--border, #e5e7eb));
  border-radius: var(--v2-radius-md, 8px);
  overflow: hidden;
}

.mp-subtab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid var(--v2-border-color, var(--border, #e5e7eb));
}

.mp-subtab:last-child { border-right: none; }

.mp-subtab:hover {
  background: var(--v2-surface-hover, rgba(0,0,0,.03));
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

.mp-subtab.is-active {
  background: var(--v2-surface, var(--surface, #fff));
  color: var(--v2-text-primary, var(--text-primary, #111827));
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--v2-primary, var(--accent, #6366F1));
}

.mp-holdings__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-holdings__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--v2-border-color, var(--border, #e5e7eb));
  border-radius: var(--v2-radius-sm, 6px);
  background: var(--v2-surface, var(--surface, #fff));
  font-size: 12px;
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
}

.mp-holdings__search i { font-size: 11px; }

.mp-holdings__search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  width: 130px;
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

.mp-holdings__search input::placeholder {
  color: var(--v2-text-muted, var(--text-muted, #9ca3af));
}

/* ---------- Grid Overrides ---------- */
.mp-holdings-grid.ag-theme-balham {
  --ag-background-color: transparent;
  --ag-header-background-color: var(--v2-surface, var(--surface, #fff));
  --ag-odd-row-background-color: transparent;
  --ag-row-border-color: var(--v2-border-color, var(--border, rgba(0,0,0,.06)));
  --ag-border-color: var(--v2-border-color, var(--border, rgba(0,0,0,.08)));
  --ag-foreground-color: var(--v2-text-primary, var(--text-primary, #111827));
  --ag-secondary-foreground-color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  --ag-header-foreground-color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
  --ag-full-width-row-background-color: var(--v2-surface-muted, rgba(0,0,0,.025));
  border: 1px solid var(--v2-border-color, var(--border, rgba(0,0,0,.08)));
  border-radius: var(--v2-radius-lg, 12px);
  overflow: hidden;
}

.mp-holdings-grid .ag-header-cell {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-holdings-grid .ag-cell {
  font-size: 13px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

/* Full-width group row */
.mp-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 100%;
  background: var(--v2-surface-muted, rgba(0,0,0,.025));
  border-bottom: 1px solid var(--v2-border-color, rgba(0,0,0,.08));
}

.mp-group-row__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v2-text-secondary, var(--text-secondary, #6b7280));
}

.mp-group-row__pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-text-primary, var(--text-primary, #111827));
}

/* ---------- Cell Components ---------- */
.mp-h-ticker {
  color: var(--v2-primary, var(--accent, #6366F1));
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.mp-h-ticker:hover { text-decoration: underline; }

/* Drift badge */
.mp-drift-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.mp-drift-badge.is-pos {
  background: rgba(34, 197, 94, .12);
  color: var(--v2-success, var(--success, #16A34A));
}

.mp-drift-badge.is-neg {
  background: rgba(239, 68, 68, .12);
  color: var(--v2-danger, var(--danger, #DC2626));
}

/* Right-aligned header helper */
.mp-holdings-grid .ag-right-aligned-header .ag-header-cell-label {
  justify-content: flex-end;
}