/**
 * Tiger Charts — front-end styles.
 *
 * Structural only; colours/typography come from Style controls (title/legend)
 * and CSS vars (--tg-chart-grid / --tg-chart-axis / --tg-chart-value) set per
 * widget. Animation is opt-in: drawing starts hidden under `.tg-anim` and plays
 * when JS adds `.tg-in` (on scroll into view). Non-animated charts render final.
 *
 * @package TigerElements
 */

.tg-chart-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tg-chart-title {
    text-align: center;
    font-weight: 600;
    margin: 0 0 14px;
}

.tg-chart {
    --tg-chart-grid: rgba(2, 6, 23, 0.08);
    --tg-chart-axis: #64748b;
    --tg-chart-value: #0f172a;
    position: relative;
    width: 100%;
    min-height: 150px;
}

.tg-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG sub-element styling driven by the CSS vars above. */
.tg-chart-gridline { stroke: var(--tg-chart-grid); stroke-width: 1; }
.tg-chart-axislabel { fill: var(--tg-chart-axis); font-size: 12px; }
.tg-chart-valuelabel { fill: var(--tg-chart-value); font-size: 12px; font-weight: 600; }

/* ── Legend (built by JS) ───────────────────────────────────────────────── */
.tg-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 16px;
    font-size: 14px;
}
.tg-chart-legend .tg-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
}
.tg-chart-legend .tg-chart-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* ── Animation: hidden initial states only while `.tg-anim` (pre `.tg-in`) ── */
.tg-chart {
    /* Animation duration, overridable per-widget via the JS from the control. */
    --tg-chart-dur: 800ms;
}
.tg-chart.tg-anim .tg-chart-bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: bottom;
    transition: transform var(--tg-chart-dur, 800ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tg-chart.tg-anim.tg-in .tg-chart-bar { transform: scaleY(1); }

.tg-chart.tg-anim .tg-chart-slice {
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transition: transform var(--tg-chart-dur, 800ms) cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}
.tg-chart.tg-anim.tg-in .tg-chart-slice { transform: scale(1); opacity: 1; }

/* pathLength="1" is set on the line so dash math is uniform regardless of size. */
.tg-chart.tg-anim .tg-chart-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset calc(var(--tg-chart-dur, 800ms) * 1.3) ease;
}
.tg-chart.tg-anim.tg-in .tg-chart-line { stroke-dashoffset: 0; }

.tg-chart.tg-anim .tg-chart-area {
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}
.tg-chart.tg-anim.tg-in .tg-chart-area { opacity: 1; }

.tg-chart.tg-anim .tg-chart-dot,
.tg-chart.tg-anim .tg-chart-valuelabel,
.tg-chart.tg-anim .tg-chart-axislabel {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.tg-chart.tg-anim.tg-in .tg-chart-dot,
.tg-chart.tg-anim.tg-in .tg-chart-valuelabel,
.tg-chart.tg-anim.tg-in .tg-chart-axislabel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .tg-chart.tg-anim * { transition: none !important; }
}