/*
 * Centriva chart kit — theme tokens + layout for the inline-SVG components in
 * Components/Charts/. No JS, no chart library. Colours are CSS custom properties re-pointed under
 * [data-bs-theme="dark"] (Bootstrap 5.3's switch) and @media print.
 */
:root {
    /* categorical — distinct, colour-blind-safe-ish, print-legible */
    --chart-1: #1f6f8b;   /* teal — primary */
    --chart-2: #c98a2b;   /* ochre — secondary */
    --chart-3: #5c6b73;   /* slate — tertiary */
    --chart-4: #7d5ba6;   /* violet */
    --chart-5: #3a7d5d;   /* green */

    /* semantic */
    --chart-positive: #2f8f57;
    --chart-negative: #b23b3b;
    --chart-neutral:  #5c6b73;
    --chart-muted:    #aeb7bd;

    /* arrears-age ramp (current → 90+), used by the stacked bar */
    --chart-age-0:  #7fb4a6;
    --chart-age-30: #e0c37a;
    --chart-age-60: #e0a45e;
    --chart-age-90: #cf7b57;
    --chart-age-90p:#b23b3b;

    /* chrome */
    --chart-grid:  #e6e9ec;
    --chart-axis:  #c3c9ce;
    --chart-ink:   #47535c;
    --chart-plot-bg: transparent;
    --chart-band:  color-mix(in srgb, var(--chart-1) 12%, transparent);
}

[data-bs-theme="dark"] {
    --chart-1: #4bb3d4;
    --chart-2: #e6ad55;
    --chart-3: #9aa7af;
    --chart-4: #b18ed6;
    --chart-5: #5fbd8c;
    --chart-positive: #57c98a;
    --chart-negative: #e37070;
    --chart-neutral:  #9aa7af;
    --chart-muted:    #6c7a83;

    --chart-age-0:  #6fae9f;
    --chart-age-30: #d9b56d;
    --chart-age-60: #d99a58;
    --chart-age-90: #cf7b57;
    --chart-age-90p:#e06a6a;

    --chart-grid:  #2b3238;
    --chart-axis:  #3d474e;
    --chart-ink:   #aeb8bf;
    --chart-band:  color-mix(in srgb, var(--chart-1) 18%, transparent);
}

@media print {
    :root {
        --chart-grid: #d8dcdf;
        --chart-axis: #9aa2a8;
        --chart-ink:  #333;
        --chart-band: #eef2f4;
    }
    .cv-chart svg { break-inside: avoid; }
}

.cv-chart { margin: 0; }
.cv-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cv-chart text { font-family: inherit; fill: var(--chart-ink); }
.cv-chart .cv-grid { stroke: var(--chart-grid); stroke-width: 1; }
.cv-chart .cv-axis { stroke: var(--chart-axis); stroke-width: 1; }
.cv-chart .cv-zero { stroke: var(--chart-axis); stroke-dasharray: 3 3; stroke-width: 1; }
.cv-chart .cv-band { fill: var(--chart-band); }
.cv-chart .cv-empty { fill: var(--chart-muted); font-style: italic; }

.cv-chart figcaption.cv-a11y,
.cv-a11y-table {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* stat tile */
.cv-stat { display: flex; flex-direction: column; gap: .15rem; }
.cv-stat__label { font-size: .78rem; color: var(--bs-secondary-color, #6c757d); text-transform: uppercase; letter-spacing: .03em; }
.cv-stat__value { font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.cv-stat__value--positive { color: var(--chart-positive); }
.cv-stat__value--negative { color: var(--chart-negative); }
.cv-stat__sub { font-size: .82rem; color: var(--bs-secondary-color, #6c757d); }

/* trend pill */
.cv-trend { display: inline-flex; align-items: baseline; gap: .2rem; font-size: .8rem; font-weight: 600; }
.cv-trend--up { color: var(--chart-positive); }
.cv-trend--down { color: var(--chart-negative); }
.cv-trend--flat { color: var(--chart-neutral); }
.cv-trend__arrow { font-size: .7em; }

/* donut legend */
.cv-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; margin-top: .5rem; }
.cv-legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.cv-legend__swatch { width: .7rem; height: .7rem; border-radius: 2px; flex: none; }