/* ============================================================
   Balans: training (programma, sessie, sets, rusttimer)
   Accent: --kracht. Breedtes worden in JavaScript gezet: de CSP
   staat geen stijl in de HTML toe.
   ============================================================ */

/* ── Weekvoortgang ───────────────────────────────────────────── */
.week-dots { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
.week-dot {
  width: 26px;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
}
.week-dot.done { background: var(--a); }
.plan-card .chip.warn { margin: 0 0 var(--sp-2); }

/* ── Sessie ──────────────────────────────────────────────────── */
.session-view { gap: var(--sp-4); }
.session-progress { margin-bottom: var(--sp-2); }
.session-nav { display: flex; gap: var(--sp-3); }
.session-nav .btn { flex: 1 1 0; }
.session-nav .btn[disabled] { opacity: 0.4; pointer-events: none; }

.sets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.set {
  display: grid;
  grid-template-columns: 20px 78px 14px 78px 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.set:first-child { border-top: 0; }
.set.done { opacity: 0.62; }
.set-nr { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.set-x { text-align: center; color: var(--ink-3); }
.set-field { display: block; }
.rir-chips { gap: 4px; justify-content: flex-end; }
.rir-chips .chip-btn { min-width: 30px; min-height: 30px; padding: 0 6px; }
.chip-btn.on { border-color: var(--a); background: color-mix(in srgb, var(--a) 22%, transparent); color: var(--ink); }
.set-done { border: 1px solid var(--line); }
.set-done.on { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); }

/* ── Uitleg bij een oefening ─────────────────────────────────── */
.exercise-sheet .steps { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink-2); }
.mistakes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mistakes li { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }
.mistakes svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--warn); }

/* ── Rusttimer ───────────────────────────────────────────────── */
.rest-timer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  z-index: var(--z-toast);
  width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--elev-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rest-bar { height: 4px; background: rgba(255, 255, 255, 0.08); }
.rest-fill { height: 100%; width: 0; background: var(--kracht); transition: width 1s linear; }
.rest-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.rest-label { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rest-time { font-family: var(--mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 981px) {
  .rest-timer { left: calc(50% + var(--sidebar-w) / 2); bottom: var(--sp-5); }
}

@media (max-width: 640px) {
  .set {
    grid-template-columns: 16px 1fr 12px 1fr auto;
    grid-template-areas:
      "nr weight x reps done"
      "rir rir rir rir rir";
    row-gap: var(--sp-2);
  }
  .set-nr { grid-area: nr; }
  .set-field:nth-of-type(1) { grid-area: weight; }
  .set-x { grid-area: x; }
  .set-field:nth-of-type(2) { grid-area: reps; }
  .set-done { grid-area: done; }
  .rir-chips { grid-area: rir; justify-content: flex-start; }
}

@media (max-width: 420px) {
  .session-nav { flex-direction: column; }
  .rir-chips .chip-btn { min-width: 34px; }
}

/* ── Bewegen ─────────────────────────────────────────────────── */
.cardio-card .bar { margin-bottom: var(--sp-2); }
.bar-fill.m-steps { background: var(--beweging); }
.cardio-card .entries { margin-top: var(--sp-3); }
.walk-sheet .stat-row { margin-bottom: 0; }
.health-card code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.token {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--elev);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ── Analyse ─────────────────────────────────────────────────── */
.analysis-card { display: grid; gap: var(--sp-3); }
.progress-list { list-style: none; margin: 0; padding: 0; display: grid; }
.progress-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.progress-list li:first-child { border-top: 0; }
.progress-main { display: grid; gap: 2px; min-width: 0; }
.progress-list .spark { width: 120px; flex: none; }
.bar-fill.m-muscle { background: var(--kracht); }
.analysis-card .section-label { margin-top: var(--sp-2); }

@media (max-width: 420px) {
  .progress-list .spark { width: 90px; }
}
.record-chip { margin: 0; }

/* ── Wat je Watch meet ───────────────────────────────────────── */
.health-card { display: grid; gap: var(--sp-3); }
.health-sparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.health-sparks .spark { width: 100%; }
.health-card .stat-row { margin-bottom: 0; }

@media (max-width: 640px) {
  .health-sparks { grid-template-columns: minmax(0, 1fr); }
}

/* ── Stappen per dag ─────────────────────────────────────────── */
/* Stappen per dag over een maand: de staafjes vullen de breedte, hoeveel dagen het er ook
   zijn. grid-auto-columns houdt ze even breed zonder dat het aantal in de CSS hoeft te staan. */
.step-history { margin-top: var(--sp-3); }
.step-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  align-items: end;
}
.step-days li { display: grid; justify-items: center; }
.step-bar {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: flex-end;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.step-bar.leeg { border: 1px dashed var(--line-strong); background: none; }
.step-fill { width: 100%; height: 0; border-radius: inherit; background: var(--beweging); transition: height var(--t-slow) var(--ease-out); }
.step-days .today .step-fill { background: var(--a); }
.step-days .today .step-bar { outline: 1px solid var(--line-strong); outline-offset: 1px; }
.step-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .step-days { gap: 2px; }
  .step-bar { height: 46px; }
}

@media (max-width: 420px) {
  .step-bar { height: 40px; }
  .step-axis { font-size: 10px; }
  /* Op de smalste telefoons is de middelste as-tekst luxe die de rest in de knel brengt. */
  .step-axis span:nth-child(2) { display: none; }
}