/* Graphiques du panel (js/graphiques.js) — partagés par les deux interfaces. */

/* Bulle de lecture au survol d'une courbe */
.gp-bulle {
  position: absolute; z-index: 5; display: none; flex-direction: column; gap: 3px;
  padding: 7px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  background: rgba(10, 12, 18, 0.94); border: 1px solid #2A3244; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  font: 500 11px "JetBrains Mono", monospace; color: #C6CDDB;
}
.gp-bulle span { display: flex; align-items: center; gap: 6px; }
.gp-bulle i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.gp-bulle b { color: #F2EFE8; font-weight: 600; }
.gp-bulle-temps { color: #8A93A6; font-size: 10px; }

/* Les canvas se dimensionnent en CSS ; le moteur suit la densité de l'écran. */
canvas[id^="spark-"], canvas[id^="g24-"] { cursor: crosshair; }

/* CPU par cœur : barres fines, arrondies, grille qui s'adapte à la largeur. */
#sys-cpc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 10px 28px !important; }
.gp-coeur { display: flex; align-items: center; gap: 10px; }
.gp-coeur-nom { width: 52px; font: 500 11px "JetBrains Mono", monospace; color: #8A93A6; }
.gp-coeur-piste { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.gp-coeur-barre { height: 100%; border-radius: 999px; transition: width .4s ease, background .4s ease; }
.gp-coeur-val { width: 52px; text-align: right; font: 600 12px "JetBrains Mono", monospace; color: #F2EFE8; }