/* Pure CSS/SVG chart components (PIMS.Client/Pages/Shared/Charts) - no JS charting library.
   Colors read Radzen's own theme custom properties so charts stay in sync with light/dark/
   compact-view without any theme-specific code here. */

.pims-chart {
    width: 100%;
    box-sizing: border-box;
}

.pims-chart--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: .9rem;
}

.pims-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-bottom: .6rem;
    font-size: .8rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.pims-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.pims-chart-legend__item i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- Bar chart */

.pims-bar-chart__plot {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: var(--chart-height, 240px);
    padding-top: 1rem;
    border-bottom: 1px solid var(--rz-border, rgba(127, 127, 127, .25));
}

.pims-bar-chart__gridlines {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.pims-bar-chart__gridline {
    border-top: 1px dashed var(--rz-border, rgba(127, 127, 127, .15));
    height: 0;
}

.pims-bar-chart__group {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    height: 100%;
    justify-content: flex-end;
}

.pims-bar-chart__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 100%;
    width: 100%;
}

.pims-bar-chart__bar {
    width: 100%;
    max-width: 34px;
    height: var(--bar-pct);
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: pims-bar-grow .55s cubic-bezier(.22, 1, .36, 1) backwards;
    transition: opacity .15s, filter .15s;
    cursor: default;
}

.pims-bar-chart__bar:hover {
    opacity: .85;
    filter: brightness(1.08);
}

.pims-bar-chart__label {
    margin-top: .4rem;
    font-size: .7rem;
    color: var(--rz-text-secondary-color, #6b7280);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@keyframes pims-bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- Line / Area */

.pims-line-chart svg,
.pims-area-chart svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.pims-chart-gridline {
    stroke: var(--rz-border, rgba(127, 127, 127, .18));
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.pims-line-chart__path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: pims-line-draw 1.1s ease-out forwards;
}

@keyframes pims-line-draw {
    to { stroke-dashoffset: 0; }
}

.pims-line-chart__dot {
    opacity: 0;
    animation: pims-fade-in .3s ease-out forwards;
}

.pims-area-chart__fill {
    opacity: 0;
    animation: pims-fade-in .8s ease-out forwards;
}

@keyframes pims-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pims-chart__categories {
    display: flex;
    justify-content: space-between;
    gap: .25rem;
    margin-top: .5rem;
    font-size: .7rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.pims-chart__categories span {
    flex: 1 1 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- Pie / Donut */

.pims-pie-chart {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pims-pie-chart__wedge {
    transform-box: fill-box;
    transform-origin: center;
    animation: pims-pop-in .4s cubic-bezier(.22, 1, .36, 1) backwards;
    transition: opacity .15s, filter .15s;
    cursor: default;
    stroke: var(--rz-base-background-color, #fff);
    stroke-width: 1.5;
}

.pims-pie-chart__wedge:hover {
    opacity: .85;
    filter: brightness(1.08);
}

@keyframes pims-pop-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.pims-pie-chart__legend {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .8rem;
    min-width: 150px;
    color: var(--rz-text-color, inherit);
}

.pims-pie-chart__legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pims-pie-chart__legend-item i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.pims-pie-chart__legend-pct {
    margin-left: auto;
    color: var(--rz-text-secondary-color, #6b7280);
    font-variant-numeric: tabular-nums;
}

.pims-donut-chart__ring {
    position: relative;
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
}

.pims-donut-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.pims-donut-chart__center-value {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--rz-text-color, inherit);
}

.pims-donut-chart__center-sub {
    font-size: .7rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 599px) {
    .pims-bar-chart__plot {
        gap: .25rem;
        height: 190px;
    }

    .pims-bar-chart__label {
        font-size: .6rem;
    }

    .pims-chart__categories {
        font-size: .6rem;
    }

    .pims-pie-chart {
        flex-direction: column;
    }

    .pims-pie-chart__legend {
        width: 100%;
    }

    .pims-donut-chart__ring,
    .pims-pie-chart svg {
        width: 150px;
        height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pims-bar-chart__bar,
    .pims-line-chart__path,
    .pims-line-chart__dot,
    .pims-area-chart__fill,
    .pims-pie-chart__wedge {
        animation: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
        transform: none !important;
    }
}