/*
 * Charts-only styling for the vendored Radzen chart components (RH.ClaimFlow finance reports).
 * We deliberately do NOT ship the Radzen theme CSS — MudBlazor remains the app's UI framework. Series
 * colours are set inline on each series in markup; this file only makes axes, legends, and tooltips read
 * cleanly in the app's own palette, in both light and dark mode. Scoped to Radzen's rz-chart* / rz-legend*
 * classes so nothing here touches MudBlazor elements.
 */

.rz-chart {
    font-family: 'Open Sans', system-ui, sans-serif;
    width: 100%;
}

/* Axis + series labels — Reimagined Health dark blue so they read clearly */
.rz-chart text,
.rz-chart .rz-axis text,
.rz-chart .rz-tick text {
    fill: #003357 !important;
    font-size: 12px;
}

.rz-chart .rz-title text,
.rz-chart .rz-axis-title text {
    fill: #003357 !important;
    font-weight: 700;
}

/* Axis lines + ticks in dark blue; interior gridlines stay a light reference tone */
.rz-chart .rz-axis line,
.rz-chart .rz-axis path,
.rz-chart .rz-tick line {
    stroke: #003357;
    stroke-width: 1;
}

.rz-chart .rz-gridline,
.rz-chart .rz-grid-line {
    stroke: #d7dee7;
    stroke-width: 1;
}

/* Legend */
.rz-legend {
    font-size: 12px;
    color: var(--text-2, #4a5568);
}

.rz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 0;
    cursor: pointer;
}

.rz-legend-item-marker {
    border-radius: 3px;
}

/* Tooltip */
.rz-chart-tooltip,
.rz-tooltip {
    background: var(--surface, #fff);
    color: var(--text-1, #1a202c);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.14);
    padding: 8px 10px;
    font-size: 12px;
    pointer-events: none;
}

.rz-chart-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-1, #1a202c);
}

.rz-chart-tooltip-item-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
    .rz-chart text { fill: #d4dae2 !important; }
    .rz-chart .rz-title text, .rz-chart .rz-axis-title text { fill: #eef1f5 !important; }
    .rz-chart-tooltip, .rz-tooltip { background: #1f2733; color: #e8ebf0; border-color: #2d3748; }
    .rz-chart-tooltip-title { color: #e8ebf0; }
    .rz-chart .rz-gridline, .rz-chart .rz-grid-line, .rz-chart .rz-axis line, .rz-chart .rz-tick line { stroke: #3a4756; }
}