.portal-state {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 14px 0 0;
  padding: 10px 13px;
  border: 1px solid #cfe0e9;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  color: #536d7f;
  font-size: 11px;
}
.portal-state strong { color: #173950; }
.portal-state-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1b9362;
  box-shadow: 0 0 0 4px rgba(27, 147, 98, .12);
}
.portal-state.maintenance { border-color: #efcf8f; background: #fff7e7; }
.portal-state.maintenance .portal-state-dot { background: #d98a10; box-shadow: 0 0 0 4px rgba(217, 138, 16, .14); animation: state-pulse 1.4s ease-in-out infinite; }
.portal-state.operation { border-color: #b9d8ea; background: #eff8fd; }
.portal-state.operation .portal-state-dot { background: #177cad; box-shadow: 0 0 0 4px rgba(23, 124, 173, .13); animation: state-pulse 1.4s ease-in-out infinite; }
.portal-state.degraded { border-color: #e8b9bf; background: #fff1f3; }
.portal-state.degraded .portal-state-dot { background: #ba3344; box-shadow: 0 0 0 4px rgba(186, 51, 68, .12); }

.job-progress-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 1px;
}
.job-progress-row > div, .job-detail-progress > div {
  display: flex; justify-content: space-between; gap: 15px; color: #607687; font-size: 9px;
}
.job-progress-row strong, .job-detail-progress strong { color: #31536a; font-weight: 800; }
progress {
  width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px;
  background: #e3edf2; accent-color: #1979aa;
}
progress::-webkit-progress-bar { border-radius: 999px; background: #e3edf2; }
progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #166b9b, #2f9bc3); transition: width .35s ease; }
progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #166b9b, #2f9bc3); }
.job-progress-row.succeeded progress { accent-color: #168155; }
.job-progress-row.succeeded progress::-webkit-progress-value { background: #168155; }
.job-progress-row.failed progress { accent-color: #b52b3c; }
.job-progress-row.failed progress::-webkit-progress-value { background: #b52b3c; }
.job-detail-progress {
  display: grid; gap: 7px; margin: 10px 0 0; padding: 11px;
  border: 1px solid #d7e5ec; border-radius: 11px; background: #f5f9fb;
}

.timeline { display: grid; gap: 0; }
.timeline-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px;
  min-height: 43px; position: relative;
}
.timeline-item:not(:last-child)::before {
  content: ""; position: absolute; left: 6px; top: 15px; bottom: -2px; width: 1px; background: #d7e3e9;
}
.timeline-dot {
  width: 13px; height: 13px; margin-top: 2px; border-radius: 50%; border: 3px solid #d8e6ed; background: #fff; z-index: 1;
}
.timeline-item.done .timeline-dot { border-color: #75b99e; background: #187b56; }
.timeline-item.running .timeline-dot { border-color: #9dc9df; background: #1d7ca9; animation: state-pulse 1.4s ease-in-out infinite; }
.timeline-item.failed .timeline-dot { border-color: #efb5bd; background: #b62e40; }
.timeline-copy strong, .timeline-copy small { display: block; }
.timeline-copy strong { color: #31536a; font-size: 10px; }
.timeline-copy small { margin-top: 3px; color: #84939e; font-size: 8px; line-height: 1.35; }
.timeline-time { padding-top: 1px; color: #657d8d; font-size: 9px; font-weight: 800; white-space: nowrap; }

.diagnostic-list { display: grid; gap: 7px; }
.diagnostic-item {
  display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 8px 9px; border: 1px solid #e0e8ed; border-radius: 9px; background: #fbfdfe;
}
.diagnostic-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #99a8b2; }
.diagnostic-item.ok .diagnostic-dot { background: #1a835a; box-shadow: 0 0 0 3px rgba(26,131,90,.09); }
.diagnostic-item.warning .diagnostic-dot { background: #bd7c15; box-shadow: 0 0 0 3px rgba(189,124,21,.09); }
.diagnostic-item.error .diagnostic-dot { background: #b52e40; box-shadow: 0 0 0 3px rgba(181,46,64,.09); }
.diagnostic-item.pending .diagnostic-dot { background: #4382a5; box-shadow: 0 0 0 3px rgba(67,130,165,.09); }
.diagnostic-item.na .diagnostic-dot { background: #a8b4bc; }
.diagnostic-copy strong, .diagnostic-copy small { display: block; }
.diagnostic-copy strong { color: #34556c; font-size: 10px; }
.diagnostic-copy small { margin-top: 2px; color: #7c8e9a; font-size: 8px; line-height: 1.4; }

@keyframes state-pulse { 50% { opacity: .52; transform: scale(.84); } }

@media (max-width: 720px) {
  .portal-state { grid-template-columns: auto 1fr; }
  .portal-state > span:last-child { grid-column: 1 / -1; }
}

/* Update Center 2.1.0 · stati semantici e recupero destinazione */
.timeline-item.already-active .timeline-dot { border-color: #9bc8bb; background: #277e6c; }
.timeline-item.not-required .timeline-dot,
.timeline-item.unreached .timeline-dot { border-color: #d6dfe4; background: #a6b2ba; }
.timeline-item.historical .timeline-dot { border-color: #cbdce5; background: #7697a9; }
.timeline-item.not-required .timeline-copy strong,
.timeline-item.unreached .timeline-copy strong { color: #697d89; }
.timeline-item.historical .timeline-copy strong { color: #5b7787; }
.diagnostic-item.already_active .diagnostic-dot { background: #277e6c; box-shadow: 0 0 0 3px rgba(39,126,108,.09); }
.diagnostic-item.not_required .diagnostic-dot,
.diagnostic-item.unreached .diagnostic-dot { background: #a8b4bc; }
.diagnostic-item.historical .diagnostic-dot { background: #7697a9; box-shadow: 0 0 0 3px rgba(118,151,169,.08); }