/* Tableau de bord de l'activité (dashboard.js) : chiffres en tête, courbe de tous, une carte par
   utilisateur. Mêmes variables que style.css ; les chiffres reprennent usage.css. */

#dash-figures { margin-bottom: 4px; }
.dash-chart { display: grid; gap: 8px; min-width: 0; }
.dash-chart > .muted, .settings-body .dash-chart > .muted { margin: 0; font-size: 12.5px; }
.dash-total { padding: 12px 14px; border-radius: 10px; background: var(--raised); }

.dash-bars { display: block; width: 100%; height: 72px; overflow: visible; }
.dash-total .dash-bars { height: 90px; }
.dash-bars rect { fill: color-mix(in srgb, var(--t1) 40%, transparent); transform-box: fill-box; transform-origin: 50% 100%; animation: dash-grow .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 12ms); transition: fill .15s ease; }
.dash-bars rect.today { fill: #1f9d55; }
.dash-bars rect.empty { fill: color-mix(in srgb, var(--t1) 10%, transparent); }
.dash-bars rect:hover { fill: var(--t1); }
@keyframes dash-grow { from { transform: scaleY(0); } }
.dash-refresh .dash-bars rect { animation: none; }

/* Pastille de l'utilisateur : ses initiales, point vert quand il est en ligne. */
.dash-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--t1) 10%, transparent); color: var(--t1); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.dash-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--raised); background: color-mix(in srgb, var(--t1) 25%, var(--raised)); }
.connector .dash-avatar::after { border-color: var(--bg); }
.dash-avatar.online::after { background: #1f9d55; animation: dash-pulse 2.4s ease-out infinite; }
@keyframes dash-pulse { 0% { box-shadow: 0 0 0 0 rgb(31 157 85 / .5); } 70%, 100% { box-shadow: 0 0 0 6px rgb(31 157 85 / 0); } }

.dash-card { display: grid; gap: 12px; }
.dash-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(120px, 1.4fr); gap: 10px; align-items: stretch; }
.dash-period { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg); min-width: 0; }
.dash-period .muted, .settings-body .dash-period .muted { margin: 0; font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-spark { display: flex; align-items: flex-end; padding: 10px 12px; border-radius: 10px; background: var(--bg); min-width: 0; }
.dash-spark .dash-bars { height: 40px; }
.dash-details { display: grid; gap: 14px; }
.dash-details:not([hidden]) { animation: card-open .2s ease; }

@media (max-width: 640px) {
  .dash-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-spark { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-bars rect, .dash-avatar.online::after, .dash-details:not([hidden]) { animation: none; }
}
.dash-limit { padding-top: 14px; border-top: 1px solid var(--line); }
.dash-limit > .muted, .settings-body .dash-limit > .muted { margin: 0; font-size: 12.5px; }
/* Compte : la même lecture, dans la carte « Consommation de l'IA ». */
#my-usage-body .dash-chart + .dash-chart { margin-top: 4px; }
/* Limites de demandes par modèle (usage.js) : une ligne par modèle, le compte et la limite à droite. */
.limit-rows { display: grid; padding: 2px 14px; border-radius: 10px; background: var(--bg); }
.fold .limit-rows, #my-usage-body .limit-rows { background: var(--raised); }
.limit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 0; font-size: 13.5px; }
.limit-row + .limit-row { border-top: 1px solid var(--line); }
.limit-row .usage-what .muted, .settings-body .limit-row .usage-what .muted { margin: 0; font-size: 12.5px; }
.limit-side { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.limit-side input { width: 120px; height: 34px; }
.limit-side .muted, .settings-body .limit-side .muted { margin: 0; font-size: 12.5px; }
.limit-used { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t2); font-size: 13px; }
.limit-used.full { color: var(--error); font-weight: 600; }
.limit-meter { grid-column: 1 / -1; height: 5px; }
@media (max-width: 520px) { .limit-row { grid-template-columns: 1fr; } .limit-side { justify-content: flex-start; } }