/**
 * TextPilot – Charts
 * ECharts containers, donut center, legend, progress metrics, changelog.
 */

/* ── Chart Containers ─────────────────────────────────────────────────── */
.tp-chart-area  { height: 210px; width: 100%; }
.tp-chart-donut { height: 140px; width: 100%; }
.tp-chart-meta  { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: var(--tp-text-muted); }

/* ── Donut Center ─────────────────────────────────────────────────────── */
.tp-donut-wrap   { position: relative; }
.tp-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 90px; }
.tp-donut-total  { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--tp-text); font-variant-numeric: tabular-nums; }
.tp-donut-label  { display: block; font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--tp-text-muted); margin-top: 4px; }

/* ── Chart Legend ─────────────────────────────────────────────────────── */
.tp-chart-legend      { display: flex; flex-direction: column; gap: 7px; }
.tp-chart-legend-item { display: flex; align-items: center; gap: 8px; font-size: .75rem; padding: 3px 0; }
.tp-chart-legend-dot  {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--dot-color, #ccc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-color, #ccc) 22%, transparent);
}
.tp-chart-legend-label { color: var(--tp-text-secondary); flex: 1; font-weight: 500; font-size: .73rem; }
.tp-chart-legend-value { font-weight: 700; color: var(--tp-text); font-variant-numeric: tabular-nums; font-size: .73rem; }
.tp-chart-legend-pct   { font-size: .66rem; color: var(--tp-text-muted); margin-left: 3px; }
.tp-chart-legend-empty { font-size: .73rem; color: var(--tp-text-muted); font-style: italic; padding: 4px 0; }

/* ── Progress Metrics (replaced donuts) ──────────────────────────────── */
.tp-prog-legend { display: flex; flex-direction: column; gap: 9px; }
.tp-prog-label  { font-size: .72rem; color: var(--tp-text-secondary); font-weight: 500; }
.tp-prog-value  { font-size: .72rem; color: var(--tp-text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-prog-track  { height: 5px; background: var(--tp-border); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.tp-prog-fill   { height: 100%; width: var(--w, 0%); background: var(--c, var(--tp-brand)); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }

/* ── Changelog ────────────────────────────────────────────────────────── */
.tp-cl-body { max-height: 480px; overflow: auto; }
.tp-cl-badge {
  font-size: .62rem; font-weight: 800; padding: 2px 7px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}
.tp-cl-badge--neu    { background: rgba(16,185,129,.12); color: #059669; }
.tp-cl-badge--fix    { background: rgba(239,68,68,.10);  color: #DC2626; }
.tp-cl-badge--update { background: rgba(245,158,11,.10); color: #D97706; }
.tp-cl-badge--arch   { background: rgba(79,70,229,.10);  color: #4F46E5; }

.tp-cl-entry          { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; }
.tp-cl-text           { color: var(--tp-text-secondary); line-height: 1.6; }
.tp-cl-version-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: .5rem; cursor: pointer;
  border-radius: 6px; padding: 4px 6px; margin-left: -6px;
  transition: background .1s;
}
.tp-cl-version-header:hover { background: var(--tp-bg); }
.tp-cl-toggle          { font-size: .75rem; color: var(--tp-text-muted); margin-left: auto; }
.tp-cl-version-date    { font-size: .72rem; color: var(--tp-text-muted); }
.tp-cl-version-subtitle { font-size: .85rem; font-weight: 600; letter-spacing: -.01em; }
.tp-cl-last-mod        { font-size: .8rem; }

/* ── Status Dots ──────────────────────────────────────────────────────── */
.tp-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--tp-border);
  flex-shrink: 0; transition: background .4s, box-shadow .4s;
}
.tp-dot--ok   { background: var(--tp-success); box-shadow: 0 0 0 3px rgba(16,185,129,.22), 0 0 10px rgba(16,185,129,.4); }
.tp-dot--warn { background: var(--tp-warning); box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.tp-dot--err  { background: var(--tp-danger);  box-shadow: 0 0 0 3px rgba(239,68,68,.22),  0 0 10px rgba(239,68,68,.4); }

/* ── Dark Mode: Charts ────────────────────────────────────────────────── */
[data-theme="dark"] .tp-chart-legend-label { color: var(--tp-text-secondary); }
[data-theme="dark"] .tp-chart-legend-value { color: var(--tp-text); }
[data-theme="dark"] .tp-donut-total  { color: #F0F2F8; }
[data-theme="dark"] .tp-donut-label  { color: var(--tp-text-muted); }
[data-theme="dark"] .tp-chart-meta   { color: var(--tp-text-muted); }
[data-theme="dark"] .tp-prog-track   { background: var(--tp-border); }
[data-theme="dark"] .tp-prog-label   { color: var(--tp-text-secondary); }
[data-theme="dark"] .tp-prog-value   { color: var(--tp-text-muted); }
[data-theme="dark"] .tp-cl-version-header:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .tp-cl-text            { color: var(--tp-text-secondary); }
[data-theme="dark"] .tp-cl-version-subtitle { color: var(--tp-text); }
[data-theme="dark"] .tp-cl-version-date    { color: var(--tp-text-muted); }
[data-theme="dark"] .tp-cl-last-mod        { color: var(--tp-text-secondary); }