.leads-inbox-trends {
  overflow: visible;
  margin-bottom: 1.25rem;
  border: 1px solid #e8e6f8;
  border-radius: 0.875rem;
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  box-shadow: 0 1px 2px rgb(59 51 156 / 6%);
  font-family: 'Google Sans', system-ui, -apple-system, sans-serif;
}

.leads-inbox-trends__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.125rem 0.75rem;
  border-bottom: 1px solid #eceaf8;
}

.leads-inbox-trends__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f1b4b;
}

.leads-inbox-trends__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5b54a8;
}

.leads-inbox-trends__periods {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: #f3f1ff;
}

.leads-inbox-trends__period-indicator {
  position: absolute;
  top: 0.1875rem;
  bottom: 0.1875rem;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: #3b339c;
  box-shadow: 0 1px 2px rgb(59 51 156 / 18%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease;
}

.leads-inbox-trends__period-indicator--ready {
  opacity: 1;
}

.leads-inbox-trends__period {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b54a8;
  background: transparent;
  cursor: pointer;
  transition: color 0.18s ease 0.14s;
}

.leads-inbox-trends__period-indicator--no-motion {
  opacity: 1;
  transition: none;
}

.leads-inbox-trends__period:hover:not(.leads-inbox-trends__period--highlighted) {
  color: #3b339c;
}

.leads-inbox-trends__period--highlighted,
.leads-inbox-trends__period--highlighted:hover,
.leads-inbox-trends__period--highlighted:focus-visible {
  color: #ffffff;
  transition: none;
}

.leads-inbox-trends__body-stage {
  overflow: hidden;
}

.leads-inbox-trends__body--fetching {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.leads-trend-slide-enter-active,
.leads-trend-slide-leave-active {
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.leads-trend-slide-enter-from {
  opacity: 0;
  transform: translateX(calc(var(--leads-trend-slide-enter, 1) * 1.5rem));
}

.leads-trend-slide-leave-to {
  opacity: 0;
  transform: translateX(calc(var(--leads-trend-slide-leave, -1) * 1.5rem));
}

.leads-inbox-trends__body {
  padding: 0.875rem 1.125rem 1.125rem;
}

.leads-inbox-trends__body--loading {
  display: grid;
  gap: 0.875rem;
}

.leads-inbox-trends__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.leads-inbox-trends__summary-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.leads-inbox-trends__total {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #1f1b4b;
}

.leads-inbox-trends__total-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
}

.leads-inbox-trends__growth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.leads-inbox-trends__growth-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.leads-inbox-trends__growth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding-block: 0.25rem;
  padding-inline: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.leads-inbox-trends__growth-badge--up {
  color: #166534;
  background: #dcfce7;
}

.leads-inbox-trends__growth-badge--down {
  color: #991b1b;
  background: #fee2e2;
}

.leads-inbox-trends__growth-badge--neutral {
  color: #475569;
  background: #f1f5f9;
}

.leads-inbox-trends__comparison {
  font-size: 0.75rem;
  color: #64748b;
}

.leads-inbox-trends__chart {
  min-height: 13rem;
  --leads-trend-grid-color: rgb(59 51 156 / 12%);
  --leads-trend-label-color: #64748b;
}

.leads-inbox-trends__chart--enhanced {
  min-height: 15rem;
}

.leads-inbox-trends__chart-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 0.625rem;
  align-items: stretch;
}

.leads-inbox-trends__chart-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
}

.leads-inbox-trends__axis {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b54a8;
}

.leads-inbox-trends__axis--y {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
}

.leads-inbox-trends__axis--x {
  text-align: center;
}

.leads-inbox-trends__chart .ct-chart,
.leads-inbox-trends-line-chart {
  min-height: 13.5rem;
  direction: ltr;
  cursor: default;
}

.leads-inbox-trends-line-chart .ct-grid.ct-horizontal,
.leads-inbox-trends-line-chart .ct-grid.ct-vertical {
  stroke-width: 1px;
}

.leads-inbox-trends-line-chart .ct-series-a .ct-area {
  fill-opacity: 1;
}

.leads-inbox-trends-line-chart .ct-series-a .ct-line {
  stroke-width: 2.5px;
}

.leads-inbox-trends-line-chart .ct-series-a .ct-point {
  fill: var(--leads-trend-point, #3b339c);
  stroke: transparent;
  stroke-width: 0.875rem;
  pointer-events: none;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease;
}

.leads-inbox-trends-line-chart .ct-series-a .ct-point.is-active {
  fill: var(--leads-trend-point-hover, #6d28d9);
  stroke: var(--leads-trend-point-ring, rgb(59 51 156 / 22%));
  stroke-width: 1.125rem;
}

.leads-inbox-trends-line-chart .ct-series-a .ct-point:hover,
.leads-inbox-trends-line-chart .ct-series-a .ct-point:focus-visible {
  fill: var(--leads-trend-point-hover, #6d28d9);
  stroke: var(--leads-trend-point-ring, rgb(59 51 156 / 22%));
  stroke-width: 1.125rem;
}

.leads-inbox-trends-line-chart .ct-label {
  font-size: 0.6875rem;
  font-weight: 500;
}

.leads-inbox-trends__chart .ct-chart {
  min-height: 13rem;
}

.leads-inbox-trends__empty {
  display: block;
  padding: 2.5rem 0;
  text-align: center;
}

.leads-inbox-trends__skeleton-summary,
.leads-inbox-trends__skeleton-chart {
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #f3f1ff 25%, #eceaf8 50%, #f3f1ff 75%);
  background-size: 200% 100%;
  animation: leads-inbox-trends-shimmer 1.2s infinite;
}

.leads-inbox-trends__skeleton-summary {
  height: 3.5rem;
}

.leads-inbox-trends__skeleton-chart {
  height: 13rem;
}

@keyframes leads-inbox-trends-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

html.dark .leads-inbox-trends {
  border-color: rgb(255 255 255 / 8%);
  background: linear-gradient(180deg, rgb(36 32 86) 0%, rgb(28 24 68) 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 24%);
}

html.dark .leads-inbox-trends__header {
  border-bottom-color: rgb(255 255 255 / 8%);
}

html.dark .leads-inbox-trends__title,
html.dark .leads-inbox-trends__total {
  color: #f8fafc;
}

html.dark .leads-inbox-trends__subtitle,
html.dark .leads-inbox-trends__period {
  color: #c4b5fd;
}

html.dark .leads-inbox-trends__periods {
  background: rgb(255 255 255 / 6%);
}

html.dark .leads-inbox-trends__period-indicator {
  background: #6d28d9;
  box-shadow: 0 1px 2px rgb(109 40 217 / 28%);
}

html.dark .leads-inbox-trends__period:hover:not(.leads-inbox-trends__period--highlighted) {
  color: #ede9fe;
}

html.dark .leads-inbox-trends__period--highlighted,
html.dark .leads-inbox-trends__period--highlighted:hover,
html.dark .leads-inbox-trends__period--highlighted:focus-visible {
  color: #ffffff;
  transition: none;
}

html.dark .leads-inbox-trends__total-label,
html.dark .leads-inbox-trends__comparison {
  color: #cbd5e1;
}

html.dark .leads-inbox-trends__growth-badge--up {
  color: #bbf7d0;
  background: rgb(22 101 52 / 35%);
}

html.dark .leads-inbox-trends__growth-badge--down {
  color: #fecaca;
  background: rgb(153 27 27 / 35%);
}

html.dark .leads-inbox-trends__growth-badge--neutral {
  color: #e2e8f0;
  background: rgb(255 255 255 / 8%);
}

html.dark .leads-inbox-trends__chart {
  --leads-trend-grid-color: rgb(255 255 255 / 10%);
  --leads-trend-label-color: #cbd5e1;
}

html.dark .leads-inbox-trends__axis {
  color: #c4b5fd;
}

html.dark .leads-inbox-trends__skeleton-summary,
html.dark .leads-inbox-trends__skeleton-chart {
  background: linear-gradient(90deg, rgb(255 255 255 / 6%) 25%, rgb(255 255 255 / 12%) 50%, rgb(255 255 255 / 6%) 75%);
  background-size: 200% 100%;
}

@media (min-width: 768px) {
  .leads-inbox-trends__growth {
    align-items: flex-end;
  }
}

.leads-inbox-trends-tooltip.leads-inbox-trends-tooltip--custom {
  position: fixed;
  z-index: 9999;
  min-width: 7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgb(59 51 156 / 16%);
  font-family: 'Google Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.leads-inbox-trends-tooltip.leads-inbox-trends-tooltip--custom.tooltip-show {
  opacity: 1;
  visibility: visible;
}

.leads-inbox-trends-tooltip--light {
  border: 1px solid rgb(59 51 156 / 18%);
  background: #ffffff;
  color: #1f1b4b;
}

.leads-inbox-trends-tooltip--dark {
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(36 32 86);
  color: #f8fafc;
  box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
}

.leads-inbox-trends-tooltip .leads-inbox-trends-tooltip__meta {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
}

.leads-inbox-trends-tooltip--light .leads-inbox-trends-tooltip__meta {
  color: #64748b !important;
}

.leads-inbox-trends-tooltip--dark .leads-inbox-trends-tooltip__meta {
  color: #cbd5e1 !important;
}

.leads-inbox-trends-tooltip .leads-inbox-trends-tooltip__value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}

.leads-inbox-trends-tooltip--light .leads-inbox-trends-tooltip__value {
  color: #1f1b4b !important;
}

.leads-inbox-trends-tooltip--dark .leads-inbox-trends-tooltip__value {
  color: #ffffff !important;
}