/* ==========================================================================
   Grafiket: shtylla ditore, sparkline dhe lista me shirita.
   Seria e vetme ka ngjyren --series-1; teksti mbetet gjithmone ne ngjyrat e tekstit.
   ========================================================================== */

.chart { position: relative; }
.chart.is-refreshing { opacity: 0.5; transition: opacity var(--t) var(--ease); }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-sm); }

.chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-base-line { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-tick { fill: var(--ink-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-col { fill: var(--series-1); transition: opacity var(--t-fast) var(--ease); }
.chart-col.is-dim { opacity: 0.35; }
.chart-hit { fill: transparent; cursor: default; }
.chart-cursor { fill: var(--brand-soft); }

.chart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-3);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
}

.chart-tip-value { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.chart-tip-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }

.chart-empty { display: grid; place-items: center; height: 200px; color: var(--ink-3); font-size: var(--fs-sm); }

.chart-summary { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.chart-summary strong { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; }
.chart-summary span { font-size: var(--fs-xs); color: var(--ink-3); }

/* Tabela binjake e grafikut (qasshmeria). */
.chart-table { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); }
.chart-table .dt td, .chart-table .dt th { padding-top: 7px; padding-bottom: 7px; }

/* ----------------------------------------------------------- sparkline */

.spark-line { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.spark-area { fill: var(--series-1); opacity: 0.08; }
.spark-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }

/* --------------------------------------------------- lista me shirita */

.barlist { display: grid; gap: var(--s-3); }

.barlist-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
}

.barlist-label { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-track { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.barlist-bar { height: 10px; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--series-1); }
.barlist-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.barlist-extra { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 88px; }
.barlist-head { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto; gap: var(--s-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.barlist-head span:last-child { min-width: 88px; text-align: right; }