/* ============================================================
   RiverSync DS v2 — CHARTS layer
   Data-visualization tokens + structural CSS for the React
   chart kit (components/charts/). Imported by styles.css.
   ============================================================ */

/* ---------- Categorical data-viz ramp (8 series) ----------
   Series 1 is always the UI accent. Hues vary, chroma/lightness
   stay muted and even so no series shouts. Use IN ORDER. */
:root {
  --chart-1: #3679AC;  /* accent blue  — primary metric        */
  --chart-2: #3E8A83;  /* teal         — second metric         */
  --chart-3: #7A6FB3;  /* violet                                */
  --chart-4: #A8843C;  /* ochre                                 */
  --chart-5: #B0617F;  /* rose                                  */
  --chart-6: #5E8A4C;  /* moss                                  */
  --chart-7: #64798A;  /* slate        — "other" / remainder    */
  --chart-8: #B06A45;  /* clay                                  */

  /* structural */
  --chart-grid:        var(--border);          /* hairline gridlines     */
  --chart-axis:        var(--fg3);             /* tick + axis labels     */
  --chart-track:       var(--surface-3);       /* gauge/meter/donut rest */
  --chart-area-alpha:  0.24; /* @kind other */
  --chart-band:        rgba(63,138,69,0.07);   /* target-band fill       */
  --chart-tip-bg:      var(--surface);
  --chart-tip-border:  var(--border-strong);
}
[data-theme="dark"] {
  --chart-1: #5A9BD0;
  --chart-2: #5CB3A9;
  --chart-3: #A096D8;
  --chart-4: #C9A65A;
  --chart-5: #D188A4;
  --chart-6: #8CBA76;
  --chart-7: #8FA3B4;
  --chart-8: #D08F6A;
  --chart-band: rgba(93,176,99,0.10);
}

/* small segmented control (chart range switchers) */
.rs-seg--sm button{ height:24px; font-size:11.5px; padding:0 9px; }

/* ---------- Chart frame ---------- */
.rs-chart{ position:relative; }
.rs-chart svg{ display:block; }
.rs-chart text{ font-family:var(--rs-font-sans, Roboto, sans-serif); }

/* crosshair + hover dot (line charts) */
.rs-chart__cross{
  position:absolute; top:0; bottom:0; width:0;
  border-left:1px dashed var(--border-strong);
  pointer-events:none;
}
.rs-chart__dot{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent);
  transform:translate(-50%,-50%); pointer-events:none;
}

/* tooltip */
.rs-chart__tip{
  position:absolute; top:8px; z-index:4; pointer-events:none;
  background:var(--chart-tip-bg); border:1px solid var(--chart-tip-border);
  border-radius:var(--r-md, 4px); box-shadow:var(--shadow-lg);
  padding:7px 10px; min-width:88px;
  font-size:11.5px; line-height:1.45; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.rs-chart__tip b{ font-weight:600; font-size:12.5px; }
.rs-chart__tipx{
  font-size:10.5px; color:var(--fg3); margin-bottom:3px; white-space:nowrap;
}
.rs-chart__tiprow{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.rs-chart__tiprow .sw{
  width:8px; height:8px; border-radius:2px; flex:none;
}
.rs-chart__tiprow .nm{ color:var(--fg2); margin-right:auto; padding-right:10px; }
.rs-chart__tiprow b{ font-variant-numeric:tabular-nums; }

/* ---------- Legend ---------- */
.rs-chartlegend{
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center;
  font-size:11.5px; color:var(--fg2);
}
.rs-chartlegend__item{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; padding:2px 0; margin:0;
  font:inherit; color:inherit; cursor:default;
}
.rs-chartlegend__item .sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.rs-chartlegend__item.is-toggle{ cursor:pointer; }
.rs-chartlegend__item.is-toggle:hover{ color:var(--fg); }
.rs-chartlegend__item.is-off{ color:var(--fg3); }
.rs-chartlegend__item.is-off .sw{ background:var(--chart-track) !important; }
.rs-chartlegend__item.is-off .lb{ text-decoration:line-through; text-decoration-color:var(--fg3); }
.rs-chartlegend__item:focus-visible{ outline:none; box-shadow:var(--ring-shadow, 0 0 0 3px var(--ring)); border-radius:3px; }

/* ---------- Meters / progress rows ---------- */
.rs-meter{ font-size:12px; color:var(--fg2); }
.rs-meter__head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:5px;
}
.rs-meter__label{ color:var(--fg2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-meter__value{
  margin-left:auto; color:var(--fg); font-weight:600;
  font-variant-numeric:tabular-nums; flex:none;
}
.rs-meter__sub{ color:var(--fg3); font-size:11px; flex:none; }
.rs-meter__track{
  position:relative; height:6px; border-radius:999px;
  background:var(--chart-track); overflow:visible;
}
.rs-meter__fill{
  position:absolute; inset:0 auto 0 0; border-radius:999px;
  background:var(--accent); min-width:2px;
  transition:width .9s var(--rs-ease, cubic-bezier(.4,0,.2,1)), background-color .25s ease;
}
.rs-meter__target{
  position:absolute; top:-3px; bottom:-3px; width:0;
  border-left:2px solid var(--fg3); opacity:.7;
}
.rs-meter--sm .rs-meter__track{ height:4px; }
.rs-meter--lg .rs-meter__track{ height:8px; }
.rs-metergroup{ display:flex; flex-direction:column; gap:14px; }

/* ---------- Trend stat ---------- */
.rs-trendstat{
  display:flex; align-items:stretch; gap:14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg, 6px); box-shadow:var(--shadow-sm);
  padding:14px 16px;
}
.rs-trendstat__main{ min-width:0; flex:1 1 auto; }
.rs-trendstat__label{
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg3); margin-bottom:6px;
}
.rs-trendstat__value{
  font-size:24px; font-weight:600; color:var(--fg); line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.rs-trendstat__value .unit{
  font-size:13px; font-weight:500; color:var(--fg2); margin-left:4px;
}
.rs-trendstat__delta{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:500; margin-top:6px; color:var(--fg3);
}
.rs-trendstat__delta.up{ color:var(--success); }
.rs-trendstat__delta.down{ color:var(--danger); }
.rs-trendstat__spark{
  flex:0 0 96px; align-self:center; height:34px; min-width:0;
}

/* ---------- Heatmap ---------- */
.rs-heatmap{ font-size:10.5px; color:var(--chart-axis); }
.rs-heatmap__cell{
  position:relative; border-radius:2px; min-height:18px;
}
.rs-heatmap__cell.is-hover{
  outline:1.5px solid var(--fg); outline-offset:-1.5px; z-index:2;
}
.rs-heatmap__rowlab{
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:8px; white-space:nowrap;
}
.rs-heatmap__collab{ text-align:center; padding-top:6px; white-space:nowrap; }
.rs-heatmap__scale{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:10.5px; color:var(--chart-axis); font-variant-numeric:tabular-nums;
}
.rs-heatmap__ramp{ height:6px; flex:0 0 120px; border-radius:3px; }

/* ---------- YearHeatmap (calendar grid) ---------- */
.rs-yearmap{ font-size:10.5px; color:var(--chart-axis); }
.rs-yearmap__scroll{ overflow-x:auto; padding-bottom:2px; }
.rs-yearmap__cell{ min-height:0; border-radius:2px; }
.rs-yearmap__monthlab{ white-space:nowrap; padding-bottom:4px; overflow:hidden; }
.rs-yearmap__daylab{
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:8px; white-space:nowrap;
}

/* ---------- States: loading / empty / error ---------- */
.rs-chartstate{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; padding:12px;
  color:var(--fg3); font-size:12px;
}
.rs-chartstate__ic{
  width:34px; height:34px; border-radius:var(--r-md, 4px);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--fg3); margin-bottom:6px;
}
.rs-chartstate--error .rs-chartstate__ic{ background:var(--danger-soft); color:var(--danger); }
.rs-chartstate__title{ font-size:12.5px; font-weight:600; color:var(--fg2); }
.rs-chartstate__hint{ max-width:300px; line-height:1.5; }
.rs-chartstate .rs-btn{ margin-top:8px; }

/* loading skeleton */
.rs-chartskel{ position:relative; overflow:hidden; }
.rs-chartskel__bar{
  background:var(--surface-3); border-radius:3px;
}
.rs-chartskel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:rs-chartskel-sweep 1.6s ease infinite;
}
[data-theme="dark"] .rs-chartskel::after{
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
}
@keyframes rs-chartskel-sweep{ to{ transform:translateX(100%); } }

/* entrance — subtle, disabled for reduced motion */
@media (prefers-reduced-motion: no-preference){
  .rs-chart-enter{ animation:rs-chart-enter .25s var(--rs-ease, cubic-bezier(.4,0,.2,1)); }
  @keyframes rs-chart-enter{ from{ opacity:0; transform:translateY(3px); } }
}
@media (prefers-reduced-motion: reduce){
  .rs-meter__fill{ transition:none; }
  .rs-chartskel::after{ animation:none; }
}