/* Tab styles live in components/portfolio-tabs.css (loaded via base.html). */

.suggested-portfolio .card {
  background-color: var(--dark-grey-blue);
  border: 1px solid var(--semi-gray);
  border-radius: 10px;
}

.suggested-portfolio #pink-border {
  border-top: 5px solid var(--pink_medium);
  border-radius: 10px;
}

.suggested-portfolio #teal-border {
  border-top: 5px solid var(--teal_dark);
  border-radius: 10px;
}

.suggested-portfolio #purple-border {
  border-top: 5px solid var(--purple_dark);
  border-radius: 10px;
}

.suggested-portfolio .card p {
  margin-bottom: 0;
  color: var(--text-muted, #475467);
}

.suggested-portfolio .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.suggested-portfolio .card-body .inner-box-data {
  display: flex;
  justify-content: space-between;
}

.suggested-portfolio .card .card-body p {
  font-size: var(--text-caption);
}

.suggested-portfolio .card .card-body h6 {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--Grey-light-blue);
}

.suggested-portfolio .card-header div {
  flex: 2;
}

.suggested-portfolio:not(.bg_colo_overlay) .draw-badge-dark {
  color: var(--text-link-teal, #25594D) !important;
  background-color: #E5FFFB !important;
  border: 1px solid #96DDCC !important;
}

.suggested-portfolio.bg_colo_overlay .draw-badge-dark {
  color: var(--text-on-dark-accent, #96DDCC) !important;
  background-color: var(--Grey-700, #344054) !important;
  border: 1px solid var(--teal-medium, #96DDCC) !important;
}

/* ------------------------------------------------------------------
   Portfolio cards can be rendered on both dark and light sections.
   - On dark sections (e.g. `.suggested-portfolio.bg_colo_overlay`) we want dark cards.
   - On light sections, we want light cards.
------------------------------------------------------------------- */

/* Light variant (default) */
.suggested-portfolio:not(.bg_colo_overlay) .portfolio-card {
  background-color: #F9FAFB !important;
  border-left: 1px solid #EAECF0 !important;
  border-right: 1px solid #EAECF0 !important;
  border-bottom: 1px solid #EAECF0 !important;
}

.suggested-portfolio:not(.bg_colo_overlay) .portfolio-title,
.suggested-portfolio:not(.bg_colo_overlay) .cagr-value,
.suggested-portfolio:not(.bg_colo_overlay) .cagr-label {
  color: #252121 !important;
}

.suggested-portfolio:not(.bg_colo_overlay) .portfolio-subtitle {
  color: var(--text-muted, #475467) !important;
}

/* Dark variant */
.suggested-portfolio.bg_colo_overlay .portfolio-card {
  background: rgba(37, 33, 33, 1) !important;
  border: 1px solid #333 !important;
}

.suggested-portfolio.bg_colo_overlay .portfolio-title,
.suggested-portfolio.bg_colo_overlay .cagr-value,
.suggested-portfolio.bg_colo_overlay .cagr-label {
  color: var(--Grey-50, #F9FAFB) !important;
}

.suggested-portfolio.bg_colo_overlay .portfolio-subtitle {
  color: var(--text-on-dark-muted, #D0D5DD) !important;
}

.suggested-portfolio .graph-container {
  background: none !important;
}