/* Chart types added to HBCharts (charts-entry.jsx): SVG wrappers, tooltip anchor, radial rings, gauge, motion.
   Colours come from the HamBord tokens (var(--chart-1..5), --success, --destructive, --border, --muted-foreground). */

/* SVG chart host (varwidth, funnel, treemap, candlestick) */
.hb-cx { position: relative; width: 100%; height: 100%; min-height: 120px; min-width: 0; }
.hb-svg { display: block; overflow: visible; font-family: var(--font-persian, Vazirmatn Variable); }
.hb-svg text { font-variant-numeric: tabular-nums; }
.hb-cx-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; z-index: 4; white-space: nowrap; }
.hb-cx-tip .hb-tt { min-width: 120px; }

/* motion: bars grow from the baseline, candles and funnel fade up, rings sweep in */
@keyframes hbGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hbArc { from { stroke-dasharray: 0 100; } }
.hb-anim rect:not([fill="transparent"]) { transform-box: fill-box; transform-origin: 50% 100%; animation: hbGrow .7s cubic-bezier(.2, .7, .2, 1) both; }
.hb-anim .hb-cd, .hb-anim path, .hb-anim text { animation: hbFade .6s ease-out both; }
.hb-anim line { animation: hbFade .4s ease-out both; }
.hb-cd { transition: opacity .2s ease; }

/* radial progress (vibefarsi «اهداف فصل» style): track ring, value arc, centre = average or hovered ring */
.hb-rad { container-type: inline-size; width: 100%; height: 100%; }
.hb-rad-in { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.hb-rad-c { position: relative; flex: 1 1 auto; min-height: 150px; display: grid; place-items: center; }
.hb-rad-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hb-rad-svg g { transition: opacity .25s ease; }
.hb-rad-arc { transition: stroke-width .25s ease; }
.hb-rad-svg.hb-anim .hb-rad-arc { animation: hbArc .9s cubic-bezier(.2, .7, .2, 1) both; }
/* centre: the value sits exactly on the ring centre (svg is inset:0 and centred); the caption hangs below it */
.hb-rad-mid { position: absolute; inset: 0; pointer-events: none; }
.hb-rad-mid b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-family: Morabba, inherit; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hb-rad-mid small { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 13px); white-space: nowrap; font-size: 11.5px; line-height: 1.2; color: var(--muted-foreground); }
.hb-rad-l { list-style: none; margin: 0; padding: 0; flex: none; display: grid; grid-template-columns: max-content auto; justify-content: start; align-items: center; column-gap: 12px; row-gap: 7px; font-size: 12.5px; }
.hb-rad-l li { display: contents; cursor: default; }
.hb-rad-l li.off > * { opacity: .45; }
.hb-rad-l .badge { height: 22px; padding: 0 9px; font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.hb-rad-l b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-rad-l li.on .badge { box-shadow: 0 0 0 2px var(--c, var(--chart-1)); }
/* container queries style descendants of the container, so the layout rules target .hb-rad-in (same as .hb-pie-in) */
@container (min-width: 460px) {
  .hb-rad-in { flex-direction: row; align-items: center; gap: 20px; }
  .hb-rad-c { flex: 1 1 0; min-width: 160px; align-self: stretch; }
  .hb-rad-l { order: -1; align-content: center; }
}

/* gauge: semicircle, value fills from the right end */
.hb-gauge { height: 100%; display: flex; align-items: center; justify-content: center; }
.hb-gauge-c { position: relative; width: min(100%, 320px); }
.hb-gauge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hb-gauge-val { transition: stroke-width .25s ease; }
.hb-gauge-svg.hb-anim .hb-gauge-val { animation: hbArc .9s cubic-bezier(.2, .7, .2, 1) both; }
.hb-gauge-mid { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; pointer-events: none; }
.hb-gauge-end { position: absolute; bottom: -16px; font-size: 11px; line-height: 1; color: var(--muted-foreground); font-variant-numeric: tabular-nums; pointer-events: none; }
.hb-gauge-end.r { right: 0; }
.hb-gauge-end.l { left: 0; }
.hb-gauge-mid b { display: block; font-family: Morabba, inherit; font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hb-gauge-mid small { font-size: 11.5px; color: var(--muted-foreground); }

/* pie / donut: hovered legend row mirrors the hovered sector */
.hb-pie-l li.on .badge { box-shadow: 0 0 0 2px var(--c, var(--chart-1)); }