/* Native Recharts + dashboard funnel: give charts a real box, readable ticks, RTL-safe overflow.
 * Does not change metric formulas. Overlay contract: CSS in head only. */
.recharts-responsive-container,
.recharts-wrapper {
  min-height: 220px !important;
  width: 100% !important;
  max-width: 100%;
}
.recharts-wrapper,
.recharts-surface {
  overflow: visible !important;
}
.recharts-tooltip-wrapper {
  z-index: 40 !important;
}
.recharts-default-tooltip {
  border-radius: 12px !important;
  border: 1px solid hsl(var(--border, 220 13% 91%)) !important;
  background: hsl(var(--card, 0 0% 100%)) !important;
  color: hsl(var(--foreground, 222 47% 11%)) !important;
  font-family: "IBM Plex Sans Arabic", Alexandria, ui-sans-serif, sans-serif !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(11, 37, 89, .12) !important;
}
.recharts-legend-item-text,
.recharts-cartesian-axis-tick-value tspan,
.recharts-text {
  font-family: "IBM Plex Sans Arabic", Alexandria, ui-sans-serif, sans-serif !important;
  font-size: 11px;
}
.dashboard-home .recharts-responsive-container,
.shipping-analytics-page .recharts-responsive-container,
main .recharts-responsive-container {
  min-height: 240px !important;
}

/* Native Orders Funnel: percentage bar height needs a tall flex column */
.dashboard-home .flex.items-end.justify-between.gap-3.h-36 {
  height: 12.5rem !important;
  min-height: 12.5rem;
  align-items: flex-end !important;
}
.dashboard-home .flex.items-end.justify-between.gap-3.h-36 > div {
  height: 100%;
  min-height: 0;
  justify-content: flex-end;
}
.dashboard-home .flex.items-end.justify-between.gap-3.h-36 > div > div.w-full.rounded-t-lg {
  max-height: calc(100% - 42px);
}

/* Rate progress tracks */
.dashboard-home div.h-2 {
  overflow: hidden;
  border-radius: 999px;
  background: hsl(var(--muted, 220 14% 96%));
}
.dashboard-home div.h-2 > div {
  min-height: 100%;
  border-radius: inherit;
}

@media (max-width: 767.98px) {
  .recharts-responsive-container,
  .recharts-wrapper {
    min-height: 180px !important;
  }
  .dashboard-home .flex.items-end.justify-between.gap-3.h-36 {
    height: 10rem !important;
    min-height: 10rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .recharts-wrapper * {
    transition: none !important;
    animation: none !important;
  }
}