/* ==========================================
   ULTRAKIT PIE CHART — Premium
   ========================================== */

.ultrakit-pie-wrapper {
    --pie-text: #2d2d3a;
    --pie-bg: #ffffff;
    position: relative;
    width: 100%;
    padding: 30px;
    border-radius: 20px;
    box-sizing: border-box;
    color: var(--pie-text);
    font-family: inherit;
}
.ultrakit-pie-wrapper *, .ultrakit-pie-wrapper *::before, .ultrakit-pie-wrapper *::after { box-sizing: border-box; }
.ultrakit-pie-empty { padding: 26px; text-align: center; color: #888; background: #f0f0f5; border: 2px dashed #ccc; border-radius: 10px; }

/* ---------- Card styles ---------- */
.pie-card-none     { padding: 0; background: transparent; }
.pie-card-card     { --pie-bg: #ffffff; background: #ffffff; box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.pie-card-dark     { --pie-text: #e8e8f2; --pie-bg: #1a1a2e; background: #1a1a2e; }
.pie-card-gradient { --pie-text: #ffffff; --pie-bg: #5b4bd6; background: linear-gradient(135deg, #6c5ce7, #a29bfe 55%, #fd79a8); }
.pie-card-outline  { --pie-bg: #ffffff; background: transparent; border: 2px solid #e4e4ee; }

.ultrakit-pie-head { text-align: center; margin-bottom: 22px; }
.ultrakit-pie-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--pie-text); }
.ultrakit-pie-sub { margin: 0; font-size: 14px; opacity: 0.75; line-height: 1.5; }

/* ---------- Layout ---------- */
.ultrakit-pie-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 34px; }
.pie-legend-bottom .ultrakit-pie-body { flex-direction: column; flex-wrap: nowrap; }
.pie-legend-top .ultrakit-pie-body { flex-direction: column-reverse; flex-wrap: nowrap; }
.pie-legend-left .ultrakit-pie-body { flex-direction: row-reverse; }
.pie-legend-hidden .ultrakit-pie-body { justify-content: center; }

.ultrakit-pie-chart-box { position: relative; flex: 0 0 auto; width: 300px; max-width: 100%; }
.ultrakit-pie-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.ultrakit-pie-slice { stroke: var(--pie-bg); transition: transform 0.28s ease, opacity 0.25s ease, filter 0.25s ease; cursor: pointer; }
.ultrakit-pie-slice.is-active { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.ultrakit-pie-slice.is-dim { opacity: 0.55; }
.ultrakit-pie-label { fill: #ffffff; font-size: 9px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,0.25); stroke-width: 0.6px; opacity: 0; transition: opacity 0.5s ease; }
.is-drawn .ultrakit-pie-label { opacity: 1; }

/* Centre text (donut / ring / half donut) */
.ultrakit-pie-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; max-width: 52%; }
.pie-type-semi .ultrakit-pie-center { top: auto; bottom: 4%; transform: translateX(-50%); }
.ultrakit-pie-center-value { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--pie-text); }
.ultrakit-pie-center-label { margin-top: 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.65; }
.pie-type-ring .ultrakit-pie-center-value { font-size: 36px; }

/* ---------- Legend ---------- */
.ultrakit-pie-legend { flex: 1 1 210px; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.pie-legend-bottom .ultrakit-pie-legend, .pie-legend-top .ultrakit-pie-legend { flex: 0 0 auto; width: 100%; max-width: 560px; }
.ultrakit-pie-li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; cursor: default; transition: background 0.2s ease, transform 0.2s ease; }
.ultrakit-pie-li.is-active { background: rgba(127,127,160,0.14); transform: translateX(3px); }
.ultrakit-pie-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ultrakit-pie-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ultrakit-pie-val { flex: 0 0 auto; margin-left: 6px; font-weight: 800; white-space: nowrap; }
.ultrakit-pie-pct { font-style: normal; font-size: 12px; opacity: 0.7; min-width: 42px; text-align: right; }

.pie-lg-chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pie-lg-chips .ultrakit-pie-li { border: 1.5px solid rgba(127,127,160,0.3); border-radius: 30px; padding: 6px 14px; gap: 8px; }
.pie-lg-table .ultrakit-pie-li { border-bottom: 1px solid rgba(127,127,160,0.22); border-radius: 0; padding: 10px 4px; }
.pie-lg-table .ultrakit-pie-val { min-width: 54px; text-align: right; }

/* ---------- Tooltip ---------- */
.ultrakit-pie-tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 12px; background: #1a1a2e; color: #ffffff; border-radius: 8px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.ultrakit-pie-tip.is-on { opacity: 1; transform: translateY(0); }
.ultrakit-pie-tip b { font-weight: 800; }

@media (max-width: 640px) {
    .ultrakit-pie-body { flex-direction: column !important; gap: 22px; }
    .ultrakit-pie-legend { width: 100%; flex: 0 0 auto; }
    .ultrakit-pie-wrapper { padding: 22px; }
}