/* Design System Italia — Charts tokens
 * Architecture adapted from IBM Carbon Charts (_tokens.scss, _colors.scss, _color-palette.scss).
 * Palette remapped from Carbon's IBM-brand colors to DSI --it-* semantic roles.
 *
 * Token-name convention preserved so Carbon-familiar devs find what they expect:
 *   --cds-charts-*   chart-wide paint roles
 *   --it-charts-*    DSI-specific additions
 *
 * Depends on: /colors_and_type.css (must be loaded first for --it-color-* primitives).
 */

:root {
  /* -------- Chart surface, grid, axis -------- */
  --cds-charts-background:              var(--it-color-white);
  --cds-charts-background-inverse:      var(--it-color-slate-20);
  --cds-charts-text-primary:            var(--it-color-gray-10);
  --cds-charts-text-secondary:          var(--it-color-slate-28);
  --cds-charts-text-tertiary:           var(--it-color-slate-44);
  --cds-charts-text-on-color:           var(--it-color-white);

  --cds-charts-grid-bg:                 var(--it-color-white);
  --cds-charts-grid-stroke:             var(--it-color-slate-93);
  --cds-charts-grid-stroke-strong:      var(--it-color-slate-85);
  --cds-charts-axis-stroke:             var(--it-color-slate-78);
  --cds-charts-axis-label:              var(--it-color-slate-28);
  --cds-charts-zero-line:               var(--it-color-slate-62);

  /* -------- Tooltip (light) -------- */
  --cds-charts-tooltip-bg:              var(--it-color-white);
  --cds-charts-tooltip-text:            var(--it-color-gray-10);
  --cds-charts-tooltip-border:          var(--it-color-slate-85);
  --cds-charts-tooltip-line-border:     var(--it-color-slate-62);
  --cds-charts-tooltip-shadow:          0 4px 16px rgba(23, 50, 77, .12);

  /* -------- Zones (threshold bands, skeleton, ranges) -------- */
  --cds-charts-zone-fill-01:            var(--it-color-gray-96);
  --cds-charts-zone-stroke-01:          var(--it-color-slate-78);
  --cds-charts-zone-fill-02:            var(--it-color-gray-90);
  --cds-charts-zone-stroke-02:          var(--it-color-slate-68);
  --cds-charts-zone-fill-03:            var(--it-color-gray-83);
  --cds-charts-zone-stroke-03:          var(--it-color-slate-62);

  /* -------- Threshold + alert -------- */
  --cds-charts-alert-stroke:            var(--it-color-orange-40);
  --cds-charts-threshold-stroke:        var(--it-color-red-50);
  --cds-charts-null-state:              var(--it-color-slate-85);

  /* -------- Meter/range indicator -------- */
  --cds-charts-meter-range:             var(--it-color-slate-78);
  --cds-charts-meter-track:             var(--it-color-gray-96);

  /* -------- Skeleton -------- */
  --cds-charts-skeleton-stroke:         var(--it-color-slate-93);

  /* -------- Categorical palette (10 hues)
     Navy-only base: 4 blue tints, then gray for category 5+,
     progressing from dark → light. Clean, monochrome, institutional.
     Emerald / orange / red are reserved for variance (divergent) charts. */
  --cds-charts-1-1-1:  #004080;                  /* navy deep */
  --cds-charts-1-2-1:  #0066cc;                  /* navy mid */
  --cds-charts-1-3-1:  var(--it-color-blue-67);  /* #6aaaeb — navy light */
  --cds-charts-1-4-1:  var(--it-color-blue-87);  /* #bfdfff — navy pale */
  --cds-charts-1-5-1:  var(--it-color-gray-45);  /* #737373 — gray (5th) */
  --cds-charts-1-6-1:  var(--it-color-gray-83);  /* #d4d4d4 — gray pale (6th) */
  --cds-charts-1-7-1:  #004080;                  /* repeat navy deep */
  --cds-charts-1-8-1:  #0066cc;                  /* repeat navy mid */
  --cds-charts-1-9-1:  var(--it-color-blue-67);  /* repeat navy light */
  --cds-charts-1-10-1: var(--it-color-gray-45);  /* repeat gray */

  /* -------- Sequential (monochrome) — for choropleth, heatmaps
     Navy scale: pale → deep, darkest last. */
  --cds-charts-mono-1:  var(--it-color-blue-97);   /* #f2f7fc */
  --cds-charts-mono-2:  var(--it-color-blue-87);   /* #bfdfff */
  --cds-charts-mono-3:  var(--it-color-blue-77);   /* #94c4f5 */
  --cds-charts-mono-4:  var(--it-color-blue-67);   /* #6aaaeb */
  --cds-charts-mono-5:  var(--it-color-blue-57);   /* #4392e0 */
  --cds-charts-mono-6:  #0066cc;                   /* navy mid */
  --cds-charts-mono-7:  #004080;                   /* navy deep */
  --cds-charts-mono-8:  var(--it-color-blue-30);   /* #004d99 */
  --cds-charts-mono-9:  var(--it-color-blue-25);   /* #004080 */
  --cds-charts-mono-10: var(--it-color-blue-20);   /* #003366 */

  /* -------- Divergent — for variance, deltas (red ← → green through light)
     Uses the three DSI system colors: #cc334d (red), #cc7a00 (orange), #008055 (emerald). */
  --cds-charts-div-neg-3: var(--it-color-red-50);     /* #cc334d */
  --cds-charts-div-neg-2: var(--it-color-red-60);
  --cds-charts-div-neg-1: var(--it-color-red-80);
  --cds-charts-div-mid:   var(--it-color-gray-96);
  --cds-charts-div-pos-1: var(--it-color-emerald-77);
  --cds-charts-div-pos-2: var(--it-color-emerald-35);
  --cds-charts-div-pos-3: var(--it-color-emerald-25);  /* #008055 */

  /* -------- Semantic status fills -------- */
  --cds-charts-status-success: var(--it-color-emerald-25);  /* #008055 */
  --cds-charts-status-warning: var(--it-color-orange-40);   /* #cc7a00 */
  --cds-charts-status-danger:  var(--it-color-red-50);      /* #cc334d */
  --cds-charts-status-info:    #0066cc;                     /* navy mid */

  /* -------- Typography inside charts -------- */
  --cds-charts-font-family:   var(--it-font-sans);
  --cds-charts-title-size:    var(--it-font-size-5);
  --cds-charts-title-weight:  var(--it-font-weight-semibold);
  --cds-charts-label-size:    var(--it-font-size-1);
  --cds-charts-label-weight:  var(--it-font-weight-regular);
  --cds-charts-value-size:    var(--it-font-size-2);
  --cds-charts-value-weight:  var(--it-font-weight-semibold);

  /* -------- Layout tokens (chart-specific) -------- */
  --it-charts-padding:       var(--it-spacing-m);
  --it-charts-radius:        var(--it-radius-smooth);
  --it-charts-legend-gap:    var(--it-spacing-s);
  --it-charts-bar-gap:       4px;
  --it-charts-bar-radius:    2px;
  --it-charts-line-width:    2px;
  --it-charts-line-width-em: 3px;
  --it-charts-point-size:    4px;
  --it-charts-point-size-hover: 6px;
}

/* Dark theme: apply via [data-it-charts-theme="dark"] on any ancestor */
[data-it-charts-theme="dark"] {
  --cds-charts-background:          var(--it-color-slate-20);
  --cds-charts-text-primary:        var(--it-color-white);
  --cds-charts-text-secondary:      var(--it-color-slate-85);
  --cds-charts-text-tertiary:       var(--it-color-slate-68);
  --cds-charts-grid-bg:             var(--it-color-slate-20);
  --cds-charts-grid-stroke:         var(--it-color-slate-28);
  --cds-charts-grid-stroke-strong:  var(--it-color-slate-36);
  --cds-charts-axis-stroke:         var(--it-color-slate-44);
  --cds-charts-axis-label:          var(--it-color-slate-85);
  --cds-charts-zero-line:           var(--it-color-slate-52);
  /* Dark-theme tooltip stays light for readability contrast. */
  --cds-charts-tooltip-bg:          var(--it-color-white);
  --cds-charts-tooltip-text:        var(--it-color-gray-10);
  --cds-charts-tooltip-border:      var(--it-color-slate-85);
  --cds-charts-tooltip-line-border: var(--it-color-slate-62);
  --cds-charts-zone-fill-01:        var(--it-color-slate-28);
  --cds-charts-zone-fill-02:        var(--it-color-slate-36);
  --cds-charts-zone-fill-03:        var(--it-color-slate-44);

  /* Categorical: lighter palette for dark bg, same navy + gray logic. */
  --cds-charts-1-1-1:  #0066cc;                  /* navy mid */
  --cds-charts-1-2-1:  var(--it-color-blue-67);  /* navy light */
  --cds-charts-1-3-1:  var(--it-color-blue-77);  /* #94c4f5 */
  --cds-charts-1-4-1:  var(--it-color-blue-87);  /* navy pale */
  --cds-charts-1-5-1:  var(--it-color-gray-64);  /* #a3a3a3 — light gray */
  --cds-charts-1-6-1:  var(--it-color-gray-83);  /* pale gray */
  --cds-charts-1-7-1:  #0066cc;
  --cds-charts-1-8-1:  var(--it-color-blue-67);
  --cds-charts-1-9-1:  var(--it-color-blue-77);
  --cds-charts-1-10-1: var(--it-color-gray-64);
}

/* ============ CHART HOLDER / WRAPPER
 * Mirrors Carbon's .cds--chart-holder / .cds--cc--chart-wrapper split.
 * ============ */
.it-chart-holder {
  position: relative;
  display: block;
  width: 100%;
  /* Sizes to content by default; hosts that need the holder to fill (e.g.
     .kpi-spark) opt in with their own `height: 100%` rule. */
  background-color: transparent;
  color: var(--cds-charts-text-primary);
  font-family: var(--cds-charts-font-family);
  border-radius: var(--it-charts-radius);
}
/* Legacy standalone treatment (chart carries its own rectangle). Rarely used
   now that the demo wraps every chart in .card. */
.it-chart-holder.standalone {
  background-color: var(--cds-charts-background);
  padding: var(--it-charts-padding);
  border: 1px solid var(--it-color-slate-93);
}
/* .filled kept as a no-op alias so existing templates don't regress. */
.it-chart-holder.filled { padding: 0; border: 0; background-color: transparent; }

/* Source / footnote — lives at the BOTTOM of the chart, typographic only. */
.it-chart-source {
  margin-top: var(--it-spacing-s);
  padding-top: 8px;
  border-top: 1px solid var(--it-color-slate-93);
  font-size: 12px;
  line-height: 1.4;
  color: var(--cds-charts-text-tertiary);
}
[data-it-charts-theme="dark"] .it-chart-source {
  border-top-color: var(--it-color-slate-28);
}
.it-chart-wrapper { position: relative; width: 100%; }

/* Title */
.it-chart-title {
  font-size: var(--cds-charts-title-size);
  font-weight: var(--cds-charts-title-weight);
  color: var(--cds-charts-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.it-chart-subtitle {
  font-size: var(--it-font-size-2);
  color: var(--cds-charts-text-tertiary);
  margin: 0 0 var(--it-spacing-s) 0;
  line-height: 1.3;
}

/* SVG shared rules */
.it-chart-wrapper svg { display: block; width: 100%; height: auto; overflow: visible; }
.it-chart-wrapper text {
  font-family: var(--cds-charts-font-family);
  font-size: var(--cds-charts-label-size);
  font-weight: var(--cds-charts-label-weight);
  fill: var(--cds-charts-axis-label);
}
/* ================= TYPOGRAPHY: numeric values in Lora, axis labels in sans ================
   Rule of thumb:
     - NUMBERS the eye treats as a headline value → Lora (serif)
       (.it-donut-center-value, KPI values)
     - Axis tick labels, threshold labels, donut center descriptor → Titillium (sans)
   Tweakable via --it-tweak-axis-* for axis labels. */

.it-chart-wrapper text.it-axis-label,
.it-chart-wrapper text.it-threshold-label,
.it-chart-wrapper text.it-donut-center-label {
  font-family: var(--it-tweak-axis-family, var(--it-font-sans));
  font-weight: var(--it-tweak-axis-weight, 500);
  font-style: var(--it-tweak-axis-style, normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* The donut / gauge CENTER VALUE is now an HTML <div> overlay that MIRRORS
   .kpi-value exactly: same tweak vars, same fallbacks, same line-height, same
   color slot, same tabular-nums + tracking. (SVG <text> fallback kept below.) */
.it-chart-wrapper .it-donut-center-value,
.it-donut-center-value {
  font-family: var(--it-tweak-kpi-family, var(--it-font-serif));
  font-size: var(--it-tweak-kpi-size, 40px);
  font-weight: var(--it-tweak-kpi-weight, 400);
  line-height: 1.05;
  color: var(--it-color-gray-10);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--it-tweak-kpi-tracking, -0.03em);
}
[data-it-charts-theme="dark"] .it-donut-center-value { color: var(--it-color-white); }

/* Center descriptor under the value \u2014 sans, small, muted. */
.it-chart-wrapper .it-donut-center-label,
.it-donut-center-label {
  font-family: var(--it-tweak-axis-family, var(--it-font-sans));
  font-size: 13px;
  font-weight: 500;
  color: var(--cds-charts-text-tertiary);
  margin-top: 4px;
  letter-spacing: 0;
}

/* Legacy SVG <text> fallback. Safe no-op when centers are rendered as HTML. */
.it-chart-wrapper text.it-donut-center-value {
  font-family: var(--it-tweak-kpi-family, var(--it-font-serif));
  font-weight: var(--it-tweak-kpi-weight, 400);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--it-tweak-kpi-tracking, -0.03em);
}

/* Axis */
.it-axis-line { stroke: var(--cds-charts-axis-stroke); stroke-width: 1; }
.it-axis-tick { stroke: var(--cds-charts-axis-stroke); stroke-width: 1; }
.it-axis-label { fill: var(--cds-charts-axis-label); }

/* Grid */
.it-grid-line { stroke: var(--cds-charts-grid-stroke); stroke-width: 1; shape-rendering: crispEdges; }
.it-grid-line-strong { stroke: var(--cds-charts-grid-stroke-strong); stroke-width: 1; }
.it-zero-line { stroke: var(--cds-charts-zero-line); stroke-width: 1; }

/* Bars */
.it-bar { transition: opacity .15s ease, filter .15s ease; }
.it-bar:hover { filter: brightness(0.92); }
.it-bar.dimmed { opacity: .35; }

/* Lines + areas + points */
.it-line { fill: none; stroke-width: var(--it-charts-line-width); stroke-linecap: round; stroke-linejoin: round; }
.it-line-em { stroke-width: var(--it-charts-line-width-em); }
.it-area { opacity: .22; }
.it-point { stroke: var(--cds-charts-background); stroke-width: 1.5; transition: r .12s ease; }
.it-point:not(.it-bubble):not(.it-lollipop):hover { r: var(--it-charts-point-size-hover); }
/* Bubbles & lollipops keep their rendered radius on hover — using the generic
   :hover rule would shrink a 30px bubble to 6px and cause a flicker loop
   (cursor falls outside, unhover, grows back…). */
.it-bubble:hover { filter: brightness(0.95); }
.it-lollipop:hover { filter: brightness(0.9); }

/* Donut */
.it-arc { transition: opacity .15s ease; }
.it-arc.dimmed { opacity: .35; }
/* Legacy SVG fallback for center value/label. The active donut + gauge in
   lightcharts.js render these as HTML divs inside .it-chart-wrapper, styled by
   the .it-chart-wrapper .it-donut-center-value rule earlier in this file
   (which mirrors .kpi-value exactly). */
text.it-donut-center-label {
  font-size: var(--it-font-size-2);
  fill: var(--cds-charts-text-tertiary);
  text-anchor: middle;
}

/* Gauge */
.it-gauge-track { fill: none; stroke: var(--cds-charts-meter-track); }
.it-gauge-fill { fill: none; stroke-linecap: round; }

/* Threshold line */
.it-threshold-line {
  stroke: var(--cds-charts-threshold-stroke);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.it-threshold-label {
  fill: var(--cds-charts-threshold-stroke);
  font-weight: var(--it-font-weight-semibold);
  font-size: var(--it-font-size-1);
}

/* Legend */
.it-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--it-spacing-xs) var(--it-charts-legend-gap);
  /* Legend renders ABOVE the chart body (between subtitle and chart). Keep breathing
     room on both sides so it doesn\u2019t collide with either. */
  margin: 0 0 var(--it-spacing-s) 0;
  padding: 0;
  list-style: none;
  font-size: var(--it-font-size-2);
  color: var(--cds-charts-text-secondary);
}
.it-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.it-chart-legend li.dimmed { opacity: .4; }
.it-chart-legend .swatch {
  width: 12px; height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 12px;
}

/* Tooltip */
.it-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--cds-charts-tooltip-bg);
  color: var(--cds-charts-tooltip-text);
  border: 1px solid var(--cds-charts-tooltip-border);
  border-radius: var(--it-radius-smooth);
  padding: 8px 10px;
  font-size: var(--it-font-size-2);
  line-height: 1.3;
  box-shadow: var(--it-elevation-medium);
  z-index: 10;
  min-width: 140px;
  opacity: 0;
  transition: opacity .1s ease;
  transform: translate(-50%, calc(-100% - 10px));
}
.it-chart-tooltip.visible { opacity: 1; }
.it-chart-tooltip .tt-label {
  font-weight: var(--it-font-weight-semibold);
  margin-bottom: 4px;
  color: var(--cds-charts-tooltip-text);
}
.it-chart-tooltip .tt-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-weight: var(--it-font-weight-regular);
}
.it-chart-tooltip .tt-key { display: inline-flex; align-items: center; gap: 6px; opacity: .85; }
.it-chart-tooltip .tt-key .dot { width: 8px; height: 8px; border-radius: 50%; }
.it-chart-tooltip .tt-val { font-variant-numeric: tabular-nums; font-weight: var(--it-font-weight-semibold); }

/* Skeleton */
.it-chart-skeleton { background: var(--cds-charts-skeleton-stroke); border-radius: var(--it-radius-smooth); position: relative; overflow: hidden; }
.it-chart-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: it-chart-shimmer 1.4s infinite;
}
@keyframes it-chart-shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }