text {
    font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
    font-size: 0.9em;
}




/* =========================================================
   Base chart containers
========================================================= */
.chart,
.weekly-load-chart,
.weekly-load-chart.grouped,
.progress-chart,
.target-band-chart {
    font-family: system-ui, sans-serif;
}
.weekly-load-chart {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 8px;
}
.chart,
.target-band-chart {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* =========================================================
   Bars (shared)
========================================================= */
.bar,
.session-bar {
    transition: opacity 0.2s ease, filter 0.2s ease;
/*    fill: #69b3a2;*/
}

    .bar:hover,
    .session-bar:hover {
        opacity: 0.85;
        filter: brightness(0.85);
        cursor: pointer;
    }

/* =========================================================
   Grouping behavior
========================================================= */
.bar-group,
.day-group {
    pointer-events: none;
}

    .bar-group .bar,
    .day-group .session-bar {
        pointer-events: all;
    }

/* =========================================================
   Value labels
========================================================= */
.value {
    font-size: 12px;
    fill: #000;
    text-anchor: middle;
    pointer-events: none;
}

/* =========================================================
   Axes
========================================================= */
.x-axis path,
.y-axis path,
.x-axis line,
.y-axis line {
    stroke: #999;
}

.x-axis text,
.y-axis text {
    font-size: 11px;
    fill: #444;
}

/* =========================================================
   Axis labels
========================================================= */
.axis-label {
    font-size: 12px;
    font-weight: 600;
    fill: #222;
    text-anchor: middle;
}

/* =========================================================
   Reference lines & labels
========================================================= */
.ref-line {
    stroke-width: 1;
    stroke-dasharray: 4 2;
}

.ref-max {
    stroke: crimson;
}

.ref-avg {
    stroke: darkgreen;
}

.ref-min {
    stroke: dodgerblue;
}

.ref-label {
    font-size: 11px;
    fill: currentColor;
    stroke: none;
}
.ref-label-max {
    fill: crimson;
}

.ref-label-avg {
    fill: darkgreen;
}

.ref-label-min {
    fill: dodgerblue;
}


/* =========================================================
   Legend
========================================================= */
.legend {
    text-anchor: left;
}

.legend-item {
    cursor: default;
}

.legend-swatch,
.legend-rect {
    stroke: #666;
    stroke-width: 0.5;
}
.legend-swatch-accelerations {
    fill: #f39c12;
}

.legend-swatch-decelerations {
    fill: #3498db;
}
.legend-label {
    font-size: 11px;
    fill: #444;
    alignment-baseline: left;
}

/* =========================================================
   Session bar colors (grouped charts)
========================================================= */
/* Match */
.session-bar.match.metric-accelerations {
    fill: #e63946;
}

.session-bar.match.metric-decelerations {
    fill: #f28b8b;
}

/* Training */
.session-bar.training.metric-accelerations {
    fill: #457b9d;
}

.session-bar.training.metric-decelerations {
    fill: #a3cef1;
}

/* Legend swatches */
.legend-rect.match.metric-accelerations {
    fill: #e63946;
}

.legend-rect.match.metric-decelerations {
    fill: #f28b8b;
}

.legend-rect.training.metric-accelerations {
    fill: #457b9d;
}

.legend-rect.training.metric-decelerations {
    fill: #a3cef1;
}

/* =========================================================
   Target-band chart specifics
========================================================= */
.benchmark-band {
    fill: #d3d3d3;
    opacity:0.3;
}

.benchmark-line {
    stroke: red;
    stroke-width: 3;
}

/* =========================================================
   Chart legend (benchmark)
========================================================= */
.legend-band {
    fill: #d3d3d3;
    opacity: 0.3;
}

.legend-line {
    stroke: red;
    stroke-width: 3;
}

/* =========================================================
   Progress box
========================================================= */
svg .progress-box {
    rx: 8px;
    stroke: #ccc;
    stroke-width: 1px;
}

svg .progress-text {
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

svg .progress-text-primary {
    font-size: 25px;
    font-weight: 600;
}

svg .progress-text-secondary {
    font-size: 20px;
    opacity: 0.9;
}

.progress-box {
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-left: 6px solid #457b9d; /* linker Rand */
    padding: 12px 16px;
    min-height: 60px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.progress-text {
    color: #fff;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.progress-text-primary {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.progress-text-secondary {
    font-size: 0.8rem;
    line-height: 1.2;
}