/* Retira todos os cartões de resumo e o espaço da linha */
body:has(.system-panel) .metric-card,
body:has(.system-panel) :has(> .metric-card) {
  display: none !important;
}

/* Serviços em uma faixa acima das métricas */
body:has(.system-panel) .system-panel .status-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-items: start !important;
  gap: 18px !important;
}
body:has(.system-panel) .system-panel .service-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
}
body:has(.system-panel) .system-panel .service-item {
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr) !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 6px 10px !important;
  padding: 12px !important;
}
body:has(.system-panel) .system-panel .service-icon {
  width: 32px !important;
  height: 32px !important;
  grid-column: 1;
  grid-row: 1;
}
body:has(.system-panel) .system-panel .service-information {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  min-width: 0 !important;
}
body:has(.system-panel) .system-panel .service-information strong,
body:has(.system-panel) .system-panel .service-information span {
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  line-height: 1.4 !important;
}
body:has(.system-panel) .system-panel .service-state {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Recursos com largura suficiente para os textos */
body:has(.system-panel) .system-panel .resource-list {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 18px !important;
}
body:has(.system-panel) .system-panel .usage-heading {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px !important;
}
body:has(.system-panel) .system-panel .technical-metrics {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
@media (max-width: 600px) {
  body:has(.system-panel) .system-panel .resource-list,
  body:has(.system-panel) .system-panel .technical-metrics {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}