.machine-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}
.machine-summary > div {
  background: #fff;
  border: 1px solid #e5ebef;
  border-radius: 9px;
  padding: 9px;
  text-align: center;
}
.machine-summary small,
.machine-summary strong { display: block; }
.machine-summary small { font-size: 9px; color: #8793a4; margin-bottom: 4px; }
.machine-summary strong { font-size: 14px; color: #26384a; }
.machine-list {
  max-height: 360px;
  overflow: auto;
  padding: 7px 20px;
  scrollbar-width: thin;
  scrollbar-color: #b9c5d3 #eef3f6;
}
.machine-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.machine-list::-webkit-scrollbar-track {
  background: #eef3f6;
  border-radius: 999px;
}
.machine-list::-webkit-scrollbar-thumb {
  background: #b9c5d3;
  border-radius: 999px;
}
.machine-list::-webkit-scrollbar-thumb:hover {
  background: #96a6b8;
}
.machine-row {
  grid-template-columns: 1.2fr .65fr .75fr .75fr .9fr 1.15fr;
  min-width: 820px;
}
.machine-row.warning { background: #fff9ef; }
.machine-row.warning .machine-name small { color: #c47b0d; }
.machine-row.offline { opacity: .62; }
.machine-row.offline .machine-name small { color: #9aa3b5; }
.machine-row.warning .tiny-bar i { background: #e7a22b; }
.machine-row.offline .tiny-bar i { background: #aeb7c4; }
@media (max-width: 720px) {
  .machine-summary { grid-template-columns: repeat(2, 1fr); }
  .machine-list { max-height: 300px; }
}