/*
 * Chartist.js v1.5.0 core stylesheet.
 *
 * Base rules vendored from https://ga.jspm.io/npm:chartist@1.5.0/dist/index.css
 * plus Wenmar design-system overrides below. Overrides use the same CSS
 * variable tokens as the rest of the Shop UI so charts adapt to light/dark
 * and the Wenmar red theme automatically.
 */

.ct-label { fill: var(--text-secondary); color: var(--text-secondary); font-size: 0.75rem; line-height: 1; }
.ct-chart-bar .ct-label, .ct-chart-line .ct-label { display: flex; }
.ct-chart-donut .ct-label, .ct-chart-pie .ct-label { dominant-baseline: central; }
.ct-label.ct-horizontal.ct-start { align-items: flex-end; justify-content: flex-start; text-align: left; }
.ct-label.ct-horizontal.ct-end { align-items: flex-start; justify-content: flex-start; text-align: left; }
.ct-label.ct-vertical.ct-start { align-items: flex-end; justify-content: flex-end; text-align: right; }
.ct-label.ct-vertical.ct-end { align-items: flex-end; justify-content: flex-start; text-align: left; }
.ct-chart-bar .ct-label.ct-horizontal.ct-start { align-items: flex-end; justify-content: center; text-align: center; }
.ct-chart-bar .ct-label.ct-horizontal.ct-end { align-items: flex-start; justify-content: center; text-align: center; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start { align-items: flex-end; justify-content: flex-start; text-align: left; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end { align-items: flex-start; justify-content: flex-start; text-align: left; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start { align-items: center; justify-content: flex-end; text-align: right; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end { align-items: center; justify-content: flex-start; text-align: left; }
.ct-grid { stroke: var(--border-default); stroke-width: 1px; stroke-dasharray: 2px; }
.ct-grid-background { fill: none; }
.ct-point { stroke-width: 10px; stroke-linecap: round; }
.ct-line { fill: none; stroke-width: 4px; }
.ct-area { stroke: none; fill-opacity: 0.1; }
.ct-bar { fill: none; stroke-width: 10px; }
.ct-slice-donut { fill: none; stroke-width: 60px; }

/* Series color tokens (shared by the chart series and the JS-rendered legend) */
:root {
  --chart-series-a: #dc2626;
  --chart-series-b: #f97316;
  --chart-series-c: #84cc16;
  --chart-series-d: #0ea5e9;
  --chart-series-e: #8b5cf6;
  --chart-series-f: #ef4444;
}

/* Wenmar series palette (maps to Wenmar red theme + supporting colors) */
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut { stroke: #dc2626; }
.ct-series-a .ct-area, .ct-series-a .ct-slice-pie { fill: #dc2626; }
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut { stroke: #f97316; }
.ct-series-b .ct-area, .ct-series-b .ct-slice-pie { fill: #f97316; }
.ct-series-c .ct-bar, .ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-slice-donut { stroke: #84cc16; }
.ct-series-c .ct-area, .ct-series-c .ct-slice-pie { fill: #84cc16; }
.ct-series-d .ct-bar, .ct-series-d .ct-line, .ct-series-d .ct-point, .ct-series-d .ct-slice-donut { stroke: #0ea5e9; }
.ct-series-d .ct-area, .ct-series-d .ct-slice-pie { fill: #0ea5e9; }
.ct-series-e .ct-bar, .ct-series-e .ct-line, .ct-series-e .ct-point, .ct-series-e .ct-slice-donut { stroke: #8b5cf6; }
.ct-series-e .ct-area, .ct-series-e .ct-slice-pie { fill: #8b5cf6; }
.ct-series-f .ct-bar, .ct-series-f .ct-line, .ct-series-f .ct-point, .ct-series-f .ct-slice-donut { stroke: #ef4444; }
.ct-series-f .ct-area, .ct-series-f .ct-slice-pie { fill: #ef4444; }

/* Aspect-ratio helpers (structural, unchanged from upstream) */
.ct-square { display: block; position: relative; width: 100%; }
.ct-square:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 100%; }
.ct-square:after { content: ""; display: table; clear: both; }
.ct-square>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-second { display: block; position: relative; width: 100%; }
.ct-minor-second:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 93.75%; }
.ct-minor-second:after { content: ""; display: table; clear: both; }
.ct-minor-second>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-second { display: block; position: relative; width: 100%; }
.ct-major-second:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 88.8888888889%; }
.ct-major-second:after { content: ""; display: table; clear: both; }
.ct-major-second>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-third { display: block; position: relative; width: 100%; }
.ct-minor-third:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 83.3333333333%; }
.ct-minor-third:after { content: ""; display: table; clear: both; }
.ct-minor-third>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-third { display: block; position: relative; width: 100%; }
.ct-major-third:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 80%; }
.ct-major-third:after { content: ""; display: table; clear: both; }
.ct-major-third>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-perfect-fourth { display: block; position: relative; width: 100%; }
.ct-perfect-fourth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 75%; }
.ct-perfect-fourth:after { content: ""; display: table; clear: both; }
.ct-perfect-fourth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-perfect-fifth { display: block; position: relative; width: 100%; }
.ct-perfect-fifth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 66.6666666667%; }
.ct-perfect-fifth:after { content: ""; display: table; clear: both; }
.ct-perfect-fifth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-sixth { display: block; position: relative; width: 100%; }
.ct-minor-sixth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 62.5%; }
.ct-minor-sixth:after { content: ""; display: table; clear: both; }
.ct-minor-sixth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-golden-section { display: block; position: relative; width: 100%; }
.ct-golden-section:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 61.804697157%; }
.ct-golden-section:after { content: ""; display: table; clear: both; }
.ct-golden-section>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-sixth { display: block; position: relative; width: 100%; }
.ct-major-sixth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 60%; }
.ct-major-sixth:after { content: ""; display: table; clear: both; }
.ct-major-sixth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-seventh { display: block; position: relative; width: 100%; }
.ct-minor-seventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 56.25%; }
.ct-minor-seventh:after { content: ""; display: table; clear: both; }
.ct-minor-seventh>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-seventh { display: block; position: relative; width: 100%; }
.ct-major-seventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 53.3333333333%; }
.ct-major-seventh:after { content: ""; display: table; clear: both; }
.ct-major-seventh>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-octave { display: block; position: relative; width: 100%; }
.ct-octave:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 50%; }
.ct-octave:after { content: ""; display: table; clear: both; }
.ct-octave>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-tenth { display: block; position: relative; width: 100%; }
.ct-major-tenth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 40%; }
.ct-major-tenth:after { content: ""; display: table; clear: both; }
.ct-major-tenth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-eleventh { display: block; position: relative; width: 100%; }
.ct-major-eleventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 37.5%; }
.ct-major-eleventh:after { content: ""; display: table; clear: both; }
.ct-major-eleventh>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-twelfth { display: block; position: relative; width: 100%; }
.ct-major-twelfth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 33.3333333333%; }
.ct-major-twelfth:after { content: ""; display: table; clear: both; }
.ct-major-twelfth>svg { display: block; position: absolute; top: 0; left: 0; }
.ct-double-octave { display: block; position: relative; width: 100%; }
.ct-double-octave:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 25%; }
.ct-double-octave:after { content: ""; display: table; clear: both; }
.ct-double-octave>svg { display: block; position: absolute; top: 0; left: 0; }