/* Dashboard Widgets Styling */
/* Poppins is self-hosted and declared in assets/styles/fonts.css, which every base
   template links; importing it from fonts.googleapis.com here would reintroduce a
   third-party origin in style-src and font-src. */

.dashboard-section {
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif;
}

/* Market Trends strip directly below navbar (shared authenticated layout) */
#market-trends-section {
  grid-area: ticker;
  margin-bottom: 0;
  width: 100%;
}
.market-trends-container {
  background-color: var(--color-white, #fff);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-grey-dark, #dee2e6);
  gap: 0.5rem;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

@media (min-width: 1024px) {
  .market-trends-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 768px) {
  .market-trends-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.market-trends-container::-webkit-scrollbar {
  display: none;
}

.section-title {
  font-size: var(--text-md);
  margin-bottom: 1rem;
  font-weight: 500;
}

/* Trend Cards */
.trend-card {
  background-color: white;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.trend-card {
  padding: 0.75rem;
  display: flex;
  align-items: center;
}

/* Ensure proper spacing in the market grid */
.dashboard-section .col-md-4, .dashboard-section .col-md-2 {
  margin-bottom: 1rem;
}


.asset-type {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.asset-info h3 {
  font-size: var(--text-md);
  font-weight: 600;
}

.change-percentage, .change-value {
  font-size: var(--text-base);
  font-weight: 500;
}

.positive {
  color: var(--color-positive);
}

.negative {
  color: var(--color-negative);
}

.btn-icon {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* Generic locked feature card — wraps upgrade-cta-locked inside a card container.
   The wrapper adopts the CTA's visual identity so there is only one border. */
.feature-locked-card {
  background-color: var(--color-light);
  border: 2px dashed var(--color-green);
  border-radius: var(--radius-md);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.feature-locked-card > .upgrade-cta-locked {
  flex: 1;
  min-height: unset;
  background: transparent;
  border: none !important;
  border-radius: 0;
}

/* Digest + History 2-column row — equal-height columns with cards filling full height */
.dashboard-digest-row {
  margin-bottom: 2rem;
}

.dashboard-digest-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.dashboard-digest-row > [class*="col-"] > .dashboard-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.dashboard-digest-row > [class*="col-"] > .dashboard-section > .daily-digest-card,
.dashboard-digest-row > [class*="col-"] > .dashboard-section > .portfolio-history-card,
.dashboard-digest-row > [class*="col-"] > .dashboard-section > .feature-locked-card {
  flex: 1;
  margin-bottom: 0; /* g-4 on the row provides spacing; card margins inflate row height */
}

/* The heatmap card shares the row: stretch it like the other cards and let the treemap
   area take the height the digest sets. */
.dashboard-digest-row > [class*="col-"] > .portfolio-heatmap-component {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.dashboard-digest-row > [class*="col-"] > .portfolio-heatmap-component > .portfolio-heatmap-container {
  flex: 1;
}

/* In this row the treemap is sized by its column (see renderTreemap), so the component's
   own minimum heights, meant for the full-width placement, would only leave blank space. */
.dashboard-digest-row > [class*="col-"] .heatmap-visualization,
.dashboard-digest-row > [class*="col-"] .portfolio-heatmap-container {
  min-height: auto;
}

.dashboard-digest-row > [class*="col-"] .heatmap-loading .shimmer-block {
  height: 400px;
}

/* One third of the row (lg+): tighter padding and eight legend badges that fit on one line.
   Between 992 and 1199 px the card is about 320 px wide, so the badges go down to 32 px;
   from 1200 px there is room for 38 px. */
@media (min-width: 992px) {
  .dashboard-digest-row > .col-lg-4 .heatmap-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dashboard-digest-row > .col-lg-4 .portfolio-heatmap-container {
    margin: 16px;
  }

  .dashboard-digest-row > .col-lg-4 .heatmap-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dashboard-digest-row > .col-lg-4 .heatmap-filters .btn {
    font-size: var(--text-xs);
    padding: 0.4rem 0.75rem;
  }

  .dashboard-digest-row > .col-lg-4 .heatmap-legend--compact {
    gap: 2px;
  }

  .dashboard-digest-row > .col-lg-4 .legend-badge {
    width: 32px;
    height: 24px;
    font-size: 10px;
  }
}

@media (min-width: 1200px) {
  .dashboard-digest-row > .col-lg-4 .heatmap-header,
  .dashboard-digest-row > .col-lg-4 .heatmap-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dashboard-digest-row > .col-lg-4 .portfolio-heatmap-container {
    margin: 20px;
  }

  .dashboard-digest-row > .col-lg-4 .heatmap-legend--compact {
    gap: 3px;
  }

  .dashboard-digest-row > .col-lg-4 .legend-badge {
    width: 38px;
    height: 26px;
    font-size: 11px;
  }
}

/* .balance-card base is defined in cards.css (global) */

/* Dashboard-specific: hero columns manage their own spacing */
.balance-card .card-body {
  padding: 0; /* Hero columns manage their own spacing */
}

.balance-card .card-body.loading {
  padding: 0; /* Match loaded state — balance-hero manages its own spacing */
}

/* Loading State — mirrors balance-hero structure to prevent card height jump */
.balance-loading {
  text-align: center;
  width: 100%;
}

.loading-shimmer {
  background: linear-gradient(90deg, var(--color-grey) 25%, var(--color-grey-dark) 50%, var(--color-grey) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.vector-shimmer {
  /* Same dimensions as .vector-widget-sm so the right panel occupies
     the same space as the real widget and the locked CTA. */
  width: 440px;
  max-width: 100%;
  height: 400px;
  border-radius: 16px;
  transform: scale(0.90);
  margin: -20px -22px; /* Same margin compensation as .vector-widget-sm */
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .vector-shimmer {
    height: 280px;
    transform: scale(0.85);
    margin: -15px -20px;
  }
}

.balance-shimmer {
  width: 100%;
  max-width: 300px;
  height: 60px;
}

@media (max-width: 991px) {
  .balance-shimmer {
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.loading-text {
  color: var(--color-dark);
  opacity: 0.6;
  font-size: var(--text-sm);
  margin: 0;
}

/* ─── Balance Hero Layout ─────────────────────────────────────────────────── */
/* Clean CSS grid — no Bootstrap grid classes, no !important fighting.         */
/* mobile: stacked (balance first, vector below)                               */
/* desktop (≥992px): CSS grid 1fr | fixed vector panel                        */

.balance-hero {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .balance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: stretch;
  }
}

/* ─── Left: balance content + stats strip ────────────────────────────────── */

.balance-hero-left {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.5rem 0;
  min-width: 0;
}

@media (max-width: 768px) {
  .balance-hero-left {
    padding: 1.5rem 1rem 0;
  }
}

@media (min-width: 992px) {
  .balance-hero-left {
    border-right: 1px solid var(--color-grey-dark);
  }
}

.balance-hero-content {
  flex: 1; /* Pushes stats strip to bottom */
  padding-bottom: 2rem;
  min-width: 0;
}

/* ─── Stats strip — full-bleed at bottom of hero-left ───────────────────── */

.balance-hero-stats {
  display: flex;
  border-top: 1px solid var(--color-grey-dark);
  margin: 0 -2.5rem; /* Break out of hero-left padding */
}

@media (max-width: 768px) {
  .balance-hero-stats {
    margin: 0 -1rem;
    flex-wrap: wrap;
  }
}

.hs-cell {
  flex: 1;
  padding: 1.25rem 1.75rem;
  border-right: 1px solid var(--color-grey-dark);
}

@media (max-width: 768px) {
  .hs-cell {
    flex: 1 1 50%;
    padding: 0.75rem 1rem;
  }
  .hs-cell:nth-child(2n) {
    border-right: none;
  }
  .hs-cell:nth-child(n+3) {
    border-top: 1px solid var(--color-grey-dark);
  }
}

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

.hs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-dark);
  opacity: 0.45;
  margin-bottom: 0.375rem;
}

.hs-value {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-dark);
}

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

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

.hs-value.warning {
  color: #d97706;
}

.hs-percentage {
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.75;
}

/* ─── Right: vector panel ────────────────────────────────────────────────── */

.balance-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light);
  padding: 1rem 1.25rem;
  min-width: 0;
}

@media (max-width: 991px) {
  .balance-hero-right {
    border-top: 1px solid var(--color-grey-dark);
    padding: 2rem 1rem;
  }
}

/* ─── Balance label, value, delta ────────────────────────────────────────── */

.balance-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-dark);
  opacity: 0.45;
  margin-bottom: 1rem;
}

.balance-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-green);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 1; /* Override parent opacity */
}

.balance-value {
  font-size: 4.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

.balance-cur {
  font-size: 2.125rem;
  font-weight: 500;
  opacity: 0.45;
  margin-right: 0.125rem;
  vertical-align: top;
  line-height: 1.35;
}

@media (max-width: 991px) {
  .balance-value {
    font-size: 2.75rem;
  }

  .balance-cur {
    font-size: 1.375rem;
  }
}

.balance-delta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.balance-delta-amount {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.balance-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-light);
}

.balance-delta-pill.negative {
  background: rgba(239, 68, 68, 0.08);
}

.balance-delta-period {
  font-size: var(--text-xs);
  color: var(--color-dark);
  opacity: 0.45;
}

/* ─── Shared stat classes (used across cards) ────────────────────────────── */

.stat-value {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
  color: var(--color-dark);
}

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

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

.stat-value.neutral {
  color: var(--color-dark);
  opacity: 0.7;
}

.stat-value.warning {
  color: #d97706;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-dark);
  opacity: 0.6;
  font-weight: 500;
}

/* ─── Empty State ────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state p {
  font-size: var(--text-base);
  color: var(--color-dark);
  opacity: 0.6;
  margin-bottom: 0;
}

/* Animated spans inherit parent color/size */
.animated-balance,
.animated-percentage,
.animated-change-amount {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.daily-digest-card .card-body.error {
  color: #dc2626;
}

/* Loading indicator container spacing — retains reserved vertical space while content loads. */
.daily-digest-card .card-body.loading,
.loading-overlay {
  position: relative;
  min-height: 100px;
}

/* Canonical spinner overlay — inline SVG of fa-circle-notch in navy, matches the
   JACK-700 canonical spinner visual (@Atoms/spinner/spinner.html.twig). */
.daily-digest-card .card-body.loading:after,
.dashboard-section .loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="%231D3354" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle></svg>') center center no-repeat;
  background-size: 50px;
  border-radius: 8px;
  z-index: 10;
}

/* Loading placeholder styles */
.loading-placeholder {
  background-color: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.loading-placeholder p {
  margin: 0;
  color: #6b7280;
  font-size: var(--text-sm);
}

/* Market logo fallback */
.market-logo-fallback {
  font-size: var(--text-sm);
  font-weight: bold;
}

/* Portfolio History Card Styles */
.portfolio-history-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-grey-dark, #f3f4f6);
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.portfolio-history-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--color-grey-dark, #e5e7eb);
  flex-wrap: wrap;
  gap: 1rem;
}

.portfolio-history-card .history-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.portfolio-history-card .history-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-dark, #1f2937);
  margin: 0;
  letter-spacing: -0.01em;
}

.portfolio-history-card .history-description {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-dark, #6b7280);
  margin: 0;
  opacity: 0.8;
}

.portfolio-history-card .period-selector {
  display: flex;
  gap: 0.5rem;
}

.portfolio-history-card .period-btn {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--hover-speed-normal) ease, color var(--hover-speed-normal) ease;
}

.portfolio-history-card .card-body {
  padding: 24px 28px;
  flex: 1;
  position: relative;
}

.portfolio-history-card .chart-container {
  height: 200px;
  position: relative;
}

.portfolio-history-card .chart-loading {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  bottom: 0;
}

.portfolio-history-card .chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  bottom: 0;
  color: #6b7280;
  text-align: center;
}

.portfolio-history-card .chart-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.portfolio-history-card .card-footer {
  padding: 1rem 28px 1.25rem;
  border-top: 1px solid var(--color-grey-dark, #e5e7eb);
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.portfolio-history-card .history-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-history-card .stat-label {
  color: #6b7280;
  font-size: var(--text-sm);
}

.portfolio-history-card .stat-value {
  font-weight: 600;
  font-size: var(--text-sm);
}

.portfolio-history-card .stat-percentage {
  font-size: var(--text-xs);
}

.portfolio-history-card .stat-value.positive,
.portfolio-history-card .stat-percentage.positive {
  color: #22c55e;
}

.portfolio-history-card .stat-value.negative,
.portfolio-history-card .stat-percentage.negative {
  color: #ef4444;
}

/* Daily Digest Card Styles */
.daily-digest-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-grey-dark, #f3f4f6);
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.daily-digest-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--color-grey-dark, #e5e7eb);
  flex-wrap: wrap;
  gap: 1rem;
}

.daily-digest-card .digest-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.daily-digest-card .digest-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-dark, #1f2937);
  margin: 0;
  letter-spacing: -0.01em;
}

.daily-digest-card .digest-timestamp {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-dark, #6b7280);
  margin: 0;
  opacity: 0.8;
}

.daily-digest-card .digest-actions {
  display: flex;
  gap: 0.5rem;
}

.daily-digest-card .digest-actions .btn {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--hover-speed-normal) ease, color var(--hover-speed-normal) ease;
}

.daily-digest-card .card-body {
  padding: 24px 28px;
  line-height: 1.8;
  color: #374151;
  flex: 1;
}

/* Desktop only: cap digest at chart-card height and scroll internally.
   Mobile stacks columns, so no stretch problem and no scroll trap. */
@media (min-width: 768px) {
  .daily-digest-card .card-body {
    min-height: 0;
    max-height: 275px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
  }

  .daily-digest-card .card-body::-webkit-scrollbar {
    width: 6px;
  }

  .daily-digest-card .card-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
  }

  .daily-digest-card .card-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .daily-digest-card .card-body:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* Scroll-position-aware fade mask. JS toggles .is-scrollable, .is-at-top,
     .is-at-bottom on #digest-content based on scrollTop/scrollHeight. */
  .daily-digest-card #digest-content.is-scrollable {
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black 24px,
      black calc(100% - 24px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black 24px,
      black calc(100% - 24px),
      transparent 100%
    );
  }

  .daily-digest-card #digest-content.is-scrollable.is-at-top {
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
  }

  .daily-digest-card #digest-content.is-scrollable.is-at-bottom {
    mask-image: linear-gradient(to bottom, transparent 0, black 24px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 24px);
  }
}

.daily-digest-card .card-body p {
  margin-bottom: 12px;
}

.daily-digest-card .card-body strong {
  color: #1f2937;
  font-weight: 600;
}

.daily-digest-card .card-footer {
  padding: 1rem 28px 1.25rem;
  border-top: 1px solid var(--color-grey-dark, #e5e7eb);
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.daily-digest-card .card-footer .btn-link {
  color: #22c55e;
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 0;
  line-height: 1.5;
}

.daily-digest-card .card-footer .btn-link:hover {
  color: #16a34a;
  text-decoration: underline;
}

/* Digest Loading State */
.daily-digest-card .digest-loading {
  min-height: 150px;
}

/* Digest shimmer lines */
.digest-shimmer-line-1 {
  width: 100%;
  height: 20px;
}

.digest-shimmer-line-2 {
  width: 90%;
  height: 20px;
}

.digest-shimmer-line-3 {
  width: 95%;
  height: 20px;
}

.digest-shimmer-line-4 {
  width: 85%;
  height: 20px;
  margin-bottom: 0;
}

/* Portfolio history shimmer block */
.history-shimmer-block {
  width: 100%;
  height: 200px;
  margin-bottom: 0;
  display: block;
}

/* Digest Error State */
.daily-digest-card .digest-error-state {
  text-align: center;
  padding: 2rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.daily-digest-card .digest-error-state .error-icon {
  align-items: center;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 999px;
  color: #f59e0b;
  display: inline-flex;
  font-size: 1.75rem;
  height: 56px;
  justify-content: center;
  margin-bottom: 1rem;
  width: 56px;
}

.daily-digest-card .digest-error-state h4 {
  color: var(--color-dark, #374151);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.daily-digest-card .digest-error-state p {
  color: var(--color-dark, #6b7280);
  opacity: 0.7;
  margin-bottom: 1.5rem;
}

.daily-digest-card .digest-error-state .retry-btn {
  font-family: 'Poppins', sans-serif;
}

/* Digest Result */
.daily-digest-card .digest-result {
  line-height: 1.8;
}

/* Segment card states */
.segment-card.inactive-portfolio {
  opacity: 0.7;
  background-color: #f0f0f0;
}

.segment-card.inactive-portfolio .circle-label {
  color: #666;
}

.segment-card.inactive-portfolio .value {
  font-style: italic;
  color: #888;
}

/* Dashboard loading indicator container spacing — retains reserved vertical space while content loads. */
.dashboard-section .loading {
  position: relative;
  min-height: 100px;
}

/* Trend shimmer pills — match .trend-item shape while loading */
.trend-shimmer-pill {
  height: 29px;
  width: 110px;
  border-radius: var(--radius-pill, 30px);
  flex-shrink: 0;
  margin-bottom: 0;
}

.trend-shimmer-pill--sm {
  width: 80px;
}

.trend-shimmer-pill--lg {
  width: 140px;
}

/* Trend items as compact pill chips */
.trend-item {
  border: 1px solid var(--color-grey-dark, #dee2e6);
  background-color: var(--color-light, #f2fffa); /* mint tint */
  border-radius: var(--radius-pill); /* 30px */
  transition: background-color var(--hover-speed-fast) ease, border-color var(--hover-speed-fast) ease, color var(--hover-speed-fast) ease;
  padding: 0.3rem 0.9rem;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.trend-item.negative {
  background-color: var(--color-danger-surface-dark);
  border-color: var(--color-negative);
}

.trend-item:hover {
  background-color: var(--color-green-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.trend-item.negative:hover {
  background-color: var(--color-danger-surface-hover);
}

.trend-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-dark);
}

.trend-price {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.trend-value {
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Digest Rich Formatting */
.digest-dimension-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 4px;
  color: white;
  cursor: default;
  vertical-align: baseline;
  line-height: 1.4;
}

.digest-dimension-badge.dim-v {
  background: #A06CD5;
}

.digest-dimension-badge.dim-e {
  background: #2D4E86;
}

.digest-dimension-badge.dim-c {
  background: #00B4D8;
}

.digest-dimension-badge.dim-t {
  background: #D49E23;
}

.digest-dimension-badge.dim-o {
  background: #008F68;
}

.digest-dimension-badge.dim-r {
  background: #8B3A3A;
}

.digest-asset-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed #93c5fd;
}

.digest-asset-link:hover {
  color: #1d4ed8;
  border-bottom-style: solid;
}

/* ── Market Headlines Bar (editorial ticker) ──
   Sits site-wide under the trends ticker (included from base.html.twig).
   Desktop: rotates through 1-of-N headlines via opacity fade; container chrome is invariant.
   Mobile: horizontal scroll-snap track for native swipe paging. */

:root {
  /* Aligns headlines bar inner padding with the trends ticker inset above.
     If the trends row inset changes, update this. */
  --headline-bar-inset: calc(1rem + 16px);
}

.market-headlines-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem var(--headline-bar-inset);
  background: transparent;
  border-top: 1px solid var(--color-grey-dark);
  border-bottom: 1px solid var(--color-grey-dark);
  min-height: 36px;
}

.headline-track {
  position: relative;
  flex: 1;
  min-width: 0;
  /* Track collapses to the active slide's height via the absolutely-positioned
     stack pattern below; this min-height keeps the row at 20px while the
     slides fade in/out. */
  min-height: 20px;
}

.headline-slide {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  /* Stack all slides on top of each other so we can crossfade via opacity
     without the off-slides taking layout space. */
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}

.headline-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.headline-shimmer-block {
  width: 100%;
  height: 20px;
  border-radius: 4px;
  margin: 0; /* override .loading-shimmer's margin-bottom (would inflate bar height during shimmer) */
}

.headline-eyebrow {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.headline-divider {
  flex-shrink: 0;
  width: 3px;
  height: 10px;
  background: var(--color-grey-dark);
  border-radius: 2px;
  align-self: center;
}

.headline-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

a.headline-text:hover {
  color: var(--color-green);
}

.headline-source {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.headline-dots {
  display: flex;
  flex-shrink: 0;
  padding-left: 0.5rem;
  /* Dots are 16x16 click boxes containing a 6x6 visible dot. Adjacent click
     boxes meet edge-to-edge with no overlap (so hover/click registers on the
     correct dot), and the visible dots end up with a 10px optical gap. */
}

.headline-dot {
  width: 16px;
  height: 16px;
  padding: 5px;          /* visible dot is 6px (16 - 5*2); rest is hit area */
  border: 0;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
  /* Paint the background only on the content box (the inner 6x6 area) so
     the padding is invisible click area, not coloured space. */
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--hover-speed-normal) ease;
}

.headline-dot:hover {
  background-color: var(--color-grey-dark);
}

.headline-dot.active {
  background-color: var(--color-text-primary);
}

.headline-dot:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: -4px;  /* outline sits inside the padding, around the visible dot */
}

/* Mobile: bar stacks (track row + dots row), track becomes a horizontal
   scroll-snap container so the user swipes between headlines. Auto-rotation
   is paused on mobile (handled in JS); dots reflect the visible slide via an
   IntersectionObserver. */
@media (max-width: 576px) {
  .market-headlines-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem; /* matches trends-container mobile padding */
    min-height: auto;
  }

  .headline-track {
    display: flex;
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .headline-track::-webkit-scrollbar {
    display: none;
  }

  /* On mobile every slide is laid out in the track, sized to the viewport.
     Reset the desktop absolute-positioned stack — slides flow horizontally. */
  .headline-slide {
    position: static;
    inset: auto;
    display: flex;
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
    opacity: 1;
    pointer-events: auto;
  }

  /* Don't truncate on mobile — let long headlines wrap to a 2nd line. */
  .headline-slide .headline-text {
    flex: 1 1 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .headline-slide .headline-divider {
    display: none; /* awkward as a floating sliver in stacked layout */
  }

  .headline-slide .headline-source {
    flex: 0 0 auto;
  }

  .headline-dots {
    align-self: center;
    padding-left: 0;
  }

  .headline-dot {
    width: 24px;
    height: 24px;
    padding: 8px; /* visible 8px (24 - 8*2); 24x24 touch target meets WCAG 2.5.8 AA */
  }

  .headline-shimmer-block {
    height: 36px; /* matches loaded mobile slide height (eyebrow row + 1-2 line headline) */
  }
}

/* Trends-row narrow viewport (576-768px): align headlines bar inset with
   the trends-row's reduced padding so the two strips line up visually. */
@media (max-width: 768px) {
  .market-headlines-bar {
    --headline-bar-inset: 0.75rem;
  }
}

/* ── Balance Card Position Tiles ── */

.balance-hero-positions {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-top: 1px solid var(--color-grey-dark, #e5e7eb);
  min-width: 0;
}

.balance-hero-positions::-webkit-scrollbar {
  display: none;
}

.balance-hero-positions:empty {
  display: none;
}

/* The message that takes the tiles' place when no position has a current value yet.
   The balance card is a light surface: colours come from the text-muted utility, like the
   excluded-positions note above it. */
.balance-hero-positions .balance-positions-empty {
  margin: 0;
  align-self: center;
}

/* ── Position Tiles ── */

.position-tile {
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 180px;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-grey-dark, #e5e7eb);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.position-tile:hover {
  border-color: var(--color-green, #36E0A0);
  box-shadow: var(--shadow-tile-hover);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

.position-tile:focus-visible {
  border-color: var(--color-green, #36E0A0);
  box-shadow: var(--shadow-tile-hover);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.position-tile--static {
  cursor: default;
}

.position-tile--static:hover {
  border-color: var(--color-grey-dark, #e5e7eb);
  box-shadow: none;
  transform: none;
}

.position-tile--more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}

.tile-more-symbol {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: 0.08em;
}

.tile-more-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.tile-symbol {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tile-value {
  font-size: var(--text-md, 1rem);
  font-weight: 700;
  margin: 0.375rem 0 0.25rem;
  color: var(--color-dark);
}

.tile-change {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
}

.tile-change.positive { color: var(--color-positive, #00C853); }
.tile-change.negative { color: var(--color-negative, #EF4444); }
.tile-change.neutral { color: var(--color-text-secondary, #6b7280); }

.tile-change-window {
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: 0.25rem;
}

.shimmer-tile {
  pointer-events: none;
}

@media (max-width: 576px) {
  .position-tile {
    min-width: 120px;
    padding: 0.75rem;
  }
}

.digest-source-link {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.5;
  text-decoration: none;
}

.digest-status-green {
  color: #00C853;
  font-weight: 600;
}

.digest-status-orange {
  color: #FFAB00;
  font-weight: 600;
}

.digest-status-red {
  color: #D50000;
  font-weight: 600;
}

/* Stale/cached content — shown while fresh data loads */
.stale-content {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.stale-content.is-fresh {
  opacity: 1;
}