/* ----------------- history charts ------------------ */
.range-chips { display: flex; gap: 6px; }
.range-chips .btn { padding: 5px 14px; }
.range-chips .btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .charts { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px 6px; cursor: pointer; transition: border-color 0.2s;
}
.chart-card:hover { border-color: var(--panel-3); }
.chart-card .ch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.chart-card .ch-title { font-size: 13px; font-weight: 600; }
.chart-card .ch-exp { color: var(--muted); font-size: 14px; }
/* range stepper inside a chart card head (daily energy) */
.energy-nav { display: flex; align-items: center; gap: 8px; }
.enav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel-2, var(--panel));
  color: var(--fg); font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
}
.enav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.enav-btn:disabled { opacity: 0.35; cursor: default; }
.enav-label { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
              min-width: 96px; text-align: center; }
.chart-holder { width: 100%; }
.chart-empty { color: var(--muted); font-size: 12px; padding: 24px 0; text-align: center; }

/* uPlot dark theme tweaks */
.uplot { font-family: inherit; width: 100%; }
.u-title { color: var(--fg); font-size: 12px; font-weight: 600; }
.u-legend { font-size: 11px; color: var(--muted); }
.u-legend .u-value { color: var(--fg); font-variant-numeric: tabular-nums; }
.u-legend .u-marker { width: 10px; height: 10px; }
.u-tooltip { display: none; }

/* fullscreen modal */
.fs-modal {
  position: fixed; inset: 0; background: rgba(6,9,16,0.97); z-index: 60;
  display: none; flex-direction: column; padding: 16px;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
}
.fs-modal.open { display: flex; }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fs-head .fs-title { font-size: 16px; font-weight: 600; }
.fs-hint { color: var(--muted); font-size: 11px; }
.fs-body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.fs-body .uplot { width: 100%; }