/* Inline-SVG chart styling (ColumnChart, LineChart). Global because the SVG
   interiors are emitted as MarkupString — Razor reserves <text> — so scoped
   component CSS can't reach them. All colour flows from design tokens so charts
   theme automatically in dark mode. */

.column-chart,
.line-chart {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
}

/* Axes & gridlines — recessive, hairline, solid */
.cc-grid,
.lc-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.cc-baseline,
.lc-baseline {
    stroke: var(--text-muted);
    stroke-width: 1;
}

.cc-axis,
.cc-xlabel,
.lc-axis,
.lc-xlabel {
    fill: var(--text-muted);
    font-size: 13px;
}

.cc-axis,
.lc-axis {
    font-variant-numeric: tabular-nums;
}

.cc-value,
.lc-value {
    fill: var(--text-color);
    font-size: 14px;
    font-weight: 600;
}

/* Column marks */
.cc-bar {
    transition: opacity 0.12s ease;
}

.cc-bar--brand {
    fill: var(--primary);
}

.cc-bar--present {
    fill: var(--status-paid-solid);
}

.cc-bar--muted {
    fill: var(--border);
    opacity: 0.55;
}

.cc-bar:hover {
    opacity: 0.82;
}

/* A trailing (front) bar in a grouped pair carries a 2px surface ring so it
   reads as sitting in front of the bar it slightly overlaps. */
.cc-bar--front {
    stroke: var(--card-bg);
    stroke-width: 2;
}

/* Accent hues — status meaning (collected = paid green, owed = overdue amber).
   One class serves both the SVG bar (fill) and the HTML legend swatch
   (background); the irrelevant property is simply ignored per element. */
.chart-accent--collected {
    fill: var(--status-paid-solid);
    background: var(--status-paid-solid);
}

.chart-accent--owed {
    fill: var(--status-overdue-solid);
    background: var(--status-overdue-solid);
}

/* HTML legend (crisper than SVG text, especially on mobile) */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted);
}

.chart-legend-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    flex: none;
}

/* Line marks */
.lc-area {
    fill: var(--primary);
    opacity: 0.1;
}

.lc-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lc-dot {
    fill: var(--primary);
    stroke: var(--card-bg);
    stroke-width: 2;
}

.lc-area--present {
    fill: var(--status-paid-solid);
    opacity: 0.12;
}

.lc-line--present {
    stroke: var(--status-paid-solid);
}

.lc-dot--present {
    fill: var(--status-paid-solid);
}