/*
 * Shrink-wrapped flex box so Uncode column alignment can position the whole
 * chart. Text Alignment (align_*) and Horizontal Position (pos-*) are separate
 * in Uncode — at 100% content width, pos-* alone does not move children, and
 * align_left would latch an inline-flex chart to the left. We honor both:
 * align_* via margins, and pos-center even when text is align_left.
 */
.udc-donut-chart {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 100%;
    overflow: visible;
    width: max-content;
}

.udc-donut-chart.udc-legend-beside {
    flex-direction: row;
}

.udc-donut-chart.udc-legend-below {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
}

/* Uncode Text Alignment on the parent column */
.align_left .udc-donut-chart {
    margin-left: 0;
    margin-right: auto;
}

.align_center .udc-donut-chart {
    margin-left: auto;
    margin-right: auto;
}

.align_right .udc-donut-chart {
    margin-left: auto;
    margin-right: 0;
}

/* Uncode Horizontal Position: Center — wins over align_left for this element */
.wpb_column.pos-center .udc-donut-chart,
.pos-center > .uncoltable .udc-donut-chart,
.pos-center .uncont > .udc-donut-chart {
    margin-left: auto;
    margin-right: auto;
}

.wpb_column.pos-left .udc-donut-chart,
.pos-left .uncont > .udc-donut-chart {
    margin-left: 0;
    margin-right: auto;
}

.wpb_column.pos-right .udc-donut-chart,
.pos-right .uncont > .udc-donut-chart {
    margin-left: auto;
    margin-right: 0;
}

.udc-ring-wrapper {
    flex-shrink: 0;
    overflow: visible;
    position: relative;
}

.udc-ring-svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

/* Padded leader SVG is centered on the ring box — not offset on the page. */
.udc-ring-wrapper--leaders .udc-ring-svg {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

/* Callouts overflow the ring box by design (keeps the legend tight below),
   but labels above the ring need real clearance so they don't bleed into
   the row above. Stub + label height ≈ 3rem. */
.udc-ring-wrapper--leaders {
    margin-top: 3rem;
}

.udc-segment {
    transition: stroke-dasharray 0.05s linear;
}

/* Collapsed start state for scroll-reveal charts. Final values are applied
   per-segment via inline styles in donut-chart.js so instances never share state. */
[data-udc-animate="yes"] .udc-segment {
    stroke-dasharray: 0 10000;
    transition: stroke-dasharray 1.2s ease-out;
}

[data-udc-animate="yes"].udc-in-view .udc-segment {
    stroke-dasharray: var(--udc-final-dasharray, 0 10000);
}

.udc-leader-dot {
    stroke: none;
}

.udc-leader-line {
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-width: 1.25;
}

.udc-leader-label {
    dominant-baseline: alphabetic;
    fill: var(--udc-leader-color, currentColor);
    font-size: var(--udc-leader-font-size, 1rem);
    font-weight: var(--udc-leader-font-weight, inherit);
}

/* Keep callouts hidden while the ring draws so they don't float alone. */
[data-udc-animate="yes"] .udc-leader-dot,
[data-udc-animate="yes"] .udc-leader-line,
[data-udc-animate="yes"] .udc-leader-label {
    opacity: 0;
    transition: opacity 0.35s ease-out;
}

[data-udc-animate="yes"].udc-leaders-visible .udc-leader-dot,
[data-udc-animate="yes"].udc-leaders-visible .udc-leader-line,
[data-udc-animate="yes"].udc-leaders-visible .udc-leader-label {
    opacity: 1;
}

.udc-center-label {
    color: var(--udc-center-label-color, currentColor);
    font-size: var(--udc-center-label-font-size, 2rem);
    font-weight: var(--udc-center-label-font-weight, inherit);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Font-weight CSS vars are omitted when set to "inherit" in the editor. */

/* Shrink-wrap so Uncode column text-align:center cannot stretch/center
   labels away from the dots (mockup: dot | label, amount under label). */
.udc-legend {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
    text-align: left;
    width: max-content;
}

.udc-legend-row {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    text-align: left;
}

.udc-legend-dot {
    border-radius: 50%;
    display: block;
    flex: 0 0 20px;
    height: 20px;
    margin-top: 0.3em;
    width: 20px;
}

.udc-legend-body {
    align-items: flex-start;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 0.1em;
    min-width: 0;
    text-align: left;
}

.udc-legend-label,
.udc-legend-amount,
.udc-legend-percentage {
    display: block;
    text-align: left;
    width: auto;
}

.udc-legend-label {
    color: var(--udc-legend-label-color, currentColor);
    font-size: var(--udc-legend-label-font-size, 1rem);
    font-weight: var(--udc-legend-label-font-weight, inherit);
    line-height: 1.3;
}

.udc-legend-amount {
    color: var(--udc-legend-amount-color, currentColor);
    font-size: var(--udc-legend-amount-font-size, 1rem);
    font-weight: var(--udc-legend-amount-font-weight, inherit);
    line-height: 1.3;
}

.udc-legend-percentage {
    color: var(--udc-legend-percentage-color, currentColor);
    font-size: var(--udc-legend-percentage-font-size, 0.875rem);
    font-weight: var(--udc-legend-percentage-font-weight, inherit);
    line-height: 1.3;
}

/*
 * Table legend: dot | label | amount | % on one line, divider under each row.
 * display:contents flattens row/body wrappers so every cell shares the same
 * grid tracks and the amount/% columns align across rows.
 */
.udc-legend--table {
    display: grid;
    gap: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.udc-legend--table.udc-legend--has-pct {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.udc-legend--table .udc-legend-row,
.udc-legend--table .udc-legend-body {
    display: contents;
}

/* Column spacing via padding (not grid gap) so the divider row below spans
   the full width with no breaks. */
.udc-legend--table .udc-legend-dot,
.udc-legend--table .udc-legend-label,
.udc-legend--table .udc-legend-amount,
.udc-legend--table .udc-legend-percentage {
    align-self: center;
    padding: 0.55em 1.5rem 0.55em 0;
}

.udc-legend--table .udc-legend-percentage,
.udc-legend--table:not(.udc-legend--has-pct) .udc-legend-amount {
    padding-right: 0;
}

.udc-legend--table .udc-legend-dot {
    margin-right: 1rem;
    margin-top: 0;
    padding: 0;
}

/* One continuous divider line per row (pseudo-element becomes a grid item
   spanning every column, since the row itself is display:contents). */
.udc-legend--table .udc-legend-row::after {
    border-bottom: 1px solid var(--udc-legend-divider-color, currentColor);
    content: '';
    grid-column: 1 / -1;
}

.udc-legend--table .udc-legend-row:last-child::after {
    border-bottom: none;
}

@media (max-width: 782px) {
    .udc-donut-chart.udc-legend-beside {
        flex-direction: column;
        align-items: flex-start;
    }

    .udc-ring-wrapper {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-udc-animate="yes"] .udc-segment {
        stroke-dasharray: var(--udc-final-dasharray, 0 10000) !important;
        transition: none;
    }

    [data-udc-animate="yes"] .udc-leader-dot,
    [data-udc-animate="yes"] .udc-leader-line,
    [data-udc-animate="yes"] .udc-leader-label {
        opacity: 1 !important;
        transition: none;
    }
}