/* Componenta Chart din MIAN (https://mian.ro/components/chart), MIAN License 1.0.
   Copiată din https://mian.ro/api/v1/components/chart/source; tokenii --mn-*
   sunt legați mai jos de culorile și fontul calculatorsolar.ro. */
:root{
  --mn-font:var(--ui); --mn-fg:var(--ink); --mn-bg:var(--bg); --mn-muted:var(--muted);
  --mn-border:var(--line); --mn-border-w:1px; --mn-surface:var(--card); --mn-surface-2:var(--card-3);
  --mn-series-1:var(--accent); --mn-series-2:var(--muted); --mn-series-3:var(--green); --mn-series-4:var(--red);
  --mn-radius-field:6px; --mn-shadow-md:0 8px 24px -10px rgba(16,18,22,.28); --mn-ring:var(--accent);
  --mn-duration:.15s; --mn-ease:cubic-bezier(.2,.7,.3,1); --mn-spring:cubic-bezier(.2,.9,.25,1.05);
}
.mn-chart { margin: 0; display: grid; gap: .75rem; min-width: 0; font: 400 .75rem/1.3 var(--mn-font); color: var(--mn-muted); }
.mn-chart figcaption { font-size: .75rem; color: var(--mn-muted); }
.mn-chart-bars {
  --h: 10rem; --max: 100;
  display: flex; align-items: stretch; gap: var(--mn-bar-gap, 6px);
  height: var(--h); padding-bottom: 1.25rem; position: relative;
  background: repeating-linear-gradient(to top, var(--mn-border) 0 1px, transparent 1px calc((var(--h) - 1.25rem) / 4));
  background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat;
}
.mn-bar { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.mn-bar::before {
  content: ""; display: block;
  height: calc(var(--v, 0) / var(--max) * 100%);
  border-radius: var(--mn-bar-radius, min(6px, var(--mn-radius-field))) var(--mn-bar-radius, min(6px, var(--mn-radius-field))) 0 0;
  background: var(--mn-bar-fill, color-mix(in oklab, var(--mn-series-1) 30%, transparent));
  transition: height 500ms var(--mn-spring), background-color var(--mn-duration) var(--mn-ease);
}
.mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }
.mn-bar > span { position: absolute; left: 50%; bottom: -1.25rem; translate: -50% 0; white-space: nowrap; font-size: .6875rem; }
.mn-bar[data-value]::after {
  content: attr(data-value); position: absolute; left: 50%; bottom: calc(var(--v, 0) / var(--max) * (100%) + 4px); translate: -50% 0;
  padding: 2px 6px; border-radius: 4px; background: var(--mn-fg); color: var(--mn-bg); font-size: .6875rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity var(--mn-duration) var(--mn-ease);
}
.mn-bar:hover::after, .mn-bar.mn-active::after { opacity: 1; z-index: 2; }
.mn-bar.mn-active::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }
/* The hovered column is marked like the line chart's guide. */
.mn-chart-bars:not(.mn-chart-h) .mn-bar:is(:hover, .mn-active) { background: linear-gradient(color-mix(in oklab, var(--mn-fg) 6%, transparent), color-mix(in oklab, var(--mn-fg) 6%, transparent)) top / 100% calc(100% - 0px) no-repeat; border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }
/* Horizontal bars */
.mn-chart-bars.mn-chart-h { flex-direction: column; height: auto; padding: 0 2.5rem 0 var(--mn-chart-label, 4.5rem); gap: var(--mn-bar-gap, 8px); background: none; }
.mn-chart-h .mn-bar { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; height: 1.1rem; }
.mn-chart-h .mn-bar::before { height: 100%; width: calc(var(--v, 0) / var(--max) * 100%); border-radius: 0 var(--mn-bar-radius, 4px) var(--mn-bar-radius, 4px) 0; transition: width 500ms var(--mn-spring); }
.mn-chart-h .mn-bar > span { left: calc(var(--mn-chart-label, 4.5rem) * -1); bottom: auto; top: 50%; translate: 0 -50%; width: calc(var(--mn-chart-label, 4.5rem) - .5rem); text-align: end; overflow: hidden; text-overflow: ellipsis; }
.mn-chart-h .mn-bar[data-value]::after { left: calc(var(--v, 0) / var(--max) * 100% + 6px); bottom: auto; top: 50%; translate: 0 -50%; opacity: 1; background: none; color: var(--mn-muted); padding: 0; }

/* Line / area: mian.js draws the paths from data-values */
.mn-chart-line { display: block; width: 100%; height: var(--h, 10rem); overflow: visible; }
.mn-chart-line .mn-grid-line { stroke: var(--mn-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mn-chart-line .mn-line { fill: none; stroke: var(--mn-series-1); stroke-width: var(--mn-line-width, 2px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mn-chart-line .mn-line.mn-s2 { stroke: var(--mn-series-2); }
.mn-chart-line .mn-area { fill: var(--mn-series-1); opacity: var(--mn-area-opacity, .12); }
.mn-chart-line .mn-area.mn-s2 { fill: var(--mn-series-2); }
.mn-chart-line .mn-point { fill: var(--mn-surface); stroke: var(--mn-series-1); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: var(--mn-point-opacity, 0); }
.mn-chart-line .mn-point.mn-s2 { stroke: var(--mn-series-2); }
.mn-chart-line { cursor: crosshair; touch-action: pan-y; }
.mn-chart-line:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }
.mn-chart-line .mn-chart-guide { stroke: var(--mn-chart-guide, color-mix(in oklab, var(--mn-fg) 45%, transparent)); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.mn-chart-line .mn-point.mn-active { r: 4.5; }
/* The hover tip: label, then one row per series with its colour. */
.mn-chart-tip {
  position: absolute; z-index: 5; pointer-events: none; display: grid; gap: .2rem; min-width: 6rem; max-width: 16rem;
  padding: .45rem .6rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-md);
  font: 400 .75rem/1.35 var(--mn-font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mn-chart-tip[hidden] { display: none; }
.mn-chart-tip strong { font-weight: 600; color: var(--mn-fg); }
.mn-chart-tip-row { display: flex; align-items: center; gap: .4rem; color: var(--mn-muted); }
.mn-chart-tip-row b { margin-inline-start: auto; padding-inline-start: .75rem; color: var(--mn-fg); font-weight: 600; }
.mn-chart-tip-row i { width: .55rem; height: .55rem; flex: none; border-radius: 2px; background: var(--mn-series-1); }
.mn-chart-tip-row i.mn-s2 { background: var(--mn-series-2); }
.mn-chart-bars[tabindex]:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }
.mn-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.mn-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mn-legend li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--_s, var(--mn-series-1)); }
.mn-legend li:nth-child(2) { --_s: var(--mn-series-2); } .mn-legend li:nth-child(3) { --_s: var(--mn-series-3); } .mn-legend li:nth-child(4) { --_s: var(--mn-series-4); }

/* Donut: segments are percentages in --s1…--s4 */
.mn-donut {
  --s1: 0; --s2: 0; --s3: 0; --s4: 0; --size: 8rem; --thick: 40%;
  position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(from var(--mn-donut-start, 0deg),
    var(--mn-series-1) 0 calc(var(--s1) * 1%),
    var(--mn-series-2) 0 calc((var(--s1) + var(--s2)) * 1%),
    var(--mn-series-3) 0 calc((var(--s1) + var(--s2) + var(--s3)) * 1%),
    var(--mn-series-4) 0 calc((var(--s1) + var(--s2) + var(--s3) + var(--s4)) * 1%),
    var(--mn-surface-2) 0);
  /* --thick is the ring width as a share of the radius (or a length). */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
          mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
}
.mn-donut-wrap { position: relative; display: inline-grid; place-items: center; }
.mn-donut-wrap > .mn-donut-label { position: absolute; text-align: center; font: 700 1.25rem/1.1 var(--mn-font); color: var(--mn-fg); }
.mn-donut-wrap > .mn-donut-label small { display: block; font-size: .6875rem; font-weight: 500; color: var(--mn-muted); }