/* ==========================================================================
   Mesociclo · Obiettivo — card recap in Info Cliente + modal dettaglio
   Riusa: .client-detail-card, .copy-day-modal-*, .analytics-loading,
   .analytics-no-data, variabili di tema (--text-muted, --success, --gradient-app-start).
   ========================================================================== */

.mesocycle-recap-card__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mesocycle-recap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 120px;
}

/* --- Stato vuoto --- */
.mesocycle-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 18px;
  border: 1px dashed var(--border-medium);
  border-radius: 16px;
  background: var(--bg-surface-raised);
  text-align: left;
}

.mesocycle-empty strong {
  color: var(--text-heading);
  font-size: 1.02em;
}

.mesocycle-empty span {
  color: var(--text-secondary);
  line-height: 1.4;
}

.mesocycle-empty .btn {
  margin-top: 6px;
}

/* --- Recap compilato --- */
.mesocycle-recap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
}

.mesocycle-recap__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mesocycle-recap__name {
  color: var(--text-heading);
  font-size: 1.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mesocycle-recap__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gradient-app-start) 16%, transparent);
  color: var(--gradient-app-start);
  white-space: nowrap;
}

.mesocycle-recap__badge--cut {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.mesocycle-recap__badge--bulk {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

.mesocycle-recap__badge--recomp {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  color: var(--info);
}

.mesocycle-recap__badge--maintenance {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-secondary);
}

.mesocycle-recap__badge--performance {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

/* Anello di progresso — stessa tecnica di .weight-hero__ring (conic-gradient) */
.mesocycle-recap__ring {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  background: conic-gradient(
    var(--success) 0 var(--meso-pct, 0%),
    color-mix(in srgb, var(--success) 16%, transparent) var(--meso-pct, 0%) 100%
  );
}

.mesocycle-recap__ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg-surface-raised);
}

.mesocycle-recap__ring-value,
.mesocycle-recap__ring-lab {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  grid-column: 1;
}

.mesocycle-recap__ring-value {
  grid-row: 1;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-heading);
}

.mesocycle-recap__ring-lab {
  grid-row: 2;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mesocycle-recap__meta {
  grid-column: 1;
  grid-row: 2;
  color: var(--text-muted);
  font-size: 0.86em;
}

.mesocycle-recap__expired {
  color: var(--danger);
  font-weight: 700;
}

.mesocycle-recap__secondary {
  grid-column: 1 / -1;
  grid-row: 3;
  list-style: none;
  margin: 4px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.mesocycle-recap__secondary li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.85em;
}

.mesocycle-recap__secondary li span {
  color: var(--text-muted);
}

.mesocycle-recap__secondary li strong {
  color: var(--text-heading);
}

.mesocycle-recap__closure {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--success-border, var(--success));
  background: var(--success-bg-light, color-mix(in srgb, var(--success) 12%, transparent));
  color: var(--success-text, var(--success));
  font-size: 0.85em;
  font-weight: 700;
}

/* Mesocicli precedenti: solo i piu' recenti (slice(0,4) lato JS), riempie lo
   spazio che restava vuoto sotto l'anello quando la card non ha secondari o
   banner di chiusura. Il dettaglio completo dello storico resta nel modal. */
.mesocycle-recap__history {
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mesocycle-recap__history-lab {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mesocycle-recap__history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mesocycle-recap__history li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.85em;
}

.mesocycle-recap__history-name {
  color: var(--text-heading);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.mesocycle-recap__history-period {
  color: var(--text-muted);
  margin-left: auto;
}

.mesocycle-recap__history-outcome {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-secondary);
}

.mesocycle-recap__history-outcome--reached {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.mesocycle-recap__history-outcome--partial {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

.mesocycle-recap__history-outcome--missed {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

/* --- Modal --- */
.mesocycle-modal-content {
  max-width: 1200px !important;
  width: 95vw !important;
}

.mesocycle-modal-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
}

/* ==========================================================================
   Sezioni del modal — Task 11/12.
   Le classi realmente emesse da js/mesocycle.js usano il prefisso "mz-"
   (abbreviato rispetto alla bozza iniziale del piano, che qui sotto usava
   ancora "meso-"): questo file era rimasto scritto per la bozza e non
   corrispondeva a nulla nel DOM reale, tranne il piccolo blocco campi/paniere
   (.meso-field, .meso-basics, .meso-basket*) rimasto invariato per
   coincidenza. Corretto per intero sul markup reale (verificato riga per riga
   contro js/mesocycle.js e il mockup statico in components/client-detail.html).
   ========================================================================== */

.mz-modal {
  display: flex;
  flex-direction: column;
}

/* --- Header + hero (renderMesocycleHeader) --- */
.mz-head {
  padding: 20px 24px 0;
}

.mz-head-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mz-h-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--gradient-app-start) 16%, transparent);
  color: var(--gradient-app-start);
}

.mz-h-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-h-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mz-eyebrow {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mz-title {
  font-size: 1.2em;
  font-weight: 800;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mz-obj-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gradient-app-start) 16%, transparent);
  color: var(--gradient-app-start);
}

.mz-client {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: var(--text-secondary);
}

.mz-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mz-close:hover {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-heading);
}

.mz-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0 20px;
}

/* Anello di progresso — stessa tecnica di .weight-hero__ring (conic-gradient) */
.mz-ring {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--success) 0 calc(var(--pct, 0) * 1%),
    color-mix(in srgb, var(--success) 16%, transparent) calc(var(--pct, 0) * 1%) 100%
  );
}

.mz-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--bg-surface-raised);
}

.mz-ring-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mz-ring-txt b {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-heading);
}

.mz-ring-txt small {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mz-hero-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mz-hero-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mz-hero-metric .lab {
  font-size: 0.8em;
  color: var(--text-muted);
  font-weight: 600;
}

.mz-hero-metric .val {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--text-heading);
}

.mz-hero-metric .val .arrow {
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 2px;
}

.mz-bar {
  height: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  overflow: hidden;
}

.mz-bar span {
  display: block;
  height: 100%;
  background: var(--success);
  border-radius: 6px;
}

.mz-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mz-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.mz-pill svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-pill.urgent {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}

/* --- Corpo del modal --- */
.mz-body {
  padding: 0 24px 20px;
}

/* --- Barre in testa al corpo (baseline stale / chiusura) --- */
.mz-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
}

.mz-alert svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-alert--baseline {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-surface-raised));
}

.mz-alert--closure {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 8%, var(--bg-surface-raised));
}

.mz-alert-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mz-alert-txt strong {
  color: var(--text-heading);
  font-size: 0.92em;
}

.mz-alert-txt span {
  color: var(--text-secondary);
  font-size: 0.85em;
}

.mz-alert-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.mz-alert-actions--closure select,
.mz-alert-actions--closure input[type="text"] {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface-raised);
  color: var(--text-heading);
  font-size: 0.85em;
}

.mz-alert-actions--closure input[type="text"] {
  min-width: 160px;
}

/* --- Intestazione di sezione (Prerequisiti / Obiettivi / Nutrizione / ...) --- */
.mz-sec {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mz-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mz-sec-head h4 {
  margin: 0;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
}

.mz-sec-head .line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-light);
}

.mz-sec-head .count {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Barra prerequisiti --- */
.mz-prereq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mz-prq {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
  font-size: 0.85em;
}

.mz-prq--ok {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.mz-prq--ok .mz-prq-dot {
  color: var(--success);
}

.mz-prq--warn {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-surface-raised));
}

.mz-prq--warn .mz-prq-dot {
  color: var(--warning);
}

.mz-prq--blocked {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface-raised));
}

.mz-prq--blocked .mz-prq-dot {
  color: var(--danger);
}

.mz-prq-dot {
  display: flex;
  flex: 0 0 auto;
}

.mz-prq-dot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-prq-lab {
  color: var(--text-secondary);
  font-weight: 600;
}

.mz-prq-reason {
  color: var(--text-muted);
}

.mz-prq-link {
  color: var(--gradient-app-start);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mz-prq-link:hover {
  text-decoration: underline;
}

/* --- Dati di base del periodo --- */
.meso-basics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.meso-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
}

.meso-field span {
  color: var(--text-muted);
  font-weight: 600;
}

.meso-field input[type="text"],
.meso-field input[type="number"],
.meso-field input[type="date"],
.meso-field select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface-raised);
  color: var(--text-heading);
  font-size: 0.95em;
}

.meso-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.meso-field--checkbox span {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Checkbox nativa (es. "Visibile al paziente") ridisegnata come interruttore
   pillola — stesse misure/colori di .mz-sw poco sotto, per coerenza visiva
   col resto del modal invece della checkbox quadrata di default. */
.meso-field--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  border: none;
  border-radius: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  background: color-mix(in srgb, var(--text-muted) 25%, transparent);
  transition: background 0.15s ease;
}

.meso-field--checkbox input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.meso-field--checkbox input[type="checkbox"]:checked {
  background: var(--gradient-app-start);
}

.meso-field--checkbox input[type="checkbox"]:checked::before {
  transform: translateX(14px);
}

.meso-field--checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gradient-app-start);
  outline-offset: 2px;
}

/* --- Card target --- */
.mz-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.mz-tcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
}

.mz-tcard--primary {
  border-color: color-mix(in srgb, var(--gradient-app-start) 40%, transparent);
}

.mz-tcard--off {
  opacity: 0.75;
}

.mz-tcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mz-tcard-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.92em;
}

.mz-tcard-name svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex: 0 0 auto;
}

.mz-tcard-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mz-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gradient-app-start) 16%, transparent);
  color: var(--gradient-app-start);
}

/* Interruttore on/off dei target (attiva/disattiva obiettivo) */
.mz-sw {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--text-muted) 25%, transparent);
}

.mz-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.mz-sw.on {
  background: var(--gradient-app-start);
}

.mz-sw.on::after {
  transform: translateX(14px);
}

.mz-sw:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mz-tcard-vals {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mz-tval {
  flex: 1 1 0;
  min-width: 0;
}

.mz-tval .k {
  font-size: 0.72em;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mz-tval .v {
  font-size: 1em;
  font-weight: 800;
  color: var(--text-heading);
}

.mz-tarrow {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.mz-tarrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-tprog {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mz-tprog-bar {
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  overflow: hidden;
}

.mz-tprog-bar span {
  display: block;
  height: 100%;
  background: var(--success);
  border-radius: 6px;
}

.mz-tprog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8em;
  color: var(--text-muted);
}

.mz-tprog-meta b {
  color: var(--text-heading);
}

/* Avviso "sopra la soglia" per le misure a direzione 'up_capped' (pliche in
   Massa/Performance): non e' un errore di validazione (niente sfondo pieno,
   niente blocco), solo un richiamo — stesso token --warning delle altre
   segnalazioni non bloccanti del modal (.mz-prq--warn). */
.mz-cap-warn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}

.mz-cap-warn-lab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--warning);
}

.mz-cap-warn-lab svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.mz-cap-warn ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.82em;
  color: var(--text-muted);
}

.mz-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: var(--text-secondary);
}

.mz-tcard-editor {
  margin-top: 2px;
}

.mz-tcard-editor__value input {
  width: 100%;
}

/* --- Paniere --- */
.meso-basket {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meso-basket__delta input {
  width: 100%;
}

.meso-basket__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meso-basket__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-muted) 6%, transparent);
}

.meso-basket__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
}

/* flex-wrap invece di justify-content: space-between (era senza vincoli di
   larghezza) perche' l'opzione "aumenta, non oltre la soglia" e' molto piu
   lunga di "ridurre"/"aumentare": senza spazio per andare a capo, il select
   sforava il bordo del modal invece di restare dentro la colonna. */
.meso-basket__dir {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface-raised);
  font-size: 0.82em;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.meso-basket__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82em;
}

/* --- Salvataggio + footer + bottoni --- */
.mz-save-error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 0.85em;
  font-weight: 600;
}

.mz-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-light);
}

.mz-foot-sum {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85em;
  color: var(--text-secondary);
}

.mz-foot-sum b {
  color: var(--text-heading);
}

.mz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
  background: var(--gradient-app-start);
  color: #fff;
  transition: opacity 0.15s ease;
}

.mz-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-btn:hover {
  opacity: 0.88;
}

.mz-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mz-btn-primary {
  background: var(--gradient-app-start);
  color: #fff;
}

.mz-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-medium);
}

.mz-btn-ghost:hover {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  opacity: 1;
}

.mz-btn-sm {
  padding: 6px 12px;
  font-size: 0.8em;
  border-radius: 8px;
}

/* --- Nutrizione — Task 12 --------------------------------------------- */
.mz-nutri {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* La card kcal richiama visivamente il badge di categoria del recap: il delta
   applicato (-20%, -10%...) si legge accanto al numero come sua diretta
   conseguenza, non come valore isolato. */
.mz-kcal {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
}

.mz-kcal-delta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 700;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.mz-kcal-delta--surplus {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}

.mz-kcal-editor {
  flex: 1 1 160px;
  min-width: 140px;
}

.mz-macros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.mz-macro {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
}

.mz-macro-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.mz-macro-top .n {
  font-size: 0.8em;
  color: var(--text-secondary);
  font-weight: 600;
}

.mz-macro-top .g {
  font-size: 0.9em;
  font-weight: 800;
  color: var(--text-heading);
}

.mz-macro-bar {
  height: 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  overflow: hidden;
}

.mz-macro-bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
}

.mz-macro--p .mz-macro-bar span {
  background: var(--info);
}

.mz-macro--c .mz-macro-bar span {
  background: var(--gradient-app-start);
}

.mz-macro--f .mz-macro-bar span {
  background: var(--warning);
}

.mz-nutri-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.mz-nutri-actions {
  display: flex;
  justify-content: flex-end;
}

/* --- Training — Task 12 ------------------------------------------------- */
.mz-train {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface-raised);
}

.mz-train-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-secondary);
}

.mz-train-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mz-train-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mz-train-txt strong {
  color: var(--text-heading);
  font-size: 0.9em;
}

.mz-train-txt span {
  color: var(--text-muted);
  font-size: 0.82em;
}

/* --- Recap del periodo — Task 12 ---------------------------------------
   Tre colonne (diete/schede/misurazioni), ognuna una sequenza cronologica: ogni
   riga ha un'ancora data a larghezza fissa a sinistra (colonna allineata), un
   titolo-link, uno stato con lo stesso linguaggio "pillola" dei prerequisiti, e
   per le righe in overflow un trattamento visivamente distinto (bordo + badge)
   che rompe l'allineamento standard per segnalare che sfora il periodo.
   L'ancora ha una larghezza fissa e "white-space: nowrap" apposta: e' il fix
   della sovrapposizione data/badge segnalata a schermo (senza, "16 ago" andava
   a capo su due righe e finiva sotto lo stato "In corso"). */
.mz-recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.mz-rcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mz-rcol-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mz-rcol-title svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex: 0 0 auto;
}

.mz-rcol-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mz-recap__empty {
  color: var(--text-muted);
  font-size: 0.82em;
  padding: 4px 0;
}

.mz-rrow {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.mz-rrow:nth-child(odd) {
  background: color-mix(in srgb, var(--text-muted) 5%, transparent);
}

.mz-rdate {
  padding-top: 2px;
  font-size: 0.76em;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.mz-rmain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.mz-rmain > a {
  flex: 1 1 100%;
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.88em;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mz-rmain > a:hover {
  text-decoration: underline;
}

.mz-rstatus {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72em;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-secondary);
}

.mz-rstatus--live {
  background: color-mix(in srgb, var(--gradient-app-start) 16%, transparent);
  color: var(--gradient-app-start);
}

.mz-rstatus--ok {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.mz-rstatus--warn {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}

/* Riga in overflow: bordo che rompe l'allineamento standard, cosi' lo sforamento
   si vede prima ancora di leggere il badge. */
.mz-rrow--overflow {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.mz-rrow-overflow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--warning) 40%, transparent);
}

.mz-rrow-actions {
  display: flex;
  gap: 6px;
}